在线看片免费人成视久网,欧美综合乱图图区乱图图区,欧美人与动性xxxxx交性

搜索

APP

起點課堂會員權益

職業(yè)體系課特權

線下行業(yè)大會特權

個人IP打造特權

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業(yè)技能直播

會員專屬社群

榮耀標識

發(fā)布

注冊 | 登錄

Sketch產品再設計：如何提升完善型產品的體驗

Aine

2017-03-17

1 評論 10085 瀏覽 31 收藏

16 分鐘

重新設計現有產品不是一件簡單的任務。許多人認為，當提到“再設計”這個概念的時候，他們將此理解為產品從零開始的設計過程，至少在設計團隊這不是最佳方式，因為這面臨著很大的風險?！皩Ξa品的現有價值會造成什么影響”，這個是最常關心的問題。許多人僅僅因為害怕損害產品價值，就繼續(xù)在現有產品上堆疊新功能。這個當然能被理解，但從長遠來看，那個產品將失去創(chuàng)新能力，并將淪為四不像。

對于“一個更高效地重新設計過程”這個話題，我有一些想法。但為了檢驗這一想法，我不想在一個很蹩腳的產品上進行設計，因為這將是很容易解決地。所以我選擇“Sketch”，是出于以下兩點原因：

第一，Sketch不是一個差的產品；事實上，它相當不錯并且在市場上也是一個很棒的產品。怎么去將現有的產品的體驗做得更好呢？這點很有挑戰(zhàn)而且很有意思。
第二，因為我每天用Sketch，所以我相當熟悉這個產品。我認為對于產品有一個深度的見解是很非常重要的。

免責聲明：通常在一個真實的Redesign項目中，你需要將許多用戶的反饋意見以及其他利益相關者、設計師們的立場考慮進去。在這個案例中，出于實際情況，我僅從我的使用反饋進行考慮。

第一步

首先，從高緯度到低維度對產品進行分析。我們需要清楚地知道哪里需要調整、哪里是現有產品的價值所在。當我提到從高緯度這個概念的時候，我想說的是去評估產品的核心目標：

問題：產品是否滿足基本的用戶期望？
回答：如果回答是肯定的話，那么無需打破這個設計，然后可以繼續(xù)。

對于上述問題的答案是否定的話，那么就需要從根本上審查產品，審查戰(zhàn)略規(guī)劃、KPI等方面，但我不想讓你忍受這些花哨的術語。

技術分析

現在讓我們開始從技術上分析這個產品是如何工作的，以及它如何解決用戶的需求，就先從界面布局開始。在Sketch里，界面布局是這樣的：

每個區(qū)塊的布局都有一個目標，并且基于每個目標，我們可以找出什么可以改進的。舉個栗子：

區(qū)塊1，目標：在圖層和頁面間導航。這個完全不需要打破再重新設計，但我們可以在視覺層面做一些小幅優(yōu)化來提升展示信息的可理解性、可讀性。
區(qū)塊2，目標：易操作畫板。顯而易見，這個不需要打破再重新設計。我很喜歡目前新建畫板和拖動組織它們以及構建視覺結構的便捷性。就目前而言，此處不需要進行改進。
區(qū)塊3，目標：擁有所有常用工具來管理我的對象的屬性。部分需要打破再重新設計。為什么？因為雖然比Photoshop好用點，但對于新手設計師而言還是有點不知所措。這個區(qū)塊不是重要區(qū)塊，但在視覺層面還可以進行設計優(yōu)化，讓它在視覺上更容易理解。
區(qū)塊4，目標：開誠布公地講，我不知道，但我猜這塊區(qū)域是高級功能區(qū)。這部分可以被打破再重新設計。為什么？因為在屏幕空間上這部分占據太大空間，在我的工作流中這部分的價值很?。≒S：我僅以我自己的體驗反饋來進行設計）。這部分可以設計地更好甚至能幫助提升整體的體驗價值。

好了，現在我們知道主要的挑戰(zhàn)是什么了。當然，每一個挑戰(zhàn)由許多細小的部分和細節(jié)組成。但再強調一點，這個僅僅是一個小的虛擬練習?？偠灾?，到現在為止，我們花了些時間來發(fā)現可以幫助我們改進產品而不損害核心價值的東西。換話句話說，我們可以繼續(xù)改進產品同時降低面臨的風險。

樣式/品牌分析

在這里用到了“品牌”這一詞，指得是產品視覺屬性，和我們通常理解的“品牌“不是一個概念。我單獨分離出來了“產品視覺屬性”這個話題。所以，Sketch的品牌狀態(tài)是什么？目前它還不錯但還能改進地更好。Sketch用了許多原生視覺組件。幸運的是，蘋果提供非常不錯的組件庫，但如果我們想在產品上有一個更好的提升，Sketch還需要更原創(chuàng)和可識別性的品牌屬性。

我們怎么做到這一點？我們如何發(fā)現理想的產品屬性是什么？抱歉地是，出于這次練習的目的，我們必須跳過這項工作，因為產品屬性并不容易而且很花費時間，通常設計很多討論、情緒版、用戶訪談等等。因此，我將從一個非常主觀的角度來分析這部分。

