[中文]iOS7人機界面指南-UI基礎[轉]

上網搜索了很多有關iOS7的設計指南,發現好多牛人已經轉譯成了中文。對比了一下,覺得@李林 的翻譯相對豐滿很多,只是分了13個段落,我把他們串一下,已做收藏存檔。原文目錄如下,有興趣的同學可以去拜讀一下。

  • 為iOS7而設計
  • iOS應用解析
  • 啟動與退出
  • 布局
  • 導航
  • 模態情境
  • 交互性與反饋
  • 術語和修辭
  • 動畫
  • 文字排版與配色
  • 圖標與圖形
  • 品牌
  • 與iOS的系統整合

(註:這個不是完整的界面指南,而是界面指南中UI基礎的部分,所以其他部分的目錄我省去了)

  • 為iOS7而設計

iOS7涵蓋了以下3個方面的設計主題思想:

  • 依從:UI要幫助用戶對內容進行理解和互動,但絕不能與內容產生競爭關係。
  • 清晰:任何字型大小的文字都要清楚易讀,圖標要精細且含義明確,裝飾性元素要少而精,且使用得當;聚焦於功能性的實現,並以此激發設計的進行。
  • 縱深:視覺外觀的層次以及逼真的動畫效果可以傳達出界面的活力,使界面更容易被理解,並提升用戶的愉悅度。

天氣應用,左圖為iOS7,右圖為iOS6。

無論你是在重新設計一款已有應用,還是在創建新產品,請考慮按照蘋果官方重新設計內置應用的方式來進行你的工作:

  • 首先,剝離所有的UI元素,使應用的核心功能呈現出來,並重新確認它們的相關性。
  • 然後,使用iOS7的設計主題去重新構建UI與用戶體驗。
  • 自始至終,要做好挑戰傳統慣例、質疑各種臆測的準備;將注意力聚焦在內容和功能上,以此來推動每一個設計決策的制定。

依從於內容

雖然明快而漂亮的UI以及流暢的動畫效果是iOS7當中的體驗亮點,但內容才是其真正的核心。

下面這些方法將確保你的設計能夠提升界面的功能性,並使其更好的依從於內容。

充分利用全屏空間

斟酌嵌入式結構及可視化的界面框架的用法,考慮能否將內容直接擴展至屏幕邊緣。天氣應用就是個很好的例子:通過漂亮的全屏方式呈現當前的天氣情況,用戶能夠立即發現最重要的信息,而且每小時的氣象數據也有充分的空間得以展示。

慎用擬物化的視覺元素

浮雕效果、漸變、陰影,這類視覺表現形式有時會使UI元素過於沉重,進而在視覺上喧賓奪主,壓倒內容。要聚焦於內容,讓UI扮演輔助支援型的角色。

讓半透明的視覺元素透露其背後的內容

半透明的視覺形式可以體現出當前操作對象周圍的環境背景,使用戶知道有更多的內容可用。

提供清晰的視覺效果

提供清晰的視效,這是確保使內容處於核心地位的又一種方式。下面這些方法可以使最重要的內容及功能清晰易讀、便於操作。

充分運用留白

留白可以使重要的內容及功能更加突出。同時,留白還可以傳達出一種平靜和穩定的感覺,使應用看上去更加專註和高效。

通過色彩簡化UI

一種關鍵的顏色——例如備忘錄應用中的黃色——可以突出重要信息,並巧妙的暗示出元素的可交互性。同時,它也可以為應用帶來具有一致性的視覺主題。

使用系統字體,確保清晰易讀

iOS7中的系統字體可以自動調整字間距及行高,使文字內容更加易讀,在用戶所選擇的任何字型大小下都表現良好。

擁抱無邊框的按鈕

與以往依靠浮雕效果暗示元素可交互性的方式不同,在iOS7中,我們可以選取含義準確的標題文字,搭配一種關鍵色或系統色,來表達這是一個可交互的UI元素。新的通訊錄應用使用了系統提供的藍色來告訴用戶,屏幕上的多數內容是可以對交互動作做出響應的。

利用縱深進行溝通

iOS7會在不同的層面上顯示內容,以體現內容間的層級和位置關係,這有利於用戶理解屏幕上各種元素之間的關聯。

文件夾在視覺表現形式上採用了半透明背景,並懸浮於主屏幕之上,這能使其中所包含的內容與屏幕上的其他元素得以區分開來。

當用戶在使用提醒事項應用中的某個條目時,其餘的條目都會排列在界面底部的不同層面上。要查看所有條目,用戶需要展開這些層面,如下圖所示。

新的日曆應用當中使用了增強的動畫過渡效果,可以在用戶切換年、月、日視圖模式時帶來到明顯的縱深感。在下圖所示的年份滾動視圖中,用戶可以立刻看到今天的日期,並能夠執行其他的相關操作。

當用戶選擇了某個月份後,年份視圖會自動放大擴展,而月份視圖則會從它的後面呈現出來。

類似的動畫效果還會發生在月份與日期的切換當中:月份視圖向外擴展,呈現出日期視圖。

  • iOS應用解析

幾乎所有的iOS應用都會用到一些由UIKit框架所定義的UI控制項。對這些基本控制項的名稱、角色和作用加以了解,你將能更好的在打造界面的過程中做出正確合理的設計決策。

UIKit框架提供的UI元素可以分為4大類:

  • 欄(Bars):包含與上下文內容情境相關的信息,告訴用戶他們在應用當中所處的位置;同時還包含相關的導航功能,或是可以由用戶發起的操作。
  • 內容視圖(Content views):包含當前應用所特有的內容,並支持相關的交互行為,例如滾屏、插入、刪除、對列表條目進行重新排序,等等。
  • 控制元素(Controls):產生行為或顯示信息。
  • 臨時視圖(Temporary views):臨時性的向用戶呈現重要信息,或提供額外的功能及選項。

