UI · 嫁給 RD 的 UI Designer

UI 設計
2014-09-12

iPhone 6 及 Plus 製圖建議

iPhone 6 和 Plus 新機一發表，群裡就有人跑來哀號說老闆叫他準備 iPhone6 的適配，可現在什麼文檔都沒有完整啊！在很多細節不明的情況下，我只能建議這種最保險安全的作法：做 @1x，放大給 @2x 和 @3x 用。以下情境預設為做一套 Mockup 要切出各種尺寸的圖。

UI 設計
2014-06-24

iOS、Android 字級單位

「這是靠我自己摸索出來的喔！是拿 App 截圖進 Photoshop 辛辛苦苦比對所量出來的尺寸。」這位 UI 先生/小姐，你知道世界上有 Guideline 這種文件嗎？「比起問別人，自己摸索出來的才記得深刻嘛！」你知道世界上有工程師這號人物嗎？浪費一堆時間在 PS 量半天為了什麼？文件上寫得一清二楚。字級要用是 pt 或是 px 轉頭問問 RD 立刻就有答案了。

職場求生
2014-05-05

UI 如何改善開發流程

20170812 更新：此為 2014 年舊文，當時狀況為「UX 包含 UI」，所以 UX 工作包山包海包 UI，依目前工作職責來看，這篇文提到的所有工作內容皆為UI 設計師的工作。已修正。

一間公司要營運絕對不是靠某個人腦充血帶頭往前衝，各部門間有許多事情需要相互配合。UI/UX 是最近很紅的話題，已經到人人說得一口好使用者的程度。講歸講，要在軟體開發的什麼階段導入 UI 設計呢？本文從我的角度來說明 UI 如何改善開發流程。

UI 設計
2014-04-15

iOS Guideline 怎麼看？(2)

iOS Human Interface Guidelines 第二章是設計策略 Design Strategies ，主要講畫面、使用者操作、反應等等的一致性與注意事項。在閱讀這個章節之前，建議把十大易用性原則先看過一遍、對易用性有粗淺概念後會更容易理解為什麼 Guideline 會這樣寫。

UI 設計
2014-04-08

iOS Guideline 怎麼看？(1)

這是給 UI 看的教學。發現太多人不看Guideline…基礎問題問了又問，明明官方文件擺在那。就算英文看不懂，Google 打下去對岸有很多翻譯成簡中版的。最最少留意一下尺寸吧？（這次的 iOS7 官方文件省略很多沒寫到、建議回頭去看看 iOS6 的Guideline，兩份加起來比較紮實。）

UI 設計
2014-03-29

初學者的 Mockup

在畫好 Wireframe、定版後，就可以依照線框稿內容製作 Mockup 了。Mockup 有很多種說法，我當它是視覺稿，所有跟視覺有關的部份都會在這個階段產出。能夠用來製作 Mockup 的軟體有很多種，最大宗的就是 Photoshop。之前的文章都會說提升 PS 技巧，其實指的就是製作 Mockup 的能力，字體設計、按鈕樣式、扁平化、擬物風等等。

UI 設計
2014-03-25

標示色碼的方法

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

UI 設計
2014-02-21

8px 後續，模糊

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

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

UI 設計
2014-02-19

關於 8px

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