iOS11界面交互設(shè)計規(guī)范

原文:https://www.phyet.com/ios-human-interface-guidelines/

自初春之際著手翻譯《iOS11界面交互設(shè)計規(guī)范》(英文記《iOS Human Interface Guidelines》),迄今已近半載。斷斷續(xù)續(xù),林林總總;終歸曙光初現(xiàn),也算圓滿。更幸有梳理歸整,章節(jié)目錄也算清晰,得以縱覽全文。奈水平有限,謹(jǐn)撰此文,權(quán)以拋磚引玉,查漏補缺之作。

概述(Overview)

主題(Themes),主題章節(jié),主要對設(shè)計規(guī)范整體進(jìn)行一個介紹,引出清晰(Clarity),遵從(Deference)和深度(Depth)三大設(shè)計原則以及美學(xué)完整性(Aesthetic Integrity),一致性(Consistency),直接操作性(Direct Manipulation),反饋性(Feedback),隱喻性(Metaphors)和用戶控制性(User Control)六大基本特性。

基本界面元素(Interface Essentials),通過欄(Bars),視圖(Views)和控件(Controls)組成了三大基本界面元素。

交互(User Interface)

3D觸摸(3D Touch)3D Touch可以稱得上iOS 10在X軸,Y軸外的另一維度Z軸上對觸摸交互方式立體化所做的新文章。

輔助功能(Accessibility)輔助功能主要為iOS 10針對小眾群體(殘障人士)的支持,貌似國外的大部分3C產(chǎn)品均有殘障人士支持功能,可能與具體的法律法規(guī)有關(guān)。但無論出發(fā)點如何,此舉堪贊。

音頻(Audio)音頻章節(jié)主要講述了聲音在不同操作場景下的不同表現(xiàn),以及如何使其更好的作為觸摸交互行為中的點綴。

身份認(rèn)證(Authentication)身份認(rèn)證主要告知應(yīng)用設(shè)計人員,When and How引導(dǎo)用戶進(jìn)行注冊登錄等身份驗證行為。

數(shù)據(jù)輸入(Data Entry)簡單總結(jié)數(shù)據(jù)輸入原則:能通過系統(tǒng)獲得的就不要向用戶索取,能通過用戶選擇獲得的就不要用戶輸入獲得,用戶輸入時彈出合適的鍵盤。

反饋(Feedback)反饋最直觀的體現(xiàn)為使用戶知道當(dāng)前應(yīng)用正在做什么事情,去引導(dǎo)告知用戶接下來其能夠做的事情以及了解這么做將產(chǎn)生的結(jié)果。

文件處理(File Handling)對于文件的處理,堪稱iOS與Android間區(qū)別較大幾點之一。Android有明確的文件系統(tǒng)的概念,也沿用了Windows文件系統(tǒng)的層級概念;而iOS則傾向于以更上層的方式引導(dǎo)用戶進(jìn)行交互。

應(yīng)用啟動體驗(First Launch Experience)應(yīng)用啟動體驗簡單來講就是如何在用戶第一次啟動應(yīng)用時便愛上它,或者至少不那么討厭它。

手勢操作(Gestures)手勢操作主要通過iOS的八大基本手勢:點擊(Tap),拖拽(Drag),滑動(Flick),橫掃(Swipe),雙擊(Double tap),捏合(Pinch),長按(Touch and hold),搖晃(Shake)講述如何更好的進(jìn)行操作。

加載(Loading)加載主要講述如何清晰明確的告訴用戶當(dāng)前的加載狀態(tài),或者輕松有趣的愉悅用戶進(jìn)行耐心等待。

特殊情景狀態(tài)(Modality)特殊情景狀態(tài)簡單的來講即是像警告框類的強制用戶進(jìn)行交互的狀態(tài),需謹(jǐn)慎使用。

導(dǎo)航(Navigation)如何明確的告知用戶當(dāng)前所處應(yīng)用的位置,以及如何能夠到達(dá)下一個目標(biāo)位置是本章節(jié)主要講述的。

評分與評論(Ratings and Reviews)不要頻繁的去要求用戶進(jìn)行評分或者評價,真的。

