使用者介面的設計何為優秀 ?
- 要兼具能讓使用者自然學會操作的易用性與令人愛不釋手的趣味性。
- 要讓人感受到全新的體驗與價值，更要讓使用者能自然而順暢地操作，並達成其目的。
以使用者常見、熟悉的經典UI為設計基礎。
有哪些經典UI ? 特色?
將智慧型手機App及網站所需之必要、基本UI，以構成元素為單位，分為多種類型來加以介紹。
ch0-1 : 基本要件、畫面類型、畫面切換。
ch2-7: 依UI用途來分類並介紹。
ch8-10 : 圖示和動態效果。

ch0 : 智慧手機UI簡介

為了設計智慧手機的畫面，有兩件事要了解
- 了解我們想設計的媒體，手機
  - 手機的UI有哪些種類?
  - 畫面有何特色?
- 了解我們的使用者
  - 如何操作手機?
  - 在什麼環境下襙作手機?
所謂設計UI，就是指規劃、設計手機與使用者之間的中介。

智慧手機UI特性及專們術語

在思考UI的設計時，必須考量iPhone和Android的差異
- 是否具備實體按鈕?
- 畫面尺寸大小?
- 設計規範?
Android手機和iPhone的主要差異就是實體按鈕與系統覽列。
- iPhone 只有一個實體按鈕Home
- Android 除了Home鈕外，還有選單、返回、多工等實體按鈕。
- 這些按鈕也可以在畫面中以系統導覽列的形式存在。
版本: 必須調查使用者的使用趨勢，設定支援的版本範圍。
設計規範 : 寫明版面配置及UI元件。(應該要讀)
- 設計規範提出了什麼規則 ?
- 目前手機能夠做到那些功能?
- window phone 也有出使用規範(值得一讀) +手機App與手機網站
- 手機app 不論是運作的順暢度、顯示與功能都比手機網站優秀許多。
- 手機網站雖然在顯示與功能方面較為受限，但在服務版本更新上較為方便，和其他服務整合的能力也較為優秀。

手機UI的概觀

App? 網站? iPhone? Android?
頁首(Header)
頁尾(Footer) : 畫面最下端的區塊，此區塊較貼近使用者的手，利於操作。故主要的導覽工具及操作畫面的UI多半都配置在此。
導覽元件(Navigation) : 用來讓使用者在各畫面間切換移動的UI。
重疊顯示(Overlay): 在原畫面上暫時顯示某個元素，藉以提示使用者進行操作。
- 模態(Modal)刑式 : 會讓使用者只能操作重疊在上層的元素，無法操作原畫面。例如: 模態視窗、模態訊息
- 下拉式選單、非模態訊息 : 讓使用者也能操作原畫面。
控制元件
- 控制: 交由使用者自己操作畫面狀態，或修改本身的設定狀態。
  - 更新控制項 : 將畫面內容更新至最新狀態。
  - 分段控制項 : 變更目前顯示內容
動作(Action): 使用者透過UI所進行的各種行為，例如: 儲存、張貼、刪除、編輯。亦即使用者為了達成任務所執行的動作。
實體按鈕 : 設置手機螢幕之外，實際可按的UI按鈕，IPHONE只設置一個HOME鍵，Android則有多個。
狀態列(Status bar) : 主要用來顯示系統、裝置資訊及通知資訊等。

使用者的操作方式與情境

思考使用者與手機是在怎樣的情境下、以什麼方式互動 ?
操作手勢
- 電腦: 透過滑鼠、鍵盤來間接操作。
- 手機: 用手指直接觸碰顯示於畫面上的UI來操控。
  - 輕觸(Tap) : 以手指輕輕點一下，相當於以滑鼠點按一下。
  - 撥動(Flick): 以手指快速地撥一下，通常用於往上、往下捲動畫面。
  - 滑動(Swipe): 以手指滑過，基本上和撥動差異不大，但手指接觸螢幕的時間較久，用於左、右方向切換畫面。
  - 長按(Pass): 以手指按住畫面，此手勢通常用於長按桌面圖示，以便刪除或移動。
  - 拖曳(Drag): 按住並移動手指，通常用於往上、往下捲動畫面或是搬移元素。
  - 手指靠攏/分開(Pinch in/out) : 以兩隻手指接觸畫面，然後縮小(靠攏)或拉大(分開)手指間的距離，主要用於，縮放照片、地圖，以縮放畫面元素為目的的操作。
