周五晚上花了7小時(shí)準(zhǔn)備了一場(chǎng)分享會(huì)，分享對(duì)象為7、8個(gè)中階設(shè)計(jì)師，所從事的行業(yè)、工作的企業(yè)各有不同，甚至所設(shè)計(jì)的內(nèi)容也略有不同，這給分享帶來(lái)了很大的難度，除了泛泛的分享一些概念和大的方向，會(huì)很難找到共鳴，但是大而寬泛的東西卻不容易帶給聽(tīng)眾多少成長(zhǎng)，所以決定從細(xì)處著手。
先是在X-mind上腦爆自己的分享內(nèi)容，然后去整理這些內(nèi)容，最終選定“設(shè)計(jì)完成度”這個(gè)點(diǎn)，這是一個(gè)非常宏觀的點(diǎn)，談這個(gè)話(huà)題估計(jì)談一天也談不完，所以從“視覺(jué)稿輸出物的完成度”這個(gè)方向作為切入點(diǎn)去談。
如何能每次在提交視覺(jué)稿時(shí)，達(dá)到一個(gè)相對(duì)比較高的設(shè)計(jì)完成度？我們把頁(yè)面分成5個(gè)大的狀態(tài)類(lèi)型，每一種類(lèi)型去匯總一些需要輸出的細(xì)節(jié)，每次設(shè)計(jì)之前我們拿這個(gè)知識(shí)結(jié)構(gòu)去排查頁(yè)面，那么，你的視覺(jué)輸入物應(yīng)該達(dá)得到一定的完成度。這是個(gè)很笨的方法，但是屢試不爽。
下面詳細(xì)敘述一下5個(gè)頁(yè)面類(lèi)型：
一、理想狀態(tài)
理想狀態(tài)，可以說(shuō)是我們UI設(shè)計(jì)最基礎(chǔ)的產(chǎn)物。值得注意的一點(diǎn)是：理想狀態(tài)不等于高顏值。我認(rèn)為的理想狀態(tài)是，套用產(chǎn)品真實(shí)數(shù)據(jù)，適應(yīng)基本的產(chǎn)品基調(diào)的UI稿，而不是那種為了追逐視效而忽略真實(shí)的產(chǎn)品模樣的界面。當(dāng)然，我們對(duì)于理想狀態(tài)的頁(yè)面，都是手到擒來(lái)，熟悉的不要不要的。這一點(diǎn)不再贅述。
二、空白狀態(tài)
空白狀態(tài)分為三種場(chǎng)景：1、針對(duì)小白用戶(hù)做的一些設(shè)計(jì)。2、頁(yè)面沒(méi)有資料顯示。3、用戶(hù)主動(dòng)清空。
1、初次使用產(chǎn)品的用戶(hù)，基本上是大腦空白的，一切都是新鮮的未知物，這個(gè)時(shí)候，頁(yè)面可能會(huì)需要一些新手引導(dǎo)、用戶(hù)教學(xué)類(lèi)型的頁(yè)面補(bǔ)充。另一種情況是產(chǎn)品迭代升級(jí)過(guò)程中功能的增加、減少，也是可以給用戶(hù)一些指引。
2、一些初期運(yùn)作的項(xiàng)目，用戶(hù)數(shù)據(jù)相對(duì)來(lái)說(shuō)比較少，還有就是用戶(hù)還未激活的部分功能，這些需要我們給予一些說(shuō)明和提示，讓用戶(hù)融入情景，于此同時(shí)，這些也是體現(xiàn)產(chǎn)品情感化關(guān)懷很重要的一點(diǎn)。我們常?？吹降囊恍┛諣顟B(tài)，如：我的訂單、我的關(guān)注、書(shū)架、購(gòu)物車(chē)、評(píng)價(jià)功能、篩選結(jié)果空··· ···不同的產(chǎn)品都會(huì)有相應(yīng)的空狀態(tài)。
3、用戶(hù)主動(dòng)清空，這個(gè)場(chǎng)景也會(huì)經(jīng)常出現(xiàn)，當(dāng)用戶(hù)主動(dòng)要清空信息時(shí)，給出一些積極的反饋如：撤回路徑或者是鼓勵(lì)性語(yǔ)言，也能給用戶(hù)一些良性的感受。
空白狀態(tài)，在我們拿到產(chǎn)品原型階段時(shí)，尤其是一些不太規(guī)范的小公司，這部分經(jīng)常會(huì)體現(xiàn)不出來(lái)，所以UI設(shè)計(jì)師，應(yīng)該在理想狀態(tài)的基礎(chǔ)上添加這些空白頁(yè)面。這里有一個(gè)值得提的點(diǎn)就是那些提示文案的調(diào)性，很大程度上能夠帶動(dòng)整個(gè)產(chǎn)品的品牌認(rèn)知度和用戶(hù)粘度。
三、反饋狀態(tài)
反饋狀態(tài)，顧名思義，是人機(jī)交互過(guò)程中，機(jī)器給予人的一種反饋。這里粗略分為：1、成功反饋。2、錯(cuò)誤或失敗反饋。3、系統(tǒng)提示。4、點(diǎn)觸反饋。
1、操作成功，這個(gè)非常好理解，在支付、提交、保存等環(huán)節(jié)都有很多表現(xiàn)。
2、錯(cuò)誤或者失敗反饋，登錄注冊(cè)、表單填寫(xiě)過(guò)程中，都會(huì)有大量的反饋。
3、系統(tǒng)提示，這個(gè)點(diǎn)常常會(huì)被忽略，一個(gè)是因?yàn)閁I設(shè)計(jì)師一般不懂后臺(tái)實(shí)現(xiàn)邏輯，但是，前期一定要溝通，看是否有一些常規(guī)的系統(tǒng)反饋提示需要增加。
4、點(diǎn)觸反饋，這里可以從網(wǎng)頁(yè)和APP兩個(gè)方向來(lái)說(shuō)。在網(wǎng)頁(yè)中，可以多加運(yùn)用鼠標(biāo)的4種狀態(tài)，尤其是hover態(tài)去區(qū)分信息；在H5中，也不要忘了這個(gè)hover態(tài)，往往對(duì)于用戶(hù)有很好的反饋。APP則是各種手勢(shì)和彈出動(dòng)效的思考。還有一個(gè)要說(shuō)明的地方，就是長(zhǎng)的信息流中，如果用戶(hù)讀過(guò)的信息，進(jìn)行差別化的樣式設(shè)計(jì)，會(huì)減輕用戶(hù)的記憶壓力。
四、加載狀態(tài)
我們常常會(huì)忽略的部分，任何頁(yè)面都存在加載問(wèn)題，到底采用怎么的加載模式，會(huì)影響到我們UI界面的設(shè)計(jì)，所以前期一定要先去定義加載狀態(tài)。是采用點(diǎn)擊加載，還是上拉刷新，每次刷新的信息數(shù)量，是采用基本的系統(tǒng)loading，還是畫(huà)一些有特色的loading動(dòng)畫(huà)？
另幾種現(xiàn)在常常被采用的加載方式：信息結(jié)構(gòu)灰圖先行、局部信息單獨(dú)加載，這種“信息可視化”，能夠減輕用戶(hù)的等待焦慮。
五、極限狀態(tài)
將極限狀態(tài)分為兩種：1、極大極小值。2、性能極限。
1、產(chǎn)品中的數(shù)字和文本，都要考慮極限情況，當(dāng)數(shù)據(jù)為空或者為0時(shí)，采用哪種視覺(jué)表現(xiàn)方式，當(dāng)極大值時(shí)，現(xiàn)有的樣式是否還能滿(mǎn)足所需，這個(gè)點(diǎn)常常被忽略，以致產(chǎn)品上線后遇到極端情況出現(xiàn)bug，才急忙處理。這要不得，所以UI階段最好設(shè)想到這個(gè)情景。
2、性能極限：找不到網(wǎng)頁(yè)、網(wǎng)絡(luò)中斷、系統(tǒng)繁忙等。
經(jīng)過(guò)以上五種狀態(tài)的排查，相信你的視覺(jué)輸出物一定是一份合格的答卷，如果有心，可以針對(duì)各種狀態(tài)，現(xiàn)在市場(chǎng)上出現(xiàn)的UI樣式風(fēng)格做一次統(tǒng)計(jì)，相信你的知識(shí)結(jié)構(gòu)會(huì)得到更大的提升。
除此五種狀態(tài)，另一個(gè)點(diǎn)睛之筆，或者說(shuō)可以讓你的視覺(jué)輸出物質(zhì)量更高的是，關(guān)注局部信息的可視化。從原型圖中，需求文檔中，認(rèn)真分析出可以用圖形化、數(shù)據(jù)表格等來(lái)表現(xiàn)的東西。
分享會(huì)還算成功，聽(tīng)眾給出的反饋是：比較干！ 往往是細(xì)節(jié)的東西是我們最常忽略的，而如果形成一整套的行為路徑，那么這些細(xì)節(jié)很難逃脫你的法眼，這樣一來(lái)，設(shè)計(jì)完成度就能得到提高，而你的專(zhuān)業(yè)水準(zhǔn)也相應(yīng)的得到了提升。
PS:在此草草記錄這次思考和總結(jié)的過(guò)程，希望有更多的設(shè)計(jì)思考和整理，最后，要感謝@粉粉的開(kāi)山之作《“壞”UI》。