請求許可(Requesting Permission)不得不說蘋果的明確需要用戶進(jìn)行授權(quán)的方式在某些程度上培養(yǎng)了用戶在信息層面上的“維權(quán)”意識,雖然有很多應(yīng)用仍然厚顏無恥的向用戶要各種權(quán)限(尤以Android平臺為甚),但用戶思想層面的認(rèn)識更有價值。

設(shè)置(Settings)有一部分的應(yīng)用可能需要一開始就讓用戶決定設(shè)置或布局選項,但是大部分應(yīng)用避免或是延遲這么做。成功的應(yīng)用能夠一開始就讓用戶很好地使用,并且同時提供了一個便捷的途徑去調(diào)整體驗。

術(shù)語(Terminology)科技可能會令人感到不安,所以盡可能不要用太過冰冷的語言,試著同用戶進(jìn)行交談。

撤銷以及重做(Undo and Redo)雖然在國內(nèi)看似微信已經(jīng)重新定義了搖一搖,但通過搖晃設(shè)備進(jìn)行操作的撤銷或者重做,似乎來得也蠻驚喜。

功能(System Capabilities)

多任務(wù)(Multitasking),多任務(wù)模式主要體現(xiàn)為像iPad等大屏設(shè)備中,具體表現(xiàn)為滑出(Slide Over),分屏(Split View)以及畫中畫(Picture in Picture)等模式。

通知(Notifications),通知要慎用,否則可能會出現(xiàn)“狼來了”的效果,具體的觸發(fā)事件可能為,當(dāng)新消息到來時、一個事件將要發(fā)生時、有新數(shù)據(jù)可獲取時或是某些狀態(tài)發(fā)生改變時等。

打?。≒rinting),打印功能主要為通過系統(tǒng)自帶的AirPrint技術(shù)來使用兼容的打印機進(jìn)行圖片,PDF以及其它內(nèi)容的無線打??;實際應(yīng)用中比較少見。

快速查看(Quick Look),快速查看可以理解為預(yù)覽,一般像Keynote,、Numbers、Pages、PDF文檔、圖片以及其它類型的文件(即使你的應(yīng)用并不支持這些文件格式)均可以預(yù)覽。

Siri,目前還是比較局限應(yīng)用的類型,如音視頻呼叫,信息,健身等。

視覺設(shè)計(Visual Design)

動畫(Animation),貫穿于iOS系統(tǒng)的優(yōu)美、精細(xì)的動畫在用戶和屏幕屏幕內(nèi)容之間建立了一種視覺上的聯(lián)系。當(dāng)動畫被合理利用時,它能夠表達(dá)狀態(tài)、提供反饋、加強直接操縱感,并且視覺化呈現(xiàn)用戶的操作結(jié)果。

品宣(Branding),成功的品宣不僅是單純地在應(yīng)用中添加品牌元素。優(yōu)秀的應(yīng)用通過優(yōu)雅別致的文字、顏色和圖片來營造獨特的品牌辨識度。

顏色(Color),在iOS中,顏色能夠暗示可交互性、增加活力以及提供視覺的連續(xù)性。

布局(Layout),用戶總是希望能夠在他們所有的設(shè)備以及任何一種模式下使用他們最喜歡的應(yīng)用。在iOS中,界面元素和布局能夠被配置在不同的設(shè)備中、在iPad中多任務(wù)操作時、分屏模式時以及屏幕旋轉(zhuǎn)時,自動改變形狀和大小。

字體(Typography),San Francisco (SF)是IOS中的系統(tǒng)字體。系統(tǒng)對這種字體進(jìn)行了優(yōu)化,給你的文字無法比擬的易讀性,清晰性和一致性。

視覺設(shè)計(Visual Design)

動畫(Animation),貫穿于iOS系統(tǒng)的優(yōu)美、精細(xì)的動畫在用戶和屏幕屏幕內(nèi)容之間建立了一種視覺上的聯(lián)系。當(dāng)動畫被合理利用時,它能夠表達(dá)狀態(tài)、提供反饋、加強直接操縱感,并且視覺化呈現(xiàn)用戶的操作結(jié)果。

品宣(Branding),成功的品宣不僅是單純地在應(yīng)用中添加品牌元素。優(yōu)秀的應(yīng)用通過優(yōu)雅別致的文字、顏色和圖片來營造獨特的品牌辨識度。

