重新設(shè)計(jì)現(xiàn)有產(chǎn)品不是一件簡(jiǎn)單的任務(wù)。許多人認(rèn)為，當(dāng)提到“再設(shè)計(jì)”這個(gè)概念的時(shí)候，他們將此理解為產(chǎn)品從零開(kāi)始的設(shè)計(jì)過(guò)程，至少在設(shè)計(jì)團(tuán)隊(duì)這不是最佳方式，因?yàn)檫@面臨著很大的風(fēng)險(xiǎn)?！皩?duì)產(chǎn)品的現(xiàn)有價(jià)值會(huì)造成什么影響”，這個(gè)是最常關(guān)心的問(wèn)題。許多人僅僅因?yàn)楹ε聯(lián)p害產(chǎn)品價(jià)值，就繼續(xù)在現(xiàn)有產(chǎn)品上堆疊新功能。這個(gè)當(dāng)然能被理解，但從長(zhǎng)遠(yuǎn)來(lái)看，那個(gè)產(chǎn)品將失去創(chuàng)新能力，并將淪為四不像。

對(duì)于“一個(gè)更高效地重新設(shè)計(jì)過(guò)程”這個(gè)話題，我有一些想法。但為了檢驗(yàn)這一想法，我不想在一個(gè)很蹩腳的產(chǎn)品上進(jìn)行設(shè)計(jì)，因?yàn)檫@將是很容易解決地。所以我選擇“Sketch”，是出于以下兩點(diǎn)原因：

• 第一，Sketch不是一個(gè)差的產(chǎn)品；事實(shí)上，它相當(dāng)不錯(cuò)并且在市場(chǎng)上也是一個(gè)很棒的產(chǎn)品。怎么去將現(xiàn)有的產(chǎn)品的體驗(yàn)做得更好呢？這點(diǎn)很有挑戰(zhàn)而且很有意思。
• 第二，因?yàn)槲颐刻煊肧ketch，所以我相當(dāng)熟悉這個(gè)產(chǎn)品。我認(rèn)為對(duì)于產(chǎn)品有一個(gè)深度的見(jiàn)解是很非常重要的。

免責(zé)聲明：通常在一個(gè)真實(shí)的Redesign項(xiàng)目中，你需要將許多用戶的反饋意見(jiàn)以及其他利益相關(guān)者、設(shè)計(jì)師們的立場(chǎng)考慮進(jìn)去。在這個(gè)案例中，出于實(shí)際情況，我僅從我的使用反饋進(jìn)行考慮。

第一步

首先，從高緯度到低維度對(duì)產(chǎn)品進(jìn)行分析。我們需要清楚地知道哪里需要調(diào)整、哪里是現(xiàn)有產(chǎn)品的價(jià)值所在。當(dāng)我提到從高緯度這個(gè)概念的時(shí)候，我想說(shuō)的是去評(píng)估產(chǎn)品的核心目標(biāo)：

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

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

技術(shù)分析

現(xiàn)在讓我們開(kāi)始從技術(shù)上分析這個(gè)產(chǎn)品是如何工作的，以及它如何解決用戶的需求，就先從界面布局開(kāi)始。在Sketch里，界面布局是這樣的：

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

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

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

樣式/品牌分析

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

我們?cè)趺醋龅竭@一點(diǎn)？我們?nèi)绾伟l(fā)現(xiàn)理想的產(chǎn)品屬性是什么？抱歉地是，出于這次練習(xí)的目的，我們必須跳過(guò)這項(xiàng)工作，因?yàn)楫a(chǎn)品屬性并不容易而且很花費(fèi)時(shí)間，通常設(shè)計(jì)很多討論、情緒版、用戶訪談等等。因此，我將從一個(gè)非常主觀的角度來(lái)分析這部分。

對(duì)我來(lái)說(shuō)，Sketch需要清晰且易用；這些產(chǎn)品具有的最佳價(jià)值。它不像Photoshop那么亂，它非常友好，使用Sketch一段時(shí)間你會(huì)發(fā)現(xiàn)Sketch沿用了許多蘋果在用戶體驗(yàn)領(lǐng)域的設(shè)計(jì)觀念。所以如果這些是視覺(jué)帶來(lái)的附加價(jià)值所在的話，那就基于這點(diǎn)進(jìn)行改進(jìn)。設(shè)計(jì)思路是更簡(jiǎn)潔和更易用。

輸出結(jié)果

