我的新書AI 職場超神助手:ChatGPT 與生成式 AI 一鍵搞定工作難題的教材投影片已製作完成
歡迎各位有需要的教師和博碩文化索取教材

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. 最終提案:最後決定要用那一個介面

17年資歷女工程師,專精於動畫、影像辨識以及即時串流程式開發。經常組織活動,邀請優秀的女性分享她們的技術專長,並在眾多場合分享自己的技術知識,也活躍於非營利組織,辦理活動來支持特殊兒及其家庭。期待用技術改變世界。

如果你認同我或想支持我的努力,歡迎請我喝一杯咖啡!讓我更有動力分享知識!