顏色(Color),在iOS中,顏色能夠暗示可交互性、增加活力以及提供視覺的連續(xù)性。

布局(Layout),用戶總是希望能夠在他們所有的設(shè)備以及任何一種模式下使用他們最喜歡的應(yīng)用。在iOS中,界面元素和布局能夠被配置在不同的設(shè)備中、在iPad中多任務(wù)操作時、分屏模式時以及屏幕旋轉(zhuǎn)時,自動改變形狀和大小。

字體(Typography),San Francisco (SF)是IOS中的系統(tǒng)字體。系統(tǒng)對這種字體進(jìn)行了優(yōu)化,給你的文字無法比擬的易讀性,清晰性和一致性。

欄(Bars)

導(dǎo)航欄(Navigation Bar),導(dǎo)航欄出現(xiàn)在應(yīng)用屏幕的頂部,狀態(tài)欄之下,它能實現(xiàn)在一系列有層級的應(yīng)用頁面間的導(dǎo)航。

搜索欄(Search Bars),用戶通過搜索欄在大量的信息中進(jìn)行查找。搜索欄有兩種樣式:凸顯(prominent)(默認(rèn))和極簡(minimal)?!巴ㄓ嶄洝笔褂昧送癸@搜索欄,含有引人注目的淺色背景?!罢掌笔褂昧藰O簡樣式,更好地融入了周邊界面。搜索欄默認(rèn)是半透明的,但也可以被設(shè)置成不透明的。有需要時,搜索欄也可以自動遮蓋住導(dǎo)航欄。

狀態(tài)欄(Status Bars),狀態(tài)欄在屏幕的頂端出現(xiàn),顯示與設(shè)備當(dāng)前狀態(tài)相關(guān)的有用信息,比如時間、運營商、網(wǎng)絡(luò)狀態(tài)以及電池容量。

標(biāo)簽欄(Tab Bars),標(biāo)簽欄在應(yīng)用屏幕底部出現(xiàn),提供了在應(yīng)用不同部分間快速切換的途徑。標(biāo)簽欄是半透明的,也可能會有純色背景,在橫豎屏都保持一致的高度,并且在出現(xiàn)鍵盤時會被隱藏。

工具欄(Toolbars),工具欄在應(yīng)用屏幕底部出現(xiàn),包含了執(zhí)行當(dāng)前視圖或包含內(nèi)容相關(guān)操作的按鈕。工具欄是半透明的,也可能會有純色背景,并且通常在用戶不太需要它們時被隱藏。

視圖(Views)

功能表單(Action Sheets),功能表單是響應(yīng)于控件或動作而出現(xiàn)的一種特定的警報樣式,其提供一組與當(dāng)前上下文相關(guān)的兩個或多個選擇。使用功能表單讓人們開始一個任務(wù),或者用戶在進(jìn)行潛在破壞性操作之前請求確認(rèn)。

活動視圖(Activity Views),活動視圖在當(dāng)前上下文中,活動便是一項任務(wù),如復(fù)制、收藏或查找。一旦啟動,活動可以立即執(zhí)行任務(wù),或在繼續(xù)之前請求更多信息?;顒佑苫顒右晥D管理,它表現(xiàn)為一個圖標(biāo)或彈出視圖,具體則取決于當(dāng)前設(shè)備和當(dāng)前定位。

警告框(Alerts),警告主要用來傳遞應(yīng)用程序或設(shè)備狀態(tài)相關(guān)的重要信息,并經(jīng)常請求反饋。警告由標(biāo)題、可選消息、一個或多個按鈕和可選的文本字段組成,用于收集用戶的信息輸入。除了這些可配置元素之外,警告框的可視化外觀是固定的,不能自定義。

集合(Collections),一個集合主要用來管理一系列有序的內(nèi)容集,如一組照片,并以可定制和高度可視化的布局呈現(xiàn)它。因為集合沒有強制執(zhí)行嚴(yán)格的線性格式,所以它特別適合顯示大小不同的項。

圖像視圖(Image Views),圖像視圖主要為用來在透明或不透明的背景下顯示單個圖像或動態(tài)圖像。

地圖視圖(Maps),地圖視圖允許你在應(yīng)用內(nèi)顯示地理信息,且可以支持系統(tǒng)自帶地圖應(yīng)用所提供的大部分功能。

