第五章?談自學設計

　　一、自學設計，你真的入門了嗎？

　　1. 寫給UI設計初學者們

　　幾乎每隔幾天我便能在各類設計網(wǎng)站看到關(guān)于自學UI設計的分享文章。這些文章有一個共同的特點，就是描述作者如何從一個零基礎的設計小白，通過種種途徑，成長為一個熟練掌握PS或AI的設計達人的，或者是分享了一堆有參考價值的設計類網(wǎng)站或工具等。這些文章的單擊率很高，因為通過這些初學者眼中的“干貨”，能夠很容易地進行模仿，并得到技能上的快速提升。

　　但我想問的是，這真的是學習UI設計的正確方式嗎，如果不是，那有沒有一篇能夠正確引領(lǐng)大家學習UI設計的文章呢？很可惜，我在網(wǎng)上搜了很久，卻沒有找到那篇我認為是正確的文章。

　　之所以導致這個問題，我覺得可能有以下兩個原因：

　　這類文章的內(nèi)容往往比較“濕”，理論性比較強，需要時間慢慢體會，不是拿來就能用的東西，因此文章的單擊率往往較低，隨著時間的推移，很快便淹沒在了那些新鮮出爐的設計干貨之中，而無法搜索到了。

　　那些真正優(yōu)秀的設計師往往都早已過了初學者那個階段，他們也更樂于分享自己的設計觀點或杰出作品，卻很難站在一個初學者的角度來寫如何學習設計的文章了。

　　我也曾和很多設計初學者們一樣在自學的過程中有過困惑，走過彎路。今天，我仍在不斷地努力學習，去嘗試理解設計的本質(zhì)與內(nèi)涵。我也希望通過這篇文章，能給那些還在設計門外打轉(zhuǎn)，而不得其門而入的學習者們一些不同的啟發(fā)。

　　2. 我為什么自學UI設計

　　我之所以自學UI設計，其實源于一次失敗的創(chuàng)業(yè)實驗。稱它為實驗，是因為那并不算是一次真正的創(chuàng)業(yè)，我和我的合伙人并沒有放棄自己的工作，而是利用一些業(yè)余時間來做一個以實習生為主題的社區(qū)（那時還是“開心”“人人” 這樣的SNS社交平臺大行其道的年代）。我那時是一家500強金融集團的應用架構(gòu)師，因此，便當仁不讓地承擔起了我們這個團隊中程序員的角色，負責完成了整個平臺的架構(gòu)及開發(fā)工作。但始終困擾我們的是找不到一名優(yōu)秀的UI設計師，能夠把這個平臺推到一個產(chǎn)品的高度。我們也曾經(jīng)通過朋友介紹或在淘寶上尋找，合作過幾位設計師，但由于種種原因（技能問題、理念問題、投入度問題等）都無法達到我們的要求，*后也都不歡而散了。當然，我們的這次創(chuàng)業(yè)也*終以失敗而告終�，F(xiàn)在回想起來，失敗的原因有很多，但缺少一名優(yōu)秀的UI設計師，導致我們的產(chǎn)品遲遲不能推向市場，是這次失敗的一個非常重要的原因。

　　我始終覺得自己還是一個有著產(chǎn)品夢想的人（自我鼓勵一下），因此，為了下一次重新啟航行時，不再重蹈覆轍，我便決定開始自學UI設計。

　　3. 自學路上的困擾

　　我在自學UI設計的道路上，走得并不平坦，遇到過很多困擾和挫折。今天想來，其實*大的障礙正是源于自身對于UI設計本身的理解不夠全面和深刻。

　　概括起來，主要包括以下幾個方面：

　　對于學習UI設計的困難準備不足：由于在此之前，我一直從事企業(yè)級應用的研發(fā)，因此，那時在我們的圈子里，設計師（我們更多稱為“美工”）屬于非常邊緣的輔助角色。我也想當然地覺得學習那些技能對于我來說是小菜一碟，幾周就能搞定。但實踐證明，我錯了，真正的UI設計遠沒有想象中的那么容易掌握，直到今天，我都不敢說自己已經(jīng)掌握了UI設計并能稱得上是一名UI設計師。隨著我對設計本身理解的加深，對設計師的看法也完全轉(zhuǎn)變了，他們不再是我口中的美工，而是一個能夠左右產(chǎn)品優(yōu)劣，驅(qū)動產(chǎn)品研發(fā)的關(guān)鍵角色。

