IOS 11 Human Interface Guidelines-視覺設計指南
這份文檔源於喬布斯的「變態」心理，喬布斯是一個有瘋狂控制欲和極致追求完美的人，他無法承受產品上的不完美，而完美的標準只能由他主導。他想要所有的開發者、設計師，只要想在iOS的平台上混，都要按照他的標準來工作設計。那麼就需要出台一份完整的規範來統一所有人的設計。
雖然他很強勢，但對於我們產品來說也是非常棒的出發點。這些設計指南都是頂級優秀設計師歸納總結的，我們UI設計師想要在iOS上把設計做好，做完美，仔細研讀iOS人機交互指南是非常有必要的。
「IOS11人機交互指南」事無巨細，包括交互、設計等很多內容。這篇文章主要整理翻譯的是其中與設計相關的內容，包括IOS設計主題、設計原則、IOS視覺設計指南。
文章可能比較枯燥，但是耐心讀下去並記下筆記，對做設計很有指導借鑒意義哦～
一、iOS設計主題
清晰（Clarity）縱觀整個iOS系統，清晰意味著，每種尺寸下的文本都應該是易讀的，所有圖標都應該是精確易懂的，每一個裝飾都應該是精心恰當的，而且應該本著功能驅動設計的原則。利用留白，顏色，字體，圖像以及其它界面元素來共同巧妙的突出重點內容且表達其不同的可交互性。
遵從（Deference）乾淨美觀的界面和清晰流暢的動態效果有助於用戶去理解界面內容並與之進行交互，要避免給用戶帶來過多的干擾。比如儘可能少的使用邊框、漸變以及陰影可以讓界面更輕，從而突出更多的內容。而且如果當前頁面內容比較滿，可以利用半透明以及模糊處理等其他的一些方式來暗示用戶其更多內容的存在。
深度（Depth）鮮明的視覺層級以及生動的動態效果可以對界面有更深層次的表達，賦予界面活力也更有助於用戶去理解。易於發現且易於觸發的界面元素能夠提升用戶的體驗愉悅感，而用戶在成功觸發相應功能或獲得更多內容的同時也掌握了當前所在位置的由始至終（就是我是從哪裡來的，到哪裡去的）。而且當用戶在瀏覽內容的同時，流暢的過渡其實便體現出了一種縱深感。
二、六大設計原則
美學完整性（Aesthetic Integrity）例如，如果一款應用的目的是幫助用戶去完成一項非常重要的任務，那麼我們就應該使用不易察覺且不會太引人注目的圖形，或使用一些標準化的控制項以及可預知的交互行為來保持用戶的專註性。反而言之，對於一款沉浸式體驗應用（如遊戲），我們就需要利用更加吸引人的視覺表現，去鼓勵用戶深入探索。
一致性（Consistency）使用系統提供的界面元素，風格統一的圖標，標準的字體樣式以及一致的措辭。同時應用所包含的特徵和交互行為應該是符合用戶心理預期的。
直接操作性（Direct Manipulation）通過此類交互用戶的交互行為能夠得到及時可視的反饋。
反饋性（Feedback）應該對用戶的每個行為都提供了明確的反饋。如可交互的元素被點擊時的臨時高亮，進度指示器（進度條，緩衝條等）顯示任務需要進展的時間及當前的進度，聲音和動態效果則更是加強了對行為結果的提示。
隱喻性（Metaphors）主要是因為用戶可以與屏幕進行物理上的交互。如用戶可以通過拖拽（drag），滑動（swipe）對象，撥動（toggle）開關，移動（move）滑塊，滾動（scroll）選擇器，甚至通過輕掃（flick）來翻閱書籍和雜誌。
用戶控制性（User Control）應用可以對一系列的用戶行為提供建議，或對可能造成的嚴重後果的行為發出警告，但絕不應該替用戶做決定。好的應用會在用戶主導和避免不想要的結果中找到平衡。為了讓用戶感覺到是他們在控制應用，應該使用用戶熟悉且可預知結果的交互元素；還有對於破壞性的行為要讓用戶進行二次確定，並且允許即使在運行中的操作也能夠被輕易取消。
三、IOS視覺設計指南
● 自適應和布局
用戶總是希望能夠在他們所有的設備以及任何一種模式下使用他們最喜歡的應用。在iOS中，界面元素和布局能夠被配置在不同的設備中、在iPad中多任務操作時、分屏模式時以及屏幕旋轉時，自動改變形狀和大小。因此，提前計劃並且設計一個在任何環境下都能提供非凡體驗的應用是十分重要的。
1.環境變化時保持當前內容的焦點不變。會讓用戶感覺當前的應用失控了
2.確保最重要的內容在默認大小下清晰可讀。除非用戶選擇調整大小，否則不應該讓用戶橫向滑動才能閱讀重要的文字信息，或是放大才能看清重要的圖片。
3.在應用內保持整體一致的視覺外觀。除非你在創造一個沉浸式體驗，比如遊戲，不然自定義動畫都應該和系統自動地動畫相符。
4.利用視覺權重和平衡來表示重要性。一般來說，把首要的對象放在屏幕的上半部分偏左的位置，大的對象比小的更吸引眼球
5.利用對齊來方便瀏覽，並且表達結構和層級。對齊讓應用看起來整齊有次序，更容易找到信息。縮進和對齊還可以表明多組內容之間的關係。
6.擴展視覺元素來填充屏幕。你的應用程序應該利用所有可用的屏幕空間。
7.確保內容周圍有足夠的邊距和間距。
8.在較大的設備上顯示文本時應用可讀性邊距。這些邊距會使文本行足夠短，以確保舒適的閱讀體驗。
9.為交互元素提供足夠的點擊熱區。可點擊面積最好是44pt x 44pt以上
10.避免無緣由的布局變動。即使用戶旋轉了設備，也不代表整體的布局需要變換。
11.可能時，同時支持豎屏和橫屏模式。人們更喜歡使用不同方向的應用程序，因此最好能夠實現這種期望。
12.如果你的應用只支持橫屏，那麼請支持橫屏的兩種方向。除了iphone x這種不支持倒置
13.根據當前使用內容來定製應用對旋轉的反應。比如，一個需要用戶旋轉設備來控制角色移動的遊戲，就不會在遊戲中根據設備的旋轉來改變模式。但是，它可以根據當前設備的旋轉方向來展示菜單和引導步驟。
14.調整布局以適應設置中字體大小的變化。人們期望大多數應用程序在「設置」中選擇不同的文字大小時能夠做出適當的反應，為了適應一些文字大小的變化，您可能需要調整布局。
15.確保您的應用程序在iPad上運行，而不僅僅在iPhone上運行。界面元素仍應在iPad上保持可見和功能。某些功能需要特定於iPhone的硬體（如3D Touch），請考慮在iPad上隱藏或禁用這些功能，並讓用戶使用您應用的其他方式實現這些功能。
● 動畫
貫穿於iOS系統的優美、精細的動畫在用戶和屏幕屏幕內容之間建立了一種視覺上的聯繫。當動畫被合理利用時，它能夠表達狀態、提供反饋、加強直接操縱感，並且視覺化呈現用戶的操作結果。
1.明智且審慎地使用動畫和動效。有些效果有助於增強理解和提升愉悅感，但是濫用它們就會讓一個應用變得令人困惑並且難以控制。如果你想使用動效，一定要進行用戶測試以保證它們真的能完成使命。
2.動畫要儘可能的寫實且連貫。打個比方，如果用戶通過在屏幕頂部下滑呼出一個界面，那麼他們應該也能通過上滑將該界面關閉。
3.動畫要保持一致性。除非你在創造一個沉浸式體驗，比如遊戲，不然自定義動畫都應該和系統自動地動畫相符。
4.動畫要有可選擇性。當偏好設置中的動畫選項被設置為減少動效時，應用應該最小化或者直接關閉動畫。
● 品宣
成功的品宣不僅是單純地在應用中添加品牌元素。優秀的應用通過優雅別緻的文字、顏色和圖片來營造獨特的品牌辨識度。提供足夠多的品牌元素讓用戶感覺是處在你的應用中，但要因為給予太多而變成干擾。
1.融入精妙的、不唐突的品牌元素。用戶使用你的應用是獲得娛樂、得到信息或是完成任務，而不是為了觀看一個廣告。要想達到最好的體驗，需要巧妙地將品牌融於應用設計中。最好使應用圖標的顏色貫穿於界面設計，這樣會給你的應用提供專屬的環境。
2.不要讓品宣阻礙了優秀的應用設計。首先，讓你的應用要更像是一個iOS應用。保證它是直觀的、易於導航的、易用的並且以內容為中心的。要避免過分關注一致的品牌，從而影響了應用設計。
3.內容比品牌推廣更重要。在屏幕頂部一直放置一個品宣的頭欄，意味著查看內容的空間更小。取而代之的，考慮採用低侵入性的方式來實現品宣，比如使用自定義的配色方案和字體，或是巧妙地自定義背景。
4.抵制住想要在應用中到處展示logo的誘惑。避免在應用中到處展示logo，除非它是品宣中是必不可少的一部分。這點在導航欄中尤其重要，因為提供一個標題比logo更加有用。
5.遵循Apple的商標準則。主要是在一些廣告，促銷之類的頁面里，除非明確授權，否則禁止使用Apple商標。
● 顏色
了解一下系統配置的顏色，這些顏色無論是單獨還是組合、在淺色背景還是深色背景上都會看起來很不錯。
1.審慎地使用具有特殊含義的顏色。例如，當非關鍵原因在應用程序中使用紅色時，具有警告意義的紅色就會變得不那麼有效。
2.在應用內使用互補的顏色。不要使顏色相互太衝突，影響用戶的注意力。
3.一般來說，選擇與應用logo相符的顏色來配色。巧妙地使用顏色是一個傳達品牌的好辦法。
4.在應用中統一使用一種關鍵色來暗示交互性。如果您定義了表示交互性的關鍵顏色，請確保其他顏色不與其競爭。
5.避免給可交互和不可交互的元素使用相同的顏色。可交互一般要高亮，而不可交互時一般用灰色或者降低透明度來表示。
6.考慮圖片或者半透明元素對附近顏色的影響。圖片的變化有時需要改變附近的色彩，以保持視覺連續性，防止界面元素變得不堪重負。例如，地圖在使用地圖模式時會顯示淺色配色，但在激活衛星模式時會切換為深色配色。
7.關注色盲用戶。比如，很多色盲用戶很難分辨紅色和綠色（以及任何灰色），或是藍色和橘色。避免把這些顏色組合作為區分兩種狀態或值的唯一方式。比如，用紅色方塊和綠色圓形來表示下線和上線狀態，而不是用紅色和綠色的圓形。
8.注意不同國家和文化對顏色的認知差異。例如，在一些文化中，紅色表示危險。在其他國家，紅色具有積極的內涵。
9.在多種光線條件下測試你的應用顏色方案。以保證用戶在不同使用場景中都能清晰看到內容
10.使用足夠的顏色對比度。在應用中，過低的對比度會讓內容難以閱讀。請確保你的應用對比度至少達到4.5:1,但是7:1更好
● 術語
你的應用程序中的每一個字都是與你的用戶交談的一部分。使用規範的術語使你的用戶感到舒適。
1.使用熟悉易懂的詞語和語句。避免使用用戶可能不理解的或是技術術語。根據你對用戶的了解來決定哪些詞語或是語句是合適的。
2.保持界面文本的清晰和簡潔。用戶能夠快速且輕易地理解短而直接的文本，他們不喜歡在完成任務時被強迫去閱讀很長的文本。找到最重要的信息，簡潔地陳述它，然後突出地展示它
3.避免使用讓人聽起來很傲慢的語言。
4.盡量使用日常且友好的語氣。
5.請謹慎使用幽默。因為用戶可能會多次閱讀你界面上的文字，而那些第一次看起來很俏皮的文字可能在多看幾次之後會顯得煩人。還有記住在一種文化中的幽默方式可能並不適用於其它文化。
6.使用相關且一致的語言和圖像。確保引導在當前環境中總是合適的。如果某人在使用iPad，那麼就不要給他展示與iPhone相關的文字和圖片。根據平台選擇使用相符的語言。
7.提供精確的日期。一般而言日期應該體現出正在查看事件的用戶所在的時區，但在一個跟蹤航班狀態的應用內，明確地顯示起飛地區的日期和時區才更加清楚。
8.恰當地指出可交互的元素。用戶應該瞥一眼就能知道這個元素是什麼用的。所以應該用比如連接、發送和添加等操作動詞。
● 字體
1.強調重要信息。使用字體粗細、大小和顏色來突出
2.如果可能的話，只使用一種類型字體。混合幾種不同的字體會使你的應用程序看起來支離破碎。儘可能的只使用一種字體以及少量的字體變化和大小。
3.儘可能使用內置的文本樣式。內置的文本樣式可讓您以不同視覺方式表達內容，同時保持最佳可讀性。比如有大標題、標題一、標題二之類的內置文本樣式。
4.確保自定義字體易讀的。最好使用系統字體，如果對自定義字體有強烈的需求，比如為了品牌，那就確保即使是小尺寸的字體也很容易閱讀。
TAG:靈動亦靜 |