先思考一個(gè)問題——

其實(shí)不難理解，

方法論通常涉及對(duì)問題各方面的論述，包括環(huán)境、階段、任務(wù)、目標(biāo)、工具、方法、技巧等。通過一系列具體的分析研究、系統(tǒng)總結(jié)并最終得出較為一般性的通用原則。

再來思考下一個(gè)問題——

相信絕大多數(shù)設(shè)計(jì)師心里都有一個(gè)標(biāo)準(zhǔn)的答案——

學(xué)習(xí)方法論的目的是提升人們解決問題的能力，特別是在陌生領(lǐng)域嘗試跨界的時(shí)候，應(yīng)用方法論可以帶來信心和有趣的過程。這有點(diǎn)像小時(shí)候老師經(jīng)常說的“舉一反三”，通過一件事情，然后以此類推知道其它許多事情，通過現(xiàn)象看本質(zhì)。

形式上表現(xiàn)為方法論一般不能直接解決具體問題，只能提供一套找到解決方案的思路，最終是通過方法論和具體問題的結(jié)合產(chǎn)出解決方案。

了解了方法論這個(gè)概念之后，我們?cè)賮磉M(jìn)階細(xì)化去探討「設(shè)計(jì)方法論」

設(shè)計(jì)是一項(xiàng)偏感性的創(chuàng)意性工作，對(duì)于方法論這類偏理性的理論，也許會(huì)有一些設(shè)計(jì)師存有疑惑——

對(duì)設(shè)計(jì)師來說，這是個(gè)很常見的一個(gè)場(chǎng)景：設(shè)計(jì)師與需求方面對(duì)有分歧的設(shè)計(jì)的時(shí)候，作為需求方不能準(zhǔn)確描述問題所在，只有說“不好看”。設(shè)計(jì)師經(jīng)常會(huì)被需求方以“不好看”理由虐待，不停的在修改設(shè)計(jì)稿，度過了一個(gè)又一個(gè)加班的夜晚。可作為設(shè)計(jì)師的你卻找不到明確的理由去說服需求方，除了生氣、苦惱、罵需求方傻逼，最后只能背負(fù)著設(shè)計(jì)師的稱號(hào)，卻憋屈干著美工的活。

所以，設(shè)計(jì)師學(xué)習(xí)方法論是很有必要——

用方法論來武裝自己，助力提升設(shè)計(jì)價(jià)值。

了解了什么是方法論，也認(rèn)識(shí)到設(shè)計(jì)師學(xué)習(xí)方法論的重要性，接下來開始進(jìn)入干貨環(huán)節(jié)了。

是不是迫不及待了，先看第一個(gè)——

菲茨定律用數(shù)學(xué)公式表示：

從一個(gè)起始位置移到一個(gè)最終目標(biāo)所需時(shí)間（T），由到目標(biāo)中心的距離（D）和目標(biāo)的寬度（W）決定。

簡(jiǎn)單的理解，那就是——

設(shè)計(jì)師們看到這里，是不是對(duì)菲茨定律又有疑惑？

目前存在三種主流人機(jī)交互的方式：觸摸式、語音識(shí)別和體感。在設(shè)計(jì)行業(yè)，無論是桌面端的鍵鼠操作，還是移動(dòng)端的手勢(shì)觸屏，觸摸式依然是目前主流的交互方式。

對(duì)設(shè)計(jì)師而言，研究菲茨定律，就是研究如何縮短觸摸式操作流程時(shí)間，最終實(shí)現(xiàn)高效舒適的用戶體驗(yàn)。

舉幾個(gè)菲茨定律應(yīng)用的示例。

用Mac電腦的小伙伴對(duì)這個(gè)操作應(yīng)該不陌生吧，就是應(yīng)用了菲茨定律邊角無窮大原理去設(shè)計(jì)的人機(jī)交互。

手機(jī)來電的界面，很熟悉的操作吧，解鎖時(shí)來電點(diǎn)擊接聽，鎖屏?xí)r避免手機(jī)在口袋的時(shí)候突然來電，掏出手機(jī)時(shí)誤點(diǎn)擊接聽，應(yīng)用菲茨定律反向應(yīng)用，需要滑動(dòng)到達(dá)目標(biāo)，提高完成操作的難度，真是微妙又具備人性化的設(shè)計(jì)體驗(yàn)！

大家記住菲茨定律的關(guān)鍵字：目標(biāo)越大、距離越小，越容易操作。

接下來，看看第二個(gè)方法論——