除了定義UI元素以外,UIKit框架還定義了那些可以完成諸如手勢識別、繪製、輔助支持、列印支持等功能的對象。

從編程的角度來講,UI元素可以被看做是不同類型的視圖(views),因為它們都繼承自UIView類。一個視圖知道怎樣將它自己輸出到屏幕上,知道怎樣捕獲用戶在它的範圍內執行的點擊行為。

要在應用中管理一組或一系列具有繼承關係的視圖,你通常需要使用視圖控制器(view controller)。視圖控制器可以協調不同視圖的顯示方式,在用戶發起行為後執行相應的功能,並且對界面切換時所需的動畫過渡效果進行管理。

下圖展示了視圖和視圖控制器是怎樣協同工作來呈現iOS應用界面的:

雖然開發者們習慣於從視圖和控制器的角度來思考問題,但用戶只會將應用看做是由一個個界面所組成的整體。從這個角度講,每一「屏」都對應著應用中的一個明確的視覺狀態或模式。

注意:每個iOS應用都包含一個窗口(window)。與桌面應用中的概念有所不同,iOS中的窗口沒有真正的可視部分,而且不能從屏幕上的一個地方移動到另外一個地方。多數iOS應用只有一個窗口;那些支持外接顯示設備的應用會有多個窗口。

iOS界面設計規範當中會用到「屏(screen)」這個詞,因為它能被多數用戶所理解。作為開發者,你可能還會在其他不同的上下文當中讀到「屏」的概念,例如被用來指代UIScreen對象(用於訪問外界顯示設備)。

  • 啟動與退出

即刻啟動

一般情況下,用戶可以在一到兩分鐘內對一款應用做出評估。如果你能利用這段時間迅速地呈現最有用的內容,就能充分激發新用戶的興趣,並且給所有用戶帶來出眾的體驗。

重要:絕不要在用戶安裝好你的應用之後告訴他們需要重啟設備。重啟需要花費時間,而且會讓你的應用看起來非常難用且不可信賴。

如果出於內存使用或其他方面原因,使你的應用確實只有在設備重啟之後才能正常工作,那麼你需要首先解決這類問題。請參考iOS應用開發指南中的「高效地使用內存」。

儘可能地避免使用無意義的啟動畫面(歡迎畫面)或其他類似的啟動體驗。最好讓用戶在啟動你的應用之後可以立刻開始使用。

推薦的模式(左圖)與不推薦的模式(右圖)

應用安裝完成後,不要讓用戶必須進行設置才能使用。取而代之地:

  • 將解決方案聚焦在80%的用戶需求上。這樣,多數用戶不需要進行任何設置就可以開始使用,因為默認參數可以確保應用能夠按照這部分用戶所期望的那樣進行工作。
  • 儘可能地從其他來源獲取信息。如果用戶在iOS內置應用或系統設置當中輸入的信息可以為你所用,那麼就盡量向系統查詢這些信息,不要再讓用戶輸入一遍了。
  • 如果確實需要用戶進行安裝設置,盡量讓他們在你的應用內部進行輸入。然後,儘快儲存這些信息(例如在應用的設置項當中)。這樣,用戶在享受你的應用之前就不需要被迫切換到iOS的設置當中了。如果他們將來需要修改這些信息,可以在任何時候進入應用設置當中進行操作。

儘可能晚些讓用戶登錄。比較理想的狀況是,讓用戶在不登錄的情況下也能在應用當中盡量多的瀏覽內容,並使用部分功能。如果在用戶上手你的產品之前就強迫他們登錄,則會導致啟動流程變得累贅拖沓。

一般來說,要按照默認的屏幕定向方式啟動應用。對於iPhone,豎屏是默認的定向方式,而對於iPad來說,設備當前所處的狀態就是其默認定向方式。如果你的應用只能在橫屏模式下運行,那麼要始終以橫屏狀態啟動,讓用戶在必要的時候自己調轉設備的方向。

最好讓橫屏應用能夠同時支持兩種模式的橫屏,也就是Home按鍵分別在左側和右側的狀況。如果設備當前已經處於橫屏狀態,那麼橫屏應用就應該按照當前的定向方式載入,除非你有充分的理由不這樣做。在其他情況下,可以按照Home按鍵在右側的方式載入橫屏應用。

可以提供一張與應用首屏看上去幾乎一致的啟動圖片,iOS會在應用被打開的同時即刻展現這張圖片,這可以讓用戶覺得你的應用載入起來非常快,降低對等待時間的感知,使真正的內容有相對充裕的時間可以進行載入。可以參考啟動圖片了解相關的實現方法。

如果可能,不要讓用戶在初次載入應用時閱讀免責聲明或必須對用戶協議進行確認。你可以直接在App Store當中展示這些內容,使人們在下載應用之前就能有所了解;不過,雖然這種方式通常能最大限度的減少麻煩的產生,但也不是一直可行的。如果在某些情況下你必須在應用內提供這類內容,那麼要確保這些內容與整體UI保持和諧統一,與產品實際的業務功能帶來的用戶體驗達成平衡。

在應用重啟後,要恢復到用戶退出時的狀態,讓他們可以中斷的地方繼續使用。不要讓用戶必須記住之前是通過怎樣的步驟到達退出時的狀態的。可以參考狀態的維持與重置來了解相關的實現方法。

時刻準備著退出

iOS應用永遠不會有用來執行關閉或退出的操作。用戶退出一個應用的方式就是切換到另外一個應用、回到系統主界面,或是使設備進入睡眠模式。

