Clik here to view.
扁平化設計：高光、陰影
有了基本雛型後可以開始添加細節，從放大鏡icon的優化開始。如果有上過素描課、老師會說明高光和陰影的重要性，扁平化設計將視覺元素抽掉很多，高光、漸層、陰影等基本組成因此變得更重要，更需要注意每 1px 的細部處理。
View ArticleClik here to view.
Clik here to view.
扁平化設計：厚度
這張是 512 x 512 px 的 iOS Desktop icon 原始圖檔，可以看到在我放在 photoshop 分類中關於扁平化設計系列文章所製作出來的效果。高光線真的很重要，細細一條就能帶給人「厚度」和「轉折」的視覺效果。
View ArticleClik here to view.
扁平化設計：斜陰影
常常在扁平化的 icon 上看到斜陰影效果，要製作這個效果有很多種方式。網路上的教學文也很多種，我就挑了比較簡單的作法來實作順便 PO 自己的作法了。可以結合厚度、讓 icon 更潮。（沒辦法、現在就是流行扁平化、厚度、斜陰影。）
View ArticleClik here to view.
使用者經驗藏寶圖：序
Peter Morville 設計出「使用者經驗藏寶圖」，如圖，說明一個構想是怎麼合理且適切地無中生有，一直到完成設計提出各式文件給客戶的開發流程。我覺得這是每位UI、RD、PM都該知道的流程，同時也是開發產品的必經之路。身為專案成員不應該悶著頭只做自己份內的事，了解團隊如何運作、每個階段該產出什麼，這點非常重要。
View ArticleClik here to view.
Icon Design：My Wallet
總時數超過 30 小時，超過 100 個圖層。逼我換 MACBOOK PRO，還得加滿 RAM。舊 AIR 跑不太動。希望有人可以因為這顆 icon，分我個 Dribbble 的邀請碼。（真的拿到了！感謝 Mike Bronk）
View ArticleClik here to view.
反應與提示
在易用性原則裡，系統狀態的能見度、辨識而非記憶這兩點與「反應」有關。在操作 App 時，「反應」扮演著重要角色，它有著引導使用者至下一步的功能，幫助使用者理解目前狀況、繼續操作。在 iOS 上，常見的反應有數種：視覺、聽覺、觸覺。點擊某個按鈕，按鈕會變成被擊中凹下去的樣子，輸入正確會聽到叮叮的成功提示音，操作錯誤或失敗手機會震動並聽到嘟嘟的錯誤提示音等等。如果對於 App...
View Article在開發之前：先潑冷水！
這點子太棒了！之前肯定沒人做過，將來一定大賣啊！你確定嗎？在 App Store 已上架有 n 個各式各樣的應用程式，所想得到的功能應有盡有，為什麼會覺得自己想到的這個點子空前絕後呢？有的 App 後台硬得很，不只有財力雄厚的財團支持，更能在各大媒體上廣告宣傳，擁有專門團隊負責開發改版。同樣的 App 在公司裡的組員合作下絕對比個人單打獨鬥能擁有更多資源，就算賣不好也不是後果自負，薪水一樣領得到。
View ArticleClik here to view.
製作過程：Anna Sui Wallet
Icon Design：My Wallet真的讓我拿到 Dribbble 帳號了，為了感謝大家的支持（喂）我把創作過程和思路放出來。簡單來說呢就是硬上、沒什麼華麗麗的技巧，不停加圖層加高光加陰影…畢竟這是我第一顆刻這麼細的擬物風 icon，之前都在接案公司工作、哪來 30hr 的時間慢工出細活。（大概是做習慣 iPhone 和 Android 的 App UI，凡是製圖我都優先考慮向量格式，即使這...
View Article互動設計概論
什麼是互動設計？互動設計這個詞這幾年很常見，包山包海感覺上只要是各種媒體上看到會動都可以叫互動設計。有一種說法是「設計出互動產品，提供人類在日常生活或工作中使用」，更詳細的解釋則是「互動設計是人類互動及溝通上的空間」。它是一種以使用者的需求與經驗為出發點，創造出人類與科技的完美連結。 IDEO 創始人在 1984 年的一次設計會議上提出，他剛開始將互動設計命名為「軟面」（Soft...
View ArticleClik here to view.
使用者經驗藏寶圖：敘述故事、找出中心思想
雖說很對不起邀我來參加聚會的主辦單位，但 UI 和 RD 擅長的領域差不多就是聖母峰和馬里亞納海溝的差別。為了不浪費這段人人都在補充新知我卻蹲在旁邊玩保衛蘿蔔2的時間，還是來寫點文章表示我也有努力好了…根據這張藏寶圖的順序，就來談談「敘述故事」、「找出中心思想」。
View ArticleResponsive Web 抱怨篇
老實說、自從我一頭栽進 Responsive Web 的世界，又接觸 Bootstrap 後，很久沒去思考「在 Responsive 上我還能玩些什麼花樣」。有人跟我提過 Bootstrap 雖然好用、但也限制許多可能性，所以他們不喜歡。我倒認為它只是項工具、要在網頁上套用它就必須遵循它的規則。
View ArticleClik here to view.
使用者經驗藏寶圖：創建人物
相信各位應該看過前一篇「使用者經驗藏寶圖：敘述故事、找出中心思想」了，也相信一定有人用鼻孔噴氣：什麼鬼話連篇，拿灰姑娘出來當例子，小孩子玩家家酒。這個階段我就認真寫好了…在「創建人物」這個階段，其實就是研究方法 Persona （人物誌），都把研究方法拿出來講了，夠認真了吧！
View ArticleClik here to view.
我的選色技巧
Pochade我愛用的截色 App最近在工作上遇到關於配色的大難題…公司 LOGO 是深藍＋亮橘，但要做的專案和股市看盤有關，所以要加入紅色和綠色，要求官網、網頁版系統、Desktop App、Mobile App 都要一致性、能讓人一眼就看出來這是該公司的產品，要有企業形象，一定要用上企業色。偏偏扯到「股市看盤」就不會只有兩條線在畫面上跑這麼簡單…
View ArticleClik here to view.
Copycat 你好，Copycat 再見
(圖片取自 http://goo.gl/uyLPR2） 本來假日我會把腦漿抽乾、或是很專心做些需要大量時間一氣呵成的工作，BLOG 會懶得寫。不過遇到一隻 Copycat，還是公司創辦人，讓我像吃到玉璽一樣無雙技能連發脾氣暴躁…
View Article初學者的 Functional Map
功能規格書、產品規格書、系統分析、需求分析等等，是 PM 或 SA 或其他同事的工作，反正不是 UI 的工作，很多 UI 不願意去接觸這類文件，（就說了字太多圖太少設計人看不下去、有沒有懶人包？）但看不懂這些文件的 UI 絕不能被稱為好 UI…連這個軟體要做什麼都不熟悉、一知半解，要怎麼說服別人設計的介面是適合這套軟體（或網站）的好介面？
View Article初學者的 UI Flow
UI Flow 和 Funtional Map 算是最多人容易搞混的兩種圖表吧，Functional Map 主要目的在「將抽象的需求轉變成能被實現的功能」；而 UI Flow 則是「 妥善安排功能與資訊在頁面之間的操作動線」。兩者很明顯目的不同，所以沒有什麼重工或是很麻煩之類的藉口可以逃避不做。
View Article我的 UI/UX 設計入門方式
自從開了這個 BLOG 後，好多人都問我這些關於 UI/UX 設計的技術是從哪裡學到的。就台灣來講這個領域太新了，剛入行的時候只能夠自學，缺少很多資源，通通靠自己摸索，所以我希望能整理出一套系統性的 UI/UX 教育方式，但這需要花費大量的時間，靠下班後的空檔根本不夠，頂多寫寫 BLOG 讓大家加減看。目前我不想把 UI/UX...
View ArticleUI 怎麼面對 RD 的美學？
應該沒有 UI 會跳出來寫這種文章，哈哈，這篇應該要歸類在「RD 老公觀察紀錄」裡。不過本文主要想聊聊從 UI 的角度來觀察 RD 在工作上的美學，至於生活上的就另開一篇再討論了。我合作過的 RD 人數不多，出社會到現在大約 70 位左右吧，樣本數不夠大，但這 70 位都有個很明顯的特質：「非黑即白，沒有灰色」。RD 的世界不是 0 就是 1 ，就跟 iOS 切圖沒有 131 x 327 的...
View ArticleGuideline 的重要性
強調再強調，一定要先看過 Guideline 後再來做介面設計，卻被人嗤之以鼻，說不用看一樣可以產出啊幹嘛要花這種時間。如果不是你的產品太簡單、就是都用內建元素或抄襲湊合了事。你同事人太好，幫忙擦屁股了。你同事程度跟你一樣，搞不清楚狀況。別說很多 UI 高手們也老是跳脫 Guideline 設計啊，他們哪位不是對 Guideline 熟到可以朗朗上口到幾乎可以報頁碼的？不懂 Guideline...
View Article