浮層(Popovers),浮層通常是當(dāng)用戶點擊屏幕上某個內(nèi)容的控制點或區(qū)域時在其上方出現(xiàn)的瞬態(tài)視圖。

滾動視圖(Scroll Views),滾動視圖主要被用戶用來去瀏覽那些像文檔中的文本,集合中的圖像等比顯示區(qū)域要大的內(nèi)容。當(dāng)用戶進(jìn)行翻閱,輕擊,拖拽,點擊以及縮放等交互行為時,滾動視圖會隨之進(jìn)行放大縮小等與之對應(yīng)的變化。

分列視圖(Split Views),分列視圖主要用來以列對列的形式展示內(nèi)容,一般以偏固定性內(nèi)容作為一側(cè),相關(guān)性信息對應(yīng)在另一側(cè)展示。每一列均可以包含很多元素,像導(dǎo)航欄,工具欄,標(biāo)簽欄,列表,集合,圖像,地圖以及自定義視圖等。

表格視圖(Tables),表格通常以可滾動的單列多行排列的方式對數(shù)據(jù)進(jìn)行分組分類進(jìn)行展示。使用表格以列表的形式可以干凈高效地顯示大量或少量信息。一般來說,表格對于以文本為基礎(chǔ)的內(nèi)容展示是非常理想的,并且常常作為分列視圖的一側(cè)的導(dǎo)航工具出現(xiàn),與之相關(guān)的內(nèi)容顯示在相反的一側(cè)。

文本視圖(Text ?Views),文本視圖顧名思義主要用以顯示多行文本內(nèi)容。文本視圖可以為任意高度通過滾動的方式來顯示視圖外的額外內(nèi)容。默認(rèn)情況,內(nèi)容均以黑色系統(tǒng)字體左對齊的方式展示。如果一個文本視圖是可編輯的,那么當(dāng)用戶點擊視圖內(nèi)部區(qū)域時屏幕下方會顯示出鍵盤。

網(wǎng)頁視圖(Web Views),網(wǎng)頁視圖可以加載并顯示網(wǎng)頁內(nèi)容,比如應(yīng)用中直接嵌入的HTML以及網(wǎng)頁。郵箱應(yīng)用便使用網(wǎng)頁視圖來顯示HTML。

控件(Controls)

按鈕(Controls),按鈕用以啟動應(yīng)用程序的特定操作,具有可定制化的背景,并且可以包含標(biāo)題或圖標(biāo)。系統(tǒng)為大多數(shù)用例提供了預(yù)定義的按鈕樣式。但應(yīng)用同樣也可以去設(shè)計完全自定義化的按鈕。

編輯菜單(Edit Menus),用戶可以通過觸摸且按住或者雙擊文本區(qū)域,文本視圖,網(wǎng)頁視圖或者圖像視圖中某個元素的形式來進(jìn)行內(nèi)容選擇以及編輯選項顯示的操作,如復(fù)制粘貼等。

標(biāo)簽(Labels),標(biāo)簽用來描述屏幕中的交互元素或提供一個簡短的信息。盡管用戶不可以編輯標(biāo)簽,但有時用戶還是會期望可以復(fù)制標(biāo)簽中的內(nèi)容。標(biāo)簽可以顯示任何數(shù)量的靜態(tài)文本,但是還應(yīng)該盡量使其保持簡短。

頁面控件(Page Controls),頁面控制顯示了當(dāng)前頁面在一個頁面序列中所處的位置。其以一系列的小型指示圓點進(jìn)行展示,代表一系列可用頁面的順序。

篩選框(Pickers),一個篩選框包含一個或多個可滾動的含有不同值的列表,其中每一列均具有一個唯一選中的值以深色的文字出現(xiàn)呈現(xiàn)。一個篩選框通常在用戶編輯某一個字段或點擊某個菜單時在屏幕的底部顯示或彈出。

進(jìn)度指示器(Progress Indicators),不要讓用戶緊盯著靜態(tài)屏幕來等待應(yīng)用程序加載內(nèi)容或執(zhí)行冗長的數(shù)據(jù)處理操作。使用加載器和進(jìn)度條,讓人們知道你的應(yīng)用程序沒有停止,并且要讓用戶知道他們需要要等多久。