操作情境
- 手機可在各種環境中使用。
- 用戶和手機互動的方式會隨環境而改變
- 所以必須事先調查用戶是在怎樣的情境中使用我們所設計的網站或App。
- 了解用戶的使用方式，才可能做出更易用的UI。
用戶與手機的互動方式?
- 單手握持並以該手操作 :
  - 例如 : 在捷運車廂中單手抓著拉環、一隻手提著包包走路。
  - 設計UI時，我們必須考量大拇指操作的範圍。
  - 如果將常用的UI放在手指構不到的位置，易用性肯定會降低。
- 單手握持並以另一手操作:
  - 例如: 在安穩的環境，坐在捷運車廂裡的座位上、坐在桌子前。
  - 由於雙手都能自由運用，使用者就能以單手握住手機，然後以另一隻手操作。
  - 所以能夠輕易接觸到整個畫面。
- 雙手握持並以雙手操作
  - 通常是用在以鍵盤輸入、操作遊戲類App之類的。
- 將手機放在平面操作。
  - 例如: 一邊做菜一邊查食譜、一邊念書一邊查字典。
  - 以手機來輔助使用者做其他事的情況下。
  - 因為做其他的活動，有可能因為手弄髒了，而造成使用者本身很難進行操作。

UI設計的基本術語

UI元件 :
- 將UI設計的各部分以物件為單位分割成元素，就叫做UI元件。
- UI元件包括導覽列、按鈕、頁首....等等。
象徵:(Metaohor)
- 以譬喻某種事物的方式來表達。亦即以現實世界的事物來比喻畫面內容。藉以暗示使用者其運作方式。
- 不受限於真實世界中的事物，仍能令人聯想到用法及經驗的東西，才是最洽當的象徵。
- 例如: 資料夾。
情境故事(Scenario)/任務(Task)
- 將使用者在網站或App中發生的事情，以文字具體地描述出來。
- 出現在情境故事中的使用者，會被當作Persona(角色)的虛構人物。
- 任務: 為更小的單位，是指使用者採取的各種行動，例如: 搜尋、加入我的最愛...等等。
示能性(Affordance)/示意符號(Signifier)
- 是能性 : 能讓使用者認知並判斷出物體用途。
- 例如 : 眼前出現一張椅子(提示人可以坐)。
- 例如 : 一扇可被推開的門，在適合推的位置上黏一塊如手掌大的飾板。便等於提示只要推一下該飾板即可開門。

CH1 畫面類型

需要什麼樣的畫面?
各畫面該如何連接?
各畫面該如何切換?
5種主要的畫面類型
- 絕大部分的App或手機網站畫面都可歸屬到這5大類型之中。
- 依此概念為基礎來組織畫面的切換順序，便能設計出操作順暢的App或網站。
- 起始畫面。
- 主畫面。
- 清單列表。
- 內容細節。
- 輸入與操作、設定畫面。

起始畫面

起始畫面是在啟動App後，使用者剛開始要使用服務時出現的畫面，主要用來說明App的內容。
雖然是最早出現的畫面，但其目的是以介紹為主，故對開發初期階段階段，並非絕對必要的畫面。
閃現(Splash) :
- 一旦準備完成，便會自動切換至下一個畫面。
- 起始畫面可以分為兩種類型
  - 一是顯示商標或服務名稱，用於品牌宣傳。 +另一類是顯示與主畫面類似的影像，用以減緩等待App啟動的焦慮情緒。 +逐一簡介(Walk-through)
- 使用者首次啟動App時，用來簡介服務特點，以及操作方法等畫面。
- 子畫面:
  - 頁面指示器
  - 滑動式導覽頁面
指導標記(Coach mark)
- 會將UI的作用以及首先應做的動作等說明，暫時重疊在畫面上。
- 由於可直接就實際畫面做說明，因此指導標記非常適合用來解說操作方式。
- 指導標記也可以只針對畫面中一部分的UI做介紹(泡泡訊息)。
空資料訊息(Empty message)
- 這是指在畫面中還沒有任何內容存在，故沒有資料可以顯示。
- 或是在網路通訊有問題而無法顯示資料等情況下，用來告訴使用者目前無法顯示內容的畫面。
- 此畫面不能只是用訊息傳達目前狀況，還必須明確指出下一步應採取什麼樣的行動。

主畫面

藉由各種導覽元件，負責與其他畫面連接的畫面。
入口(Portal)
- 因為此畫面擔任的是連往各部份的中樞角色，故須配置導覽元件，以及可同時呈現多項內容的清單元件。
使用者(User)
- 這是匯總使用者相關資訊的畫面
- 顯示使用者所發布的內容、狀態、個人資料。往往會用到清單元件。
- 登入情況下 :
  - 顯示連往設定及編輯個人資料的導覽UI。

