嫁給RD的 UI Designer

UI/UX 設計、教育訓練、課程演講

高雄-6月份 UI 設計師入門班,報名頁面
Posts match “ UI ” tag:

什麼是 Wireframe ?

| Comments

2.0.jpg老實說我受夠某客戶和某設計公司老是把 Wireframe 喊做 Storyboard 了!每次聽到都要克制翻白眼的欲望。拜託不要開口閉口說「我們很重視 UI、我們很有經驗」,卻連基本名詞都講錯。這跟義大利跟維大力一樣、相差十萬八千里啊!

為什麼要畫3次 Wireframe?

| Comments

我做給畢業展:微波效應用的 App Wireframe每個新案子進來,我通常會畫至少 3 次的 Wireframe,記錄靈感 > 完整繪製 > 電子化。好像重工了喔?可是你哪來的自信覺得設計 App 介面能一次到位呢?靈感乾涸對設計師來講理所當然、RD 都跳坑了才發現設計有錯缺東漏西也很正常、接手修改前人留下的舊案子卻找不到相關文件也不是什麼稀奇的事。為了要避免發生這種慘況,畫 3 次以上的 Wireframe 比較保險。

無損圖片的介面製作方式(上)

| Comments

目前市面上最常見的被用來設計 APP 介面軟體為 Adobe 的 Photoshop 和 Illustrator。Illustrator 屬向量軟體,不管再多次的放大縮小,向量圖的質量不會因此改變。Photoshop 是繪圖影像處理軟體,像素圖片一經放大縮小後畫質會變差,偏偏目前 iOS 需製作 2 種、Android 至少也要作 3 種尺寸的圖檔,有時候還會有不知道哪邊來的交辦要 UI 協助製作「等身高大 iPhone」。為了提升畫面的精緻度(和對付這種強人所難的需求),還是盡量以無損圖片方式製作圖稿、運用比較靈活。

App 切圖檔案命名方式

| Comments

1.jpg
一個 App 通常會有很多張切圖,不管是 iPhone 需要 1x、2x 圖檔,Android 需要至少 3 種 hdpi、xhdpi、xxhdpi。在龐大的切圖數量下如何讓負責套圖的 RD 快速找到所需圖檔,檔名的命令方式就需要雙方統一格式方便大家作業。

Portrait 和 Landscape,談螢幕方向

| Comments

直式螢幕稱為「Portrait」,橫式螢幕「Landscape」,頁面會依照橫直螢幕不同而改變形式的作法稱之為「Auto Orientation」。不管是 iPhone、iPad、還是 iPod,它們都是長方形的,一般情況下會直式使用,但某些情況就會轉成橫式更為合適,最明顯的例子就是遊戲類。什麼情況下會轉橫使用?橫式和直式的頁面樣子是否會不同?要怎麼調整呢?從 iOS 內建的 App 就可以發現數種切換模式與其代表的功能。

各種狀態與突發狀況

| Comments

即使畫了非常精細的 UI FLOW、每一頁 Wireframe 旁也寫上詳盡的註解,但在專案後期 RD 仍是發現許多在前期規畫階段沒有被考慮進去的情況,這是為什麼呢?有一種可能性是漏了思考「各種狀態」和使用者的「突發狀況」。這會導致開發時程延後,因為訂定的規則不夠準確而再次召開討論會議確認細節。甚至發現此路不通但該功能已經做下去了無法修改進退兩難的情況。

使用者經驗藏寶圖:序

| Comments


Peter Morville 設計出「使用者經驗藏寶圖」,如圖,說明一個構想是怎麼合理且適切地無中生有,一直到完成設計提出各式文件給客戶的開發流程。我覺得這是每位UI、RD、PM都該知道的流程,同時也是開發產品的必經之路。身為專案成員不應該悶著頭只做自己份內的事,了解團隊如何運作、每個階段該產出什麼,這點非常重要。

反應與提示

| Comments


在易用性原則裡,系統狀態的能見度、辨識而非記憶這兩點與「反應」有關。在操作 App 時,「反應」扮演著重要角色,它有著引導使用者至下一步的功能,幫助使用者理解目前狀況、繼續操作。在 iOS 上,常見的反應有數種:視覺、聽覺、觸覺。點擊某個按鈕,按鈕會變成被擊中凹下去的樣子,輸入正確會聽到叮叮的成功提示音,操作錯誤或失敗手機會震動並聽到嘟嘟的錯誤提示音等等。如果對於 App 的「反應」置之不理,使用者就無法知道自己操作的結果,對於自己的操作產生疑慮、逐漸失去對這個 App 的信賴度。

互動設計概論

| Comments

什麼是互動設計?

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

使用者經驗藏寶圖:敘述故事、找出中心思想

| Comments


雖說很對不起邀我來參加聚會的主辦單位,但 UI 和 RD 擅長的領域差不多就是聖母峰和馬里亞納海溝的差別。為了不浪費這段人人都在補充新知我卻蹲在旁邊玩保衛蘿蔔2的時間,還是來寫點文章表示我也有努力好了...根據這張藏寶圖的順序,就來談談「敘述故事」、「找出中心思想」。

我的選色技巧

| Comments


Pochade 我愛用的截色 App

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

Guideline 的重要性

| Comments

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

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

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

3 種應用程式風格

| Comments


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

UI/UX 之天下武功出少林

| Comments


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

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

我是UID,不是UXD

| Comments


圖片出處:THE DISCIPLINES OF USER EXPERIENCE

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

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

學習UI/UX的四大重點

| Comments

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

8px 後續,模糊

| Comments

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

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