　　認為學習UI設計 = 學習 PS、AI等工具：當決定學習UI設計后，我便開始在網(wǎng)上搜索如何學習UI設計，而“度娘”（百度搜索）給我的答案便是大量的PS、AI等各種設計教程。我也是一路拼命下載，然后不分晝夜地學習。不久之后，我確實能夠按照這些學習指南P出一些圖，或是做出幾個圖標來了，但當我嘗試獨立去做一個完整的UI設計時，卻發(fā)現(xiàn)自己做出來的東西與那些我所見過的優(yōu)秀設計仍有著天壤之別，即使是我完全模仿那些優(yōu)秀作品所做的設計，仍然感覺怪怪的，好像哪里出了問題，自己又說不清楚。這時，我才意識到我的學習方法可能錯了，簡單地說，就是撿了芝麻丟了西瓜，雖然掌握了一些設計工具技巧，但對真正的設計卻一無所知。

　　審美能力不足：我遇到過的另一個困難便是自身審美能力不足。其實我想說，這不僅是我一個人的問題，可能也是我們這一代，甚至是幾代人共同的問題。由于整個教育體系對于學生在美學教育上不夠重視，導致我們從小就缺少藝術(shù)和美的熏陶，美術(shù)課常常會被語數(shù)外等主課霸占而成了擺設。由于缺乏對美的感知和判斷能力，導致我們很難準確評判自己作品的優(yōu)劣，更不會知道如何去改善它。放到更大的角度，我們很難像蘋果那樣設計出偉大的產(chǎn)品來。

　　4. 重新認識UI設計

　　在意識到學習方法的錯誤之后，我便再次尋求了“度娘”的幫助，但這一次我要找的是那些優(yōu)秀設計師們自己對于設計的感悟、設計心得、推薦閱讀的設計類書籍等。我也放下了手中的PS、AI，靜下心來進行了大量的閱讀。通過這些閱讀，我也漸漸了解并重新認識了UI設計。

　　經(jīng)過對設計知識的重新梳理，我將所需要掌握的基本設計技能歸納為以下10點。

　　色彩：需要理解色彩的基本原理及配色方法。色彩很難把控，因為它很容易被過度使用。如果你還是一個初學者，那么應盡可能地使用柔和的色彩，僅在需要強調(diào)的地方使用更醒目的色彩。

　　字體與排版：文字往往占據(jù)整個設計內(nèi)容80%以上的區(qū)域，所以理解如何使用正確的字體和排版方式非常重要。請將內(nèi)容的清晰易讀作為你定義字體和做排版的首要目標。

　　動效：動效能夠顯著增強一個應用的用戶體驗。它們能使你的應用更有生氣和迷人，前提是你所設計的動效快速、流暢，并且是符合用戶預期的。

　　圖標：優(yōu)秀的圖標往往與我們每天見到的事物緊密關(guān)聯(lián)，比如，相機、垃圾桶、云等，能讓人一眼就識別出它所代表的功能。因此，應使用那些具有良好辨識度的圖標，避免讓用戶產(chǎn)生混淆。

　　聲效：聲效在設計中用得很少，但恰如其分的聲效能夠提升用戶體驗。用戶不用看到你的應用，僅聽到一個熟悉的聲音便能識別出你的產(chǎn)品來。

　　獲得設計靈感：設計靈感不是與生俱來的，你需要不斷地尋找它。有很多獲得設計靈感的方法，下文中我將分享我的一些經(jīng)驗。

　　設計原則：流行轉(zhuǎn)瞬即逝，但設計中*本質(zhì)的東西卻能永恒。設計大師們很早就認識到了這些，并將它們提煉為設計原則。你要做的是理解這些設計原則，并將它們運用到你的設計之中。

　　用戶體驗設計：你需要了解你的用戶，這樣才能設計出符合用戶需求的產(chǎn)品。學習設計心理學，將有利于你設計出更人性化的產(chǎn)品。

