2022-4-13 博博
UI 設(shè)計(jì)，是用理性方法，來(lái)滿(mǎn)足需求，并帶來(lái)美學(xué)享受。
本篇探討 UI 設(shè)計(jì)如何做到理性。全文共有三部分：有哪些理性，如何做到理性，止步于理性嗎。
UI 設(shè)計(jì)主要有四類(lèi)理性：基本原則，基礎(chǔ)知識(shí)，風(fēng)格設(shè)定，風(fēng)格把控。四類(lèi)理性有一個(gè)共同核心：活學(xué)活用。
共有四個(gè)基本原則：對(duì)齊，對(duì)比，親密，重復(fù)。
先說(shuō)對(duì)齊。
秩序產(chǎn)生美。對(duì)齊作為一種基本秩序，主要事關(guān)整齊美觀(guān)和閱讀體驗(yàn)。
對(duì)齊一般分左對(duì)齊、右對(duì)齊和居中對(duì)齊。
從閱讀體驗(yàn)角度來(lái)講，左對(duì)齊通常勝過(guò)居中對(duì)齊，所以絕大部分文章和 UI 界面都是左對(duì)齊為主。
從美感角度來(lái)講，居中對(duì)齊往往勝過(guò)左對(duì)齊，所以一些強(qiáng)調(diào)美感勝過(guò)強(qiáng)調(diào)閱讀效率、篇幅不長(zhǎng)、同時(shí)需要細(xì)品的詩(shī)或歌往往采用居中對(duì)齊。
從空間利用率角度來(lái)講，右對(duì)齊往往是左對(duì)齊的一種補(bǔ)充。比如微信的發(fā)現(xiàn)頁(yè)面，最重要的圖標(biāo)和文字左對(duì)齊，次要的右箭頭和其它信息右對(duì)齊。
UI 設(shè)計(jì)追求閱讀體驗(yàn)、美感和高空間利用率，所以這三種對(duì)齊方式大部分時(shí)候都會(huì)同時(shí)出現(xiàn)。整體而言，是以左對(duì)齊為主，居中對(duì)齊和右對(duì)齊為輔。
再說(shuō)對(duì)比。
嘈嘈切切錯(cuò)雜彈，大珠小珠落玉盤(pán)。音樂(lè)講究韻律和節(jié)奏，設(shè)計(jì)也追求錯(cuò)落有致的節(jié)奏感。這種節(jié)奏感，很大程度上靠對(duì)比實(shí)現(xiàn)。
好的對(duì)比可以帶來(lái)視覺(jué)張力，就是抓人眼球的吸引力，同時(shí)也能起到主次分明和視覺(jué)引導(dǎo)的作用，最終帶來(lái)良好的閱讀體驗(yàn)。
一定程度上，對(duì)比是無(wú)處不在的。只要存在不同，就存在對(duì)比。比如大小之間的對(duì)比，不同顏色之間的對(duì)比，文字與圖標(biāo)/圖片之間的對(duì)比，不同對(duì)齊方式之間的對(duì)比，等等。
一般而言，對(duì)比需要果斷：若不同，就徹底不同。因?yàn)橐话闱闆r下，充分的對(duì)比能帶來(lái)更好的視覺(jué)張力和更好的閱讀體驗(yàn)。
第三說(shuō)親密。
設(shè)計(jì)就是分類(lèi)，張小龍?jiān)缡钦f(shuō)。分類(lèi)中最重要的原則是親密，還有一個(gè)副產(chǎn)物是留白。
性質(zhì)相同或相似的元素，我們會(huì)讓它們看起來(lái)離的更近，關(guān)系更親密。親密成就分類(lèi)，分類(lèi)能化繁為簡(jiǎn)。
最后說(shuō)下重復(fù)。
設(shè)計(jì)追求一致性，一致性主要靠重復(fù)來(lái)實(shí)現(xiàn)。被大量“重復(fù)”的元素，比如這篇文章里的字體大小和字體顏色，既保證了一致性，又提高了效率。
基礎(chǔ)知識(shí)主要包括：手繪、顏色、版式設(shè)計(jì)、字體設(shè)計(jì)、品牌設(shè)計(jì)、動(dòng)效設(shè)計(jì)、插畫(huà)設(shè)計(jì)等專(zhuān)業(yè)知識(shí)。
UI 設(shè)計(jì)師可能不用畫(huà)卡通人物或插畫(huà)，但一定會(huì)畫(huà)圖標(biāo)和 logo，這些也會(huì)用到手繪。作為造型基本功，需要掌握一定手繪技能。
顏色方面，最重要的是能夠很好感受和理解顏色傳達(dá)出來(lái)的感覺(jué)，也即顏色的“精神之美”，這塊主要依賴(lài)審美和練習(xí)。
配色方面，推薦軟件里的 HSB（色相、飽和度和亮度） 模式，這種模式很好理解，也方便調(diào)色。另外還強(qiáng)烈推薦從照片中吸取顏色，因?yàn)檎掌鶗?huì)和“生活”、“自然”有一定關(guān)聯(lián)，“生活”和“自然”是非常重要的素材和靈感來(lái)源。從色卡中選擇顏色也是一個(gè)不錯(cuò)的選擇。
版式設(shè)計(jì)就像是選秀節(jié)目中練習(xí)生的舞臺(tái)表演，考驗(yàn)的是唱跳、表情管理、舞臺(tái)魅力、臨場(chǎng)應(yīng)變等綜合實(shí)力。
“活學(xué)活用”環(huán)節(jié)，會(huì)結(jié)合例子分享版式設(shè)計(jì)。
字體設(shè)計(jì)、品牌設(shè)計(jì)、動(dòng)效設(shè)計(jì)、插畫(huà)設(shè)計(jì)等方面，個(gè)人經(jīng)驗(yàn)不多，就不分享了。文末會(huì)附一份推薦書(shū)單，囊括基本原則和部分基礎(chǔ)知識(shí)。
風(fēng)格設(shè)定，即上篇提到的“精確描述”，是在動(dòng)手設(shè)計(jì)之前，先探索出合適的風(fēng)格，并把它精確描述出來(lái)。
好的開(kāi)始是成功的一半。風(fēng)格設(shè)定是一個(gè)開(kāi)始，極其重要。如果風(fēng)格設(shè)定只做到 60 分，稍微打點(diǎn)折扣的執(zhí)行結(jié)果就是不及格。所以，如果要把設(shè)計(jì)做到 85 分，風(fēng)格設(shè)定一般要做到 90 分。
風(fēng)格設(shè)定猶如在茫茫大海中行船，首要目標(biāo)是把握方向，核心訴求是精準(zhǔn)。海上并無(wú)現(xiàn)成道路和導(dǎo)航可循，只能依靠繁瑣而嚴(yán)謹(jǐn)?shù)耐评砗陀?jì)算。
風(fēng)格設(shè)定的次要目標(biāo)是劃一個(gè)既清晰界定風(fēng)格、又清晰指明“發(fā)揮范圍”的“圓圈”，核心訴求是周密。因?yàn)樾枰宄馈皥A圈”以?xún)?nèi)代表什么，“圓圈”以外代表什么。
在“精準(zhǔn)”和“周密”上同時(shí)做到優(yōu)良，風(fēng)格設(shè)定才能做到優(yōu)良。
既精準(zhǔn)又周密的風(fēng)格設(shè)定，通常無(wú)法一蹴而就：“風(fēng)格設(shè)定”階段一般只能做到七成，剩下三成需要在設(shè)計(jì)過(guò)程中繼續(xù)探索和打磨。下一大段會(huì)結(jié)合案例分享具體方法。
風(fēng)格把控有兩層含義，一是實(shí)現(xiàn)當(dāng)初設(shè)定的風(fēng)格，二是在實(shí)現(xiàn)的基礎(chǔ)上做到統(tǒng)一和規(guī)范。
只要嚴(yán)格在“圓圈”里發(fā)揮，實(shí)現(xiàn)當(dāng)初設(shè)定的風(fēng)格并不難。那做到統(tǒng)一和規(guī)范難嗎？往難了說(shuō)就是需要做大量瑣碎工作：以聯(lián)系的眼光看待所有設(shè)計(jì)元素，并把它們分類(lèi)規(guī)整好，注意分類(lèi)不宜過(guò)多，同時(shí)分類(lèi)邏輯上不能出現(xiàn)明顯問(wèn)題。往簡(jiǎn)單了說(shuō)就是大量復(fù)用已有的設(shè)計(jì)樣式。
風(fēng)格把控就是在劃定的“發(fā)揮范圍”內(nèi)，利用設(shè)計(jì)知識(shí)和經(jīng)驗(yàn)，以規(guī)范的方式實(shí)現(xiàn)規(guī)劃好的風(fēng)格。
活學(xué)活用作為四類(lèi)理性的共同核心，最典型的應(yīng)用場(chǎng)景是版式設(shè)計(jì)。
活學(xué)活用有兩個(gè)要點(diǎn)：正反結(jié)合，風(fēng)格第一。
所謂正反結(jié)合，是指設(shè)計(jì)知識(shí)既能正著用，也能反著用。最常見(jiàn)的例子是對(duì)齊原則，大部分時(shí)候是正著用，但如果想要營(yíng)造活潑的感覺(jué)，也會(huì)反著用：故意打破對(duì)齊原則。
除了對(duì)齊原則，其它設(shè)計(jì)知識(shí)，比如重復(fù)原則，也可以反著用。
本文配圖就是一個(gè)例子：圖片左上角、右上角和右下角分別散布著裝飾元素（橫線(xiàn)、圓環(huán)）和 logo，在裝飾元素的出現(xiàn)次數(shù)上，沒(méi)有用重復(fù)原則。過(guò)年家里掛燈籠一般至少掛兩個(gè)，同一裝飾元素一般至少出現(xiàn)兩次，以達(dá)到一種和諧和較為熱鬧的裝飾效果。
我在裝飾元素的出現(xiàn)次數(shù)上沒(méi)有用重復(fù)原則，而在出現(xiàn)位置（相似位置）、元素大小（相似大?。┖驮仡伾ㄏ嗨祁伾┥嫌昧酥貜?fù)原則，同樣達(dá)到了和諧效果。之所以沒(méi)在裝飾元素的出現(xiàn)次數(shù)上用重復(fù)原則，是想放一個(gè)隱喻在這里。
所謂風(fēng)格第一，是指設(shè)計(jì)風(fēng)格永遠(yuǎn)第一，設(shè)計(jì)知識(shí)永遠(yuǎn)第二。知識(shí)服務(wù)風(fēng)格，切不可重知識(shí)輕風(fēng)格。
《倚天屠龍記》中，張三豐教張無(wú)忌練習(xí)太極劍時(shí)，要他忘記劍招，只記劍意。某種程度上，版式設(shè)計(jì)也要將“劍意”放在第一位，“劍招”服務(wù)“劍意”。
對(duì)比原則也有反著用的時(shí)候。有一條關(guān)于對(duì)比的知識(shí)：對(duì)比要果斷，若不同，就徹底不同。這條知識(shí)能解釋百事可樂(lè) logo 里紅色與藍(lán)色的強(qiáng)烈對(duì)比，但解釋不了山本耀司旗下大部分服裝那千篇一律的黑色——單色，無(wú)對(duì)比。
設(shè)計(jì)最重要的是感染力，感染力主要來(lái)自個(gè)性、態(tài)度、價(jià)值觀(guān)這些風(fēng)格層面的東西，而非設(shè)計(jì)知識(shí)這些技法層面的東西。
當(dāng)一個(gè)設(shè)計(jì)，技法高超而風(fēng)格不足時(shí)，感染力和魅力就會(huì)不足，這也是設(shè)計(jì)師經(jīng)常會(huì)犯的錯(cuò)誤，大家需要注意。
可以簡(jiǎn)單分成三步：規(guī)劃，成形，細(xì)化。下面結(jié)合微信 Redesign 這個(gè)案例來(lái)說(shuō)明。
設(shè)定風(fēng)格，用到的方法姑且稱(chēng)之為“紅綠燈”法。“紅綠燈”法借鑒并改良了我在網(wǎng)上看到的一種“紅黃綠卡片法”（在紅、黃、綠三種顏色的卡片上寫(xiě)下不同的設(shè)計(jì)關(guān)鍵詞），并和“情緒板”法有相似之處：都包含關(guān)鍵詞定位和圖片參考兩部分。
先說(shuō)關(guān)鍵詞定位，共有兩步。
第一步類(lèi)似頭腦風(fēng)暴，結(jié)合產(chǎn)品屬性、用戶(hù)屬性、市場(chǎng)情況、個(gè)人喜好等因素，把能想到的設(shè)計(jì)關(guān)鍵詞全部寫(xiě)下來(lái)。合適的不合適的都要寫(xiě)，只要想到了就寫(xiě)下來(lái)，確保有二三十個(gè)。如果關(guān)鍵詞數(shù)量不夠，這個(gè)步驟可以多重復(fù)幾次，直到夠了為止。這一步設(shè)計(jì)師和需求方都要參與進(jìn)來(lái)，在提供關(guān)鍵詞上雙方是平等關(guān)系。
這個(gè)微信 Redesign 是個(gè)具有探索性質(zhì)的小練習(xí)項(xiàng)目，基于微信 7.0，有兩個(gè)目的：首先保留原有交互體驗(yàn)和品牌識(shí)別度，其次在視覺(jué)上更年輕、更流行。可以通俗理解成：一款微信“皮膚”，主要給年輕用戶(hù)和趕新潮的中老年用戶(hù)用。
結(jié)合產(chǎn)品屬性（社交類(lèi)、工具類(lèi)、內(nèi)容類(lèi)）、用戶(hù)屬性（年輕用戶(hù)為主）、市場(chǎng)情況、個(gè)人喜好這些因素，這一步想到的關(guān)鍵詞如下圖所示。
第二步是歸類(lèi)，就是把第一步產(chǎn)生的所有關(guān)鍵詞歸成“紅黃綠”三類(lèi)。如果關(guān)鍵詞不夠，還可以再補(bǔ)充。這一步依然是需求方和設(shè)計(jì)師共同參與，但需要設(shè)計(jì)師來(lái)主導(dǎo)。
紅色關(guān)鍵詞代表不能踩的紅線(xiàn)：不能這樣做；黃色關(guān)鍵詞代表黃燈警告：這樣做不太合適；綠色關(guān)鍵詞代表暢通無(wú)阻：應(yīng)該這樣做。
需要注意的是，綠色關(guān)鍵詞最好控制在 3-4 個(gè)之間，如果超過(guò) 4 個(gè)，就需要分成主綠關(guān)鍵詞和次綠關(guān)鍵詞，主綠關(guān)鍵詞依然要控制在 3-4 個(gè)之間。這樣做有兩個(gè)考量，一是確保簡(jiǎn)單和重點(diǎn)突出，二是也更容易實(shí)現(xiàn)。
回到第一步的關(guān)鍵詞上來(lái)。設(shè)計(jì)中當(dāng)然可以用“擬人”、“隱喻”等手法，所以“擬人”這個(gè)關(guān)鍵詞顯得意義不大，故刪去。“溫潤(rùn)”和“親和”，“老少皆宜”和“大眾”在語(yǔ)義上都存在一定的重復(fù)，所以刪去后者。刪除這類(lèi)不合適的關(guān)鍵詞后，剩余關(guān)鍵詞就按“紅綠燈”法歸類(lèi)，歸類(lèi)后情況如下。
（微信 Redesign 之按“紅綠燈”法歸類(lèi)后的設(shè)計(jì)關(guān)鍵詞）
關(guān)鍵詞定位已就緒，再來(lái)找參考圖片。
可供參考的圖片有兩大類(lèi)：照片和 UI 界面。UI 界面也有兩類(lèi)：線(xiàn)上作品（真實(shí)項(xiàng)目、練習(xí)作品等）和上線(xiàn)作品。
做 UI 設(shè)計(jì)，參考什么樣的圖片？個(gè)人建議，做什么類(lèi)型的設(shè)計(jì)，就重點(diǎn)參考什么類(lèi)型的圖片。比如 UI 界面就重點(diǎn)參考 UI 界面，banner 就重點(diǎn)參考 banner。
UI 界面的設(shè)計(jì)，個(gè)人喜歡重點(diǎn)參考知名產(chǎn)品的上線(xiàn)作品。單從視覺(jué)角度來(lái)說(shuō)，上線(xiàn)作品的質(zhì)量可能比不過(guò)一些線(xiàn)上練習(xí)作品。但是已經(jīng)上線(xiàn)的知名產(chǎn)品的 UI 設(shè)計(jì)，其風(fēng)格的形成往往都會(huì)經(jīng)過(guò)很多推敲，會(huì)有很多比較成熟的設(shè)計(jì)思路在里面。
參考別人的設(shè)計(jì)，最重要的是參考設(shè)計(jì)思路，其次才是參考表現(xiàn)形式。這種設(shè)計(jì)思路，有時(shí)候能從網(wǎng)上找到，但更多時(shí)候靠自己推測(cè)。
微信 Redesign，根據(jù)“很多年輕人在用，且風(fēng)格比較流行”這條主線(xiàn)，找來(lái)了 QQ、抖音、B 站、小紅書(shū)、陌陌、Soul、騰訊視頻、愛(ài)奇藝等產(chǎn)品的截圖。這些產(chǎn)品的截圖，看完一圈后，就會(huì)面臨一個(gè)問(wèn)題：以圖標(biāo)為例，這幾個(gè)產(chǎn)品的圖標(biāo)，風(fēng)格各異，但基本都具備“年輕”和“流行”的特點(diǎn)，那應(yīng)該參考哪一個(gè)？
這時(shí)就要求助關(guān)鍵詞定位。除了“年輕”和“流行”，主綠關(guān)鍵詞還有一個(gè)“輕微老少皆宜”。最符合“輕微老少皆宜”的是愛(ài)奇藝和騰訊視頻：很多老人和小孩也會(huì)用這兩個(gè) App 看視頻，網(wǎng)上公開(kāi)的數(shù)據(jù)也能佐證這一點(diǎn)，所以它們的設(shè)計(jì)一定會(huì)照顧中老年用戶(hù)的審美。
最后，出于個(gè)人偏好，我選擇重點(diǎn)參考愛(ài)奇藝的圖標(biāo)風(fēng)格，具體而言就是：深淺雙色、較粗(1.5pt)描邊、圓潤(rùn)風(fēng)格。
紅黃綠三色關(guān)鍵詞及重點(diǎn)參考圖片就緒后，就可以動(dòng)手設(shè)計(jì)。
我一般會(huì)把界面設(shè)計(jì)粗略分成三大部分：版式風(fēng)格、元素風(fēng)格、元素大小，元素為圖標(biāo)、圖片、按鈕等，然后去一一實(shí)現(xiàn)。
先說(shuō)版式風(fēng)格。
用的主要綠色關(guān)鍵詞是“更流行”和“更年輕”。“更流行”包括：更大字號(hào)的頁(yè)面標(biāo)題、盡可能用留白代替分割線(xiàn)和卡片的“無(wú)界”風(fēng)格、圓形頭像、更多留白更多舒適、等等?！案贻p”包括：更圓潤(rùn)的搜索框、輸入框和圖標(biāo)、更年輕更具活力的配色、等等。
再說(shuō)元素風(fēng)格之圖標(biāo)風(fēng)格。
圖標(biāo)主要參考愛(ài)奇藝 App：其一，底部導(dǎo)航和發(fā)現(xiàn)頁(yè)的圖標(biāo)都是深淺雙色加較粗的描邊；其二，除了更圓潤(rùn)以外，部分圖標(biāo)還變 Q 了。
最后說(shuō)元素大小。
以這個(gè)小項(xiàng)目為例，最主要的元素大小是圖標(biāo)大小和字體大小，它們會(huì)影響整個(gè)設(shè)計(jì)的感覺(jué)。通常情況，元素越小，給人感覺(jué)越精致、越高端，此其一；其二，可能是年輕人和老年人視力存在差別的原因，越小的元素往往代表年輕人的審美，反之則代表老年人的審美。
元素大小主要運(yùn)用的綠色關(guān)鍵詞是“輕微老少皆宜”。也就是說(shuō)，需要在年輕人和中老年人的審美中找到一個(gè)平衡，所以元素大小基本直接參考了微信 7.0 的設(shè)計(jì)，個(gè)別地方做了微調(diào)。
最后，出來(lái)的效果如下圖所示。
這份設(shè)計(jì)我發(fā)在了網(wǎng)上，部分網(wǎng)友留言說(shuō)看著不夠好，不太舒服，有一個(gè)表達(dá)的比較具體——“雖然用了大面積留白，卻讓人感到緊迫...”。
基于網(wǎng)友的留言，我仔細(xì)審視了這個(gè)設(shè)計(jì)，最后發(fā)現(xiàn)問(wèn)題主要出在頁(yè)面（發(fā)現(xiàn)頁(yè)為例）左右兩側(cè)：留白過(guò)小。
當(dāng)初之所以這么設(shè)計(jì)，是想通過(guò)頁(yè)面左右兩側(cè)較少的留白制造一種內(nèi)容將要撐破屏幕的感覺(jué)，從而營(yíng)造一種活潑的感覺(jué)。注意，彼時(shí)“活潑”還沒(méi)出現(xiàn)在“黃色”關(guān)鍵詞里，上文兩張關(guān)于關(guān)鍵詞的圖都省略了中間探索和優(yōu)化的過(guò)程。
很多網(wǎng)友之所以沒(méi)有感受到活潑而只是覺(jué)得不太舒服，至少有兩個(gè)原因：第一，整個(gè)設(shè)計(jì)的基調(diào)是簡(jiǎn)約、清爽，有一定的年輕感和流行感，但沒(méi)有太明顯的活潑感，硬往里面某個(gè)地方塞“活潑感”并不和諧，大家也難以感受到；第二，單純就“活潑感”而言，做的依然不到位，比如圖標(biāo)與右側(cè)文字的留白，可以比圖標(biāo)與左側(cè)邊界的留白大，方能更好彰顯活潑與活力。
考慮到“輕微老少皆宜”這個(gè)綠色關(guān)鍵詞及微信主要是工具型和內(nèi)容型產(chǎn)品，“活潑感”用在這里并不十分合適，于是放棄，并將“活潑”歸為“黃色”關(guān)鍵詞。此處留白的目的就回歸其本職工作：整體和諧與舒服。于是就把留白相應(yīng)調(diào)大了。
另外一個(gè)優(yōu)化的點(diǎn)是“眼睛”的形狀：微信圖標(biāo)、看一看圖標(biāo)、表情圖標(biāo)、朋友圈里將點(diǎn)贊和評(píng)論折疊起來(lái)的圖標(biāo)都有一雙“眼睛”，這雙“眼睛”起初是豎著的橢圓形，很萌，也比較低齡化。為了盡可能的“輕微老少皆宜”，這里統(tǒng)一把“眼睛”由豎著的橢圓形改成了圓形，弱化了“萌”和“低齡化”的感覺(jué)。
還有一塊是顏色上，拍攝視頻動(dòng)態(tài)的圖標(biāo)有用到藍(lán)紫色。這個(gè)紫色基本符合“更年輕”、“更流行”，但不太符合“輕微老少皆宜”，所以最后放棄了紫色，保留了藍(lán)色。
遵循主綠關(guān)鍵詞里的“輕微老少皆宜”，其它優(yōu)化的點(diǎn)有：微信圖標(biāo)尖角處的圓角調(diào)小，刪除啟動(dòng)頁(yè)與黑色"WeChat"字形成對(duì)比的綠色圓點(diǎn)。另外還有一些視覺(jué)層面美觀(guān)、和諧、舒適度的優(yōu)化，比如顏色、留白、圓角大小、字體大小方面的微調(diào)。
優(yōu)化后的微信 Redesign，整體效果如下圖所示。
凡事預(yù)則立，不預(yù)則廢。UI 設(shè)計(jì)如何做到理性，最核心的是設(shè)計(jì)風(fēng)格，規(guī)劃、成形和細(xì)化都緊密?chē)@設(shè)計(jì)風(fēng)格展開(kāi)。
最后，嘗試總結(jié)下“紅綠燈”法的優(yōu)勢(shì)，主要有四點(diǎn)：精確、周密、穩(wěn)妥、高效。
關(guān)于設(shè)計(jì)風(fēng)格，傳統(tǒng)規(guī)劃方法一般只有三四個(gè)“綠色”關(guān)鍵詞。
“紅綠燈”法擁有“紅燈”、“黃燈”和“綠燈”三種顏色的關(guān)鍵詞，從而確保大方向更準(zhǔn)確?！凹t綠燈”法會(huì)產(chǎn)生20個(gè)以上的紅黃綠關(guān)鍵詞，從而確保劃出來(lái)的“發(fā)揮范圍”更周密，極少有疏漏。
在“成形”這個(gè)設(shè)計(jì)環(huán)節(jié)，一旦踩到“紅線(xiàn)”和“黃線(xiàn)”，規(guī)劃好的紅黃綠關(guān)鍵詞都會(huì)馬上發(fā)出警報(bào)，從而大大降低“違規(guī)踩線(xiàn)”行為的發(fā)生次數(shù)，確保設(shè)計(jì)執(zhí)行環(huán)節(jié)的穩(wěn)當(dāng)可靠。
“紅綠燈”法通俗易懂門(mén)檻低，需求方可以較為深度參與“規(guī)劃”環(huán)節(jié)。需求方在“規(guī)劃”環(huán)節(jié)的深度參與，理論上可以降低后期的返工和修改次數(shù)，從而確保整個(gè)設(shè)計(jì)過(guò)程的高效。同時(shí)理論上也能夠提高設(shè)計(jì)師和需求方雙方合作的愉快程度。
UI 設(shè)計(jì)，始于理性，但無(wú)法止步于理性，還需要超越理性。注意，這里的理性，僅指設(shè)計(jì)知識(shí)的相關(guān)理性。
超越理性主要有兩點(diǎn)：直覺(jué)，其它知識(shí)。
直覺(jué)是指一種能夠快速感受和評(píng)估設(shè)計(jì)優(yōu)劣的感覺(jué)。良好的直覺(jué)往往快而準(zhǔn)。
感知和評(píng)價(jià)別人的設(shè)計(jì)時(shí)，用到的幾乎全部是直覺(jué)。審視自己的設(shè)計(jì)時(shí)，也離不開(kāi)直覺(jué)。
在審視自己的 UI 設(shè)計(jì)時(shí)，直覺(jué)主要發(fā)揮兩個(gè)作用：第一，囿于知識(shí)儲(chǔ)備或表達(dá)能力，有些地方就是解釋不清，這個(gè)時(shí)候就要靠直覺(jué)去感受去判斷；第二，直覺(jué)往往會(huì)作為檢視設(shè)計(jì)的最后一道關(guān)卡，也是最重要的一道關(guān)卡。
直覺(jué)來(lái)自哪里？
個(gè)人觀(guān)察是，直覺(jué)往往和審美正相關(guān)。比如一個(gè)設(shè)計(jì)師，他掌握的設(shè)計(jì)知識(shí)有限，經(jīng)驗(yàn)有限，對(duì)自我的要求也不高，最終的作品往往不出彩。但如果他審美好的話(huà)，往往能夠分辨出不同設(shè)計(jì)方案之間孰優(yōu)孰劣。
如果你想就設(shè)計(jì)稿征求別人的意見(jiàn)，請(qǐng)去找那些審美好的人。
其它知識(shí)是指設(shè)計(jì)知識(shí)以外的所有其它知識(shí)。比如 iPhone 上刪除應(yīng)用前應(yīng)用圖標(biāo)的抖動(dòng)，其靈感應(yīng)該來(lái)自生活中的搖頭求饒或嚇得發(fā)抖，抖動(dòng)的幅度和頻率則需要利用物理學(xué)和數(shù)學(xué)方面的知識(shí)。
優(yōu)秀的設(shè)計(jì)，一定會(huì)從生活中汲取大量靈感，并廣泛利用社會(huì)類(lèi)、人文類(lèi)和理工類(lèi)學(xué)科的知識(shí)。就拿數(shù)學(xué)來(lái)說(shuō)，在好的設(shè)計(jì)中，一定是個(gè)?？停阂?yàn)槟阈枰煌５陌从?jì)算器，從而計(jì)算不同設(shè)計(jì)元素之間的比例關(guān)系和各自的大小。
汝欲學(xué)詩(shī)，功夫在詩(shī)外。遣詞造句這些文字技巧只能是寫(xiě)詩(shī)的基礎(chǔ)，而非關(guān)鍵。寫(xiě)詩(shī)的關(guān)鍵在于你對(duì)生活、對(duì)世事的積累和感悟，在于你的思想是否深刻，情懷是否充足。
寫(xiě)詩(shī)如此，做設(shè)計(jì)亦如此。設(shè)計(jì)知識(shí)只是做設(shè)計(jì)的基礎(chǔ)，而非關(guān)鍵。做設(shè)計(jì)的關(guān)鍵在于“其它知識(shí)”?！捌渌R(shí)”非本文重點(diǎn)，就不展開(kāi)了。
UI 設(shè)計(jì)里的理性，主要是各類(lèi)設(shè)計(jì)知識(shí)。理性的核心在于活學(xué)活用各類(lèi)設(shè)計(jì)知識(shí)。
理性嚴(yán)謹(jǐn)?shù)淖?UI 設(shè)計(jì)，可以簡(jiǎn)單分成三步：規(guī)劃，成形，細(xì)化。好的開(kāi)始是成功的一半，一個(gè)高質(zhì)量的規(guī)劃顯得尤為必要。
用“紅綠燈”法做規(guī)劃，并指導(dǎo)成形和細(xì)化工作，會(huì)更精準(zhǔn)、周密、穩(wěn)妥和高效。
UI 設(shè)計(jì)，是七分理性，三分直覺(jué)。審美越好，直覺(jué)越準(zhǔn)。
優(yōu)秀的 UI 設(shè)計(jì)，一定會(huì)從生活中汲取大量靈感，并廣泛利用設(shè)計(jì)以外學(xué)科的知識(shí)。
推薦書(shū)單
[美]Robin Williams《寫(xiě)給大家看的設(shè)計(jì)書(shū)》
[日]佐佐木剛士《版式設(shè)計(jì)原理》
[日]伊達(dá)千代《色彩設(shè)計(jì)的原理》
[日]小林章《西文字體1、2》
左佐《設(shè)計(jì)師的自我修養(yǎng)》
左佐《治字百方》
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn