UI 在拿到產(chǎn)品原型時(shí)該如何思考？如何著手設(shè)計(jì)界面？最近跟一些設(shè)計(jì)師朋友交流 UI 設(shè)計(jì)方案，總結(jié)了一下在方案優(yōu)化的思考過程，在這里分享給大家。

一、兩道思維

很多 UI 拿到一個(gè)頁面原型的時(shí)候，就立馬打開各大設(shè)計(jì)網(wǎng)站找參考，然后照著參考頁面上的效果，生搬硬套到原型上，這只是達(dá)到了單純美化頁面的效果。
那么拿到原型后應(yīng)該帶著怎樣的思維來進(jìn)行思考呢？

第一道思維：交互思維

先了解頁面實(shí)現(xiàn)什么功能，功能的交互操作流程是怎樣的，也就是說用戶操作這個(gè)頁面上的功能時(shí)，用戶的行為路徑是怎樣的。

第二道思維：視覺思維

了解完功能、交互后，提取原型中視覺組成元素，細(xì)分歸類，每一類應(yīng)用統(tǒng)一性原則進(jìn)行設(shè)計(jì)。

然后交互與視覺一同結(jié)合來設(shè)計(jì)界面。

二、思維應(yīng)用

結(jié)合案例我們來看下兩道思維是如何進(jìn)行的。

第一道思維：交互思維

了解功能交互流程。

根據(jù)實(shí)例原型分析出用戶行為路徑：

用戶行為路徑：

注意點(diǎn)：

• 用戶行為路徑的獲取，一定要跟產(chǎn)品經(jīng)理、交互設(shè)計(jì)師進(jìn)行溝通確認(rèn)清楚。
• 用戶行為路徑某些步驟中，也有先后之分，比如第1步中，用戶輸入了賬戶地址后，才會(huì)有賬戶的相關(guān)數(shù)據(jù)顯示。
• 用戶行為路徑可以支撐信息內(nèi)容進(jìn)行歸類分組。

第二道思維：視覺思維

提取視覺組成元素。

視覺元素：

注意點(diǎn)：

• 提取視覺組件元素盡量詳細(xì)歸類。
• 如有視覺規(guī)范，視覺組件元素風(fēng)格應(yīng)用請遵循視覺規(guī)范。
• 如無視覺規(guī)范，同類視覺組件元素應(yīng)用統(tǒng)一性原則進(jìn)行設(shè)計(jì)。

三、檢驗(yàn)方案

我們帶著兩道思維來檢驗(yàn)一下這位設(shè)計(jì)師輸出的方案：

問題1：交互層級

問題所在：

數(shù)據(jù)顯示在前，輸入在后，交互操作層級有點(diǎn)混亂。

問題截圖：

問題解決：

用戶行為路徑中，第1步有個(gè)先后順序，先輸入地址，后顯示數(shù)據(jù)，在進(jìn)行信息內(nèi)容布局設(shè)計(jì)的時(shí)候同樣需要有先后順序，所以交互操作層級一定程度上影響著布局排版。

問題2：步驟關(guān)聯(lián)

問題所在：

「批量轉(zhuǎn)賬」按鈕歸類到了第1步的信息模塊中，交互操作邏輯有點(diǎn)不通暢。

問題截圖：

解決方案：

用戶行為路徑中，用戶核心費(fèi)用信息后，最有可能的行為就是點(diǎn)擊「批量轉(zhuǎn)賬」按鈕，所以「批量轉(zhuǎn)賬」按鈕與轉(zhuǎn)賬費(fèi)用信息的操作關(guān)聯(lián)性比較大，應(yīng)該在同一模塊里會(huì)更符合交互操作邏輯。

問題3：顏色應(yīng)用

問題所在：

主色、點(diǎn)綴色、輔助色各自的應(yīng)用范圍沒有規(guī)則，顏色應(yīng)用混亂。

問題截圖：

問題解決：

一個(gè)頁面或者項(xiàng)目中，各種顏色的應(yīng)用范圍需要有一定規(guī)范，文字使用什么顏色、按鈕使用什么顏色、輸入組件使用什么顏色、背景使用什么顏色都需要有對應(yīng)的使用規(guī)則。

問題4：輸入控件

問題所在：

輸入類組件樣式存在多樣性，同樣是輸入框，有多種樣式，會(huì)造成用戶交互操作上的認(rèn)知有誤。

問題截圖：

問題解決：

一個(gè)頁面或者項(xiàng)目中，輸入類組件樣式應(yīng)用統(tǒng)一性原則，保持視覺風(fēng)格一致，從而減少用戶操作認(rèn)知偏差。

問題5：按鈕樣式

問題所在：

按鈕樣式應(yīng)用到不具備按鈕點(diǎn)擊屬性的對象上，用戶會(huì)認(rèn)為也是可點(diǎn)擊，會(huì)造成用戶交互操作上的認(rèn)知有誤。

問題截圖：

問題解決：

一個(gè)頁面或者項(xiàng)目中，不具備按鈕點(diǎn)擊屬性的元素盡量不要套用按鈕樣式，減少用戶操作認(rèn)知偏差。

舉個(gè)例子：人形的稻草套上人的衣服，成功了欺騙了人們，造成了認(rèn)知偏差。

問題6：信息展示

問題所在：

