IOS人機界面指南(一):UI設計基礎01

1.1 為iOS而設計(Designing for iOS)

iOS 的革新關鍵詞如下:

遵從

:UI能夠更好地幫助用戶理解內容并與之互動咏雌,但卻不會分散用戶對內容本身的注意力门驾。

清晰

:各種大小的文字應該易讀,圖標應該醒目,去除多余的修飾,突出重點,很好地突顯了設計理念履肃。

深度

:視覺的層次和生動的交互動作會賦予UI新的活力,不但幫助用戶更好理解新UI的操作并讓用戶在使用過程中感到驚喜坐桩。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

無論你是重新設計一個現有的應用或是重新開發(fā)一個尺棋,請嘗試下列方法:

首先,去除了UI元素讓應用的核心功能呈現得更加直接并強調其相關性绵跷。

其次膘螟,直接使用iOS的系統(tǒng)主題讓其成為應用的UI,這樣能給用戶統(tǒng)一的視覺感受抖坪。

最后萍鲸,保證你設計的UI可以適應各種設備和不同操作模式,這樣用戶可以在不同場景下舒適地享用你的應用擦俐。

在整個設計過程中脊阴,時刻準備著推翻先例,假設問題蚯瞧,并以重點內容和功能(為目標)來驅動每個細節(jié)設計嘿期。

1.1.1 以內容為核心(Defer to Content)

雖然明快美觀的UI和流暢的動態(tài)效果是iOS體驗的亮點,但內容始終是iOS的核心埋合。這里有一些方法备徐,以確保你的設計能夠提升你的應用功能體驗并關注內容本身。

充分利用整個屏幕甚颂。天氣應用是最好的例子:漂亮的天氣圖片充滿全屏蜜猾,呈現用戶所在地當前天氣情況這最重要的信息秀菱,同時也留出空間呈現了每個時段的氣溫數據。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

盡量減少視覺修飾和擬物化設計的使用蹭睡。UI面板衍菱、漸變和陰影有時會讓UI元素顯得很厚重,致使搶了內容的風頭肩豁。應該以內容為核心脊串,讓UI成為內容的支撐。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

嘗試使用半透明底板清钥。半透明的控件——比如控制中心——關聯了使用場景琼锋,幫助用戶看到更多可用的內容,并可以起到短暫的提示作用祟昭。在iOS中缕坎,透明的控件只讓它遮擋住的地方變得模糊——看上去像蒙著一層米紙一樣——它并沒有遮擋屏幕剩余的部分。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

1.1.2 保證清晰度(Provide Clarity)

保證清晰度是另一個方法从橘,以確保你的應用中內容始終是核心念赶。以下是幾種方法,讓最重要的內容和功能清晰恰力,易于交互叉谜。

使用大量留白。留白讓重要內容和功能顯得更加醒目踩萎。此外停局,留白可以傳達一種平靜和安寧的視覺感受,它可以使一個應用看起來更加聚焦和高效香府。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

讓顏色簡化UI董栽。一個主題色——比如在記事本中使用的黃色——讓重要區(qū)域更加醒目并巧妙地表示交互性。這同時也給了一個應用一個統(tǒng)一的視覺主題企孩。內置應用使用家族化的系統(tǒng)顏色锭碳,無論在深色和淺色背景上看起來都干凈,純粹勿璃。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

通過使用系統(tǒng)字體確保易讀性擒抛。iOS的系統(tǒng)字體自動調整行間距和行的高度,使閱讀時文本清晰易讀补疑,無論何種大小的字號都表現良好歧沪。無論你是使用系統(tǒng)或是自定義字體,務必使用動態(tài)型莲组,這樣你的應用可以在用戶選擇不同字號時做出應對诊胞。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

使用無邊框的按鈕。默認情況下锹杈,所有bar上的按鈕都是無邊框的撵孤。在內容區(qū)域迈着,無邊框按鈕以文案、顏色以及操作指引標題來表明按鈕功能邪码。當按鈕被激活時寥假,該按鈕呈現高亮的淺色狀態(tài)來作為操作響應。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

1.1.3 用深度來體現層次(Use Depth to Communicate)

iOS經常在不同的層級上展現內容霞扬,用以表達分組和位置,并幫助用戶了解在屏幕上的對象之間的關系枫振。

通過使用一個在主屏幕上方的半透明背景浮層來區(qū)分文件夾和其余部分的內容喻圃。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

備忘錄以不同的層級展示,如插圖所示粪滤。用戶在使用備忘錄里的某個條目時斧拍,其他的條目被收起在屏幕下方(譯者按:其實這個視覺提示使用起來很隱晦)。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

日歷有較深的層級杖小,當他們在翻閱年肆汹、月、日的時候予权,以及增強的交互動畫給用戶一種層級縱深感(循序切換的層次昂勉,從年到月到日)。在滾動年份視圖時扫腺,用戶可以即時看到今天的日期以及其他日歷任務岗照。當用戶處于月份視圖時,點擊年份視圖按鈕笆环,月份會縮小至年份視圖中的所處位置攒至。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

