>
學(xué)校機(jī)構(gòu) >
上海跑贏職場(chǎng) >
學(xué)習(xí)資訊>
UI設(shè)計(jì)基礎(chǔ);iOS最關(guān)鍵的三個(gè)詞
UI設(shè)計(jì)基礎(chǔ);iOS最關(guān)鍵的三個(gè)詞
68 2016-01-04
一、遵循
設(shè)計(jì)為內(nèi)容服務(wù),UI作為內(nèi)容支撐,可以幫助用戶更好地理解內(nèi)容并與之交互,且不會(huì)分散用戶對(duì)內(nèi)容本身注意力。以內(nèi)容為中心被反復(fù)強(qiáng)調(diào),而平時(shí)設(shè)計(jì)師卻常常會(huì)因?yàn)檫^(guò)度追求美感而忽視這一點(diǎn)。
如何使設(shè)計(jì)遵從內(nèi)容,并突出內(nèi)容:
1、利用整個(gè)屏幕。
2、減少視覺(jué)修飾與擬物化設(shè)計(jì)使用。漸變和陰影有時(shí)會(huì)使UI變得厚重,影響用戶對(duì)內(nèi)容的關(guān)注。
3、使用半透明底板。半透明能使用戶看到更多的內(nèi)容,起到短暫的提示作用。
4、保證應(yīng)用清晰度。
二、清晰
清晰在這里可以理解為:文字清晰易讀,圖標(biāo)精確醒目,去除多余修飾,突出重點(diǎn),以功能驅(qū)動(dòng)設(shè)計(jì)。
如何提升應(yīng)用清晰度:
1、大量留白。留白使內(nèi)容和功能更加醒目,并傳達(dá)出一種寧?kù)o安詳?shù)囊曈X(jué)感受,更好的讓用戶聚焦和高效交互。
2、用顏色簡(jiǎn)化UI。突出重點(diǎn)并暗示交互性。
3、使用系統(tǒng)字體確保易讀性。
4、使用無(wú)邊框的按鈕。在內(nèi)容區(qū)域中無(wú)邊框按鈕用文案、顏色及操作指引標(biāo)題來(lái)傳達(dá)按鈕功能,激活態(tài)時(shí)高亮;在默認(rèn)狀態(tài)下所有的按鈕都是無(wú)邊框的。
正確使用標(biāo)準(zhǔn)UI元素:
1、盡可能使用UIkit提供的標(biāo)準(zhǔn)UI元素,多使用標(biāo)準(zhǔn)元素而非自定義元素。
2、嚴(yán)格遵循每個(gè)UI元素的設(shè)計(jì)規(guī)范,當(dāng)你應(yīng)用中UI元素的外觀與功能都是用戶所熟悉的,他們可以很容易的根據(jù)先前的經(jīng)驗(yàn)使用它,進(jìn)而更好的使用你的應(yīng)用。
3、避免不同版本iOS里的UI元素混用。
4、避免創(chuàng)造自定義UI元素來(lái)表現(xiàn)標(biāo)準(zhǔn)交互行為。
5、避免用系統(tǒng)自帶的按鈕和元素傳達(dá)其他含義。
在沉浸式體驗(yàn)的應(yīng)用中,創(chuàng)造全新的自定義UI是合理的。
使用布局來(lái)溝通。用布局告訴用戶什么是最重要的,以及事物之間的關(guān)聯(lián)。
使用戶集中注意在主要任務(wù)上:
屏幕上半部分放置主要內(nèi)容。遵循用戶從左到右的習(xí)慣,并從靠左側(cè)的屏幕開(kāi)始。
視覺(jué)元素的大小和平衡向用戶展示相關(guān)屏顯的重要內(nèi)容。大控件比小控件更容易在出現(xiàn)時(shí)被注意和點(diǎn)擊。使用對(duì)齊來(lái)讓閱讀更舒適,讓分組和層次之間更有秩序。對(duì)齊會(huì)讓?xiě)?yīng)用整潔有序,也會(huì)讓用戶在專(zhuān)注屏幕時(shí)篩選重要信息。不同信息組的縮進(jìn)與對(duì)齊讓它們之間的關(guān)聯(lián)更清晰,也會(huì)讓用戶更容易的找到某個(gè)控件。
確保默認(rèn)尺寸下重要內(nèi)容的顯示。
例如:用戶無(wú)需水平滾動(dòng)就能看到重要的文本,或不用放大就可以看到主體圖像。
盡量避免UI上不一致的表現(xiàn)。有著相似功能的控件看起來(lái)應(yīng)該相似,用戶認(rèn)為他們看到的不同總是有原因的,而且他們傾向于花時(shí)間嘗試。
給每個(gè)互動(dòng)元素留足空間,讓用戶輕松操作。常用的點(diǎn)按類(lèi)控件的大小是44X44。
三、深度
視覺(jué)的層次感和生動(dòng)的交互動(dòng)畫(huà)會(huì)讓UI看起來(lái)更有活力,有助于用戶更好地理解并提升用戶的愉悅感。
如何提升交互性和反饋體驗(yàn):
1、用戶熟悉的標(biāo)準(zhǔn)手勢(shì)避免賦予不同的行為,除非是游戲。
2、避免創(chuàng)建和標(biāo)準(zhǔn)手勢(shì)功能相似的手勢(shì)操作。
3、用戶已經(jīng)習(xí)慣標(biāo)準(zhǔn)手勢(shì)操作,沒(méi)有必要讓用戶學(xué)習(xí)達(dá)到同樣效果的不同操作。
4、復(fù)雜手勢(shì)可以作為完成某項(xiàng)任務(wù)的快捷方式,但不是唯一的方式。
5、在特定的環(huán)境中,可以考慮使用多指操作。雖然復(fù)雜的操作不一定適用于所有應(yīng)用,但對(duì)用戶會(huì)花大量時(shí)間使用的應(yīng)用來(lái)說(shuō)可以豐富體驗(yàn),例如游戲。
使用有助于理解的反饋:
盡可能將狀態(tài)或其他的反饋信息整合到UI中。最好讓用戶在不進(jìn)行操作或不跳出當(dāng)前內(nèi)容下,獲得需要的信息。例如,郵箱應(yīng)用將當(dāng)前的狀態(tài)顯示工具條上,這樣就不影響當(dāng)前內(nèi)容。
避免顯示不必要的提醒對(duì)話框。對(duì)話框是一種很強(qiáng)的反饋機(jī)制。
如果用戶??吹胶芏嗖皇侵匾畔⒌膶?duì)話框,他們很快就會(huì)忽略所有對(duì)話框提醒。
掃一掃
獲取更多福利
獵學(xué)網(wǎng)企業(yè)微信
獵學(xué)網(wǎng)訂閱號(hào)
獵學(xué)網(wǎng)服務(wù)號(hào)