設(shè)計(jì)師和開(kāi)發(fā)人員在構(gòu)建網(wǎng)站時(shí)，需要考慮很多事情，從視覺(jué)外觀到功能設(shè)計(jì)。為了簡(jiǎn)化這個(gè)過(guò)程，我們準(zhǔn)備了這個(gè)指南。限于篇幅限制，將這一指南分為三部分，此為第二部分內(nèi)容。

本文主要內(nèi)容為：

二、設(shè)計(jì)頁(yè)面

• 2.1 內(nèi)容策略
• 2.2 頁(yè)面結(jié)構(gòu)
• 2.3 視覺(jué)層次
• 2.4 滾動(dòng)操作
• 2.5 內(nèi)容加載
• 2.6 按鈕
• 2.7 圖像化
• 2.8 視頻
• 2.9 行為響應(yīng)按鈕
• 2.10 網(wǎng)頁(yè)表單
• 2.11 交互動(dòng)畫(huà)

二、設(shè)計(jì)頁(yè)面

2.1 內(nèi)容策略

內(nèi)容策略最重要的一點(diǎn)就是聚焦在頁(yè)面目標(biāo)上。理解頁(yè)面的目標(biāo)，并根據(jù)目標(biāo)安排內(nèi)容。

下面是一些提高用戶(hù)對(duì)內(nèi)容理解的實(shí)用技巧：

• 防止信息超載。信息超載是一個(gè)嚴(yán)重的問(wèn)題。用戶(hù)覺(jué)得有太多信息需消化，從而無(wú)法下決定或采取行動(dòng)。有一些簡(jiǎn)單的方法能最小化信息超載。一個(gè)常用的方法就是分塊——將內(nèi)容分成幾個(gè)模塊，幫助用戶(hù)更好的理解和處理。結(jié)賬單就是最好的例子。每次最多顯示五到七個(gè)輸入字段，將結(jié)帳單拆分到多個(gè)頁(yè)面，必要時(shí)才逐步公開(kāi)字段。

(Image credit: Witteia)

• 避免行話(huà)和行業(yè)術(shù)語(yǔ)。頁(yè)面上出現(xiàn)的每個(gè)未知術(shù)語(yǔ)或短語(yǔ)都會(huì)增加用戶(hù)的認(rèn)知負(fù)荷。一個(gè)安全的方式就是為所有讀者編輯內(nèi)容，并選擇所有用戶(hù)都清楚易懂的詞。
• 最大限度地減少長(zhǎng)內(nèi)容。根據(jù)信息過(guò)載的觀點(diǎn)，如果網(wǎng)站不是以信息消費(fèi)為主，盡量避免長(zhǎng)文本塊。 例如，如果您需要提供有關(guān)服務(wù)或產(chǎn)品的詳細(xì)信息，請(qǐng)嘗試逐步展開(kāi)詳細(xì)信息。 將文本塊寫(xiě)的短一些，更方便理解。根據(jù)羅伯特·蓋寧（Robert Gunning）的“How to Take the Fog Out of Business Writing”這本書(shū)，為了舒適的閱讀，大多數(shù)的句子應(yīng)該是20個(gè)字以?xún)?nèi)。

(Image credit: The Daily Rind)

• 避免所有字母采用大寫(xiě)。全部大寫(xiě)的文本（也就是所有字母都是大寫(xiě)的文本）對(duì)于字符量較少的文本是可以的，比如縮略詞和圖標(biāo)；但是，請(qǐng)避免在字符量比較大的地方使用（例如段落，表格標(biāo)簽，錯(cuò)誤，通知）。正如Miles Tinker在“Legibility of Print”一書(shū)中提到的，全部大寫(xiě)會(huì)降低閱讀速度。另外，大多數(shù)讀者會(huì)覺(jué)得全部大寫(xiě)的文本不能快速清晰的理解。

  全部采用大寫(xiě)，用戶(hù)比較難以理解。

2.2 頁(yè)面結(jié)構(gòu)

