• 原文作者：Henry Latham

• 譯文出自：掘金翻譯計(jì)劃

• 
  為什么一月會(huì)有圣誕節(jié)

提示：這篇文章有很多有趣和無(wú)趣的表情包，也有很多大圖。除非你不在乎流量費(fèi)用，建議最好還是先連上 Wi-Fi 。而且這篇文章真的非常長(zhǎng)，你還可以準(zhǔn)備一桶爆米花和可樂（笑）。

一月的圣誕節(jié)？

當(dāng)你還是個(gè)小孩的時(shí)候，圣誕節(jié)真的真的非常令人興奮。一想到圣誕老人帶來的禮物，以及打開禮物時(shí)的場(chǎng)景，讓整個(gè)月都充滿了難以想象的興奮和喜悅。

在我作為UI設(shè)計(jì)師的生涯里，當(dāng)我第一次使用 Sketch App 時(shí)，我也像個(gè)孩子一樣的興奮：

“你是認(rèn)真的嗎？！在過去的 3 個(gè)月里，我可能已經(jīng)在 Photoshop 那些愚蠢的小像素圖形中浪費(fèi)了 90％ 的時(shí)間，它們甚至看起來都不是我想要的樣子。為什么之前沒有人告訴我有這個(gè) App ？！太難以置信了?！?/p>

作為一名設(shè)計(jì)師，我的職業(yè)生涯中只有兩個(gè)階段：Sketch 之前的生活（BS）和 Sketch 之后生活（AS）。

我不想說 Sketch 之前的生活，簡(jiǎn)直糟糕透了。所有的東西看起來都……有些不一樣，有些怪，呃……有點(diǎn)像素化。設(shè)計(jì)一個(gè)標(biāo)題就差不多要花掉一個(gè)星期的時(shí)間，更不用說設(shè)計(jì)一個(gè)完整的頁(yè)面了。

有了 Sektch 之后的生活簡(jiǎn)直不要太爽。我敢說你甚至可以跟一幫小朋友組建一個(gè)設(shè)計(jì)團(tuán)隊(duì)。

你可以重復(fù)使用各種元素。它們都是精美的，矢量化的，有條理的，并且非常簡(jiǎn)潔和直觀。

好吧，如果你是產(chǎn)品經(jīng)理，設(shè)計(jì)師或前端工程師，現(xiàn)在你也會(huì)孩子一樣地興奮。

可能現(xiàn)在是一月初，但我感覺就像圣誕節(jié)一樣。歡迎來到對(duì)象驅(qū)動(dòng)設(shè)計(jì)的世界。

作者注：當(dāng)我在耶路撒冷和約旦河西岸寫這篇文章的時(shí)候，看到一些圣誕樹還擺在上面......從那時(shí)起就注意到一些東正教基督教日歷中圣誕節(jié)實(shí)際上是在 1 月的。然后發(fā)現(xiàn)我的標(biāo)題有點(diǎn)荒謬和吸睛......

在這篇內(nèi)容豐富且充滿樂趣的文章中，我將解釋：

1. 什么是對(duì)象驅(qū)動(dòng)的設(shè)計(jì)

2. 為什么這些問題仍然沒有解決

3. 為什么不使用面向?qū)ο蟮脑O(shè)計(jì)會(huì)有很大的風(fēng)險(xiǎn)

4. 如何在設(shè)計(jì)流程中采用面向?qū)ο蟮脑O(shè)計(jì)

通過我的方法，讓 UI 設(shè)計(jì)師可以花更多的時(shí)間做快樂的設(shè)計(jì)，讓前端開發(fā)能集中精力開發(fā)功能，而不是在那里一個(gè)像素一個(gè)像素地調(diào)間距。設(shè)計(jì)到開發(fā)的流程（我簡(jiǎn)稱為 “D2D”）效率將真正提高十倍。

你為什么要關(guān)心這個(gè)？

許多產(chǎn)品經(jīng)理和UI設(shè)計(jì)師讀到這里都會(huì)想，

“我已經(jīng)用了 3 年 Sketch 的 Symbols 和 Typography 功能，說一些我不知道的東西吧，然后停止你那愚蠢的圣誕節(jié)比喻。”

