你是做UI的,那懂不懂UX?

近來,身邊有很多朋友對於使用者界面設計師(UI Designer )跟使用者經驗設計師(UX Designer)感到混淆,在面試UI Designer時,除了一些介面設計相關的問題外,最常被問到就是:「你是做UI的,那懂不懂UX?」,懂?不懂?似懂非懂?總覺得UI Designer的工作內容愈來愈廣,不僅要懂UX,最好也懂程式,最好也懂行銷,最好也懂商業模式…這樣下去應該沒完沒了。撇開其他的專業不說,UI Designer 與UX Designer到底差在那裡? 該怎麼去定義UI Designer這角色呢?其實,這要回到最本質的問題,那就是身為一個設計師,有沒有思考過「設計」是什麼呢?

這個問題在我想了很久,因為我非設計本科,沒上過課所以也不太了解。有人說設計是解決問題的方法,那我會想,有沒有什麼問題是設計解決不了的? 那有沒有什麼除了設計以外的方法可以解決相同的問題? 其實錢也可以解決很多問題不是?難道花錢就是一種設計?仔細想想,在生活中的確有很多問題透過設計可以得到改善,所以它自然是解決問題的方法,但這樣的解釋其實太過含糊,因為你是掛UI Designer,而不是掛問題解決設計師啊!

 

設計是什麼?

平面設計大師Paul Rand,在與學生的對話中己經給我們了一個很明確的答案。

設計就是關係,是形式與內容的關係。—保羅.蘭德«保羅.蘭德 給年輕人的第一堂啟蒙課»

Design is relationships. Design is relationship between form and content.  —Paul Rand«Paul Rand Conversations with Students»

學過平面設計的人,對這位大師一定不陌生,我在«保羅.蘭德 給年輕人的第一堂啟蒙課»這本書中,得到了答案,但一時很難體悟這句話的意思,直到最近才稍微理解這位大師所下的定義。
那平面設計大師講的話,跟介面設計還有使用者經驗設計有什麼關係? 介面設計也是設計,當然也是「形式」與「內容」的關係,所以形式是什麼? 內容又是什麼?

內容就是想法、主題;形式就是你想法的做法。—保羅.蘭德«保羅.蘭德 給年輕人的第一堂啟蒙課»

所以內容可能是自己的想法或是其他人給你的主題,那可能是商業的設計案、公司的產品、社會議題…等等,它就是內容;而形式是方法,你的角色為何,採取的方法就會不一樣,

設計與介面

如果你是一位介面設計師,正在做一個關於社會議題的網站,那你的內容為何?形式為何?你的內容就是關於社會議題的資訊(what),形式就是你如何(how)呈現在網頁上的資訊,設計就是呈現的方式跟社會議題資訊之間的關係(why)。
你希望它如何在網頁上被使用者操作、閱讀、理解、收藏、分享…等等,這是介面設計師的專業,這過程中你會設下很多的「設計目標」,預期使用者如何的去操作你的網站,每一個介面模式(UI pattern)都有它存在被使用的理由。但這並不能解決社會議題中的任何問題,因此即使是負面社會議題,資訊能有效的被傳達,就專業的角度而言它就是成功的設計。

以下UI Designer 簡稱UI、UX Designer 簡稱UX

那從使用者經驗設計師來看,他的內容為何? 形式又為何?

設計與使用者經驗

在相同的社會議題的網站條件下,即使內容相同,UX 跟UI所關注的重點就會不同,UX 更專注於內容本體及研究對象(what)為何,而UI則更專注於內容的結構;而在形式上,UX更專注於如何(how)了解「人」的方法,所以你跟大多數的UX對話時,你會發現他們很在意「使用者」的感受,要有「同理心」,要做訪談要建立Persona…等等,這是他們的專業,這是一連串關於人的科學研究,他們更在乎的是使用者對這議題或產品的感受與態度,並透過觀察還有科學的方法來驗證結果,對他們來說,設計就是人與社會議題之間的關係,所以透過研究人的方法,來釐清人與社會議題之間的關係。但隨著研究的主題不同,研究的對象(人)也就會不一樣,所以如果能夠改良、提昇或是扭轉這樣的關係,才算的上是一個成功的體驗設計。


2016/4/27補充

內容、形式、行為

這幾天跟朋友討論了相關的內容,在«About Face(設計交互精隨)»的書中也提到了內容與形式,只是他多了一項:「行為」。這是個很有趣的發現,仔細想想,Paul Rand是位平面設計大師,在那個年代「使用者經驗」可能被含概在行銷概念中的消費者行為,因此我猜想行為可能包含在對內容的研究裡面。

另外提及「行為」,心理學家Kurt Lewin所提出的場域理論(Field theory)也提及了行為,他認為一個人的行為(B)取決於個人(P)和他的環境(E)的相互作用:

B=f(P*E)

簡言之,人的行為會受環境跟自我的影響,它跟增強理論剛好不太樣,增強理論是在說明「行為是結果的函數」;總之我們可以發現,UX最感興趣的行為,被拉進了設計過程,從對「行為」研究,或許可以更明顯區隔跟UI的差異處。