一個(gè)結(jié)構(gòu)合理的頁(yè)面清楚地顯示了每個(gè)用戶(hù)界面元素位于布局中的位置。雖然沒(méi)有一個(gè)適合所有頁(yè)面的規(guī)則，但是有一些指導(dǎo)性原則可以幫助你創(chuàng)建一個(gè)堅(jiān)固的結(jié)構(gòu)：

• 使結(jié)構(gòu)可預(yù)測(cè)。使您的設(shè)計(jì)符合用戶(hù)期望?？梢詤⒖纪?lèi)網(wǎng)站來(lái)找出在頁(yè)面上需要哪些元素以及位置。使用目標(biāo)用戶(hù)熟悉的模式。
• 使用布局網(wǎng)格。布局網(wǎng)格將頁(yè)面劃分為幾塊主要區(qū)域，并根據(jù)大小和位置定義區(qū)域之間的關(guān)系。在網(wǎng)格的幫助下，能更輕松地將不同部分組合在一起，形成一個(gè)有凝聚力的頁(yè)面。

網(wǎng)格和布局是設(shè)計(jì)的一部分，且能適應(yīng)不同屏幕尺寸的設(shè)計(jì)場(chǎng)景。Adobe XD的布局網(wǎng)格使設(shè)計(jì)人員能夠針對(duì)不同的屏幕尺寸實(shí)現(xiàn)一致設(shè)計(jì)及管理網(wǎng)格中元素之間的比例。

• 使用低保真線(xiàn)框模擬，避免界面雜亂不清晰?；靵y會(huì)增加理解的難度——每添加一個(gè)按鈕，圖像或文本都會(huì)使頁(yè)面更加復(fù)雜。在用真實(shí)元素構(gòu)建頁(yè)面之前，先創(chuàng)建一個(gè)線(xiàn)框圖，分析它，然后去掉那些不是絕對(duì)必要的東西。

Adobe XD中創(chuàng)建的低保真線(xiàn)框圖(Image credit: Tim Hykes)

2.3 視覺(jué)層次

人們大多數(shù)情況是快速瀏覽網(wǎng)頁(yè)，而不是閱讀所有內(nèi)容。 因此，如果訪客想要查找內(nèi)容或完成任務(wù)，他們將快速瀏覽網(wǎng)頁(yè)、找到需要的地方。作為一名設(shè)計(jì)師，你應(yīng)該通過(guò)設(shè)計(jì)良好的視覺(jué)層次來(lái)幫助他們。視覺(jué)層次是指以重要性（即應(yīng)該首先關(guān)注哪些、再關(guān)注哪些等等）呈現(xiàn)元素。一個(gè)適當(dāng)?shù)囊曈X(jué)層次結(jié)構(gòu)可以讓用戶(hù)更快速地瀏覽頁(yè)面。

• 使用自然的瀏覽模式。 作為設(shè)計(jì)師，我們可以控制人們?yōu)g覽頁(yè)面的時(shí)，關(guān)注的位置。為了給訪問(wèn)者的眼睛設(shè)定合適的瀏覽路徑，我們可以使用兩種模式：F形模式 和Z形圖案。對(duì)于重文本的頁(yè)面（如文章和搜索結(jié)果），F(xiàn)模式更好，而Z模式適用于不以文字為中心的頁(yè)面。

CNN采用的F形模式

Basecamp采用的Z形模式

• 優(yōu)先考慮重要元素。要讓頁(yè)面標(biāo)題，登錄表單，導(dǎo)航選項(xiàng)和其他重要內(nèi)容成為視覺(jué)焦點(diǎn)，以便游客立即看到它們。

“Learn More About Brains” 按鈕就是視覺(jué)焦點(diǎn)。

• 創(chuàng)建模型來(lái)闡明視覺(jué)層次結(jié)構(gòu)。當(dāng)擁有真實(shí)數(shù)據(jù)后，設(shè)計(jì)原型能夠看到真實(shí)頁(yè)面。在原型中重新排列元素要比技術(shù)人員開(kāi)發(fā)網(wǎng)頁(yè)時(shí)更方便，如此來(lái)避免開(kāi)發(fā)過(guò)程中再修改。

使用Adobe XD創(chuàng)建的原型。(Image credit: Coursetro)

2.4 滾動(dòng)操作