他們并沒有錯(cuò)。我猜想大多數(shù)設(shè)計(jì)師一定程度上都會(huì)在 Sketch 文件里創(chuàng)建可重用的 Symbols（類似于編程術(shù)語(yǔ)中的“對(duì)象”）。

但是，在過去的兩年中，和我合作的設(shè)計(jì)師里從來沒有人能找到一種全面的方式，來改善 D2D 交付過程中的低效問題。

這個(gè)問題存在的 3 個(gè)原因

在深入研究 D2D 問題之前，首先要說明白：既然已經(jīng)有這么多的設(shè)計(jì)工具了，為什么仍然存在 D2D 效率低下的問題。

1. 平庸的標(biāo)準(zhǔn)

不幸的是，許多讀者會(huì)自信地認(rèn)為，這不是他們或他們的公司會(huì)遇到的問題。

因?yàn)樯a(chǎn)力和效率是相對(duì)的。很少有 UI 設(shè)計(jì)師和產(chǎn)品經(jīng)理能意識(shí)到：可能會(huì)存在一個(gè)比現(xiàn)在更好的設(shè)計(jì)流程。

我們傾向于以我們周圍的其他創(chuàng)業(yè)公司和 UI 設(shè)計(jì)師為標(biāo)準(zhǔn)。如果每個(gè)人都以相同的方式工作，那么它可能就是最有效的，對(duì)不對(duì)？

不對(duì)。

我們有一種最常見的偏見，會(huì)基于我們的認(rèn)知對(duì)這個(gè)世界上的事物產(chǎn)生刻板的印象，就像我們現(xiàn)在說的“效率”。

舉個(gè)例子：

假如我有些超重，但我所有的朋友都很胖。當(dāng)我周圍的人都比我胖的時(shí)候，我很可能會(huì)認(rèn)為自己是一個(gè)健康的人，因?yàn)槲业膮⒖键c(diǎn)（我肥胖的朋友們）比我更糟糕。

然而，僅僅因?yàn)樗麄儾蝗缥医】?，并不一定意味著我就是健康的。我的體重依舊超重。

因此，為了實(shí)現(xiàn)效率的明顯飛躍，就得去打破平庸的標(biāo)準(zhǔn)，并且不斷嘗試創(chuàng)新。

“如果我問人們想要什么，他們會(huì)說更快的馬。”—— 亨利·福特

2. 盲目相信現(xiàn)有的流程

D2D 效率低下一直存在的一個(gè)原因是，我們總是假設(shè)我們?cè)诠臼褂玫倪@些流程和方法都已經(jīng)是最優(yōu)的。

但是事實(shí)并非如此。

首先，不管是否真的遵循敏捷開發(fā)的思想，效率低下的問題總會(huì)存在。特別有些是你甚至都可能意識(shí)不到的問題。

其次，你一定能意識(shí)到，由于缺乏統(tǒng)一的合作和競(jìng)爭(zhēng)體系，項(xiàng)目一開始就會(huì)立即進(jìn)入“互相搶占資源，而非高效合作”的局面，正如 LeanUX 的作者 Jeff Gothelf 所描述的那樣。

這樣的場(chǎng)景往往意味著設(shè)計(jì)師資源變得緊缺，通常在少數(shù)產(chǎn)品經(jīng)理和大量程序員之間共享。設(shè)計(jì)師對(duì)應(yīng)多個(gè)產(chǎn)品和開發(fā)，這導(dǎo)致他們之間的合作也可能會(huì)變得混亂和無(wú)序。因此，UI 設(shè)計(jì)師很少能夠停下來，嘗試做一些系統(tǒng)化的設(shè)計(jì)方案，使其具有更高的靈活性。

只有遵循對(duì)象驅(qū)動(dòng)的設(shè)計(jì)流程，才能實(shí)現(xiàn)真正意義上的速度和敏捷。

3. 設(shè)計(jì)師和程序員是完全不同的人

在我們美好的想象中，設(shè)計(jì)師每周都能進(jìn)行設(shè)計(jì)評(píng)審和回顧，無(wú)所不能的產(chǎn)品經(jīng)理也能高效地與每個(gè)人溝通和配合。沒錯(cuò)，對(duì)于檢驗(yàn)做沒做很容易，但是對(duì)于怎么做就很難。

這可以歸結(jié)為：UI設(shè)計(jì)師和前端工程師之間的根本誤解，或者說是專業(yè)鴻溝。

