成為優(yōu)秀的設(shè)計(jì)師，并不是你有扎實(shí)的設(shè)計(jì)基本功就可以實(shí)現(xiàn)的。要成為優(yōu)秀的設(shè)計(jì)師，你至少需要在專業(yè)基礎(chǔ)功、設(shè)計(jì)資源與技巧以及宏觀戰(zhàn)略理念等方面超群出眾。

特別提示：本系列文章是持工具不可知論態(tài)度，即無論你使用Sketch，F(xiàn)igma，Adobe XD，Inkscape或者是Microsoft Paint等任何工具，這些建議都對(duì)你有幫助。

開啟任何職業(yè)生涯，都非常像第一次去吃自助餐的感覺。擺在你面前的，有無數(shù)種可能的選擇。

熱食、冷食、沙拉、飲料、甜點(diǎn)……新鮮的熏肉、蔬菜湯、大盤子、小碟子還有些很可愛的餐具器皿……天??！還有軟冰淇淋！

總之，你會(huì)發(fā)現(xiàn)大量的食物。而如果是第一次去吃自助餐的話，可能還會(huì)做出錯(cuò)誤的選擇。我該吃什么？能不能吃回本？這些食物干不干凈？

吃自助餐的訣竅在于，每挑選一輪食物，就可以從中學(xué)會(huì)新的技巧，從而在數(shù)次以后，你的技巧就會(huì)不斷提高。你可以總結(jié)出一套經(jīng)驗(yàn)，知道該拿什么食物，不該拿什么食物，到底一次能吃下多少個(gè)芝士漢堡。

其實(shí)，學(xué)習(xí)設(shè)計(jì)的過程，也是如此的體驗(yàn)。第一次上手設(shè)計(jì)，你可能會(huì)覺得摸不著頭腦，或者做出錯(cuò)誤的抉擇，甚至把時(shí)間浪費(fèi)在無關(guān)緊要的方面。

因此，我希望通過本系列文章，結(jié)合自己多年的設(shè)計(jì)經(jīng)驗(yàn)和教訓(xùn)，跟大家分享成為優(yōu)秀設(shè)計(jì)師的捷徑方法和建議。

1. 從學(xué)會(huì)使用網(wǎng)格開始

間隔設(shè)計(jì)，可以說是設(shè)計(jì)行業(yè)中最重要也是最基礎(chǔ)的技能之一。

當(dāng)我發(fā)現(xiàn)可以通過Adobe Illustrator里面的標(biāo)尺功能畫出輔助線時(shí)，我頓時(shí)喜極而泣，就像個(gè)得到心愛玩具的小孩一樣。

間隔設(shè)計(jì)本來就不簡單，而且要保持連貫一致的間隔設(shè)計(jì)，就更加難了。而網(wǎng)格不僅可以幫你對(duì)其參照物，同時(shí)在你處理上百個(gè)圖層時(shí)還可以幫你減少腦力勞動(dòng)。

本著以教學(xué)的目的，我們以設(shè)計(jì)網(wǎng)頁為例，并且最好從簡單的12欄網(wǎng)格開始。

為什么是12欄？因?yàn)?2這個(gè)數(shù)字可以方便地被多個(gè)數(shù)字整除，從而可以輕松地設(shè)計(jì)不同的布局架構(gòu)。比如1欄、2欄、3欄、4欄、6欄以及12欄布局等。

那么，12欄網(wǎng)格的寬度又該怎么設(shè)置呢？接下來我想給你推薦一個(gè)我自己經(jīng)常使用的公式（寬度單位為像素）：（12 * 每欄寬度）+（11 * 間隔寬度）= 總寬度

我自己的所有設(shè)計(jì)，都是基于8像素網(wǎng)格來設(shè)計(jì)的。所謂8像素網(wǎng)格，即界面所有的填充、邊距以及元素尺寸均為8像素（的倍數(shù)）。在12欄網(wǎng)格中，這個(gè)規(guī)則也是適用的。

以下，是我日常設(shè)計(jì)作品中常用的總寬度參數(shù)：（12 * 64px）+（11 * 24px）=?1032px?寬

