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

本文主要內容為：

二、設計頁面

• 2.1 內容策略
• 2.2 頁面結構
• 2.3 視覺層次
• 2.4 滾動操作
• 2.5 內容加載
• 2.6 按鈕
• 2.7 圖像化
• 2.8 視頻
• 2.9 行為響應按鈕
• 2.10 網(wǎng)頁表單
• 2.11 交互動畫

二、設計頁面

2.1 內容策略

內容策略最重要的一點就是聚焦在頁面目標上。理解頁面的目標，并根據(jù)目標安排內容。

下面是一些提高用戶對內容理解的實用技巧：

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

(Image credit: Witteia)

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

(Image credit: The Daily Rind)

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

  全部采用大寫，用戶比較難以理解。

2.2 頁面結構

一個結構合理的頁面清楚地顯示了每個用戶界面元素位于布局中的位置。雖然沒有一個適合所有頁面的規(guī)則，但是有一些指導性原則可以幫助你創(chuàng)建一個堅固的結構：

• 使結構可預測。使您的設計符合用戶期望。可以參考同類網(wǎng)站來找出在頁面上需要哪些元素以及位置。使用目標用戶熟悉的模式。
• 使用布局網(wǎng)格。布局網(wǎng)格將頁面劃分為幾塊主要區(qū)域，并根據(jù)大小和位置定義區(qū)域之間的關系。在網(wǎng)格的幫助下，能更輕松地將不同部分組合在一起，形成一個有凝聚力的頁面。

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

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

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

2.3 視覺層次

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

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

CNN采用的F形模式

Basecamp采用的Z形模式

• 優(yōu)先考慮重要元素。要讓頁面標題，登錄表單，導航選項和其他重要內容成為視覺焦點，以便游客立即看到它們。

“Learn More About Brains” 按鈕就是視覺焦點。

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

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

2.4 滾動操作

網(wǎng)頁設計師中流傳著一個謊言——用戶不會使用滾動。重申：今天，每一個人都在使用滾動!

用戶進行滾動操作時，提升用戶體驗的一些提示：

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

滾動后的導航 (Image: Zenman)

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

加載動畫（如Tumblr的加載指示器）告訴用戶正在加載更多的內容。

• 不要劫持滾動（即不要將滾動操作限定死）。劫持滾動是最惱人的事情之一，因為它將控制權從用戶手中帶走，并使?jié)L動行為完全不可預知。 當你設計一個網(wǎng)站，應該讓用戶控制他們的瀏覽行為。

Tumbler登錄頁面劫持了滾動操作。滾動的頁面時固定的，而不是自由的。

2.5 內容加載

內容加載值得進一步強調。即時響應是最好的，但有時候你的網(wǎng)站需要更多的時間向訪問者傳遞內容。一個糟糕的網(wǎng)絡連接可能導致一個緩慢的反應，或者一個操作可能需要更長的時間才能完成。但是不管原因是什么，你的網(wǎng)站都應該快速加載。

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

當內容被加載時，F(xiàn)acebook使用Skeleton Screens來填充UI。

2.6 按鈕

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

• 確保可點擊的元素看起來像可點擊的。使用按鈕和其他交互元素，考慮如何傳遞可用性信息。用戶是如何將元素理解為一個按鈕？表單應該遵循以下功能：元素的表現(xiàn)形式要傳遞使用方式?？雌饋硐矜溄踊虬粹o但不可點擊的可視元素（如帶有下劃線的單詞不是鏈接或具有矩形背景但不是按鈕的元素）會讓用戶懵逼。

左上角的橙色框是按鈕嗎？ 不，但形狀和標簽文本使其看起來像一個按鈕。

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

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

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

保持一致。

2.7 圖像化

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

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

• 確保圖像是相關的。設計中最大的危險之一是圖像傳達了錯誤信息。選擇最符合您的產(chǎn)品目標的圖像，并確保它們與上下文相關。

與主題無關的圖像會使用戶困惑。

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

不真實的圖像給用戶帶來一種虛偽的感覺。

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

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

2.8 視頻

隨著網(wǎng)速的提高，視頻正變得越來越流行，特別是它們延長了用戶在網(wǎng)站的時間。今天，視頻無處不在。 我們在臺式機，平板電腦和手機上觀看視頻。當有效地使用視頻時，能非常有效的吸引用戶 – 它傳遞更多的情感，真正給人一種產(chǎn)品或服務的感覺。

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

Facebook的視頻會在用戶進入時自動播放，但默認不會播放聲音。

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

（Image credit: Dmakproductions）

• 提供另一種內容的展示方式。如果視頻是消費內容的唯一方式，那么看不懂或聽不明白的人則無法獲取內容。為了用戶更便捷獲取內容，提供字幕和完整的視頻。

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

2.9 Call-to-Action(CTA)按鈕

Call-to-Action（CTA）是指引導用戶實現(xiàn)預期目標的按鈕。 CTA的重點在于引導用戶進行我們所期望的行動。 一些常見的CTA的例子是：

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

設計CTA按鈕時需要考慮以下幾點：

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

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

• 負空間。CTA周圍的空間也很重要。白色（或消極色）空間為了按鈕創(chuàng)建了留白空間，將按鈕與界面中的其他元素分割開。

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

• 面向行動的文本。為按鈕編寫文本，推動用戶采取行動。從使用“開始”，“獲取”或“加入”等動詞開始。

?Evernote為CTA提供了最常見且有效的文本。

提示：您可以通過模糊效果快速測試CTA。模糊測試是確定用戶的眼睛是否會到達您想要的位置的便捷方法。將網(wǎng)頁截圖在Adobe XD中應用模糊效果（請參閱下面的示例）?？纯错撁娴哪：姹荆男┰貢摲f而出？如果您不是正在預測的內容，那就修改。

模糊測試是一種檢驗設計焦點和視覺層次的技術。

2.10 網(wǎng)頁表單

填寫表單仍然是網(wǎng)頁最重要的互動類型之一。事實上，表單通常被認為是完成目標的最后一步。用戶在填寫表單時，應該避免出現(xiàn)困惑、盡快完成表單。表單就像一個對話，雙方之間（用戶和網(wǎng)站）應該有邏輯的溝通。

• 只留需要的。只要求填寫真正需要的東西。添加到表單的每個額外字段都將影響轉換率。總之想清楚為什么需要這些信息，以及將如何使用它。
• 按照邏輯順序排列表單。問題應該按照用戶邏輯而不是按應用或數(shù)據(jù)庫的邏輯來提出。例如，在名字之前詢問地址是不正確的。
• 將相關信息集合在一起。將相關信息按邏輯進行分組。從一組問題到下一組問題的流程更像一個對話。且將相關字段分組在一起還有助于用戶理解信息。

將相關信息集合在一起。（Image: Nielsen Norman Group）

2.11 動畫

越來越多的設計師將動畫作為功能元素來加強用戶體驗。動畫不只是為了樂趣，它是提高交互效率的重要方式之一。但是，動畫只有在合適的時間和位置才能提高用戶體驗。好的交互動畫有一個目標：它是有意義、有作用的。

以下是動畫增強用戶體驗的一些場景：

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

用戶看到動畫后，能立即了解問題。 (Image credit: The Kinetic UI)

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

(Image credit: xjw)

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

(Image credit: Ramotion)

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

(Image credit Heco)

第二部分結束，請移步第三部分。

相關閱讀

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

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

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

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

題圖來自unsplash，基于CC0協(xié)議