UI設(shè)計(jì)師傾向于認(rèn)為自己是藝術(shù)家，他們的作品是藝術(shù)品。只要用戶能夠理解他們作品中的美，他們的產(chǎn)品就能擁有數(shù)百萬(wàn)用戶。

他們喜歡排版，并熱衷于手工藝和手沖咖啡。他們最喜歡的顏色是 #FEB4B1。

程序員，他們只想創(chuàng)造很酷炫的東西，他們并不太關(guān)心它們看起來的樣子和視覺表現(xiàn)。對(duì)他們來講，“樣式” 這個(gè)難以捉摸的概念是留給藝術(shù)家的，對(duì)他們來說就像“約會(huì)”一樣陌生。他們并不能理解為什么紅色的陰影是更紅的，為什么標(biāo)題文本應(yīng)該往左邊一點(diǎn)點(diǎn)。

當(dāng)不被打擾地獨(dú)自為一些復(fù)雜的新項(xiàng)目寫代碼的時(shí)候，才是他們最開心的時(shí)候。

從本質(zhì)上講，他們是不同的人。 不同的專業(yè)技能，不同的思考方式，不同的興趣愛好。

他們每個(gè)人都認(rèn)為彼此的專業(yè)領(lǐng)域都是令人難以置信的復(fù)雜和費(fèi)解的。因此，他們不惜一切代價(jià)避免介入彼此的領(lǐng)域。

也許兩個(gè)群體都不知道，或者坦白地說不關(guān)心，現(xiàn)在UI設(shè)計(jì)師的視覺工作和前端工程師的工作已經(jīng)有很多重合的部分。

基于此，如果這兩個(gè)角色建立了一種明確的設(shè)計(jì)語(yǔ)言（也就是 Sketch 中的 Symbols）的話，那么 D2D 流程將會(huì)非常簡(jiǎn)單和快速。

但是，由于每個(gè)角色對(duì)彼此孤立的工作并不感興趣，因此他們之間仍存在非常明顯的知識(shí)差距，這是另一個(gè)導(dǎo)致團(tuán)隊(duì) D2D 流程低效的原因。

因此，UI設(shè)計(jì)師和前端工程師使用統(tǒng)一的設(shè)計(jì)語(yǔ)言，對(duì)改善低效是非常有意義的：

“產(chǎn)生良好結(jié)果的模式應(yīng)該被推廣，而那些造成問題的人應(yīng)該得到糾正?！?—— Jeff Gothelf，Lean UX 的作者

4. 無(wú)法遵循對(duì)象驅(qū)動(dòng)設(shè)計(jì)存在的問題

1. 設(shè)計(jì)系統(tǒng)的缺失會(huì)浪費(fèi)設(shè)計(jì)師和程序員大量的時(shí)間

UI 設(shè)計(jì)師

理論上，D2D 交付流程應(yīng)該是直接的。

理論上，UI 設(shè)計(jì)師已經(jīng)與前端開發(fā)能達(dá)成一致，并且可以無(wú)縫地協(xié)作。

理論上，他們會(huì)事先約定好統(tǒng)一的設(shè)計(jì)語(yǔ)言，并且使用可重用的組件和元素。設(shè)計(jì)師在 Sketch 中復(fù)制粘貼一下，前端開發(fā)一兩行代碼就能搞定。

然而，理論卻很少能轉(zhuǎn)化為現(xiàn)實(shí)。

實(shí)際情況是，大多數(shù) UI 設(shè)計(jì)師會(huì)花大量時(shí)間設(shè)計(jì)一些新的自定義元素。

首先，因?yàn)樗麄儾皇浅绦騿T，所以他們不明白實(shí)現(xiàn)這些新的設(shè)計(jì)元素需要額外做很多的工作。

其次，許多 UI 設(shè)計(jì)師認(rèn)為他們的作品是藝術(shù)，而不是科學(xué)。因此他們并不情愿為了實(shí)用主義而犧牲作品的美感。

他們喜歡花費(fèi)大量的時(shí)間對(duì)現(xiàn)有元素進(jìn)行細(xì)微的調(diào)整，而不是把很容易實(shí)現(xiàn)的設(shè)計(jì)稿盡快交付給前端工程師。