同類信息內(nèi)容的展示存在多樣式，傳達(dá)過程中加重了用戶的認(rèn)知負(fù)擔(dān)。

問題截圖：

問題解決：

一個(gè)頁面或者項(xiàng)目中，同類信息內(nèi)容的展示應(yīng)用相似性原則保持視覺風(fēng)格一致，因?yàn)橄嗨菩缘牟季挚梢愿拥貍鬟_(dá)信息。

舉個(gè)例子：電商頁面，金額信息展示；理財(cái)頁面，收益信息的展示；都是應(yīng)用相似性的布局，即統(tǒng)一又地傳達(dá)信息。

問題7：圖標(biāo)風(fēng)格

問題所在：

圖標(biāo)風(fēng)格不一致，圖形反白風(fēng)格，立體風(fēng)格，線性風(fēng)格。

問題截圖：

問題解決：

根據(jù)產(chǎn)品的特性，建議統(tǒng)一的圖標(biāo)風(fēng)格，選擇線性、面性、漸變、立體等風(fēng)格。

問題八：對齊間隔

問題所在：

頁面元素的對齊、間隔沒有規(guī)律，整體視覺顯得松散，不嚴(yán)謹(jǐn)。

問題截圖：

問題解決：

可以利用柵格系統(tǒng)，把頁面信息內(nèi)容規(guī)整起來。

四、優(yōu)化方案

根據(jù)發(fā)現(xiàn)的問題，我們來看一下優(yōu)化后的設(shè)計(jì)方案：

優(yōu)化1：交互路徑

根據(jù)用戶行為路徑，將相關(guān)聯(lián)的信息歸類到一個(gè)模塊，每個(gè)步驟劃分到一個(gè)模塊，相關(guān)聯(lián)的步驟合并到一個(gè)模塊，模塊內(nèi)完成各自的操作展示任務(wù)，模塊之間信息內(nèi)容互不干擾，但從結(jié)構(gòu)布局又能夠形成符合交互操作邏輯。

優(yōu)化2：顏色規(guī)范

規(guī)范顏色，配色的方法在這里不做深入討論，這里方法的是基于品牌色通過飽和度、亮度、透明度的變化來得出文字各層級的顏色、邊框的顏色。

優(yōu)化3：輸入控件

對輸入類控件的樣式進(jìn)行了統(tǒng)一，讓用戶從視覺上就能夠清楚地分辨出哪些是可以進(jìn)行輸入操作的，從而減少用戶對交互操作上的認(rèn)知成本，提高信息輸入效率。

輸入控件進(jìn)行交互時(shí)，要有交互狀態(tài)反饋，默認(rèn)狀態(tài)、選中狀態(tài)、錯(cuò)誤狀態(tài)。視情況而定，可以增加鼠標(biāo)移上狀態(tài)和不可輸入狀態(tài)。

狀態(tài)變化時(shí)的顏色應(yīng)用，可以通過變換色相的透明度來保持色彩的一致性。

優(yōu)化4：按鈕規(guī)范

對按鈕進(jìn)行了分類，分為常規(guī)按鈕、圖標(biāo)按鈕、文字按鈕；對按鈕樣式用顏色進(jìn)行了統(tǒng)一；按鈕要有交互狀態(tài)反饋，不可點(diǎn)擊狀態(tài)、可點(diǎn)擊狀態(tài)、鼠標(biāo)移上狀態(tài)、鼠標(biāo)按下。

狀態(tài)變化時(shí)的顏色應(yīng)用，可以通過變換色相的飽和度、亮度、透明度來保持色彩的一致性。

優(yōu)化5：信息展示

對信息內(nèi)容應(yīng)用相似性原則進(jìn)行了排版的統(tǒng)一處理，每個(gè)小類信息的標(biāo)題與內(nèi)容采用統(tǒng)一排版格式，然后重復(fù)應(yīng)用，有助于提高信息獲取效率。

優(yōu)化6：圖標(biāo)風(fēng)格

這里的圖標(biāo)應(yīng)用于功能性圖標(biāo)，統(tǒng)一采用線性圓角風(fēng)格。功能性圖標(biāo)需要注意圖標(biāo)的形狀要能夠正確有效地傳達(dá)出功能的含義。

優(yōu)化7：對齊間隔

應(yīng)用柵格系統(tǒng)對視覺元素之間的對齊、間隔進(jìn)行調(diào)整，使頁面視覺更加嚴(yán)謹(jǐn)，頁面信息更容易閱讀。

五、總結(jié)

交互思維

了解頁面中的功能交互流程，梳理用戶操作行為路徑，可以對行為步驟中的信息內(nèi)容進(jìn)行歸類分組提供依據(jù)，最終有助于頁面信息內(nèi)容的排版布局。

視覺思維

提取視覺組成元素，對顏色、文字、控件、圖標(biāo)等每一類應(yīng)用統(tǒng)一性原則進(jìn)行規(guī)范設(shè)計(jì)，再通過視覺元素本身相互組合，最終應(yīng)用回信息內(nèi)容上，建立規(guī)范的視覺感。

設(shè)計(jì)一個(gè)頁面，交互思維和視覺思維是互相配合的，缺一不可，最終都是為了共同去構(gòu)造符合交互操作邏輯、滿足視覺美感的界面。