設計就是一連串的為什麼

因此不管是什麼樣的設計,都可以透過內容跟形式的方式去理解,但找出關係或是建立關係,不是一件容易的事情,而且通常這樣的關係是一連串的「為什麼」,對UI來說:「為什麼按鈕要放右上方?」、「為什麼分享要在文章下方?」、「為什麼字體要挑黑體?」;對UX來說:「為什麼使用者在意這個議題? 」、「為什麼使用者對這個議題感到無趣?」、「使用者對於議題的態度為何?」 …等等諸如此類的問題。

UI要不要懂UX?

這個問題就像是你問物理學家懂不懂數學,或是經濟學家懂不懂統計一樣,他們當然「略懂」,但這背後有兩個問題,第一是為什麼要懂?第二是要多懂深才算懂?對於物理學家而言,他們當然要懂數學,而且不能只略懂,而是要非常的懂,因為他探討的問題很難,是一般人無法理解的關係,所以有一本天文物理鉅作叫〈大設計–The Grand Design 〉,同樣是設計,但它討探討的是另一更複雜的關係,這樣關係要透過數學(形式)才有辦法去釐清。
而對UI而言,UX是形式的一種,使用者介面是給人使用的,越是能了解使用者,越能創造出良好的介面體驗,所以要懂UX,但這裡的懂,並不是你一定要花非常多時間去了解研究人的方法,而是你可以透過參與的過程,或從研究的結論中節取有用的內容,作為UI的調整或改善基礎。

所以當你面試介面設計師的工作,對方問你懂不懂UX,要怎麼回答?

略懂

就是略懂,但一個略懂不夠,要略懂、略懂。但如果對方問會不會使用者研究,你就要用狐疑真誠的眼睛看著他並回說:「不會,我是來面試UI的不會,但我願意參與」。
但如果真的很想當UX怎麼辦?先確認自己對於人的觀察或研究是有異常興趣的,然後去了解一下UX平常的工作內容,要有身為研究員的覺悟,因為它有點像在做論文的定性或定量研究,假設、建立模型、收集資料、分析資料、驗證然後結論,可能沒想像中那麼有趣就是。

真正重要的,眼睛看不見

不同公司對於UX職位的期待不太一樣,有些公司會找UX來改善產品的體驗,所以他們的研究的內容就是產品本身,如果是想挖掘新產品,就得找到TA(Target Audience),並透過研究方法來挖掘需求,UX甚至可以從公司經營的角度 ,去了解公司並重新塑造公司的組織文化,UX的應用很廣,所以它一點也不容易,而且它必需要有一定的經驗累積。

最後要提的是,不管做什麼設計,最重要的還是找出「關係」,UI的專業,不在於你對於形式的掌握有多成熟或是對於內容有多了解,因為這些都是必要的,那是UI專業的基礎,有沒有辦法在這之間建立關係,這才是功力深淺的差別。 關係聽起來抽象,但事實他存在我們的生活中,跟家人的關係,跟朋友的關係,跟情人的關係,跟公司、同事的關係,全都是設計。它看不到,所以很重要。

人只有用自己的心才能看清事物的本質,真正重要的東西用眼睛是看不到的。—«小王子»

介面設計時使用的繁體中文字體 for Android

關於 Android 的介面設計,在前幾篇有提到相關的製圖環境設定:

如何在illustrator 上設定Android的製圖環境

而這篇主要介紹如何在 Android 系統模擬繁體中文字體環境, 與 ios 亦同,在中文字體部份沒太多選擇,雖然 Google 與 Adobe有一起開發出開源字體 (Noto CJK),但就目前在來看,原生 Android 的預設中文字體似乎還是只有一種, 加上各家廠牌手機都有自行開發基於 Android 系統的介面,例如:Htc 的 sense、小米的米 ui…等等,所以各家廠牌的手機顯示出的中文字體也不太一樣,而使用者也可以透過軟體來更換系統字體,但這篇不針對其他客製化的字體做討論。

在Android的中文繁體原生字體是DroidSansFallback,只有這個字體可以用,所以我就用這個字體當作說明的標準。

DroidSansFallback  (for windows,mac可以抓回去自行測試,ttf 檔)

這個字體的結構與對岸的文泉驛微米黑相同,根據我的找到的資料 DroidSansFallback 應該是文泉譯的團隊跟 Google 團隊一起開發的,而繁體字是直接轉自簡體字,所以有些筆劃是對岸習慣的比劃,相關文章的討論可以看這篇:

GB 18030 就在你身邊 – justfont

android_font_size-01

上圖是兩種字體的比較,相同的字級下看起來差異不大。而在 Android 的開發環境,字體的單位是 sp(Scaleable pixels),有點類似 dp,但就記得字體的單位是 sp 就好了,單位相關的文章最近 Google Material Design 也有釋出相關的設計說明:

Units and measurements – Google Material Design

以下是我在繪製 Android 會注意到的事項:

1.中文字體大小至少12sp

Android 中文字體最小就是 12sp,小於 12sp,根據我找到的資料可能會出現錯誤。stackoverflow