　　基于不同平臺的設計：在不同平臺設計產(chǎn)品存在很大的差異，你需要了解產(chǎn)品所在的平臺（如 iOS、Android），并遵循它們各自的設計規(guī)范。

　　設計工具：設計工具有很多，對于UI設計，我建議使用Sketch 3，因為它是專為UI設計而生的，能給你帶來更高的設計效率。

　　5. 改變設計工具

　　自從我改變學習UI的方法之后，一直到今天，我每天都會堅持閱讀 Designer News（https://www.designernews.co/） 上的每日推薦文章，它能讓我了解國外優(yōu)秀的設計師門都在想些什么或做些什么。在這之中，給我?guī)�來�?大改變便是我放棄了原來使用的 Photoshop，而開始使用Sketch來進行UI設計。因為我驚訝地發(fā)現(xiàn)越來越多的國外設計師，特別是在初創(chuàng)公司的設計師們開始使用Sketch作為他們的設計工具。

　　下圖為2015年 Substraction.com（http://tools.subtraction.com/interface-design. html）對4000名來自不同領(lǐng)域的UI設計師進行問卷調(diào)查后得到的UI設計工具使用情況，Sketch已經(jīng)大幅超越Photoshop成為設計師們首選的UI設計工具。

　　實踐證明，使用Sketch確實給我?guī)�來了極大的驚喜。

　　小巧快捷：Sketch只有41M，相較于1.6GB的Photoshop來說顯得非常小巧。因此，無論是安裝，還是啟動、運行，Sketch都非常快捷。

　　專為UI設計而生：Photoshop是一個圖片處理工具，它包含了大量的圖片處理功能，但這些對于UI設計師來說是多余的，并會成為UI設計師們工作時的噪聲，降低他們的設計效率。而Sketch則專注于UI設計，它的所有功能都只為UI設計服務。比如，統(tǒng)一的計量單位Pixel使你不必關(guān)注其他計量單位（cm、ml、Picas等），支持HSB、RGB顏色模型和色板功能，使用Symbol可以方便地復用你的設計元素，可針對任意設計元素或元素組導出不同分辨率的圖片等等。另外，你不用再面對一個一半功能都不會去碰的工具欄，也完全不用去關(guān)心那些與UI設計無關(guān)的東西，這使你更容易學習和掌握這個設計工具。

　　強大的插件功能 ：雖然Sketch的核心非常小，但它卻提供了非常強大的插件功能。針對不同的設計場景，可以使用不同的插件。比如，你可以使用Sketch Palettes保存你的常用色板，并與朋友方便地分享；使用 Magic Mirror 可以將你的設計方便地展示到不同的實體模型（如iPhone、iPad、書的封面等）；也可以使用 Sketch Content Generator 來批量地產(chǎn)生內(nèi)容，這能為設計師節(jié)省大量的時間。此外，還有像Measure、Dynamic Button、Sketch Constraints 等許多非常優(yōu)秀的插件都可以幫助你大大提升工作效率，從而使你更能夠?qū)Ｗ⒂谠O計本身。

　　以上只是Sketch所具有的眾多優(yōu)秀特性中的一小部分，網(wǎng)上已經(jīng)有很多關(guān)于Sketch的設計教程和指南，你能通過這些資料，快速地學習并掌握Sketch。我正看到越來越多的如Sketch、Affinity Designer、Affinity Photo 等創(chuàng)新工具對設計工具領(lǐng)域帶來的變革，它們不再追求大而全，而更注重于以*簡潔、高效的方式服務于不同的設計目的。這也正是互聯(lián)網(wǎng)思維在設計工具領(lǐng)域的一個體現(xiàn)。因此，如果你是一個UI設計初學者，或者已經(jīng)是一名UI設計師并正在使用PS、AI等工具，那么我都建議你嘗試使用Sketch，因為它是一個能給你帶來巨大改變并代表著未來的優(yōu)秀設計工具。

　　6. 尋找設計靈感

　　對于設計初學者來說，經(jīng)常會為找不到設計靈感而苦惱。而我想說的是，靈感不是與生俱來的，它需要你去不斷地尋找。如果沒有靈感，你將永遠不能開始，更別說去完成一個設計了。下面是我使用的一些方法。

