UI設(shè)計(jì)師的10個(gè)常見錯(cuò)誤，你是否中招了？

編者按：做設(shè)計(jì)難免會(huì)出錯(cuò)。有的錯(cuò)誤真的只是之前不知道，后知后覺遂有了恍然大悟。而還有很多錯(cuò)誤屬于大家都知道，但是因?yàn)楦鞣N原因忽視而不小心犯了。但是不論是哪種，我們終究是要改正并提升才行的。下面是設(shè)計(jì)師 Danny Sapio 總結(jié)的 UI 設(shè)計(jì)師的10個(gè)常見錯(cuò)誤，咱們一起來捋一下吧，看看你我中招了多少~

1、忽略產(chǎn)品功能范疇

有時(shí)候設(shè)計(jì)師會(huì)在產(chǎn)品中引入一些功能，這些功能會(huì)讓整個(gè)開發(fā)過程變得更加復(fù)雜，同時(shí)又不會(huì)給產(chǎn)品本身提高任何附加價(jià)值。在確定設(shè)計(jì)功能的優(yōu)先級(jí)的同時(shí)，需要兼顧到業(yè)務(wù)目標(biāo)，項(xiàng)目的范疇，產(chǎn)品的時(shí)間表，以及開發(fā)的方式，這些都很重要。

比如我們正在設(shè)計(jì)一個(gè)用戶上傳個(gè)人頭像的功能選項(xiàng)，但是如果在「上傳」功能以外，再添加裁剪、縮放、旋轉(zhuǎn)等功能，這本身是原有功能的復(fù)雜化。

也許在設(shè)計(jì)當(dāng)中添加「旋轉(zhuǎn)」、「裁剪」的按鈕是非常方便的，但是在具體的開發(fā)實(shí)施當(dāng)中就不好說了。是調(diào)用現(xiàn)有的功能、還是加入開源的組件抑或是從零開始寫代碼？這都會(huì)是問題，并且充滿了未知。從產(chǎn)品和團(tuán)隊(duì)的角度上，安全的選擇是盡量避免添加功能，除非確定它們的優(yōu)先級(jí)極高、對(duì)于整個(gè)應(yīng)用程序是必不可少的。始終將業(yè)務(wù)目標(biāo)和用戶目標(biāo)放在設(shè)計(jì)過程的最前沿。

2、并未給交接工作做好準(zhǔn)備

在現(xiàn)代的產(chǎn)品設(shè)計(jì)工業(yè)當(dāng)中，你的設(shè)計(jì)或者素材可能會(huì)被上下游所調(diào)用。我們?cè)谠O(shè)計(jì)的時(shí)候應(yīng)該考慮到還有誰會(huì)用我們的工作內(nèi)容。無論是要移交給開發(fā)者還是其他的設(shè)計(jì)師，都必須盡量合理地組織相關(guān)的內(nèi)容和素材。

以UI設(shè)計(jì)的設(shè)計(jì)文件為例，其中的每一個(gè)畫板都應(yīng)該有正確的命名，并且橫向排布，便于按照邏輯順序點(diǎn)擊打開。

我們應(yīng)該有一個(gè)組織良好的設(shè)計(jì)文件，其中包含 SVG 格式的圖標(biāo)，以及其他的理應(yīng)具備高素質(zhì)版本的圖像類素材。

在我的日常工作中，Zeplin 是我首選的協(xié)作工具，借助 Zeplin，開發(fā)者可以輕松地獲取代碼片段、尺寸參數(shù)、間距數(shù)據(jù)、字體大小、SVG 素材等等。

這樣的無縫切換可以讓整個(gè)流程更加順滑，團(tuán)隊(duì)協(xié)作效率得到極大提升。

3、忽略用戶的使用場(chǎng)景

在設(shè)計(jì)界面交互的時(shí)候，需要考慮用戶所處的環(huán)境是非常重要的，因?yàn)橛绊懡换Q策的環(huán)境因素是非常多的。考慮用戶在使用我們的 APP 的時(shí)候，所處的位置，他們有多少時(shí)間來操作，他們的情緒狀態(tài)如何，這是設(shè)計(jì)交互的基礎(chǔ)。

一款睡眠周期類的 APP，就是一個(gè)非常典型的案例。這款A(yù)PP 使用了令人放松的深色界面，特別適合在睡前來設(shè)置鬧鐘的用戶。

