重點介紹將幫助您為網(wǎng)站創(chuàng)造出色的用戶體驗的主要原理

網(wǎng)絡(luò)表格

填寫表單仍然是網(wǎng)絡(luò)上用戶最重要的互動方式之一。實際上，通常將表單視為完成目標的最后一步。用戶應(yīng)該能夠快速而又不會混淆地填寫表格。形式就像一個對話，就像任何對話一樣，在用戶和網(wǎng)站兩方之間應(yīng)該進行邏輯通信。

• 僅詢問需要什么。 只問您真正需要的。您添加到表單的每個其他字段都會影響其轉(zhuǎn)換率。始終想一想為什么您要向用戶請求某些信息以及如何使用它們。
• 邏輯上訂購表格。 應(yīng)該從用戶的角度邏輯地提問，而不是從應(yīng)用程序或數(shù)據(jù)庫的角度提問。例如，在某人的名字前要求其地址是不正確的。
• 將相關(guān)字段分組在一起。 將相關(guān)信息分組為邏輯塊或集合。從一組問題到下一組問題的流程將更像是一次對話。將相關(guān)字段分組在一起也可以幫助用戶理解信息。

動畫

越來越多的設(shè)計師將動畫作為功能元素納入其中，以增強用戶體驗。動畫不再僅僅是取樂而已。它是進行有效交互的最重要工具之一。但是，設(shè)計中的動畫只有在正確的時間和地點進行整合，才能增強用戶體驗。好的UI動畫是有目的的；這是有意義的和實用的。

在以下情況下，動畫可以增強體驗：