　�。�1）閱讀

　　我沒有上過任何設計學校或培訓班，因此我的大部分設計知識都是從閱讀中獲得的。我?guī)缀醪蛔x那些30天速成系列的書或關(guān)于設計趨勢的文章，因為我知道技術(shù)的變化是非�？斓�，正如我現(xiàn)在完全使用Sketch來做設計，而不用PS一樣。我更關(guān)注設計的本質(zhì)，書是獲得這方面知識的很好途徑。

　　我閱讀那些對設計有著深刻思想的人物傳記，如《斯蒂夫·喬布斯傳》，與設計相關(guān)的心理學書籍，如《設計心理學》，與色彩相關(guān)的書籍，如《色彩設計》，與字體相關(guān)的書籍，如《設計師的自我修養(yǎng)》等。也正是通過這些書籍，讓我逐步理解了設計的內(nèi)涵，從而讓我徹底走出了之前學習設計時的誤區(qū)。

　　另外，我也會讀一些網(wǎng)上的優(yōu)秀文章，Designer News（https://www.designernews.co/） 是一個使我獲得高質(zhì)量設計文章的優(yōu)秀網(wǎng)站，在這里我可以看到*新的來自全球設計師的優(yōu)秀分享。當然，我也在優(yōu)設（http://www.uisdc.com/）、推酷（http://www.tuicool.com/）、Medium（https://medium.com/） 等網(wǎng)站上閱讀那些具有思想性的設計文章，并且通過關(guān)注一些優(yōu)秀的設計師，從他們身上學到了很多經(jīng)驗和啟發(fā)，給我學習UI設計帶來了極大的幫助。

　�。�2）收集優(yōu)秀設計

　　另一個獲得靈感的方法是收集優(yōu)秀的設計作品。Ember是我用過的用來收集設計素材的*佳工具。更棒的是它支持訂閱功能，可以從Dribbble這樣的網(wǎng)站自動下載設計作品，可讓我非常方便地瀏覽和收集。（下圖為我的Ember應用截圖）

　　除了Ember之外，我也使用Pintrest（https://www.pinterest.com/）來收集手機上看到的優(yōu)秀設計，并分類添加到我在Pintrest上創(chuàng)建的Board中。（下圖為我的Pintrest主頁（https://www.pinterest.com/techmask/））

　�。�3）擁有工匠精神

　　你所做的每一件事情，它的背后都可以和藝術(shù)聯(lián)系在一起。只要是付出了努力，精心制作，并能反映出作者情感與靈魂的東西都可以稱為藝術(shù)品。想一想你平時喜歡做的事情，閱讀、散步、享用美食或者看展覽。這其中的每一件都與一種藝術(shù)形式相關(guān)聯(lián)：寫作、環(huán)球旅行、烹飪、攝影。你會發(fā)現(xiàn)當你不斷完善某一項技能的同時，其他技能也會得到加強。對于設計來說，上面提到的寫作、攝影、旅行等都是對設計能力的很好補充。

　　二、那些永恒的設計原則

　　很多人都在尋找那些能夠幫助他們快速提升設計能力的方法，但你是否想過，哪些方面會對你的設計產(chǎn)生影響呢？是使用工具的技巧，對設計的理解和態(tài)度，還是你的生活習慣呢？我想說所有這些都是決定你的設計是否優(yōu)秀的因素，而在這之中，對設計本身的理解顯得尤為重要。在這篇文章里，我希望通過那些經(jīng)典的設計原則和設計領(lǐng)域內(nèi)的一些*佳實踐，來嘗試啟發(fā)你對設計本質(zhì)的理解與認識。

　　1. 什么是設計，什么才是優(yōu)秀的設計

　　設計正在被不斷地細分并滲透到各行各業(yè)，我所知道的設計師分類就包括：工業(yè)設計、圖形設計、UI設計、UX設計，等等。那么到底什么是設計，我們又為什么要設計呢？其實，對于所有類別的設計，其*終目的都是相似的，那就是去解決一個特定的問題。設計應源于對問題本身的思考，并做出能夠解決問題的相應設計。切忌為了設計而設計，在你動手畫草圖或原型前，先嘗試問問自己對要解決的問題是否已經(jīng)清楚了，你又打算用什么方式去解決它呢？

