1. 程式人生 > >iOS介面互動設計規範

iOS介面互動設計規範

整理用來自用。

概述( overview)

  •       主題(Themes)主題章節,主要對設計規範整體進行一個介紹,引出清晰,遵從和深度三大設計原則以及美學完整性,一致性,直接操作性,反饋性,隱喻性和使用者控制性六大基本特性。
  • 基本介面元素,通過欄(bars),檢視(views)和控制元件(control)組成了三大基本元素
    • 欄(bars)當前所在應用中的具體位置,提供導航,還有可能包含按鈕或其他可以用來觸發功能或交流的元素
    • 檢視(views)包含使用者所最關注的內容,如文字,動畫及一些互動元素。支援滾動、插入、刪除和排列
    • 控制元件(controls)使用者觸發功能及傳遞資訊。如按鈕,開關,輸入框,進度條
  • UIKit同其他部件框架一樣緊密相連,如Apple pay,healthkit,researchkit。

互動(user interface)

  • 3D觸控(3D touch)在ios10之後再x軸,y軸外的另一維度z軸上對觸控互動方式立體化。
    • 主螢幕互動。
    • 輕壓與重壓
    • 利用輕壓檢視提供實時,內容豐富的預覽
      • 注意事項:
        1. 設計足夠大的輕壓檢視
        2. 統一使用輕壓和重壓功能
        3. 允許每個輕壓檢視都能被重壓
        4. 避免子輕壓檢視中呈現按鈕式元素
        5. 不要讓同一項具備輕壓和編輯選單兩個功能
        6. 適當時提供操作按鈕
        7. 避免為開啟被輕壓的專案提供操作按鈕
        8. 不要讓輕壓成為唯一的執行專案操作的操作
  • 輔助功能 (accessibility)輔助功能主要為針對小眾群體(殘障人士)的支援
  • 音訊 (audio)音訊主要講述聲音在不同場景下的不同展現
  • 身份驗證(authentication)身份認證主要告訴應用設計人員  引導使用者進行登入、註冊、驗證等操作
  •  資料輸入(data entry)使用者輸入時彈出合適的鍵盤
    1. 動態驗證
    2. 儘可能用選擇代替輸入
    3. 輸入欄顯示提示以輔助說明
    4. 收集完必須資訊後才能進行下一步
  • 反饋(feedback)反饋給使用者當前應用在做什麼事情。引導接下來使用者能做的和這麼做會產生什麼後果
  • 檔案處理(file handling)
  • 應用啟動體驗(first launch experience)
  • 手勢操作(gestures)
  • 載入(loading)
  • 特殊情景狀態(modality)
  • 導航(navigation)
    1. 層級導航
    2. 平級導航
    3. 內容驅動或體驗驅動導航、
    4. 永遠提供一個清晰的路徑
  • 評分與評論(ratings and reviews)
  • 請求許可(requesting permission)
  • 設定(settings)
  • 術語(terminology)
  • 撤銷以及重做(undo and redo)

功能(system capabilities)

  • 多工(multitasking)多工模式主要體現在大屏裝置中,具體表現為滑出(slide over),分屏(split view)及畫中畫(picture in picture)等模式
  • 通知(notifications)
  • 列印(printing)
  • 快速檢視(quick look)
  • siri

視覺設計(visual design)

  • 動畫(animation)
  • 品宣(branding)品牌辨識度
  • 顏色(color)ios中,顏色能夠暗示可互動性、增加活力以及提供視覺連續性
  • 佈局(layout)佈局能夠被配置在不同的裝置中,自動改變形狀和大小
  • 字型(typography)iOS系統字型。字型易讀性,清晰性和一致性

欄(bars)

  • 導航欄(navigation bar)導航欄出現在應用螢幕的頂部,狀態列之下,他能實現層級應用介面的導航
  • 搜尋欄(search bars)
  • 狀態列(status bars)螢幕頂端出現
  • 標籤欄(tab bars)標籤欄在應用螢幕底部出現
  • 工具欄(toolbars)工具欄在螢幕底部出現

檢視(views)

  • 功能表單(action sheets) 功能表單是響應於控制元件或動作而出現的一種特定的警報樣式
  • 活動檢視(activity views)在當前上下文中,活動便是一項任務,如複製,收藏或查詢。
  • 警告框(alerts)警告主要用來傳遞應用程式或裝置狀態相關的重要資訊
  • 集合(collections)一個集合主要用來管理一系列有序的內容集
  • 影象檢視(image views) 影象檢視主要為用來在透明或不透明的背景下顯示單個影象或動態影象
  • 地圖檢視(maps) 地圖檢視允許你在應用內顯示地理資訊
  • 浮層(popovers) 浮層通常是當用戶點選螢幕上的某個內容的控制點或區域在其上方出現
  • 滾動檢視 (scroll views) 滾動檢視主要用來去瀏覽文件中的文字
  • 分列檢視(split views)
  • 表格檢視(tables)乾淨高效的顯示大量資訊
  • 文字檢視(text views) 顯示多行文字內容  可編輯或不可編輯
  • 網頁檢視(web views) 網頁檢視可以載入並顯示網頁內容

控制元件(controls)

  • 按鈕(controls)
  • 編輯選單(edit menus)包含剪下,貼上,選擇,選擇全部以及刪除
  • 標籤(label)標籤用來描述螢幕中的互動元素或提供一個簡單的資訊
  • 頁面控制元件(page controls)頁面控制顯示了當前頁面在一個頁面序列中所處的位置,其以一系列小圓點表示
  • 篩選欄(pickers)一個篩選框包含一個或多個可滾動的含有不同值的列表
  • 進度指示器(progress indicators)使用載入器和進度條,保持動態
  • 重新整理控制元件(refresh content controls)重新載入內容
  • 分段控制元件(segmented controls)兩個或多個片段線性集合 為互斥按鈕
  • 滑動條(sliders)水平模組 主要用來調節音量和亮度
  • 調數器(steppers)加減號 用於增加或減少數值。
  • 開關(switches)互斥開關
  • 文字輸入框(text fields)通常單行且固定高度。點選時自動彈出鍵盤。

擴充套件功能(extensions)

  • 自定義鍵盤
  • 檔案庫
  • 主螢幕快速操作
  • 照片編輯
  • 分享及操作
  • 小部件