電子商務

提供使用者購物服務的主畫面
畫面類似入口網站，但目的就是要使用者購買商品。所以會配置聯網各項商品的導覽元件。
- 輪播式面板 : 介紹新商品及推薦商品。
- 垂直清單或格狀清單 : 陳列商品。
- 搜尋表單: 文字欄位的搜尋表單，讓使用者直接連至目標商品。
- 在電子商務會運用各式各樣的手法引導使用者連往商品。

企業

作為企業門面的畫面。
通常在頁首配置企業商標，並設定返回主畫面連結。
主要使用導覽類UI
垂直式清單 : 引導使用者連至公司概要及產品目錄，好讓使用者更容易取得企業的各項資訊。

清單列表畫面

連續顯示多個項目的畫面。
通常是用在瀏覽並搜尋目標內容時使用的畫面。
搜尋結果 : 使用者執行搜尋動作後，顯示出的搜尋結果一覽畫面。多半是用垂直式清單來顯示。
- 至於搜尋結果，則常利用分段控制項。
- 若結果延伸跨越多個畫面，就會用分頁控制項及大量清單分控制項。
時間軸 : 常見於社群服務中，依時間順序來顯示內容的畫面。
- 此類畫面往往合併運用可針對各項內容執行動作的操作面板。
- 更新控制項 : 可將畫面更新至最新狀態。
- 大量清單分頁控制項 : 追蹤過去資訊。
相簿(Gallery)
- 用來顯示照片或影片等縮圖列表的畫面。
- 為了外觀整齊美觀並可填入大量縮圖，多數的相簿畫面都以格狀清單來呈現。
通知訊息、活動
- 在社群服務中，用來顯示使用者的好友資訊、他人對使用者所發表內容的留言。
- 多半依據新舊順序。以清單列表的方式來顯示誰做了什麼事。

內容細節

位於畫面階層結構中較深處的獨立內容畫面。
對許多使用者來說，這裡就是目的地。
檢視器
- 為了顯示照片及影片等畫面。
- 滑桿 : 用以控制影片播放進度及聲音狀態。
- 輪播式面板 : 可移動顯示前後縮圖。
- 滑動式導覽面板 : 控制畫面切換。
文章
- 分頁控制鈕 : 長篇文章。(分割畫面以利使用者閱讀)
- 跳至頁首 : 讓使用者能快速回到畫面最上端。
地圖
- 用來顯示目前所在位置或目的地位置的地圖畫面。
- 清單列表 : 若需要同時顯示多個地點。
- 為了盡可能讓地圖顯示得最大，導覽元件與操作鈕的配置範圍要縮到最小。
- 若使用導覽列及動作列等元件，可將色彩設定為半透明，進一步擴大地圖顯示範圍。
商品
- 這是使用者查詢或購買商品時，顯示商品資訊的畫面。
- 購買商品透過此畫面，所以必須包含下列資訊
  - 商品照、價格、簡介、由第三方提供的商品評價。
- 評級類元件 : 商品評價意見。

輸入與操作、設定畫面

讓使用者執行動作的畫面。
經常進行輸入文字較複雜的操作手勢，故須以易於執行、不易造成操作錯誤的UI設計為優先考量。
註冊/登入 :
- 文字欄位 : 登錄使用者名稱、密碼等資訊。
- 註冊成功或失敗等回饋訊息。以及要求使用者確認等訊息的顯示方式。
- 等待指示器 : 登入時，若要等待較長時間才會切換到下一個畫面。
發佈資訊
- 內容 : 文字、位置資訊、照片、影片。
- 明確呈現所發佈資訊的內容種類。
- 發佈是關鍵性動作，故設計必須特別小心，一定要避免操作錯誤。
相機擷取
- 拍攝照片或影片
- 此畫面一定要有快門鈕、工具列。
設定/管理
- 用來設定、管理App的畫面。
- 階層式選單 : 當內容複雜時，可用此單來分層呈現。
- 垂直式清單 + 切換開關 : 設定項目列表。
- 儲存鈕 : 讓使用者儲存表單內容。但手機App則會在切換開關一變更狀態時就自動儲存設定。藉以減輕使用者的操作負擔。

畫面切換

