2016 年 38 本好書推薦
2016 年 38 本好書推薦

最近又買了個書櫃,之前還很開心櫃子有空間能夠買買買,然後就買爆了…最大的問題還不是買爆,而是書太多做筆記很辛苦、時間不夠用,體力也不夠。所以買了支蒙恬掃譯筆,加快做筆記的速度。

UI 設計師看 Auto Layout
UI 設計師看 Auto Layout

我買了 Simon Ng 寫的 iOS 9 App程式設計實力超進化實戰攻略 (Beginning iOS 9 Programming with Swift) ,學習怎麼用 Xcode 和 Swift 做 App。

這本書非常推薦設計師和完全不懂程式的初學者購買,前幾章都在講 Xcode 的 GUI 操作和實例,跟著範例自己做個會動的頁面出來很有成就感,能學到很多。

UI/UX 工作的職責劃分
UI/UX 工作的職責劃分

網路上對於 UI 和 UX 的謬談 這篇留言數量頗多,其中一則留言我另開這篇文來回答。

這張圖是 Dan Saffer 畫的,指的是 UX 包含那些範圍,可以看到並沒有「UI」的圓圈。

網路上對於 UI 和 UX 的謬談

最近 FB 上常看到有人分享這篇 UI & UX 差別是什麼,看圖大整理 ,這篇文有一半的圖都有問題啊,根本不是 UI…除非它指的是視覺設計。

介面設計必須考慮 輸入、輸出、運作內容 這三項,但幾乎所有的圖片都沒有提到怎麼輸入、輸出什麼、運作內容的規則。

UX 包含 UI,很難切開來講,但硬要分細的話,UX 講的是使用者感覺到什麼。UI 著重在互動和操作的媒介上。

頁面的第 6 種狀態:極限狀態

文件這回事我一直有種「永遠寫不完」的感覺,尤其是 Wireframe,把 Wireframe 當成幾個框框幾個圈圈加幾條線就搞定的文件,這樣的難度和隨手畫個井字遊戲有什麼不同?只要會畫圈圈叉叉直線橫線就能畫 Wireframe?

[翻譯] 如何修正壞 UI 一文中有提到 5 種狀態。事實上我覺得 Z 大提出的第 6 種狀態也該被納入考量。

  • 理想狀態(Ideal State)
  • 空白狀態(Empty State)
  • 極限狀態(Maximum State)«« 第 6 種狀態
  • 錯誤狀態(Error State)
  • 局部資料狀態(Partial State)
  • 載入中狀態(Loading State)

每個頁面在 Wireframe 階段都必須考慮這 6 種狀態,好,那狀態考慮完了也設計好了,要怎麼和專案成員溝通,確保他們都知道該頁面在各種狀態下的變化?

UX 不是 Wireframe

哪來有畫 Wireframe 就是有做 UX 的錯覺?UX 不是 Wireframe,使用者體驗為什麼會是線框稿?當然不是啊!很多人以為有畫 Wireframe 就等於有做 UX 了,那整天抱著數據統計寫文件的 UX 設計師在幹嘛?會把有畫 Wireframe 當成有做 UX 的人,合作的 RD 同事通靈技能大概 LV99 點滿了。

UI 設計師要不要懂技術?

UI 設計師要不要懂技術?廢話,當然要啊!不然怎麼把幻想變成現實?在實際產出之前設計師做的一切都是「美美的幻想」,還有可能不怎麼美,直到最後的產出才是真實。

舉個例子:建築師除了畫圖外,需不需要知道蓋房子每個階段的建造方式?要不要理解各種材料的特性和規格?需不需要熟悉當地環境的限制?

但建築師需不需要知道水泥車怎麼開?需不需要操作吊高機?

他們最後的成品是那疊圖紙嗎?誰去看圖紙啊,當然是實體的建築啊!那 UI 設計師最後的成品為什麼是 Mockup?

UI 設計師應該要會寫的文件

身為 UI 設計師,工作內容不是只有做 PSD 和切圖,只會這兩樣的叫美工。基本一位合格的UI設計師必須要具備撰寫文件的能力,文件最低限度需包含:企劃書、規格書、Wireframe、Mockup、切圖、標示文件、UI Kit、UI Pattern、Guideline。

iOS 解析度製圖設定
iOS 解析度製圖設定

有人跟我提到:「iOS 在 psd 設計時解析度建議設為 144,這樣文字大小才會是正確的」。當年 iPhone4 剛出的某個晚上我和老公躺在床上聊 iOS 變 2x 了會遇到什麼狀況。聊著聊著兩人就槓上吵架了,也不管當時是凌晨兩點,通通爬起來開燈開電腦,一個翻出 Photoshop、一個翻出 Xcode,打字、設定字型字級、拿出 iPhone 設定一樣的字型字級。之後,我的製圖習慣一直使用 72 dpi

工作清單:切圖

切圖有很多種方法,但切出來的圖只會有兩種:1.可以用。2.被退件。圖切出來會交給 F2E 或 RD 接手,請給他們能夠使用的圖方便作業。有不懂、不確定的部份請在切圖之前就先問過他們要怎麼處理,他們肯定會回答你。(不回答就是他們有很大的機率拿到爛圖拖長自己工時,誰敢不理你啊?)

工作清單:Wireframe

Funational MapUI Flow 後,終於到來回修改最多次的 Wireframe 階段了。比起 Funational Map 和 UI Flow,這應該是最多人會接觸到的「規劃」。同時也是最花時間、圖片說明量最大的部份。在這階段修修改改總比都在畫 Mockup 或套程式了才在修改來得輕鬆省力。

工作清單:UI Flow

工作清單:Functional Map 後,繼續來寫 UI Flow 這部份。如果你不知道什麼是 UI Flow ,請參考 初學者的 UI Flow 這篇文。