網(wǎng)頁(yè)設(shè)計(jì)師中流傳著一個(gè)謊言——用戶(hù)不會(huì)使用滾動(dòng)。重申：今天，每一個(gè)人都在使用滾動(dòng)!

用戶(hù)進(jìn)行滾動(dòng)操作時(shí)，提升用戶(hù)體驗(yàn)的一些提示：

• 鼓勵(lì)用戶(hù)滾動(dòng)。 盡管頁(yè)面加載后人們通常會(huì)開(kāi)始滾動(dòng)。但頁(yè)面頂部的內(nèi)容仍然非常重要。頂部的內(nèi)容給觀眾帶來(lái)了第一印象和期待。只有在內(nèi)容有吸引力的時(shí)候，用戶(hù)才會(huì)進(jìn)行滾動(dòng)。因此，把你最引人注目的內(nèi)容放在頁(yè)面頂部：
• 提供一個(gè)優(yōu)秀的介紹。 一個(gè)優(yōu)秀的介紹為內(nèi)容鋪設(shè)了背景，并回答了用戶(hù)的問(wèn)題：“這個(gè)網(wǎng)頁(yè)是關(guān)于什么的？
• 使用有吸引力的圖像。 用戶(hù)會(huì)密切關(guān)注包含相關(guān)信息的圖像。
• 堅(jiān)持導(dǎo)航。當(dāng)您創(chuàng)建冗長(zhǎng)的頁(yè)面時(shí)，請(qǐng)記住用戶(hù)仍然需要方向感（當(dāng)前位置）和導(dǎo)航（其他可能的路徑）。長(zhǎng)頁(yè)面可能會(huì)出現(xiàn)導(dǎo)航問(wèn)題；如果頂部導(dǎo)航欄在用戶(hù)向下滾動(dòng)時(shí)不可見(jiàn)，則當(dāng)他們?cè)陧?yè)面底部時(shí)，他們將不得不一直向上滾動(dòng)。最簡(jiǎn)單的解決方案是懸浮菜單——顯示當(dāng)前位置，并一直懸浮在頁(yè)面中。

滾動(dòng)后的導(dǎo)航 (Image: Zenman)

• 加載新內(nèi)容時(shí)提供視覺(jué)反饋。 這對(duì)于動(dòng)態(tài)加載內(nèi)容的網(wǎng)頁(yè)尤為重要（如新聞）。由于滾動(dòng)過(guò)程中的內(nèi)容加載是快速的（基本都在2到10秒），你可以使用循環(huán)動(dòng)畫(huà)來(lái)表示系統(tǒng)正在工作。

加載動(dòng)畫(huà)（如Tumblr的加載指示器）告訴用戶(hù)正在加載更多的內(nèi)容。

• 不要劫持滾動(dòng)（即不要將滾動(dòng)操作限定死）。劫持滾動(dòng)是最?lèi)廊说氖虑橹唬驗(yàn)樗鼘⒖刂茩?quán)從用戶(hù)手中帶走，并使?jié)L動(dòng)行為完全不可預(yù)知。 當(dāng)你設(shè)計(jì)一個(gè)網(wǎng)站，應(yīng)該讓用戶(hù)控制他們的瀏覽行為。

Tumbler登錄頁(yè)面劫持了滾動(dòng)操作。滾動(dòng)的頁(yè)面時(shí)固定的，而不是自由的。

2.5 內(nèi)容加載

內(nèi)容加載值得進(jìn)一步強(qiáng)調(diào)。即時(shí)響應(yīng)是最好的，但有時(shí)候你的網(wǎng)站需要更多的時(shí)間向訪問(wèn)者傳遞內(nèi)容。一個(gè)糟糕的網(wǎng)絡(luò)連接可能導(dǎo)致一個(gè)緩慢的反應(yīng)，或者一個(gè)操作可能需要更長(zhǎng)的時(shí)間才能完成。但是不管原因是什么，你的網(wǎng)站都應(yīng)該快速加載。

