iOS和Android規范解析:導航設計總結

3 評論 14537 瀏覽 123 收藏 10 分鐘

本文主要是對iOS和Android兩個設計規范中關于如何設計導航的介紹,enjoy~

前面幾周,我們依次介紹了iOS和Android設計規范中,關于導航控件的內容,各控件對比見下面的表格:

掌握了這些導航控件,今天跟大家說一下兩個設計規范中關于如何設計導航的介紹。

Material Design Guideline

導航把內容組織起來,因此用戶可以在你的應用里更方便地找到需要的內容。導航的設計,可以包含經常訪問的頁面,設置選項,或者你希望用戶進行的操作內容。

如何選擇最適合你的應用的導航類型呢?你需要首先確定你的應用的用戶是誰,他們使用你的應用的典型路徑,以及你希望他們進行的操作是什么。

例如,如果你在設計一個飯店應用,那么應用的用戶可能需要的操作有:進行預訂、在網上po菜單(中國人更可能是po菜的照片啊,喲喂)、或者寫評價。通過確定大多數用戶的目標是什么,你可以更好地設計你的導航結構,以滿足他們最優先的需要。

下面詳細介紹如何確定一個應用的導航結構。

制作任務清單

找出你的應用的用戶是誰,以及他們的角色是什么,例如消費者?飯店老板?或者記者。找出那些他們都想執行的、最普遍的任務。

找出你的關鍵用戶,以及他們可能會進行的操作。

確定優先級

給用戶的任務分出優先級:高、中、低。在UI界面中,給那些用戶經常使用或者優先級高的功能以更突出的設計。

根據用戶需求的改變,隨時調整優先級排序。

當為一個飯店應用設計導航時,最高優先級的任務包含:查看飯店的信息或者找到新的飯店

分組和排序

找出用戶在你的應用中操作的所有流程路徑,并通過研究這些路徑確定你的導航設計:

– 將用戶常用的功能放在導航的顯著位置;

– 將相關聯的任務分成一組,并通過這些分組來確定導航的結構。

不論用戶是希望找到一個新的飯店,或者是查看他們收藏的飯店,這兩個操作都指向查看飯店信息這個操作。因此,我們需要在用戶搜索或者查看收藏的流程里,讓用戶可以容易地查看飯店信息。

拆解

將復雜、大型、或者模糊的用戶任務分解成更小的用戶任務。這些更小的用戶任務可以是更常用的、更易懂的、或者更好的滿足用戶目標的。

比如,將搜索這個大任務,分解成“通過名稱”、“通過地點”、或者“通過受歡迎程度”這三個更小的操作,可以揭示出作為導航的一部分,頁面里需要添加這三個操作。

大任務“找到一個飯店”實際上會包含許多更小的任務,比如:瀏覽附近的飯店、通過名稱搜索、通過受歡迎程度搜索。這些更小的任務對于用戶搜索來說,會更簡單。因此它們應該被加入到你的導航設計里。

iOS Human Interface Design Guideline

人們不會注意到導航的設計,直到導航沒有滿足人們的期望(而讓人們受挫)。設計師的任務,就是設計一個支持應用的架構和目的的導航,而讓用戶不會注意到它。導航的設計,應該讓人感到自然和熟悉,而不應該主導了一個界面或者把用戶的注意力從內容引開了。在iOS系統里,有三種主要的導航形式:

層級導航

在每一級頁面只選一個入口,直到用戶到達他們的目標頁面。如果要去往另一個目標頁面,用戶必須一步步返回或者從頭開始重新選擇。系統里的設置和郵件使用了這種導航形式。

層級導航示意

扁平導航

扁平導航允許用戶在多個內容分類之間切換。系統的音樂和App Store使用了這種導航形式。

扁平導航示意

內容驅動或體驗驅動導航

該種導航允許用戶在內容間自由地切換,或者內容本身就定義了導航。游戲類、書籍類、以及其它沉浸式應用一般采用該種導航形式。

內容驅動或體驗驅動導航示意

有些應用綜合了多種導航形式。例如,應用的大框架采用扁平導航,而每個分類里采用層級導航。

關于導航,蘋果設計規范給出了以下建議:

  • 總是提供清晰的路徑。用戶應該總是能夠知曉他們現在在哪兒以及如何去到他們的目標頁面。無論采用何種導航形式,到達內容的路徑是邏輯清晰、可預測、容易掌握的,這一點至關重要。一般來說,給每個頁面分配唯一的路徑。如果你需要讓用戶在不同的情況下都看到同一個頁面,那么請考慮使用上拉菜單、警告框、彈出框、或者模態視圖。
  • 設計一個能讓用戶快速、容易地到達內容的信息結構。認真組織應用的信息結構,以便使用最少的交互操作和頁面(就能承載下所有的信息)。
  • 使用手勢來創造流暢的體驗。讓用戶在操作時遇到最少的阻力。例如,設計師可以讓用戶從屏幕邊緣劃動以回到之前的頁面。
  • 使用標準的導航控件。用戶對于導航控件已經比較熟悉,這可以讓他們迅速的了解如何使用你的應用。

以上介紹了蘋果和谷歌設計規范中關于導航設計的部分。討論讓人認識更深刻,歡迎留言討論。

#專欄作家#

沐風,微信公眾號:“沐風與體驗設計”。人人都是產品經理專欄作家,2017年度作家評選最佳人氣獎。愛奇藝Phone和PC端交互團隊負責人。留德海龜,曾任職騰訊微生活、網易、宜信。6年交互設計經驗,專注設計領域,歡迎關注。

本文原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Unsplash,基于CC0協議。

專欄作家
沐風,微信公眾號:沐風與體驗設計。人人都是產品經理專欄作家,2017年度作家評選最佳人氣獎。愛奇藝資深交互設計師。留德海龜,曾任職騰訊微生活、網易、宜人貸。6年交互設計經驗,專注設計領域,歡迎關注。

本文原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 親,開頭的分段控件和標簽導航是不是弄反了?看你之前的文章,MD是標簽導航,iOS是分段導航?

    回復
    1. 哈哈哈哈哈、是的,反了。

      來自河北 回復
    2. 對,確實反了,不好意思 ??

      來自北京 回復