UI進化論-行動裝置使用者介面設計

此文為閱讀此書的讀後心得:http://www.books.com.tw/products/0010471021

閱讀想法

這本書算是為專業的產品設計師所寫的,會講到許多有關於如何管理一個專業的設計團隊、制定開發流程、設計師頭銜討論,以及設計師如何訓練自己的藝術感等。並且也有說到一些相關電腦知識,例如掌上型行動設備的基礎知識之類。主要是以設計師的角度,去探討該如何去成為一個產品經理,然後開發一個產品。

也因為此書完全是以設計師角度去撰寫的,我是程式師,以想了解怎麼設計行動裝置的角度去看此書,很多地方會因身份角度不同而較無意義,不過或許對於設計師而言是一本很有意義的書。

重點筆記

使用者如何看待產品:這邊告訴我們使用者會怎樣看待我們的產品

  1. 合格的產品
    螢幕快照 2014-02-28 下午11.52.28
  2. 優秀的產品
    螢幕快照 2014-02-28 下午11.52.38
  3. 卓越的產品
    螢幕快照 2014-02-28 下午11.52.54

如何將設計商品化

  1. 做市場需求的觀察:包括人口特徵、使用行為、利潤潛力、價值觀、需求、動機、購買因素、態度、產品使用場合、地理位置
  2. 使用者研究:目標族群的身份、使用場合、怎樣會讓使用者感覺這是個好商品、為使用者和產品間建立感情的聯繫(例如遊戲打寶,因為有感情因素,使用者會願意花時間去練功)、觀察使用者想買這個APP的目的,要能符合他們想像中的目的。
  3. 研究目標市場的文化內涵

使用者分析與研究

分析方法

當我們想要做一個行動介面的產品設計圖,除了美術的畫面及色彩設計外,對使用者的分析及研究也非常重要,這一篇是這本書裡我覺得最喜歡的,它提供我們怎麼去設計一個行動介面的動線的方式。在此介紹如下:

  1. 任務分析法:把特定的任務分成好幾個階段,先想好自己的APP想要提供給使用者那些功能,然後把特定的功能分解成多個步驟。例如像穿襯衫,可以分解為:雙手抓住襯衫領子>把襯衫披在肩上>右手穿進袖子裡,從袖口伸出>左手穿進袖子裡,從袖口伸出>把後襟拉平>把左右門襟對齊
    這邊也列出一些心智模型工具:物理符號系統、諾爾曼模型、流程認知模型、SOAR模型、心智的社會模型、動力振盪理論模型、大腦協調學。
  2. 情境設定法:要包含角色和劇情。如在那邊、發生什麼事、怎樣的狀況下會想操作系統,不同情境下會需要不同的設計。例如會議中,靜音模式就很重要,或是在家裡,那就要有輕鬆、方便的感覺。
  3. 社會性研究法:研究一些社會的事件影響產品的事件。例如使用者的使用心得影響銷售的狀況、或是被影響等等。理解不同地域、文化背景、社會環境中的介面風格。

範例:MP3播放器

  1. 定義產品功能:明確定義出產品要有的功能有那些
    螢幕快照 2014-03-02 下午9.49.53
  2. 繪製互動設計流程圖:
    螢幕快照 2014-02-28 下午11.46.40
  3. 繪製介面原型:最簡單的版面元件位置配置
  4. 視覺設計:先設定APP主要要使用的色彩有那些(先配色),然後再繪製介面細節

如何讓圖型介面更有創意

  1. 更人性化
  2. 情感化因素不可忽視:應該要從美學本能和功能主義的瓶頸中跳脫,營造一種感覺,這種感覺能讓使用者把產品和品牌連繫在一起
  3. 互動特效的引入
  4. 產品=體驗=品牌
  5. 臨場的體驗決定購買意願

視覺設計的原則

  1. 介面清楚明瞭
  2. 讓機器幫助記憶,減少短期記憶的負擔
  3. 依賴認知而非記憶。例如列印圖示的記憶等
  4. 提供視覺線索
  5. 完善的視覺清晰度
  6. 介面的協調一致:如手機介面的按鈕排放、左鍵肯定右鍵否定或內容擺放位置
  7. 色彩與內容:整體設計不要超過五的色系,相近的色系表示相似的意思

制定設計流程

在本書的最後幾章一直在強調設計流程的重要性,其實這有點像程式開發的流程圖的設計師版本…XD

