了解Web設(shè)計(jì)的可學(xué)習(xí)性:提示和最佳實(shí)踐。
建立一個(gè)可學(xué)習(xí)的網(wǎng)站要比聽起來難的多。目標(biāo)應(yīng)該是一個(gè)清晰的用戶體驗(yàn)，訪問者可以快速的獲取和理解。
移動(dòng)應(yīng)用設(shè)計(jì)者可以通過onboarding來解決這個(gè)問題，幫助用戶學(xué)習(xí)界面。但網(wǎng)站不能總是提供冗長(zhǎng)的教程。
讓我們看一下learnability，看看你如何將這些技術(shù)應(yīng)用到你的網(wǎng)站上。大多數(shù)訪問者都知道如何瀏覽網(wǎng)頁，所以這并不是說要做人們學(xué)習(xí)的界面，而是遵循慣例，這樣他們就可以使用你的網(wǎng)站了。
為什么易學(xué)性問題
一旦人們知道如何使用接口，他們就會(huì)更多地使用接口。相反地，人們從那些看起來非常復(fù)雜的界面中跳出來。
你想設(shè)計(jì)學(xué)習(xí)能力，這樣人們就會(huì)留下來。我們的目標(biāo)是幫助他們快速學(xué)習(xí)你的界面，這樣他們就可以繼續(xù)使用。這樣你就能得到更多的重復(fù)用戶，網(wǎng)站的回彈率也會(huì)更低。
交互設(shè)計(jì)應(yīng)該是可以學(xué)習(xí)的，或者至少不應(yīng)該要求設(shè)計(jì)人員教人們?nèi)绾问褂媒涌?。這對(duì)像Photoshop這樣的復(fù)雜軟件不起作用，但網(wǎng)站不是復(fù)雜的軟件。
亞馬遜
例如，每個(gè)人都知道亞馬遜的網(wǎng)站。它有成千上萬的種類和數(shù)以百萬計(jì)的產(chǎn)品。有了這么多內(nèi)容，你就會(huì)認(rèn)為它是一團(tuán)糟。
然而，瀏覽和搜索亞馬遜并不太難。為什么?
因?yàn)樗麄冴P(guān)注的是幫助人們理解界面的相關(guān)組件。
使用更復(fù)雜的頁面元素，您并不總是需要依賴于常識(shí)。例如，當(dāng)您在UI中懸停一些元素時(shí)，Twitter會(huì)使用一些提示提示。
推特
他們的目標(biāo)是鼓勵(lì)更多的用戶互動(dòng)，并幫助人們繼續(xù)使用Twitter。這是一種保證方法，可以增加用戶總數(shù)，并鼓勵(lì)更高的保留率。
考慮到這一點(diǎn)，讓我們?cè)偕钊肓私庖幌乱恍┛蓪W(xué)習(xí)網(wǎng)站的技術(shù)。
一致性品種熟悉
我之前提到過，一個(gè)良好的設(shè)計(jì)需要一個(gè)一致的接口。這意味著您希望使用人們熟悉的常見頁面元素，并在長(zhǎng)期內(nèi)保持相似。
某些元素應(yīng)該保持在每個(gè)頁面的相同位置。您的導(dǎo)航、徽標(biāo)和主要內(nèi)容區(qū)域應(yīng)該都很容易找到。
但更復(fù)雜的應(yīng)用程序需要的不僅僅是信息內(nèi)容。舉個(gè)例子，Dropbox的后端自推出以來基本上是一樣的。
Dropbox
一旦用戶了解了Dropbox的界面，他們就再也不需要重新學(xué)習(xí)了。這就是一致性的目標(biāo)。
當(dāng)有人第二次回到Dropbox時(shí)，他們已經(jīng)熟悉了。一旦人們使用它一段時(shí)間，他們就會(huì)熟悉UI并期望它以某種方式表現(xiàn)出來。
你也可以在博客和內(nèi)容網(wǎng)站上找到同樣的方法，只是不太明顯。例如，WebDesigner Depot推出了一個(gè)重新設(shè)計(jì)，并改變了所有的懸浮事件，以使用移動(dòng)動(dòng)畫效果。
WDD
現(xiàn)在，當(dāng)你有任何有特色的故事圖片，標(biāo)題，或任何導(dǎo)航鏈接，你會(huì)注意到有一個(gè)小動(dòng)畫把這些東西移向右邊。
這在整個(gè)網(wǎng)站上都是一致的，它告訴訪客要期待什么。
在您的設(shè)計(jì)中尋找一致性，并盡可能保持這些元素的一致性。
界面反應(yīng)和反饋
移動(dòng)世界經(jīng)常談?wù)撐⒒?dòng)和這些互動(dòng)如何影響行為。這些交互通常是用戶行為的動(dòng)畫或UI響應(yīng)，它們對(duì)可學(xué)習(xí)的接口至關(guān)重要。
用戶需要證明他們所做的事情(點(diǎn)擊、提交表單、輸入內(nèi)容)實(shí)際上對(duì)頁面有影響。
您可以通過簡(jiǎn)單的動(dòng)畫效果或創(chuàng)建響應(yīng)用戶的頁面元素來實(shí)現(xiàn)這一點(diǎn)。
一個(gè)很好的例子是MailChimp注冊(cè)頁面上的注冊(cè)表單。
MailChimp的
當(dāng)你為你的帳戶輸入一個(gè)密碼時(shí)，MailChimp的UI會(huì)自動(dòng)地在你點(diǎn)擊的時(shí)候劃掉某些需求。例如，密碼必須至少有8個(gè)字符長(zhǎng)度。
一旦你鍵入8個(gè)字符，這個(gè)小項(xiàng)就會(huì)被劃掉。它顯示您的擊鍵正在影響頁面，用戶可以了解密碼字段是如何工作的。
另一個(gè)很好的例子是Photojojo電子商務(wù)產(chǎn)品頁面布局。
Photojojo
每當(dāng)你點(diǎn)擊“添加到購(gòu)物車”的時(shí)候，頁面就會(huì)滾動(dòng)到頂部，你會(huì)看到一個(gè)工具提示和購(gòu)物車的概述。
這個(gè)接口的響應(yīng)讓您知道您剛剛添加了一些東西到您的購(gòu)物車。這是一個(gè)明確的指示，你的鼠標(biāo)點(diǎn)擊做了一些事情。
遵循標(biāo)準(zhǔn)規(guī)范
在介紹web布局的一致性值之前，我已經(jīng)討論了web設(shè)計(jì)中的標(biāo)準(zhǔn)。
如果你正在設(shè)計(jì)一個(gè)平均每天使用的網(wǎng)站，那么你需要遵循慣例?，F(xiàn)在不是讓自己變得有創(chuàng)造力或者開始胡思亂想的時(shí)候。
掃一掃，加我微信
掃一掃，加我微信