他們花了太多的時(shí)間和精力在細(xì)節(jié)上（比如把文本移動(dòng)幾個(gè)像素）而不是項(xiàng)目重心上（比如設(shè)計(jì)和體驗(yàn)一個(gè)新的功能）。

細(xì)節(jié)是很重要，但是當(dāng)已有的 UI 元素已經(jīng)很好地滿足需求和場(chǎng)景了，很難證明這些細(xì)節(jié)的調(diào)整真的會(huì)帶來有效的提升。

UI 設(shè)計(jì)師過分關(guān)注細(xì)節(jié)導(dǎo)致項(xiàng)目進(jìn)度減緩，這個(gè)事實(shí)也讓問題變得更加顯著。設(shè)計(jì)評(píng)審被推遲，產(chǎn)品經(jīng)理的信息同步也不及時(shí)，設(shè)計(jì)師也只愿花更多的時(shí)間在他們各自的設(shè)計(jì)工作中。

前端工程師

當(dāng)前端工程師拿到設(shè)計(jì)最終稿時(shí)，應(yīng)當(dāng)已經(jīng)進(jìn)行了幾輪評(píng)審，以確保每個(gè)人都清楚最終的預(yù)期。

但是，我們?nèi)匀话l(fā)現(xiàn)問題仍舊存在，因?yàn)椋?/p>

1. 前端工程師過分相信設(shè)計(jì)稿。他們通常會(huì)認(rèn)為最終實(shí)現(xiàn)的效果必須跟設(shè)計(jì)稿上完全相同，盡管有些設(shè)計(jì)稿實(shí)現(xiàn)起來很困難，但是他們將所有 UI 設(shè)計(jì)師都視為專家。因此，他們不會(huì)試圖簡(jiǎn)化或討論設(shè)計(jì)方案，他們相信一切背后都有一些合理的原因，UI 設(shè)計(jì)師的設(shè)計(jì)稿就是最終完美的方案。

2. 前端工程師比其他人更討厭會(huì)議。因此，他們并不想為了糾結(jié)字體大小是 12px 還是 14px 進(jìn)行冗長(zhǎng)和無(wú)聊的辯論，他們只是想盡快開完會(huì)，與設(shè)計(jì)師達(dá)成一致，然后愉快地回去寫代碼。

3. 前端工程師通常比較內(nèi)向和靦腆。因此，他們不太可能 PK 得過自信的產(chǎn)品經(jīng)理和自負(fù)的 UI 設(shè)計(jì)師。

因此，盡管在前期有設(shè)計(jì)評(píng)審和討論環(huán)節(jié)，他們最終還是去做了一些重復(fù)的、不合理的、或者實(shí)現(xiàn)起來很困難的東西。

2. 隨著時(shí)間的推移，D2D 效率愈來愈低下

D2D 效率低下的時(shí)間越長(zhǎng)，對(duì)現(xiàn)有和未來團(tuán)隊(duì)成員的資源浪費(fèi)就越大。這道理看起來很明顯，但通?？偸潜晃覀兒鲆?。

我們常常更專注于短期目標(biāo)（加班加點(diǎn)完成手頭上堆積的事情），而不是著眼于長(zhǎng)期的目標(biāo)和最終的成功。

在實(shí)現(xiàn)短期的沖刺目標(biāo)和完成大量項(xiàng)目功能的過程中，我們根本無(wú)暇去改善合作中的低效問題。

因?yàn)殛P(guān)注短期的目標(biāo)很容易，因?yàn)榇蠹叶济媾R很大的壓力，因?yàn)槲覀兒苌贂?huì)停下來思考我們?nèi)绱嗣β档恼嬲康氖鞘裁?/a>。

3. 沒有設(shè)計(jì)系統(tǒng) = 設(shè)計(jì)缺陷

在設(shè)計(jì)流程中，UI 設(shè)計(jì)師的設(shè)計(jì)越不系統(tǒng)化，在后期的工作中將會(huì)面臨更多的問題。

我們來舉個(gè)例子：

假如所有的圖標(biāo)都沒有統(tǒng)一的尺寸，有些是 24x24，有些是 40x24，有些是 12x16。這不僅會(huì)浪費(fèi)程序員的時(shí)間（正如我在第一點(diǎn)所強(qiáng)調(diào)的那樣），而且還意味著將來任何的變化都會(huì)變得非常麻煩。如果將來希望更改某些圖標(biāo)，就必須針對(duì)每一個(gè)圖標(biāo)每一個(gè)特定的尺寸進(jìn)行重新設(shè)計(jì)和導(dǎo)出，否則這些圖標(biāo)在最終的展示時(shí)候要么錯(cuò)位，要么會(huì)被拉伸。

