在人人有手機、家家有電腦的網路時代，誰都可以隨口說出：「這個 App UI / UX 很爛欸，超難用..」，不過並非所有人都能駕輕就熟地說出 UI / UX 的定義哦（包含我面試過的設計師 😜）。所以，讓我們從基礎深入淺出地認識何謂使用者介面吧。
🌟 兩大重點：定義與特性
所以，使用者介面是什麼？
使用者介面（User Interface）是指系統與人類互動、交換資訊用的介面。
可以理解為呈現資訊、可以互動操作的視覺元素。
介面的特性
一般來說各種服務都牽涉到人與人之間的互動，例如你去超商拿了餅乾去櫃檯結帳，這時候店員會掃餅乾的條碼，並告知你金額，順便還會問你要不要載具？你說不用，交了錢之後帶著餅乾離開了。上述的流程在生活中無處不在，存在服務業、餐飲業、精品業、各行各業。
但今天如果你想透過網路購買一包餅乾，這時候沒有店員服務你了，但你可以透過線上商店的介面仍然可以成功買到餅乾，介面一樣會要你選擇品項，並會顯示金額，也有可以填寫地址跟載具的輸入框，然後你只要等物流送來就行。所以我是這樣理解的：介面可以取代人力與實體、隨時隨地可以操作，並且把複雜的事物簡化到讓你看得懂（例如你不用理解店家是如何處理訂單並分配物流），介面就是一種以人為本的互動媒介，透過以上的範例我歸納出幾個介面的特性：
一、解決問題
現在你去蘋果或 google 的 app 商店，會有五花八門的遊戲、應用程式、電子書甚至電影等等，他們在向你銷售的核心都是解決問題，例如你不想買實體書佔空間，那電子書解決了這個問題，如果你想追蹤自己的睡眠品質也可以透過許多 app 來完成，當然不限於軟體或應用程式，你操作的 ibon、車內的儀表板與各種按鈕、去夜市玩的彈珠台等等，通通都是介面的一種——可以操作的視覺元素。
二、可操作
很多人認為平面設計跟介面設計沒什麼差別，但往往你直接讓平面設計師設計介面時就是會出現很多問題，最大的原因就是可操作性。事情只要牽涉到互動就會變得複雜，而介面就是其中之一，只要有操作勢必會有反饋，如果介面不給反饋，使用者怎麼知道自己做對了還做錯了呢？
有幾種常見的反饋是需要被 UI 設計師考慮的（以後會單獨一篇說明），例如使用者輸入錯誤的時候怎麼呈現？如果斷網了怎麼辦？商品賣完了怎麼處理？如果使用者輸入太多字數該如何？商品加到最愛後要去哪裡看？像我前面提到的，介面就像是取代真人服務你，真人可以很即時地做出回應，可以原地處理，但介面如果你沒去設想到這些狀況，操作就會變得艱難，客服就會被打爆，這也是 UI 設計師專業的部分。
三、能被理解
介面必須以人為本，好理解是最基本的，就像是你不必懂影印機的原理，但你還是可以透過機身上的觸控螢幕操作，印出你想要的文件。雖然是很基本也很簡單的事，但你鐵定也遇過不知如何操做的介面吧？因為這牽涉到人的心智模型、使用習慣與心理認知等等，並不是把說明跟按鈕一股腦扔到介面上就行了（有的介面按鈕甚至還不像按鈕）。
簡單來說，能被理解的前提是，你替使用者整理好資訊，用易懂的文案，主次分明地聚焦在一件任務上。
下圖是 IMDB 2000 年（左），與 2021 年（右）的介面對比，當你回到舊版的 IMDB 時應該會特別焦躁或徬徨：我到底該先看哪個地方？我接下來要幹嘛？（還是說這只是 UI 設計師的職業病？），不過你仔細看了一下今天的 IMDB，你會覺得舒暢多了，首先他有個大大的 Banner 先吸引了你的注意力（主次分明），然後你看到一個播放按鈕鼓勵你去看看有啥新鮮事（引導你），此外他的深色背景描繪出電影院的氛圍（對既定事物的熟悉感），使用者不喜歡做決定，大多時候我們就是很無腦地瀏覽網站，介面必須引導用戶。
四、時空限制少
排除一些服務或對象本身的特殊限制（例如銀行、證券可能有規定的交易時間），大多時候你只要有手機與網路，你能做的事情很多，即使是半夜三點你還是可以買網拍，一樣可以學習線上課程或是下載電影來看，在這些服務成熟以前，我們常常要在規定的時間內到實體店面獲得商品或服務，但如今介面跟著網路一起成長起來，尤其是疫情之下，必須透過線上完成的事情越來越多，介面的易用性也越發重要，當然也更需要考慮跨國家、時差、幣值、語系、閒置時的處理、長時間地維持服務..等等時間空間等的議題。
總結
使用者介面與平面設計不同，著重在解決問題。主次分明、清晰易懂的呈現訊息，引導使用者完成任務，也須考慮心智模型與用戶習慣..等等。是需要時間與經驗累積的一門科學，後續也會跟大家分享更多實務上設計原則，如果有不足或錯誤的資訊歡迎補充與告知 🍒
Pixel Perfect 
果然是深入淺出、不乏知識含量的一篇好文～透過生活中常見的例子，做出十分有系統地歸納和分析，尤其喜歡第三點後半段的比對說明，不僅觀察入微，也貼切的描述出user的習慣！
這邊想請教：總結裡提到的心智模型是指Mind Map嗎？一般是如何將這項工具結合介面設計呢？
很開心有如此專業的設計師分享這麼有質感的文章～～期待下次的分享 ❤
讚Liked by 1 person
謝謝你看的這麼仔細～好感動 😍
mind map 跟心智模型是不一樣的喲~
mind map 利用主題關鍵字為中心去延伸並記錄各種可能性與關聯，形成放射狀的圖像進而組成某個主題的概觀，常以腦力激盪、聯想或討論等行為來刺激延伸的廣度與深度，著重在研究、組織、解決問題。
至於心智模
型則是指一個人對事物運作方式的理解，透過有限的線索、過往經驗甚至直覺去推敲要怎麼正確使用工具 or 處理事情。
例如：
手機 app 的拍照按鈕都會有相機的圖示，這會讓你快速理解到這是個有照相功能的按鈕，基於自己的經驗去理解，也基於目標對工具或產品產生期望，這就是心智模型唷～
雖然上面的例子很簡單，不過很多設計師沒有意識到這部分，可能會設計出人家看不懂，或是不易用的設計。
白話點說就是人類跟世界萬物的互動模式是有一個習慣與認知的：）
讚Liked by 1 person