UI知識(shí),設(shè)計(jì)師必須知道的優(yōu)秀UI設(shè)計(jì)原則(2)
▲ 錯(cuò)誤示范|這個(gè)界面是讓用戶(hù)輸入登錄,卻將注冊(cè)放在與登錄同等重要的位置,干擾用戶(hù)操作,會(huì)導(dǎo)致操作錯(cuò)誤。比較好的做法是,將注冊(cè)放在右下或登錄按鈕下方。
界面過(guò)渡自然
界面的交互都是關(guān)聯(lián)的,所以要認(rèn)真地考慮到下一步的交互是怎樣的,并且通過(guò)設(shè)計(jì)將其實(shí)現(xiàn)。當(dāng)用戶(hù)已經(jīng)完成該做的步驟,不要讓他們不知所措,給他們自然而然繼續(xù)下去的方法,以達(dá)成目的。
▲ 正確示范|界面的交互非常清晰,點(diǎn)擊向下展開(kāi),再次點(diǎn)擊向上收起。
表里如一
如果它看上去像個(gè)按鈕,那么它就應(yīng)該具備按鈕的功能。設(shè)計(jì)師不應(yīng)該在基本的交互問(wèn)題上耍小聰明,要在更高層次的問(wèn)題上發(fā)揮創(chuàng)造力。
▲ 錯(cuò)誤示范|界面非常漂亮,但登錄被弱化,并且表現(xiàn)形式雷同輸入的提示文字,用戶(hù)不易察覺(jué)。
區(qū)別對(duì)待一致性
如果屏幕元素各自的功能不同,那么它們的外觀也理應(yīng)不同。反之,如果功能相同或相近,那么它們看起來(lái)就應(yīng)該是一樣的。
▲ 正確示范|元素排版整齊且統(tǒng)一,功能清晰明了。
強(qiáng)烈的視覺(jué)層次感
強(qiáng)烈的視覺(jué)層次感是通過(guò)界面上視覺(jué)元素提供的清晰瀏覽順序來(lái)實(shí)現(xiàn)的,也就是說(shuō),用戶(hù)每次都能按照同一個(gè)順序?yàn)g覽同一些元素。弱化的視覺(jué)層次沒(méi)有給用戶(hù)提供如何瀏覽的線(xiàn)索,用戶(hù)會(huì)感到困惑和混亂。當(dāng)一切都是粗體時(shí),就沒(méi)有主次之分了。
▲ 正確示范|界面以用戶(hù)的閱讀習(xí)慣將層次拉開(kāi),從左到右,從上到下,元素之間互不干擾。
恰當(dāng)?shù)慕M織UI能夠降低認(rèn)知難度
正如John Maeda在他的書(shū)中所說(shuō),對(duì)屏幕元素的恰當(dāng)組織能夠使頁(yè)面顯得簡(jiǎn)潔,這能夠幫助用戶(hù)更容易并且更快地理解你的界面。
▲ 正確示范|將零散的元素進(jìn)行組合,并以生活中常見(jiàn)的物品展示,用戶(hù)更易理解。
學(xué)習(xí) · 提示
相關(guān)教程
- UI圖標(biāo)教程,用PS繪制一個(gè)獨(dú)特的漸變風(fēng)格播放器圖標(biāo)
- UI圖標(biāo)教程,用PS制作一個(gè)音樂(lè)圖標(biāo)
- 圖標(biāo)設(shè)計(jì),用PS繪制索尼PSP圖標(biāo)
- UI圖標(biāo)教程,在PS中繪制一枚炫酷的鐘表圖標(biāo)
- UI圖標(biāo)教程,用ps制作浪漫的冰晶圖標(biāo)
- 圖標(biāo)制作,用PS繪制一款簡(jiǎn)約風(fēng)格的解密游戲圖標(biāo)
- 插畫(huà)制作,用PS繪制簡(jiǎn)約沙漏插畫(huà)效果圖片
- 圖案設(shè)計(jì),用PS快速制作一個(gè)心形圖案
- 手機(jī)圖標(biāo),用PS繪制華為手機(jī)圖標(biāo)
- 相機(jī)圖標(biāo),用UI制作簡(jiǎn)單的彩虹相機(jī)圖標(biāo)
推薦教程
- UI視頻, 設(shè)計(jì)中得美術(shù)基礎(chǔ)
- 地圖圖標(biāo),設(shè)計(jì)簡(jiǎn)潔的地圖主題UI圖標(biāo)教程
- UI知識(shí),設(shè)計(jì)師必須知道的優(yōu)秀UI設(shè)計(jì)原則
- UI知識(shí),做UI的工作方式與流程
- ps設(shè)計(jì)折紙效果風(fēng)格的短信軟件圖標(biāo)
- PS繪制磚塊ICO圖標(biāo)
- 相機(jī)UI圖標(biāo)設(shè)計(jì)教程
- ps日歷圖標(biāo)
- UI教程:設(shè)計(jì)電池icon
- ps設(shè)計(jì)盒子圖標(biāo)