建立一個可學習的網站要比聽起來難的多。目標應該是一個清晰的用戶體驗，訪問者可以快速的獲取和理解。

移動應用設計者可以通過onboarding來解決這個問題，幫助用戶學習界面。但網站不能總是提供冗長的教程。

讓我們看一下learnability，看看你如何將這些技術應用到你的網站上。大多數訪問者都知道如何瀏覽網頁，所以這并不是說要做人們學習的界面，而是遵循慣例，這樣他們就可以使用你的網站了。

為什么易學性問題

一旦人們知道如何使用接口，他們就會更多地使用接口。相反地，人們從那些看起來非常復雜的界面中跳出來。

你想設計學習能力，這樣人們就會留下來。我們的目標是幫助他們快速學習你的界面，這樣他們就可以繼續使用。這樣你就能得到更多的重復用戶，網站的回彈率也會更低。

交互設計應該是可以學習的，或者至少不應該要求設計人員教人們如何使用接口。這對像Photoshop這樣的復雜軟件不起作用，但網站不是復雜的軟件。

亞馬遜

例如，每個人都知道亞馬遜的網站。它有成千上萬的種類和數以百萬計的產品。有了這么多內容，你就會認為它是一團糟。



然而，瀏覽和搜索亞馬遜并不太難。為什么?

因為他們關注的是幫助人們理解界面的相關組件。

使用更復雜的頁面元素，您并不總是需要依賴于常識。例如，當您在UI中懸停一些元素時，Twitter會使用一些提示提示。

推特

他們的目標是鼓勵更多的用戶互動，并幫助人們繼續使用Twitter。這是一種保證方法，可以增加用戶總數，并鼓勵更高的保留率。

考慮到這一點，讓我們再深入了解一下一些可學習網站的技術。

一致性品種熟悉

我之前提到過，一個良好的設計需要一個一致的接口。這意味著您希望使用人們熟悉的常見頁面元素，并在長期內保持相似。

某些元素應該保持在每個頁面的相同位置。您的導航、徽標和主要內容區域應該都很容易找到。

但更復雜的應用程序需要的不僅僅是信息內容。舉個例子，Dropbox的后端自推出以來基本上是一樣的。

Dropbox

一旦用戶了解了Dropbox的界面，他們就再也不需要重新學習了。這就是一致性的目標。

當有人第二次回到Dropbox時，他們已經熟悉了。一旦人們使用它一段時間，他們就會熟悉UI并期望它以某種方式表現出來。

你也可以在博客和內容網站上找到同樣的方法，只是不太明顯。例如，WebDesigner Depot推出了一個重新設計，并改變了所有的懸浮事件，以使用移動動畫效果。

WDD

現在，當你有任何有特色的故事圖片，標題，或任何導航鏈接，你會注意到有一個小動畫把這些東西移向右邊。

這在整個網站上都是一致的，它告訴訪客要期待什么。

在您的設計中尋找一致性，并盡可能保持這些元素的一致性。

界面反應和反饋

移動世界經常談論微互動和這些互動如何影響行為。這些交互通常是用戶行為的動畫或UI響應，它們對可學習的接口至關重要。

用戶需要證明他們所做的事情(點擊、提交表單、輸入內容)實際上對頁面有影響。

您可以通過簡單的動畫效果或創建響應用戶的頁面元素來實現這一點。

一個很好的例子是MailChimp注冊頁面上的注冊表單。

MailChimp的

當你為你的帳戶輸入一個密碼時，MailChimp的UI會自動地在你點擊的時候劃掉某些需求。例如，密碼必須至少有8個字符長度。

一旦你鍵入8個字符，這個小項就會被劃掉。它顯示您的擊鍵正在影響頁面，用戶可以了解密碼字段是如何工作的。

另一個很好的例子是Photojojo電子商務產品頁面布局。

Photojojo

每當你點擊“添加到購物車”的時候，頁面就會滾動到頂部，你會看到一個工具提示和購物車的概述。

這個接口的響應讓您知道您剛剛添加了一些東西到您的購物車。這是一個明確的指示，你的鼠標點擊做了一些事情。

遵循標準規范

在介紹web布局的一致性值之前，我已經討論了web設計中的標準。

如果你正在設計一個平均每天使用的網站，那么你需要遵循慣例?，F在不是讓自己變得有創造力或者開始胡思亂想的時候。
 

本文來源：智通澤軟件，轉載請注明出處！如果需要營銷型網站建設、微商城、小程序商城、多端小程序 請聯系我們！

掃一掃，加我微信