刷新控件(Refresh Content Controls),刷新控件可以用來手動立即進(jìn)行當(dāng)前內(nèi)容的重新加載操作,而無需等待下一個自動內(nèi)容更新發(fā)生,通常應(yīng)用在表單視圖中。

分段控件(Segmented Controls),分段控件是兩個或多個片段的線性集合,每一個片段均為互斥按鈕。在控件中,所有片段的寬度相等。像按鈕一樣,片段也可以包含文本或圖像。分段控件通常用于顯示不同的視圖。例如,在地圖中,分段控件允許在地圖、傳輸線和衛(wèi)星視圖之間進(jìn)行切換。

滑動條(Sliders),滑動條是一個水平的模塊,其帶有一個可以稱之為“拇指”的控件,用戶可以用手指在滑動條的最小與最大值之間滑動,使用方式例如用來調(diào)整屏幕的亮度,或在媒體文件播放時自定義其播放位置。

調(diào)數(shù)器(Steppers),一個調(diào)數(shù)器由兩個分段控件組成用以增加或減少數(shù)值。默認(rèn)情況下,其中的一個分段控件會顯示加號另一個分段控件會顯示減號。當(dāng)然這些符號也可以自定義為其它圖像。

開關(guān)(Switches),開關(guān)主要用于兩個互斥狀態(tài)之間的切換–開和關(guān)。

文本輸入框(Text Fields),一個文本輸入框通常為單行且固定高度的區(qū)域,經(jīng)常為圓角,且當(dāng)用戶點擊時自動彈出鍵盤。文本輸入框通常被用來作為一小部分信息的輸入模塊,比如郵件地址。

擴展功能(Extensions)

自定義鍵盤(Custom Keyboards),鍵盤擴展可以理解為用一個自定義鍵盤來代替系統(tǒng)的標(biāo)準(zhǔn)鍵盤。自定義鍵盤需要在設(shè)置中進(jìn)行啟用,具體位置為設(shè)置->鍵盤。一旦鍵盤開啟,那么其將在所有應(yīng)用進(jìn)行文本輸入時被使用,當(dāng)然進(jìn)行某些安全性文本輸入以及電話號碼輸入時除外。用戶可以開啟多個自定義鍵盤,并且可以在任何時候在其之間進(jìn)行切換。

文件庫(Document Providers),文件庫擴展模塊實現(xiàn)了一個有著自定義界面的,可以在系統(tǒng)內(nèi)應(yīng)用進(jìn)行文檔的導(dǎo)入,導(dǎo)出以及移動的擴展功能。文件庫會以模態(tài)視圖的模式加載,包含導(dǎo)航欄。

主屏幕快速操作(Home Screen Quick Actions),主屏幕快速操作可以理解為通過3D Touch提供給用戶一種方便快捷的在主屏幕展示應(yīng)用所特有功能的方式。用戶所需要做的只是使用比正常點擊及按住更大的壓力來觸發(fā)應(yīng)用所提供的一系列服務(wù)。正常的點擊則依然為啟用應(yīng)用。

照片編輯(Photo Editing),照片編輯允許用戶在照片應(yīng)用內(nèi)對照片以及視頻進(jìn)行過濾或其它方面的改變。編輯后的照片或視頻會以一個新的文件的方式進(jìn)行存儲,從而避免對源文件的修改。

分享及操作(Sharing and Actions),分享擴展提供了一個非常便捷的方式將當(dāng)前內(nèi)容分享至其它應(yīng)用,社交媒體以及其它服務(wù)。操作擴展則允許用戶對當(dāng)前內(nèi)容進(jìn)行具體的操作,如增加書簽,復(fù)制鏈接或者保存圖像。

小部件(Widgets),小部件可以理解為用來展示少量及時有用的信息或者應(yīng)用程序特定功能的擴展。比如,新聞應(yīng)用的小部件主要顯示頭條新聞。日歷應(yīng)用則提供了兩個部件,其中一個顯示當(dāng)日事件另一個則顯示下一個事件。筆記應(yīng)用則允許用戶預(yù)覽最近的筆記以及快速創(chuàng)建一條新的筆記,提醒,照片或者圖畫。

原文:https://www.phyet.com/ios-human-interface-guidelines/

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容