• 確保常規(guī)加載不需要很長(zhǎng)時(shí)間。網(wǎng)民的注意力和耐心是非常低的。根據(jù)Nielsen Norman Group research，用戶(hù)保持注意力的極限是10秒。當(dāng)訪問(wèn)者不得不等待一個(gè)網(wǎng)站加載，如果網(wǎng)站加載速度不夠快，他們會(huì)感到沮喪并可能離開(kāi)。如果加載時(shí)間過(guò)長(zhǎng)，即使設(shè)計(jì)了最漂亮的加載指示，用戶(hù)仍然會(huì)離開(kāi)。
• 加載過(guò)程中使用Skeleton Screens。許多網(wǎng)站使用進(jìn)度指示器顯示數(shù)據(jù)正在加載。雖然進(jìn)度指標(biāo)背后的意圖是好的（提供視覺(jué)反饋），但結(jié)果可能是負(fù)面的。正如Luke Wroblewski所述，“按照定義，進(jìn)度指標(biāo)是對(duì)有人需要等待的響應(yīng)。這就像看著時(shí)鐘滴答下來(lái) – 當(dāng)你這樣做，時(shí)間似乎變慢?！庇幸粋€(gè)很好的替代進(jìn)展指標(biāo)：Skeleton Screens。這些容器本質(zhì)上是一個(gè)暫時(shí)空白的頁(yè)面版本，信息逐漸加載到容器中。設(shè)計(jì)師可以使用Skeleton Screens將用戶(hù)的注意力集中在實(shí)際進(jìn)展上，并為即將到來(lái)的事物預(yù)測(cè)。這意味著事情正在立即發(fā)生，因?yàn)樾畔⒃谄聊簧现饾u顯示，人們看到網(wǎng)站在等待的時(shí)候正在采取行動(dòng)。

當(dāng)內(nèi)容被加載時(shí)，F(xiàn)acebook使用Skeleton Screens來(lái)填充UI。

2.6 按鈕

按鈕對(duì)于創(chuàng)建流暢的交互流程至關(guān)重要。 這有一些地方值得關(guān)注：

• 確?？牲c(diǎn)擊的元素看起來(lái)像可點(diǎn)擊的。使用按鈕和其他交互元素，考慮如何傳遞可用性信息。用戶(hù)是如何將元素理解為一個(gè)按鈕？表單應(yīng)該遵循以下功能：元素的表現(xiàn)形式要傳遞使用方式。看起來(lái)像鏈接或按鈕但不可點(diǎn)擊的可視元素（如帶有下劃線(xiàn)的單詞不是鏈接或具有矩形背景但不是按鈕的元素）會(huì)讓用戶(hù)懵逼。

左上角的橙色框是按鈕嗎？ 不，但形狀和標(biāo)簽文本使其看起來(lái)像一個(gè)按鈕。

• 標(biāo)簽按鈕要符合用戶(hù)的期望。可操作的界面元素上的文本標(biāo)簽應(yīng)該與實(shí)際作用相關(guān)聯(lián)。如果用戶(hù)明白按鈕的作用，用戶(hù)使用起來(lái)會(huì)更舒適。像下面例子中的“提交”的文本標(biāo)簽（Awesome！），這樣的模糊標(biāo)簽不能讓用戶(hù)快速明白按鈕的作用。

不要讓用戶(hù)對(duì)按鈕的作用困惑。(Image credit: UX Matters)

• 遵循一致的按鈕規(guī)范。無(wú)論是否有意識(shí)，用戶(hù)都會(huì)記住網(wǎng)站細(xì)節(jié)。瀏覽網(wǎng)站時(shí)，他們會(huì)將特定形狀與按鈕功能聯(lián)系起來(lái)。因此，一致性不僅有利于設(shè)計(jì)的美觀，而且增強(qiáng)了用戶(hù)的熟悉感。下面的圖片完美地說(shuō)明了這一點(diǎn)。 在應(yīng)用程序的一部分（如系統(tǒng)工具欄）中使用三種不同的形狀不僅令人困惑，而且糟糕。

保持一致。

2.7 圖像化

一張圖片勝過(guò)千言萬(wàn)語(yǔ)。人類(lèi)是視覺(jué)生物，幾乎能立即處理完視覺(jué)信息；我們所感知并被傳達(dá)到大腦的90%信息是可視化的。圖像是捕捉用戶(hù)注意力并區(qū)分產(chǎn)品的有效方式。與一段精心設(shè)計(jì)的文本相比，圖像更能被瀏覽者接收。此外，圖像能跨語(yǔ)言障礙。

