前言

嗨呦我是 Jasmine,關於這篇文的誕生,其實是因為每當身邊的家人和朋友(尤其是長輩們)問起我的職業時,他們一頭霧水的表情和反應我實在是看太多了啦!!

什麼是 UI/UX?嘗試解釋自己職業狀況的女子
Photo by Karolina Grabowska from Pexels
Design by Jasmine Sie

以上這個場景是不是很常見呢?(苦笑

然而這又是一門深奧的學問,很難以三言兩語解釋清楚,所以常常最後都以「我是做網頁和 App 的啦~」草草結束掉,但其實這樣說並不正確,那只是我工作中的其中一部分啊!(只是這樣說大家比較能大概知道我在做什麼QQ

不過,想想當時我自己一開始自學 UI/UX 設計的時候,也是爬了好多文查了許多資料才終於搞懂這個概念,於是今天我想寫一篇文章來聊聊到底什麼是「UI/UX」,也當作是我的學習筆記,希望可以幫助在自學途中、以及對這門學問有興趣的大家!

準備好了嗎,我們要開始囉~

什麼是 UI?

UI 的定義是什麼?

UI 是「User Interface」的簡稱,中文是「使用者介面」,其實它的範圍很廣,不只是指手機、電腦上的 App、網頁,舉凡是能被使用者「操作」、「運作」、「給予回饋」的介面,都是 UI!

遙控器也是 UI?來看看幾個生活例子吧!

最簡單好懂的例子就是家裡最常見的「電視遙控器」、「各式開關」了!

電視遙控器
Photo by Ian Panelo from Pexels
App UI
Photo by Balázs Kétyi on Unsplash
電燈開關
Photo by Isabella and Louisa Fischer on Unsplash
Design by  Jasmine Sie

沒錯,他們都是 UI!不是只有網頁和 App 介面是 UI 哦!

我第一次釐清這個觀念是因為讀了「不是你太笨,是爛UI的錯!非設計師也該學的介面設計常識」這本書,裡面清楚地用圖片說明了我們日常生活中的 UI/UX 問題,不只是 UI 設計師必看,它淺顯易懂又有趣的敘事方式也相當適合每個人閱讀

這類案例最令我印象深刻的就是經典的的水龍頭和門把設計,你以為要推結果是拉,以為往左是熱水結果是冷水……呃?

令人困惑的水龍頭設計
圖片來源

看看上面這張圖,你是否能直覺地判斷這兩個問題:

01 你知道哪個開關是調整冷熱水的嗎?

02 你知道哪個開關是調整水量大小的嗎?

令人困惑的門把設計
Photo by Frank Eiffert on Unsplash

再來看看這個很 Fancy 的門把,很漂亮,對吧?

但是光看照片我並沒有辦法判斷它是可以直接拉開,還是需要轉動哪個部分呢?

「嗯……覺得困惑,好怕把它弄壞啊!」一但使用者出現這樣的想法,可能這就不是一個足夠「好用」的設計了。

諸如此類違反直覺的操作方式令人啼笑皆非,當然這是因為我們是旁觀者,要是在現實生活當中遇到可是會令人覺得煩躁和生氣的,甚至水龍頭的不良開關設計還可能造成使用者燙傷的危險

所以說,好的 UI 真的很重要啊!!!(大喊

什麼是 UX?

好的,接下來來介紹大眾較難理解的部分–「UX」!

UX 的定義是什麼?

UX 原文是「User Experience 」中文是「使用者體驗」,意思是你在使用某項產品或服務的時候的任何「感受」、「感覺」

這裡要特別注意哦,UX 是一種「抽象」的概念!

我們常常聽到有人說:「我是在做 UX 的。」其實這個說法有點奇怪,因為事實上 UX 並不能被「做」出來,畢竟每個人使用同一項產品會有不同的感覺,你總不能拿一塊香菜口味的餅乾給討厭香菜的人吃,然後逼他說好吃吧!!(直接哭給你看啦)

那該怎麼解釋 UX 呢?來看看幾個生活例子吧!

舉個日常的簡單例子,今天你到一間餐廳用餐,從你第一眼看到這間餐廳,「UX」這件事就開始啟動了!

從一開始他的招牌、店名、LOGO,到你走進餐廳時聞到的氣味(可能是飯菜香或店家的香氛味道),再到服務生送上菜單、為你做介紹、你看菜單、點餐、等餐、品嚐,到最後的結帳、店家的「謝謝光臨」,這一切的一切,都是「UX」的一部分!(推薦閱讀:UX從新手開始:使用者體驗的100堂必修課)

享受美食的女子
Photo by Pablo Merchán Montes on Unsplash

以這個例子來說,「UX」說的是你整個用餐過程的「體驗感」

假如你到這間餐廳,外面寫著義式餐廳,進到裡面聞到的卻是麻油雞香味、菜單拿來寫的是泰國料理,你會不會覺得奇怪、甚至有被騙的感覺呢?更不用說服務生沒禮貌,連問個餐點問題都會被白眼,那可是會讓人覺得火冒三丈的!(用餐體驗極差,我只是想好好吃個飯啊……)

用餐不愉快的女子
Photo by Alex Iby on Unsplash

相反地,如果從一開始到最後,服務生都對你親切有禮,讓你感到舒適愉悅、有尊榮待遇的感覺,餐點也符合期待,料多味美,結帳時櫃檯也很親切,不會有一絲不耐,你離開時他們還跟你微笑說「謝謝光臨,下次再來哦!」,你是不是會「覺得」這是個愉快的用餐「體驗」,把它收進口袋名單下次再來光顧呢?(順手 Google 給他個五星好評!

所以,這就是為什麼某些注重品質的餐廳會在最後請你填一份用餐問卷,表達感想,好讓他們可以更進步、讓客人有個舒適的用餐環境和體驗,提升餐廳的水準,因為客人用餐的開不開心是他們服務的核心重點,再者,品牌形象對他們來說很重要啊~

優秀的餐廳服務生與滿意的顧客
Photo by Pressmaster from Pexels

同場加映!有趣的網路圖片

附上一張最近網路上很紅的廁所門 Icon 設計,圖中門上各有一隻大象和長頸鹿,分別代表男女廁但……你看得出來哪個是哪個嗎?

Facebook 上的動物圖示廁所門
圖源:Facebook

這樣的設計真的會讓尿急的人很崩潰啊!!開錯門就尷尬了一不小心就被抓去警局……人家只是想上個廁所啊(大哭

所以到底哪個是哪個?來人啊,上解答!

有網友表示:

大象是用鼻子噴水,就像男性小便的畫面,代表男廁

長頸鹿上廁所時都會會岔開腿,所以是女廁

嗯……但是這些動物的特徵並不分性別啊,這邏輯確定合理??

黑人問號圖

所以簡單地說是這麼一回事

好啦,看完了這些案例,來統整一下究竟 UI/UX 是怎麼回事吧!

以下我用廁所門的例子來說明 UI和UX 的相對關係與對應結果:

廁所門(包含手把、動物圖標)= UI(「具象」且可操作的「介面」)

你看到廁所門、進去上廁所的感覺和想法= UX(「抽象」的「感受」)

你看到廁所門(UI)第一眼覺得很可愛,接下來卻感到困惑,甚至內急不知道該開哪個門,進而感到煩躁恨憤怒,覺得這真是間爛廁所(UX)!!

如此便構成了常見的「漂亮 UI 卻有著糟糕 UX 」的問題了!各位在做設計的時候不可不上心呀~

看完了這些案例,你有沒有被點通的感覺呢?

下次遇到有人問你「什麼是 UI/UX?」的時候,不妨用這些例子說明或直接分享這篇文章給他吧!簡單又好懂!

結語

謝謝你的閱讀,如果你也對於 UI/UX 相關的資訊感興趣,歡迎訂閱我的部落格

我會把最有趣、實用的知識分享給你:

如果你喜歡這篇文章歡迎幫我拍個5下小手給我一點鼓勵,也歡迎在底下留言和我說說你的想法、並分享給你身邊的朋友!(尤其是設計師們哈哈哈)

我是Jasmine,我們下次見!

本篇提到的好書推薦清單

你渴望力量嗎柴犬圖

知識就是力量,如果你對於本篇提到的書籍有興趣點擊以下連結豐富你的知識庫吧

「你的大腦是報酬率最高的一項投資標的,因為智慧是永遠不會背叛你的資產!」