此外，如果 UI 設(shè)計(jì)師在 Sketch 文件中，不創(chuàng)建嚴(yán)格的文本樣式、取色板，以及可重復(fù)使用的 Symbols（比如所有按鈕尺寸都是24x24）的話，就會(huì)嚴(yán)重阻礙我們編輯現(xiàn)有元素的效率。

假如想要對(duì)整個(gè)產(chǎn)品中的文本樣式進(jìn)行統(tǒng)一的調(diào)整，我們只能對(duì) Sketch 中的每一個(gè)頁(yè)面挨個(gè)進(jìn)行手動(dòng)的調(diào)整。但是如果使用了 Typography 的話，完全不用如此麻煩。對(duì)于一個(gè)擁有大量頁(yè)面的完整 App 來說，這樣的調(diào)整和更新會(huì)浪費(fèi)UI設(shè)計(jì)師大量的時(shí)間。

4. 不建立設(shè)計(jì)系統(tǒng)會(huì)妨礙團(tuán)隊(duì)協(xié)作

如果沒有設(shè)計(jì)系統(tǒng)，UI 設(shè)計(jì)師的大部分時(shí)間都會(huì)花在創(chuàng)建新的元素或者對(duì)現(xiàn)有的設(shè)計(jì)不斷地修改上面。

這意味著他們沒有更多的時(shí)間進(jìn)行腦暴或者在 Sketch 里面與前端工程師一起嘗試新的想法。

團(tuán)隊(duì)可以通過組織設(shè)計(jì)評(píng)審來測(cè)試不同的方案，或者調(diào)整正在討論的設(shè)計(jì)，這非常有利于整個(gè)團(tuán)隊(duì)對(duì)設(shè)計(jì)的投入和支持。

“持續(xù)相互反饋的團(tuán)隊(duì)將會(huì)創(chuàng)造更好的產(chǎn)品?！?em>—— Jim Semick，InVision

此外，設(shè)計(jì)系統(tǒng)能避免了 UI 設(shè)計(jì)師為了相同的方案進(jìn)行重復(fù)的設(shè)計(jì)評(píng)審和返工，這為整個(gè)團(tuán)隊(duì)節(jié)省了大量時(shí)間。

如何實(shí)現(xiàn)對(duì)象驅(qū)動(dòng)的設(shè)計(jì)

現(xiàn)在，希望你已經(jīng)明白實(shí)施設(shè)計(jì)系統(tǒng)是多么的重要。

下一節(jié)中，在深入研究構(gòu)建和維護(hù)設(shè)計(jì)系統(tǒng)的細(xì)節(jié)之前，我將討論更改 UI 設(shè)計(jì)師的工作方法的重要性。

第 1 步：獲得 D2D 流程的主導(dǎo)權(quán)

在承諾遵循對(duì)象驅(qū)動(dòng)設(shè)計(jì)之前，必須確保 UI 設(shè)計(jì)師能得到適當(dāng)?shù)募?lì)。

如果他們做這個(gè)的理由很含糊：“這能讓團(tuán)隊(duì)更高效”、“我們只是被要求這么做”，如果是這樣的話，那就算了吧。

但是，如果設(shè)計(jì)師打心底認(rèn)可 D2D 交付流程是他們的角色和責(zé)任中很關(guān)鍵的部分，那么他們不僅更有動(dòng)力和積極性去構(gòu)建一個(gè)設(shè)計(jì)系統(tǒng)，而且會(huì)長(zhǎng)期地維護(hù)和完善它。

讓我強(qiáng)調(diào)一下：建立設(shè)計(jì)系統(tǒng)不僅僅只是個(gè)一次性的任務(wù)。每當(dāng)你開始新的設(shè)計(jì)或驗(yàn)證方案時(shí)，你都應(yīng)該把他們準(zhǔn)確地組織在你的設(shè)計(jì)系統(tǒng)中，這樣可以供將來使用。