　　什么才是優(yōu)秀的設計呢？這是一個更難回答的問題，可以說它既有標準又沒有標準。我所見到的那些優(yōu)秀設計絕不是那些包含了高超設計技巧的作品， 它們的優(yōu)秀之處反而在于設計本身的成熟度上。想一想，就在幾年之前，我們手機上還充滿了那些擬物化的圖標，而今天無論是蘋果還是安卓，都在使用更簡單、清晰、扁平的圖標。雖然說是蘋果引領(lǐng)了這樣一種設計風格的改變，但這恰恰是設計成熟度提高的一種表現(xiàn)。

　　2. 盡可能少設計

　　說到設計的成熟度，就不得不提Dieter Rams，他是德國著名的工業(yè)設計師，為德國家電制造商博朗（Braun）設計出很多非常優(yōu)秀的產(chǎn)品，而他的很多設計更是被蘋果拿來模仿。

　　Dieter Rams所提出的 10條優(yōu)秀設計原則 （https://www.vitsoe.com/rw/about/good-design）更是被推崇為設計領(lǐng)域的黃金法則。作為一代設計巨匠，他的成就如此杰出，而他所倡導的這些設計原則，即使在30年后的今天，仍然能在設計界產(chǎn)生強烈地共鳴。

　　在這10條設計原則中的*后一條“優(yōu)秀的設計是盡可能少設計”更是發(fā)人深省。一些設計初學者們的設計作品就像是由很多設計元素堆砌而成的，整個設計作品違反了上面這些設計原則中的一條，甚至幾條，*終成為一個失敗的設計。你在做設計的過程中，不妨不斷地對照Dieter Rams的這10條設計原則，去思考和修正自己的設計。另外，你也需要牢牢記住少即是多的道理。

　　3. “這樣就好”與Redesign

　　我曾讀過幾本日本知名設計師的書，比如，《設計中的設計》《設計的覺醒》，《為什么設計》等，從中深深體會到日本這幾代設計師在對日本的文化、環(huán)境、人文等各方面因素進行全面觀察，以及對設計做出深刻反思后，得到的那些適合現(xiàn)代日本、亞洲甚至整個世界的優(yōu)秀設計思想。其中，原研哉（日本平面造型設計大師）在很多場合都提到了“這樣就好”的設計理念——去掉不必要的修飾，更加注重產(chǎn)品的功能、內(nèi)容，以及給人帶去的感受。他將這一理念體現(xiàn)在了他所主導的時尚生活品牌“無印良品”的產(chǎn)品設計之中，受到了年輕一代極大的歡迎。

　　設計初學者們也應仔細體會“這樣就好”的設計理念，并通過不斷地實踐去達到它。而一種*為行之有效的方法便是Redesign——重新設計（無印良品的很多產(chǎn)品都是通過不斷進行Redesign進化而來的，為此，無印良品還專門舉辦了以Redesign為主題的展覽與設計比賽）。對原有（舊的）設計進行Redesign是產(chǎn)生設計變革的一種有效方式。

　　對于UI設計來說，我同樣能在Dribbble上看到很多Redesign的作品（大多是針對那些知名網(wǎng)站或APP的）。Redesign對于那些沒有明確設計目標的初學者來說是一種非常好的實踐方式，你不僅能通過它提升自己的設計能力，而且在提交你的作品之后，還能獲得很多其他設計師的點評和建議，從中你能了解自己設計中存在的問題，并快速獲得提高。

　　另外，我還想強調(diào)的一點是Redesign不應僅僅針對設計本身（比如，換一種顏色，加一些動效等），而更應從產(chǎn)品的功能、環(huán)境的匹配度、給使用者的感受等更深層次的方面進行思考。其實，Redesign體現(xiàn)的是一種深入反思的過程，相信當你能夠?qū)⑺�有這些問題都想清楚時，也就已經(jīng)完成了設計的一大半工作了。

　　4. 遵循設計的*佳實踐