當人們從你的應用切換到其他地方,iOS的多任務機制就會將它轉至背景當中,並使用其他應用的UI替換掉當前的。為了應對這種情況,你的應用應該具備以下能力:

  • 及時地、儘可能頻繁地保存用戶數據,因為處於背景狀態的應用隨時都可能被終結。
  • 退出時,儘可能在細節層面保存當前狀態,使用戶回到你的應用之後不會失去之前的上下文狀態。例如,如果你的應用包含可滾動的數據列表,那麼在退出時要保存當前的列表位置。

有些應用即使處於背景狀態也需要保持工作,譬如,用戶會希望在查看待辦事項或玩遊戲時讓另外一款應用繼續播放音樂。可以參考多任務來了解怎樣正確而優雅的處理這種情況。

永遠不要以程序化的方式自動退出iOS應用,因為用戶有可能將這種情況誤解為程序崩潰。如果出於某些原因,你的應用無法按照預期正常的工作,你需要告訴用戶當前的狀態,並讓他們了解自己能夠做些什麼。取決於問題的嚴重性,你有兩種選擇:

  • 通過一個能夠吸引用戶注意力的界面描述當前問題,並提出執行建議。使用這樣的界面作為反饋,可以讓用戶了解到應用本身並沒有出現問題。這樣還可以將主動權交還給用戶,讓他們決定執行矯正性的行為並繼續使用應用,或是切換到其他應用。
  • 如果只有一部分功能不可用了,那麼可以在用戶用到這些功能的時候,通過一個單獨的界面或是彈出提示(alert)來告訴他們當前的情況。只在用戶所訪問的功能確實無法工作的時候再使用彈出提示。

  • 布局

布局所關乎的遠不止「界面元素在屏幕上看上去如何」這麼簡單。通過布局,你可以讓用戶知道哪些東西是最重要的,他們有哪些事情可做,內容之間具有怎樣的關聯。取決於設備類型及橫豎屏定向方式,同一款應用的界面布局也可能會有不同的模式。

確保交互元素具有足夠大的尺寸,以便用戶可以很容易的與內容和功能進行互動。可點擊對象的實際點擊區域盡量不小於44*44像素。

將重要的內容和功能放在權重更高的位置上,使用戶的注意力可以更好的聚焦在主要任務上。通常,將最重要的元素放在前半屏是比較好的做法,另外,對於閱讀習慣是從左到右的用戶來說,更貼近屏幕左側的位置也是更容易引起關注的。

利用視覺表現形式的權重和平衡,向用戶展示界面元素之間的相對重要程度。尺寸較大的元素擁有更高的權重,相比於尺寸較小的元素來說,更能吸引目光,看上去也更加重要。

通常情況下,要防止UI元素在外觀上具有不統一的表現形式。儘可能讓具有相似功能的元素同時具有相似的外觀。人們一旦留意到不一致的外觀表現,就很容易假設這背後是有原因的,並傾向於花費時間去搞清楚這種差異究竟代表什麼。

確保界面中的主要內容在默認尺寸下可以被閱讀和理解。不要讓用戶必須橫向滾屏才能看到完整的文字內容,或是必須執行放大操作才可以看清楚內容圖片。

  • 導航

人們在使用應用時,通常不會感知到導航的存在,除非導航帶來的體驗沒有達到他們的預期。而你的工作,就是以符合產品整體架構及目標的方式打造出不會被用戶察覺到的導航機制。

總體上講,導航可以分為三種類型,其中每一類都能很好的適用於一種特定類型的應用:

  • 樹形信息結構的應用
  • 扁平化信息結構的應用
  • 由內容或體驗所驅動的應用

某些情況下,幾種不同風格的導航可以很好的整合在同一款應用當中。例如,扁平化信息結構的應用當中,某個分類里的信息也許可以很好的通過樹形結構來呈現出來。

無論採用哪種風格的導航,最重要的是,要確保用戶在內容當中的行進路徑符合邏輯、可以預知、容易跟隨。用戶應該始終能夠了解自己在應用當中所處的位置,以及怎樣行進到下一個目標位置。

通過UIKit框架當中定義的一些標準UI控制項,你可以很輕鬆的創建樹形導航或扁平化結構的導航。此外,還有一些控制項可以幫你創建以內容為中心的導航模式,例如很多圖書風格或媒體瀏覽方面的應用當中所使用的那樣。而那些圍繞著體驗來打造導航的應用,譬如遊戲,通常都會使用訂製化的UI元素及交互行為模式。

通過導航欄(navigation bar),為用戶提供一種能夠輕鬆的在樹形信息結構當中前後行進的導航方式。導航欄的標題通常用來向用戶展示當前界面在信息結構當中所處的位置,回退按鈕可以幫助用戶回到上一級結構。請參考導航欄一節,了解更多詳情。

通過標籤欄(tab bar)展示整體內容或功能之下的若干個同級分類項。標籤欄可以很好的支持扁平化的信息結構,因為無論用戶當前處於哪個界面,都可以直接在若干類別當中進行切換。請參考標籤欄一節,了解更多詳情。

通過分頁控制項(page control)來暗示多個條目或內容視圖的存在。該控制項可以有效的向用戶展示內容單元的數量,以及當前所見的這一條在隊列中的位置。請參考分頁控制項一節,了解更多詳情。

注意:雖然工具欄(toolbar)在外觀樣式上與導航欄或標籤欄很相似,但它不能用來承載導航方面的功能。要通過工具欄為用戶提供那些針對當前上下文內容的功能操作。