5種畫面 + 切換順序 = 手機網站及App
切換畫面著重在服務重要的功能。
認識畫面切換示意圖
- 畫面以矩形表示、標出畫面的標題、所用的畫面類型、主要的UI。
- 切換關係以直線連接表示。可以直線上註明UI元件，表示該處切換是經由哪個UI元件?
畫面切換示意圖的運用方法:
- 先明確定義出各個畫面的作用? 再以5種畫面類型為線索，便能簡單快速地構思出切換順序。
- 主畫面、清單列表、內容細節在各種畫面中，利用率很高。
- 若能事先製作好畫面切換示意圖
  - 考量畫面間的連結?
  - 用於切換畫面的導覽元件?
  - 要透過哪種動作切換畫面?
  - 例如:
    - 清單列表畫面 : 常用於導覽列，故所需元件會以導覽列(ch3)，以及可列舉眾多項目的清單類(ch4)為主。
    - 輸入資料畫面 : 以發佈、紀錄資料為主，故所需元件便以表單(ch5)及用於回饋資訊的訊息類UI(ch6)為主。
    - 設定畫面: 表單的切換開關及清單類UI元件。
怎樣的情況適合採用哪種元件?
一開始不要考慮每個畫面裡的UI，重要的是利用畫面切換示意圖，依據畫面間的連結及畫面類型來掌握各畫面的主要作用。然後思考服務及App的整體設計。
不見得所有App或網站都完全符合這些類型。若設計出不屬於任何既有類型的部分，可以另外建立一個新類型，或是從這5種類型中再細分出子類型。
案例1: 新聞服務
- 清單列表畫面、內容細節畫面
- 將新聞分類(標籤式導覽列)
- 可利用滑動式導覽面板，讓使用者能用滑動手勢切換閱讀前一篇或後一篇的報導文章。
案例2: 搜尋服務
- 在清單列表畫面提示各種搜尋方式，並讓使用者能以最短路徑到達內容細節畫面，就是關鍵所在。
- 結構 : 文字搜尋、分類檢索、上榜食譜等搜尋方法到達各自的清單列表畫面。再從該處進一步篩選，並進入各別的內容細節畫面。
案例3: 發布訊息服務
- 發布訊息除了清單列表和內容細節畫面外，輸入畫面亦極為重要。
- 使用者在輸入畫面輸入內容後，會將內容顯示於清單列表畫面，再提供內容細節畫面讓使用者檢視個別訊息的詳細內容。
案例4: 通訊錄服務
- 清單列表、內容細節、輸入、編輯。
網站營運與UI設計的模式化
- 將電腦網站、手機網站的UI模式化，並整理為常用的架構。開發人員以此為基礎來建構UI。(framework)
- 網路服務的設計 : 規範化、文件化，還能以設計規範及原則為基礎，將具體的UI架構提供給開發者使用。
- 模式化 = 模組化。
- UI本身雖可模組化，但運用情境與運用方法卻難以模組化。
- 有3個好處
  - 縮短開發時間
    - 因為在已確定的基礎上建構畫面，所以在開發原型時就可以使用相當有品質的UI
    - 利用既有的設計也可以減少品質上的確認，縮減開發時間。
  - 使用者經驗的標準化
    - 能夠經常深入研究、改良各種元件的最佳設計。
    - 若已確定某種設計對使用者方便好用，可將之模組化，就能讓該設計隨時處於可利用的狀態。
  - 透過架構化達成整體管理。
    - 維護上 : 通常只需修改一處。所以模組化、結構化維護上會更方便。

ch2 基本UI元件

有些UI被廣泛應用於許多手機App及網站，是建構畫面時的必要元件。先搞清楚這些基本UI元件的特性和運作方式。
UI元件不是單獨運作，而是相輔相成。

頁首

手機網站網址列之下的區塊，是幾乎在任何畫面都會看到的重要區塊。
主要作用 : 顯示目前處於哪個畫面? 或哪個網站? 並配置主要的導覽列及操作控制類的UI。
特性 :
- App:
  - 一捲動會隱藏頁首。
  - 因為使用者啟動時已經知道是什麼App，因此沒有必要一直在畫面上顯示App名稱。
  - 頁首區塊的名稱 :
    - iPhone : 導覽列(Navigation bar)
    - Android : 主要動作列(Main action bar)
    - 共通點:
      - 都會顯示目前畫面的標題。
      - 在主畫面以外的畫面還會加上返回鈕/Home鈕。等返回主畫面用的導覽按鈕。
    - 注意事項 :
      - 沒有什麼特殊的運用限制。
      - 只要注意別在頁首中塞進太多要素即可。若把網頁頂端弄得太大，會造成主要內容被推到畫面下方。
      - iPhone 和 Android 的頁首構成要素相同
      - 標題與返回鈕的配置關係 :
        
        iPhone : 返回按鈕所顯示的標籤文字通常為前一個畫面的標題。畫面標題為置中。
        
        Android : 返回按鈕為向左的箭頭圖示或應用程式標誌。畫面標題為靠左對齊。
        
        若直接將Android的UI移植到iPhone，就會造成許多人將返回按鈕上的畫面標題，誤認成將返回的畫面名稱。
