2017 年 2月 13 本好書推薦
太久沒更新blog，都長草了，這陣子在消化之前買的書，挑了 13 本介紹。有幾本和自己人生及房間、穿衣有關，都是我覺得挺有意思、對自己有幫助的好書。UX打動人心的產品設計：頂尖設計師打造成功產品的黃金法則Designing Products People Love Scott Hurff 推薦度 ★★★★★ 難易度 ★★做產品、UX、UI、互動等，大推這本，尤其 PM、UI...
View ArticleClik here to view.
野猿公苑 +積雪結冰路面行走心得
年初的時候我和老公跑去日本玩，本來想去輕井澤滑雪，但兩個人都不會滑雪，先跑去小叮噹科學園區體驗過一堂滑雪課、全身肌肉酸痛後，馬上決定不排滑雪行程。改去長野地獄谷野猿公苑看猴子泡溫泉。爬了非常多關於「雪地行走」的文章，最後我們決定穿靴子，在這裡分享我的雪地行走心得。地獄谷野猿公苑交通不太方便，從長野站出來轉巴士，下車還要走半小時山路。在雪地結冰路面來回加起來徒步 4...
View ArticleClik here to view.
從 0 開始的 UI/UX 設計推薦書單
想學 UI/UX 去外頭上課很貴，我也不推薦沒基礎跑去上課，吸收效果不好，最好還是自己先墊點底子再去報課程，不然老師站在前面隨便你問的時候，連想問問題都不知道怎麼問很傷心啊。學東西最便宜的作法就是免錢的 Google 爬文，但如果連關鍵字都不知道怎麼下的話，建議你，書錢不能省。台灣買書很便宜了。我把覺得重要、且可以讓讀者快速擁有即戰力的書挑出來照難易度排序。從左到右。最左邊的那本連 0...
View ArticleClik here to view.
字體設計相關書籍
三采文化寄了「我們都被字型洗腦了：看字型如何影響食衣住行，創造看不見的價值」這本書給我，請我試閱寫心得。字體字型相關書籍我買了不少本，當做課外讀物瞧瞧而已並沒有很認真地研究。為了寫這篇我把所有字體書又都翻了一次，並花時間把我們都被字型洗腦了看完。尤其是 App ，一旦有人跟我說他想換字體，我就會裝死：「基於什麼原因讓你想多塞一個字體包在 App...
View Article三年前，三年後
結束近3年的接案公司App製作生涯，轉向開發公司自有產品。寫這篇文的同時，RD 老公正窩在旁邊玩他的魔獸卡牌 OLG ，想起當年我的 UI 是被這位 RD 海電練出來的。三年前，大約是 iPhone 3GS...
View ArticleUI 和 RD
幾乎每個面試官都會問我：「妳和RD的溝通情況如何？」我通常會反問：「都嫁給 RD 了，你覺得我和 RD 溝通情況怎麼樣？」不管是在家或是在工作，我整天都和 RD 相處啊！但即使和老公很有默契，遇到夫妻吵架，還是會大喊：「RD 的腦袋真不知道在裝什麼。」
View ArticleClik here to view.
為什麼要畫3次 Wireframe？
每個新案子進來，我通常會畫至少 3 次的 Wireframe，記錄靈感 > 完整繪製 > 電子化。好像重工了喔？可是你哪來的自信覺得設計 App 介面能一次到位呢？靈感乾涸對設計師來講理所當然、RD 都跳坑了才發現設計有錯缺東漏西也很正常、接手修改前人留下的舊案子卻找不到相關文件也不是什麼稀奇的事。為了要避免發生這種慘況，畫 3 次以上的 Wireframe 比較保險。
View ArticleClik here to view.
什麼是 Wireframe ?
老實說我受夠某客戶和某設計公司老是把 Wireframe 喊做 Storyboard 了！每次聽到都要克制翻白眼的欲望。拜託不要開口閉口說「我們很重視 UI、我們很有經驗」，卻連基本名詞都講錯。這跟義大利跟維大力一樣、相差十萬八千里啊！
View Article十大易用性原則
身為 RD 的你受過太多 UI 的氣嗎？老是發現邏輯不通需要打掉重練被延誤時程嗎？常被 UI 嫌念理工的沒有美感都不懂嗎？報仇的時間到了。這篇文雖然說是「十大易用性原則」，也可以說得上是：「教你如何捅 UI 」。RD 最擅長講理，就來跟 UI 講理！從易用性下手找 UI 麻煩，沒有幾位 UI 不中刀的…
View ArticleUI 跟 RD 溝通的三個誤區
我相信一定有 RD 想砍了他們家的 UI，講話這麼風花雪月，有點邏輯概念是會怎樣。也一定會有 UI 想撬開他家 RD 的腦袋，都用這麼多形容詞和例子說明了怎麼還是聽不懂，腦袋有洞喔。這其實真的不能怪 UI...
View Article無損圖片的介面製作方式（上）
目前市面上最常見的被用來設計 APP 介面軟體為 Adobe 的 Photoshop 和 Illustrator。Illustrator 屬向量軟體，不管再多次的放大縮小，向量圖的質量不會因此改變。Photoshop 是繪圖影像處理軟體，像素圖片一經放大縮小後畫質會變差，偏偏目前 iOS 需製作 2 種、Android 至少也要作 3 種尺寸的圖檔，有時候還會有不知道哪邊來的交辦要 UI...
View Article無損圖片的介面製作方式（下）
之前在無損圖片的介面製作方式（上）提到製作 App 介面時會面臨各尺寸螢幕解析度不同的問題，PSD 需要放大縮小使得最後產出得切圖模糊失真。本文將介紹智慧型物件、智慧型濾鏡、在ai畫好、貼到ps的技巧、遮色片、調整圖層等不同的技巧。
View Article改不停的設計與加班
台灣是個很不尊重專業的地方，尤其是設計這個行業。相較之下，沒什麼人敢第一時間質疑醫師開的藥方，也沒幾位敢對著律師嗆聲說法條引用錯誤，更不會有人衝進廚房搶大廚的鏟子煮給他看。做設計做久了，從沒被客戶改稿改超過 5 次以上的人真的需要燒香拜佛感謝老天保祐。（相信一定有人被客戶搶過滑鼠，建議改用 Wacom 繪圖板，就算客戶跟你搶筆也會因為不懂使用而馬上還你，擺在桌上看起來專業唬人好用。）
View ArticleClik here to view.
App 切圖檔案命名方式
一個 App 通常會有很多張切圖，不管是 iPhone 需要 1x、2x 圖檔，Android 需要至少 3 種 hdpi、xhdpi、xxhdpi。在龐大的切圖數量下如何讓負責套圖的 RD 快速找到所需圖檔，檔名的命令方式就需要雙方統一格式方便大家作業。
View ArticlePortrait 和 Landscape，談螢幕方向
直式螢幕稱為「Portrait」，橫式螢幕「Landscape」，頁面會依照橫直螢幕不同而改變形式的作法稱之為「Auto Orientation」。不管是 iPhone、iPad、還是 iPod，它們都是長方形的，一般情況下會直式使用，但某些情況就會轉成橫式更為合適，最明顯的例子就是遊戲類。什麼情況下會轉橫使用？橫式和直式的頁面樣子是否會不同？要怎麼調整呢？從 iOS 內建的 App...
View Article各種狀態與突發狀況
即使畫了非常精細的 UI FLOW、每一頁 Wireframe 旁也寫上詳盡的註解，但在專案後期 RD 仍是發現許多在前期規畫階段沒有被考慮進去的情況，這是為什麼呢？有一種可能性是漏了思考「各種狀態」和使用者的「突發狀況」。這會導致開發時程延後，因為訂定的規則不夠準確而再次召開討論會議確認細節。甚至發現此路不通但該功能已經做下去了無法修改進退兩難的情況。
View ArticleClik here to view.
各式按鈕作法：文字篇
在 App 裡，許多操作方式都需要透過「按鈕」，本篇將介紹如何在Photoshop作出各種樣式按鈕上的「文字」。包含立體凸起、或是凹陷的質感。按鈕本身的作法也有很多種表現形式，將另開一篇專講背景製作。
View ArticleClik here to view.
各式按鈕背景：基本篇
最常見的按鈕就是個長條型的色塊，配上文字說明讓使用者知道點擊這個色塊能達到什麼目的。讓這個色塊擁有像現實生活的光影變化，在視覺上更顯精緻。可接著各式按鈕作法：文字篇的步驟接著做。
View ArticleClik here to view.
各式按鈕背景：進階篇
這篇會教大家怎麼在按鈕外圍做一圈凹陷的陰影，為了教學需要、有故意將效果做得誇張些。如果知道原理了、記得把數值調小一點比較自然。請接續各式按鈕背景：基本篇製作～
View ArticleClik here to view.
扁平化設計：基本雛型
扁平化設計是現在最流行的設計趨勢，比起擬物風，扁平化設計去除大部份的材質和光影變化，但仔細觀察，仍保有許多細節。無論是陰影、漸層、高光、立體感等，並不因「扁平」而隨意帶過。這個教學不太需要修圖技巧，只要會用「形狀圖層」就好。為了因應各種尺寸的 icon，我習慣盡可能用向量來製圖。
View Article