這即是說，設(shè)計(jì)網(wǎng)格中的每一欄寬度都為64px，而中間的間距寬度都是24px。而因?yàn)樗械奈谋鹃g距和元素邊距都是基于8像素網(wǎng)格來設(shè)計(jì)的，整體的視覺效果看起來就會(huì)非常和諧。

借助于網(wǎng)格，我可以輕松地對(duì)齊設(shè)計(jì)中的所有元素，從而也避免了手動(dòng)對(duì)齊不同圖層等額外工作。對(duì)開發(fā)者而言，這也可以被看作是相互之間都認(rèn)可的連貫一致的系統(tǒng)語言，從而提高工作效率。

總的來說，借助網(wǎng)格的設(shè)計(jì)，真?zhèn)€界面看起來都會(huì)非常清爽。

• 為什么要從網(wǎng)格設(shè)計(jì)開始：界面所有的元素都整齊地對(duì)齊。簡而言之，它可以最大程度地減少設(shè)計(jì)排版方面的思考。
• 延伸閱讀：8像素網(wǎng)格系統(tǒng)導(dǎo)論

2. 堅(jiān)持使用固定的字體系統(tǒng)

我發(fā)現(xiàn)，在設(shè)計(jì)過程中，許多初級(jí)設(shè)計(jì)師總是在字體大小上猶豫不決，遲遲無法下決定。說他們經(jīng)驗(yàn)不足，倒不如說是他們不知道設(shè)計(jì)的參考架構(gòu)罷了，所以才導(dǎo)致他們的設(shè)計(jì)作品通常要不是太大，要不就是太小。

在設(shè)計(jì)過程中，應(yīng)該建立一套簡單的字體系統(tǒng)，并一直堅(jiān)持使用這套系統(tǒng)。

即便是非常復(fù)雜的界面，其文本字體字號(hào)大小也不會(huì)超過10種不同。畢竟，字體大小只不過是區(qū)分不同內(nèi)容之間的多個(gè)標(biāo)準(zhǔn)之一罷了。而其它的標(biāo)準(zhǔn)包括字重、色彩以及間距等其他變量。借助于這些變量，你都可以讓用戶清楚地認(rèn)識(shí)和了解你所設(shè)計(jì)的架構(gòu)信息。

為了讓自己的設(shè)計(jì)保持統(tǒng)一連貫性，你可以在設(shè)計(jì)過程中保存常用的文字設(shè)計(jì)格式。通過這種方式，你可以在設(shè)計(jì)界面頂端或界面主題文字時(shí)，直接調(diào)用已經(jīng)保存的設(shè)計(jì)風(fēng)格，從而節(jié)省大量時(shí)間。

在確定相應(yīng)元素的模版風(fēng)格后，你只需要將這個(gè)風(fēng)格重命名，然后就可以在以后的設(shè)計(jì)中重復(fù)調(diào)用。但這其中真正的技巧在于，你真的要在后續(xù)的設(shè)計(jì)過程中使用它們。

如果你在模版風(fēng)格中修改或更新相關(guān)設(shè)計(jì)的話，大多數(shù)設(shè)計(jì)工具可以直接將這些更新應(yīng)用到使用該設(shè)計(jì)風(fēng)格的界面元素中。而視你的設(shè)計(jì)工作量而定，通常你都可以節(jié)省數(shù)個(gè)小時(shí)的時(shí)間。

• 為什么要堅(jiān)持使用固定的字體系統(tǒng)：實(shí)際上，大多數(shù)字體特性都是固定的。相比于無限排列組合，倒不如給自己列一份可選字體清單，從而讓設(shè)計(jì)變得更簡單。
• 延伸閱讀1：8像素網(wǎng)格：網(wǎng)頁設(shè)計(jì)中的字體
• 延伸閱讀2：如何在Sketch中自動(dòng)化設(shè)計(jì)文字和圖層風(fēng)格

3. 色彩選用嚴(yán)格謹(jǐn)慎

我非常喜歡優(yōu)衣庫的衣服，因?yàn)檫@個(gè)品牌的衣服價(jià)格比較親民，而且也符合我個(gè)人認(rèn)知中有時(shí)候顯得非常高端的中端品牌。