　　我沒有上過任何設計學校，使用Photoshop等工具的水平更是糟糕，但這并不妨礙我做出一個還算不錯的設計，因為我會在設計中盡可能地參照那些設計中的*佳實踐。在你的能力還沒達到打破那些設計準則去進行創(chuàng)新并形成自己鮮明的風格之前，不妨也像我一樣遵循那些設計的*佳實踐，因為它們往往是有效的。

　�。�1）神奇的數(shù)字3

　　你可能已經(jīng)發(fā)現(xiàn)了，在你所看到的許多事物中都包含一個神奇的數(shù)字3，比如，大量使用3種顏色配色的網(wǎng)站，斯蒂夫·喬布斯在介紹Apple產(chǎn)品時*多描述產(chǎn)品的3個主要特性（比如 iPhone）。其實，這背后是有原因的：人的大腦一次同時*容易記住3件事情。就像我們記電話號碼時，總是將它分為3個數(shù)字一組進行記憶。另外，3所構(gòu)成的形狀也*穩(wěn)定，*容易讓人產(chǎn)生美感。因此，在你對一些設計中的數(shù)字無法確定時，就使用3這個數(shù)吧。

　　（2）使用網(wǎng)格來確立秩序

　　人們在瀏覽或閱讀一個頁面時，都會下意識地去尋找它的規(guī)律，以便更好地識別內(nèi)容。優(yōu)秀的設計往往能夠幫助人們建立這種秩序，方便人們獲取想要的內(nèi)容，而那些不佳的設計則往往會加重人們閱讀的負擔，*終讓你的用戶早早地離你而去。

　　使用網(wǎng)格進行設計是建立秩序的*有效途徑。設計初學者們都可以從使用網(wǎng)格開始，因為它能幫助你做出統(tǒng)一且和諧的設計來。我讀過的一本不錯的關(guān)于網(wǎng)格應用的小冊子《秩序之美》，它是由網(wǎng)格的發(fā)明者，紐約時報網(wǎng)站的資深設計師Knoi Vinh編寫的，對于學習和使用網(wǎng)格進行設計很有幫助。

　�。�3）用肉眼來判斷平衡

　　平衡是另一個非常重要的設計原則，對于相同的設計元素，我們很容易使用對稱的方法來處理平衡。但是，對于那些在形狀、大小、顏色方面都存在差異的元素，我們又應該如何處理這種平衡呢？很多人會使用標尺來確保元素間的大小和位置一致，但你還必須用你的肉眼去驗證并進行必要的調(diào)整。因為平衡不僅取決于物體的大小，更與它們的形狀、顏色、背景等因素有關(guān)，相信自己的眼睛和感覺去調(diào)整你的設計，使它*終達到整體的平衡。

　　（4）應用黃金比例

　　使用網(wǎng)格可以幫助我們將元素對齊，但我們又應該如何確認布局中欄位劃分的比例，或者在我們確認了一些設計元素的寬度之后如何去決定它們的高度呢？這時，往往可以用到黃金比例——1.618。

　　如果你使用的是960Grid這種960px寬的網(wǎng)格系統(tǒng)，并且你希望分出兩欄布局時，就可以使用960/1.618=593，593px的位置就是黃金分割點。因此，對兩欄的網(wǎng)頁布局，將左邊欄寬度設為593px，將右邊欄寬度設為367px（960-593）就可以了。同樣當你確定了一張圖片的寬度為600px時，采用黃金比例，它的高度就可以設為370px左右。

　　當然黃金分割比例只是在設計上的一個指導，如果你可以打破這個規(guī)則又能保證整個設計自然平衡也是可以的。作為一個通常的規(guī)則，經(jīng)常把黃金比例用5∶3來代替，雖然不是非常精確，但是能更直觀和方便地在設計中使用。

　�。�5）恰到好處的強調(diào)與對比

　　通過強調(diào)可以引導用戶去使用產(chǎn)品的某些功能，比如：用戶注冊按鈕、產(chǎn)品的購買按鈕，等等。但初學者往往會在運用強調(diào)這種方法時，出現(xiàn)一些常見的問題：

　　在同一個頁面中過多地運用強調(diào)。

　　不分主次的強調(diào)。

　　……