• 有關(guān)用戶操作的視覺反饋 良好的交互設(shè)計可提供反饋。當您需要將操作結(jié)果告知用戶時，視覺反饋非常有用。如果無法成功執(zhí)行某項操作，則功能動畫可以快速簡便地提供有關(guān)問題的信息。例如，當輸入錯誤的密碼時，可以使用搖動動畫。很容易理解，為什么搖晃是傳達“不”的相當普遍的手勢，因為簡單的搖晃在人際交往中如此普遍。系統(tǒng)狀態(tài)的可視性 之一Jakob Nielsen的10個啟發(fā)式的可用性，系統(tǒng)狀態(tài)保持的知名度在用戶界面設(shè)計中最重要的原則之一。用戶希望在任何給定時間了解系統(tǒng)中的當前上下文，并且應(yīng)用程序不應(yīng)讓他們猜測—它應(yīng)該通過適當?shù)囊曈X反饋來告訴用戶正在發(fā)生的事情。數(shù)據(jù)上載和下載操作是功能性動畫的絕佳機會。例如，動畫加載條顯示了流程進行的速度，并設(shè)置了對動作處理速度的期望。導(dǎo)航過渡 導(dǎo)航過渡是網(wǎng)站上狀態(tài)之間的移動-例如，從高級視圖到詳細視圖。默認情況下，狀態(tài)更改通常涉及硬切，這會使它們難以遵循。功能動畫使用戶在這些變化時刻輕松自如，在導(dǎo)航上下文之間順暢地運輸用戶，并通過在狀態(tài)之間創(chuàng)建可視連接來說明屏幕上的變化。品牌化 假設(shè)您有數(shù)十個具有完全相同功能并幫助用戶完成相同任務(wù)的網(wǎng)站。他們可能都提供了良好的用戶體驗，但是人們真正喜歡的一種體驗不僅提供了良好的用戶體驗。它與用戶建立了情感聯(lián)系。品牌動畫在吸引用戶方面起著關(guān)鍵作用。它可以支持公司的品牌價值，彰顯產(chǎn)品的優(yōu)勢，并使用戶體驗真正令人愉悅和難忘。

  移動注意事項

  如今，幾乎50％的用戶通過移動設(shè)備訪問網(wǎng)絡(luò)。這對我們的網(wǎng)頁設(shè)計師意味著什么？這意味著我們必須為設(shè)計的每個網(wǎng)站制定移動策略。

  練習(xí)響應(yīng)式網(wǎng)頁設(shè)計

  必須針對臺式機和移動瀏覽器的廣闊前景優(yōu)化您的網(wǎng)站，這兩種瀏覽器的屏幕分辨率，支持的技術(shù)和用戶群都不相同。

  • 旨在實現(xiàn)單列布局。 通常，單列布局在移動屏幕上效果最佳。單列不僅有助于管理小屏幕上有限的空間，而且還可以輕松地在不同的設(shè)備分辨率之間以及縱向和橫向模式之間進行縮放。
  • 使用Priority +模式優(yōu)先考慮跨斷點的導(dǎo)航。Priority +是Michael Scharnagl創(chuàng)造的一個術(shù)語，用于描述導(dǎo)航，該導(dǎo)航公開了被認為是最重要的元素，并在“更多”按鈕后面隱藏了不重要的項目。它利用了可用的屏幕空間。隨著空間的增加，暴露的導(dǎo)航選項的數(shù)量也會增加，這可能會導(dǎo)致更好的可見性和更多的參與度。此模式特別適合具有大量不同部分和頁面的內(nèi)容密集型網(wǎng)站（例如新聞網(wǎng)站或大型零售商的商店）。監(jiān)護人在其部分導(dǎo)航中使用Priority +模式。當用戶單擊“全部”按鈕時，將顯示次要項目。
  確保圖像尺寸適合顯示器和平臺。網(wǎng)站必須適應(yīng)所有不同設(shè)備，各種分辨率，像素密度和方向的完美外觀。管理，處理和傳遞圖像是網(wǎng)站設(shè)計師在構(gòu)建響應(yīng)式網(wǎng)站時面臨的主要挑戰(zhàn)之一。為了簡化此任務(wù)，您可以使用諸如響應(yīng)式圖像斷點生成器之類的工具以交互方式生成圖像的斷點。

  從可點擊到可貼

  在移動網(wǎng)絡(luò)上，互動是通過手指點擊而不是鼠標點擊完成的。這意味著在設(shè)計觸摸目標和交互時將應(yīng)用不同的規(guī)則。

  • 適當大小的觸摸目標。 所有交互元素（例如鏈接，按鈕和菜單）都應(yīng)該是可點擊的。盡管桌面Web非常適合其活動（即，可單擊）區(qū)域較小且精確的鏈接，但移動Web需要更大，更大塊的按鈕，而這些按鈕可以用拇指輕松按下。如果將水龍頭用作網(wǎng)站的主要輸入方法，請參考MIT觸摸實驗室的研究，為按鈕選擇合適的尺寸。研究發(fā)現(xiàn)，指墊的平均大小在10到14毫米之間，指尖的范圍在8到10毫米之間，使10×10毫米成為最小的觸摸目標尺寸。
  • 互動性更強的視覺指示。 在移動網(wǎng)絡(luò)上，沒有懸停狀態(tài)。在桌面上時，當用戶將鼠標懸停在某個元素上時（例如，顯示一個下拉菜單），可能會提供其他視覺反饋，移動用戶將不得不點擊以查看該響應(yīng)。因此，用戶僅通過觀察就應(yīng)該能夠正確預(yù)測界面元素的行為。

  輔助功能

  如今，無論個人能力如何，每個人都必須可以使用當今的產(chǎn)品。為有缺陷的用戶設(shè)計是設(shè)計師實踐同理心并學(xué)會從別人的角度去體驗世界的一種方式。

  視力不佳的用戶

  許多網(wǎng)站使用低對比度進行文本復(fù)制。低對比度文字可能很流行，但也難以辨認和難以訪問。低對比度對于視力低下和對比度敏感的用戶來說尤其成問題。

  低對比度文本很難在臺式機上閱讀，但在移動設(shè)備上則變得更加困難。想象一下，在明亮的陽光下行走時，嘗試在移動設(shè)備上閱讀低對比度文本。這很好地提醒了可訪問的視覺設(shè)計對于所有用戶而言都是更好的視覺設(shè)計。

  永遠不要為了美麗而犧牲可用性。網(wǎng)站上文字和其他重要元素的最重要特征是可讀性。可讀性要求文本和背景之間有足夠的對比。為確保視覺障礙者可以閱讀文本，W3C的Web內(nèi)容可訪問性指南（WCAG）提出了對比度建議。對于正文文本和圖像文本，建議使用以下對比度：

  • 小文本與背景的對比度應(yīng)至少為4.5：1。7∶1的比例是優(yōu)選的。
  • 大文本（以14點粗體和18點常規(guī)字體及以上字體）與背景的對比度應(yīng)至少為3：1。

  色盲用戶

  據(jù)估計，全球人口中有4.5％患有色盲（每12個人中有1人，每200名女性中有1人），有4％的人視力低下（每30人中有1人），有0.6％的人是盲人（每188人中有1人）。容易忘記我們是為這一組用戶設(shè)計的，因為大多數(shù)設(shè)計師都不會遇到此類問題。

  為了使這些用戶可以訪問設(shè)計，請避免僅使用顏色來傳達含義。正如W3C所說，顏色不應(yīng)該被用作“傳達信息，指示動作，提示響應(yīng)或區(qū)分視覺元素的唯一視覺手段?！?/span>

  使用顏色作為傳達信息的唯一手段的一個常見示例是表單警報。成功和錯誤消息通常分別用綠色和紅色顯示。但是紅色和綠色是受色覺不足影響最嚴重的顏色-對于患有偏視性或普盲性的人來說，這些顏色可能很難區(qū)分。最有可能的是，您已經(jīng)看到錯誤消息，例如“標有紅色的字段為必填項?！彪m然看起來沒什么大不了，但是以以下格式出現(xiàn)的此錯誤消息對于具有色覺不足。設(shè)計師應(yīng)使用顏色突出顯示或補充已經(jīng)可見的內(nèi)容。

  在上面的表格中，設(shè)計人員應(yīng)提供更具體的說明，例如“您輸入的電子郵件地址無效。”或至少在需要注意的字段附近顯示一個圖標。

  盲人用戶

  圖像和插圖是Web體驗的重要組成部分。盲人使用諸如屏幕閱讀器之類的輔助技術(shù)來解釋網(wǎng)站。屏幕閱讀器依靠圖像的替代文本來“讀取”圖像。如果該文本不存在或描述性不足，則他們將無法獲得預(yù)期的信息。

  考慮兩個示例，第一個是流行的T恤商店Threadless。該頁面沒有太多關(guān)于所售商品的信息。唯一可用的文本信息是價格和大小的組合。

  第二個示例來自ASOS。出售類似襯衫的頁面，為該商品提供了準確的替代文字。這可以幫助使用屏幕閱讀器的人預(yù)想該項目的外觀。

  為圖像創(chuàng)建替代文本時，請遵循以下準則：

  • 所有“有意義”的圖像都需要描述性替代文本。（一張“有意義的”照片為所傳達的信息增加了背景。）
  • 如果圖像僅是裝飾性的，并且不向用戶提供有用的信息以幫助他們理解頁面的內(nèi)容，則不需要文本替代項。

  鍵盤友好的體驗

  某些用戶使用鍵盤而不是鼠標來瀏覽Internet。例如，有運動障礙的人很難使用鼠標來進行精細的運動。通過使交互式元素可以通過Tab按鍵進行聚焦并顯示鍵盤焦點指示器，可以使該組用戶易于訪問交互式和導(dǎo)航元素。

  以下是鍵盤導(dǎo)航的最基本規(guī)則：

  • 檢查鍵盤焦點是否可見和明顯。 一些Web設(shè)計師刪除了鍵盤焦點指示器，因為他們認為這很麻煩。這阻礙了鍵盤用戶正確地與網(wǎng)站進行交互。如果您不喜歡瀏覽器提供的默認指示器，請不要將其完全刪除。而是設(shè)計它以滿足您的口味。
  • 所有交互元素都應(yīng)該可訪問。 鍵盤用戶必須能夠訪問所有交互式元素，而不僅僅是主要的導(dǎo)航選項或主要的號召性用語。

  您可以在W3C的“ WAI-ARIA創(chuàng)作實踐”文檔的“設(shè)計模式和小部件”部分中找到有關(guān)鍵盤交互的詳細要求。