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

01-29

重新設計現有產品不是一件簡單的任務。許多人認為，當提到「再設計」這個概念的時候，他們將此理解為產品從零開始的設計過程，至少在設計團隊這不是最佳方式，因為這面臨著很大的風險。「對產品的現有價值會發生什麼應影響」，這個是最常關心的問題。許多人僅僅害怕損害產品價值，所以繼續在現有產品上堆疊新功能。這個當然能被理解，但從長遠來看，那個產品將失去創新能力，並將淪為四不像。

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

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

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

第一步

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

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

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

技術分析

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

每個區塊的布局都有一個目標，並且基於每個目標，我們可以找出什麼可以改進的。舉個栗子：

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

好了，現在我們知道主要的挑戰是什麼了。當然，每一個挑戰由許多小部分、細節組成。但再強調一點，這個僅僅是一個小的虛擬練習。總而言之，到現在為止，我們花了些時間來發現可以幫助我們改進產品而不損害核心價值的東西。換話句話說，我們可以繼續改進產品同時降低面臨的風險。

樣式/品牌分析

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

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

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

輸出結果

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

讓我們看看基於每個區塊在細節層面的改進之處:

區塊1

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

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

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

這不是太大的設計挑戰，但採用了更多的原創性的、簡潔的視覺風格，為此區域提供更高效的方案。

區塊2

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

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

區塊3

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

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

區塊4

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

我將區塊劃分成3個區域

區域1：此區域的目標是提供一個可創建對象的入口。現在，一切都被合併成一個按鈕，但有兩種對象需要特殊處理：符號和文本樣式。

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

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

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

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

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

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

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

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

補充

沒有一個好的歡迎界面的軟體是一個好軟體嗎？重申一遍，這個練習不是要重新再造一個輪子，因為現在的Sketch也是一個相當好用的軟體。但僅作為我個人意見的調整優化…

就是這樣，這是個非常有趣的小項目。我希望這個練習能夠幫助我們更清楚地了解重新設計產品的過程，在每個小決策中使用設計常識。我相信各位大拿能出更好的設計方案。但我還想再建議一下，不要讓你的個人想法干擾產品的主要目標，如果可能的話，邀請你團中的其他人加入進來。

祝愉快！

翻譯：Maker
校對：逗砂
原文鏈接：https://medium.com/@ederrengifo/re-dise%C3%B1ando-sketch-d616658e907e#.xt38sjlfz