大概就是在強調一致的設計產出流程對設計師而言很重要,可以確保多個產品間的一致性,也可以提高產出效能。總而言之和程式的開發流程方法有點像。流程大概會劃分為十個步驟:

  1. 制定流程
  2. 確定工作內容
  3. 圖示風格:這本書前面有提到在設計圖示的風格上,可以分為兩個部份的會議去討論(也就是3與4)。
    第一次的會議採用Brainstorming的方式,Brainstorming的討論方式其實和這篇的原則類似,總之就是不要特別限定某種想法,讓點子越多越好,讓所有人發表所有他們所想的到的可能風格和idea,不去評斷idea的優劣,所有的討論內容越自由越好,隨意的讓點子發想。在會議之後,讓各個設計師去分別設計自己想要的圖示風格及理念想法
  4. 首次檢查:展開討論設計方向、設計師闡述設計概念、第一次設計評審會議。
    然後第二此的會議則和第一次完全相反,由某個人去引導會議,並且由每個人提出前一個會議中提出各個點子的優劣,並由主導者來決定以那個圖示為主。
  5. 介面風格:定義色彩、解析度、關鍵介面數量、介面元素、通用性等
  6. 互動特效:定義合適的互動效果、思考如何更好的表現互動模型、視覺化介面風格、並要考慮最終實現的難度
  7. 介面設計:設計師分別獨立完成
  8. 準備演練展示
  9. 互動模型:例如用flash去做一個demo檔案
  10. 最終提案:最後決定要用那一個介面

套件管理工具CocoaPods介紹

這是1/9的cocoaHeads裡,SuperBil分享的套件管理工具。
之前小岡也有和我推薦過這個工具,當時沒有去深入研究如何使用。
這次與會完後,便開始試著學習使用這個管理套件。(裝完後心得:天呀!實在太好用了!必裝~)

分享資料

投影片:做自己的可可豆夾
錄影檔:CocoaPods

CocoaPods介紹

CocoaPods是一個管理套件的工具。

過去在開發app時,如果我們想要用一些第三方的Library,通常會要到GitHub下載專案到本地端,然後把它載入專案裡。這樣如果套件有更新時,都要手動更新,若是不同版本的ios要用到不同的library,又要手動去管理,會比較麻煩。

並且如果是直接把原始碼放到專案裡,會很容易和自己寫的code混在一起,管理和瀏覽都會較為困難。

CocoaPods就是用來管理這些第三方套件,使用CocoaPods之後,專案會變這樣:

螢幕快照 2014-01-12 下午4.48.50
要改成點選GourmentGroup.xcworkspace開啟專案
螢幕快照 2014-01-12 下午4.44.44
下方會多一個Pods的套件資料,裡面放的是所有使用到的套件

 安裝方法

這篇文章有非常詳細的方法:CocoaPods

比較要注意的是,我今天在安裝時,因為Podfile檔案所使用的編碼錯誤,會出現如下錯誤

後來我雖然把檔案改成utf-8,還是一直跑出同樣的錯誤。
後來才發現,如果有錯誤,要先把終端機關掉再打開,才會再一次執行。

接下來,如果要更新Podfile,到終端機打入

就可以了!

投影片另外有講到podSpec,如果有在cocoaPods裡面沒有包含的Library
(現有的Library可到http://cocoapods.org/去輸入函式庫的名稱找有沒有現有的)
如果沒有的話(或者是自己製作的Library),就可以自己去寫spec
這邊有教學:Specs and the Specs Repo

參考資料

AutoLayout介紹

投影片分享

過去的作法…

  1. 使⽤用frame和bounds去決定物件的位置和⼤小。
  2. 使用autosizing masks
    1. 設定當畫⾯面⼤大⼩小變動時,要固定 那些值(struts)。
    2. 在view的⼤大⼩小改變時,可以偵測 super view的⼤大⼩小改變去改變物 件的寬和⾼高的值(springs)。

AUTOLAYOUT和AUTORESIZING MASK的區別

Autoresizing Mask是AutoLayout的⼦子集。 AutoLayout更多的功能

    1. 指定任意兩個view的相對位置
    2. 可指定⾮非相等約束(⼤大於或者⼩小於等)
    3. 可以設定約束的優先級

WHAT IS AUTO LAYOUT

一種基於約束的,描述性的佈局系統。 
 Auto Layout Is a Constraint-Based, Descriptive Layout System.

      • 基於約束 – 以所謂相對位置的約束來定義的
      • 描述性 – 使⽤用接近⾃自然語⾔言的⽅方法來進⾏行描 述
      • 佈局系統 – 設計界⾯面的各個元素的位置。

使⽤用約束條件來描述佈局,view的frame會依據這 些約束來進⾏行計算。
Describe the layout with constraints, and frames are calculated automatically.

影片分享