實(shí)例解析|如何帶著交互&視覺思維來設(shè)計(jì)UI
UI在拿到產(chǎn)品原型時(shí)該如何思考?如何著手設(shè)計(jì)界面?最近跟一些設(shè)計(jì)師朋友交流UI設(shè)計(jì)方案,總結(jié)了一下在方案優(yōu)化的思考過程,在這里分享給大家。
目錄:
- 兩道思維
- 思維應(yīng)用
- 檢驗(yàn)方案
- 優(yōu)化方案
- 總結(jié)
1. 兩道思維
很多UI拿到一個(gè)頁(yè)面原型的時(shí)候,就立馬打開各大設(shè)計(jì)網(wǎng)站找參考,然后照著參考頁(yè)面上的效果,生搬硬套到原型上,這只是達(dá)到了美化頁(yè)面的效果。
那么拿到原型后,應(yīng)該帶著怎樣的思維來進(jìn)行思考呢?
第一道思維-交互思維
先了解頁(yè)面實(shí)現(xiàn)什么功能,功能的交互操作流程是怎樣的,也就是說用戶操作這個(gè)頁(yè)面上的功能時(shí),用戶的行為路徑是怎樣的。
第二道思維-視覺思維
了解完功能、交互后,提取原型中視覺組成元素,細(xì)分歸類,每一類應(yīng)用統(tǒng)一性原則進(jìn)行設(shè)計(jì)。
交互與視覺一同結(jié)合來設(shè)計(jì)界面。
2. 思維應(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)用請(qǐng)遵循視覺規(guī)范。
- 如無視覺規(guī)范,同類視覺組件元素應(yīng)用統(tǒng)一性原則進(jìn)行設(shè)計(jì)。
3. 檢驗(yàn)方案
我們帶著兩道思維來檢驗(yàn)一下這位設(shè)計(jì)師輸出的方案:
問題1 – 交互層級(jí)
(1)問題所在
數(shù)據(jù)顯示在前,輸入在后,交互操作層級(jí)有點(diǎn)混亂。
(2)問題截圖
(3)問題解決
用戶行為路徑中,第1步有個(gè)先后順序,先輸入地址,后顯示數(shù)據(jù),在進(jìn)行信息內(nèi)容布局設(shè)計(jì)的時(shí)候同樣需要有先后順序,所以交互操作層級(jí)一定程度上影響著布局排版。
問題2 – 步驟關(guān)聯(lián)
(1)問題所在
“批量轉(zhuǎn)賬”按鈕歸類到了第1步的信息模塊中,交互操作邏輯有點(diǎn)不通暢。
(2)問題截圖
(3)解決方案
用戶行為路徑中,用戶核心費(fèi)用信息后,最有可能的行為就是點(diǎn)擊“批量轉(zhuǎn)賬”按鈕,所以“批量轉(zhuǎn)賬”按鈕與轉(zhuǎn)賬費(fèi)用信息的操作關(guān)聯(lián)性比較大,應(yīng)該在同一模塊里會(huì)更符合交互操作邏輯。
問題3 – 顏色
(1)問題所在
主色、點(diǎn)綴色、輔助色各自的應(yīng)用范圍沒有規(guī)則,顏色應(yīng)用混亂。
(2)問題截圖
(3)問題解決
一個(gè)頁(yè)面或者項(xiàng)目中,各種顏色的應(yīng)用范圍需要有一定規(guī)范,文字使用什么顏色、按鈕使用什么顏色、輸入組件使用什么顏色、背景使用什么顏色都需要有對(duì)應(yīng)的使用規(guī)則。
問題4 – 輸入控件
(1)問題所在
輸入類組件樣式存在多樣性,同樣是輸入框,有多種樣式,會(huì)造成用戶交互操作上的認(rèn)知有誤。
(2)問題截圖
(3)問題解決
一個(gè)頁(yè)面或者項(xiàng)目中,輸入類組件樣式應(yīng)用統(tǒng)一性原則,保持視覺風(fēng)格一致,從而減少用戶操作認(rèn)知偏差。
問題5 – 按鈕樣式
(1)問題所在
按鈕樣式應(yīng)用到不具備按鈕點(diǎn)擊屬性的對(duì)象上,用戶會(huì)認(rèn)為也是可點(diǎn)擊,會(huì)造成用戶交互操作上的認(rèn)知有誤。
(2)問題截圖:
(3)問題解決
一個(gè)頁(yè)面或者項(xiàng)目中,不具備按鈕點(diǎn)擊屬性的元素盡量不要套用按鈕樣式,減少用戶操作認(rèn)知偏差。
舉個(gè)例子:人形的稻草套上人的衣服,成功了欺騙了人們,造成了認(rèn)知偏差。
問題6 – 信息展示
(1)問題所在
同類信息內(nèi)容的展示存在多樣式,傳達(dá)過程中加重了用戶的認(rèn)知負(fù)擔(dān)。
(2)問題截圖
(3)問題解決
一個(gè)頁(yè)面或者項(xiàng)目中,同類信息內(nèi)容的展示應(yīng)用相似性原則保持視覺風(fēng)格一致,因?yàn)橄嗨菩缘牟季挚梢愿痈咝У貍鬟_(dá)信息。
舉個(gè)例子:電商頁(yè)面,金額信息展示;理財(cái)頁(yè)面,收益信息的展示;都是應(yīng)用相似性的布局,即統(tǒng)一又高效地傳達(dá)信息。
問7 – 圖標(biāo)風(fēng)格
(1)問題所在
圖標(biāo)風(fēng)格不一致,圖形反白風(fēng)格,立體風(fēng)格,線性風(fēng)格。
(2)問題截圖
(3)問題解決
根據(jù)產(chǎn)品的特性,建議統(tǒng)一的圖標(biāo)風(fēng)格,選擇線性、面性、漸變、立體等風(fēng)格。
問題8- 對(duì)齊、間隔
(1)問題所在
頁(yè)面元素的對(duì)齊、間隔沒有規(guī)律,整體視覺顯得松散,不嚴(yán)謹(jǐn)。
(2)問題截圖
(3)問題解決
可以利用柵格系統(tǒng),把頁(yè)面信息內(nèi)容規(guī)整起來。
4. 優(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)容互補(bǔ)干擾,但從結(jié)構(gòu)布局又能夠形成符合交互操作邏輯。
優(yōu)化2- 顏色
規(guī)范顏色,配色的方法在這里不做深入討論,這里方法的是基于品牌色通過飽和度、亮度、透明度的變?cè)拋淼贸鑫淖指鲗蛹?jí)的顏色、邊框的顏色。
優(yōu)化3 – 輸入控件
對(duì)輸入類控件的樣式進(jìn)行了統(tǒng)一,讓用戶從視覺上就能夠清楚地分辨出哪些是可以進(jìn)行輸入操作的,從而減少用戶對(duì)交互操作上的認(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 – 按鈕
對(duì)按鈕進(jìn)行了分類,分為常規(guī)按鈕、圖標(biāo)按鈕、文字按鈕;對(duì)按鈕樣式用顏色進(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 – 信息展示
對(duì)信息內(nèi)容應(yīng)用相似性原則進(jìn)行了排版的統(tǒng)一處理,每個(gè)小類信息的標(biāo)題與內(nèi)容采用統(tǒng)一排版格式,然后重復(fù)應(yīng)用,有助于提高信息獲取效率。
優(yōu)化6 – 圖標(biāo)
這里的圖標(biāo)應(yīng)用于功能性圖標(biāo),統(tǒng)一采用線性圓角風(fēng)格。功能性圖標(biāo)需要注意圖標(biāo)的形狀要能夠正確有效地傳達(dá)出功能的含義。
優(yōu)化7 – 對(duì)齊、間隔
應(yīng)用柵格系統(tǒng)對(duì)視覺元素之間的對(duì)齊、間隔進(jìn)行調(diào)整,使頁(yè)面視覺更加嚴(yán)謹(jǐn),頁(yè)面信息更容易閱讀。
總結(jié)
(1)交互思維
了解頁(yè)面中的功能交互流程,梳理用戶操作行為路徑,可以對(duì)行為步驟中的信息內(nèi)容進(jìn)行歸類分組提供依據(jù),最終有助于頁(yè)面信息內(nèi)容的排版布局。
(2)視覺思維
提取視覺組成元素,對(duì)顏色、文字、控件、圖標(biāo)等每一類應(yīng)用統(tǒng)一性原則進(jìn)行規(guī)范設(shè)計(jì),再通過視覺元素本身相互組合,最終應(yīng)用回信息內(nèi)容上,建立規(guī)范的視覺感。
設(shè)計(jì)一個(gè)頁(yè)面,交互思維和視覺思維是互相配合的,缺一不可,最終都是為了共同去構(gòu)造符合交互操作邏輯、滿足視覺美感的界面。
以上就是我對(duì)如何帶著交互&視覺思維來設(shè)計(jì)UI的分析和總結(jié),歡迎大家一起討論。
作者:k_001ayy,不斷奔跑中的設(shè)計(jì)師
本文由 @k_001ayy? 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Pixabay,基于 CC0 協(xié)議
您好,優(yōu)化7 – 對(duì)齊、間隔,沒懂,能詳細(xì)講下嗎
總感覺優(yōu)化后的批量轉(zhuǎn)賬和地址的關(guān)聯(lián)性不強(qiáng)。
學(xué)習(xí)了 產(chǎn)品經(jīng)理出的原型布局卡死了 只需要在上面美化下 這個(gè)怎么解決
如果有更好的布局方案,或者自己有一些不一祥的想法,可以找相關(guān)人員一起溝通的,共同尋求最優(yōu)方案。相信你的產(chǎn)品經(jīng)理不會(huì)扔下一堆原型只叫你照著美化。
受用了
??
學(xué)習(xí)了
學(xué)習(xí)
受用了