以下原則，可以幫助您將圖像應(yīng)用到網(wǎng)頁(yè)中：

• 確保圖像是相關(guān)的。設(shè)計(jì)中最大的危險(xiǎn)之一是圖像傳達(dá)了錯(cuò)誤信息。選擇最符合您的產(chǎn)品目標(biāo)的圖像，并確保它們與上下文相關(guān)。

與主題無(wú)關(guān)的圖像會(huì)使用戶(hù)困惑。

• 避免通用的人物照。在設(shè)計(jì)中使用人臉是吸引用戶(hù)的有效方式?？吹絼e人的臉能讓觀眾覺(jué)得與他們聯(lián)系在一起，而不僅僅是在銷(xiāo)售產(chǎn)品。然而，許多企業(yè)網(wǎng)站使用通用的照片來(lái)建立信任感是非常糟糕的。可用性測(cè)試表明，這樣的照片不會(huì)增加設(shè)計(jì)的價(jià)值，更是經(jīng)常損害用戶(hù)體驗(yàn)。

不真實(shí)的圖像給用戶(hù)帶來(lái)一種虛偽的感覺(jué)。

• 使用高質(zhì)量、不失焦的資源。網(wǎng)站使用資源的質(zhì)量會(huì)對(duì)用戶(hù)印象和對(duì)服務(wù)的期望產(chǎn)生巨大的影響。此外，確保圖像大小適合在各平臺(tái)顯示。圖像不應(yīng)該出現(xiàn)像素化，因此要測(cè)試各種比例和分辨率大小。要以原始高寬比顯示圖像。

同尺寸不同質(zhì)量的照片 (Image credit: Adobe)

2.8 視頻

隨著網(wǎng)速的提高，視頻正變得越來(lái)越流行，特別是它們延長(zhǎng)了用戶(hù)在網(wǎng)站的時(shí)間。今天，視頻無(wú)處不在。 我們?cè)谂_(tái)式機(jī)，平板電腦和手機(jī)上觀看視頻。當(dāng)有效地使用視頻時(shí)，能非常有效的吸引用戶(hù) – 它傳遞更多的情感，真正給人一種產(chǎn)品或服務(wù)的感覺(jué)。

• 將音頻設(shè)置為默認(rèn)關(guān)閉。當(dāng)用戶(hù)到達(dá)一個(gè)頁(yè)面，不會(huì)希望它發(fā)出任何聲音。大多數(shù)用戶(hù)不會(huì)使用耳機(jī)，這種情況下，他們需要快速關(guān)閉聲音，會(huì)受到壓力。而大多數(shù)情況下，用戶(hù)會(huì)離開(kāi)網(wǎng)站。

Facebook的視頻會(huì)在用戶(hù)進(jìn)入時(shí)自動(dòng)播放，但默認(rèn)不會(huì)播放聲音。

• 促銷(xiāo)視頻盡可能短。根據(jù)D-Mak Productions的研究，短片對(duì)大多數(shù)用戶(hù)更有吸引力。因此，將商業(yè)視頻保持在兩到三分鐘的范圍內(nèi)。

（Image credit: Dmakproductions）

• 提供另一種內(nèi)容的展示方式。如果視頻是消費(fèi)內(nèi)容的唯一方式，那么看不懂或聽(tīng)不明白的人則無(wú)法獲取內(nèi)容。為了用戶(hù)更便捷獲取內(nèi)容，提供字幕和完整的視頻。

字幕和視頻將使內(nèi)容更容易獲取。(Image credit: TED)

2.9 Call-to-Action(CTA)按鈕

Call-to-Action（CTA）是指引導(dǎo)用戶(hù)實(shí)現(xiàn)預(yù)期目標(biāo)的按鈕。 CTA的重點(diǎn)在于引導(dǎo)用戶(hù)進(jìn)行我們所期望的行動(dòng)。 一些常見(jiàn)的CTA的例子是：

