為 iOS 而設(shè)計(jì)

2018-08-12 21:55 更新

為 iOS 而設(shè)計(jì)

iOS 表現(xiàn)了以下三大設(shè)計(jì)原則:

  • 遵從(Deference):UI 應(yīng)該有助于用戶更好地理解內(nèi)容并與之交互,并且不會(huì)分散用戶對(duì)內(nèi)容本身的注意力。
  • 清晰(Clarity):各種尺寸的文字清晰易讀;圖標(biāo)應(yīng)該精確醒目,去除多余的修飾,突出重點(diǎn),以功能驅(qū)動(dòng)設(shè)計(jì)。
  • 深度(Depth):視覺的層次感和生動(dòng)的交互動(dòng)畫會(huì)賦予 UI 新的活力,有助于用戶更好地理解并讓用戶在使用過(guò)程中感到愉悅。

無(wú)論你是重新設(shè)計(jì)現(xiàn)有的應(yīng)用,還是重新開發(fā)一個(gè)新應(yīng)用,請(qǐng)基于下列方法進(jìn)行設(shè)計(jì)考慮:

  • 首先,去除掉 UI 元素讓應(yīng)用的核心功能突顯出來(lái),并明確之間的相關(guān)性。
  • 然后,使用 iOS 的主題來(lái)定義 UI 并進(jìn)行用戶體驗(yàn)設(shè)計(jì)。完善細(xì)節(jié)設(shè)計(jì),以及適當(dāng)合理的修飾。
  • 最后,保證你設(shè)計(jì)的 UI 可以適配各種設(shè)備和各種操作模式,使得用戶在不同場(chǎng)景下都可以享受你的應(yīng)用。 在整個(gè)設(shè)計(jì)過(guò)程中,時(shí)刻準(zhǔn)備著推翻先例,質(zhì)疑各種假設(shè),并以內(nèi)容和功能視為重點(diǎn)來(lái)驅(qū)動(dòng)每個(gè)細(xì)節(jié)的設(shè)計(jì)。

設(shè)計(jì)跟隨內(nèi)容

盡管清新美觀的 UI 和流暢的動(dòng)態(tài)效果都是 iOS 體驗(yàn)的亮點(diǎn),但內(nèi)容始終是 iOS 的核心。

這里有一些方法可以確保你的設(shè)計(jì)既可以提升功能體驗(yàn),又可以關(guān)注內(nèi)容本身。

充分利用整個(gè)屏幕。系統(tǒng)天氣應(yīng)用是這個(gè)方法的絕佳范例:用漂亮的全屏天氣圖片呈現(xiàn)現(xiàn)在的天氣,直觀地向用戶傳遞了最重要的信息,同時(shí)也留出空間呈現(xiàn)了每個(gè)時(shí)段的天氣數(shù)據(jù)。

重新考慮(盡量減少)擬物化設(shè)計(jì)的使用。遮罩、漸變和陰影有時(shí)會(huì)讓 UI 元素顯得很厚重,導(dǎo)致影響到了對(duì)內(nèi)容的關(guān)注。相反,應(yīng)該以內(nèi)容為核心,讓用戶界面成為內(nèi)容的支撐。

用半透明 UI 元素樣式來(lái)暗示背后的內(nèi)容。半透明的控件元素(比如控制中心)可以提供了上下文的使用場(chǎng)景,幫助用戶看到更多可用的內(nèi)容,并可以起到短暫的提示作用。在 iOS 中,半透明的控件元素只讓它遮擋住的地方變得模糊——看上去像蒙著一層米紙——它并沒有遮擋屏幕剩余的部分。

保證清晰

確保你的應(yīng)用始終是以內(nèi)容為核心的另一個(gè)方法是保證清晰度。這里有幾種方法可以讓最重要的內(nèi)容和功能清晰可見,且易于交互。

使用大量留白。留白可以使重要的內(nèi)容和功能更加醒目、更易理解。留白還可以傳達(dá)一種平靜和安寧的心理感受,它可以使一個(gè)應(yīng)用看起來(lái)更加聚焦和高效。

讓顏色簡(jiǎn)化 UI。使用一個(gè)主題色——比如 Notes 中用了黃色——高亮了重要區(qū)塊的信息并巧妙地用樣式暗示可交互性。同時(shí),也讓應(yīng)用有了一致的視覺主題。內(nèi)置的應(yīng)用使用了同系列的系統(tǒng)顏色,這樣一來(lái),無(wú)論在深色或淺色背景上看起來(lái)都很干凈,純粹。

通過(guò)使用系統(tǒng)字體確保易讀性。iOS 的系統(tǒng)字體(San Francisco)使用動(dòng)態(tài)類型(Dynamic Type)來(lái)自動(dòng)調(diào)整字間距和行間距,使文本在任何尺寸大小下都清晰易讀。無(wú)論你是使用系統(tǒng)字體還是自定義字體,一定要采用動(dòng)態(tài)類型,這樣一來(lái)當(dāng)用戶選擇不同字體尺寸時(shí),你的應(yīng)用才可以及時(shí)做出響應(yīng)。

使用無(wú)邊框的按鈕。默認(rèn)情況下,所有的欄(bar)上的按鈕都是無(wú)邊框的。在內(nèi)容區(qū)域,通過(guò)文案、顏色以及操作指引標(biāo)題來(lái)表明該無(wú)邊框按鈕的可交互性。當(dāng)它被激活時(shí),按鈕可以顯示較窄的邊框或淺色背景作為操作響應(yīng)。

用深度層次來(lái)進(jìn)行交流

iOS 經(jīng)常在不同的視圖層級(jí)上展現(xiàn)內(nèi)容,用以表達(dá)層次結(jié)構(gòu)和位置,這樣可以幫助用戶了解屏幕上對(duì)象之間的關(guān)系。

對(duì)于支持 3D 觸控的設(shè)備,輕壓(Peek)、重壓(Pop),以及快捷操作(Quick Actions)能讓用戶在不離開當(dāng)前界面的情景下預(yù)覽其他重要內(nèi)容。

通過(guò)使用一個(gè)在主屏幕上方的半透明背景浮層,這樣文件夾就能清楚地把內(nèi)容和屏幕上其他內(nèi)容區(qū)分開來(lái)。

如圖所示,備忘錄(Reminders)以不同的層級(jí)展示內(nèi)容條目。用戶在使用備忘錄里的某個(gè)條目時(shí),其他條目會(huì)被集中收起在屏幕下方。

日歷具有較深的層級(jí),當(dāng)用戶在翻閱年、月、日時(shí),增強(qiáng)的轉(zhuǎn)場(chǎng)動(dòng)畫效果給用戶一種層級(jí)縱深感。在滾動(dòng)年份視圖時(shí),用戶可以即時(shí)看到今天的日期以及其他日歷任務(wù)。

當(dāng)用戶選擇了某個(gè)月份,年份視圖會(huì)局部放大該月份,過(guò)渡到月份視圖。今天的日期依然處于高亮狀態(tài),年份會(huì)顯示在返回按鈕處,這樣用戶可以清楚地知道他們?cè)谀膬?,他們從哪里進(jìn)來(lái)以及如何返回。

類似的過(guò)渡動(dòng)畫也出現(xiàn)在用戶選擇某個(gè)日期時(shí):月份視圖從所選位置分開,將所在的周日期推向內(nèi)容區(qū)頂端并顯示以小時(shí)為單位的當(dāng)天時(shí)間軸視圖。這些交互動(dòng)畫增強(qiáng)了年、月、日之間的層級(jí)關(guān)系以及用戶的感知。

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)