Grid 的運用:PS外掛

製作的 Responsive Web 最好能先理解 Grid 概念。這概念不只運用在 Mobile Web ,包含 Smart TV 都會派上用場。如果你輕鬆想做出和 Mockup 相同的 Web ,最好把 Grid 學起來。
iOS Guideline 怎麼看?(2)

iOS Human Interface Guidelines 第二章是設計策略 Design Strategies ,主要講畫面、使用者操作、反應等等的一致性與注意事項。在閱讀這個章節之前,建議把 十大易用性原則 先看過一遍、對易用性有粗淺概念後會更容易理解為什麼 Guideline 會這樣寫。
台灣的 UI 設計
看到有篇文章寫出我的心聲:只是前端工程師的純抱怨文 。雖然是前端工程師寫的文,但有大半在抱怨 UI…「那 UI 簡直難用到飛起,除了是中文以外一無是處,真他媽想問那些說這東西好用的人是眼睛還是腦袋有問題,根本隨便一家國外免費產品都完爆它十條街。」說實在我看台灣大部份的 App 都是這種心情:「去你媽的小確幸,這年頭連 UI 都走小可用小易用路線嗎?」
國泰世華 ATM 提款機
話先說在前頭,這是我想領 3000 元過日子,ATM 很開心的吐給我 30 張 100 元而埋下淦意。國泰世華新改版 ATM 介面!
色盲者使用的配色檢測法

Contrast-A: Find Accessible Color Combinations
是個很不錯的配色網站,我主要是用它測試在色盲者眼中的顏色會是什麼樣子,是否通過 WCAG 2.0。
iOS Guideline 怎麼看?(1)

這是給 UI 看的教學。發現太多人不看Guideline…基礎問題問了又問,明明官方文件擺在那。就算英文看不懂,Google 打下去對岸有很多翻譯成簡中版的。最最少留意一下尺寸吧?(這次的 iOS7 官方文件省略很多沒寫到、建議回頭去看看 iOS6 的Guideline,兩份加起來比較紮實。)
初學者的 Mockup
在畫好 Wireframe、定版後,就可以依照線框稿內容製作 Mockup 了。Mockup 有很多種說法,我當它是視覺稿,所有跟視覺有關的部份都會在這個階段產出。能夠用來製作 Mockup 的軟體有很多種,最大宗的就是 Photoshop。之前的文章都會說提升 PS 技巧,其實指的就是製作 Mockup 的能力,字體設計、按鈕樣式、扁平化、擬物風等等。
標示色碼的方法

在寫標示文件給 RD 前,先來了解一下何謂「色碼」。常見的色碼有幾種:HSB、RGB、CMYK、HEX…等等。各種色碼運用場合皆不相同,理解後再來看看 Android 和 iOS 需要什麼。
用 iPad 畫 Wireframe
用 iPad 畫 Wireframe最大好處是修改快速、製圖方便。紙本操作無法簡單實現「複製」、「復原」這兩個很常用的功能。若是想在 Wireframe 上加些色彩讓畫面分出區塊更易閱讀,紙本操作和使用 iPad 繪製的時間成本完全不是同個等級。畫 Wireframe 肯定會面臨多次修改的問題,使用紙本光是擦鉛筆線都累了,自從買了 iPad 後我就把創意發想階段轉移到 iPad 上執行。
問「為什麼」來分析、設計介面
相信大家在小時候都有問「為什麼」問到大人抓狂的經驗。「天空為什麼是藍的?」「地球為什麼是圓的?」等等,然後得不到答案或是被唬爛。前者牽涉到色彩學、後者和力學有關,就算大人懂也很難解釋給知識不足的小鬼頭聽,(所以我爸老是唬爛我。)這養成我遇到問題乾脆自己找答案比較快、省下被老爸唬爛還得翻白眼給他看的力氣。
高級美工
這兩篇文非常一針見血,捅下去都不覺得別人痛的。
英文原文:Faking the Shot : How Dribbble is hurting designers.
中文譯文+譯者心得:吐槽向 - 關於Dribbble、設計社區、圈子、互捧夠友…
活用 Google Map 規劃旅行

比起老公 Rianol Jou 視排行程如海軍陸戰隊的天堂路,我倒滿喜歡查資料作功課、整理、排序這類任務,八成是職業病。做 UI 也是搜尋使用者或客戶資訊、歸納分類。身為重度 Apple 產品粉絲,凡事都想數位化也是很合理的,Google Map 導航功能不知道救了多少次迷路的我們。為了確保每一個預定景點都能準時抵達,很早以前我就配合 Google Map 把旅遊行程用插點+文字註解的方式規劃在地圖上了。