一般來講,最好讓每個界面都有唯一的入口。如果用戶可以在不同的上下文當中訪問到同一個界面,那麼請考慮使用一種臨時化的視圖,例如模態視圖(modal view)、動作表單(action sheet)或是警告提示(alert)。請參考模態視圖、動作表單、警告提示,了解更多詳情。

  • 模態情境

模態,一種用來承載特定內容、功能或體驗的模式,有其自身的優缺點。它可以幫助用戶完成某些任務,或在不受干擾的情況下獲取信息,但會暫時性的強迫用戶停止與應用其他部分的互動。

理想情況下,用戶應該能夠通過非線性的方式與iOS應用進行互動,所以最好儘可能的精簡應用當中的模態體驗。通常,僅在這些情況下考慮創建模態情境:

  • 非常有必要吸引用戶的注意力。
  • 必須完成某些任務,或明確的放棄某項操作,否則用戶數據將進入不穩定的狀態。

保持模態任務的簡單、簡短、易聚焦。不要將模態視圖打造的好像是嵌在應用當中的迷你應用。如果模態視圖中的子任務過於複雜,人們很容易忘記進入模態視圖之前的主任務是什麼。在創建那些包含樹形視圖結構的模態任務時要特別小心,因為這種形式很容易使人們產生迷失感,忘記回退的步驟。如果你的模態任務當中必須包含那些需要通過不同的視圖來呈現的子任務,那麼一定要給用戶提供單一且清晰的信息結構路徑,避免產生循環。請參考模態視圖一節,了解更多詳情。

始終提供一種明顯而安全的退出方式。要確保用戶在退出模態視圖時,能夠對接下來要發生的事情有明確的認知。

如果主任務需要一系列層級化的模態視圖,那麼要確保用戶知道當他們在模態視圖中點擊「完成」按鈕後會發生什麼。檢查任務流程,以確定次級模態視圖當中的「完成」按鈕究竟是用來完成一部分任務的,還是用來完成整個模態任務的。鑒於有可能產生的困惑,盡量避免在次級模態視圖中使用「完成」按鈕。

使用警告框來傳遞那些必不可少的重要信息,通常還要提供可執行的功能選項。警告框會中斷產品的體驗流程,用戶必須執行一次點擊才能將其關閉掉,所以一定要讓用戶了解到這種干擾的出現是有正當理由的。請參考警告框一節,了解更多詳情。

尊重用戶對於是否接收通知信息所做的設定。在iOS的「設置」當中,用戶會設定希望以怎樣的方式接收通知。要確保你的應用能夠遵守這些設定,以防用戶一怒之下關閉掉所有來自你的應用的通知信息。

  • 交互性與反饋

用戶習慣於標準手勢

人們會使用諸如點擊(輕按)、拖拽、開合等手勢與iOS設備及應用進行互動。手勢能夠在人與設備之間建立起更人性化的關聯,增強用戶對於直接操作(direct manipulation)的感知。通常,人們會希望所有應用當中的手勢操作模式都保持一致,例如:

  • 通過點擊(tap)來按壓或選擇一個對象。
  • 通過拖拽(drag)來滾屏或移動對象(將其從界面一邊拖向另一邊)。
  • 通過滑動(flick)來快速滾屏或移動對象。
  • 使用一個手指進行輕掃(swipe),可以展現更多內容,例如列表視圖中的刪除按鈕、分隔視圖(iPad)中的隱藏視圖,或是從界面頂端展開通知中心。另外在iPad中,可以通過四指輕掃的手勢在不同應用之間進行切換。
  • 通過雙擊(double tap)將內容或圖片放大並置於屏幕中央;如果當前內容已呈放大狀態,則將其縮小至默認尺寸。
  • 通過雙指張開(pinch open)閉合(pinch close)對內容進行放大或縮小。
  • 通過長按(Touch and hold)在可編輯或可選擇的文字上顯示放大鏡,用來定位游標。
  • 通過搖晃(shake)機身執行撤銷或重做的操作。

除了人們熟識的那些標準手勢以外,iOS還定義了一些用於在系統全局層面進行操作的手勢,例如展開控制中心或通知中心。無論用戶當前在使用什麼應用,都可以直接通過這些手勢進行系統層面的操作。

不要為標準手勢賦予不同的行為。除非你的應用是遊戲,否則重新定義標準手勢的用途會導致用戶產生迷惑,降低產品的易用性。

不要重複創建與標準手勢具有相同作用的自定義手勢。人們都習慣了標準手勢的行為,他們不會希望花時間學習新的手勢卻只能達到同樣的效果。

可以將複雜的手勢作為完成任務的快捷方式,而不是唯一的方式。儘可能為用戶提供簡單而明顯的方式來完成任務,哪怕需要額外的一兩次點擊。簡單的手勢可以讓用戶將注意力聚焦在內容和體驗上,而不是交互過程本身。

不要定義新的手勢,除非你的應用是遊戲。在遊戲或是其他沉浸型應用當中,自定義手勢可以成為體驗樂趣的一部分。但在那些幫助人們完成重要任務的應用里,最好使用標準手勢,這樣人們就不需要時刻想著操作方式本身了。

對於iPad應用,要考慮使用多指手勢。iPad的大屏幕帶來了廣闊的空間,可以更好的支持多指手勢,也就是同時使用超過一根手指進行的操作。雖然相對複雜的手勢操作並不適用於所有的應用,但對於那些人們會花很長時間來使用的,例如遊戲或需要創建內容的應用來說,多指手勢是可以增強體驗的。另外一定要記住,非標準手勢的可發現性是較差的,不要讓這類手勢成為完成任務的唯一方式。

反饋有助於理解