一般情況下，用戶在進(jìn)入一個(gè)網(wǎng)頁(yè)、一個(gè)APP，或者閱讀文章等，習(xí)慣性瀏覽方式基本是從左到右、從上往下的眼球Z型軌跡進(jìn)行瀏覽。尼爾森曾對(duì)232名用戶對(duì)上千個(gè)網(wǎng)站的瀏覽習(xí)慣進(jìn)行觀察，發(fā)現(xiàn)了普遍瀏覽者都存在的閱讀習(xí)慣：極少逐行逐字閱讀文字，越往下關(guān)注度越低，只尋找開頭的興趣點(diǎn)，如果發(fā)現(xiàn)喜歡的，會(huì)從當(dāng)前位置水平線方向閱讀，整體瀏覽軌跡呈現(xiàn)F型，這個(gè)就是尼爾森F視覺模型。

可以簡(jiǎn)單用下圖來概括——

看完這個(gè)模型，設(shè)計(jì)師會(huì)不會(huì)有疑惑？

了解用戶的閱讀習(xí)慣，設(shè)計(jì)師在進(jìn)行界面設(shè)計(jì)、信息排版的時(shí)候，結(jié)合F視覺模型，能更加有效直接傳達(dá)關(guān)鍵信息。

我們常見的廣告文案的排版，基本都遵循F視覺軌跡去做排版，關(guān)鍵信息往左上去排，目的是更高效去傳達(dá)信息。

為了避免F瀏覽模式導(dǎo)致版面的右下角信息易忽略，設(shè)計(jì)師會(huì)通過混合排版的方式，打破固有的結(jié)構(gòu)，有效避免F瀏覽模式導(dǎo)致的視覺疲勞。

總結(jié)起來，尼爾森F視覺模型的重點(diǎn)，一個(gè)是利用F視覺模型去有效傳達(dá)信息，另一個(gè)是通過混合排版避免F瀏覽模式導(dǎo)致的視覺疲勞。

接下來，我們開始學(xué)習(xí)下一個(gè)方法論——

從字面的意思去理解：就是用直尺和圓規(guī)去畫圖。

理解了什么是尺規(guī)作圖，接下來思考一個(gè)問題——

首先說明幾點(diǎn)理解誤區(qū)，尺規(guī)作圖不是為了裝逼而后期硬加上，也不是檢驗(yàn)設(shè)計(jì)優(yōu)秀與否的標(biāo)準(zhǔn)。尺規(guī)作圖真正的意義，是一開始就用尺規(guī)嚴(yán)格規(guī)范設(shè)計(jì)，是對(duì)設(shè)計(jì)細(xì)節(jié)把控的輔助技巧，特別是對(duì)于像素級(jí)別嚴(yán)謹(jǐn)?shù)慕缑嬖O(shè)計(jì)，嚴(yán)格摳細(xì)節(jié)到每一個(gè)斜角、圓弧、間距、弧度都要做到統(tǒng)一美觀。比起自己手動(dòng)用鋼筆工具去畫和調(diào)瞄點(diǎn)，用幾何圖形去切既準(zhǔn)確又快速，從整體到細(xì)節(jié)無一不充分體現(xiàn)設(shè)計(jì)師“工匠精神”。

怎樣通過尺規(guī)去作圖呢？

布爾運(yùn)算是尺規(guī)作圖的關(guān)鍵，做設(shè)計(jì)的都應(yīng)該不陌生，就是圖形的聯(lián)合、相交、相減組成新的形狀。

舉幾個(gè)經(jīng)典的尺規(guī)作圖的案例——

最常見的一個(gè)場(chǎng)景：商標(biāo)設(shè)計(jì)。

另一個(gè)也很常見的場(chǎng)景：圖標(biāo)設(shè)計(jì)。

總結(jié)下尺規(guī)作圖的關(guān)鍵點(diǎn)：從設(shè)計(jì)應(yīng)用的角度去看，尺規(guī)作圖是一種象征嚴(yán)謹(jǐn)?shù)妮o助性技巧。

接下來，我們來學(xué)習(xí)第四個(gè)方法論——

設(shè)計(jì)師對(duì)這個(gè)理論應(yīng)該一點(diǎn)都不陌生。

關(guān)鍵字是0.618。

黃金分割比例還衍生兩個(gè)新的視覺模型——

怎么理解黃金分割比例的實(shí)際應(yīng)用？

跟前面提到的尺規(guī)作圖很相似，黃金分割比例不是為了裝逼而后期硬加上，更不是檢驗(yàn)設(shè)計(jì)優(yōu)秀與否的唯一標(biāo)準(zhǔn)，更多是作為輔助參考的線性模型。事實(shí)上，我們的大腦似乎本能地更喜歡使用黃金比例的對(duì)象和圖像，是被公認(rèn)為最具美感的比例。這幾乎是一個(gè)潛意識(shí)的力量，以至于哪怕為圖像作更接近黃金比例的微妙調(diào)整，對(duì)我們的視覺美感也有很大正面影響。