今天的日期依然處于高亮狀態(tài),年份出現在返回按鈕處躁劣,這樣用戶可以清楚地知道他們在哪兒迫吐,他們從哪里進來并且知道如何返回。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

類似的過渡動畫出現在用戶選擇一個日期時:月份視圖從所選位置分開账忘,將當前的周日期推向屏幕頂端并翻轉出以小時為單位的當天時間視圖志膀。這些動畫加強了日歷上年月日之間的關系的感知度。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

1.2 iOS應用解析(iOS App Anatomy)

幾乎所有的iOS 應用都應用了UIKit framework中定義的組件闪萄。了解這些組件的名字梧却,作用和構成能夠幫助你設計應用過程中做出更好的決定。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

UIKit提供的UI組件大致分成以下4種大類:

Bars包含了導航信息败去,告訴用戶他們所在的位置并包含了一些能幫助用戶瀏覽或啟動某些操作的控制按鈕放航。

內容視圖:包含了應用的主體內容以及某些操作行為,比如滾動圆裕、插入广鳍、刪除荆几、排序等等。

控制按鈕:展示信息或者控制動作赊时。

臨時視圖:短時間出現吨铸,給用戶重要信息或者額外的選擇或者其他功能。

除了定義UI組件祖秒,UIKit也定義對象實現的功能诞吱,例如手勢識別、繪圖竭缝、輔助功能和打印支持房维。

從編程的角度來說,UI組件被認為是不同類別的視圖抬纸,因為他們從UIView得到繼承咙俩。視圖能繪制屏幕內容并且知道用戶何時觸摸了屏幕。視圖的所有類型有:控件(比如按鈕和滑塊)湿故,內容視圖(比如集合視圖和表格視圖)阿趁,以及臨時視圖(如警告提示和動作菜單)。

要在應用中管理一組或者一系列的視圖坛猪,通常需要使用一個視圖控制器脖阵,它能協(xié)調視圖的顯示內容独撇,實現與用戶交互的功能并能在不同屏幕內容之間切換。比如刁标,“設置”使用了一個導航控制器來展示其視圖層級。

下面是一個例子,關于視圖與視圖控制器如何結合并呈現iOS 應用的UI熏版。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

雖然開發(fā)者認為真正起到作用的是視圖和視圖控制器满钟,但一般用戶感知到的iOS應用是不同屏幕內容的集合尊惰。從這個角度來看膀捷,在應用里壶笼,屏幕內容一般對應于一個獨特的視覺狀態(tài)或者模式氓英。

注:一個iOS應用程序包含一個窗口吹害。但是,不同于計算機程序中的窗口虚青,iOS窗口沒有可見的部分并且不能在屏幕上被移動到另一個位置它呀。很多iOS應用程序只有一個窗口;可以支持外部顯示設備器的應用程序可以有不止一個窗口棒厘。

iOS Human Interface Guidelines中纵穿,screen這個詞和大部分用戶理解的一樣。作為一個開發(fā)者奢人,你也許需要讀一下其他與UIscreen相關的章節(jié)谓媒,這樣你可以更好的了解如何關聯外部屏幕。

1.3 適應性和布局(Adaptivity and Layout)

1.3.1 為自適應而開發(fā)(Build In Adaptivity)

人們通常想隨心所欲地使用自己喜歡的應用程序何乎。在iOS 8及未來的版本中句惯,你可以使用不同分辨率和自動布局來幫助你定義屏幕布局視圖,視圖控制器以及需要隨顯示環(huán)境改變的視圖(顯示環(huán)境display environment的概念指的是設備的整個屏幕或者其中一部分支救,比如一個跳出菜單區(qū)域或一個分視圖控制器的主視圖部分)抢野。

iOS定義了兩個尺寸類別(size class),常規(guī)的(regular)和壓縮的(compact)各墨。常規(guī)尺寸有著較易拓展的空間蒙保,而壓縮尺寸約束了空間的使用。想要定義一種顯示環(huán)境欲主,你需要定義橫縱尺寸類型邓厕。如你所想,iOS設備可以有橫屏豎屏兩種不同的使用模式扁瓢。

iOS能隨著顯示環(huán)境和尺寸類別變化而自動生成不同布局详恼。舉個例子,當垂直尺寸從壓縮變?yōu)槌R?guī)時引几,導航欄和工具欄會自動變高昧互。

當你靠尺寸類別來驅動布局變化時挽铁,你的應用在任何顯示環(huán)境時都能顯示得很好。關于如何在Interface Builder中更好的使用尺寸類別敞掘,你可以查閱Size Classes Design Help叽掘。

注:在一種尺寸類別中,持續(xù)使用Auto Layout進行小的布局調整玖雁,比如拉伸或壓縮內容更扁。

