2019-1-4 ui設(shè)計(jì)分享達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
1、題目中“設(shè)計(jì)”指的是“交互設(shè)計(jì)”的概念。
2、文章適用范圍：本文適用于需求（方向、策略）已經(jīng)基本清晰的情況下，從需求到方案的思考全流程。假如需求尚未明確，比如新產(chǎn)品開(kāi)發(fā)及探索產(chǎn)品改版方向等課題，則需要先進(jìn)行需求探索和明確的工作，明確需求后，再繼續(xù)使用本文中涉及的思維方式。
在交互設(shè)計(jì)領(lǐng)域，已有許多前人的方法論和經(jīng)驗(yàn)總結(jié)。有的強(qiáng)調(diào)設(shè)計(jì)流程（如1688UED團(tuán)隊(duì)的“五導(dǎo)家”方法論），有的總結(jié)體驗(yàn)要素（如《用戶體驗(yàn)要素——以用戶為中心的web設(shè)計(jì)》中將用戶體驗(yàn)概括為5個(gè)要素），有的制定規(guī)范（如Android和iOS的設(shè)計(jì)規(guī)范），有的總結(jié)設(shè)計(jì)心理學(xué)和各類設(shè)計(jì)法則/定律（如費(fèi)茨定律、復(fù)雜性守恒定律）。
有了這些前人的經(jīng)驗(yàn)指導(dǎo)，是否使設(shè)計(jì)工作變得像數(shù)學(xué)公式一樣簡(jiǎn)單？
答案是否定的。理論是死的，而項(xiàng)目千變?nèi)f化，具體工作中不存在萬(wàn)能公式。但從設(shè)計(jì)思維角度出發(fā)，我們可以總結(jié)一些共同經(jīng)驗(yàn)。
本文的目標(biāo)，是通過(guò)對(duì)以往交互設(shè)計(jì)工作的反思和經(jīng)驗(yàn)總結(jié)，結(jié)合設(shè)計(jì)實(shí)例，嘗試從流程化、方法論的角度，剖析交互設(shè)計(jì)的普適性思維方式。
Part 1 設(shè)計(jì)思維流程總結(jié)
Part 2 設(shè)計(jì)實(shí)例分析
Part 1 設(shè)計(jì)思維流程總結(jié)
我們先回到問(wèn)題的源頭，做交互設(shè)計(jì)究竟是做什么？
一 交互設(shè)計(jì)本質(zhì)
透過(guò)現(xiàn)象看本質(zhì)，我認(rèn)為交互設(shè)計(jì)本質(zhì)分2點(diǎn)：
1、交互設(shè)計(jì)是一場(chǎng)理性的推導(dǎo)
在需求相對(duì)明確的情況下，交互設(shè)計(jì)方案是“推導(dǎo)”出來(lái)的，而不是設(shè)計(jì)師憑空設(shè)想出來(lái)的。而這個(gè)“推導(dǎo)”的過(guò)程，是基于理性的邏輯判斷。即，交互設(shè)計(jì)方案的一切框架和細(xì)節(jié)皆需有據(jù)可循。
2、交互設(shè)計(jì)的工作價(jià)值在于用合理的方式解決問(wèn)題
這句話有兩層意思。
一、交互設(shè)計(jì)工作的目標(biāo)就是解決問(wèn)題。如果不能解決問(wèn)題，那么設(shè)計(jì)本身沒(méi)有意義。
二、解決問(wèn)題的方案（即設(shè)計(jì)方案）需合理，經(jīng)得起推敲，暫時(shí)找不到比它更加合理的解決方案。
既然如此，我們可以嘗試用“明確問(wèn)題-解決問(wèn)題”的思路去總結(jié)交互設(shè)計(jì)的一般思維方式。
二 交互設(shè)計(jì)的思維方式
將解決問(wèn)題的流程與設(shè)計(jì)流程對(duì)應(yīng)后，得到下圖：
根據(jù)經(jīng)驗(yàn)，從“需求澄清”到“輸出多個(gè)設(shè)計(jì)方案”的過(guò)程是耗時(shí)最久，任務(wù)最艱巨的階段。那么這個(gè)階段究竟難在什么地方？設(shè)計(jì)師究竟是怎樣將“需求”變?yōu)?“方案”的？
回想一下，在我們的實(shí)際設(shè)計(jì)工作中，從頭到尾都貫穿著做決策的行為。每一個(gè)流程和元素的最終設(shè)計(jì)，都是決策和選擇的結(jié)果。而需要決策的問(wèn)題，隨著方案的逐漸細(xì)化，顆粒度由大到小。
做設(shè)計(jì)的過(guò)程，就如同建設(shè)一座大廈，先定地基，再建結(jié)構(gòu)，最后添磚加瓦，完成外立面裝飾。整個(gè)過(guò)程是從大框架到小細(xì)節(jié)的建設(shè)過(guò)程，最初的決策行為，決定了整個(gè)大廈的最終形態(tài)。
同樣，交互設(shè)計(jì)從需求到方案的過(guò)程，也包含“尋找關(guān)鍵點(diǎn)”的過(guò)程。宏觀來(lái)看，“關(guān)鍵點(diǎn)”由大到小，顆粒度逐漸降低。同時(shí)，在設(shè)計(jì)的不同階段，“關(guān)鍵點(diǎn)”是呈流動(dòng)狀態(tài)的。初始階段大顆粒度的關(guān)鍵點(diǎn)問(wèn)題解決之后，最初不屬于關(guān)鍵點(diǎn)的問(wèn)題此時(shí)就上升為關(guān)鍵點(diǎn)。正是這些關(guān)鍵點(diǎn)的形態(tài)，最終構(gòu)成了整個(gè)設(shè)計(jì)方案的最終呈現(xiàn)。
那么我們現(xiàn)在可以解答之前的問(wèn)題了：從“需求澄清”到“輸出多個(gè)設(shè)計(jì)方案”中間缺少的環(huán)節(jié)，正是“關(guān)鍵點(diǎn)”。
根據(jù)以上對(duì)于設(shè)計(jì)流程的進(jìn)一步解構(gòu)，我們?cè)俅螄L試?yán)砬逭麄€(gè)設(shè)計(jì)流程。
上圖中，“細(xì)節(jié)”和“關(guān)鍵點(diǎn)”之間之所以有連接箭頭，是因?yàn)?strong style="padding-bottom:0px;padding-top:0px;padding-left:0px;margin:0px;padding-right:0px;">隨著高優(yōu)先級(jí)關(guān)鍵點(diǎn)問(wèn)題的解決，以前的細(xì)節(jié)問(wèn)題會(huì)上升為高優(yōu)先級(jí)關(guān)鍵點(diǎn)。這是不同階段關(guān)鍵點(diǎn)的流動(dòng)性的體現(xiàn)。
有了細(xì)化的設(shè)計(jì)流程，我們就可以開(kāi)始根據(jù)流程回答每個(gè)階段所需要的設(shè)計(jì)思維是什么的問(wèn)題了?，F(xiàn)在的問(wèn)題就變成：
1、如何進(jìn)行需求澄清？
2、如何由需求推導(dǎo)關(guān)鍵點(diǎn)？
3、如何進(jìn)行設(shè)計(jì)發(fā)散？
4、如何進(jìn)行設(shè)計(jì)決策？
5、如何由關(guān)鍵點(diǎn)推導(dǎo)設(shè)計(jì)細(xì)節(jié)？
Part 2 設(shè)計(jì)實(shí)例分析
下面我們結(jié)合實(shí)例來(lái)嘗試逐條回答以上5個(gè)問(wèn)題。
一 如何進(jìn)行需求澄清？
“需求”本身是由哪些要素構(gòu)成的？
經(jīng)過(guò)個(gè)人實(shí)踐總結(jié)，我認(rèn)為，一個(gè)完整的需求由“問(wèn)題、目標(biāo)、手段”3要素構(gòu)成。
需求構(gòu)成的3要素之間，也存在著邏輯上的先后和推導(dǎo)關(guān)系。
“問(wèn)題”指的是要解決的問(wèn)題，是出發(fā)點(diǎn)；
“目標(biāo)”是根據(jù)“問(wèn)題”制定的;“手段”是為了解決問(wèn)題、達(dá)成目標(biāo)推導(dǎo)而出的。
換句話說(shuō)，“問(wèn)題”決定了“目標(biāo)”，“問(wèn)題”和“目標(biāo)”共同決定了“手段”。
在實(shí)際工作中，我們接到的需求，很多都花了較大精力描述“手段”部分，對(duì)于“問(wèn)題”和“目標(biāo)”部分描述不足。
當(dāng)遇到這種情況時(shí)，要盡可能詳細(xì)地先與需求方（通常是產(chǎn)品經(jīng)理）明確“問(wèn)題”和“目標(biāo)”2個(gè)要素，這樣才有利于判斷“手段”是否合理。如果不夠合理，交互設(shè)計(jì)師應(yīng)提出優(yōu)化方案。事實(shí)上，在需求澄清的階段，需求本身也是不穩(wěn)定的，需要交互設(shè)計(jì)師共同參與進(jìn)來(lái)，幫助判斷需求的合理性。
現(xiàn)以O(shè)PPO書城V3.0.5“書券樹”需求為例，簡(jiǎn)要說(shuō)明需求的3要素。
澄清了需求的3要素，相當(dāng)于打好了地基，設(shè)計(jì)方案就是在這個(gè)地基上建造出來(lái)的。
二 如何由需求推導(dǎo)關(guān)鍵點(diǎn)？
這個(gè)問(wèn)題其實(shí)包含了2個(gè)分問(wèn)題：
怎樣定義“關(guān)鍵點(diǎn)”？
怎樣推導(dǎo)得出關(guān)鍵點(diǎn)？
1. 怎樣定義“關(guān)鍵點(diǎn)”？
由于需求不同，我們沒(méi)有辦法具體定義“關(guān)鍵點(diǎn)”，但每個(gè)階段的關(guān)鍵點(diǎn)一定具有如下特征：“不解決這個(gè)問(wèn)題，其他問(wèn)題就無(wú)從談起。”比如不確定大廈的位置，大廈的形態(tài)、顏色就無(wú)從談起；不確定書券樹功能的游戲規(guī)則，游戲頁(yè)面設(shè)計(jì)就無(wú)從談起…
我們就用這個(gè)特征來(lái)定義關(guān)鍵點(diǎn)，即“不解決此問(wèn)題，其他問(wèn)題就無(wú)從談起”的點(diǎn)。
2. 怎樣推導(dǎo)得出關(guān)鍵點(diǎn)？
由于出發(fā)點(diǎn)就是需求，所以關(guān)鍵點(diǎn)的推導(dǎo)必須從需求開(kāi)始。根據(jù)需求3要素（問(wèn)題、目標(biāo)、手段），可以推導(dǎo)最初的關(guān)鍵點(diǎn)。因此關(guān)鍵點(diǎn)的推導(dǎo)方法就變成了：
由要解決的問(wèn)題推導(dǎo)；
由需求目標(biāo)推導(dǎo)；
由解決問(wèn)題的手段推導(dǎo)。
下面我們依舊以“書券樹”需求為例來(lái)說(shuō)明。
從關(guān)鍵點(diǎn)的推導(dǎo)過(guò)程可以看出來(lái)，需求必須堅(jiān)實(shí)，否則就像大廈的地基沒(méi)有打牢，建造在上面的建筑無(wú)論多么優(yōu)美都有坍塌的可能。
推導(dǎo)得出最初的關(guān)鍵點(diǎn)之后，就可以開(kāi)始做設(shè)計(jì)了。大多數(shù)時(shí)候，針對(duì)這些關(guān)鍵點(diǎn)的設(shè)計(jì)方案都不是唯一的，這就進(jìn)入了下一個(gè)環(huán)節(jié)：設(shè)計(jì)發(fā)散。
三 如何進(jìn)行設(shè)計(jì)發(fā)散？
我們?cè)诠ぷ髦谐３Ｐ枰敵龆鄠€(gè)解決方案以供選擇。有限制、有規(guī)則地進(jìn)行創(chuàng)意發(fā)散，會(huì)更加、準(zhǔn)確。
下面我們總結(jié)一種比較通用的設(shè)計(jì)發(fā)散方法：
1. 將需求簡(jiǎn)化為一句話；
2. 尋找這句話中的關(guān)鍵詞；
3. 通過(guò)關(guān)鍵詞來(lái)發(fā)散設(shè)計(jì)方案。
比如，某需求的目標(biāo)總結(jié)為一句話后是：突出頁(yè)面上的***信息；
挑出關(guān)鍵詞：“突出信息”；
接下來(lái)就可以考慮，突出信息的方法有哪些，比如改變信息的顏色、大小、位置、形態(tài)等等。
舉個(gè)實(shí)際工作中的例子來(lái)說(shuō)明。
通過(guò)如上分析，最后我們就可以得出方案發(fā)散的方向，并可以開(kāi)始著手做設(shè)計(jì)了。事實(shí)上，我們最終選擇的是將“簽到”和“閱讀時(shí)長(zhǎng)換書券”功能并列，且在視覺(jué)上做了運(yùn)營(yíng)感突出的方案。
在設(shè)計(jì)發(fā)散環(huán)節(jié)中，還有一個(gè)值得討論的問(wèn)題是競(jìng)品分析的使用方法。
競(jìng)品分析有2方面的好處：1、幫助打開(kāi)思路；2、避免別人踩過(guò)的坑。
競(jìng)品分析的缺陷也很明顯，就是有可能限制我們的想象力。
因此，競(jìng)品分析法最好在自己已經(jīng)完成一輪發(fā)散之后再作為思路拓展的補(bǔ)充進(jìn)行。
四 如何進(jìn)行設(shè)計(jì)決策？
雖然設(shè)計(jì)沒(méi)有絕對(duì)的“正確”與“錯(cuò)誤”，但這并不是說(shuō)“設(shè)計(jì)無(wú)所謂對(duì)錯(cuò)”，而是“要挑選出我們認(rèn)為當(dāng)下最合適的設(shè)計(jì)方案”，也就是“最能滿足需求的方案”。
雖然設(shè)計(jì)方案并不唯一，但設(shè)計(jì)決策也有據(jù)可循。設(shè)計(jì)決策的意義不是一定要達(dá)到100分，而是盡量接近100分，提升命中率。
通過(guò)實(shí)踐總結(jié)，我把做設(shè)計(jì)決策的依據(jù)歸為如下幾類：
下面我們逐條探討設(shè)計(jì)決策的依據(jù)。
1. 根據(jù)需求目標(biāo)
方案做出來(lái)后，我們需要針對(duì)每個(gè)細(xì)節(jié)去反復(fù)問(wèn)自己：這樣設(shè)計(jì)能達(dá)到的目的是什么，是符合設(shè)計(jì)目標(biāo)的嗎？也許直覺(jué)上認(rèn)為不可行的方案，經(jīng)過(guò)這樣的反復(fù)審視，最后被發(fā)現(xiàn)是最合理的方案，這就是根據(jù)需求目標(biāo)來(lái)做決策的價(jià)值。
以“書券樹”需求中的懸浮入口位置設(shè)計(jì)為例說(shuō)明怎樣根據(jù)需求目標(biāo)做設(shè)計(jì)決策。
最終設(shè)計(jì)方案如下圖：
2. 根據(jù)常理
“常理”意為：一般的規(guī)律；通常的道理。設(shè)計(jì)中的常理，指的是符合大眾心理預(yù)期的方案。這背后隱含的原理是邏輯一致性和認(rèn)知心理學(xué)，但有時(shí)不必尋找得非常深入，根據(jù)大眾普遍認(rèn)知做判斷即可。這種決策方式針對(duì)的是相對(duì)簡(jiǎn)單、直接的設(shè)計(jì)方案決策。
比如，榮耀閱讀的發(fā)現(xiàn)頁(yè)Tab列表分組方式，就是根據(jù)“相似相鄰”的語(yǔ)義來(lái)將多個(gè)入口分為不同的組的（如下圖）。
3. 根據(jù)經(jīng)驗(yàn)
3.1業(yè)界共識(shí)
交互設(shè)計(jì)這門學(xué)科經(jīng)過(guò)了幾十年的積累，有了一些理論和數(shù)據(jù)的支持，包括各種設(shè)計(jì)方法論、設(shè)計(jì)心理學(xué)、經(jīng)驗(yàn)數(shù)據(jù)等等，都是經(jīng)過(guò)前人實(shí)踐總結(jié)，可以直接拿來(lái)利用。這樣可以節(jié)省重復(fù)造輪子的時(shí)間，提高設(shè)計(jì)決策的科學(xué)性。
比如在《設(shè)計(jì)師要懂心理學(xué)》這本書中，作者就列出了許多已驗(yàn)證過(guò)的結(jié)論：
· 紅藍(lán)搭配難以閱讀
· 人一次只能記住4項(xiàng)事物
· 示范是最佳教學(xué)方式
· ……
3.2自身積累
由于設(shè)計(jì)是高速發(fā)展的學(xué)科，很多經(jīng)驗(yàn)可能還沒(méi)來(lái)得及被總結(jié)成為方法論，這就要靠我們?cè)谄綍r(shí)工作中多總結(jié)、多積累。一般來(lái)講，經(jīng)歷的項(xiàng)目越多，工作時(shí)間越長(zhǎng)，經(jīng)驗(yàn)越豐富，直覺(jué)+理性的判斷就會(huì)更加準(zhǔn)確。
因此，時(shí)刻保持學(xué)習(xí)的狀態(tài)，保持對(duì)學(xué)科前沿的敏感度，并時(shí)刻總結(jié)經(jīng)驗(yàn)教訓(xùn)，能夠幫助我們?cè)谧鲈O(shè)計(jì)決策時(shí)提升命中率。
4. 場(chǎng)景還原，同理心
場(chǎng)景思維是一種重要的設(shè)計(jì)思維，是交互設(shè)計(jì)師的一種基本思維能力。當(dāng)對(duì)方案舉棋不定時(shí)，可以先判斷此設(shè)計(jì)是否與場(chǎng)景強(qiáng)相關(guān)，如果是強(qiáng)相關(guān)的，則可以采用場(chǎng)景思維來(lái)進(jìn)行設(shè)計(jì)決策。
ofo小黃車APP集合了線上線下的體驗(yàn)，是設(shè)計(jì)與使用場(chǎng)景強(qiáng)相關(guān)的典型應(yīng)用。
試以ofo小黃車的首頁(yè)和掃描頁(yè)為例，分析如何使用場(chǎng)景思維來(lái)進(jìn)行設(shè)計(jì)決策。
提問(wèn)：小黃車首頁(yè)信息呈現(xiàn)應(yīng)該是怎樣的？
分析：試用如下表格，結(jié)合使用場(chǎng)景分析。
經(jīng)過(guò)以上分析，我們就很容易理解， ofo小黃車首頁(yè)中每個(gè)元素的大小和擺放邏輯是什么，為什么整個(gè)應(yīng)用整體采用的是卡片式的設(shè)計(jì)了。
5. 項(xiàng)目周期和實(shí)現(xiàn)成本
在實(shí)際項(xiàng)目中，我們得承認(rèn)“能落地的方案才是好方案”。很多時(shí)候，設(shè)計(jì)師認(rèn)為的“完美方案”，到開(kāi)發(fā)執(zhí)行階段卻發(fā)現(xiàn)基本無(wú)法實(shí)現(xiàn)。最后落地的往往是“性價(jià)比”最高的方案。
“美而簡(jiǎn)潔”的方案是我們的終極追求。這就要求設(shè)計(jì)進(jìn)行中，設(shè)計(jì)師始終葆有此意識(shí)，并與開(kāi)發(fā)人員保持溝通，及時(shí)進(jìn)行必要的調(diào)整。
五 如何由關(guān)鍵點(diǎn)推導(dǎo)設(shè)計(jì)細(xì)節(jié)？
如果把做設(shè)計(jì)的過(guò)程比喻為一條路，解決關(guān)鍵點(diǎn)問(wèn)題就像解決路障，推導(dǎo)細(xì)節(jié)的過(guò)程就像行駛在平坦大路上（如上圖），直到遇見(jiàn)下一個(gè)關(guān)鍵點(diǎn)。
另外，“關(guān)鍵點(diǎn)”和“細(xì)節(jié)”是相對(duì)的，并不是絕對(duì)的。某個(gè)關(guān)鍵點(diǎn)決策之后，會(huì)有一系列由決策而發(fā)生的推導(dǎo)，此推導(dǎo)過(guò)程相對(duì)順理成章，不需要大的決策。我們把這個(gè)過(guò)程稱為細(xì)節(jié)推導(dǎo)過(guò)程，推導(dǎo)的結(jié)果就是設(shè)計(jì)細(xì)節(jié)的確定。
如何由關(guān)鍵點(diǎn)推導(dǎo)設(shè)計(jì)細(xì)節(jié)？我們知道，關(guān)鍵點(diǎn)一般對(duì)大的方向性問(wèn)題做了決策，但在繼續(xù)進(jìn)行設(shè)計(jì)過(guò)程中，還有很多限制條件，如場(chǎng)景、規(guī)范、定律等。以關(guān)鍵點(diǎn)為邏輯起點(diǎn)，結(jié)合各種限制條件，就可以推導(dǎo)出設(shè)計(jì)細(xì)節(jié)。這個(gè)過(guò)程我們可以用下圖來(lái)表示：
下面試以“書券樹”需求的“果實(shí)領(lǐng)取成功+推書彈窗”的設(shè)計(jì)來(lái)說(shuō)明由關(guān)鍵點(diǎn)推導(dǎo)設(shè)計(jì)細(xì)節(jié)的方法。
經(jīng)過(guò)以上推導(dǎo)過(guò)程，書券果實(shí)領(lǐng)取成功+推書彈窗的設(shè)計(jì)基本就完成了。
結(jié)語(yǔ)
我們?nèi)庋鬯苡^察到的所有事物和事物的運(yùn)動(dòng)、人的行為等等，都是一個(gè)“結(jié)果”的呈現(xiàn)，背后隱藏著無(wú)數(shù)個(gè)“因?yàn)椤薄?
設(shè)計(jì)師做設(shè)計(jì)方案的職責(zé)，是給出“結(jié)果”。這就要求我們每做一個(gè)“結(jié)果”，都要多問(wèn)幾個(gè)“因?yàn)椤薄?strong style="padding-bottom:0px;padding-top:0px;padding-left:0px;margin:0px;padding-right:0px;">設(shè)計(jì)方案應(yīng)當(dāng)是邏輯自洽的。這樣沿著邏輯推導(dǎo)出來(lái)的設(shè)計(jì)就是不容易被輕易推翻的設(shè)計(jì)。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com