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

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

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

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

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

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

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

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

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

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

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

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

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

所有重要的信息都被表示出來(lái)了嗎?

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

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

是否有必要的行動(dòng)項(xiàng)目或資源隱藏在過(guò)多的點(diǎn)擊或滾動(dòng)中?

導(dǎo)航項(xiàng)是否可訪問(wèn)且位于可預(yù)測(cè)的位置?

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

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

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

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

4. 測(cè)試,測(cè)試……

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

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

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

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

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

你有沒(méi)有被設(shè)計(jì)元素分心?

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

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

配方的關(guān)系

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

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

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