Clik here to view.
我的推薦書單
把家裡打掃完了，來講講我手上覺得不錯、值得推薦的UI/UX、網頁、設計相關書籍好了。桌上這幾本都是我千挑百選才肯買回家的好書，有些比較舊或有點過時就跳過不講了，有興趣的可以去書店找找，多看書總是有好處。就從左邊開始介紹囉～
View ArticleClik here to view.
3 種應用程式風格
不要再叫 PM 或 BD 畫 Wieframe ！他們真的不是 UI/UX 的專業人士，如果注重專業，在約還沒簽、規格也還沒訂出來的時候就該把 UX 加進工作流程裡了。PM 最重要的工作是控管時程、各部門單位間溝通，BD 是廣義的 Marketing ，也不該是這個位子的人在搞介面，畫 Wireframe 的是 UX 啊 UX！
View ArticleClik here to view.
使用者經驗分層元素
想了解 UI/UX，就一定要了解這張圖，這是 Jesse James Garrett 在 2000 年發表的使用者經驗元素一書中所提出：使用者的經驗可分成抽象到具體，也就是由策略、範圍、結構、骨架、表層所構成。圖片上有原作者的說明大家自己看吧。
View ArticleClik here to view.
UI/UX 之天下武功出少林
這算是我看了這麼多資料所做出來最大的整理吧。說穿了其實不管是哪位 UI/UX「大師」講的都是同一件事情：要怎麼做才能讓使用者好用。從這張圖表有看出什麼了嗎？第一個直列（白底）就是我之前提到的 使用者經驗分層元素，第二個直列（黃底）是 使用者經驗藏寶圖，第三個直列（藍底）是 十大易用性原則。（使用者經驗分層元素裡並沒有說明文件。這項是我自己加上去的，為了讓整個專案更完整、並且能夠傳承下去。）
View ArticleClik here to view.
我是UID，不是UXD
圖片出處：THE DISCIPLINES OF USER EXPERIENCE當聽到有人說「我是做 UX 的」都不會覺得很奇怪嗎？使用者經驗要怎麼被「做」出來？要解釋 UID 和 UXD 的不同就得拿出這張圖。它很清楚畫出 UID 和 UXD 的關連和差異。你可以看到紅色大框的「使用者經驗設計」中包含訊息架構、內容、視覺設計、互動設計、人機互動、聲音設計、工業設計、人因工程學、建築學。
View ArticleClik here to view.
標示神器：MarkMan
一堆人問我的慣用工具…就先從愛用品開始講起吧。UI 在切完圖後還有工作要做，不是一堆 .png 打包扔給 RD 就了事，圖檔名稱咧？尺寸咧？字體咧？色碼咧？這些都要告訴 RD 的吧？
View ArticleClik here to view.
免費切圖神器：Cut&Slice me
整個開發流程中我最愛的就是切圖部份了，這表示改得要死的 Mockup 終於過關了喔耶～就來分享一下切圖神器吧，業界最知名的有 2 套，功能有些不同，比較複雜的這套是免費的 Photoshop 外掛，先從免費的開始講起吧。
View ArticleClik here to view.
愛用切圖神器：Slicy
Slicy 是我測過幾種輔助切圖工具後又回來使用的神器。「把整個 PSD 扔進去，結束。」簡潔利落不囉嗦。我愛它的程度已經到了沒有它我就不會切圖了（哈哈）。
View Article關於使用者經驗測試
我很喜歡有人問問題，這表示不用絞盡腦汁想 blog 文章主題，有問題就盡量問吧，不管是留言、Twitter、或是寫信都可以。「關於使用者體驗與使用者介面的測試，怎麼測試這樣的設計對使用者來說是好的？」便宜有便宜的作法、難有難的深入，我的領域不是跟數據打交道的那塊，加上時間成本 和偷懶我大多便宜了事（這麼理直氣壯的說好嗎？）以下是個人觀點。
View ArticleClik here to view.
QRCode 神器：iQR codes
做手機和網頁互動，常常會遇到 QRCode 設計，QRCode 在大家的印象裡就是黑黑一塊塊的格子組成的方磚。對設計師來說最大的困難在於如何把這個黑方磚改造一下、但又不能太出格仍舊要讓使用者一眼明白這是可以掃瞄的 Code。「 QR 碼圖形如果有破損，仍然可以被機器讀取內容，最高可以到 7%～30%...
View ArticleClik here to view.
Adobe Muse CC 心得
「Adobe Muse CC 是為了想要建立網站但不想撰寫程式碼的設計師而設計。」官網開章明義就直接寫了這句話。好吧如果是為了不會手寫Code的設計師、只需要產出一些不需要套用程式的網站的話，Muse 是滿有吸引力的。（先不提它產出的 Code 很噁心這件事…）
View Article學習UI/UX的四大重點
關於剛踏入業界需要準備什麼、或是想轉換跑道需要具備哪些技能，選擇 UI/UX 這條路就是要有包山包海的心理準備。大致上我會把它劃分成四大類，理論、實踐、技術、品味。這四類缺一不可。
View ArticleClik here to view.
關於 8px
淘寶網的官方Blog有篇「一张图解释手机端8px原理」，簡單來說就是把 iOS 和 Android 放在一起比較。同時探討 1x、2x、ldpi、mdpi、hdpi、Xhdpi、xxhdpi 的尺寸與解析度。本文就以我個人角度提出看法。（圖片取自 Android - Devices and Displays）
View ArticleClik here to view.
8px 後續，模糊
8px那篇引起很多回應，我想這要從幾個角度來解釋。UI 口中的「糊」和 RD 眼裡的「糊」是有差的。圖片會糊的原因分成幾種：小圖放大會糊。< 這是廢話，BJ4。大圖縮小會糊。< 一定有人想問為什麼。就算是向量檔，只要像素沒有對齊一樣會糊。PX 非整數。< Pixel 沒有0.x 這種數值。
View ArticleClik here to view.
活用 Google Map 規劃旅行
比起老公 Rianol Jou 視排行程如海軍陸戰隊的天堂路，我倒滿喜歡查資料作功課、整理、排序這類任務，八成是職業病。做 UI 也是搜尋使用者或客戶資訊、歸納分類。身為重度 Apple 產品粉絲，凡事都想數位化也是很合理的，Google Map 導航功能不知道救了多少次迷路的我們。為了確保每一個預定景點都能準時抵達，很早以前我就配合 Google Map...
View Article高級美工
這兩篇文非常一針見血，捅下去都不覺得別人痛的。 英文原文：Faking the Shot : How Dribbble is hurting designers. 中文譯文＋譯者心得：吐槽向 - 關於Dribbble、設計社區、圈子、互捧夠友…
View Article問「為什麼」來分析、設計介面
相信大家在小時候都有問「為什麼」問到大人抓狂的經驗。「天空為什麼是藍的？」「地球為什麼是圓的？」等等，然後得不到答案或是被唬爛。前者牽涉到色彩學、後者和力學有關，就算大人懂也很難解釋給知識不足的小鬼頭聽，（所以我爸老是唬爛我。）這養成我遇到問題乾脆自己找答案比較快、省下被老爸唬爛還得翻白眼給他看的力氣。
View Article用 iPad 畫 Wireframe
用 iPad 畫 Wireframe最大好處是修改快速、製圖方便。紙本操作無法簡單實現「複製」、「復原」這兩個很常用的功能。若是想在 Wireframe 上加些色彩讓畫面分出區塊更易閱讀，紙本操作和使用 iPad 繪製的時間成本完全不是同個等級。畫 Wireframe 肯定會面臨多次修改的問題，使用紙本光是擦鉛筆線都累了，自從買了 iPad 後我就把創意發想階段轉移到 iPad 上執行。
View ArticleClik here to view.
標示色碼的方法
在寫標示文件給 RD 前，先來了解一下何謂「色碼」。常見的色碼有幾種：HSB、RGB、CMYK、HEX…等等。各種色碼運用場合皆不相同，理解後再來看看 Android 和 iOS 需要什麼。
View Article