iOS用戶習慣於接收各種反饋。這些反饋可以幫他們了解應用當前的狀態,發現接下來可以做些什麼,或是預計自己的操作會產生怎樣的結果。UIKit框架所定義的控制項和視圖當中包含了很多類型的反饋。

儘可能將狀態或其他的相關反饋信息整合到UI當中。例如,郵件應用會在工具欄中顯示更新狀態,如下圖所示。

避免不必要的警告提示。警告是一種強力有效的反饋形式,但它只應用於傳達最重要的信息,並提供相關的後續操作選項。如果用戶看慣了不包含重要信息的警告框,他們就會學會忽略這些提示了。請參考警告框一節,了解更多詳情。

信息輸入方式要簡單易行

無論是點擊控制項元素還是使用鍵盤,輸入信息都需要耗費用戶的時間和注意力。如果你的應用在幫助人們解決問題之前需要讓他們進行太多的信息輸入,他們就會感到受挫。

使用選擇讓輸入更輕鬆。例如,你可以在某些地方使用列表視圖或選擇器(picker)來代替文本輸入框,因為對於多數人來說,選擇比打字更容易。

在合適的情況下,從iOS獲取信息。人們會在設備系統中存儲很多信息,不要強迫他們再次輸入那些你能夠在系統中獲取到的信息,例如通訊錄或日曆信息。

給予用戶有價值的反饋,來平衡向他們索取信息的要求。讓用戶了解付出與回報的關係,可以使他們感受到產品的使用流程正在向前推進。

  • 術語和修辭

應用當中所顯示的任何一個辭彙都是你與用戶之間交流對話的一部分。要將這些對話看做是幫助人們提升舒適感的機會。

確保你所使用的術語能夠被用戶理解。基於你對用戶的了解,評估你希望使用的辭彙和短語是否恰當。例如,對於那些相對「簡單」的用戶,技術術語幾乎是沒有用處的,但對於專門面向技術型用戶所設計的應用來說,這樣的辭彙又是非常得當的。

使用非正式的、友善的語氣,但不要過於隨便。希望避免生硬或過於正式是沒錯的,但也不要表現出過分的善於交際或屈尊俯就。要記得,UI當中的辭彙是會被用戶在一次次的使用過程中反覆看到的,一些初次看去顯得很聰明的說法,被反覆讀過之後很可能會給用戶帶來不快。

像報紙編輯一樣思考,留意那些多餘的、非必要的詞語。簡短而直接的文案可以讓用戶理解起來更快更容易。識別出最重要的信息,簡明的表達出來,並通過顯要的視覺形式進行輸出,這樣人們就不需要從一大堆文案當中尋找他們希望找到的信息了。

在交互控制項旁邊使用簡短的標題或含義明確的圖標,使用戶能夠對這些控制項的用途一目了然

在描述日期信息時,一定要做到精確。很多時候,使用「今天」和「明天」這樣更友好的辭彙來表達日期信息是比較得當的,但如果你沒考慮到用戶所處的地理位置,那麼這樣的文案很可能產生迷惑。例如,要考慮到某些事件正好在午夜前。對處於相同時區的用戶來說,事件是發生在「今天」的,但對於那些位於早一個時區的用戶來講,事情則發生在「昨天」。

在App Store中撰寫優秀的產品描述文案,儘可能創造機會與潛在用戶進行溝通。除了準確的描述你的應用,並突出人們可能欣賞的品質之外,還要確保:

  • 更正所有的拼寫、語法和標點當中的錯誤。雖然這類小錯誤不會討擾到每個人,但確實會使產品在一部分用戶心中留下負面印象。
  • 盡量少使用全部大寫字母的詞語。某些時候,全部由大寫字母組成的單詞可以有效的吸引用戶的注意力,但當通篇都是這樣的單詞時,就會變得很難閱讀,好像這些文字正在用戶眼前叫喊一樣。
  • 考慮對特定的bug修正進行描述。如果你的應用在新上線的版本當中包含用戶所期待的bug修正,那麼在描述當中提到這一點將是個好主意。

  • 動畫

漂亮而精緻的動畫效果遍及iOS各處,它們使應用體驗更具動態性,更加吸引人。精細而恰當的動畫效果可以:

  • 傳達狀態。
  • 增強用戶對於直接操作(direct manipulation)的感知。
  • 通過視覺化的方式向用戶呈現操作結果。

要謹慎的使用動畫效果,特別是在非沉浸型應用當中。對於那些聚焦於嚴肅目標或效率型任務的應用來說,過度的、無意義的動畫效果會阻塞任務流程,降低應用性能,分散用戶注意力。

儘可能與iOS內置應用的動畫模式保持一致。人們習慣於內置應用當中各種精妙的動畫效果。實際上,用戶往往會將內置應用當中的動效看作一種體驗的標準,例如切換視圖時的平滑過渡效果,切換橫豎屏時的流暢反饋,或是能表現出各種物理效果的滾屏動畫等等,這些都逐漸成為了人們預期當中的一部分。只有當你在設計一款沉浸型應用,譬如遊戲的時候,才可以重點考慮訂製化的動畫效果。

在你的應用中保持動畫效果的一致性。與其他類型的訂製化設計相仿,如果你要在自己的應用中使用自定義動畫效果,那麼要確保使用方式的一致性,這樣,用戶才能隨著不斷使用你的應用而積累認知。

多數情況下,要在你的自定義動畫效果中力爭實現模擬效果。雖然,人們往往樂於接受表現形式當中破格體現出的藝術性,但當他們體驗到不符合物理規律的運動效果時,仍然會感到怪異與迷惑。

  • 文字排版與配色

文字必須易讀