下面的實例可以幫助你理解尺寸類型是如何適配不同設備的顯示環(huán)境。例如:iPad在長寬和橫屏豎屏時都使用常規(guī)尺寸類型赫冬。換句話說浓镜,iPad顯示環(huán)境一直處于垂直和水平的常規(guī)狀態(tài)。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

iPhone的顯示環(huán)境可根據不同的設備和不同的握持方向而改變劲厌。

豎屏時膛薛,iPhone6 Plus使用的是常規(guī)高度和壓縮寬度類型。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

橫屏時补鼻,iPhone6 Plus使用的是壓縮高度和常規(guī)寬度類型哄啄。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

其他iPhone型號,包括iPhone6使用相同的尺寸類型設置风范。

豎屏時增淹,iPhone 6,iPhone 5 和iPhone 4S使用的是壓縮寬度和常規(guī)高度乌企。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

橫屏時,這些設備在寬高上使用的都是壓縮類成玫。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

1.3.2 在不同環(huán)境提供良好體驗(Provide a Great Experience in Each Environment)

當你使用自適應來開發(fā)UI時加酵,你可以保證UI跟隨顯示環(huán)境變化而適當地響應。遵照這些指南哭当,你可以給用戶良好的設備響應體驗猪腕。

在所有環(huán)境下都保持對主體內容的專注。這是最高優(yōu)先級钦勘。人們使用應用時陋葡,與感興趣的內容發(fā)生互動。當使用環(huán)境變化的同時彻采,改變專注點會讓用戶感覺到迷失方向腐缤,喪失了對應用的控制。

避免布局上不必要的變化肛响。在所有環(huán)境中類似的使用體驗讓人們在旋轉設備或在不同設備上運行你的應用時維持使用模式岭粤。例如,如果你使用一個網格在水平的常規(guī)模式下顯示圖像特笋,你無需在一個列表中展示與壓縮模式下相同信息剃浇,雖然你可能調整了網格的尺寸。

如果你的應用只在一個方向上運行,那么請直接一點虎囚。人們希望在各種握持方式下都可以使用你的應用角塑,能滿足這個期待是最好的。但是淘讥,如果你的應用只在一個方向下運行圃伶,那么以下幾點請務必注意:

避免提示人們旋轉設備的提示UI

出現。

讓應用清晰地運行在支持的方向下适揉,讓用戶明白應該旋轉設備留攒,而不是添加不必要的引導性混亂。

支持同一個方向上的變化嫉嘀。

例如炼邀,如果一個應用只能垂直運行,用戶無論用左手或是右手握持時都能觸及到home鍵剪侮。如果用戶在使用應用時180度旋轉設備拭宁,那最好應用內容也能及時響應并旋轉180度。

如果你的應用將設備方向翻轉視為用戶輸入(的一種指令)瓣俯,那么就按照程序設定的方式來響應設備翻轉杰标。舉個例子,一個游戲讓用戶利用設備翻轉來移動游戲中的部件彩匕,那么這個游戲應用本身(的UI)不能對翻轉屏幕產生響應腔剂。在這種情況下,你必須關聯兩個需要變化的方向驼仪,并且允許人們在這兩個方向切換直到他們開始(了解并執(zhí)行)應用的主體任務掸犬。一旦人們開始執(zhí)行主要任務,那就開始按程序設定的那樣來響應設備的動作吧绪爸。

1.3.3 使用布局來溝通(Use Layout to Communicate)

布局包含的不僅僅是一個應用屏幕上的UI元素外觀湾碎。你的布局,應該告訴用戶什么是最重要的奠货,他們的選擇是什么介褥,以及事物是如何關聯起來的。

提升重要內容或功能递惋,讓用戶容易集中注意在主要任務上柔滔。有幾個比較好的辦法是在屏幕上半部分放置主要內容,以從左到右的習慣萍虽,從靠近左側的屏幕開始廊遍。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

使用視覺化的重量和平衡向用戶展示相關的屏顯重要元素。大型控件吸引眼球贩挣,而比小的控件更容易在出現時被注意到喉前。而且大型控件也更容易被用戶點擊没酣,這讓它們在應用中更加有用——就像電話和時鐘(上面的按鈕)——用戶經常在容易分心的環(huán)境中能(正常)使用它們。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

使用對齊來讓閱讀更舒緩卵迂,讓分組和層次之間更有秩序裕便。對齊讓應用看起來整潔而有序,也讓用戶在專注于屏幕時更有空間见咒,從而專注于重要信息偿衰。不同信息組的縮進與對齊讓它們之間的關聯更清晰,也讓用戶更容易找到某個控件改览。

確保用戶能明白處于默認尺寸的首要內容的含義下翎。例如,用戶無需水平滾動就能看到重要的文本宝当,或不用放大就可以看到主體圖像视事。