UI 設(shè)計(jì)師必須是完全認(rèn)可他們應(yīng)該為 D2D 流程負(fù)責(zé)任。否則，他們對(duì)于如何用編程的方式實(shí)現(xiàn)設(shè)計(jì)從而改進(jìn)設(shè)計(jì)流程的過程，也不會(huì)特別的好奇和投入。

他們需要閱讀一些關(guān)于設(shè)計(jì)和開發(fā)流程的文章，參加基礎(chǔ)編程的課程，學(xué)習(xí) Material Design 指南，了解前端工程師的工作，向產(chǎn)品經(jīng)理、前端工程師或者其他設(shè)計(jì)師學(xué)習(xí)，等等。

總之，他們要跳出舒適區(qū)，不能為了只專注于他們喜歡的和感到舒適的東西而放棄那些更重要的學(xué)習(xí)，不能最后又回到了 Sketch 和 Dribble 上來。

第 2 步：構(gòu)建設(shè)計(jì)系統(tǒng)

構(gòu)建設(shè)計(jì)系統(tǒng)的核心目的，是基于面向?qū)ο蟮木幊趟枷雱?chuàng)建一個(gè)完整的元素列表。期望的結(jié)果是通過你在 Sketch 中創(chuàng)建的設(shè)計(jì)系統(tǒng)，讓設(shè)計(jì)師和程序員能夠更加緊密的合作，從而讓整個(gè)團(tuán)隊(duì)也運(yùn)作得更加的高效。

設(shè)計(jì)師和程序員之間互相的溝通會(huì)帶來更加深彼此的理解，也會(huì)讓整個(gè)團(tuán)隊(duì)創(chuàng)造出更優(yōu)秀的產(chǎn)品。

1/7 從基礎(chǔ)開始：顏色和文本樣式

對(duì)象驅(qū)動(dòng)的設(shè)計(jì)必須從基礎(chǔ)開始：定義顏色和文本樣式。因?yàn)樗衅渌脑囟夹枰@些信息：比如，一個(gè)按鈕需要明確背景顏色、邊框顏色；一行文本需要明確字體、字號(hào)和行高。

2/7 為單個(gè)頁(yè)面創(chuàng)建獨(dú)立控件

通過創(chuàng)建一個(gè)示例頁(yè)面，你就很快能理解對(duì)象驅(qū)動(dòng)設(shè)計(jì)的原理，并指導(dǎo)怎樣在實(shí)際的工作中運(yùn)用。根據(jù)我的經(jīng)驗(yàn)，只有不斷以迭代的方式來踐行對(duì)象驅(qū)動(dòng)的設(shè)計(jì)理論，才能真正有效地學(xué)習(xí)如何創(chuàng)建一個(gè)完整的設(shè)計(jì)系統(tǒng)。

在開始嘗試的時(shí)候，不要擔(dān)心不全面。因?yàn)楫?dāng)你創(chuàng)建過一些示例頁(yè)面之后，你很快就能明白怎么合理地創(chuàng)建這些元素。

可以從標(biāo)題欄（帶有文本和按鈕的那種標(biāo)題欄）、或者文本段落開始，也可以用其他任何你想嘗試的控件。請(qǐng)記住，從最小的元素起，就要開始保證設(shè)計(jì)的一致性。

元素指的是一組 Symbols ，比如一個(gè)標(biāo)題欄或者一個(gè)段落文本

• YouTube 視頻鏈接：youtu.be/5MGNi24hHAE （已經(jīng)打不開了）

3/7 Override（更改元素的信息）

在 Sketch 中如果選中一個(gè) Symbol，在右側(cè)的面板（在 “Override” 中）就能看到這個(gè)對(duì)象包含的那些可以被修改的的信息，比如標(biāo)題欄中包含的文本。

但需要注意的是，這樣的修改并不會(huì)改動(dòng)到 Symbol 本身的樣式。因?yàn)檫@個(gè)本質(zhì)上很像前端的工作方式：

你定義展示給用戶的界面（比如，字號(hào)、排版、對(duì)齊方式等），但是最終填充的內(nèi)容（比如名稱、地址、圖標(biāo)等等）是從數(shù)據(jù)庫(kù)中拉取來的。

比如，你可以定一個(gè)圖片按鈕的位置、大小，但是實(shí)際展示的圖片是存放在 CDN 中。

4/7 創(chuàng)建一組示例頁(yè)面