最首要的是,要確保文字排版的清晰易讀。如果用戶根本看不清界面當中的文案,那麼文字本身再漂亮也沒有意義。iOS7當中的動態文字(Dynamic Type)可以實現:

  • 在每種字型大小下都能自動調整文字的粗細、字間距和行高。
  • 針對在語義上有所區別的文本模塊,例如Body、Footnote或Headline1等,可以自動指定不同的文字樣式風格。
  • 文字可以根據用戶在動態文字及可訪問性設置當中指定的字型大小來自動的調整。

通常,應用全局應該只使用一種字體,包括它的幾種不同風格樣式。多種字體的混合使用會使你的應用看上去凌亂而草率。使用UIFont中的樣式API,根據不同的語義用途,例如正文或標題,來定義不同文本區域的樣式。

色彩可以增進溝通

考慮定義一種基本色。iOS7的內置應用有著各自的基本色,例如備忘錄中的黃色,用來表達元素的交互性及狀態。

色彩是具有溝通能力的,但不總是以你所希望的方式來實現。對於同一種色彩,每個人的感知都是有所區別的,另外在不同的文化當中,顏色被賦予的含義也有所不同。盡量花些時間來研究其他國家和文化群體是怎樣理解你所用到的配色的。要盡最大努力確保你應用當中的色彩可以準確的傳達信息。

多數情況下,不要讓用戶因為色彩而分神。除非色彩本身就是你應用的根本價值和目的所在,否則它們只應被用來在細節之中增強交互體驗。

  • 圖標與圖形

應用圖標

每個應用都需要一個漂亮的圖標。很多時候,人們都會根據應用圖標來預判一款應用的質量、用途和可信賴性。

當你開始構思應用圖標的時候,應該將以下幾點牢記在心。另外,當你著手創建圖標的時候,可以參考應用圖標一節來了解更多的規則和指導。

  • 應用圖標是產品品牌的重要組成部分。要將圖標的設計看做是向用戶講述產品故事並與他們建立情感關聯的重要機遇。
  • 最好的應用圖標都是獨特、簡潔和吸引人的。
  • 應用圖標在不同的尺寸規格下都應該表現良好,並且能夠適應各種背景。另外需要注意的是,某些在大尺寸圖標中可以增強視覺效果的元素,一旦縮小,有可能會使小號圖標看上去非常髒亂。

其他圖標

iOS提供了很多小圖標,用來在標籤欄、工具欄和導航欄當中代表那些最常見的任務或內容類型。要儘可能多的使用這些預設圖標,因為用戶已經很清楚它們的含義了。

當然,你可以在需要表現自定義行為或內容類型的時候使用訂製化的圖標。這些小巧而具有現代感的圖標,在設計方式上與應用圖標有很大的區別;可以參考欄按鈕圖標一節來了解更多。

圖形

iOS應用往往包含有豐富的圖形元素。無論是顯示用戶照片還是訂製化的插圖,以下這些原則都是需要遵守的:

支持Retina屏幕。確保為所有的圖形元素提供Retina所需的@2x規格支持。

按照原始的長寬比例顯示照片和圖形,另外放大比率不要超過100%。你不會希望自己應用當中的圖形元素看上去歪扭失真。此外,要讓用戶可以根據自己的需要對圖片進行縮放。

不要在你的設計當中使用那些代表蘋果公司產品的圖形。這些圖形的使用會涉及到版權問題,而且產品設計本身是經常會發生變化的。

  • 品牌

品牌,不僅是在應用中呈現品牌的配色或logo這麼簡單。最理想的情況是,經由創造獨特的外觀和感覺,為用戶帶來印象深刻的優質體驗,從而打造出你的應用所特有的品牌。

當你需要在應用中明確的向用戶展示品牌信息的時候,要記住以下兩點:

  • 將品牌元素中的色彩或圖形進行必要的精鍊,通過一種非侵入式的方式整合到應用當中。人們用你的應用,是為了完成某種任務或得到娛樂消遣,沒人希望被迫去看廣告。為了不影響整體體驗,你需要安靜的展示自己產品的品牌識別元素。在iOS7當中,你可以很輕鬆的定義一種和品牌相關的基本色,來表達元素的交互性和狀態。
  • 不要從用戶所關注的內容當中擠兌空間來展示品牌信息。例如在導航欄底部增加一個固定的信息條,只用作展示品牌信息,這樣就會平白減少內容的顯示空間;試著考慮其他非侵入式的方式,例如訂製化的背景圖片等等。

重要:應用圖標是個例外,它應該完全聚焦在品牌識別性上。因為用戶會很頻繁的看到你的圖標,所以要多花些時間在圖標的設計上面,增強其對於用戶目光的可識別性,這是很重要的。

  • 與iOS的系統整合

使用標準UI元素

儘可能使用UIKit框架定義的各種標準UI元素。使用標準UI控制項而非自定義元素,你和你的用戶都會受益:

  • 如果iOS本身經過重新設計,那麼標準的UI元素在系統更新時可以隨之自動更新,而自定義的UI元素不會。
  • 人們會立刻了解怎樣使用你的應用,因為他們已經習慣於標準的UI元素。

為了充分發揮系統標準UI元素的價值,你必須:

在使用任何一個標準UI元素的時候都要依照設計規範的指導。當一個UI元素無論看上去還是用起來都符合用戶的期待時,他們就可以依靠已有的經驗來更快更容易的使用你的應用了。你可以在UI元素一章中找到各類UI元素的規範。