準備好改變字體大小。用戶期望大多數應用能有設置字號大小的功能庆揩。為了適應一些文本大小的變化俐东,你也許需要調整布局;想要得到更多文本顯示相關的信息订晌,你可以查閱章節(jié)Text Should Always Be Legible.

盡量避免UI上不一致的表現虏辫。在一般情況下,有著相似功能的控件看起來也應該類似锈拨。用戶常常認為他們看到的不同總有原因砌庄,而且他們傾向于花時間去嘗試(譯者按:因此為了避免用戶做無用的嘗試所以建議類似功能外觀一樣)。

給每個互動的元素充足的空間奕枢,從而讓用戶容易操作這些內容和控件娄昆。常用的點按類控件的大小是44 x 44點(points)。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

1.4 起始與停止(Starting and Stopping)

1.4.1 即時啟動(Start Instantly)

有種說法是用戶往往不會花超過一兩分鐘去審視一個新應用验辞,當你將應用從打開到啟動這段時間壓縮得很短,并且同時在載入過程中呈現一些對用戶有幫助的內容喊衫,你就會激發(fā)用戶的興趣并給所有用戶一個驚喜跌造。

重要:不要在安裝過程結束后告訴用戶需要重啟設備。重啟需要時間并且會讓人覺得你的應用看上去不可靠而且很難使用族购。

如果你的應用有內存使用問題壳贪,或者不重啟就無法流暢運行,你必須聲明這些問題寝杖。關于如何開發(fā)一款性能良好的應用违施,請查閱iOS應用編程指南

盡可能避免使用閃屏或者其他啟動體驗瑟幕。用戶能夠在啟動后立即開始使用應用是最好不過的磕蒲。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

避免讓用戶做過多設置留潦。而應該如此:

聚焦在滿足

80%

的用戶需求上。

這樣主體用戶群就無需設置各種選項辣往,因為你的應用已經默認處于他們想要的狀態(tài)兔院。如果有些功能有少部分用戶想要,換句話說站削,大部分人不需要的話坊萝,就別管它了。

盡可能用其他方式獲取更多(用戶)信息许起。

如果你能得到用戶在內置應用或硬件設置中提供的信息十偶,直接從系統(tǒng)中獲取它們,而不需要再次讓用戶輸入园细。

如果你必須獲取設置信息惦积,在你的應用中直接向用戶詢問,然后盡快保存這些設定

(譯者注:這段講的是權限許可珊肃,如能否訪問照片或者日歷或地理位置信息等等)荣刑。這樣用戶就無需強制跳出應用進入系統(tǒng)設置頁面了。如果用戶需要更改設置伦乔,他們可以在任何時候進入應用的設置選項進行修改厉亏。

盡可能讓用戶晚一些再登錄魔吐。最理想的狀態(tài)是饭耳,用戶在無需登錄的情況下就能盡量多地瀏覽內容并使用部分功能。例如凰兑,App Store應用會在用戶瀏覽商品并確定進行購買時招刹,才要求用戶進行登錄恬试。對于必須登錄才能進行后續(xù)瀏覽和操作的應用,用戶往往會直接放棄疯暑。

如果你的應用必須先登錄后使用训柴,那么你應該在登錄頁面有一些簡短的文字,來描述為什么必須先登錄妇拯,以及這樣做會給用戶帶來什么好處幻馁。

謹慎使用新手引導(介紹應用的功能和如何進行操作)。在考慮新手引導之前越锈,你應該完善你的應用仗嗦,盡可能使應用的功能直觀和易于尋找。有句話說得好甘凭,好的應用不需要新手引導稀拐。如果你確實覺得需要新手引導,那么請參考如下的建議丹弱,設計一個簡潔德撬、有針對性并且不妨礙用戶的新手引導铲咨。

只提供開始使用應用所必需的信息。

好的新手引導應該告訴用戶接下來第一步應該做什么砰逻,或者簡短地演示大部分用戶感興趣的一些功能鸣驱。在能夠瀏覽你的應用之前,如果用戶遇到太多的信息蝠咆,讓用戶記住這些不是當前所必須的內容踊东,他們很可能會覺得你的應用很難用。如果在某些特定場景下確實需要一些引導刚操,那么也應該在用戶進入這個場景之后再進行闸翅。

使用交互動畫來吸引用戶,并讓用戶通過實際上手來學習如何使用菊霜。

對于文字內容的增加應該謹慎坚冀,且僅當增加文字對于提升體驗有益時才這么做。不要指望用戶會閱讀大段的文字鉴逞。例如记某,可以使用動畫而不是文字來描述如何執(zhí)行一個簡單的任務。在引導用戶了解較為復雜的任務時构捡,可以通過一些引導浮層來簡要說明每一個步驟用戶需要做什么液南。盡可能避免展示應用截圖,因為截圖是死的勾徽,用戶可能會混淆截圖和應用的實際界面滑凉。

能夠簡單地取消或者跳過新手引導。