對我來說，Sketch需要清晰且易用；這些產品具有的最佳價值。它不像Photoshop那么亂，它非常友好，使用Sketch一段時間你會發(fā)現Sketch沿用了許多蘋果在用戶體驗領域的設計觀念。所以如果這些是視覺帶來的附加價值所在的話，那就基于這點進行改進。設計思路是更簡潔和更易用。

輸出結果

我花了一周時間來重新設計，以下是改進結果：

讓我們看看基于每個區(qū)塊在細節(jié)層面的改進之處：

（1）區(qū)塊1

這個區(qū)塊的設計挑戰(zhàn)僅有幾處；主要出發(fā)點是提升可讀性。首先為了提升可讀性，我們必須了解元素的層次結構：

Pages > Artboards > Layers / Groups > Layers / Groups (…)

這個設計挑戰(zhàn)的解決方式是創(chuàng)建一個更易識別的層次結構，無需改動太多這個產品已有的用戶操作體驗。

這不是太大的設計挑戰(zhàn)，但采用了更多的原創(chuàng)性的、簡潔的視覺風格，為此區(qū)域提供更高效的方案。

（2）區(qū)塊2

正如我之前所說，這塊區(qū)域沒有太多東西需要調整的。這塊區(qū)域讓我們有機會能夠放置一些通用功能，諸如縮放、網格、參考線等。我會在區(qū)塊4中進一步說明原因。在啟用參考線功能的情況下，此區(qū)塊的如下顯示：

將這些功能選項放置在此，主要是此功能與主畫板區(qū)的參考線相關，以此來提升用戶體驗。在原來的Sketch版本中，我沒有太多地使用這些功能，不是因為我不想用，而是這些功能和主操作區(qū)域相隔太遠，不易操作。這個設計方案調整了此問題。

（3）區(qū)塊3

這部分相對復雜，因為隨著每個選擇的對象不同而改變。只用一個案例來闡述改進之處，這部分主要是視覺效果?！岸询B”的設計方法非常不錯，有些對象在使用這個解決方案時，視覺組織上不再那么雜亂。

此外，我將經常使用的Craft插件做了展示設計，它非常方便。關于這些插件，我做了一些細微的改進。主要的改進將在接下來的部分進行說明。

（4）區(qū)塊4

這部分是大工作量的處理。這個區(qū)塊是需要花較大精力的部分，讓我們重頭開始看看改進。

我將區(qū)塊劃分成3個區(qū)域：

（1）區(qū)域1

此區(qū)域的目標是提供一個可創(chuàng)建對象的入口?，F在，一切都被合并成一個按鈕，但有兩種對象需要特殊處理：符號和文本樣式。

符號是一個非常強大的功能，它幫助我們不僅節(jié)省大量的時間，它也有助于我們保持設計的一致性，所以如果在我們的設計過程中的符號的入口更明顯的話，那么將更清楚地了解如何更好地使用這些符號。許多設計師甚至都不知道符號到底能做什么，這是一個要解決的大問題。

文本樣式現在作為屬性欄的一部分而存在。文本樣式非常重要，因為在實現設計的時候，就需要在代碼中預定好樣式結構（例如h1,h2,h3,p,鏈接和更多的HTML標簽）。

（2）區(qū)域2

這個區(qū)域是多功能區(qū)域，因為它會根據我們選擇的元素而改變。因此，在我們不選擇任何對象的情況下將會顯示常用對象。這應該是一個非常實用的功能，因為我們總有諸如按鈕、符號或其他在我們設計過程中用到的東西。拖動他們到畫板中就能使用，這是不是非常棒！

在下面的案例中，當我選中了某個對象，上方區(qū)域根據需要進行動態(tài)變化。舉個栗子，當我選中了一個矢量圖形諸如長方形，然后我就可以訪問上方的功能選項來操作那個圖形了。

除了形狀之外還有很多情況，這個區(qū)域可以擴展出更大的便捷性，例如文本、符號、圖片等功能。每個功能都對應著不同的需求。這應該使這部分成為一個更有用、更智能的部分。我這里就不涵蓋所有的用例了，但我想你應該能想到的： )

（3）區(qū)域3

這個區(qū)域是一般功能項，包括Sketch當前缺失的和一些重要的功能項，如插件管理功能。當然，我也知道，你能夠在軟件上方的頂部菜單項中找到這些功能選項。但考慮到插件已經變成一個高頻使用的功能，而且插件也正在擴大產品本身的可能性，所以插件需要一個更合適的功能區(qū)，你覺得呢？

其他選項與我們目前在Sketch中看到的一樣別無二致。這里只是一些非常小的調整，諸如改善按鈕的外觀樣式。這樣設計是為了減少整個插件區(qū)塊的高度。這樣做是為了能夠給區(qū)塊2留出更多的空間。

你可能也注意到了我從這個區(qū)塊中刪除了一些功能項，例如參考線、網格、縮放選項。主要原因是為這個區(qū)域的主要功能留出更多空間。老實說，縮放功能是一個常用功能，但我們更多地是使用快捷方式，縮放功能更多地是一種信息展示而不是可交互的對象。還有參考線和網格，也是出于同樣的原因。這些功能項現在更接近主操作區(qū)域 —- 也就是畫板區(qū)域。