- 網站:
  - 往下捲動，頁首會黏在頂端。
  - 會持續顯示同樣的頁首，因為使用者是從從其他網頁過來，須利用頁首區塊來讓使用者辨識出所在網站。
  - 會在頁首區塊配置服務名稱及各式各樣的導覽控制。(目的 : 不論身處於哪個頁面，都能看到網站資訊)
iPhone 的頁首(導覽頁) :
- 中央 : 配置畫面標題
- 左側 : 返回前一個畫面的導覽控制項。
- 右側 : 配置用來執行主要動作的按鈕(最多3個)。
- 也可以用分段控制項來取代畫面標題。
- 將頁首設計為半透明狀態，便能讓主要內容的顯示區域更大些。
- 或是隔一段時間不碰螢幕，便隱藏頁首集頁尾部分。若想重新顯示只要輕觸畫面即可。
- iPhone App的導覽列高度為44pt。
Android 的頁首(主要動作列):
- 左側 : 顯示返回前一畫面的導覽控制以及畫面標題
- 右側 : 顯示重要的動作按鈕。
- 畫面標題 : 有時也會配置可用來切換畫面狀態的下拉式選單。(相當於IPhone的分段控制項)
- 若在右側配置搜尋欄位，可按一下按鈕就將輸入欄位顯示出來。
手機網站
- 大部分網站採取商標至中、類似導覽列，或是商標靠左、類似主要動作列。

頁尾

手機App畫面下端的區塊。
因為離手部很近、易於操作，故在App中主要用來配置控制用的元件。
iPhone :
- 可以配置屬於標籤式導覽列之一的標籤列，作為連往主要畫面的導覽工具。
- 或是，配置工具列
Android:
- 不會在頁尾配置導覽元件，而會在上端的主要動作列下方配置標籤式導覽列或直接於頁首中配置下拉式選單。
- 頁尾也可配置工具列。
導覽列 : 主要用於橫跨主要頁面
工具列(Tool bar): 用來顯示與目前畫面有關的可執行動作。
- 每個按鈕 : 44 x 44
- 最多可配置7個，但會很擠，配置5個就好。
- Android 稱之為底端列(Bottom bar)
- 若項目很多，可以加上三個點，按下後會顯示更多可執行動作，這種設計稱為動作溢出。
- 工具列/底端列也能以半透明形式顯示，好讓主要內容的顯示範圍能更大。
- Android 的系統導覽列
  - 返回前一個畫面、回到HOME、顯示最近啟動的App。
  - 以往都是硬體選單。
  - 4.0 之後，逐漸被動作列取代，取於代之的便是系統導覽列。

模態視窗

何謂模態?
模態的分類 : 依照使用的狀況，會有不同的應用 :
- 動作表 : 這種模態視窗會顯示與畫面有關的可執行動作。
  - iPhone : 動作表與活動視圖控制器。
  - 為了讓使用者回到原畫面，在最下端會配置取消鈕。
- 導覽類 : 用來顯示導覽項目選單的模態視窗。用法類似下拉式選單。
- 控制類 : 這是在設定等過程中，讓使用者控制App或畫面時使用的模態視窗。
  - iPhone : 設定畫面是以階層式清單與垂直式清單類的元件構成。
- 訊息類 : 通常對使用者執行的動作做出提醒或警告。或是傳達更新資訊。
  - iPhone : 警告元件，例如: 刪除之後無法還原。
- 發佈資訊 : 用於發布新資訊的模態視窗。例如: 留言，通常配置文字欄位。

上拉式視窗

主要用於顯示選單等導覽元件
能將視窗最小化到只剩標題部分。
幾乎以重疊上滑/下滑的動態效果顯示，並將原畫面整個遮住。
上拉式視窗可在儀表板的下端區域等處。
可加上圖示，與預先說明，故對使用者而言具有清楚易懂的優勢。
上拉式視窗很難運用，除非是搭配儀表板等元件，讓畫面空間較充裕。
Pattern 1 :
- 重疊上滑的形式 :
  - 一開始在畫面下端就顯示出局部，然後再由下而上顯示出整個視窗的形式。
  - 儀表板 : 將整個畫面都作成導覽元件。因此很難規劃出通知訊息的顯示區域，若使用上拉式視窗，使用者便能輕鬆從畫面下端存取更新等通知訊息。
  - 商品內容細節: 置於商品內容細節畫面下端，只要往上拉，即可看見該商品的尺寸資訊及商品相關說明。一開始的畫面是以商品照為主，使用者若有興趣便可以進一步檢視詳細資訊，是有效利用上拉式視窗的優秀實例。