有些用戶看完新手引導之后就不想再看喘帚,有些甚至根本就不想看新手引導畅姊。請記住用戶的選擇,不要強迫用戶每次打開你的應用都要再做一次選擇吹由。

不要太早要求用戶去給你的應用評分若未。過早要求用戶進行評分可能會適得其反。如果你想獲得用戶有價值的反饋和評論倾鲫,在邀請用戶評論之前粗合,請給他們一點時間來使用你的應用,并對你的應用形成印象级乍。例如舌劳,你可以等用戶訪問了一定數量的頁面或完成了一定數量的任務之后帚湘,再邀請他們進行評價玫荣。

一般建議按照屏幕默認的定向方式啟動你的應用。盡管如此大诸,如果你的應用只有一種屏幕方向捅厂,那么就始終以這個方向啟動贯卦,讓用戶在他們自己需要時再改變設備方向。例如焙贷,一個游戲或者媒體觀看應用只在橫屏模式下運行撵割,那么就應該以橫屏模式啟動,即使設備當前處于豎屏模式辙芍。這樣的話啡彬,如果用戶在豎屏模式下打開應用,他們也知道應該把設備轉成橫屏來進行使用故硅。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

注:最好讓橫屏應用支持兩種模式的橫屏庶灿,即home鍵處于左右兩側的狀態(tài)。如果設備當前已經處于橫向狀態(tài)吃衅,那么就按照當前狀態(tài)啟動應用往踢,除非你有充分的理由不這么做。其他情況時徘层,可以考慮按home鍵處于右側的方式啟動應用峻呕。(想要了解更多關于支持不同設備方向的內容,請參閱Respond to Changes in Device Orientation.)

準備一張與應用首頁看上去一樣的閃屏趣效。iOS會在啟動應用時調用這張圖瘦癌,這樣可以讓用戶覺得啟動速度很快,降低對等待時間的感知度英支。具體如何制作閃屏佩憾,請查閱Launch Images。(譯者注:Launch Images章節(jié)處在iOS Human Interface Guidelines的Icon and Image Design部分干花,翻譯將在后續(xù)更新中放出妄帘,煩請各位耐心等候。)

如果可能池凄,不要讓用戶在初次啟動應用時閱讀免責聲明或者確認用戶協(xié)議抡驼。你可以直接在App Store展示這些內容,使用戶在下載前就有所了解肿仑;雖然這個辦法能最大地減少麻煩致盟,但也不是一直可行。如果在某些情況下你必須展示這些內容尤慰,要確保它們與UI保持統(tǒng)一并在產品功能與用戶體驗之間達成平衡馏锡。

在應用重啟后,需要恢復到用戶退出使用時的狀態(tài)伟端,讓他們可以從中斷之處繼續(xù)使用杯道。無需讓用戶記住是如何達到此種退出狀態(tài)的。

1.4.2 時刻準備好停止(Always Be Prepared to Stop)

iOS 應用無需關閉或退出選項责蝠。當用戶切換應用党巾,回到主屏幕或者將設備調至睡眠模式的時候萎庭,其實就是停止了當前應用的使用。

當用戶切換應用時齿拂,iOS的多任務系統(tǒng)會將其放置到后臺并將新應用的UI替換上來驳规。在這種情況下,你必須做到以下幾點:

隨時并盡快保存用戶信息署海,因為在后臺的應用隨時有可能被終止或退出吗购。

當應用停止的時候保存當前狀態(tài),使用戶可以在回到應用時能從中斷之處繼續(xù)使用砸狞。例如巩搏,在使用可滾動的數據列表時,退出后保存列表所在的位置趾代。

有些應用可能需要一直在后臺運行贯底。例如,用戶可能希望能在使用一個應用的同時還能一直聽歌撒强,接著又想用另外一個應用來檢查代辦項或者玩游戲禽捆。關于如何正確處理多任務,請查閱Multitasking飘哨。(譯者注:Multitasking章節(jié)處在iOS Human Interface Guidelines的iOS Technologies部分胚想,翻譯將在后續(xù)更新中放出,煩請各位耐心等候芽隆。)

不要強制讓應用退出浊服。因為這樣會讓用戶誤以為是crash。如果有問題產生胚吁,需要告訴用戶具體狀況以及如何解決牙躺。以下有兩個建議,取決于出現的問題有多嚴重而酌情使用:

如果應用中所有的功能當前都不可用腕扶,那么應該顯示一些內容來解釋當前的情形孽拷,并建議用戶如何進行后續(xù)操作。這部分內容給予了用戶以反饋半抱,使用戶相信你的應用現在沒問題脓恕。同時這也可以穩(wěn)定用戶情緒,讓他們決定是否要采取糾正措施窿侈,繼續(xù)使用應用炼幔,還是切換到另一個應用。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

如果只有部分功能不可用史简,那么只要當用戶使用這些功能時顯示提示即可乃秀。不然的話,用戶就應該能正常使用應用的其他功能。如果你決定使用警告框來進行提示环形,請確保只在用戶嘗試使用不可用的功能時再顯示。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