通常,不要為標準的交互行為創建自定義UI控制項。首先問問自己,為什麼要創建一個行為方式與標準UI控制項完全相同的自定義控制項?如果你只是想要一種訂製化的外觀,可以考慮通過UIKit框架當中用來訂製外觀的API來改變標準UI元素的樣式,或是改變元素的配色風格。如果你想得到的行為與標準控制項的行為有些許區別,那麼首先要確認能否通過屬性的調整來使標準元素完成同樣的目標。如果你需要的是徹頭徹尾的訂製化交互行為,那麼在設計自定義控制項的時候,要確保它看上去不會與標準控制項相似。

技巧:Interface Builder可以幫你很輕鬆的創建標準UI元素、使用訂製外觀的API、設置外觀屬性、向控制項中添加系統預設或自定義圖標等等。可以參考Xcode用戶指南了解更多詳情。

不要為系統預設的按鈕和圖標賦予其他的含義。iOS提供了很多按鈕與圖標,你要讀懂相關的文檔,了解這些按鈕與圖標在語義上的含義,不要單純依靠自己對它們外觀的理解。如果你發現預設的按鈕或圖標無法準確的代表你想要表達的功能含義,那麼可以自己創建。你可以在欄按鈕圖標一節當中找到相關規範,幫你更好的設計自定義圖標。

如果你的應用可以帶來沉浸型的體驗,那麼打造完全自定義的控制項是合理的做法。因為你在創建一種獨特的體驗環境,對於用戶來說,探索與該環境進行互動的方式也是他們所期待的體驗之一。

對橫豎屏切換的響應

人們通常會希望能夠在任何定向方式下使用iOS設備,所以最好讓你的應用可以在這些情況下做出恰當的響應。

讓用戶在橫豎屏狀態下都能聚焦於最重要的內容。這個目標具有最高優先順序。人們需要在應用當中查看他們所關注的內容,並與之交互;如果橫豎屏切換會使用戶失掉焦點,他們便會感到迷失,並覺得喪失了對應用的控制權。

通常,要讓應用能夠運行在各種定向模式當中。人們可能會期望在任何定向方式下使用你的應用,能滿足他們的期望是最好的。特別是iPad用戶,他們會希望你的應用能夠運行在他們當前所使用的任何持機方式下。當然,有些應用確實只能運行在豎屏或橫屏當中;如果你的應用是這樣,那麼你應該參考以下幾點原則:

  • 應用在啟動時只按照默認支持的定向方式進行載入,忽略當前設備的屏幕方向。如果一款遊戲或媒體瀏覽類型的應用只能運行在橫屏下,那麼就直接以橫屏模式啟動,即使設備本身是處於豎屏狀態的;這種時候人們會明白需要調轉屏幕才能正常瀏覽內容。
  • 避免在界面中通過UI元素提示人們調轉設備屏幕。直接按照默認支持的定向方式啟動應用,這就已經清楚的告訴用戶需要旋轉設備了,不需要再增加多餘的UI元素進行引導。
  • 同時支持兩種子狀態。譬如,如果你的應用只能運行在橫屏當中,那麼無論當前橫屏的方式是Home鍵在左手邊還是右手邊,人們都可以正常使用;如果人們在使用過程中將設備調轉180度,那麼應用最好也可以進行響應,自動調轉180度。

如果對於你的應用來說,調轉屏幕方向是用戶輸入方式的一部分,那麼你可以通過特定的方式進行訂製化的處理。例如,在一款遊戲當中,人們需要通過旋轉屏幕來產生相應的行為,那麼遊戲本身就不可以再響應橫豎屏切換的規則了。這種情況下,你可以允許用戶在進入主線流程之前仍然能夠切換子狀態(Home鍵在左手邊或右手邊),而一旦進入主線流程,那麼旋轉屏幕就只能用來觸發遊戲當中的特定行為。

在iPhone上,判斷用戶在調轉屏幕方向時的需求所在,並進行響應。人們從豎屏切換到橫屏時,通常是因為想要「看到更多」。如果你只是簡單的將內容尺寸放大,那麼未必能滿足用戶的期望。試著調整每一行文字顯示的字數,如果需要,甚至是重新調整UI布局,使其能夠呈現更多的內容。

在iPad上,盡量支持所有的定向方式,滿足用戶的期望。由於iPad自身屏幕規格較大,所以上一條中提到的「用戶旋轉屏幕以便看到更多」的需求是相對較弱的。相比於iPhone,人們不太關注於iPad的設備框架限制,以及Home鍵的位置,所以在很多時候,人們不會將iPad看做一種有默認定向方式的設備。如果可以,盡量讓人們在任何持機狀態下都能在iPad中與你的應用進行互動。

在為iPad應用設計橫豎屏響應規則的時候,遵守以下幾點規範:

  • 考慮改變輔助信息或功能的展示方式。雖然你必須確保重要內容始終能夠獲取用戶注意力的焦點,但對於次要信息或功能,可以考慮隨著橫豎屏切換而改變呈現方式。以iPad內置的郵件應用為例,賬戶和郵箱列表就屬於次要信息(當前選中郵件的詳情是主要內容)。在橫屏時,次要信息被放置在左側面板中,而豎屏時,則是呈現在彈出面板里的。對於某些遊戲,在橫屏狀態時的界面邊界到了豎屏當中也許需要進行重繪,這就有可能導致邊界上下留出額外的空餘空間。這種情況下,可以考慮在這些空餘空間當中展示一些遊戲輔助信息或對象。
  • 避免無意義的布局變化。盡量在所有定向方式下都提供具有一致性的體驗。具有相似性的體驗可以讓用戶通過已經掌握的使用模式在橫豎屏當中輕鬆操作。如果你的iPad應用會在橫屏時以網格的形式展示圖片,那麼在豎屏時,就沒有必要一定更改為列表形式。
  • 如果可能,在切換橫豎屏時盡量避免對信息內容樣式的重新定義。盡量保持內容具有相似的格式樣式,特別是對於文字內容來說,不要讓用戶因為切換橫豎屏所導致的版式變化而無法找到之前閱讀到的地方。如果有些內容樣式必須發生變化,那麼要通過動畫過渡效果來幫助人們更好的跟隨這些變化。例如,當橫豎屏切換時,內容當中必須增加或減少一行文字,那麼可以考慮在增加和減少的過程里使用漸入和淡出的動畫效果。為了讓自己設計出更好的橫豎屏切換方案,可以想像一下,如果你是在現實世界當中與這些內容進行物理性的互動,那麼它們有可能表現出怎樣的行為規律。
  • 為橫豎屏各提供一張單獨的啟動圖片。這樣,無論人們在那種持機方式下打開應用,都可以感受到平滑的啟動體驗。與iPhone當中的系統首屏不同,iPad的系統首屏是支持橫豎屏切換的,人們有可能在任何方式下退出前面一個應用,並繼續打開你的應用。

