致新人:移動端(iOS&Android)應用界面設計入門指南

2022-01-02 設計新知

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

界面設計規範

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

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

狀態欄

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

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


Android狀態欄


iOS狀態欄

Android - 應用欄，工具欄，操作欄/ iOS - 導航欄

這個用於顯示頁面標題，以及左右有其他功能鍵的部分，有不同的稱呼.iOS統一叫做導航欄.Android在材質設計裡面稱之為App Bar，但是在Android Studio的開發文件當中稱為Toolbar ，而在Android 5.0之前叫做Action Bar。


Android應用程式欄


iOS導航欄

搜索欄

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

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


Android搜索欄


iOS搜索欄

Android - 標籤欄/ iOS - 範圍欄

這裡是一個易混淆的名詞。在應用欄/導航欄下方會有多個可以切換功能的按鈕，Android叫做Tab Bar，iOS叫做Scope Bar.iOS也有Tab Bar，但指的是螢幕下方用來切換功能用的那一條，因此很容易混淆，不過通常多跟工程師解釋兩句他還是會理解你的意思.Tab Bar / Scope Bar主要是用來切換不同的顯示方式。

例如從顯示全部的郵件標題，切換或只是顯示最近的郵件標題。或者像Facebook Messenger用來顯示全部訊息，群組訊息，陌生人訊息等等。基本上可以把它當作是大功能下的子功能分類。

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


Android選項卡欄


iOS範圍欄

Android - 底部導航/ iOS - 標籤欄

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

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

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

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

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


Android底部導航


Android - 底部表單/ iOS - 動作表/活動視圖

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

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


Android底部表格


iOS操作表/活動視圖

Android - 對話框/ iOS - 警報

這種全版的彈出，機器人叫做對話框，iOS的叫做警報。這個動作會阻斷使用者對於應用程式操作的連續性，因此如非必要則應儘量避免使用。選項通常不會超過兩個，如果必須超過兩個可以考慮使用Bottom Sheets / Action Sheets，或是按按鈕直的並列排放。

另外，右下角圖片的這種狀況：「你確定要.嗎？」的問句，確定的選項應該直接用行為的名稱，以避免混淆例如：？「你確定嗎你將會清除所有的照片和影片」而確認的選項不應該是「確定/取消」，而是「清除/取消」來得更加直覺。


Android對話框


iOS彈窗

總結一下

Android和iOS對於手機畫面的各部位名稱都有不同的稱呼，尤其是在其欄目的指稱上特別容易混淆。最理想的狀況是能夠附上圖解說明，但如果可以正確地使用這些名稱是不是更帥氣更專業了呢？

不過也還是希望iOS和Android可以統一這些稱呼，尤其是Android，至少內部先統一一下吧Orz

*本文作者：Stephanie Kuo，密西根冰天雪地中的HCI碩士生，短期目標是靠著UX成為滯美臺勞，希望能透過中文和更多臺灣人分享UX。http://stephanie-kuo.com/

*參考資料

Android材質設計指南 

https://material.io/guidelines/ 

iOS人機界面指南 

https://developer.apple.com/ios/human-interface-guidelines/bars/navigation-bars/

▽

商務合作及投稿請聯繫曉黑

微信號：sezign01

點擊閱讀原文，進入設計在線學習社區

