建立一個可學(xué)習(xí)的網(wǎng)站要比聽起來難的多。目標(biāo)應(yīng)該是一個清晰的用戶體驗(yàn)，訪問者可以快速的獲取和理解。

移動應(yīng)用設(shè)計(jì)者可以通過onboarding來解決這個問題，幫助用戶學(xué)習(xí)界面。但網(wǎng)站不能總是提供冗長的教程。

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

為什么易學(xué)性問題

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

你想設(shè)計(jì)學(xué)習(xí)能力，這樣人們就會留下來。我們的目標(biāo)是幫助他們快速學(xué)習(xí)你的界面，這樣他們就可以繼續(xù)使用。這樣你就能得到更多的重復(fù)用戶，網(wǎng)站的回彈率也會更低。

交互設(shè)計(jì)應(yīng)該是可以學(xué)習(xí)的，或者至少不應(yīng)該要求設(shè)計(jì)人員教人們?nèi)绾问褂媒涌凇＿@對像Photoshop這樣的復(fù)雜軟件不起作用，但網(wǎng)站不是復(fù)雜的軟件。

亞馬遜

例如，每個人都知道亞馬遜的網(wǎng)站。它有成千上萬的種類和數(shù)以百萬計(jì)的產(chǎn)品。有了這么多內(nèi)容，你就會認(rèn)為它是一團(tuán)糟。



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

因?yàn)樗麄冴P(guān)注的是幫助人們理解界面的相關(guān)組件。

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

推特

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

考慮到這一點(diǎn)，讓我們再深入了解一下一些可學(xué)習(xí)網(wǎng)站的技術(shù)。

一致性品種熟悉

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

某些元素應(yīng)該保持在每個頁面的相同位置。您的導(dǎo)航、徽標(biāo)和主要內(nèi)容區(qū)域應(yīng)該都很容易找到。

但更復(fù)雜的應(yīng)用程序需要的不僅僅是信息內(nèi)容。舉個例子，Dropbox的后端自推出以來基本上是一樣的。

Dropbox

一旦用戶了解了Dropbox的界面，他們就再也不需要重新學(xué)習(xí)了。這就是一致性的目標(biāo)。

當(dāng)有人第二次回到Dropbox時(shí)，他們已經(jīng)熟悉了。一旦人們使用它一段時(shí)間，他們就會熟悉UI并期望它以某種方式表現(xiàn)出來。

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

WDD

現(xiàn)在，當(dāng)你有任何有特色的故事圖片，標(biāo)題，或任何導(dǎo)航鏈接，你會注意到有一個小動畫把這些東西移向右邊。

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

在您的設(shè)計(jì)中尋找一致性，并盡可能保持這些元素的一致性。

界面反應(yīng)和反饋

移動世界經(jīng)常談?wù)撐⒒雍瓦@些互動如何影響行為。這些交互通常是用戶行為的動畫或UI響應(yīng)，它們對可學(xué)習(xí)的接口至關(guān)重要。

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

您可以通過簡單的動畫效果或創(chuàng)建響應(yīng)用戶的頁面元素來實(shí)現(xiàn)這一點(diǎn)。

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

MailChimp的

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

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

另一個很好的例子是Photojojo電子商務(wù)產(chǎn)品頁面布局。

Photojojo

每當(dāng)你點(diǎn)擊“添加到購物車”的時(shí)候，頁面就會滾動到頂部，你會看到一個工具提示和購物車的概述。

這個接口的響應(yīng)讓您知道您剛剛添加了一些東西到您的購物車。這是一個明確的指示，你的鼠標(biāo)點(diǎn)擊做了一些事情。

遵循標(biāo)準(zhǔn)規(guī)范

在介紹web布局的一致性值之前，我已經(jīng)討論了web設(shè)計(jì)中的標(biāo)準(zhǔn)。

如果你正在設(shè)計(jì)一個平均每天使用的網(wǎng)站，那么你需要遵循慣例。現(xiàn)在不是讓自己變得有創(chuàng)造力或者開始胡思亂想的時(shí)候。
 

本文來源：智通澤軟件，轉(zhuǎn)載請注明出處！如果需要營銷型網(wǎng)站建設(shè)、微商城、小程序商城、多端小程序 請聯(lián)系我們！

掃一掃，加我微信