#1 淺讀 Human Interface Guidelines- iOS部分

初探iOS介面設計概念、App介面元件(UIKit)類型

遙想當年擁有一台macbook是多麼高不可攀的夢想，使用Apple產品很自然地就會被貼上「使用Apple產品就是潮」的評價，但以現在事後諸葛的角度來看，Apple系列產品的流行絕對不單只是外型優勢，個人認為很大的重點在於OS介面的設計美學，包括文青式的優美圖文及用色、更直覺的版面設計及配置（user-friendly)等。

為了更有效率地入門/推廣/攻城略地(？)這套設計理念，Apple將目前旗下各系列產品使用的OS系統(macOS, iOS, watchOS, tvOS)介面設計概念整理成「人機介面設計指南」Human Interface Guidelines(HIG)，讓人能更簡單地進入OS的設計世界並有系統地學習，從各個章節來看，這套準則視為Apple介面設計聖經一點也不為過。

Human Interface Guidelines

以下節錄部分HIG內容，並搭配instagram實例一起服用（誤）來聊聊（正）！

HIG裡，針對iOS介面設計分成3個章節，其中每個章節都有不少衍生閱讀。

從瞭解iOS設計概念開始！

iOS Design Themes 主題

使用iOS的硬體主要為iPhone及iPad，畫面可以直式(portrait)及橫式(landscape)方式呈現

iOS的介面主要用於iPhone及iPad，在以手掌為可操控的硬體範圍內，加上有直式(portrait)及橫式(landscpae)的顯示方式，如何呈現最舒服的視覺體驗、一目瞭然的版面配置？是設計者一開始必須思考的課題。

Apple在HIG中特別強調iOS與其他平台最大不同的設計核心在於Clarity, Deference, Depth這三個元素，而好的iOS設計，基本原則應包括：

1. Aesthetic Integrity 兼顧美觀及完整：app的外觀與操作要完整地整合在其功能中並呈現

2. Consistency 一致性：簡言之要圖文相符或文要對題

3. Direct Manipulation 直覺式操作

4. Feedback 回饋互動

5. Metaphors 與經驗連結的隱喻/反射式操作

6. User Control 用戶控制

實例：IG是非常圖像化的APP，除了基本的資訊及發文內容是文字外，舉凡發佈新貼文、分享、按讚及留言等，無一不是用各種一目瞭然的icon來呈現。

大量使用icon的好處是，使用者可以很直覺反射性的理解圖像與介面的功能的連結關係（icon按下去，就會跳到連結該功能的頁面），但icon也是兩面刃，使用太抽象或複雜的圖像，反而無法讓人有效地理解圖像與功能的連結性。

這一點，個人覺得IG做得真得很不錯，就算一開始不清楚icon代表的功能，但切換後的頁面依然能讓使用者馬上有經驗上的熟悉感。

IG版面設計與iOS介面設計概念對應

建構App介面要件

Interface Essentials：UIKit

App畫面是如何打造出來的呢？

答案是善用UIKit裡的元件，建立App畫面的架構、功能配置、特定功能指令等 ，這件元件包含：

1. Bars：包括navigation bar, search bars, sidebars, status bars, tap bars, tool bars等。
2. Views：包括action sheets, activity views, alerts, collections, images views, pages, popovers, scroll views, split views, tables, text views, web views等。
3. Controls：包括buttons, context menus, edit menus, labels, page controls, pickers, progress indicators, pull-down menus, refresh content controls, segmented controls, sliders, steppers, switches, text fields等。

實例：IG，下圖可以看出來IG很清楚的把畫面分成四大塊，navigation bar、tab bar、image view及數個buttons。

IG的主題/主軸就是影像，因此最重要的image view，就配置在最主要/醒目/最大的區塊（舞台區）來呈現，其他分類及功能則用不同位置的bars及buttons顯示，並且很注重各個區塊間的比例是否協調。

IG頁面的UIKit元件

p.s UIKit元件種類非常多，之後再來慢慢研究細節。

有關HIG，網路上有非常多中/英文的文章，想更深入瞭解但又不想被英文壓垮的人，也可以上網搜尋看看！

後記

（正經版）

Apple從自古以來，「用圖說故事」的功力堪稱翹楚，一直以來都是眾多設計者的圭臬，HIG絕對是入門OS設計的首選。

App，不外乎是「iOS介面設計＋程式」的整合之作，如何打造兼具美學質感及符合功能的App，是每個學習設計App者的重要能力，期許自己能慢慢有意識地累積欣賞不同APP之美的底蘊外，亦能從程式小白開始，一步一步建立Switch程式的功力。

（碎念版）

用medium寫文章交作業真的是很紮實累積功力又能有效消化所學的方式，彷彿讓我有種回到學生/職場時代的錯覺，邊讀著原文資料邊整理成報告或公文。

以medium書寫，其實是有很多彈性空間可以揮灑，嘗試用自問自答或系統性的方式整理，轉換成自己/一般大眾能夠理解的語言（甚至還強迫老公試讀XD），並盡可能地圖文並茂，加強記憶點。

但！這篇居然花了我9個小時啊彼得潘，雖然一開始是很漫不經心的閱讀，到後來，在愈夜愈美麗的夜晚振筆疾書，外加睡前的靈感乍現，三更半夜還起床繼續書寫，真的是愈活愈年輕了我…（昏）