1.5 導航(Navigation)

除非導航設計的不合理衙傀,不然用戶不應明顯察覺到應用中的導航體驗抬吟。放置導航到一個能夠支撐你的應用結構和目的卻又不過分引起用戶注意的狀態(tài)。

廣義來說统抬,有三種主要類型的導航火本,每種導航都有其適應的應用結構:

分層。

扁平聪建。

內容或經驗驅動钙畔。

在分層應用中,用戶在每個層級中都要選擇其中一項金麸,直到目的層級擎析。如果要切換到另一個層級,用戶必須回退一些層級挥下,或者直接回到初始層級進行再次選擇揍魂。系統(tǒng)的設置和郵件應用在這方面是很好的示范,可以參考他們棚瘟。

document.createElement('video');

http://isux.tencent.com/wp-content/uploads/2014/09/20140922163952373.m4v

在扁平應用中现斋,用戶可以從一個主要分類直接切換到另一個,因為所有的主要分類都可以從主屏直接訪問偎蘸。音樂和App Store是兩個使用扁平結構的好例子庄蹋。

http://isux.tencent.com/wp-content/uploads/2014/09/20140922164218524.m4v

在內容驅動或經驗驅動信息結構的應用中,導航的內容也會根據內容或經驗來進行設計迷雪。例如限书,在閱讀一本電子書時,用戶會一頁接一頁地進行閱讀章咧,也會在目錄中選擇想要閱讀的頁碼跳轉后開始閱讀蔗包。同樣的,在游戲應用中慧邮,導航的作用也非常重要调限。

http://isux.tencent.com/wp-content/uploads/2014/09/20140922164218977.m4v

在某些情況下,在一個應用中結合多種導航類型會有很好的效果误澳。例如耻矮,對于扁平信息結構中某一分類下的內容,用分層導航的方式來顯示可能會更好忆谓。

用戶應該時刻清楚自己當前在應用中所處的位置裆装,以及如何前往他們所想到的頁面。

無論導航類型是否適合你的應用結構,最重要的是用戶訪問內容的路徑應該是合理哨免、可預期和易于尋找的茎活。

UIKit定義了一些標準的UI元素,這些元素即可以構建分層或扁平的導航琢唾,也可以實現以內容為中心的導航载荔,例如電子書或者媒體觀看類應用。游戲或者其他經驗驅動的應用通常需要一些自定義的元素和行為采桃。

使用導航欄(Navigation Bar)幫助用戶輕松訪問分層內容懒熙。導航欄的標題可以顯示用戶當前所處的層級,而后退按鈕可以回到上一層級普办。查看Navigation Bar了解更多工扎。

使用標簽欄(Tab Bar)顯示同類型的內容或功能。標簽欄很適合于扁平信息結構衔蹲,可以讓用戶在分類之間隨意切換肢娘,而不用在意當前所處的位置。查看Tab Bar了解更多舆驶。

在應用中蔬浙,如果每屏顯示的都是同類項或同類頁,可以使用頁面控件(Page Control)贞远。頁面控件的優(yōu)點是可以直觀地告訴用戶共有多少個項目或頁面畴博,以及當前所處的位置。查看Page Control了解更多蓝仲。

一般來說俱病,最好能給用戶到達每一屏的路徑。如果用戶需要袱结,就應該考慮使用臨時視圖亮隙,例如模態(tài)視圖、動作菜單或警告框垢夹。查看Modal View溢吻、Action SheetAlert了解更多。

(譯者注:上文提到的章節(jié)均處在iOS Human Interface Guidelines的第4章果元,翻譯將在后續(xù)更新中放出促王,煩請各位耐心等候。若有需要而晒,亦可先參考先前已翻譯的iOS7 UI Elements章節(jié):蝇狼,。)

UIKit同時還提供了以下相關控件:

分段控件(Segmented Control)倡怎。分段控件讓用戶在一屏內就可以查看到不同分類的內容迅耘,而不需要切換到其他屏幕贱枣。

工具欄(Toolbar)。盡管工具欄看起來和導航欄或標簽欄相似颤专,但是工具欄不具導航作用纽哥。相反,工具欄為用戶提供了可以控制當前屏幕內容的控件栖秕。

1.6 模態(tài)情境(Modal Contexts)

模態(tài)是一個承載某些連貫操作或內容的優(yōu)缺點并存的模式春塌。它可以給用戶提供一種不脫離主任務的方式去完成一個任務或者獲得信息,但是也會臨時性地阻止用戶對應用的其他部分進行交互操作累魔。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

理想情況下,用戶可以與iOS 應用進行一種非線性的交互够滑,所以垦写,盡可能減少應用中的模態(tài)體驗是最好的。通常情況彰触,在以下情形下可以考慮使用模態(tài)情境:

?必須引起用戶關注的時候梯投。

