UI設(shè)計(jì)基礎(chǔ)
設(shè)計(jì)三點(diǎn)原則
- 遵從:UI幫助用戶更好地理解內(nèi)容並與之交互诚啃,而不是喧賓奪主。
- 清晰:文字和圖標(biāo)清晰且表意清楚归敬;聚焦功能响蓉,減少裝飾硕勿。
- 層次(Depth):多層次的視覺和動(dòng)畫效果賦予了UI活力,這有助於用戶的理解厕妖,並在使用時(shí)獲得愉悅感首尼。
設(shè)計(jì)步驟
- 把應(yīng)用核心功能和UI相關(guān)聯(lián)挑庶,確認(rèn)相關(guān)性。
- 用iOS的設(shè)計(jì)三準(zhǔn)則指導(dǎo)UI和用戶體驗(yàn)設(shè)計(jì)软能。謹(jǐn)慎地添加必要的細(xì)節(jié)迎捺。
- UI設(shè)計(jì)儘可能多地適應(yīng)不同設(shè)備和場(chǎng)景。
專注於內(nèi)容和功能查排,對(duì)傳統(tǒng)凳枝、假想保持懷疑。
UI遵從內(nèi)容
- 利用好全屏跋核。
- 重新思考現(xiàn)實(shí)世界的視覺標(biāo)誌:裝飾使得UI變得厚重岖瑰,分散了用戶對(duì)內(nèi)容的注意力。
- 使用半透明UI元素砂代,告知用戶當(dāng)前內(nèi)容所處的上下文:在iOS中蹋订,半透明物體只會(huì)模糊它後面的區(qū)域,而不會(huì)模糊屏幕的其它區(qū)域刻伊。
清晰露戒、清楚
- 重要內(nèi)容和功能附近有大量留白。
- 用顏色簡(jiǎn)化UI:可以用顏色體現(xiàn)重要內(nèi)容和交互捶箱。同時(shí)也給App打造了一致的視覺系統(tǒng)智什。
- 使用系統(tǒng)內(nèi)置字體:它會(huì)隨著設(shè)置的字體大小自動(dòng)調(diào)整間距和行高等參數(shù)。不管使用哪種字體丁屎,一定要是Dynamic Type的荠锭。
- 擁抱無(wú)邊框按鈕:按鈕通過(guò)上下文、顏色晨川、表示操作的名字等暗示其本身的交互性证九。某些情況下,也可以給按鈕加邊框或給背景著色共虑。
通過(guò)層次交流
- 半透明物體引起的視覺上的層級(jí)關(guān)係甫贯。
- 過(guò)場(chǎng)動(dòng)畫。