Pattern 2:
- 重疊下滑的形式
  - 一開始就顯示上拉視窗
  - 將視窗重疊下滑，便能看見原本被遮住的內容。(很少見，因為若不調整而直接使用，沒有人知道他是上拉式視窗)

操作面板(Action Panel)

針對目標內容顯示出所有可執行的動作。(例如: Video)
主要配置在畫面內容中。
顯示、重疊、隱藏按鈕、隱藏目標內容
Pattern1 區塊型:
- 直接將可執行的動作，配置在畫面內容附近。(例如: 照片App的時間軸)
- 好處: 能讓使用者一眼看清可執行那些動作，
- 缺點: 擠壓畫面。因此只有該動作重要性很高才使用。
- 例如: Twitter推文的畫面也會直接顯示操作面板。
Pattern2 重疊型:
- 重疊在內容上
- 節省畫面
- 需要半透明的背景
- 一樣可持續顯示操作面板
Pattern3 下拉式:
- 一開始將操作面板隱藏
- 當使用者輕觸開啟面板用的按鈕，才顯示可執行的動作。(運作方式和下拉選單相同)
- 缺點 : 因為不會一直顯示操作面板，所以無法讓使用者一眼看出有哪些動作可執行。
- 在時間軸及清單列表畫面可使用此類型，能有較大的畫面空間。
- 若僅顯示單一要素的內容細節畫面，則使用區塊型。使執行動作一目了然。
Pattern4 滑動型
- 當使用者在目標內容上滑動時，才顯示針對該內容執行的動作
- 優點 : 能快速執行所需動作(因為只要滑動即可顯示)
- 缺點: 畫面沒有明確的按鈕，使用者可能無法察覺
- 定位為快顯選單。

UI 的視覺設計要有10個章節

   1. 畫面
       + 起始畫面
       + 主畫面
       + 清單畫面
       + 詳細內容畫面
       + 輸入與操作設定畫面 
       + 畫面切換
   2. 基本UI
       + 頁首
       + 頁尾
       + 模態
       + 上拉式視窗 
   3. 導覽與控制
   4. 清單
   5. 表單
   6. 通知與訊息
   7. 資訊的視覺化
   8. 圖示
   9. 動畫
  10. 風格

ch3 導覽與控制

導覽類與控制類的UI，都是為了讓使用者達成目標而設計的流程，設計重點在於使流程精簡單純，讓使用者能以最短距離達成目標。
電腦畫面大，所以同一個畫面可以包括導覽UI、控制UI、以及內容區域
手機畫面小，因此有時只會設計成只有導覽元件的畫面。

3.1 標籤式導覽頁

運用情境:
- 常被App和網站當作最上層導覽列使用。可從任一畫面隨時切換至其他畫面。
- 當你需要用到2-5個導覽項目時，可優先考慮使用此類UI。
特性:
- 經常出現電腦應用程式或電腦網站上，是使用相當熟悉的UI。
- 由於將各項目並列顯示，所以清楚易懂又具整體感。
- 相較於其他導覽元件，範圍較大，利於觸控操作。
- iPhone : 配置於畫面下端
- Android: 配置於畫面上端
- 要依平台的設計風格來選擇類型
- 必須將目前所在畫面的標籤和代表其他畫面的標籤做出區隔，操作才會更簡易直覺。
- 因為手機寬度有限，因此有人設計成可捲動標籤 +注意事項
- 每一個標籤要對應一個頁面
- 不要做出兩層式導覽列。可改用分段控制項或下拉式選單等控制元件來處理。

Pattern1 標準型

放在畫面上端當作最上層導覽列的類型。會將畫面分割為上下兩區，有利於集中使用者的視線。常用來切換顯示內容不同的畫面。

Pattern2 底端型(標籤列)

把標籤式導覽列配置於畫面最下端。在iPhone 上稱為標籤列。屬於標準的導覽形式。
最多可顯示5個項目，超過5個時，第5個標籤顯示為代表其他的三個點圖式。(超過5個可考慮改用其他導覽元件，或檢討架構是否太複雜)
能以拇指輕鬆觸控，不會增加使用者的操作負擔。建議使用於需頻繁切換畫面的情況。

Pattern3 底線型(頂端列)