? 一個獨立的任務需要完成或者很明確需要被放棄,為了避免在模棱兩可的狀態(tài)下遺漏用戶信息的時候况毅。

保持模態(tài)任務的簡單分蓖,簡短和高度聚焦。你肯定不希望用戶使用模態(tài)視圖時像使用應用中的一個mini應用一樣尔许。如果子任務過于復雜么鹤,用戶會在進入模態(tài)情境時忽略主要任務。在設計一個涉及視覺層次的模態(tài)任務時特別要考慮這一點味廊,因為用戶有可能迷失并且忘記如何回到之前的操作中去蒸甜。如果一個模態(tài)任務必須包含不同視圖的子任務,確保給用戶一個獨立余佛、清晰的導航路徑柠新,并避免迂回。

始終提供明顯辉巡、安全的途徑退出模態(tài)任務恨憎。確保用戶在退出模態(tài)視圖時可以預期操作的結果。

一個任務需要多層級的模態(tài)視圖時郊楣,確保用戶理解點擊完成按鈕的結果憔恳。點擊一個低層級視圖上的完成按鈕是完成這個視圖中任務的一部分,還是整個任務净蚤?因為存在這種困惑的可能性喇嘱,所以要盡可能避免在下級視圖中添加完成按鈕。

保證提醒對話框的內容都是重要且可操作的塞栅。提醒對話框會打斷用戶的體驗并且要點擊才會消失者铜,所以要讓用戶感到提醒信息是有用的腔丧,打斷是有價值的。

尊重用戶關于接收通知的選擇作烟。用戶會設置接收應用通知的形式愉粤,必須尊重要用戶的喜好設置,否則可能觸怒用戶拿撩,導致其關閉所有的推送通知衣厘。

1.7 交互性和反饋(Interactivity and Feedback)

1.7.1 用戶知道標準手勢(Users Know the Standard Gestures)

用戶使用點擊、拖拽压恒、捏合等手勢與iOS設備進行交互影暴。使用手勢拉近了用戶和設備之間的距離,并且增強了直接操縱感探赫。用戶通常期待手勢在不同應用之間都是通用的型宙。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

除了用戶熟悉的標準手勢,iOS還定義了一些系統(tǒng)范圍內的操作伦吠,例如呼出控制中心或消息中心妆兑。在任意應用下都可以使用這些操作。

不要給標準手勢賦予不同的行為毛仪。除非你的應用是游戲搁嗓,否則重新定義標準手勢會使用戶迷惑,且增加使用難度箱靴。

不要創(chuàng)建和標準手勢功能相似的手勢操作腺逛。用戶已經習慣了標準手勢的行為,沒有必要讓用戶學習達到同樣效果的不同操作衡怀。

可以用復雜手勢作為完成某任務的快捷方式屉来,但不能是唯一觸達方式。最好給用戶提供一些簡單狈癞、直接的方式完成某操作茄靠,即使這種方法需要額外的動作。簡單的手勢能讓用戶集中于當前的體驗和內容蝶桶,而不是交互操作本身慨绳。

除非是游戲,否則避免定義新的手勢真竖。在游戲或其他沉浸式的應用中脐雪,操作手勢也是有趣體驗的一部分。但是在普通應用中恢共,幫助用戶達成目標要比操作本身重要的多战秋,所以最好使用標準手勢,盡量避免讓用戶去發(fā)掘和記憶新的操作讨韭。

在特定的環(huán)境中脂信,可以考慮使用多指操作癣蟋。雖然復雜的操作并不一定適用于所有應用,但對用戶會花大量時間使用的應用來說可以豐富體驗狰闪,例如游戲或創(chuàng)建內容環(huán)境疯搅。但因為非標準手勢可發(fā)現性差,要盡量少用埋泵,并且不要讓這類手勢成為完成任務的唯一方式幔欧。

1.7.2 可交互元素吸引用戶點擊(Interactive Elements Invite Touch)

為了暗示交互性,設計時會使用很多線索丽声,包括顏色礁蔗、位置、上下文雁社、表意明確的圖標和標簽等浴井。并不需要過于修飾元素來向用戶展示可交互性。

一個關鍵的顏色可以給用戶提供很強的視覺指引歧胁,尤其是沒有冗余的其它顏色時滋饲。為了有對比厉碟,使用藍色標記可交互的元素喊巍,并且使用統(tǒng)一的、易識別的視覺風格箍鼓。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

返回按鈕使用多個線索指明其可交互性并傳達其功能:它出現在導航中崭参,顯示了一個指向后方的圖標,使用了關鍵色款咖,顯示了上一級頁面的標題何暮。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

一個圖標或者標題提供了清晰的名稱指引用戶點擊它。例如铐殃,地圖中的標題“立交橋路線”海洼,“定位到這里”,清晰地說明了用戶可做的操作富腊。結合關鍵色坏逢,就可以省去按鈕邊界或其他多余的修飾。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