現(xiàn)在你已經(jīng)看到了 Overrides 的強(qiáng)大功能，你知道需要?jiǎng)?chuàng)建哪些類型的 Symbols，以及 Symbols 之間是怎么關(guān)聯(lián)和組合起來的（例如標(biāo)題欄中的按鈕）。

希望你也意識(shí)到這個(gè)過程需要多么周密的規(guī)劃和組織了。你可能已經(jīng)自己定義了一些 Typography ，但我懷疑只是在為左對(duì)齊，中對(duì)齊還是右對(duì)齊創(chuàng)建了一個(gè)變體。

現(xiàn)在嘗試創(chuàng)建 4-5 個(gè)頁(yè)面，并且所有的頁(yè)面都只能基于先前定義的 Symbols 來創(chuàng)建。不要擔(dān)心它們是不是缺少組織或者搭建起來很不方便：意識(shí)到這些問題，并從中學(xué)習(xí)和思考，本質(zhì)上也是學(xué)習(xí)的一個(gè)過程。

5/7 為 Symbols 準(zhǔn)確地命名

現(xiàn)在，你應(yīng)該對(duì)如何創(chuàng)建一個(gè)完整的設(shè)計(jì)系統(tǒng)有了清晰的理解。

但是在深入研究完整的設(shè)計(jì)系統(tǒng)之前，我建議花一些時(shí)間了解下信息架構(gòu)。

信息架構(gòu)本質(zhì)上是指用最符合邏輯最優(yōu)的方式來組織信息。

在有設(shè)計(jì)系統(tǒng)的情況下，所有的對(duì)象都處在清晰的層次結(jié)構(gòu)里，并且都有符合邏輯的命名，常用的元素也非常便于使用。

搭建一個(gè)全面的設(shè)計(jì)系統(tǒng)前，首先要確保你已經(jīng)熟悉整個(gè)產(chǎn)品，明確所有你需要?jiǎng)?chuàng)建的 Symbols ，并且明白如何才能找到最佳的方式來組織它們。哪些元素是最常用的？其他設(shè)計(jì)師怎么能找到這些 Symbols？他們會(huì)期望每個(gè) Symbol 應(yīng)該怎樣命名？

如果不能做到以上所說的點(diǎn)，將來在 Symbols 的查找和重命名上就會(huì)耗費(fèi)大量的時(shí)間，而且也無(wú)法用一種邏輯清晰的方式來添加新的 Symbols。

6/7 創(chuàng)建全面的設(shè)計(jì)系統(tǒng)

現(xiàn)在你已經(jīng)創(chuàng)建了一些 Symbols ，很明確你的產(chǎn)品需要哪些 Symbols，并且有一套清晰的命名體系，所以現(xiàn)在是時(shí)候來完成整個(gè)設(shè)計(jì)系統(tǒng)了。

為了保證設(shè)計(jì)系統(tǒng)的結(jié)構(gòu)清晰，你需要留出專門的時(shí)間來完成它，并且全身心投入其中。

當(dāng)你在完成的過程中，可能會(huì)發(fā)現(xiàn)一些命名上的錯(cuò)誤和缺陷。因此，請(qǐng)隨時(shí)檢查你的命名規(guī)則，創(chuàng)建一些用于測(cè)試的頁(yè)面并且驗(yàn)證一致性。

因?yàn)槟愕漠a(chǎn)品是獨(dú)一無(wú)二的，因此你需要?jiǎng)?chuàng)建的這些 Symobls 也是獨(dú)一無(wú)二的。所以，你必須去思考如何最好地架構(gòu)這個(gè)設(shè)計(jì)系統(tǒng)，以及這個(gè)系統(tǒng)究竟需要包含哪些內(nèi)容。

7/7 設(shè)計(jì)評(píng)審

與產(chǎn)品經(jīng)理，UX/UI 設(shè)計(jì)師，還有前端工程師一起組織設(shè)計(jì)評(píng)審，來展示新的設(shè)計(jì)系統(tǒng)。

你會(huì)發(fā)現(xiàn)團(tuán)隊(duì)的所有成員都會(huì)立即意識(shí)到它的價(jià)值。前端工程師很高興，因?yàn)樗麄冇幸粋€(gè)明確的交付文件可供參考和使用；產(chǎn)品經(jīng)理也很高興，因?yàn)樗麄兛梢耘c設(shè)計(jì)師快速地搭建產(chǎn)品原型；其他的設(shè)計(jì)師也很高興，因?yàn)樗麄兌伎梢栽?Sketch 內(nèi)的同一設(shè)計(jì)系統(tǒng)中協(xié)同工作了。