但優(yōu)衣庫的問題在于，他們同一款式的T恤可能會(huì)推出多達(dá)93種不同顏色的選擇。紅色、綠色、藍(lán)色、藍(lán)綠色、青綠色、淺藍(lán)色、蔚藍(lán)色、深藍(lán)色、淺青色……

實(shí)際上，這么多顏色選擇并沒有真正的意義。對(duì)我而言，面對(duì)多種選擇時(shí)，我是無法堅(jiān)決地做出抉擇的。如果真的有上千種顏色選擇，那最終獲益的可能也只有彩通色卡（Pantone）的年度代表色了。

為了應(yīng)對(duì)色彩選擇困難的問題，我參考了許多百萬富翁的“衣櫥”，并從中嚴(yán)格篩選出了自己喜歡的選擇。相比于滿衣櫥的各種顏色，我把自己的“衣櫥”顏色限制在幾個(gè)特定的色彩范圍之內(nèi)。

色彩，永遠(yuǎn)都有其存在的意義。如果你只是為了增加顏色而增加顏色，那你其實(shí)根本不需要那么多顏色。

除了黑色和白色之外，我一般常用的色彩主要有五種。而在運(yùn)用這五個(gè)色彩的過程中，我還可以借助透明程度（即100%透明度、50%透明度、25%透明度……）。這樣一來，基于這五種色彩，我可以創(chuàng)造出更多的色彩，而且我也不需要再去選用某個(gè)顏色代碼，從而節(jié)約了我的時(shí)間。

另外，如果涉及到圖表或相關(guān)可視化圖像的設(shè)計(jì)時(shí)，我還有另一套專屬的色彩庫。

• 品牌主色調(diào)：比如，電郵營銷平臺(tái)Mailchimp，其主色調(diào)就是黃色。
• 品牌次色調(diào)：即相對(duì)主色調(diào)而言稍次要的重要色調(diào)。對(duì)Mailchimp而言，其次色調(diào)是稍微帶藍(lán)綠色的。
• 成功/順利：通常都采用的綠色。這即意味著“做得不錯(cuò)！”或者“一切都是按計(jì)劃行事的！”
• 警告：通常都采用的黃色。這即意味著“注意！”或者“這里可能會(huì)出現(xiàn)問題?！?/li>
• 錯(cuò)誤：通常都采用的紅色。這即意味著“你搞砸了?！被蛘摺跋到y(tǒng)嚴(yán)重癱瘓?！?/li>
• 黑色：黑即是黑，這是一種有點(diǎn)厚重感的顏色。
• 白色：主要用于背景顏色等領(lǐng)域。

在色彩選用方面，其實(shí)很容易找不到方向。也正是因?yàn)槟阍谶x色過程中容易在大量選擇面前不知所措，所以你才應(yīng)該限制你的“個(gè)人色板”數(shù)量，并且在你的所有設(shè)計(jì)作品中堅(jiān)持使用自己選用的主色調(diào)。

為什么要嚴(yán)格謹(jǐn)慎選用色彩：如果在用色方面足夠謹(jǐn)慎的話，整體的設(shè)計(jì)也會(huì)顯得更有聚合力。如果有自己的常用主色調(diào)，那針對(duì)“這個(gè)地方該用什么顏色？”這個(gè)問題時(shí)，你的反應(yīng)速度就會(huì)相對(duì)較快。

• 延伸閱讀1：創(chuàng)建個(gè)人色板快速入門技巧
• 延伸閱讀2：網(wǎng)頁端設(shè)計(jì)推薦色板
• 延伸閱讀3：如何構(gòu)建個(gè)人色板體系？

4. 要對(duì)自己的設(shè)計(jì)工具“知根知底”

實(shí)際上，你具體使用的是什么設(shè)計(jì)工具并無關(guān)緊要。而真正重要的是，你要“沉下去”認(rèn)可自己的工具，并且最好做到對(duì)工具的各種功能了如指掌。

雖然我自己常用的是Adobe Illustrator軟件，但不可否認(rèn)的是，我仍然有一些我不是很了解的功能。之前我并不知道消失點(diǎn)網(wǎng)格的主要功能和使用方法，但由于曾經(jīng)不小心啟用了這個(gè)功能，而不得不通過谷歌查詢?nèi)ふ页蜂N方法。

