標示色碼的方法
標示色碼的方法


在寫標示文件給 RD 前，先來了解一下何謂「色碼」。常見的色碼有幾種：HSB、RGB、CMYK、HEX…等等。各種色碼運用場合皆不相同，理解後再來看看 Android 和 iOS 需要什麼。

問「為什麼」來分析、設計介面

相信大家在小時候都有問「為什麼」問到大人抓狂的經驗。「天空為什麼是藍的？」「地球為什麼是圓的？」等等，然後得不到答案或是被唬爛。前者牽涉到色彩學、後者和力學有關，就算大人懂也很難解釋給知識不足的小鬼頭聽，（所以我爸老是唬爛我。）這養成我遇到問題乾脆自己找答案比較快、省下被老爸唬爛還得翻白眼給他看的力氣。

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 ）

3 種應用程式風格


不要再叫 PM 或 BD 畫 Wieframe ！他們真的不是 UI/UX 的專業人士，如果注重專業，在約還沒簽、規格也還沒訂出來的時候就該把 UX 加進工作流程裡了。PM 最重要的工作是控管時程、各部門單位間溝通，BD 是廣義的 Marketing ，也不該是這個位子的人在搞介面，畫 Wireframe 的是 UX 啊 UX！

Guideline 的重要性

強調再強調，一定要先看過 Guideline 後再來做介面設計，卻被人嗤之以鼻，說不用看一樣可以產出啊幹嘛要花這種時間。

  1. 如果不是你的產品太簡單、就是都用內建元素或抄襲湊合了事。
  2. 你同事人太好，幫忙擦屁股了。
  3. 你同事程度跟你一樣，搞不清楚狀況。

別說很多 UI 高手們也老是跳脫 Guideline 設計啊，他們哪位不是對 Guideline 熟到可以朗朗上口到幾乎可以報頁碼的？不懂 Guideline 的就只能當美工用，連視覺設計都稱不上。

我的 UI/UX 設計入門方式

自從開了這個 BLOG 後，好多人都問我這些關於 UI/UX 設計的技術是從哪裡學到的。就台灣來講這個領域太新了，剛入行的時候只能夠自學，缺少很多資源，通通靠自己摸索，所以我希望能整理出一套系統性的 UI/UX 教育方式，但這需要花費大量的時間，靠下班後的空檔根本不夠，頂多寫寫 BLOG 讓大家加減看。目前我不想把 UI/UX 硬拆成兩塊，雖說這本來就是兩個不同的領域，但世界上所有的事物都是有關聯的，不能說我只想做這個其他連碰都不碰，很快就會陷入窠臼遇到瓶頸。大概是因為我喜歡規劃分析、但又不想放棄能做漂亮炫圖的機會吧。

初學者的 UI Flow

UI Flow 和 Functional Map 算是最多人容易搞混的兩種圖表吧，Functional Map 主要目的在「將抽象的需求轉變成能被實現的功能」；而 UI Flow 則是「 妥善安排功能與資訊在頁面之間的操作動線 」。兩者很明顯目的不同，所以沒有什麼重工或是很麻煩之類的藉口可以逃避不做。

初學者的 Functional Map

功能規格書、產品規格書、系統分析、需求分析等等，是 PM 或 SA 或其他同事的工作，反正不是 UI 的工作，很多 UI 不願意去接觸這類文件，（就說了字太多圖太少設計人看不下去、有沒有懶人包？）但看不懂這些文件的 UI 絕不能被稱為好 UI…連這個軟體要做什麼都不熟悉、一知半解，要怎麼說服別人設計的介面是適合這套軟體（或網站）的好介面？

我的選色技巧
我的選色技巧


Pochade 我愛用的截色 App

最近在工作上遇到關於配色的大難題…公司 LOGO 是深藍＋亮橘，但要做的專案和股市看盤有關，所以要加入紅色和綠色，要求官網、網頁版系統、Desktop App、Mobile App 都要一致性、能讓人一眼就看出來這是該公司的產品，要有企業形象，一定要用上企業色。偏偏扯到「股市看盤」就不會只有兩條線在畫面上跑這麼簡單…

Responsive Web 抱怨篇

老實說、自從我一頭栽進 Responsive Web 的世界，又接觸 Bootstrap 後，很久沒去思考「在 Responsive 上我還能玩些什麼花樣」。有人跟我提過 Bootstrap 雖然好用、但也限制許多可能性，所以他們不喜歡。我倒認為它只是項工具、要在網頁上套用它就必須遵循它的規則。

互動設計概論

什麼是互動設計？

互動設計這個詞這幾年很常見，包山包海感覺上只要是各種媒體上看到會動都可以叫互動設計。有一種說法是「設計出互動產品，提供人類在日常生活或工作中使用」，更詳細的解釋則是「互動設計是人類互動及溝通上的空間」。它是一種以使用者的需求與經驗為出發點，創造出人類與科技的完美連結。 IDEO 創始人在 1984 年的一次設計會議上提出，他剛開始將互動設計命名為「軟面」（Soft Face），但這名字很容易讓人想起當時流行的玩具「椰菜娃娃」，後來將名字改為「Interaction Design」。從 Soft Face 這個最早期的命名方式可以看的互動設計的特性：沒有規則可讓人任意塑造扭曲、是在最表層如臉孔一般的存在。

文章分類

wave