#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介面設計聖經一點也不為過。
以下節錄部分HIG內容,並搭配instagram實例一起服用(誤)來聊聊(正)!
HIG裡,針對iOS介面設計分成3個章節,其中每個章節都有不少衍生閱讀。
從瞭解iOS設計概念開始!
iOS Design Themes 主題
iOS的介面主要用於iPhone及iPad,在以手掌為可操控的硬體範圍內,加上有直式(portrait)及橫式(landscpae)的顯示方式,如何呈現最舒服的視覺體驗、一目瞭然的版面配置?是設計者一開始必須思考的課題。
Apple在HIG中特別強調iOS與其他平台最大不同的設計核心在於Clarity, Deference, Depth這三個元素,而好的iOS設計,基本原則應包括:
- Aesthetic Integrity 兼顧美觀及完整:app的外觀與操作要完整地整合在其功能中並呈現
2. Consistency 一致性:簡言之要圖文相符或文要對題
3. Direct Manipulation 直覺式操作
4. Feedback 回饋互動
5. Metaphors 與經驗連結的隱喻/反射式操作
6. User Control 用戶控制
實例:IG是非常圖像化的APP,除了基本的資訊及發文內容是文字外,舉凡發佈新貼文、分享、按讚及留言等,無一不是用各種一目瞭然的icon來呈現。
大量使用icon的好處是,使用者可以很直覺反射性的理解圖像與介面的功能的連結關係(icon按下去,就會跳到連結該功能的頁面),但icon也是兩面刃,使用太抽象或複雜的圖像,反而無法讓人有效地理解圖像與功能的連結性。
這一點,個人覺得IG做得真得很不錯,就算一開始不清楚icon代表的功能,但切換後的頁面依然能讓使用者馬上有經驗上的熟悉感。
建構App介面要件
Interface Essentials:UIKit
App畫面是如何打造出來的呢?
答案是善用UIKit裡的元件,建立App畫面的架構、功能配置、特定功能指令等 ,這件元件包含:
- Bars:包括navigation bar, search bars, sidebars, status bars, tap bars, tool bars等。
- Views:包括action sheets, activity views, alerts, collections, images views, pages, popovers, scroll views, split views, tables, text views, web views等。
- 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顯示,並且很注重各個區塊間的比例是否協調。
p.s UIKit元件種類非常多,之後再來慢慢研究細節。
有關HIG,網路上有非常多中/英文的文章,想更深入瞭解但又不想被英文壓垮的人,也可以上網搜尋看看!
後記
(正經版)
Apple從自古以來,「用圖說故事」的功力堪稱翹楚,一直以來都是眾多設計者的圭臬,HIG絕對是入門OS設計的首選。
App,不外乎是「iOS介面設計+程式」的整合之作,如何打造兼具美學質感及符合功能的App,是每個學習設計App者的重要能力,期許自己能慢慢有意識地累積欣賞不同APP之美的底蘊外,亦能從程式小白開始,一步一步建立Switch程式的功力。
(碎念版)
用medium寫文章交作業真的是很紮實累積功力又能有效消化所學的方式,彷彿讓我有種回到學生/職場時代的錯覺,邊讀著原文資料邊整理成報告或公文。
以medium書寫,其實是有很多彈性空間可以揮灑,嘗試用自問自答或系統性的方式整理,轉換成自己/一般大眾能夠理解的語言(甚至還強迫老公試讀XD),並盡可能地圖文並茂,加強記憶點。
但!這篇居然花了我9個小時啊彼得潘,雖然一開始是很漫不經心的閱讀,到後來,在愈夜愈美麗的夜晚振筆疾書,外加睡前的靈感乍現,三更半夜還起床繼續書寫,真的是愈活愈年輕了我…(昏)