底線型是指位於畫面上端，當作最上層導覽的類型。
底線型是以底線來代表選取的項目。

Pattern4 可捲動型

會隨者使用者選擇左、右側項目而滑動。
不會受到畫面寬度的限制，因此要設置幾個項目都可以。常見於Android App
因為沒有數量限制，當使用者看到此種導覽列，能否意識到畫面外還有其他選項，就是一個問題。
只適用於項目很多的情況。

Pattern 5 垂直型

導覽項目採縱向配置的類型，利用畫面的高度，能顯示出比水平排列更多的項目。
不建議水平，垂直導覽列同時使用，因為會佔據太多畫面。
手機App和手機網站皆可用。

3.2 分段控制項

運用情境 :

是在導覽列中呈現出群組名稱，而每個群組內含同類別的多個項目。
與其用來導覽，更適合用來控制畫面顯示的內容。例如: 變更搜尋結果的排列方式，或以不同的篩選條件來呈現顯示的內容。

特性 :

分段控制項中一定會有某個項目是已經選取的。
運作方式和標籤式導覽列一樣。
分段控制項不會將畫面分割為上下兩區。相對較精簡，因此比較容易配置。
利用其精簡的優勢，甚至還能和其他UI並列使用。
分段控制項應該要用來變更畫面中的內容。通常用來切換畫面的元件，是標籤式導覽列及下拉式選單。當同一畫面中出現標籤式導覽列和分段控制項時，通常是先以標籤式導覽列切換畫面，再用分段控制項來變更畫面內容。
分段控制項的項目數量不要超過5個。若是超過5個，各項目的字數會變得太少，不僅難以讓使用者使用者了解項目意義，也無法確保觸控空間。
分段控制項務必以單一群組的形式呈現。若沒有設計成群組，就很難一眼看出這些到底是控制元件還是執行動作的元件。
在狹小的畫面中，一定要讓使用者能一眼就認出各種手機UI的運作方式。

Pattern 1 : 標準型

Android一般是用下拉式選單控制元件來達成同樣的目地。
例如: 同樣都是圖片，但用不同的方式篩選呈現，例如: 格狀清單、時間軸或地圖。

Pattern2 : 行內文字型

此類型不用按鈕，而是採用垂直線來分隔分段控制項。
由於不像按鈕那樣有明顯的框線和立體感，分量感和存在感較低，建議用於重要性較低的情況。
此類型的UI常用於針對電腦設計的網站。若要用在手機網站上最好將留白調大。確保觸控空間夠大，以免操作錯誤。

3.3 滑動式導覽面板

運用情境

滑動式導覽面板是指讓使用者透過左右滑動，每次將當前畫面橫向移開，切換至另一個畫面。
此種UI只靠滑動手勢就能輕鬆切換畫面。常用於以較大畫面依序檢視郵件或照片等資訊。
也很適用在App的逐一簡介型起始畫面中，當作依序一步步推進的導覽介面。

特性

滑動式導覽不需要使用按鈕，只利用操作手式即可操作。是手機特有的介面設計。
由於畫面整體都可滑動，能夠提供簡單快速的操作效果。

注意事項

最好不要單獨使用，建議搭配頁面指示器，提示使用者左右兩側還有畫面存在。以及可透過滑動手勢來切換畫面。
不要將畫面的操作UI置於畫面中央，而要置於底部。避免滑動時的手勢被誤判為輕觸按鈕。

Pattern 1 標準型
設計可隱藏指示
若想讓使用者知道畫面可以滑動，可在畫面下方設置導覽指示。這些指示本身無法觸控，只是用來表示可滑動操作。

Pattern 2 以滑動式導覽面板搭配頁面指示器

這是在畫面下方顯示頁面指示器的滑動式導覽。利用頁面指示器，便能讓使用者了解可滑動操作，以及目前所在的位置。
還能讓使用者理解還剩幾個步驟才會結束。

Pattern 3 以滑動式導覽面板搭配標籤式導覽列

這是以標籤式導覽列作為頁面指示器的滑動式導覽，使標籤式導覽列也能以滑動手勢切換操作。
使用者滑動畫面時，導覽標籤也會隨之變動。焦點會移至目前所選的的標籤上。也就是以標籤取代頁面指示器。
不論是輕觸標籤還是滑動畫面，都能切換畫面。即使初次接觸的人也能輕易上手，是對使用者極為友善的UI設計。

操作手勢的可用性與可能性

