當(dāng)我在過去的日子(大約2005年)開始設(shè)計網(wǎng)站時，我很快就了解到，要完成一個實用的設(shè)計，我需要遵循一些規(guī)則。我需要遵循一個網(wǎng)格和保持我的布局的一致性。在項目開始時，我需要定義字體、顏色和元素。我需要幾杯咖啡。但有一條規(guī)則直到多年后我才意識到它的重要性。在經(jīng)歷了許多成功和失敗的網(wǎng)頁設(shè)計之后，我可以自信地說，知道我在為誰設(shè)計是至關(guān)重要的。

在之前的一篇文章“用戶體驗(UX)設(shè)計的力量”中，我解釋了關(guān)于用戶體驗設(shè)計的基礎(chǔ)知識，以及為什么它是為用戶設(shè)計體驗的重要工具?？偠灾?，用戶體驗設(shè)計是一門識別目標(biāo)用戶，了解他們的需求，并提出最佳服務(wù)于他們的游戲計劃的藝術(shù)。在本文中，我想探討如何將UX原則應(yīng)用到用戶界面(UI)設(shè)計過程中。

1. 收集關(guān)于用戶及其目標(biāo)的見解

為用戶設(shè)計的第一步是了解他們。用戶體驗設(shè)計師通過尋找一些關(guān)鍵問題的答案來收集目標(biāo)用戶的信息。例如:

有多少不同類型的用戶將使用你的產(chǎn)品(客戶、經(jīng)銷商、經(jīng)理等)

你們的目標(biāo)用戶的年齡范圍是什么?

他們使用你產(chǎn)品的主要目的是什么?

他們使用你產(chǎn)品的頻率是多少?

他們最感興趣的資源、服務(wù)或解決方案是什么?

找到這些問題答案的最簡單方法是直接與目標(biāo)用戶溝通。這可以通過焦點小組、調(diào)查和訪談來實現(xiàn)。知道這些問題的答案將會在設(shè)計過程的后期階段減少大量的猜測。

2. 開發(fā)網(wǎng)站藍圖

一旦用戶信息被收集和組織起來，一個好的用戶體驗設(shè)計師將繼續(xù)為網(wǎng)站的總體布局開發(fā)一系列基本的線框圖。它們不需要很漂亮，但它們確實需要反映網(wǎng)站的信息順序和整體流程。把這些看作是網(wǎng)站基本結(jié)構(gòu)的藍圖。在設(shè)計界面時，一組好的線框圖將清楚地勾勒出內(nèi)容順序、導(dǎo)航和流程。

一旦第一輪線框完成，他們應(yīng)該通過一個審查過程來檢查用戶需求問題。這里有一些需要檢查的東西:

所有重要的信息都被表示出來了嗎?

主頁的結(jié)構(gòu)是否引導(dǎo)用戶達到他們想要的目標(biāo)?

信息的順序?qū)δ繕?biāo)用戶來說是最優(yōu)的嗎?

是否有必要的行動項目或資源隱藏在過多的點擊或滾動中?

導(dǎo)航項是否可訪問且位于可預(yù)測的位置?

在線框圖階段提出這些問題提供了在更詳細的用戶界面設(shè)計過程之前糾正問題的機會。

3.用戶界面設(shè)計

此時，用戶體驗設(shè)計師可以有效地將指揮棒交給用戶界面設(shè)計師。這就是理論變得可視化的地方。雖然優(yōu)秀UI設(shè)計的重點不只是優(yōu)化和風(fēng)格，但這兩者都是優(yōu)秀用戶界面的重要組成部分。畢竟，沒有人愿意開一輛丑車，即使它開起來像做夢一樣。由于UX過程消除了許多猜測，UI設(shè)計師現(xiàn)在可以專注于用表單充實功能。在這里，精心選擇的顏色、字體、圖像和組件可以應(yīng)用到線框中，以創(chuàng)建有效的視覺體驗。

