8px 後續,模糊
8px 後續,模糊

8px那篇引起很多回應,我想這要從幾個角度來解釋。UI 口中的「糊」和 RD 眼裡的「糊」是有差的。圖片會糊的原因分成幾種:

  1. 小圖放大會糊。< 這是廢話,BJ4。
  2. 大圖縮小會糊。< 一定有人想問為什麼。
  3. 就算是向量檔,只要像素沒有對齊一樣會糊。
  4. PX 非整數。< Pixel 沒有0.x 這種數值。
關於 8px

淘寶網的官方Blog有篇「一张图解释手机端8px原理 」,簡單來說就是把 iOS 和 Android 放在一起比較。同時探討 1x、2x、ldpi、mdpi、hdpi、Xhdpi、xxhdpi 的尺寸與解析度。本文就以我個人角度提出看法。(圖片取自 Android - Devices and Displays

學習UI/UX的四大重點

關於剛踏入業界需要準備什麼、或是想轉換跑道需要具備哪些技能,選擇 UI/UX 這條路就是要有包山包海的心理準備。大致上我會把它劃分成四大類,理論、實踐、技術、品味。這四類缺一不可。

Adobe Muse CC 心得
Adobe Muse CC 心得


「Adobe Muse CC 是為了想要建立網站但不想撰寫程式碼的設計師而設計。」官網開章明義就直接寫了這句話。好吧如果是為了不會手寫Code的設計師、只需要產出一些不需要套用程式的網站的話,Muse 是滿有吸引力的。(先不提它產出的 Code 很噁心這件事…)

QRCode 神器:iQR codes
QRCode 神器:iQR codes


做手機和網頁互動,常常會遇到 QRCode 設計,QRCode 在大家的印象裡就是黑黑一塊塊的格子組成的方磚。對設計師來說最大的困難在於如何把這個黑方磚改造一下、但又不能太出格仍舊要讓使用者一眼明白這是可以掃瞄的 Code。「 QR 碼圖形如果有破損,仍然可以被機器讀取內容,最高可以到 7%~30% 面積破損仍可被讀取。」講是這樣講,但實際掃起來的容錯率會因為使用的掃描工具不同而有落差,在改動上保守一些比較安全…

關於使用者經驗測試

我很喜歡有人問問題,這表示不用絞盡腦汁想 blog 文章主題,有問題就盡量問吧,不管是留言、Twitter、或是寫信都可以。

「關於使用者體驗與使用者介面的測試,怎麼測試這樣的設計對使用者來說是好的?」

便宜有便宜的作法、難有難的深入,我的領域不是跟數據打交道的那塊,加上時間成本 和偷懶 我大多便宜了事(這麼理直氣壯的說好嗎?)以下是個人觀點。

愛用切圖神器:Slicy
愛用切圖神器:Slicy


Slicy 是我測過幾種輔助切圖工具後又回來使用的神器。「把整個 PSD 扔進去,結束。」簡潔利落不囉嗦。我愛它的程度已經到了沒有它我就不會切圖了(哈哈)。

免費切圖神器:Cut&Slice me
免費切圖神器:Cut&Slice me

整個開發流程中我最愛的就是切圖部份了,這表示改得要死的 Mockup 終於過關了喔耶~就來分享一下切圖神器吧,業界最知名的有 2 套,功能有些不同,比較複雜的這套是免費的 Photoshop 外掛,先從免費的開始講起吧。

標示神器:MarkMan
標示神器:MarkMan


一堆人問我的慣用工具…就先從愛用品開始講起吧。

UI 在切完圖後還有工作要做,不是一堆 .png 打包扔給 RD 就了事,圖檔名稱咧?尺寸咧?字體咧?色碼咧?這些都要告訴 RD 的吧?

我是UID,不是UXD


圖片出處:THE DISCIPLINES OF USER EXPERIENCE

當聽到有人說「我是做 UX 的」都不會覺得很奇怪嗎?使用者經驗要怎麼被「做」出來?

要解釋 UID 和 UXD 的不同就得拿出這張圖。它很清楚畫出 UID 和 UXD 的關連和差異。你可以看到紅色大框的「使用者經驗設計」中包含訊息架構、內容、視覺設計、互動設計、人機互動、聲音設計、工業設計、人因工程學、建築學。

UI/UX 之天下武功出少林
UI/UX 之天下武功出少林


這算是我看了這麼多資料所做出來最大的整理吧。說穿了其實不管是哪位 UI/UX「大師」講的都是同一件事情:要怎麼做才能讓使用者好用。

從這張圖表有看出什麼了嗎?第一個直列(白底)就是我之前提到的 使用者經驗分層元素 ,第二個直列(黃底)是 使用者經驗藏寶圖 ,第三個直列(藍底)是 十大易用性原則 。(使用者經驗分層元素裡並沒有說明文件。這項是我自己加上去的,為了讓整個專案更完整、並且能夠傳承下去。)

使用者經驗分層元素
使用者經驗分層元素


想了解 UI/UX,就一定要了解這張圖,這是 Jesse James Garrett 在 2000 年發表的使用者經驗元素一書中所提出:使用者的經驗可分成抽象到具體,也就是由策略、範圍、結構、骨架、表層所構成。圖片上有原作者的說明大家自己看吧。