2015/04/20補充說明:
根據網友的補充,字體可以小於12sp,但會出現錯誤提醒,並非無法設定小於12sp的字體。
同時再附上android 按鈕樣式產生器:Android button maker – Angrytools.com

2.依不同的開發環境同比例放大

前面幾篇我有提到我是屬於做大縮小派的,所以我不會以1dp=1px做為開發環境,通常是1dp=3px來做為android的繪製環境。

所以根據我測試的結果,在 3 倍的尺寸下繪製介面(1920px*1080px),字體大小我會x3,例如:12sp 的字要用 36px,14sp 的字要用 42px,以此類推。

android_font_size-02

上圖是我針對不同的 dpi所整理出來的 sp 與 px 之間的轉換,但根據我的實際操作結果 (htc m7),還是會有誤差,真正 app 的字體會略小於設計時所模擬出的畫面的字體約 1sp,也就是說如果我要完全符合我預想的字體大小,所有的字體在設計標示時,要再加 1sp,例如:在 480ppi 的製圖環境下, 36px 的字體在設計稿上,本來是要標 12sp,為了符合大小,會標 13sp,以此類推。

3.粗細的設定

關於粗細的設計,我不太確定(歡迎指正),根據我的測試,中文字體可以設定 Light 與 Regular,但粗細實際比較下,沒什麼改變,但如果在 Regular 的字體下再設成 bold,會略粗。但我通常不會再針對粗細做設定,Regular 的粗體我認為太粗,不好使用。

4.字體的可用樣式

字體的可用樣式不多,基本上就是:顏色、透明度、陰影、背景色,大概就這樣,互相搭配使用,雖然只有一種字體,也是可以有九九八十一種變化呢!

5.請設定好字體的使用規範

其實就是跟網頁一樣,h1~h6請定義好,內文、連結、標籤…等等,定義好在不同情況上字體的使用方式,這在往後要做標示或是重新設計,都會有所幫助。

以上是我針對Android界面設計繁體中文字體環境模擬的建議,當然這些規則都會因為新的技術有所調整,例如新的 Noto 字體的開放使用等等,介面設計沒有一定的方法,所以如果有更好的方式,也歡迎討論。

Illustrator專用標示文件工具 CAD-tools

這次來介紹一下一套我常用的標示工具CAD-tools,這套工具是由Hot-Door所開發的ai插件,安裝後就可以像autocad一樣,在ai的文件進行標示的動作。一般比較常用在空間設計上,但用在進行介面的標示,也是非常好用的!

Hot Door

但這套軟體本身並不便宜,所以…google大神快拜…

因為我是用ai 來進行介面的繪製,基本上我不會再把圖出到ps來進行標示,目前我還沒找到比CAD-tools 更方便的方法。至於ps的話,有很多工具可以選擇,如果有興趣可以參考這篇文章:

標示文件神器:specKing

這套軟體的安裝方式就像一般的AI的插件安裝方式一樣,安裝後會在視窗裡找到這套插件

Image 1

同時工具區,也會出現cad-tools的可用工具按鈕,基本上會使用到的工具不多,通常進行介面的標示只會用到:垂直距離、水平距離、資訊的標示(顏色、字體大小、圓角…)、還有比例設置功能,大概這樣就很夠用了。

2015/03/30補充 :在進行標示時,請先至 視窗 / CADtools / 顯示CAD單位 →將單位設置成「」,這裡的點代表的就是px,其他設定還有小數點,暫時用不到。

  1. 平行尺寸-通過線:標示平行尺寸的距離
  2. 垂直尺寸-通過線:標示垂直尺寸的距離
  3. 標示:標示文字內容
  4. CAD比例:調整比例,如果是2:1,就是你畫一個10px*10px的物件,標出來的值會是5*5。這超好用,因為不用再去計算@2x或@3x;透過比例的設定,如果是要出@3x的圖,將CAD比例設成3:1,標出來的值假設是1(單位:點),洽好就是android(XXHDIP)的1dp。所以我都出大圖,透過比例功能的轉換成pt或dp的單位,這之後會非常省事。

cadtools02

要特別注意的是,標時文件時,會在圖層中產生一個維度層,用來紀錄每個標示的內容,而我在標示時,通常會再建立一個measure block圖層,來進行標示,可以參考下圖:

cadtools03

通常我會利用measure block來測量距離,標示完後,就直接取消顏色留下路徑,但如果刪除路徑,那維度層的標示也會同時消失,所以把measure block分開於其他圖層,是為了讓文件乾淨,不要跟其他物件混在一起,方便管理。

最後標示完的文件會像這樣:

cadtools04

超有成就感的呢!!

最後要再強調一下,給工程師的文件一定要清楚,如果不確定怎麼標示,在標示時可以與工程師溝通,正確的文件標示,可以降低溝通成本,通常我標示完文件過去,就很少再回來了,所以標示清楚與準確對於一個好的介面設計師而言是很重要的,此外怎麼將與工程師的溝通成本降到最低,那就是建立一個完整的設計guideline,怎麼建立? 這之後我再說明吧!

有任何問題,或有更好的方法都歡迎提出唷!