正如在“用戶體驗(UX)設(shè)計的力量”中所解釋的，UI設(shè)計是用戶體驗設(shè)計的一個子集。這意味著即使是視覺元素和策略也需要反映用戶的期望。如果目標(biāo)用戶希望品牌統(tǒng)一，那么顏色和字體應(yīng)該反映出一個一致的品牌。如果目標(biāo)用戶更喜歡移動設(shè)備，那么它就應(yīng)該主要針對移動觀看進行設(shè)計。如果目標(biāo)用戶是老年人，那么在設(shè)計時應(yīng)該考慮到可讀性和可訪問性。同樣，在用戶體驗設(shè)計過程中收集所有的信息可以讓UI設(shè)計師更容易地開發(fā)密封的解決方案。

4. 測試,測試……

在一個網(wǎng)站或應(yīng)用程序的設(shè)計被批準(zhǔn)和開發(fā)之前，重要的是讓這些設(shè)計通過嚴(yán)格的篩選和測試。這個過程的這一部分被稱為“原型”。

有了像Sketch和Adobe XD這樣的設(shè)計工具，UI設(shè)計師就有機會開發(fā)工作原型，將靜態(tài)界面設(shè)計轉(zhuǎn)化為交互體驗。任何東西，從工作導(dǎo)航到組件動畫，都可以很容易地模擬，而不需要一行代碼。一個設(shè)計良好的原型提供了一種非常接近真實的體驗，允許用戶體驗網(wǎng)站的流程和交互性，就像它是最終產(chǎn)品一樣。

一旦原型完成，它應(yīng)該由同行和一組選擇的潛在用戶進行審查，如果可能的話。關(guān)鍵是衡量用戶的反應(yīng)，無論多么小，并確定是否需要任何糾正。向測試者提供一個簡短的問卷調(diào)查是很有幫助的，具體的問題包括:

瀏覽這個網(wǎng)站有多容易?

有什么難以閱讀或找到的東西嗎?

你有沒有被設(shè)計元素分心?

你是否被導(dǎo)航或動作項目誤導(dǎo)了?

有時，向用戶提供基本的任務(wù)也會很有幫助，例如下載特定的資源或購買道具。如果測試人員遇到任何問題或?qū)λ麄兊捏w驗有任何負面反應(yīng)，這就表明設(shè)計存在缺陷。收集反饋可以幫助您確定設(shè)計的有效性，以及UI設(shè)計師是否需要做出任何更改。一旦所有問題都得到糾正，您就可以非常自信地認(rèn)為設(shè)計已經(jīng)準(zhǔn)備好進行開發(fā)了。

配方的關(guān)系

作為一名視覺設(shè)計師，我仍然傾向于認(rèn)為UI設(shè)計是對漂亮外觀的直接追求。但是網(wǎng)站不僅僅是網(wǎng)頁內(nèi)容的裝飾框架。它是頁面、操作和資源的復(fù)雜編織，多種類型的用戶可以訪問這些頁面來執(zhí)行特定的任務(wù)。

當(dāng)用戶體驗原則應(yīng)用于設(shè)計過程時，布局和流程對用戶的影響就變得清晰了。設(shè)計的功能在網(wǎng)上和在商店或機場一樣重要。當(dāng)它的重要性被忽視時，它會令人痛苦地顯而易見。這就是為什么用戶體驗原則是如此有影響力的投資。

正如技術(shù)專家兼城市設(shè)計師達納·奇斯內(nèi)爾(Dana Chisnell)所說:“希望你的用戶愛上你的設(shè)計?愛上你的用戶。“可能需要額外的時間和步驟來確定你的用戶和確定他們需要什么，但每一段良好的關(guān)系都是從了解這個人開始的。當(dāng)用戶界面反映了您收集到的關(guān)于客戶的知識時，它將向他們表明您關(guān)心并致力于讓他們滿意。將UX原則應(yīng)用到UI設(shè)計過程中，可以確保最終產(chǎn)品為客戶節(jié)省時間，引導(dǎo)他們實現(xiàn)目標(biāo)，并為他們提供積極的用戶體驗。這使得這個過程成為建立長期客戶關(guān)系的秘方。