弱化文件和文檔的處理過程

iOS可以幫助人們創建和管理文件,但這不意味著人們在使用iOS設備時必須思考文件系統方面的問題。

在iOS當中,不存在類似OS X系統中的Finder這樣的應用,用戶也不應該被要求與文件直接打交道,特別是不該去面對任何會讓他們聯想到文件源數據或存儲位置一類信息的東西,例如:

  • 確認打開或保存文件的對話框。
  • 關於文件訪問許可權的信息。

盡量讓人們在不需要打開桌面端iTunes的情況下管理各種文檔。考慮使用iCloud來幫助用戶訪問他們在不同設備上的內容。要為用戶提供更好的iCould體驗,可以參考iCould一節。

如果你的應用提供創建及編輯文檔的功能,那麼可以嘗試提供某種「文檔選擇器」,幫助用戶打開已有文檔或創建新文檔。理想情況下,這樣的文檔選擇器應該:

  • 具有高度的圖形化外觀。讓人們可以輕鬆的通過圖形化的界面外觀來識別出他們想要的文檔。
  • 讓人們使用最少量的手勢來完成目標操作。例如,通過封面流或網格的形式組織文檔,讓用戶通過滑動手勢進行瀏覽,並通過點擊來打開。
  • 提供新建文檔的功能。不要讓用戶必須到其他地方創建新文檔,而是直接在文檔選擇器當中點擊文檔圖形上的某種默認占點陣圖片來直接創建。

提示:你可以使用Quick Look預覽功能讓用戶在你的應用中對文檔進行預覽,即使你的應用並不支持這類文檔的打開操作。參考Quick Look一節了解更多。

給用戶一種安全感,讓他們知道自己的工作成果始終會被保存,除非他們主動取消保存或進行刪除。如果你的應用提供創建及編輯文檔的功能,要確保這些數據無需用戶手動執行也可以得到保存。iOS應用應該承擔起幫助用戶保存輸入內容的責任,無論是他們在當前文檔仍然處於打開狀態的時候去查看另外一個文檔還是切換到其他應用。

不過,如果你的應用的主要功能並不是創造內容,但你需要讓人們可以在查看信息與編輯信息在兩種模式間進行切換,那麼在這種情況下你可以提醒用戶對信息變更進行保存。通常,可以在查看信息的視圖界面中提供「編輯」按鈕,當用戶點擊了這個按鈕之後,就會進入編輯狀態,同時原來的「編輯」按鈕變為「保存」和「取消」這兩個按鈕。這種變化可以提醒人們,他們現在正處於編輯模式,可能需要執行保存操作,而「取消」按鈕則為他們提供了在不保存變更的情況下直接退出編輯模式的出口。

必要的時候提供設置方式

有些應用可能需要向用戶提供安裝或設置選項,不過多數應用是不需要的,或是可以推遲必須進行設置的環節。成功的應用可以讓多數用戶立刻上手使用,而且會在UI當中提供一些可以調整體驗模式的方法。

盡量避免將用戶打發到系統的「設置」當中進行操作。要記得,用戶必須首先離開你的應用才能進入系統的設置,你不會希望鼓勵用戶這樣做的。

如果你能按照目標用戶群當中大多數用戶的期望來設計產品,就可以減少這種設置方面的需求。如果你需要用戶的某些信息,可以首先試著從系統當中存儲的用戶信息當中進行查詢,而不是讓用戶再次進行輸入。如果你決定必須在應用中提供設置功能,可以參考iOS應用編程指南當中的「The Settings Bundle」一節了解更多信息。

如果有必要,讓用戶盡量在你的應用內部進行設置。在應用內提供設置選項,可以讓相應的變更可以直接體現出來,讓用戶即時的看到變更結果,而無需在你的應用與iOS的「設置」之間進行切換。

如果需要,盡量在應用的主界面中提供設置選項。特別是當設置選項對應著應用的主要任務,或是用戶可能頻繁的變更設置的時候,最好將相關的設置選項直接放置在主界面當中。如果你要提供的設置功能對用戶來說只是偶爾才會用到,那麼就盡量將它們放在單獨的界面當中。

------------------------------------------------------------

最後再次感謝@李林的翻譯,能夠節省我很大程度的閱讀成本。有興趣的同學也可以關注他的新浪微博,或者他的Be For Web | 為網而生(博客料很多!)


推薦閱讀:

廢土生存手冊-讓你活下去的最後保護
佐藤大開掛的人生,Nendo是如何成為日本設計界的當紅炸子雞
2017年怎麼掌握手繪能力?
從「按鈕」看設計風格的演變

TAG:iOS7 | 设计 | 用户界面设计 |