怎么去使用呢？

舉幾個(gè)例子，黃金分割比例模型一般常用于非軸對(duì)稱的廣告設(shè)計(jì)。

界面設(shè)計(jì)也會(huì)參考黃金分割比例去制定尺寸，讓整體視覺更協(xié)調(diào)、更具美感。

通過以上案例分析，能深刻學(xué)習(xí)到黃金分割比例的應(yīng)用意義，它更多是一種輔助參考的模型，通過更接近黃金比例的調(diào)整，哪怕是微妙的，也能對(duì)我們的視覺美感有很大提升。

打鐵趁熱，我們繼續(xù)學(xué)習(xí)下一個(gè)方法論——

跟黃金分割比例很相似，但又有所區(qū)別。

在上面展示的模型的基礎(chǔ)上，把關(guān)鍵信息的重心分布在四個(gè)交點(diǎn)上，或者黃金分割線上，這樣更符合人的審美習(xí)慣，達(dá)到突出主題并讓畫面更協(xié)調(diào)的目的。

跟前面提到的尺規(guī)作圖和黃金分割比例一樣，三等分構(gòu)圖更多是作為輔助參考的線性模型。該模型應(yīng)用在攝影或軸對(duì)稱的排版比較多，目的是為了突出主體，讓版面平衡感更強(qiáng)。

我們來看幾個(gè)案例加深理解——

也可以應(yīng)用在非軸對(duì)稱的信息排版設(shè)計(jì)中。

界面設(shè)計(jì)工作中，我們也常常借助三等分模型去輔助排版，讓版面更加平衡，突出主體，視覺感更符合主流審美。

舉個(gè)空狀態(tài)頁(yè)面的例子，一般情況下，絕大多數(shù)設(shè)計(jì)師都是憑感覺去做排版——

是不是感覺總有那么一丟丟畫面的重心往下掉？

套入三等分模型優(yōu)化后，只需要往上移動(dòng)空狀態(tài)圖標(biāo)那么點(diǎn)高度到黃金分割線上，是不是就感覺整體視覺平衡感更加協(xié)調(diào)了呢！

到這里已經(jīng)分享了5個(gè)方法論，個(gè)個(gè)都是信息量滿滿的，小伙伴們一定要好好吸收，并能應(yīng)用到我們?cè)O(shè)計(jì)中哦。

接下來繼續(xù)下一個(gè)——

從字面的意思去理解，就是人的眼睛可觀察到角度和視野清晰度的關(guān)系。看下水平視線和垂直視線的模型。

從上面圖例可以了解到一個(gè)關(guān)鍵信息——

比如桌面端大屏幕、大尺寸畫布印刷品等可視范圍大、人眼無法一目了然的設(shè)計(jì)，要想保證最優(yōu)視覺傳達(dá)體驗(yàn)，瀏覽者一眼關(guān)注到關(guān)鍵信息，就需要綜合考慮人眼視度的應(yīng)用。

人眼平視最佳轉(zhuǎn)動(dòng)區(qū)在30-60°，垂直視線最佳轉(zhuǎn)動(dòng)區(qū)為30°，超過30°的區(qū)域就看不清楚了，需要轉(zhuǎn)動(dòng)脖子才能看清。所以，要想快速抓住用戶視線，就要保證設(shè)計(jì)焦點(diǎn)在精準(zhǔn)區(qū)內(nèi)，從而鎖定用戶視線，達(dá)到最優(yōu)視覺體驗(yàn)。

怎么去計(jì)算30°人眼精準(zhǔn)識(shí)別區(qū)呢？

我們可以把這公式應(yīng)用到很多場(chǎng)景，比如網(wǎng)頁(yè)設(shè)計(jì)，我們?cè)O(shè)計(jì)的顯示區(qū)域要設(shè)置多大的尺寸，用戶瀏覽網(wǎng)頁(yè)的視覺體驗(yàn)比較好？

還可以應(yīng)用在一些線下物料的設(shè)計(jì)，比如X展架，我們了解了人眼精準(zhǔn)識(shí)別區(qū)間，可以在進(jìn)行設(shè)計(jì)過程中，把關(guān)鍵信息集中在精準(zhǔn)識(shí)別區(qū)內(nèi)，快速抓住用戶視線。

目前無論是屏幕尺寸，還是分辨率都越做越大，但是依然有很多知名的網(wǎng)站，為保證最優(yōu)的閱讀體驗(yàn)，最大板塊展示寬度依然設(shè)置在人眼識(shí)別區(qū)內(nèi)。

