UI｜讓我們立志「不要」成為美感至上的 UI 設計師
過去的兩年中不定期受邀擔任活動講師，讓我有機會和很多想成為 UI 設計師的新鮮人、轉職者接觸，也多次聊到「為什麼想當 UI 設計師」這個議題。
在這些對話中，我發現了一件有趣的事情：很多人想當 UI 設計師的原因，都是想做漂亮的介面、酷炫的視覺。有些可能原本是視覺設計師，本身有美感基礎，所以覺得轉職 UI 設計是很合理的選擇；有些則是單純不喜歡 UX 的研究性質，認為 UX 枯燥乏味，對可以自由發揮的 UI 設計更有興趣。
無論前提為何，想成為 UI 設計師的人，多半有這個共性：美感至上。
而我認為，美感雖然重要，但是只注重美感的 UI 設計師必定在職涯上走不遠。
美感的影響力：Aesthetic-Usability effect
回想一下有沒有過這樣的經驗：你正在考慮開始記帳，於是挑了兩個記帳軟體來試用。雖然這兩個 app 記帳功能都很強大也很完整，但總是感覺介面比較美的那個 app 似乎更好用一些。為什麼會這樣呢？
早在 1995 年，日立設計中心的研究者 Masaaki Kurosu 和 Kaori Kashimura 就開始研究美感對於使用者對產品體驗的影響。他們測試了 26 款不同的 ATM 介面，要求 252 個受測者對其易用性及美學設計進行評分。他們發現受測者的對產品的易用性認知，與美學設計的評分有強烈的關聯性：即便是實際上擁有相同功能的兩個介面，使用者也會受到美學設計的影響，而認為較美的那個介面更好用。
這就是 Aesthetic-Usability effect（美學-易用性效應 / 美即好用效應）。Nielsen Norman Group 對這個效應的完整定義為：
使用者將更吸引人的產品認知為更好用的傾向。人們容易相信好看的產品會更好用，即便它實際上並沒有更好的效果或更高的效率。
一個好看的設計能有效增加產品競爭力，提升人們對產品的喜愛程度。有美感的介面，不只能夠達到吸引使用者的目的，甚至能夠讓使用者對於一些小缺陷有更大的包容度。也就是說，如果你的產品有眾多功能相近的競品，那麼你花在美學設計上的資源，有可能成為贏過競品的關鍵。
那麼，既然好看的設計這麼重要，為什麼我會說 UI 設計師一味追求美感，必定在職涯上走不遠呢？
當美感遇到易用性缺陷
要知道，剛才我們舉的都是在眾多功能性、易用性相近的情況下，美感能使一個產品勝過競品的例子。
但是，美的設計雖然能讓使用者對於一些小的功能性問題有更大的包容度，卻無法使他們忽略易用性的重大缺失，或是明顯的功能性不足。當介面有重大的易用性問題，或是為了美學而犧牲易用性，使用者便會迅速失去耐心。
“A pretty design can make users more forgiving of minor usability problems, but not of larger ones.” — Nielsen Norman Group
在易用性測試中，即便使用者一開始對產品的設計有高度的評價，也會因爲易用性的不足而迅速產生倦怠與反感。也就是說，美感雖然重要，但是能幫上的忙卻是有限的。
實際上影響使用者決策的關鍵，還是落在了功能性、易用性等，更為重大的條件上。唯獨當這些條件都接近時，美感才會起到關鍵性的作用。
所以如果一個 UI 設計師的終極目標是做出好看的介面，而不是易用性高的介面，那就本末倒置了。
UI 設計師應該先追求最大程度的易用性，並在易用性的基礎上，最大化美感設計，才是提高產品競爭力最有效的方式。
而除了易用性之外，UI 設計師還要顧及到非常多面向，例如使用習慣、可及性、視覺引導、跨裝置體驗、開發上的可行性等。唯有以上面向都妥善顧及到了，一個「美」的介面才有意義。
UI 的 5 大面向與設計實例
雖然我身為產品設計師不會專職設計 UI，但只要遇到介面設計，就必定會考量到許多前面提到的美感以外的面向。下面是幾個我在設計介面時會關注的重點，以及過去做過的一些實際案例。
一、目標客群的使用習慣
在設計介面時，我喜歡優先考慮這個產品的目標客群是誰，觀察他們使用 app 的習慣與理解程度，再針對他們設計最容易操作與理解的介面。
比方說以前在 Kono 電子雜誌，我們的目標客群年齡層大約在 35–60 歲之間，因此設計介面時必須考量到這個年齡層的使用習慣。所以，Kono 的 UI 設計原則是：
1. 重要功能不使用純 icon 圖示，必須使用純文字或圖示加文字
👉 許多中高齡族群用戶使用 app 的種類和頻率比年輕族群低，對各種 icon 圖示的意思也較不熟悉，因此重要功能或標籤用文字顯示是最容易理解的。Kono 的介面經常使用純文字或是圖標配文字的形式呈現，並盡可能避免純 icon 的設計。
2. 按鈕、可點擊元件盡可能 44px 以上
👉 小物件除了不容易點擊以外，也經常被中高齡族群誤認為是不可點擊的元件。為了讓用戶更容易操作、理解，設計上會盡量需要減少點擊小物件的行為，大部分可點擊的物件與圖示都會刻意設計較大的點擊範圍。
3. 增加高對比度色彩、減少不飽和色彩的使用
👉 中高齡族群視力逐漸減弱，無論是近視、老花，或者是單純不習慣小尺寸螢幕，都會導致低對比、低飽和度色彩顯得更難閱讀。因此在設計 Kono 介面時，會刻意選用對比度高的色彩，避免使用相近色、灰階、不飽和色等，以減少視覺上的負擔。
二、少數群體的可及性
除了目標客群之外，也不能忽略了少數群體——如視力障礙、聽力障礙、肢體障礙者等——的可及性。在能力所及的範圍內，UI 設計師不只要確保介面符合多數人的習慣，也要顧及少數群體的使用需求。
在設計 Summit，一個有聲書摘產品時，除了針對目標族群（20–35 歲語言學習者）設計相應的畫面之外，我也特別針對視力障礙者（註 1）制定設計方針：
1. 對比度必須符合 WCAG 規範達到 Level AA 或以上 ⬇️
👉 Summit 的主色都是經過對比度測試後挑選出來的，在使用上也有明確規範，確保產品符合 Level AA 以上的規範。
2. 針對視力障礙者（如：色盲、色弱）優化 UI 設計 ⬇️
👉 範例為針對 tab bar (bottom navigation) 的比較圖，左側為三種 tab bar 設計的原圖，右側則為它們在色盲模擬下會呈現的樣子。經過測試後決定使用對色盲人士最友善的版本 1。
3. 產品必須能在 iOS 的 VoiceOver 模式下順利操作（註 2）⬇️
👉 範例為給 iOS 工程師的文件中，標示了每個元件在 VoiceOver 模式下應該被唸出的正確名稱。除了為每個元件命名之外，我們也會針對 VoiceOver 模式進行測試、操作，確保視障人士能夠順利使用產品。
註 1：基於有聲書摘的產品特性為聽覺式學習，因此特別選擇針對視力障礙者做額外的 accessibility 設計及測試。
註 2：此產品開發時僅提供 iOS 平台下載，因此並未針對 Android 做測試。
三、有目的性的視覺引導
UI 設計師最大的工作便是視覺引導——怎樣才能讓使用者優先看到我們想讓他看見的訊息？如何引導用戶做出我們希望他做的行為？
去年我做過一個挺有趣的專案，是要設計一個引導用戶註冊新服務的橫幅，目標是吸引 Codementor 的使用者點擊並導流到我們公司的另一個產品 Arc。
我們將橫幅安插在 Codementor 的案件需求列表中——這是平台用戶每天都會瀏覽的頁面。而在設計上我做了一個冒險的決定，那就是不採用過於顯眼的設計，改用低調、融入環境的白色橫幅。
結果，這個橫幅的點擊率高達 43%，也就是說，每 10 個造訪這頁的用戶，就有至少 4 個人會點擊。
一個小小的橫幅，為什麼能夠達到如此驚人的點擊率？除了文案和產品策略之外，UI 設計也起了很大的功效：
1. 利用視覺相似性避開廣告視盲效應
👉 廣告視盲指的是當介面上的物件長得像廣告，或是行為像廣告時，使用者便會在潛意識中選擇忽略它，即便它可能並不是廣告。
因此，當我把橫幅設計成跟其他元件一樣的尺寸、一樣的字型時，它就會融入環境，被當成介面的一部分，進而避免引發廣告視盲。
>> 延伸閱讀：我在上一篇文章有更深入講解廣告視盲，歡迎參考 ⬇️
2. 在視覺動線上用差異性做出視覺停留點
👉 但是，我們當然不能將橫幅做到完全融入環境，導致被使用者全然忽略，所以接下來把資訊放在哪裡就變得非常重要。
使用者頭像是整個介面最多色彩的區塊，所以用戶到了這一頁後，目光也最容易先被吸引到頭像區。另外，由於是尋找案件需求的頁面，因此預算欄位也是用戶很在意的地方。於是這兩排資訊就成了絕佳的戰略位置。
橫幅的這兩個位置放了兩個很重要的物件：頭像欄位被放置了 NEW 的標籤，而預算欄位則是用來放置 CTA。利用這兩個差異性在使用者視覺動線上製造了停留點，也就增加了橫幅被閱讀的機會。
3. 運用環境規則增加橫幅曝光
👉 需求列表的規則是新的需求顯示為藍色、已讀的需求顯示為白色。而由於列表隨時都會更新，所以用戶每次打開這一頁都有很高的機率會看到這樣的畫面：
將橫幅做成白底，能夠有效地在用戶到達頁面時吸引目光，並在用戶看過新需求之後融入背景、隱藏自己。這樣既達到曝光的目的，又能減少對使用者的干擾。
四、跨裝置體驗
許多設計師在做 RWD 網頁時，設計稿是做成桌機、平板、手機三種靜態畫面的。但 RWD 並不是靜態的，它是隨著螢幕尺寸變化而動態調整的。
如今裝置百百種，尺寸雖然大致上還是分為桌機、平板與手機三種類別，但是用戶使用的螢幕大小卻是變化多端。折疊手機、大手機、小平板、大平板、49 吋螢幕、32:9 螢幕、分割螢幕… 特殊尺寸早已成為常態。
因此，設計 RWD 介面時，我除了針對最常見的螢幕尺寸設計之外，也會考量到介面在任何尺寸下應有的動態變化。
⬆️ 舉例來說，這個頁首的 banner 不會只是畫出靜態畫面，而是會詳細標註如何 resize、斷點在哪、哪些尺寸是固定的、哪些尺寸是彈性的。這樣，前端工程師才能具體地實現設計稿，達到在所有螢幕尺寸上都與設計師預期相符的效果。
⬆️ 同理，這是我在設計 Codementor Events 的 header 時，標註的設計文件。由於所有的尺寸變化在設計時都已經考量到，所以只要根據這份文件開發，就不會遇到爆版、元件重疊或是留白空間不夠等，特殊螢幕尺寸容易發生的問題。
五、技術上的可行性
新手設計師最常忽略，卻也是讓工程師們最頭痛的，就是技術可行性 😂 許多設計師的設計稿美得逆天，設計理念也是有理有據，可一旦要交接給工程師時就是惡夢的開始。（相信工程師們都懂 😈）
UI 設計師雖然可以不會寫程式，但是基本的 HTML/CSS 觀念還是要有的。擁有基礎觀念的 UI 設計師，能夠確保自己的設計稿有極高的可實行性，也較少會做出天馬行空、開發困難的畫面。
當然，大部分的介面如果花時間、花資源，都能夠實現。但是大部分的公司沒有那麼多時間資源可以浪費，因此 UI 設計師能不能設計出好用、好看，同時又容易開發的介面，就是一項不可忽視的硬實力。
從 UI 排版的方式到設計規範的制定，從設計文件的撰寫到元件、素材的管理，都是專業的 UI 設計師靠經驗累積，與工程師來回溝通，並有意識且持之以恆地管理，才能夠做好的。
好看，是最後一個原因
今天講了很多 UI 設計師在畫面美醜之前，應該先顧慮的種種面向，包含易用性、使用習慣、可及性、視覺引導、跨裝置體驗與技術可行性等等。雖然肯定還有更多面向還沒有提到，不過受限於篇幅我們就先點到為止（笑）。
現在我們終於要回到起點，也就是「設計一個好看的介面」這回事。設計一個好看的介面很重要，是設計的本質，卻不是我們需要最優先考量的事。
我們設計的每一個元件、每一個畫面都必須有意義。不管是為了易用性、為了體驗、為了便於開發… 這些都是影響 UI 設計的重要原因。而好看，是最後一個因素。
一個漂亮的皮囊，必須建立在好的骨架上。好看的前提，不應該是透過犧牲易用性、犧牲體驗，或犧牲開發者大量的時間與資源換來的。美感不是用來掩蓋或彌補產品的缺陷，而是用來在好的產品上畫龍點睛。
所以，當有人問我們「你為什麼這樣設計？」的時候，好看，應該是最後一個原因。
結語
這篇落落長的文章總算寫到了最後，對於還在閱讀的人，感謝你花了這麼多時間看我碎碎念。
也許有人會說，不過就是設計一個 UI 介面嘛，有需要搞得這麼複雜嗎？或者是，我一向都只管好不好看，也是順順利利做到了現在啊！
當然，有些 UI 設計師可能在廣告公司、行銷部門、接案公司工作，這些設計師的日常工作中最常面對的可能還是「好不好看」的問題。但是廣告公司、行銷公司的案子一般來說都是短期專案，完稿交出去之後就不再對其負責。
產品設計師則是與產品一榮俱榮、一損俱損。
設計得好了，使用者多、公司有收入、產品也有了名氣；設計得差了，使用者寥寥無幾、公司虧錢，甚至倒閉。
於是 UI 設計便不再以美感為主要考量，而是必須考量到眾多不同的面向。UI 設計師光有美感也就不夠了，而是必須擁有 UX 思維、研究熱忱、心理學知識、HTML/CSS 觀念以及種種經驗累積。即使擁有了這一切也都還不夠，設計出來的介面依舊要測試再測試、迭代再迭代。
所以，如果你正在考慮成為 UI 設計師，或是正在猶豫自己想不想走 UI/UX、產品設計這條路，希望你在看完這篇文章後會有一些新的想法。無論是就此打消念頭，或是更加篤定要走這條路，都期望這篇文章能對你的職涯帶來幫助。
↓↓ 如果喜歡這篇文章，請幫我掌聲鼓勵鼓勵～也歡迎追蹤，我會不定時發布新文章！👏👏👏