相關焦點

  • IOS和安卓雙端直播APP源碼,如何快速搭建部署
    首先是android端和IOS端的視頻播放功能，主要看一下視頻渲染、音頻播放這兩個重點部分。Android1、視頻渲染ffmpeg為我們提供瀏覽豐富的編解碼類型。視頻解碼包括flv, mpeg, mov 等；音頻包括aac, mp3等。
  • B端設計指南-表格設計的常見問題
    設計備註 因為在設計稿中，有很多需要文字與前端進行溝通的地方，比如這裡的交互說明、邏輯表述等等，我通常會在設計稿的下方用單獨標註設計所需要注意的點，同時給出相應的邏輯方便前端進行理解， 同時對於其他同事接手你的工作時，也有更多的幫助 08 移動端表格如何進行適配？
  • Android TV開發簡介
    不同於手機端群雄割據的局面，Google開發的Android TV系統，憑藉其廣泛的兼容性，幾乎佔據了智能電視的全部市場。簡單來看，TV端具有Phone和Pad都不具備的大屏，是移動端的一個大屏擴展。但是，竊以為還不止於此，TV側的內容，不同於強調私密性的移動側內容，更加強調多人共享的屬性。
  • 對啊網設計學院:學習移動端設計語言
    新年伊始，收到很多同學的私信，對於移動端的設計語言及規範還是有些混亂，不知道有沒有什麼好的借鑑？我們作為設計師，最主要的就是學習，當然，就是向優秀的人學習。關於借鑑也肯定是向優秀的公司借鑑，前沿的設計理念和完善的設計語言就是我們該掌握的了。下面是小編推薦的一些優秀公司的設計語言，希望對大家有所幫助。
  • Android用Lottie把啟動界面動起來
    動畫一共5秒，做了3個效果：一、文字淡化出現（從1秒後開始淡化顯示）二、落葉（從上往下掉落，加入傾斜仿風吹的效果）三、雲朵移動（天空上的白雲從左邊移動到右邊）下載AE下載地址：https://bfile.3987.com/bigfile/aftereffectscc2017_lsb_3987.rar這個是綠色版的，直接解壓就能運行啦。
  • 移動端網站設計:它是什麼及其重要性
    除非您最近幾年一直呆在家裡，否則您將知道移動端網站設計已成為許多企業的關鍵任務。您需要投資於新的網站建設和設計嗎？還是只是移動端網站的更新？ 你甚至需要擔心嗎？---成都雲思禾網絡運營 浪知潮團隊多年來一直在設計適合行動裝置訪問的網站，我們很高興分享對移動所有事物的見解。讓我們從基礎開始：移動設計和常規Web設計有什麼區別，它對您的業務有何影響？ 什麼是移動端網站設計？
  • Unity直播進行時,第二周觀看指南
    從事移動遊戲開發多年，先後在 SEGA、DeNA、搜狐暢遊等著名遊戲大廠任職，擁有豐富的移動遊戲研發經驗。目前擔任Unity技術經理一職，希望將遊戲引擎使用和遊戲研發技術經驗幫助廣大的開發者。直播內容：本次直播將使用Unity DOTS還原經典遊戲《Pong》，由於整體篇幅的設計會分成上下兩期進行講解。該項目內容基於最新Unity 2019.3，聚焦在DOTS新版本簡潔且實用的語法。
  • B端設計指南03——按鈕,究竟應該如何設計
    人機互動中最重要的就是把我們從小到大對於這個世界的認識映射到屏幕世界中，比如蘋果最為經典ios的滑動解鎖。 第二種 字面型 字面型更偏向表達按鈕整體，常見於各類移動端的按鈕當中，整體的表達也更適合移動端這類屏幕尺寸較少的設備當中，更符合卡片化設計的思路，反而不太適合桌面端的設計。
  • 傾情分享:Android 開發者們不要錯過的網站寶藏~
    通過 Google 提供的 Kotlin 頁面可以學習到 Kotlin 的入門、各種課程以及 Android、Jetpack 對 Kotlin 的各種支持。https://developer.android.google.cn/jetpack/composeJetBrains 基於 Jetpack Compose 的 UI 思想推出了 Compose Multiplatform 技術，期望打造橫跨桌面端、Web端和 Android
  • 基於Android英語單詞學習軟體設計任務書
    畢業設計（論文）目的1. 畢業設計（論文）是考察學生利用自己所學進行的一次綜合鍛鍊，在學生專業知識和通識教育的基礎上進一步培養學生的理論聯繫實際獨立思考分析問題和解決問題的能力，全面提升學生的專業水平。2. 其也是是高等學校人才培養計劃中的重要組成部分，是教學過程中最後一個重要的教學環節，是人才培養質量的重要體現。
  • B端移動設計|臺卡
    本文轉載自【微信公眾號：俊馳，ID:hbjunchi】來自專輯B端移動設計產品設計不只有設計，還可在設計中進行盈利--這是第313篇原創臺卡：放在櫃檯上的卡片。03 心得產品設計不只有設計，還可以在設計中進行盈利。本文轉載自【微信公眾號：俊馳，ID:hbjunchi】
  • 按鍵精靈ios之插件使用方法
    按鍵精靈有PC版與手機版，手機版又分為ios與android，今天所講的這篇是基於iphone7，ios12.1.4系統越獄環境所做的，越獄方法可自行百度
  • 【實戰】從音樂App看移動端的設計趨勢
    只要您正在對設計、職業方面有任何的疑問，我們都隨時歡迎您與我們溝通交流。作為 QQ音樂的深度用戶（因為懶所以不想做歌單轉移），在最近發布的新版本 5.0 上線後馬上開始了日常使用。不談產品和運營，在設計方面，這次的新版本主要在界面風格、交互方式上有了較大變動。而這些變動，個人認為恰好是當下主流移動端 apps 設計趨勢的代表，因此拿出來進行分析和總結。
  • B端產品經理入門的第一年做了什麼?
    編輯導語：作為產品經理，你入門的第一年都做了什麼呢？本文作者作為B端產品經理，為我們分享了他入職第一年，作為一個產品新人的一些經驗和想法，希望能對一些剛入門B端產品經理或者對產品經理行業感興趣的人帶來一些參考。
  • 2017 年 Android 領域大事件回顧
    不過在 2017 年他們終於決定用《架構組件與指南》來告訴大家他們推薦使用什麼架構。 架構指南《架構指南》是一系列的指導意見，定義可以來構建穩定，可維護和測試的 Android 應用的實際架構和最佳實踐。架構組件架構組件是一堆被設計用來幫助我們遵循架構指南構建應用的庫。
  • 開發你的第一個 Android 應用
    （如果設備文字從右至左顯示，比如阿拉伯語或者希伯來語，則第一個定義的子部件出現在屏幕的最右端。） android:text屬性TextView與Button部件具有android:text屬性。該屬性指定部件要顯示的文字內容。
  • 最新iOS端追劇影視APP
    每日分享時刻~在安卓端從來不會缺乏追劇的影視APP，至於iOS用戶就比較折騰了，好不容易安裝上一款滿意的隔幾天證書失效或者應用下架無法使用，再就是後期割完韭菜就跑路的。支持全網視頻的觀看與離線下載，軟體頁面設計精美且純淨算是難得一見的iOS追劇App了，首頁排版還是深得廣大用戶喜歡的功能以及資源方面應有盡有，軟體自帶影視推薦專欄可以在劇荒的時候按照專題挑選適合個人口味的電影，影視專欄推薦的都是較優質的經典影視劇或者高評分作品值得一部部去追。
  • Android View 動畫
    ="float or percentage"   // 移動起始點的x坐標，表現形式有三種；        // 1.相對於自己的左邊界的距離，單位像素值。（例如 "5%p"）        android:toXDelta="float or percentage"     // 移動結束點的x坐標，表現形式同上；        android:fromYDelta="float or percentage"   // 移動起始點的y坐標，表現形式有三種； // 1.相對於自己的上邊界的距離，單位像素值。
  • android啟動頁設計專題及常見問題 - CSDN
    這篇文章主要包括以下兩方面內容 集成騰訊廣告聯盟的SDK 啟動頁加載過程中，後臺初始化數據 我們在設計啟動頁時的常規做法是建立一個Activity來加載開屏圖片或者廣告，作為程序的入口，那麼在這個三到五秒時間內如果進行數據下載，當用戶點擊了跳過按鈕或者計時結束了數據還沒初始化完成，已經進入了主頁面，而主界面剛好需要那些基礎數據該如何？
  • B端設計指南04——彈窗 究竟應該如何設計
    由於B端產品的複雜多樣，我們今天所要討論的不單單局限於彈窗這一種控制項的設計，而是一個「泛彈窗」的話題，透過彈窗去分析理解其他類型信息展示的業務邏輯。 從宏觀上講，目前B端設計中信息展示的控制項可以分為三類：彈窗、抽屜、新建頁。在這三種展示形式中，我們需要明白它們四類分別是什麼、有哪些、在什麼場景中使用、以及在優缺點和適應的不同業務，這樣可以更好的為我們設計服務。