以上案例說明，學(xué)習(xí)人眼視度的理論，可以輔助設(shè)計(jì)師更加有效進(jìn)行信息排版布局。

接下來我們繼續(xù)來學(xué)習(xí)下一個(gè)理論——

大家看這個(gè)理論的名稱，可能感覺比較陌生，但實(shí)際上卻是一個(gè)很常見的一個(gè)方法論，相信看到下面模型就豁然開朗了。

也叫做四象限（十字）模型，最初建立該模型是用于做時(shí)間管理計(jì)劃，把自己要做的事都放進(jìn)去，然后先做緊急重要那一象限中的事，用來提升工作效率。

實(shí)際上，我們也可以通過四象限（十字）模型用來處理時(shí)間管理以外的事，比如界面設(shè)計(jì)。

當(dāng)設(shè)計(jì)師面對(duì)一個(gè)元素較多的界面的時(shí)候，可以通過該模型，有效快速化繁為簡(jiǎn)，分清主次，同時(shí)結(jié)合其他設(shè)計(jì)原理，最終使界面的設(shè)計(jì)表現(xiàn)更符合用戶操作體驗(yàn)。

關(guān)鍵字就是——

舉個(gè)應(yīng)用實(shí)例，我們嘗試去優(yōu)化下支付寶的螞蟻莊園。

個(gè)人覺得目前的螞蟻莊園操作按鈕布局層面上存在幾個(gè)明顯的問題：可操作的按鈕越來越多，可玩性越來越高，相對(duì)操作就越來越復(fù)雜，對(duì)新手友好度越來越低，甚至有些重要且高頻的操作放在了不易點(diǎn)擊的區(qū)域，比如加速喂食速度的道具按鈕等等。新人第一次進(jìn)去游戲，可能最大的感覺，我是在哪里？我要干什么？得花不少時(shí)間點(diǎn)擊操作去熟悉，甚至要仔細(xì)閱讀操作說明才能弄懂規(guī)則。這次優(yōu)化的方向，是做到“奶奶都會(huì)玩”的用戶體驗(yàn)程度。

首先分解布局層元素。

然后建立十字模型，分為重要和操作頻率兩個(gè)維度，把界面功能操作進(jìn)行分組，再排優(yōu)先級(jí)分布放在四個(gè)先后等級(jí)象限內(nèi)。

結(jié)合前面學(xué)習(xí)的菲茨定律，按優(yōu)先級(jí)先后把操作按鈕放進(jìn)去操作熱區(qū)模型，重要且高頻的操作放在易操作的區(qū)域內(nèi)，最后優(yōu)化完的布局層，視覺上更具備游戲易操作的特性，對(duì)新手友好度提升，奶奶都不用看說明就知道怎樣玩了吧。

這是個(gè)典型的結(jié)合多個(gè)方法論去解決問題的案例。

接下來繼續(xù)學(xué)習(xí)下一個(gè)方法論——

怎么去理解配色黃金法則呢？

氛圍色

可以理解為背景色，一般選用中性（黑白灰）或帶灰調(diào)的色彩，不會(huì)搶占過多視線，起到烘托氛圍效果。

輔助色

可以理解為配角色，相當(dāng)于催化劑，在背景色中有存在感，但又能加強(qiáng)主強(qiáng)調(diào)色的視覺效果。可以不保留，配色比例可以調(diào)整成80%氛圍色、20%強(qiáng)調(diào)色，即82法則。

強(qiáng)調(diào)色

可以理解為主角色，簡(jiǎn)單來說，它就是萬綠叢中一點(diǎn)紅，人群中你最愛的那個(gè)墻頭！大膽用那些妖艷賤貨色彩吧，大紅大綠大紫，想用就用！當(dāng)然了，設(shè)計(jì)一般以品牌色為主，可以單色，也可以雙色組合或漸變色。

該理論不僅僅是廣告界的寵兒，實(shí)際上——

色彩除了表達(dá)情緒、承載品牌信息外，更多是在構(gòu)成版面設(shè)計(jì)的同時(shí)，形成對(duì)比，突出關(guān)鍵信息。不同色彩比例的組合，特別是在需要展示的信息較多的應(yīng)用界面，需要考慮如何在有限的版面更直觀、更高效傳達(dá)重點(diǎn)信息，并能給瀏覽者留下深刻的記憶。

