《UI設(shè)計方法論》文集是專門用來收集、總結(jié)UI設(shè)計中所應(yīng)用到的方法論。幫助自己提升設(shè)計思維，從產(chǎn)品、交互到視覺，希望自己能做到“心中有理論，手頭會表達”。在與團隊交流（撕逼）的過程中能告訴他們這么設(shè)計為什么好，為什么不好，做到有理有據(jù)，而不是憑自己的主觀判斷。
作為設(shè)計師，我們需懂產(chǎn)品、有交互思維，但是重點是我們都需要將這些方法論回歸到視覺設(shè)計中去。好的作品才能支撐起這些方法論，才具有說服力。
此文涉及的方法論有：5WH需求挖掘法、4W場景分析法、交互旅程圖、W3C強光測試法、KANO模型。
在我們拿到一個需求時，應(yīng)最先從產(chǎn)品層去了解、去分析我們要做的事情。5WH方法論能幫助我們?nèi)ジ玫氖崂懋a(chǎn)品需求，幫助設(shè)計師更好的去了解用戶、了解產(chǎn)品。
5WH方法論需要我們關(guān)注六大要點，分別為產(chǎn)品背景、目標(biāo)人群、預(yù)期目標(biāo)、使用場景、使用節(jié)點、如何使用。做為設(shè)計師，我們每一步都需要回歸到視覺設(shè)計產(chǎn)出的思考上去。
一、產(chǎn)品背景（what）
通過分析產(chǎn)品背景能讓我們更了解產(chǎn)品定位、自身產(chǎn)品特征以及我們的優(yōu)勢與競爭力；在了解背景的同時，去思考產(chǎn)品中的設(shè)計要點。在這一步我們需要做的3步有：
1.思考產(chǎn)品要做什么
通過對產(chǎn)品定位、目標(biāo)、功能等進行了解，明確要做一款什么類型的app。這類產(chǎn)品給用戶怎樣的視覺感受。比如支付寶，我們就知道支付寶要做互聯(lián)網(wǎng)金融理財工具，視覺感受應(yīng)該給人安全、可靠的感覺。
2.分析競品
對主流競品進行分享，了解競品的定位，競品的信息布局結(jié)構(gòu)。思考自身產(chǎn)品布局結(jié)構(gòu)。比如要做一款電商類app，主流競品首先會選淘寶進行分析，淘寶的信息層級布局一定是反復(fù)推敲后形成的，思考我們在做自身產(chǎn)品的時候是否布局結(jié)構(gòu)與主流競品保持一致，比如banner與金剛區(qū)位置，圖標(biāo)放置等等。對于一些特定業(yè)務(wù)模塊，行業(yè)內(nèi)已經(jīng)形成了慣性的設(shè)計模式，一下子改變布局會增加用戶的學(xué)習(xí)成本。比如常用的功能模塊一般會放在頂部位置。
3.尋找設(shè)計機會點
在分析自身產(chǎn)品功能與競品時，對比功能框架，發(fā)現(xiàn)我們有哪些沒有做，是否有做的必要？設(shè)計上有哪些新的設(shè)計機會點？？？（這是做為設(shè)計師最應(yīng)該思考的點，才能有所突破）是否值得做，如果做，我們可以怎么樣做，做得比競品好？（分享一句話：高標(biāo)準(zhǔn)要求自己——你所找到的參考是你設(shè)計的最低標(biāo)準(zhǔn)）
二、目標(biāo)人群（who）
對產(chǎn)品的核心用戶群體，進行深入分析，充分了解我們的用戶，從而挖掘用戶的視覺偏好，幫助我們定義主視覺風(fēng)格與色彩、字體選擇等。這一步我們需要做的有：
1.用戶年齡段與性別分布
了解核心用戶的年齡區(qū)間，以及了解男女比例如何。了解這部分用戶能讓我們聚焦核心年齡段用戶的視覺偏好，以及這部分用戶對視覺要求是否高。比如qq主要年齡分布為15-22歲的年輕用戶，對設(shè)計要求也很高；微信年齡段覆蓋面更廣，對設(shè)計的要求相對與qq就要低很多。
2.興趣特征
了解目標(biāo)群體的業(yè)余喜好，讓讓我們從多方面去了解用戶，從而給了我們更多的運營機會點與設(shè)計機會點。比如我們做一個韓劇視頻類app，通過分析發(fā)現(xiàn)看韓劇大多為女性用戶，且平時喜歡購物，那么在視頻暫?；蛘咭曨l流中穿插一些其app的購物廣告，能讓不同平臺間實現(xiàn)流量互換，互利共贏。
3.價值觀
通過了解用戶的價值觀，也能幫助我們?nèi)ザx產(chǎn)品的色彩。比如核心用戶的價值觀都是很正能量、積極的就可以分析我們的色彩可以偏明亮的橙色、黃色等等。
4.分析用戶購買力
分析用戶的經(jīng)濟價值（頻次、消費金額等）、購買行為（消費品廣度、偏好、看重因素、享受優(yōu)惠情況等）、平臺行為（分析用戶平時喜歡用什么其他類app）。做這些等目的是為了讓設(shè)計師更加關(guān)注一些運營細節(jié)的設(shè)計。比如banner文案怎樣才能吸引用戶點擊、banner字體用什么是用戶愛看的字體。
三、預(yù)期目標(biāo)（why）
站在用戶角度分析用戶使用場景，幫助用戶解決問題。這一步我們需要做的有：
1.想要解決什么問題
這一步需要我們站在用戶角度進行場景復(fù)原，比如想做支付類產(chǎn)品，復(fù)原用戶支付場景有哪些，用戶在支付時關(guān)注哪些點、不關(guān)注哪些點等等。這一步我們需要用到4W方法論來復(fù)現(xiàn)分析。4W及who（誰）、when（什么時間）、where（什么地點）、what（什么事情）。
2.市場有沒有替代方案
行業(yè)中有沒有成熟解決方案，是否需要借鑒。因為如果市場上有成熟的產(chǎn)品用戶的使用習(xí)慣可能已經(jīng)養(yǎng)成了，我們就需要知道用戶是怎樣去使用這個產(chǎn)品的，如果改變一些習(xí)慣是否可行。
四、使用場景（where）
考慮用戶的使用環(huán)境，思考用戶心理。結(jié)合用戶使用場景，考慮頁面的信息層級、顏色飽和度、頁面跳轉(zhuǎn)情況等。這一步需要做等有：
1.做交互旅程圖
我們需要思考用戶從哪里來要去哪里，也就是前一個頁面是什么，下一個跳轉(zhuǎn)頁面是什么。交互旅程圖是用戶使用產(chǎn)品等主要路徑，能夠幫助我們合理等劃分頁面的信息層級，使信息層級更加合理化。
2.考慮用戶的使用環(huán)境，場景特征
環(huán)境是安靜還是嘈雜，用戶使用產(chǎn)品有無干擾；環(huán)境是昏暗還是明亮，用戶是否能很好的閱讀。在強光環(huán)境中我們經(jīng)常會用W3C強光測試。
在強光環(huán)境中可見度需要大于等于4.5:1才是合理的。
前景色（圖標(biāo)、文字的顏色）：背景色>=4.5:1
強光測試網(wǎng)站：https://webaim.org/resources/contrastchecker/
比如我們經(jīng)常會把重要標(biāo)題設(shè)置為＃333；背景色為白色＃fff；強光測試出可見度大于4.5:1，說明在強光環(huán)境下，用戶是可以很好識別、閱讀的。
五.使用節(jié)點（when）
考慮用戶使用產(chǎn)品的各個節(jié)點、各節(jié)點關(guān)注什么信息，來幫助我們了解產(chǎn)品功能的優(yōu)先級、信息的優(yōu)先級，來幫助設(shè)計師合理的排布、排期。這一步需要做的有：
1.了解產(chǎn)品功能優(yōu)先級
我們經(jīng)常使用KANO模型分析用戶需求，從而幫助我們對產(chǎn)品功能的優(yōu)先級進行排序劃分。
一般的設(shè)計排期順序是：必備因素、期望因素、魅力因素、無差異因素
必備因素：有此需求用戶滿意度不變，沒有則滿意度大幅度下降（如微信語音）
期望因素：提供期望需求則滿意度會上升，不提供則會下降（如微信紅包、占位圖）
魅力因素：提供用戶想不到的需求會很大程度的提升用戶滿意度，不提供滿意度不變（如淘寶的千人千面，智能推薦功能）
無差異因素：用戶根本不在意的功能需求
反向因素：無此需求滿意度不變，有則滿意度下降（不做）
2.進行信息排布、設(shè)計排期
根據(jù)上一步的產(chǎn)品功能優(yōu)先級進行排期設(shè)計。在同一個頁面里相同元素也需要去考慮排布的優(yōu)先順序。比如支付寶頂部的4大金剛排布的順序，為什么這么排？
六、如何驗證（how）
這一步就是去做界面瀏覽測試和從一些數(shù)據(jù)角度去量化設(shè)計，看設(shè)計是否合理有效。通常都是在設(shè)計結(jié)束后，這一步我們可以不用那么去關(guān)注。
做為設(shè)計師，所有的方法論都是助力我們做設(shè)計。站在產(chǎn)品、交互角度去思考，從而幫助我們做設(shè)計時更加合理化（合理是第一步，好看是第二步）。記住所有的方法論最終都是要回歸到設(shè)計中去的，不然我們所有的分析都是白費力氣的。