我花了一周時(shí)間來(lái)重新設(shè)計(jì)，以下是改進(jìn)結(jié)果：

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

（1）區(qū)塊1

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

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

這個(gè)設(shè)計(jì)挑戰(zhàn)的解決方式是創(chuàng)建一個(gè)更易識(shí)別的層次結(jié)構(gòu)，無(wú)需改動(dòng)太多這個(gè)產(chǎn)品已有的用戶操作體驗(yàn)。

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

（2）區(qū)塊2

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

將這些功能選項(xiàng)放置在此，主要是此功能與主畫(huà)板區(qū)的參考線相關(guān)，以此來(lái)提升用戶體驗(yàn)。在原來(lái)的Sketch版本中，我沒(méi)有太多地使用這些功能，不是因?yàn)槲也幌胗?，而是這些功能和主操作區(qū)域相隔太遠(yuǎn)，不易操作。這個(gè)設(shè)計(jì)方案調(diào)整了此問(wèn)題。

（3）區(qū)塊3

這部分相對(duì)復(fù)雜，因?yàn)殡S著每個(gè)選擇的對(duì)象不同而改變。只用一個(gè)案例來(lái)闡述改進(jìn)之處，這部分主要是視覺(jué)效果?！岸询B”的設(shè)計(jì)方法非常不錯(cuò)，有些對(duì)象在使用這個(gè)解決方案時(shí)，視覺(jué)組織上不再那么雜亂。

此外，我將經(jīng)常使用的Craft插件做了展示設(shè)計(jì)，它非常方便。關(guān)于這些插件，我做了一些細(xì)微的改進(jìn)。主要的改進(jìn)將在接下來(lái)的部分進(jìn)行說(shuō)明。

（4）區(qū)塊4

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

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

（1）區(qū)域1

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

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

文本樣式現(xiàn)在作為屬性欄的一部分而存在。文本樣式非常重要，因?yàn)樵趯?shí)現(xiàn)設(shè)計(jì)的時(shí)候，就需要在代碼中預(yù)定好樣式結(jié)構(gòu)（例如h1,h2,h3,p,鏈接和更多的HTML標(biāo)簽）。

（2）區(qū)域2

這個(gè)區(qū)域是多功能區(qū)域，因?yàn)樗鼤?huì)根據(jù)我們選擇的元素而改變。因此，在我們不選擇任何對(duì)象的情況下將會(huì)顯示常用對(duì)象。這應(yīng)該是一個(gè)非常實(shí)用的功能，因?yàn)槲覀兛傆兄T如按鈕、符號(hào)或其他在我們?cè)O(shè)計(jì)過(guò)程中用到的東西。拖動(dòng)他們到畫(huà)板中就能使用，這是不是非常棒！

在下面的案例中，當(dāng)我選中了某個(gè)對(duì)象，上方區(qū)域根據(jù)需要進(jìn)行動(dòng)態(tài)變化。舉個(gè)栗子，當(dāng)我選中了一個(gè)矢量圖形諸如長(zhǎng)方形，然后我就可以訪問(wèn)上方的功能選項(xiàng)來(lái)操作那個(gè)圖形了。

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

（3）區(qū)域3

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

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

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

補(bǔ)充

沒(méi)有一個(gè)好的歡迎界面的軟件是一個(gè)好軟件嗎？重申一遍，這個(gè)練習(xí)不是要重新再造一個(gè)輪子，因?yàn)楝F(xiàn)在的Sketch也是一個(gè)相當(dāng)好用的軟件。但僅作為我個(gè)人意見(jiàn)的調(diào)整優(yōu)化…

就是這樣，這是個(gè)非常有趣的小項(xiàng)目。我希望這個(gè)練習(xí)能夠幫助我們更清楚地了解重新設(shè)計(jì)產(chǎn)品的過(guò)程，在每個(gè)小決策中使用設(shè)計(jì)常識(shí)。我相信各位大拿能出更好的設(shè)計(jì)方案。但我還想再建議一下，不要讓你的個(gè)人想法干擾產(chǎn)品的主要目標(biāo)，如果可能的話，邀請(qǐng)你團(tuán)中的其他人加入進(jìn)來(lái)。

祝愉快！

翻譯：Maker

校對(duì)：逗砂

譯文地址：微信公眾號(hào)【非科班設(shè)計(jì)】

原文鏈接：https://medium.com/@ederrengifo/re-dise%C3%B1ando-sketch-d616658e907e#.xt38sjlfz

本文由 @Maker 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。