在內容區(qū)域赘被,有必要給按鈕添加邊界或背景是整。操作條中的按鈕、動作表單和提醒對話框可以不需要邊界民假,因為用戶知道在這種區(qū)域中大多數選項是可交互的浮入。但是在內容區(qū)域,按鈕有必要使用邊界或背景將按鈕從其他內容中區(qū)分出來羊异。例如事秀,系統(tǒng)自帶的音樂彤断、時鐘、照片和App Store應用會在一些特別的場景中使用這種按鈕秽晚。

照片應用中給分享按鈕增加了邊框瓦糟,與其他解釋性文本進行了區(qū)分。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

時鐘應用在秒表和計時頁面中給按鈕增加背景來強調開始和暫停按鈕赴蝇,并且使按鈕在周圍的內容中更容易點擊菩浙。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

App Store應用中使用有邊界的按鈕,將按鈕和整個內容條區(qū)分開來句伶,點擊整條內容查看詳細信息劲蜻,點擊按鈕進行下載安裝。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

1.7.3 反饋有助于理解(Feedback Aids Understanding)

反饋會幫助用戶了解應用當前在做什么考余,發(fā)現接下來可以做什么以及理解動作產生的結果先嬉。UIKit提供了很多反饋。

盡可能將狀態(tài)或其他的反饋信息整合到UI中楚堤。用戶不進行操作或不跳出當前內容就能獲得需要的信息是最好的疫蔓。例如,郵箱應用將當前郵箱的狀態(tài)顯示工具條上身冬,這樣就不會影響當前內容衅胀。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

避免顯示不必要的警告框。警告框是一種很強的反饋機制酥筝,只有在傳遞非常重要也是理論上可行的信息時才需要使用它滚躯。如果用戶常看到很多不是重要信息的警告框嘿歌,他們很快就會忽略所有對話框提醒掸掏。

1.7.4 輸入信息的方式要簡單(Inputting Information Should Be Easy)

不管用戶是點擊控件還是使用鍵盤,輸入信息都會花費時間和精力宙帝。如果發(fā)揮有用的效用前就讓用戶輸入大量信息會減弱用戶繼續(xù)使用的欲望丧凤。

讓用戶更容易地進行選擇。例如步脓,使用選擇器或者表格代替純文本愿待,避免要求用戶打字來提高選擇效率,降低選擇成本沪编。

[ISUX轉譯]iOS 8人機界面指南(一):UI設計基礎

適宜地從iOS中獲取信息呼盆。設備上存儲了大量的用戶信息藕施“了校可以的話渺蒿,不要讓用戶提供你可以輕易找到的信息愕掏,例如聯系人或日歷信息冗美。

提供有用的反饋來平衡用戶的輸入怨酝。付出和回報的概念可以幫助用戶感到進程在被推進您炉。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末驻粟,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子批糟,更是在濱河造成了極大的恐慌格了,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件徽鼎,死亡現場離奇詭異盛末,居然都是意外死亡,警方通過查閱死者的電腦和手機否淤,發(fā)現死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進店門悄但,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人石抡,你說我怎么就攤上這事檐嚣。” “怎么了啰扛?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵嚎京,是天一觀的道長。 經常有香客問我隐解,道長鞍帝,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任厢漩,我火速辦了婚禮膜眠,結果婚禮上岩臣,老公的妹妹穿的比我還像新娘溜嗜。我一直安慰自己,他們只是感情好架谎,可當我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布炸宵。 她就那樣靜靜地躺著,像睡著了一般谷扣。 火紅的嫁衣襯著肌膚如雪土全。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天会涎,我揣著相機與錄音裹匙,去河邊找鬼。 笑死末秃,一個胖子當著我的面吹牛概页,可吹牛的內容都是我干的。 我是一名探鬼主播练慕,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼惰匙,長吁一口氣:“原來是場噩夢啊……” “哼技掏!你這毒婦竟也來了?” 一聲冷哼從身側響起项鬼,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤哑梳,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后绘盟,有當地人在樹林里發(fā)現了一具尸體鸠真,經...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年龄毡,在試婚紗的時候發(fā)現自己被綠了弧哎。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡稚虎,死狀恐怖,靈堂內的尸體忽然破棺而出蠢终,到底是詐尸還是另有隱情序攘,我是刑警寧澤,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布粟按,位于F島的核電站空镜,受9級特大地震影響泽台,放射性物質發(fā)生泄漏。R本人自食惡果不足惜矾缓,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一怀酷、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧嗜闻,春花似錦蜕依、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至翠肘,卻和暖如春檐束,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背束倍。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工被丧, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人绪妹。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓甥桂,卻偏偏與公主長得像,于是被迫代替她去往敵國和親喂急。 傳聞我的和親對象是個殘疾皇子格嘁,可洞房花燭夜當晚...
    茶點故事閱讀 44,779評論 2 354

推薦閱讀更多精彩內容