你可以在各種不同的地方看到或好或不好的案例。比如導(dǎo)航應(yīng)用應(yīng)該盡可能讓用戶少點(diǎn)擊，Kindle 會(huì)盡量確保在日光下閱讀也不會(huì)刺眼，而筆記應(yīng)用則可以離線使用，等等。

4、追求高保真效果

在驗(yàn)證想法、探索解決方案的階段，最好不要奔著高分辨率的視覺效果去了，這是最容易犯的錯(cuò)誤了。

其實(shí)，與其說這是一個(gè)錯(cuò)誤，不如說這通常會(huì)是一個(gè)浪費(fèi)時(shí)間的選擇。

當(dāng)我們想將不同的想法融合到一起，探索布局和層次的構(gòu)建的時(shí)候，最好使用類似 Whimsical 之類的工具來繪制線框圖，這樣更快更輕便。當(dāng)它只是線框圖的時(shí)候，看起來確實(shí)非常粗糙，可能很難讓人愛上它，但是我們因此可以更加輕松地接收反饋、摸索功能。

5、忽視有行為障礙的用戶

在設(shè)計(jì)一款數(shù)字產(chǎn)品的時(shí)候，其實(shí)就像去創(chuàng)建一個(gè)圖書館或者學(xué)校這樣的公共建筑，它必須是面向所有人的，包括有肢體障礙、色盲和視覺障礙的用戶。

Domino 曾經(jīng)被一個(gè)盲人用戶起訴，因?yàn)樗麩o法訪問 Domino 的網(wǎng)站。其實(shí)，在今天的產(chǎn)品設(shè)計(jì)當(dāng)中，兼顧到盲人和色盲用戶是完全可行的。

通常，我們會(huì)盡可能讓產(chǎn)品對(duì)于普通人而言看起來是非常不錯(cuò)的，從而忽略了相對(duì)小眾的、與普通用戶交互模式不同的行為障礙用戶。

將文字縮小到 8px 或者使用非常淺的灰色，能夠讓設(shè)計(jì)在視覺上充滿層次感和視覺表現(xiàn)力，但是這讓視覺障礙用戶具備基本的可訪問性。

在 Dribbble 上，我們會(huì)看到很多這樣的存在可訪問性障礙的設(shè)計(jì)，它們?nèi)绻苯诱瞻岬秸鎸?shí)的產(chǎn)品中是一定會(huì)有問題的。

比如 Web 內(nèi)容可訪問性指南中（WCAG）中對(duì)于對(duì)比度的要求 4.5:1 ，很多設(shè)計(jì)都無法達(dá)到。此外，對(duì)于運(yùn)動(dòng)、聽覺、認(rèn)知障礙都有詳細(xì)的指標(biāo)要求。

當(dāng)然你還可以借用 Stark 來檢查你的設(shè)計(jì)是否符合這些可訪問性的規(guī)范。

6、抄襲別人作品或者盲目追隨趨勢(shì)

對(duì)于設(shè)計(jì)師而言，趨勢(shì)有點(diǎn)像垃圾食品。不加分辨地追隨趨勢(shì)能夠給你帶來一些「看起來顯而易見但是非常廉價(jià)」的解決方案，這些解決方案在短期內(nèi)會(huì)帶來回饋，但是從長(zhǎng)遠(yuǎn)來看，卻毫無價(jià)值。追隨趨勢(shì)的設(shè)計(jì)師很快就會(huì)從中嘗到苦果了。緊跟別人的設(shè)計(jì)最終會(huì)得到什么樣的回饋？唯一的回饋就是空虛感。——設(shè)計(jì)師 Micah Bowers

你可能會(huì)很容易深陷到 Dribbble 的世界，在漂亮的動(dòng)畫和絢爛的漸變中翱翔，然后迅速忘記了原本的設(shè)計(jì)目標(biāo)。

我們的確會(huì)著迷于在 Dribbble 這樣的平臺(tái)上發(fā)掘特殊的交互和設(shè)計(jì)風(fēng)格，并且試圖將他們應(yīng)用到設(shè)計(jì)當(dāng)中。不過，因?yàn)樾路f而受到啟發(fā)和盲目復(fù)制，絕對(duì)是不一樣的。合理借鑒，靈活運(yùn)用，不要抄襲。

7、無視約定俗成的設(shè)計(jì)語言