• “Start a trial”
• “Download the book”
• “Sign up for updates”
• “Get a consultation”

設(shè)計(jì)CTA按鈕時(shí)需要考慮以下幾點(diǎn)：

• CTA應(yīng)該足夠大，稍遠(yuǎn)距離也能看見(jiàn)；但不能太大。要確認(rèn)CTA是不是頁(yè)面上最顯著的元素，請(qǐng)嘗試五秒鐘的測(cè)試：瀏覽網(wǎng)頁(yè)五秒鐘，然后記錄您記得的內(nèi)容。 如果CTA在清單上，它的大小適當(dāng)！
• 在視覺(jué)上突出。CTA的顏色是引起用戶(hù)注意的重要因素。通過(guò)顏色，可以讓某些按鈕比其他按鈕更突出，更具視覺(jué)沖擊力。對(duì)比色非常適合用于CTA，使其更加醒目。

火狐網(wǎng)站上綠色的CTA非常醒目，能馬上得到用戶(hù)關(guān)注。

• 負(fù)空間。CTA周?chē)目臻g也很重要。白色（或消極色）空間為了按鈕創(chuàng)建了留白空間，將按鈕與界面中的其他元素分割開(kāi)。

以前的Dropbox主頁(yè)有一個(gè)很好的例子，使用負(fù)空間來(lái)創(chuàng)建主CTA。藍(lán)色的“免費(fèi)注冊(cè)”CTA與背景的淡藍(lán)色相映成輝。

• 面向行動(dòng)的文本。為按鈕編寫(xiě)文本，推動(dòng)用戶(hù)采取行動(dòng)。從使用“開(kāi)始”，“獲取”或“加入”等動(dòng)詞開(kāi)始。

?Evernote為CTA提供了最常見(jiàn)且有效的文本。

提示：您可以通過(guò)模糊效果快速測(cè)試CTA。模糊測(cè)試是確定用戶(hù)的眼睛是否會(huì)到達(dá)您想要的位置的便捷方法。將網(wǎng)頁(yè)截圖在Adobe XD中應(yīng)用模糊效果（請(qǐng)參閱下面的示例）?？纯错?yè)面的模糊版本，哪些元素會(huì)脫穎而出？如果您不是正在預(yù)測(cè)的內(nèi)容，那就修改。

模糊測(cè)試是一種檢驗(yàn)設(shè)計(jì)焦點(diǎn)和視覺(jué)層次的技術(shù)。

2.10 網(wǎng)頁(yè)表單

填寫(xiě)表單仍然是網(wǎng)頁(yè)最重要的互動(dòng)類(lèi)型之一。事實(shí)上，表單通常被認(rèn)為是完成目標(biāo)的最后一步。用戶(hù)在填寫(xiě)表單時(shí)，應(yīng)該避免出現(xiàn)困惑、盡快完成表單。表單就像一個(gè)對(duì)話(huà)，雙方之間（用戶(hù)和網(wǎng)站）應(yīng)該有邏輯的溝通。

• 只留需要的。只要求填寫(xiě)真正需要的東西。添加到表單的每個(gè)額外字段都將影響轉(zhuǎn)換率?？傊肭宄槭裁葱枰@些信息，以及將如何使用它。
• 按照邏輯順序排列表單。問(wèn)題應(yīng)該按照用戶(hù)邏輯而不是按應(yīng)用或數(shù)據(jù)庫(kù)的邏輯來(lái)提出。例如，在名字之前詢(xún)問(wèn)地址是不正確的。
• 將相關(guān)信息集合在一起。將相關(guān)信息按邏輯進(jìn)行分組。從一組問(wèn)題到下一組問(wèn)題的流程更像一個(gè)對(duì)話(huà)。且將相關(guān)字段分組在一起還有助于用戶(hù)理解信息。

將相關(guān)信息集合在一起。（Image: Nielsen Norman Group）

2.11 動(dòng)畫(huà)

越來(lái)越多的設(shè)計(jì)師將動(dòng)畫(huà)作為功能元素來(lái)加強(qiáng)用戶(hù)體驗(yàn)。動(dòng)畫(huà)不只是為了樂(lè)趣，它是提高交互效率的重要方式之一。但是，動(dòng)畫(huà)只有在合適的時(shí)間和位置才能提高用戶(hù)體驗(yàn)。好的交互動(dòng)畫(huà)有一個(gè)目標(biāo)：它是有意義、有作用的。