手機畫面操作的最大特色就是能以手勢操作，故可為使用者帶來與操作電腦不同的全新體驗。而UI設計因此有了變化。
例如: 放大、縮小，不需要放大鏡，只需要以手指靠攏/分開來縮放。能保持畫面單純。
所有操作幾乎都能靠滑動、手指靠攏/分開等手勢達成，再加上流暢的動態效果，音效，來傳達操作手勢的反饋。
最好能以滑動手勢切換畫面。(因為會越來越普及)

3-4 下拉式選單

關鍵字 : 下拉式選單、三角形標記、動作溢出、三個點、控制型、分段控制項、泡泡型、三角形尖端、水平出現優點: 內容比標籤導覽列更多、不像模態視窗禁止其他操作缺點:

要多做一個動作，經常用到的項目，最好不要用。
列於畫面上端，不容易按到，會操作錯誤，所以要配置較大的輕觸區域。
過多的項目會被截斷，造成使用者無法點擊，最好不要超過7項。

(優點、缺點 : 跟其他類似功能的UI元件比較。)

3-5 階層式選單

標準清單

關鍵字: 階層性、數量多、候選清單、階層深度、項目數量、折疊式選單、搜尋表單、路徑比較圖、垂直式清單、向左滑、返回按鈕

圖形化清單

關鍵字: 格狀清單、儀表板、放大/縮小

3-6 折疊式選單

關鍵字: 階層較少、隱藏、朝下箭頭、朝上箭頭、與使用者的距離、畫面單純、泡泡型。

3-7 儀錶板

關鍵字: 網站主畫面、圖示、標籤文字、功能資訊多樣化、整體功能、標籤式導覽列、滑動式選單、徽章元件。

3-8 返回鈕/Home鈕

關鍵字: 前一畫面、首頁、指向左側、路徑導覽列、商標型、Home圖示型。

3-9 跳至頁首/頁尾

關鍵字: 往上或往下捲動到底、在同一個畫面內移動、在不同的頁面移動、朝上的箭頭、朝下的箭頭、重疊顯示型、使用者往下又往上、索引型。

3-10 分頁控制鈕

關鍵字: 下一個畫面或前一個畫面、搜尋結果、清單列表、

3-11 大量清單分頁控制項

關鍵字: 同一個畫面、捲入畫面最下端自動載入、按鈕型、類似關鍵字

3-12 更新控制項

關鍵字: 變形延伸、往下拖曳

3-13 滑動式選單

關鍵字: 側邊滑入、抽屜式(Drawer)、側邊欄、三條線、滑動手勢、以標準介面為基礎。

ch4 清單

4-1 垂直式清單

關鍵字: 導覽列、設定功能、表格視圖(Table View)、各項的資訊量、方便比較還是一次看個夠、使用者需求、階層式選單、限制顯示項目、分頁控制鈕、大量清單分頁控制項、項目高度固定。

pattern 2 : 數值、設定值型

關鍵字: 設定畫面、群組標籤、分區標籤(Section Divider)、相鄰項目的背景色交替變換、項目與值分別配置左右兩端。

pattern 3: 附帶縮圖型

關鍵字: 左側或右側加上縮圖、商品清單、

pattern 4: 尺寸折半型

關鍵字: 分割成左右兩半、清單項目名稱較短

4-2 格狀清單

關鍵字: 棋盤格、圖片、圖片搭配文字、影像縮圖、相簿、商品照清單、上下比對vs畫面整體、集合視圖(Collection View)、格狀清單(Grid lists)、分階段清單: 分類-垂直清單、商品一覽-格狀清單、商品細節資訊-輪播視面板、有效運用清單元件幫助使用者選擇商品、橫向排列2-4欄、文字量多嗎?

pattern1 標準

關鍵字: 顯示照片、

pattern2 重疊顯示標籤型

關鍵字: 縮圖上顯示文字、標籤背景半透明、提高對比、易讀性。

pattern 3 區塊標籤型

關鍵字: 圖片下方顯示文字說明、尋找商品 : 以名稱與說明vs 商品照、儀表板。

4-3 輪播式面板關鍵字: 左右滑動切換介面、顯示下一項目的小部分、顯示頁面指示元件、顯示左右分頁控制、以不同尺寸營造強弱感、自動播放動畫效果。

pattern 1 水平方向連續排列的清單。

pattern2 控制項型控制項設計成輪播式面板。

pttern3 品牌看板型最大尺寸、分頁控制項、頁面指示、輪播品牌宣傳圖片。

pattern4 導覽型

導覽列做成輪播式面板、精簡圖示或標籤、

hsiaofung / note

2020-08-15 智慧手機App UI/UX設計鐵則 #168