一定要多研究自己的工具。你可以多看看各種視頻教程，也可以加入某個(gè)群組，甚至在Meetup（譯者注：全球最大的用戶自發(fā)組織活動(dòng)的社區(qū)）上尋找相關(guān)社群組織。

多接觸行業(yè)內(nèi)的人，多了解有關(guān)資源，從而可以在這個(gè)過程中不斷地深入了解和學(xué)習(xí)使用你的設(shè)計(jì)工具，然后再不斷地付諸實(shí)踐。

我們招聘初級(jí)用戶體驗(yàn)設(shè)計(jì)師后，通常都會(huì)讓他們?cè)谌肼毢蠡◣讉€(gè)月時(shí)間學(xué)會(huì)熟練使用Sketch。通過這幾個(gè)月時(shí)間，不斷地學(xué)習(xí)和了解快捷鍵、格式風(fēng)格、最佳實(shí)踐以及高效設(shè)計(jì)技巧等。

在那之后，當(dāng)他們開始嘗試去設(shè)計(jì)登錄界面時(shí)，他們就會(huì)有一種“彈鋼琴”的感覺。手指觸碰到鋼琴鍵盤時(shí)，會(huì)讓他們有一種似曾相識(shí)的感覺。

在你還沒有對(duì)設(shè)計(jì)工具知根知底之前，你可能都需要不斷地花時(shí)間去熟悉了解。

很多情況下，工具中的某項(xiàng)內(nèi)置功能可以直接完成你一直在嘗試實(shí)現(xiàn)的設(shè)計(jì)，耗時(shí)短效率高，但你就是不知道。

所以，一定要先多花時(shí)間在投入方面，要不停地問自己“還有沒有更好更便捷的方法？”

• 為什么要對(duì)設(shè)計(jì)工具知根知底：工具是用來幫助我們的，而不是起阻撓作用的。然后，我們就可以專注于設(shè)計(jì)解決方案，而不再對(duì)如何使用這個(gè)工具感到焦慮。
• 延伸閱讀1：設(shè)計(jì)師快速上手的5個(gè)技巧
• 延伸閱讀2：Sketch終于迎來了期待已久的更新

小結(jié)

不積小流無以成江河，不積跬步無以至千里。要成為優(yōu)秀的設(shè)計(jì)師，你的設(shè)計(jì)基本功一定要扎實(shí)才行。

如果在設(shè)計(jì)過程中，總是面對(duì)各種選擇而遲遲無法下定主意，那你的設(shè)計(jì)過程注定是一個(gè)漫長而艱苦的過程。完善和提升自己的設(shè)計(jì)基本功時(shí)，一定要真正掌握好某項(xiàng)基本功后，再去學(xué)習(xí)和熟練使用下一項(xiàng)功能。

世界上所有的優(yōu)秀設(shè)計(jì)師在間距設(shè)計(jì)、字體排版以及色彩運(yùn)用等方面都有扎實(shí)的基本功。而一旦你能夠在這些方面做到游刃有余的時(shí)候，你會(huì)發(fā)現(xiàn)，原來設(shè)計(jì)是如此地輕松。

在本系列文章的中篇中，我將向大家介紹有關(guān)技巧，讓你的設(shè)計(jì)工具真正地幫助你設(shè)計(jì)。

中篇內(nèi)容預(yù)告：

1. 拓展延伸設(shè)計(jì)工具的潛能
2. 創(chuàng)建專屬的重復(fù)利用工具
3. 不要嘗試重新設(shè)計(jì)常用的設(shè)計(jì)模式
4. 利用輔助設(shè)計(jì)資源

原文鏈接：https://modus.medium.com/the-ultimate-guide-to-becoming-a-great-designer-part-1-of-3-88f627233f48

譯者：神譯局，神譯局是36氪旗下編譯團(tuán)隊(duì)，關(guān)注科技、商業(yè)、職場、生活等領(lǐng)域，重點(diǎn)介紹國外的新技術(shù)、新觀點(diǎn)、新風(fēng)向。

來源：https://36kr.com/p/5220691

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

題圖來自Unsplash，基于CC0協(xié)議