開發手機App，UI介面設計也是非常重要的一環

生活在 21 世紀的我們，數位科技已經是我們日常生活不可分割的一部分。最能代表 2022 人類日常的描述就是人手一隻市佔率高達九成的智慧型手機了。在這個時代要傳達你產品與服務的精神，就不能不想到手機這個媒介，而在手機上可以做到最好體驗的，就是 App（手機應用程式），而 App 第一眼會讓人看見的，就是App操作介面的 UI 設計。

常見的開發 App 的流程

製作一款 App 的開發流程可以簡易的濃縮成以下的九步驟：

1. 產品概念 → 2. 市場調研 → 3. 體驗及設計規劃 → 4. 介面製作 → 5. 技術開發 → 6. QA（產品測試）→ 7. 修改與調整 → 8. 產品上架 → 9. 持續的維護與更新產品

而這次要提及的是第四步驟的「介面設計」，也就是 UI（User Interface）。

App開發中的UI介面設計是什麼？

廣義的介面設計（User Interface, UI）指的是用來互動的產品介面， 包含了所有你在操作流程中會互動的實際畫面、Logo、Layout、色彩、文字、icon、插圖、動畫以及 Prototype（可操作模型） 等，以及綜合這些元件所傳達出的產品調性。就像平面包裝與廣告業會有視覺傳達設計，UI 就是在數位載體服務上傳達公司形象，創造感受性的重要角色與階段。

那麼App中的UI設計是怎麼工作的？

開發App的UI設計上，設計師通常會根據產品想要傳達的感受以及形象，建立一套 UI Guideline 系統，包括 Logo 使用的情境與方式、畫面元件以及元件應用畫面的方式、動畫細節等。然後將 UX 設計師做出的 Wireframe 作轉換，把邏輯性的元件們結合 Guideline，變成完整的體系，延伸在 App 中的每個角落，變成使用者打開 App 時看見的每個畫面跟細節。

更細節的 UI 會把偏向視覺性的 Logo、插圖、動畫切分成視覺設計，而操作畫面、Layout、色彩、文字、icon 則分在介面設計的範疇。實務上這些工作可以由一位設計師全權執行，也可以由團隊執行。在有限時間的情形下，後者可以做到相對精緻的呈現效果，在執行時可以針對自己的資源與需求去做安排考慮。

在設計App介面時需要注意的小地方

在製作 UI 時，務必要定義好 UI Guideline，才能好好確保每個畫面都像是同一個產品，不少市面上的產品會讓人在操作時覺得每個畫面好像是來自不同師傅，像楚河漢界一樣有種微妙的距離感，這就是沒有讓畫面好好的被統一的緣故。追求一致性是人類基因裡的本質，注意到並且徹底得執行就能創造出良好的體驗。

而前面有提到 UI 設計包含了 Guideline 的部分，但要請設計師規劃完整的 Guideline 是相對要花費較高預算的，但能呈現最好的品牌效果。如果今天是預算有限，或是更重視功能而非品牌的服務，可以考慮使用以下提到的二大系統 Guideline，都是精美且規劃完整、會持續改良及擴充的參考資源。

設計iOS 與 Android App的主流 Guideline

針對 App 的部分，分成 iOS 以及 Android 二大系統，他們各自的原生畫面與操作方式也有些不同，像是選單導航列（Navigation）的設計，iOS 通常會放在下方，Android 則是在上方。iOS 習慣用畫面左邊緣往右滑的手勢操作返回上一頁，而 Android 許多手機都會設計有 Back 的按鈕。

這二大系統也有各自的官方 Guideline 可以參考，iOS 有 HIG（Human Interface Guidelines），Android 則最有名的則是 Google 推出的 Material Design。2021 年更推出了具有個性化的 Material You 設計，能夠根據你的手機桌布自動產生各種元件色彩。三星及小米、華碩等大廠也都會自行設計屬於自家手機的專屬 Guideline，強調品牌的個性。

不過隨著數位設備普及，多數人都有使用過二者系統的經驗，直接融合二者操作特性的介面設計也越來越多，在設計時優先考量使用者操作習性跟便利性比完美符合 Guideline 更為重要。要記得，設計的宗旨都是要讓使用者在跟產品互動時能得到最佳體驗。

App的UI介面設計使用者提高滿意度的第一關鍵

就像好的商品都會有精美的設計與包裝，UI 就像是幫數位產品製作包裝的流程，讓產品有吸引力跟驚喜感，並且讓用戶能好好被引導使用都是 UI 的重要任務。看完以上的簡介，對於目前產品要如何包裝還很模糊嗎？歡迎聯繫我們聊聊，我們將分享給您更多 UI介面 應用的案例與經驗談。