iOS 8人機(jī)界面指南(一):UI設(shè)計基礎(chǔ)

網(wǎng)頁理論
2015-3-30 13:24:34 文/李芳 圖/董梓涵
![iOS 8人機(jī)界面指南(一):UI設(shè)計基礎(chǔ) cover1]()
1.1 為iOS而設(shè)計(Designing for iOS)
iOS 的革新關(guān)鍵詞如下:
- 遵從:UI能夠更好地幫助用戶理解內(nèi)容并與之互動,但卻不會分散用戶對內(nèi)容本身的注意力。
- 清晰:各種大小的文字應(yīng)該易讀,圖標(biāo)應(yīng)該醒目,去除多余的修飾,突出重點,很好地突顯了設(shè)計理念。
- 深度:視覺的層次和生動的交互動作會賦予UI新的活力,不但幫助用戶更好理解新UI的操作并讓用戶在使用過程中感到驚喜。
無論你是重新設(shè)計一個現(xiàn)有的應(yīng)用或是重新開發(fā)一個,請嘗試下列方法:
- 首先,去除了UI元素讓應(yīng)用的核心功能呈現(xiàn)得更加直接并強(qiáng)調(diào)其相關(guān)性。
- 其次,直接使用iOS的系統(tǒng)主題讓其成為應(yīng)用的UI,這樣能給用戶統(tǒng)一的視覺感受。
- 最后,保證你設(shè)計的UI可以適應(yīng)各種設(shè)備和不同操作模式,這樣用戶可以在不同場景下舒適地享用你的應(yīng)用。
在整個設(shè)計過程中,時刻準(zhǔn)備著推翻先例,假設(shè)問題,并以重點內(nèi)容和功能(為目標(biāo))來驅(qū)動每個細(xì)節(jié)設(shè)計。
1.1.1 以內(nèi)容為核心(Defer to Content)
雖然明快美觀的UI和流暢的動態(tài)效果是iOS體驗的亮點,但內(nèi)容始終是iOS的核心。
這里有一些方法,以確保你的設(shè)計能夠提升你的應(yīng)用功能體驗并關(guān)注內(nèi)容本身。
充分利用整個屏幕。天氣應(yīng)用是最好的例子:漂亮的天氣圖片充滿全屏,呈現(xiàn)用戶所在地當(dāng)前天氣情況這最重要的信息,同時也留出空間呈現(xiàn)了每個時段的氣溫數(shù)據(jù)。
盡量減少視覺修飾和擬物化設(shè)計的使用。UI面板、漸變和陰影有時會讓UI元素顯得很厚重,致使搶了內(nèi)容的風(fēng)頭。應(yīng)該以內(nèi)容為核心,讓UI成為內(nèi)容的支撐。
嘗試使用半透明底板。半透明的控件——比如控制中心——關(guān)聯(lián)了使用場景,幫助用戶看到更多可用的內(nèi)容,并可以起到短暫的提示作用。在iOS中,透明的控件只讓它遮擋住的地方變得模糊——看上去像蒙著一層米紙一樣——它并沒有遮擋屏幕剩余的部分。
1.1.2 保證清晰度(Provide Clarity)
保證清晰度是另一個方法,以確保你的應(yīng)用中內(nèi)容始終是核心。以下是幾種方法,讓最重要的內(nèi)容和功能清晰,易于交互。
使用大量留白。留白讓重要內(nèi)容和功能顯得更加醒目。此外,留白可以傳達(dá)一種平靜和安寧的視覺感受,它可以使一個應(yīng)用看起來更加聚焦和高效。
讓顏色簡化UI。一個主題色——比如在記事本中使用的黃色——讓重要區(qū)域更加醒目并巧妙地表示交互性。這同時也給了一個應(yīng)用一個統(tǒng)一的視覺主題。內(nèi)置應(yīng)用使用家族化的系統(tǒng)顏色,無論在深色和淺色背景上看起來都干凈,純粹。
通過使用系統(tǒng)字體確保易讀性。iOS的系統(tǒng)字體自動調(diào)整行間距和行的高度,使閱讀時文本清晰易讀,無論何種大小的字號都表現(xiàn)良好。無論你是使用系統(tǒng)或是自定義字體,務(wù)必使用動態(tài)型,這樣你的應(yīng)用可以在用戶選擇不同字號時做出應(yīng)對。
使用無邊框的按鈕。默認(rèn)情況下,所有bar上的按鈕都是無邊框的。在內(nèi)容區(qū)域,無邊框按鈕以文案、顏色以及操作指引標(biāo)題來表明按鈕功能。當(dāng)按鈕被Ji活時,該按鈕呈現(xiàn)高亮的淺色狀態(tài)來作為操作響應(yīng)。
1.1.3 用深度來體現(xiàn)層次(Use Depth to Communicate)
iOS經(jīng)常在不同的層級上展現(xiàn)內(nèi)容,用以表達(dá)分組和位置,并幫助用戶了解在屏幕上的對象之間的關(guān)系。
通過使用一個在主屏幕上方的半透明背景浮層來區(qū)分文件夾和其余部分的內(nèi)容。
備忘錄以不同的層級展示,如插圖所示。用戶在使用備忘錄里的某個條目時,其他的條目被收起在屏幕下方(譯者按:其實這個視覺提示使用起來很隱晦)。
日歷有較深的層級,當(dāng)他們在翻閱年、月、日的時候,以及增強(qiáng)的交互動畫給用戶一種層級縱深感(循序切換的層次,從年到月到日)。在滾動年份視圖時,用戶可以即時看到今天的日期以及其他日歷任務(wù)。當(dāng)用戶處于月份視圖時,點擊年份視圖按鈕,月份會縮小至年份視圖中的所處位置。
今天的日期依然處于高亮狀態(tài),年份出現(xiàn)在返回按鈕處,這樣用戶可以清楚地知道他們在哪兒,他們從哪里進(jìn)來并且知道如何返回。