Week 12 — Learn UI Design | 設計UI小知識: 給使用者明確的期待值,比視覺的小事更重要

Max 麥克斯
DailyUI
Published in
3 min readNov 11, 2018

最近剛好在讀一本關於法式生活美學的書,在裡頭讀到一段文字標題的內容馬上讓我頻頻點頭,心裡不斷附和著:

「穿得對比穿得好看更重要」

穿得好看讓你得來的評價是:你今天的衣服好美!
穿得對讓你得來的評價是:你今天好美!

(from PEXELS : photo by Catherine Lagadia)

好看的衣服本身是好看沒錯,但不一定適合你;而對的衣服才是真的能突顯你的個性和身材。這段描述有點如同我在設計UI時,常會遇到的糾結困境,每每看到好看的設計、酷炫的互動、或厲害的功能介面,總是會讓我忍不住強加在我的作品裡,但冷靜下來思考後,心裡想:真的有需要這個東西嘛!?(尤其是在購買慾望需求的物品時,一定要問自己這句話XDDD)

以下做出示範圖解釋:

當今天你在填寫郵遞區號時,有下面左右兩種呈現方式,差別只有文字輸入欄位長度不同而已,一樣憑著直覺選一個你喜歡的吧!

準備好了嗎?來揭曉結果囉:D

其實我記得當初看到這兩個呈現方式時,我是選右邊,因為第一眼看到時,覺得文字輸入欄位的長度和外框灰底對稱,整體看起來比較舒服;左邊會讓我的視覺認為,文字輸入欄位好短,旁邊有一大塊的空白。然而,選擇的標準都只建立在「看」,若是從「使用」的標準去選擇,就會馬上發現右邊的問題了,當在輸入完右邊,會讓我質疑:咦!這個欄位這麼長,我只輸入5位數字好像太短,後面是還要輸入什麼嗎?還是我輸入錯了?

所以說:

穿得對比穿得好看更重要

設計好用的產品比外觀好看更重要

(當然也不是說產品外觀就不重要,但比起注重在外表包裝上,內在的功能性和使用性更為重要)

本週UI練習

使用工具:Adobe Xd, AE

#034 | Daily UI_Invoice

線上訂房後,出現綠色成功訊息告知使用者預訂完成,往下滑則是訂購細節的發票

以下是自己在訂購完成後會注意的:
1.旅館名字
2.旅館住址
3.旅館連絡電話
4.預約房間類型
5.入住和退住日期(時間)
6.訂購編號
7.訂購人名字
8.付款細節(是否含稅)

曾經在最下面一行看到"感謝訂購和祝福"的文字,讓我覺得很貼心
所以也補上這行文字

#035 | Daily UI_Coming Soon

I'm on my own road!

#036 | Daily UI_Notifications

AE+線上後製
第一次用AE,好難QAQ

--

--

Max 麥克斯
DailyUI

UI設計師 | 相信閱讀 | 喜歡有溫度的文字 | 致力於介面設計 | 記錄自學設計的一隅 https://maxinstudio.com/