任何時(shí)候，打破常規(guī)的設(shè)計(jì)，用戶都需要花費(fèi)更多的時(shí)間來處理這樣的信息。設(shè)計(jì)師需要考慮到人類認(rèn)知的局限性，以及有限的記憶能力?！狫oanna Ngai

經(jīng)過這么多年、這么多數(shù)字產(chǎn)品的培養(yǎng)，用戶對(duì)于 APP、網(wǎng)站、軟件其實(shí)都有相對(duì)清晰的期望，如果在功能和體驗(yàn)上不符合預(yù)期，不夠「直觀」，他們可能會(huì)為之沮喪。

最典型的案例是圖標(biāo)的設(shè)計(jì)。對(duì)于「搜索」、「首頁」、「收藏」等功能對(duì)應(yīng)的圖標(biāo)，大家有非常清晰的預(yù)期，如果你的設(shè)計(jì)偏離認(rèn)知太遠(yuǎn)，最頭疼的肯定是用戶——他們不知道你這個(gè)圖標(biāo)代表的是什么。

8、專注于視覺而非實(shí)際的運(yùn)作機(jī)制

每個(gè) UI 設(shè)計(jì)師最為討厭的事情之一，就是打破他們所創(chuàng)造的設(shè)計(jì)。

而打破設(shè)計(jì)，最常見的情況，就是為了日常的使用、運(yùn)用而需要輸入信息，修整布局。但是想要讓產(chǎn)品和設(shè)計(jì)足夠靈活，可以擴(kuò)展，對(duì)用戶友好，只存在于理想狀態(tài)下的「完美設(shè)計(jì)」就必須被打破。

當(dāng)我在設(shè)計(jì)一個(gè) APP 界面的時(shí)候，如果用戶輸入的名稱只有十幾個(gè)字母，它會(huì)看起來簡(jiǎn)約又大氣，但是當(dāng)一個(gè)名為 Hubert Blaine Wolfe-schlegel-stein-hausen-berger-dorff Sr. 的用戶輸入他的完整名稱的時(shí)候……又會(huì)發(fā)生什么呢？

在測(cè)試整個(gè)設(shè)計(jì)的時(shí)候，往后退一步，確保整個(gè)界面能夠兼顧到實(shí)際的情況，這才是合理的。

9、缺少完整有效的狀態(tài)呈現(xiàn)

在實(shí)際的設(shè)計(jì)開發(fā)的時(shí)候，UI 控件的不同狀態(tài)代表著不同的含義和指向，缺少了任何一個(gè)，在體驗(yàn)?zāi)酥劣诠δ苌蠒?huì)差很多，這個(gè)時(shí)候可能會(huì)有開發(fā)者來補(bǔ)充，但是通常這樣的補(bǔ)充，會(huì)讓設(shè)計(jì)缺乏統(tǒng)一性，給后面帶來更多的問題。

以按鈕為例，我們必須兼顧到不同狀態(tài)，比如錯(cuò)誤、激活、禁用、懸停、空狀態(tài)、填充狀態(tài)、加載狀態(tài)等等。

當(dāng)我在設(shè)計(jì)一個(gè)愿望清單應(yīng)用的時(shí)候，我需要優(yōu)先考慮用戶尚未填寫任何內(nèi)容時(shí)候的空狀態(tài)，如果沒有這個(gè)，整個(gè)體驗(yàn)會(huì)差很遠(yuǎn)。

10、重新設(shè)計(jì)原生的 UI 組件

通過原本的平臺(tái)已有的組件，UI設(shè)計(jì)師可以快速創(chuàng)造出對(duì)用戶而言熟悉的體驗(yàn)，并且避免輸入出錯(cuò)。

無論我們是多么優(yōu)秀的設(shè)計(jì)師，都很難完全從零開始設(shè)計(jì)一個(gè) iOS 平臺(tái)的日期選擇器。哪怕你設(shè)計(jì)出了一個(gè)客觀上更加優(yōu)秀的日期選擇器，一方面用戶需要重新學(xué)習(xí)新的組件的使用，另一方面則是你是否要為這個(gè)全新的設(shè)計(jì)匹配更多的東西，以及開發(fā)者這邊的工作到底會(huì)膨脹多少，都是未知的。

而善用原有的原生 UI 組件能夠省去太多的麻煩，幫整個(gè)團(tuán)隊(duì)節(jié)省時(shí)間和精力，并且減少用戶在體驗(yàn)上的耗費(fèi)。
責(zé)編AJX