iOS 12 人機互動指南(一):主題與基本界面元素

2020-12-02 人人都是..

要想發布一款能夠位於App Store排行榜之首的產品，產品在質量和功能上的高標準表現是必不可少的，而為了達到這種高度，我們應該如何做呢？本文主要講述的是 iOS 12 界面互動設計指南，一起來看看~

主題（Themes）

1. iOS設計主題

作為一個app設計師（其實我是一隻產品狗），其實便意味著你將有機會去設計發布一款能夠位於App Store排行榜之首的驚世駭俗之產品。而為了達到這個高度，你的產品在質量和功能上的高標準表現是必不可少的。（我理解的原文中app designer其實正是產品狗一職而非傳統意義上的UI設計師，正所謂成也蕭何敗也蕭何，固此文別稱《產品狗的iOS指南》也不枉為過）。

iOS平臺不同於其它平臺的三大基本原則：

  • 清晰（Clarity）：縱觀整個iOS系統，清晰意味著，每種尺寸下的文本都應該是易讀的，所有圖標都應該是精確易懂的，每一個裝飾都應該是精心恰當的，而且應該本著功能驅動設計的原則。利用留白，顏色，字體，圖像以及其它界面元素來共同巧妙的突出重點內容且表達其不同的可交互性。
  • 遵從（Deference）：乾淨美觀的界面和清晰流暢的動態效果有助於用戶去理解界面內容並與之進行交互，從而避免給用戶帶來幹擾。而如果當前的內容佔據了整個屏幕時，可以利用半透明以及模糊處理等方式來暗示用戶其更多內容的存在。儘可能少的使用邊框，漸變以及陰影可以讓界面更輕，從而突出更多的內容。
  • 深度（Depth）：鮮明的視覺層級以及生動的動態效果可以對界面有更深層次的表達，賦予了界面活力也更有助於用戶去理解。易於發現且易於觸發的界面元素能夠提升用戶的體驗愉悅感，而用戶在成功觸發相應功能或獲得更多內容的同時，也掌握了當前所在位置的由始至終（可以理解為PC端的麵包屑）。因此當用戶在瀏覽內容的同時，流暢的過渡其實便體現出了一種縱深感。

2. 設計原則

為了最大化產品的影響力及達到以上目標，以下的原則更是需要你在產品定義及設計時牢記於心的：

（1）美學完整性（Aesthetic Integrity）

美學完整性代表了一款應用的視覺表現和交互行為與其功能整合的優良程度。例如：如果一款應用的目的是幫助用戶去完成一項非常重要的任務，那麼我們就應該使用不易察覺且不會太引人注目的圖形，或使用一些標準化的控制項以及可預知的交互行為來保持用戶的專注性。

反而言之，對於一款沉浸式體驗應用（如遊戲），我們就需要利用更加吸引人的視覺表現，去鼓勵用戶深入探索的同時為其帶來無窮的樂趣和刺激。

（2）一致性（Consistency）

一致性代表了一款應用需要貫徹相同標準和規範的原則，使用系統提供的界面元素，風格統一的圖標，標準的字體樣式以及一致的措辭。同時應用所包含的特徵和交互行為，應該是符合用戶心理預期的。

（3）直接操作性（Direct Manipulation）

直接對屏幕上的對象（而非通過一堆控制項）進行交互，有助於用戶理解從而提升用戶的參與度。這裡的直接操作指的是包括旋轉屏幕或手勢控制等操作，通過此類交互用戶的交互行為能夠得到及時可視的反饋。

（4）反饋性（Feedback）

反饋可以認證交互行為，呈現結果，通知用戶。iOS系統自帶的應該對用戶的每個行為都提供了明確的反饋，如：可交互的元素被點擊時的臨時高亮，進度指示器（進度條、緩衝條等）顯示任務需要進展的時間及當前的進度，聲音和動態效果則更是加強了對行為結果的提示。

（5）隱喻性（Metaphors）

當一款應用的虛擬對象和交互行為能夠與用戶所熟悉的體驗相似時（無論這種體驗是來源於現實生活亦或是數字世界），用戶就更夠更快的學會使用這款應用。