越來越多的APP也逐漸參考6/3/1配色黃金法則進(jìn)行配色，以60%灰調(diào)背景、30%信息傳達(dá)、10%強(qiáng)調(diào)色的黃金比例組合。在有效傳達(dá)關(guān)鍵信息的前提下，10%的強(qiáng)調(diào)色更是承載了品牌信息的同時(shí)又不破壞整體視覺重心，起到畫龍點(diǎn)睛的作用。

舉一些應(yīng)用實(shí)例——

我們?cè)賮韺?duì)比下，同一個(gè)界面，但是不同的色彩比例，按照6/3/1法則配色的方案是不是最佳的選擇？

很明顯的，左側(cè)配色方案過重的強(qiáng)調(diào)色有點(diǎn)畫蛇添足，甚至是喧賓奪主的感覺；右側(cè)方案比例的強(qiáng)調(diào)色，起到畫龍點(diǎn)睛的作用，保證了界面信息高效傳達(dá)的同時(shí)，又不破壞整體視覺重心。這也證明了配色黃金比例的實(shí)用性是經(jīng)得起考驗(yàn)的！

已經(jīng)分享完8個(gè)方法論了，接下來這個(gè)方法論，除了排序是第9個(gè)，內(nèi)容其實(shí)跟“9”也有關(guān)系的，繼續(xù)往下看——

什么是米勒7±2法則呀？

為了更加深刻去理解這個(gè)理論，先來思考回答下面幾個(gè)問題——

以上兩個(gè)問題的目的，是做個(gè)小實(shí)驗(yàn)證明大家記憶手機(jī)號(hào)碼或身份證號(hào)碼的方式，實(shí)際上都是大同小異的——

在生活中，我們經(jīng)常會(huì)把一長(zhǎng)串的數(shù)字分割成7個(gè)左右的數(shù)組來記憶。

這樣會(huì)使記憶難度降低很多，米勒稱這種單位為“組塊”。我們學(xué)英文時(shí)由字母到單詞，由單詞到短句，有短句到長(zhǎng)句的記憶方式也是利用7±2法則，將零碎信息變成組塊記下來的。

米勒法則怎樣應(yīng)用到設(shè)計(jì)中？

舉幾個(gè)例子——

以上案例可以看出來，米勒7±2法則，幾乎是業(yè)界不成文的定律，應(yīng)用在設(shè)計(jì)的各個(gè)領(lǐng)域。我們?cè)O(shè)計(jì)師在設(shè)計(jì)過程中，也要盡量去遵守，才能更加有效傳達(dá)信息。

到這里，全部9個(gè)理論已經(jīng)分享完了，回應(yīng)上面提到的米勒7±2法則，事不過“9”嘛！

最后，再跟大家啰嗦一下方法論之外的話題——

作為設(shè)計(jì)師，我們首先要清楚，我們的職業(yè)和職責(zé)是什么？

也許會(huì)有人疑惑：“前面提到那么多方法論，似乎很多都是偏向交互崗位的，跟界面設(shè)計(jì)或視覺設(shè)計(jì)關(guān)系不大呀！”。如果從事設(shè)計(jì)的同學(xué)也有這樣的感想的話，這說明一點(diǎn)，對(duì)自身工作的認(rèn)識(shí)還不夠深。界面設(shè)計(jì)師除了加強(qiáng)本身表現(xiàn)層設(shè)計(jì)水平外，更應(yīng)該在交互結(jié)構(gòu)層的基礎(chǔ)上，最大化優(yōu)化布局層，最終目的是達(dá)到最優(yōu)視覺體驗(yàn)效果，而不是僅僅停留在表現(xiàn)層面。

除了學(xué)習(xí)設(shè)計(jì)方法論，還有一些知名設(shè)計(jì)心理學(xué)，比如尼爾森原則、格式塔原則等等也應(yīng)該熟讀掌握。在工作中我們應(yīng)當(dāng)把這些定律巧妙運(yùn)用到設(shè)計(jì)中，結(jié)合設(shè)計(jì)方法論，貫穿在我們的UI設(shè)計(jì)中，最終設(shè)計(jì)出用戶體驗(yàn)好的作品。

那么，問題又來了——

我們可以參考以下的金字塔模型來考核自己——

記住關(guān)鍵的點(diǎn)，我們是做商業(yè)設(shè)計(jì)的設(shè)計(jì)師，商業(yè)價(jià)值是結(jié)果，是建立在設(shè)計(jì)師專業(yè)認(rèn)可、普遍用戶認(rèn)可的基礎(chǔ)上實(shí)現(xiàn)的。

設(shè)計(jì)方法論，讓你的設(shè)計(jì)有理論支持，讓你設(shè)計(jì)思維更專業(yè)，助力提升設(shè)計(jì)商業(yè)價(jià)值。