iPhone 6 及 Plus 製圖建議

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

iOS、Android 字級單位

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

UI 如何改善開發流程

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

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

iOS Guideline 怎麼看?(2)
iOS Guideline 怎麼看?(2)

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

iOS Guideline 怎麼看?(1)
iOS Guideline 怎麼看?(1)


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

初學者的 Mockup

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

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


在寫標示文件給 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

學習UI/UX的四大重點

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

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


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

Guideline 的重要性

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

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

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