隱喻能夠在iOS中起到作用的原因是用戶可以與屏幕進行物理上的交互，如：用戶可以通過將視圖引出屏幕來顯示下方的內容，通過拖拽（drag）、滑動（swipe）對象、撥動（toggle）開關、移動（move）滑塊、滾動（scroll）選擇器，甚至通過輕掃（flick）來翻閱書籍和雜誌。

（4）用戶控制性（User Control）

在iOS內部，應該是用戶（而非應用）在控制。應用可以對一系列的用戶行為提供建議，或對可能造成的嚴重後果的行為發出警告，但絕不應該替用戶做決定。而好的應用，會在用戶主導和避免不想要的結果中找到平衡。

為了讓用戶感覺到是他們在控制應用，應該使用用戶熟悉且可預知的交互元素，讓用戶二次確定其有破壞性的行為，並且允許即使在運行中的操作也能夠被輕易取消。

基本界面元素（Interface Essentials）

大部分的iOS應用使用UIKit中的部件來定義一個基本的界面元素框架，而這個框架不僅讓各個應用在保持視覺上的一致的同時，也給予了其高度化的個性定製空間。

UIKit部件是靈活的、常見的，可配置性極高的，它能夠支持你去設計一個能夠在任何iOS設備中都表現出高水準的應用，而且能夠使其隨著系統發布新版本的同時而自動更新。

以下便是UIKit中三大基本界面元素：

（1）欄（Bars）

欄可以告知用戶其當前所在應用中的具體位置，提供導航，還有可能包含按鈕或其他可以用來觸發功能或交流的元素。

（2）視圖（Views）

視圖包含了用戶所最關注的內容，如文本，動畫及一些交互元素。而視圖更是支持滾動，插入，刪除及排列等行為方式。

（3）控制項（Controls）

控制項用於觸發功能及傳遞信息，像按鈕、開關、輸入框、進度條等便是極典型的控制項。

為了進一步的定義iOS界面，UIKit定義了你的應用所能用到的功能。通過這個框架，你的應用可以對觸屏上的手勢操作做出響應，還可以包含一些，例如：繪畫、輔助、列印等功能。

UIKit同其它部件框架一樣緊密相連，如：Apple Pay、HealthKit、ResearchKit等，來幫助你設計出一個強大的應用。

 

本文由 @沸騰 翻譯發布於人人都是產品經理。未經許可，禁止轉載

題圖作者提供

