手機介面各部位介紹

Published in

AAPD — As A Product Designer

10 min readDec 18, 2017

在設計手機介面的時候經常會遇到不知道那個部位怎麼說，同一個部位iOS和android又有不同的稱呼，於是又要跟工程師大費周章地解釋自己現在在說的是哪個部位。除此之外，如果知道正確的稱呼的話，在開發時也比較能下對關鍵字找到自己要的資源。我一直都很想寫一篇文章來整理手機介面的部位介紹和比較，於是就有了這篇。

Guideline

iOS和android都各有一套自己的設計規範，iOS的叫做Human Interface Guidelines, android的叫做Material Design Guidelines。大家說iOS規範的比較嚴格，所以要先看iOS，但其實兩種都要看，不過我也是都沒全部看完啦，有問題的時候才會回去翻文件。

iOS和android還是有一些基本的區別。比方說iOS現在是使用San Francisco，android是使用Roboto。另外android的material design是使用紙張投影的陰影效果做頁面，因此在設計的時候要注意陰影，並且多加利用陰影的使用。不過最簡單的就是使用sketch或是XD裡面內建的素材包，用複製貼上大法去改這些素材就不會錯。

Status Bar

手機上方這條顯示電量、wifi、訊號強度的東西都叫做Status Bar。Android的風格更為平面一點。iOS原本使用五個點來表示訊號強度，在iOS11中則改為使用像Android一樣的階梯狀符號顯示，應該是為了配合iPhoneX的瀏海空間而做的改變（真的很蠢）。

除了遊戲之外的app不建議把status bar隱藏起來，以便讓使用者有掌握感，而遊戲app則讓使用者更加沈浸在遊戲當中，營造出和現實脫離的感覺，通常會將status bar隱藏起來。

Android Status Bar

Android - App Bar, Toolbar, Action Bar / iOS — Navigation Bar

這條用在顯示頁面標題，以及左右有其他功能鍵的部位，有不同的稱呼。iOS統一叫做Navigation Bar。Android在material design裡面稱之為App Bar，但是在Android Studio的開發文件當中稱為Toolbar，而在Android 5.0之前叫做Action Bar。

Search Bar

Android, iOS的搜尋功能統一稱為Search Bar，但互動方式不太一樣。Android的Search Bar是點擊App Bar上面的放大鏡之後在App Bar上面展開Search Bar，並且顯示過去的搜尋紀錄。右側的icon可以用語音輸入，開始輸入之後，麥克風會變成X叉叉，可以一鍵清除內容。下方同時顯示即時搜尋結果。點擊返回鍵之後離開搜尋功能。大家可以打開Google系列的App試著搜尋看看，都是很標準的Material Design。

iOS的Search Bar通常顯示在上方，往下滑動的時候Search Bar消失，往上滑動的時候出現。開始輸入時會出現X叉叉取消符號，可以一鍵清除輸入內容，在搜尋框外面右側會顯示Cancel按鈕，點擊離開搜尋功能。在搜尋時下方也會同時顯示即時搜尋結果。

Android — Tab Bar / iOS — Scope Bar, Segmented Control

這裡是一個易混淆的名詞。在App Bar / Navigation Bar下方會有多個可以切換功能的按鈕，Android叫做Tab Bar；iOS則依據功能，將專門用來定義搜尋範圍的稱為Scope Bar；而切換功能的叫作Segmented Control （感謝 Han Ying 指正，01/16/2018）。iOS也有Tab Bar，但專門指的是螢幕下方用來切換功能用的，外觀上也不太一樣。因此很容易混淆，不過通常多跟工程師解釋兩句他還是會理解你的意思。Tab Bar / Scope Bar主要是用來切換不同的顯示方式。例如從顯示全部的郵件標題，切換到只顯示最近的郵件標題。或是像Facebook Messenger用來切換顯示全部訊息、群組訊息、陌生人訊息等等。基本上可以把它當作是大功能下的子功能分類。

Tab Bar原本是Android的設計，但現在iOS也會使用Android這種設計的Tab Bar。如果使用iOS原生的Scope Bar / Segmented Control設計則通常不會超過三個以上的選項，因為不像Android tab bar一樣可以將多餘的選項暫時隱藏起來，如果將四個選項並列的話，按鈕的可點選範圍就變得很小。另外，同樣除了可以用點選切換之外，也可以往左往右滑作切換。

Android — Bottom Navigation / iOS — Tab Bar

這裡是易混淆名詞，請大家螢光筆拿出來畫重點。

Bottom Navigation原本是iOS才有的功能，因為Android下方有Android navigation bar（就是返回/主頁/切換那三顆虛擬鍵），如果也把選項放在下方的話容易誤觸。Android比較喜歡把功能藏在Hamburger Menu裡面，但是在切換頁面時還要多一個動作，使用者也無法一眼得知有哪些功能可以使用。因此在下方的這種功能列也越來越普遍，Material Design也將Bottom Navigation放進了guidelines。

一般來說，為了避免使用者混淆圖標的意思，都會在圖標下用文字顯示功能名稱，直到產品成熟，使用者都非常了解這些圖標的意思之後才會拿掉。

Android預設的Bottom Navigation和iOS不太一樣，Android只要設定超過三個按鈕，就只會顯示當下active的那顆按鈕的說明文字，並且會將圖標放大。說實在的我覺得這種設計很醜。顯示說明文字就是為了要讓使用者知道這個功能是幹嘛的，用不到的時候就藏起來，使用者怎麼知道這顆按鈕點下去會發生什麼事。iOS則沒有這種問題，按鈕和說明文字都會固定顯示。同時考慮到觸及範圍，一般不會放超過五個按鈕，避免誤觸。如果有超過五個以上的功能則可以考慮用hamburger menu藏起來。

之前和朋友討論過，這條功能鍵在Android當中到底該放上面還是下面。他認為考慮到避免誤觸應該要放上面，像Facebook的Android介面一樣。而我個人的習慣是放下面，一是為了和iOS統一風格，再者是為上方預留Android tab bar / iOS Scope bar的空間，如此一來就可以同時使用下方切換大功能，用上方tab bar切換子功能。我也問過幾個Android使用者，其實他們也已經習慣在下方切換功能，並不會有太嚴重的適應問題。

Android — Bottom Sheets / iOS — Action Sheets / Activity Views

三個並排的點點的icon表示顯示更多功能，點選後就會從畫面下方跳出以下的頁面，讓使用者做更多選擇，例如：分享、刪除、複製等等。又或者按下分享按鈕後會顯示要用哪種方式分享。（順帶一提Android和iOS的分享icon長得不一樣）

Android將這種從下方跳出來的pop up頁面稱之為Bottom Sheets。而iOS又依據功能不同再加細分。如果是用來顯示功能選項的（如下左圖），稱為Action Sheets。用來顯示分享方式的，稱為Activity Views。在iOS當中除了預設文字為藍色之外，也可以用紅色顯示。通常在進行你不希望使用者做的動作（例如刪除）會使用紅色來提醒使用者再思考一下要不要這麼做。