當(dāng)你將你的設(shè)計(jì)系統(tǒng)保存到 Sketch 中的 “Template”，并與其他 UI 設(shè)計(jì)師共享后，你們就可以開瓶酒好好慶祝下了。

第 3 步：維護(hù)你的設(shè)計(jì)系統(tǒng)

當(dāng)你完成設(shè)計(jì)系統(tǒng)后，你還需要維持它繼續(xù)向前迭代。

任何新的設(shè)計(jì)元素，不管是否會(huì)在最終的產(chǎn)品中體現(xiàn)出來，都應(yīng)該將它們正確地歸類和組織為 Symbols。

很可能你的工作非常的繁忙，項(xiàng)目的節(jié)奏也非常快，你不太可能會(huì)有機(jī)會(huì)重新將最終的設(shè)計(jì)稿再一點(diǎn)一點(diǎn)地重構(gòu)成結(jié)構(gòu)清晰命名規(guī)范的 Symbols。與其在將來浪費(fèi)更多的時(shí)間，不如在一開始就用最優(yōu)的方式來設(shè)計(jì)。

無(wú)論你有多忙都請(qǐng)記?。耗サ恫徽`砍柴工。

另外，如果你的團(tuán)隊(duì)中還有其他的設(shè)計(jì)師的話，你們都需要為設(shè)計(jì)系統(tǒng)的發(fā)展作出貢獻(xiàn)。

團(tuán)隊(duì)中的每個(gè)成員都必須遵循設(shè)計(jì)規(guī)范。還應(yīng)該有專門的設(shè)計(jì)師來負(fù)責(zé)將新的 Symbols 添加到產(chǎn)品的 “Library” 中，以確保所有的人都能訪問到已有的和新增的 Symbols。

這個(gè)設(shè)計(jì)師還應(yīng)定期更新主干上的文件，以便所有團(tuán)隊(duì)成員都可以訪問到最新版本，避免因未保存文件而浪費(fèi)任何時(shí)間。我建議使用 Github 或 Sketch Cloud ，你還可以使用付費(fèi)版的 Abstract，用一種更直觀、對(duì)設(shè)計(jì)師更友好的方式來管理文件的版本。

如果你們僅僅是一個(gè)很小的團(tuán)隊(duì)，似乎就不太需要這樣的組織方式。但是在某些時(shí)候，你可能需要提前慎重思考：如果沒有最新的設(shè)計(jì)系統(tǒng)，新的 UI 設(shè)計(jì)師怎樣知道從什么地方開始工作？你們?cè)趺椿ハ鄥f(xié)作？

第 4 步： 創(chuàng)新永無(wú)止境

正如我在步驟 1 中所說的，這個(gè)過程的核心要素是承擔(dān)責(zé)任。堅(jiān)持期望很容易，承擔(dān)責(zé)任卻很艱難。

但是，這對(duì)成功至關(guān)重要。

您必須保持警惕，不斷學(xué)習(xí)，不斷尋找新工具來提高技能并改善你的工作流程。

Sketch App 正在不斷改進(jìn)，Sketch 社區(qū)也不斷出現(xiàn)很酷的新插件。同時(shí)其他的設(shè)計(jì)工具也正在出現(xiàn)，比如 Adobe XD，你可以關(guān)注這些軟件并且嘗試一下。

頂級(jí)公司將 5-15％ 的收入用于培訓(xùn)員工，如果你是設(shè)計(jì)師，堅(jiān)持每周花些時(shí)間了解新的技術(shù)，體驗(yàn)新的產(chǎn)品。

永遠(yuǎn)記?。和顿Y自身不斷學(xué)習(xí)，并且著眼于公司的長(zhǎng)遠(yuǎn)目標(biāo)才是成功的關(guān)鍵，而不是眼前那些看起來很緊急或者很重要的事情。

關(guān)于作者：

Henry Latham 是一名位于柏林的自由職業(yè) UX / UI設(shè)計(jì)師，正在尋找潛在的聯(lián)合創(chuàng)始人。