相關焦點

  • iOS 12 人機互動指南(六):圖標圖像(Icons and Images)
    本文主要講述的是 iOS 12 界面互動設計指南中的圖標圖像部分，一起來看看~一、圖像大小和解析度1.（6）不要包含照片、屏幕截圖或是界面元素影像細節在很小的尺寸會難於辨認，屏幕截圖對於一個應用圖標來說太複雜了，也一般不利於傳達應用的目的，在圖標中的界面元素會令人誤解並且困惑。（7）不要復用Apple硬體產品的圖形Apple產品受版權保護，不能在你的圖標或是圖片中被二次創作。
  • 關於在iOS當中實踐Material Design的訪談
    但同時我也必須強調一點，無論是單一元素還是界面轉場，其中的動效都必須服務於某種目的，而不只是出於美觀炫酷，更不能干擾或拖延人機互動流程。當我與界面上的元素進行互動時，我下意識的希望了解這些元素從何而來，又會去到哪裡。界面上的多數交互元素不能只是憑空的出現或消失 – 交互行為與觸發的結果之間沒有視覺上的關聯，用戶很快會迷失方向。
  • 未來已來(一):語音交互,人機互動的新時代
    科技的變化帶領著人機互動的變化，而每一次科技的技術突破，都是為了讓人們可以使用更為貼近「自然」的方式與機器進行溝通。語音交互指的是與電子設備進行對話，讓它們能按照你的要求替你做事情。如今，語音界面無處不在，我們可以在智慧型手機、電視、智能家居和其他一系列產品中接觸到它。語音交互功能正快速的滲入我們的日常生活中，它的高速發展表明這項技術即將成為傳統圖形界面交互方式之外的另一種選擇，甚至有可能完全代替後者。
  • 人機界面HMI的8大知識點匯總
    一、HMI簡介 　　HMI是HumanMachineInterface的縮寫，「人機接口」，也叫人機界面。人機界面（又稱用戶界面或使用者界面）是系統和用戶之間進行交互和信息交換的媒介，它實現信息的內部形式與人類可以接受形式之間的轉換。凡參與人機信息交流的領域都存在著人機界面。
  • 人機互動系統現階段的發展狀況以及未來發展方向
    人機互動的概念自然地代表了計算機的興起，或更普遍地講是計算機本身的興起。其實，原因很明顯。除非人類可以正確使用它們，否則最複雜的機器將一文不值。這個基本論點代表設計人機互動時應考慮的主要術語：功能和可用性。為什麼可以通過該系統的功能最終定義一個真正設計的系統？系統功能如何幫助實現系統目的？系統的功能可以通過向用戶提供的一系列操作和服務來定義。
  • 寶沃黃超俊:智能座艙人機互動參數化設計研究
    下面是寶沃汽車人機工程高級經理、整車人機工程開發總負責人黃超俊在本次大會上的演講。寶沃汽車人機工程高級經理、整車人機工程開發總負責人 黃超俊 大家上午好！我是來自寶沃汽車的黃超俊，一直致力於人機工程、人機互動設計和前瞻技術落地的研究，今天我跟大家分享的主題是智能座艙人機互動參數化設計的研究。
  • 為什麼人機互動專業現在這麼火?
    首先要辨析：人機互動 ﹙hci﹚ 和互動設計 ﹙interaction design﹚ 的概念人機互動 ﹙hci﹚：人機互動是一個學術領域，是計算機和心理學的交叉學科，也可以看作計算機的一個分支學科。互動設計 ﹙interaction design﹚ ：互動設計，顧名思義，是設計中的一個領域，是一種實踐方法，通常為了解決特定使用場景下特定人群的使用過程中，人與機器（或軟體、網站）如何更方便簡單地「對話」的問題。通常互動設計主要是設計人與產品之間的交互流程，即第一步做什麼、第二步做什麼等，也涉及對產品界面框架、信息架構的設計。
  • 汽車人機互動設計,業內人士是怎麼看的?
    汽車人機互動作業系統為大家所了解的，寶馬iDrive，寶馬新7系上市的時候iDrive為其博得了不少關注，在其人機互動上面使用了行業裡較為先進的手勢識別，可進行簡單的基礎控制，如音量調節，掛斷電話等。其基本原理是寶馬的技術人員在其天窗位置放置了一個攝像頭，此攝像頭能夠識別駕駛者的特定簡單手勢，然後做出系統預定的反應。
  • 基於STM32的可攜式人機界面系統
    STM32處理器的可攜式人機界面系統。實現了可以自定義漢字字庫的人機界面系統。 　　在全站儀應用於飛機的測量過程中，常會涉及到計算，以滿足不同的應用環境與測量要求，以往的方式是測量後期編輯軟體在計算機上實現，現代測量迫切需要一種可攜式手持計算系統，來完成實時的測量要求，而這一系統中中文人機界面成為一種事實上的行業標準。實現顯示漢字的TFT液晶和可輸入數字的小鍵盤已成為智能設備必不可少的組成部分。
  • 一種新型自修復人機互動水凝膠觸摸板
    圖片來源：CC0 Public Domain中國科學院(CAS)寧波材料科技與工業研究所(NIMTE)的Chen Tao教授領導的研究團隊與CAS北京納米能源與系統研究所合作，開發出一種以透明納米複合水凝膠為基材的新型、自修復和自黏附的柔軟人機互動觸摸板。
  • 「觸摸」未來:人機互動HMI為我們搭建通向新時代的橋梁
    而作為機器與人類之間「溝通」的橋梁，人機互動HMI在當下所扮演的角色正變得日益複雜起來。隨著智能化技術逐漸滲透到各行各業，大到社會層面的工業生產、醫療衛生，小到個人層面的工作生活、交通出行，處處我們都不難發現人機互動的影子。
  • 在設計過程中,有哪些不容忽視的互動設計要點?
    人機互動界面的視覺感知人機互動界面中用戶的視覺感知過程遵循著視覺感知過程的規律，即眼睛運動獲取界面信息粗略特徵圖，並將其傳遞至大腦，根據注意力的需要，大腦加強與目標相關的信息並抑制不太相關的信息，指引眼睛關注目標的潛在區域，並進一步構建詳細的特徵圖，通過對界面信息連續的選擇與過濾，用戶最後鎖定目標獲取所需信息。
  • 三種界面交互類型,四種隱喻設計方法
    簡單說，隱喻設計它可以將現實生活中用戶熟悉的事物以多種形式映射到界面中，從而使用戶不熟悉的概念、陌生且複雜的操作等變得熟悉與簡單。它不等同擬物設計，隱喻是一個大的概念，界面中充斥著不同的隱喻元素。本文將常見的隱喻元素按照視覺、聽覺、觸覺三種界面交互類型分類，並整理了四種隱喻設計方法，以供大家參考。一. 界面隱喻的類型1.
  • Vision BMW i Interaction EASE自動駕駛人機互動概念座艙全球首發
    日前，Vision BMW i Interaction EASE自動駕駛人機互動概念座艙在2020北美消費電子展上全球首發。其超越現實的人機互動理念，前瞻性地展示了寶馬的自然交互未來，讓人們超前感受自動駕駛時代妙不可言的出行樂趣。寶馬堅信個人移動出行是充滿魅力且富有情感力量的。
  • 生物粘性電子界面,實現穩定高效人機界面交互
    生物粘性電子界面能夠快速將電子設備與各種體內組織進行有效粘合，實現長期穩定的雙向電信號的傳導。並且具有與組織相匹配的高柔韌性和高生物相容性。活體動物實驗證明了生物粘性電子界面有望發展成為一類普適性的方法，快速穩定的將電子醫療設備與人體組織進行功能性集成。此外，生物粘性電子界面能通過外界刺激脫粘附，實現植入設備的無創取回。
  • 重構內容展示與交互方式 vivo新作業系統OriginOS引關注
    新系統從UI界面設計、人機互動邏輯、界面通知、壁紙體驗等各方面都進行了升級。也有消息稱，為了打造這個全新系統，vivo從蘋果ios研發團隊挖了人。對此，vivo高級副總裁施玉堅在分享了OriginOS誕生故事時也萬分感慨：「我們從未停止在手機作業系統上的探索，我們一直在思考，還能夠解決哪些痛點和需求？
  • 極致體驗｜最懂您的賽爾102S人機互動
    賽爾102S之所以在客戶應用中擁有良好的口碑，擁有的不僅是技術上的專研，還有緊跟市場需求，不斷改良與優化，最終給予客戶最完美的人機互動體驗。賽爾102S作為工業級的產品，卻擁有消費級的人機互動體驗，這就是賽爾無人機的「工匠精神」。
  • 從「微軟小娜」看PC端的智能人機互動
    日前，微軟發布了一款智能人機互動軟體「微軟小娜」，作為全球首款個人智能助理，「她」可實現「幫助用戶進行日常安排、回答問題」等常規功能，並且能夠通過「記錄」、「學習」，來實現「人機互動」。然而這項功能還僅停留在windows手機端，PC端還未正式開放。日前，百度推出了一款「桌面百度」應用，結合了百度強勢的搜索功能，配合服務，開啟了PC端「人機互動」的新的一頁。
  • 融合科技與美,DiLink 3.0系統全新UI開啟人車交互新時代
    不同於以往的UI界面，DiLink 3.0系統全新UI採用動態HMI界面設計，科技感大幅提升；圖標排列方式和樣式的調整，令桌面內容更加豐富，操作更加便捷。人車的溝通交流如行雲流水般順暢自然，給用戶帶來極致的交互體驗。互動設計靈動、流暢、有內涵，打造"更加懂用戶"的汽車智能網聯繫統加深人車交互，讓車更懂人，是各汽車品牌在智能化時代的永恆追求。
  • 超全面的交互自學指南
    UI更側重用戶視覺體驗與基礎操作體驗，而互動設計會更加關注用戶的整體使用體驗，從用戶行為到情感關注，交互的關注點會比較多，能夠實現的用戶體驗價值也更高；因此掌握互動設計也是設計師提升自我的一種價值，簡單來講：一是商業賦能，二是自我提升。