什麽是UI與UX

為什麽要知道UI

有時候我會想UI設計師是怎麽把產品變出來的，產品很直覺容易使用，背後需考慮很多用戶的觀點。軟體設計師有時候也要自己設計界面，常常只有自己用的感覺好，而沒有考慮到其他人使用的感覺。如果知道UI設計師是怎麽設計的，就多一種角色的想法，做出來的產品會更貼近用戶經驗。

UI是什麽

UI 指的是行爲操作，設計師設計行爲以幫助用戶快速找到資料。例如書頁的設計，除了有頁碼之外，還加了4.04表示第四章的第四頁，並用一個圖示表示這是飾品分類。

游戲設計也有很好的例子，數位產品通常會借用現實產品做個隱喻，如異塵餘生：庇護所Online這個手機游戲，分頁的使用像是夾在書裏的小書籤，會想點看看書籤那一頁裏面有什麽。肖像圖示用三維表示是一曡肖像，但你在二維的圖像怎麽表示？除了下圖用數字表示曡這個概念是否有別的表示法，比方進度條、百分比等，哪種表示比較好？

UI設計師的工作

• 確立design guide line，使得產品視覺語言一致化。
• 設計資料狀態(user state)。如何顯示UI頁面的 錯誤等圖面。
• 資料狀態是對應資料庫行爲給用戶做的設計。
• 資料狀態種類滿抽象的，拿Windows來舉例
• 理想狀態（Ideal State）- 登入Windows了
• 空白狀態（Empty State）- 鍵盤滑鼠都無法動作
• 極限狀態（Maximum State）
• 錯誤狀態（Error State）- Windows 當機藍白畫面
• 局部資料狀態（Partial State） 
• 載入中狀態（Loading State）- Windows 載入中
• 做交互動態設計的小動畫。

好設計原則

• 好學
• 效率高
• 一段時間沒用還記得怎麽用
• 失誤后，能立即復原嗎？
• 用戶用了會開心嗎？

UX是什麽

• 從用戶的角度找到合適的行爲方式。
• 以總體經驗體驗做評估。
• 差的體驗是？覺得難用的原因是什麽？
• 原則

UX設計師的工作

• 用戶研究(user search)
• 產品給用戶帶來怎樣的價值，搜集資料以釐清此價值。
• 工具用戶旅程地圖(user journey map)，找出用戶的痛點與甜蜜點。
• 功能地圖(function map) 與 資訊結構(information architecture)


• 功能地圖：產品的所有功能。
  
• 資訊結構：對用戶有利的資訊整理。
  
• 綫稿(wire-frame)與原型(prototype)
• 目的為確認用戶流程與資訊架構
• 原型依創作方式不同，有分紙筆做出來的低保真(low-fi)原型 與電腦創作的高保真(high-fi)原型。

參考

• 給超超超新手的UIUX指南 - 很詳細的介紹