以下是動(dòng)畫(huà)增強(qiáng)用戶(hù)體驗(yàn)的一些場(chǎng)景：

• 對(duì)用戶(hù)行為的視覺(jué)反饋。良好的交互設(shè)計(jì)應(yīng)該提高視覺(jué)反饋。當(dāng)您需要告知用戶(hù)操作的結(jié)果時(shí)，視覺(jué)反饋是有幫助的。如果操作沒(méi)有成功執(zhí)行，通過(guò)動(dòng)畫(huà)，用戶(hù)可以快速地了解相關(guān)的信息。例如，輸入錯(cuò)誤的密碼時(shí)可以使用搖動(dòng)效果。這很容易理解，搖一搖在日常溝通中意味著“不”，因此搖動(dòng)效果也能傳遞相同信息。

用戶(hù)看到動(dòng)畫(huà)后，能立即了解問(wèn)題。 (Image credit: The Kinetic UI)

• 系統(tǒng)狀態(tài)的可見(jiàn)性。Jakob Nielsen的可用性的10個(gè)啟發(fā)式中，系統(tǒng)狀態(tài)的可見(jiàn)性是用戶(hù)界面設(shè)計(jì)中最重要的原則之一。用戶(hù)在任何時(shí)候都想知道當(dāng)前的上下文，而不應(yīng)該讓他們猜測(cè)——應(yīng)該通過(guò)適當(dāng)?shù)囊曈X(jué)反饋告訴用戶(hù)發(fā)生了什么事情。數(shù)據(jù)上傳和下載操作是功能性動(dòng)畫(huà)的常用場(chǎng)景。例如，一個(gè)動(dòng)畫(huà)加載欄顯示了任務(wù)的完成進(jìn)度，并展示了對(duì)任務(wù)速度的預(yù)估。

(Image credit: xjw)

• 導(dǎo)航式切換。導(dǎo)航式切換是指網(wǎng)站上各個(gè)模塊之間的切換——例如從概述視圖到詳細(xì)視圖。模塊切換往往涉及到大塊面積切換，用戶(hù)思維難以跟上。動(dòng)畫(huà)能使用戶(hù)在這些的時(shí)刻變得舒適，在切換上下文之間平滑地過(guò)渡，并通過(guò)創(chuàng)建模塊之間的可視化連接來(lái)解釋頁(yè)面的變化。

(Image credit: Ramotion)

• 品牌。假設(shè)你有幾十個(gè)相同功能的網(wǎng)站，幫助用戶(hù)完成相同的任務(wù)。它們都能提供良好的用戶(hù)體驗(yàn)，但人們真正喜歡的不僅僅是良好的用戶(hù)體驗(yàn)。網(wǎng)站應(yīng)該建立與用戶(hù)的情感聯(lián)系。品牌動(dòng)畫(huà)在吸引用戶(hù)方面起著關(guān)鍵作用。它會(huì)形成公司的品牌價(jià)值，突出產(chǎn)品的優(yōu)勢(shì)，使用戶(hù)真正感到愉快和難忘。

(Image credit Heco)

第二部分結(jié)束，請(qǐng)移步第三部分。

相關(guān)閱讀

《網(wǎng)頁(yè)設(shè)計(jì)綜合指南》（一）：網(wǎng)頁(yè)設(shè)計(jì)看這篇文章就夠了

《網(wǎng)頁(yè)設(shè)計(jì)綜合指南》（三）：網(wǎng)頁(yè)設(shè)計(jì)看這篇文章就夠了

原文l鏈接：https://www.smashingmagazine.com/2017/11/comprehensive-guide-web-design/

本文系人人都是產(chǎn)品經(jīng)理翻譯團(tuán)隊(duì)@吉諾是比利 翻譯發(fā)布，未經(jīng)本站允許，禁止轉(zhuǎn)載。

題圖來(lái)自u(píng)nsplash，基于CC0協(xié)議