一個(gè)網(wǎng)站不僅僅是一組鏈接過(guò)的頁(yè)面,而是一種體現(xiàn),一個(gè)空間。在這個(gè)空間里,不同的人、組織會(huì)遇見(jiàn)、溝通、交互。這些互動(dòng)能為訪問(wèn)者提供體驗(yàn)。作為一名網(wǎng)頁(yè)設(shè)計(jì)師,我們的工作就是盡可能地使體驗(yàn)感受更好。
其中的關(guān)鍵就在于優(yōu)先并且始終考慮你的客戶(hù)。
幸運(yùn)的是,雖然網(wǎng)頁(yè)設(shè)計(jì)還是一門(mén)較新的學(xué)科,但它對(duì)人機(jī)交互(HCI)的科學(xué)研究的幫助很大,而我們這篇文章就將會(huì)由9個(gè)來(lái)自HCI研究的準(zhǔn)則,他們都能幫助你在設(shè)計(jì)網(wǎng)站和程序時(shí),更好地專(zhuān)注于用戶(hù)。
界面設(shè)計(jì)側(cè)重于界面功能的布局,用戶(hù)體驗(yàn)設(shè)計(jì)則側(cè)重于更大的局面,也就是整個(gè)體驗(yàn),界面設(shè)計(jì)只是其中的一個(gè)子集。
1.了解客戶(hù)的需求 最重要的是,我們需要定位用戶(hù)——內(nèi)外都需要。這就意味著我們的應(yīng)用能吸引多少流量,更重要的是,了解其中客戶(hù)地需求,以及他們?cè)跐M(mǎn)足需求的道路上所遇到的障礙。
而要做到這種程度的分析,我們需要更細(xì)致的統(tǒng)計(jì)數(shù)據(jù),這就需要深入了解網(wǎng)站的用戶(hù)了。與用戶(hù)面對(duì)面交談,觀看他們的使用流程,詢(xún)問(wèn)相關(guān)的問(wèn)題,比如“你對(duì)這種設(shè)計(jì)有什么看法?”,或是其他更深的問(wèn)題。
用戶(hù)的需求是什么?是什么在阻礙他們滿(mǎn)足自己的需求?而我們的網(wǎng)站將會(huì)如何幫助他們解決或是克服這些阻礙?
千萬(wàn)別空想你的用戶(hù)想要什么,你需要實(shí)地深入挖掘。畢竟,欲望只是需求的產(chǎn)物,如果我們能夠滿(mǎn)足用戶(hù)深層次的需求。就能滿(mǎn)足他們的一些愿望,以及更多的基本要求。
通過(guò)數(shù)據(jù)分析以及與用戶(hù)的溝通,我們能夠得到許多問(wèn)題的答案,這些問(wèn)題可能是從如何使用界面,或是界面的重點(diǎn)應(yīng)該放在哪里。
2.定義界面的使用方法 在設(shè)計(jì)界面之前,我們需要想清楚它的使用方法。隨著觸屏的普及,觀察比想象更能發(fā)揮作用。
亮點(diǎn):應(yīng)用程序的用戶(hù)體驗(yàn)大多來(lái)自輕松和流暢的橫向觸摸。
人們有這么兩種方法來(lái)使用網(wǎng)站和應(yīng)用程序:通過(guò)與產(chǎn)品進(jìn)行交互的直接方法,與通過(guò)與產(chǎn)品外圍進(jìn)行交互的間接方法。
直接交互的例子:點(diǎn)擊按鈕刷卡使用指尖進(jìn)行拖拽簡(jiǎn)介交互的例子:使用鼠標(biāo)點(diǎn)擊使用鍵盤(pán)命令/快捷鍵鍵入表單輸入域在Wacom上繪圖 有時(shí)交互很簡(jiǎn)單。
用戶(hù)定位以及用戶(hù)所使用的設(shè)備會(huì)在很大程度上影響我們的決定。如果是為老年人或是手部受限的人群進(jìn)行設(shè)計(jì),我們就不需要太多的橫向滑動(dòng)。如果是在為通過(guò)鍵盤(pán)來(lái)與應(yīng)用程序進(jìn)行溝通的編程人員或是作家進(jìn)行設(shè)計(jì),那么我們需要支持所有常見(jiàn)的快捷鍵方式,以大限度地減少鼠標(biāo)使用時(shí)間。
3.設(shè)定預(yù)期 許多網(wǎng)站或是應(yīng)用都會(huì)出現(xiàn)這樣的情況:?jiǎn)螕舭粹o就進(jìn)入付款界面、刪除網(wǎng)站或是一些不是很好的界面。每一次點(diǎn)擊都有結(jié)果,有時(shí)還會(huì)帶來(lái)焦慮。
因此,一定要讓用戶(hù)知道如果點(diǎn)擊了這個(gè)按鈕會(huì)發(fā)生什么。我們可以通過(guò)設(shè)計(jì)或是復(fù)制來(lái)做到這一點(diǎn)。
通過(guò)設(shè)計(jì)設(shè)定預(yù)期:突出顯示所需的按鈕使用約定俗成的符號(hào),如用垃圾桶代表刪除、加號(hào)代表添加內(nèi)容,放大鏡用來(lái)表示搜索選擇具有相關(guān)含義的顏色,如綠色代表“前進(jìn)”,紅色代表“停止”通過(guò)復(fù)制設(shè)定預(yù)期:解釋清楚按鈕的作用在空白處提供具有導(dǎo)向性和鼓勵(lì)性質(zhì)的文字說(shuō)明適時(shí)發(fā)出警告并要求確認(rèn) 對(duì)于不可逆的行為,如永久刪除某些內(nèi)容,則需要詢(xún)問(wèn)用戶(hù)是否確定。
在InVision中,單擊垃圾桶圖標(biāo)并不會(huì)立即刪除,網(wǎng)站會(huì)詢(xún)問(wèn)你是否確定,并告知操作不能撤銷(xiāo)。
4.預(yù)測(cè)可能出現(xiàn)的錯(cuò)誤 人都會(huì)犯錯(cuò),而神明會(huì)原諒犯錯(cuò)?!狝lexander Pope《論批評(píng)》
人總是會(huì)犯錯(cuò),也總是不得不承擔(dān)后果。這里有兩種方法可以減少錯(cuò)誤的影響:
(1)防止錯(cuò)誤發(fā)生(2)亡羊補(bǔ)牢,為時(shí)不晚 我們能在很多電子商務(wù)網(wǎng)站以及表單設(shè)計(jì)中看到很多規(guī)避錯(cuò)誤的方法:在填寫(xiě)完所有空格錢(qián),按鈕并不被激活;表單常常會(huì)檢測(cè)到電子郵件地址錯(cuò)誤;以及彈出詢(xún)問(wèn)窗口詢(xún)問(wèn)你是否真的想清空購(gòu)物車(chē)。
與亡羊補(bǔ)牢相比,預(yù)測(cè)錯(cuò)誤從而規(guī)避往往沒(méi)那么沮喪,畢竟點(diǎn)擊“下一頁(yè)”或是“提交”時(shí)在發(fā)現(xiàn)錯(cuò)誤簡(jiǎn)直太難過(guò)了。
在寫(xiě)防錯(cuò)說(shuō)明時(shí),我們需要確定說(shuō)明說(shuō)清楚了兩件事:
(1)把問(wèn)題解釋清楚了,例如,“你說(shuō)你出生在火星,但人類(lèi)并沒(méi)有在火星上殖民,所以出錯(cuò)了”。(2)將問(wèn)題的解決方法解釋清楚。例如,“請(qǐng)選擇地球上的一個(gè)出生地”。 另外,請(qǐng)注意我們還需要一個(gè)保留之前的某些狀態(tài),好查看之前并沒(méi)有出現(xiàn)錯(cuò)誤的情況。例如,如果我不小心刪除了某些重要文件,但實(shí)際上可以回復(fù)文件,請(qǐng)使用一行文字讓我知道有這個(gè)功能,就像“您可以轉(zhuǎn)到垃圾桶還原已刪除的項(xiàng)目”一樣。
預(yù)測(cè)用戶(hù)錯(cuò)誤的原理稱(chēng)為poka-yoke原理,這是一個(gè)日本術(shù)語(yǔ),意為“防錯(cuò)”。
5.反饋迅速 在現(xiàn)實(shí)世界中,環(huán)境總是給予我們反饋,我們說(shuō)話(huà),別人回應(yīng);我們擼貓,貓則會(huì)發(fā)出咕嚕聲或是嘶嘶聲,當(dāng)然這取決于它的心情。
數(shù)字界面往往不會(huì)給予我們反饋,我們總是不知道是否該重新加載頁(yè)面、重新啟動(dòng)筆記本電腦,還是將它關(guān)閉,從最近可用窗口中刪除。
所以我們可以設(shè)計(jì)一個(gè)加載動(dòng)畫(huà)。當(dāng)我們點(diǎn)擊它時(shí),讓那個(gè)按鈕彈出并反彈,當(dāng)然幅度不要太大。如果我完成了一些事的時(shí)候,也可以設(shè)計(jì)一個(gè)虛擬的“擊掌”,讓我知道我的完成情況。
MailChimp在用戶(hù)安排或者發(fā)送電子郵件是提供反饋和建議
但要確保反饋?zhàn)顗蜓杆?。Usability.gov將任何沖過(guò)1秒鐘的延遲定義為中斷,超過(guò)10秒基本可以說(shuō)是受損了。但實(shí)際上,只需要三秒鐘,就能讓美國(guó)一般的人口受到影響。
如果頁(yè)面只能在5秒左右加載好,就不需要顯示進(jìn)度條了,因?yàn)檫@會(huì)使得加載時(shí)間看起來(lái)更長(zhǎng)了。單可以使用并不明示前進(jìn)的可視化,例如Mac的“死亡風(fēng)車(chē)”。如果我們需要在網(wǎng)站上使用進(jìn)度條,請(qǐng)考慮嘗試使用一些視覺(jué)技巧,這樣能讓加載看起來(lái)更快一些。
6.仔細(xì)考慮元素的位置和大小 Fitt定律是人機(jī)交互(HCI)的基本原理,它是指:獲取目標(biāo)的時(shí)間是目標(biāo)距離和大小的函數(shù)。
換一句話(huà)說(shuō),如果元素越大或是越近,我們就能更快地把光標(biāo)放在上面。這句話(huà)對(duì)人機(jī)交互和UI設(shè)計(jì)來(lái)說(shuō)意義深厚,但其中最重要的有三個(gè):
我們需要使得按鈕和其他需要點(diǎn)擊地元素大到能夠輕松地被點(diǎn)擊和查看。這對(duì)于菜單一類(lèi)地連接列表來(lái)說(shuō)十分重要,如果空間不足,我總會(huì)點(diǎn)進(jìn)錯(cuò)誤的鏈接。
為更常用的操作制造更大更突出的按鈕。
在屏幕的邊緣或是角落防止導(dǎo)航,或者是其他常見(jiàn)的交互元素,例如搜索欄??赡苣銜?huì)覺(jué)得這有違常識(shí),但在邊緣就減少了對(duì)準(zhǔn)確性的要求,用戶(hù)就不用擔(dān)心點(diǎn)到范圍外去了。
在考慮元素的放置位置和大小時(shí),請(qǐng)始終記得考慮交互方式。如果你的網(wǎng)站是水平滾動(dòng)而不是垂直滾動(dòng)的,就需要考慮在何處、如何給用戶(hù)提示這一特殊的滾動(dòng)方式。
7.不要忽視標(biāo)準(zhǔn) 作為創(chuàng)意性職業(yè),設(shè)計(jì)師總是傾向于重塑食物,但這并不總是最好的主意。
為什么?因?yàn)槭煜そ缑娴母倪M(jìn)會(huì)增加我們的“認(rèn)知負(fù)荷”,這使得用戶(hù)要再次思考自己的學(xué)習(xí)過(guò)程。我們的確可以隨心所欲地重新設(shè)計(jì)車(chē)輪的形狀,但這一切都要建立在實(shí)用的基礎(chǔ)上。
這一法則正好解釋了為什么Google文檔的菜單欄幾乎與Vista系統(tǒng)之前的Microsoft Word的菜單欄相同:
Vista系統(tǒng)之前的Microsoft Word
Google 文檔菜單欄,2015
? ?
這也解釋了為什么Pocket為什么要在其Android應(yīng)用程序中更改歸檔按鈕的位置。
更改按鈕位置后的界面更符合Android的設(shè)計(jì)風(fēng)格,也使得新用戶(hù)繼續(xù)使用Poket的可能性增加了23%。
在2013年的秋天,歸檔按鈕被放置在了屏幕的左上角,右側(cè)是Android設(shè)計(jì)規(guī)范所說(shuō)的“向上”按鈕。Pocket想讓人們更關(guān)注閱讀體驗(yàn),而不是簡(jiǎn)單地重復(fù)一些簡(jiǎn)單的操作,但更改過(guò)后的位置會(huì)使得新用戶(hù)以外關(guān)閉并歸檔他們正在閱讀的文章,而不是像預(yù)期那樣順利地返回到他們地閱讀列表中。
這一微小地變化,增加了新用戶(hù)繼續(xù)使用Pocket23%的可能。
8.增強(qiáng)界面的可讀性 當(dāng)談到可讀性時(shí),人們常常會(huì)引用哈佛大學(xué)心理學(xué)家George Miller的論文《神奇的數(shù)字7(+-2)——我們信息處理能力的一些限制》,文章提出,人們?cè)诙唐诘挠洃浿兄荒苡行У靥幚?-9件事。米勒本人稱(chēng)這是巧合,但這并不阻礙這句話(huà)地流傳。
也就是說(shuō),簡(jiǎn)單的事情更容易合乎邏輯,在短期內(nèi)更容易被記住。因此,我們需要控制界面中需要記住的事情的數(shù)量,以提高界面的可讀性。我們可以通過(guò)分塊來(lái)達(dá)到這一目的,即將信息分成更容易消化的小塊。
這一想法與Tesler復(fù)雜性保護(hù)定律不謀而合,該定律認(rèn)為UI設(shè)計(jì)師應(yīng)該盡可能簡(jiǎn)化他們?cè)O(shè)計(jì)的界面。這可能意味著盡可能地掩蓋界面背后應(yīng)用程序的復(fù)雜性。但Microsoft Word是一款沒(méi)有很好遵守此定律的流行產(chǎn)品。
大多數(shù)人只會(huì)用Word來(lái)打字,但另一些人可以用Word來(lái)做各種高級(jí)的事。在全球范圍內(nèi),每個(gè)人都使用相同的用戶(hù)界面打開(kāi)相同版本的Word,這就使得只需要打字的人被很多他們可能永遠(yuǎn)不會(huì)使用的選項(xiàng)所淹沒(méi)。
從而就有了漸進(jìn)式公開(kāi)的概念,其中高級(jí)功能被隱藏在了次級(jí)菜單中。我們?cè)诰W(wǎng)站中經(jīng)常遇到這種情況:介紹產(chǎn)品的文本往往比較短小,然后可以鏈接到更多詳細(xì)信息的頁(yè)面。這也是移動(dòng)射擊的好時(shí)間,如何構(gòu)建一個(gè)強(qiáng)大的導(dǎo)航也是我們一直面臨著的挑戰(zhàn)。
專(zhuān)業(yè)提示:避免在鏈接和按鈕中使用過(guò)多的“了解更多”和類(lèi)似的非特定文本。為什么?因?yàn)檫@些文本并不能告訴客戶(hù)他們會(huì)知道更多什么。通常人們只是瀏覽界面以找到一個(gè)連接到他們西昂區(qū)的地方的鏈接,即使重復(fù)15次“了解更多”,也并不會(huì)使得用戶(hù)更關(guān)注這里,屏幕閱讀器的用戶(hù)尤其如此。
9.使決策變得簡(jiǎn)單 現(xiàn)在的網(wǎng)站總是如此的喧囂:橫幅突然進(jìn)化成了全屏廣告,消息彈出、全是請(qǐng)求我們訂閱但我們卻沒(méi)有機(jī)會(huì)閱讀的博客,視頻插頁(yè)式的廣告迫使我們消耗寶貴的觀看秒數(shù),甚至各種小部件、彈出窗口、工具提示……
有時(shí)候我十分渴望擁有一個(gè)平靜的網(wǎng)絡(luò),Hick法則也告訴我,我真的需要一個(gè)這樣的網(wǎng)絡(luò)。Hick法則是說(shuō),給用戶(hù)提供的選擇越多,他們就越難做出決定。
這幾乎影響了所有我們所構(gòu)建的內(nèi)容:總體布局導(dǎo)航菜單價(jià)格頁(yè)面博客索引內(nèi)容提要 列表還很長(zhǎng),不過(guò)結(jié)果都一樣:我們?cè)O(shè)計(jì)得越簡(jiǎn)單,用戶(hù)做出我們希望他們做出的決定就越快越容易。這正是很多登陸頁(yè)面和非實(shí)時(shí)電子郵件只有一個(gè)號(hào)召性用語(yǔ)的原因。
專(zhuān)業(yè)提示:有時(shí)候,我們又需要用戶(hù)放慢速度并仔細(xì)選擇。這就是為什么Pinterest、Dribbble和許多博客得平鋪設(shè)計(jì)都運(yùn)行良好。畢竟,經(jīng)過(guò)抉擇,用戶(hù)更可能選擇了一個(gè)更適合自己的選項(xiàng)。
10.以數(shù)據(jù)為參考對(duì)象 盡管我們都希望我們能夠以純粹的藝術(shù)價(jià)值來(lái)看待我們的設(shè)計(jì)作品,但事實(shí)上,借以設(shè)計(jì)來(lái)實(shí)現(xiàn)目的同樣重要。
盡管借助用戶(hù)調(diào)研,我們能在設(shè)計(jì)中更好地進(jìn)行決策,以實(shí)現(xiàn)設(shè)計(jì)地目的,但啟用設(shè)計(jì)后的數(shù)據(jù)仍具有極大地指導(dǎo)意義。
因此,我們可以為網(wǎng)站設(shè)置一個(gè)分析后臺(tái),并定期進(jìn)行分析。現(xiàn)在有很多不同的分析工具,但我建議使用Google Analytics或是Mixpanel,具體就要視項(xiàng)目類(lèi)型而言了。
Mixpanel專(zhuān)注于事件,因此它會(huì)根據(jù)訪問(wèn)者在您的網(wǎng)站上的操作收集數(shù)據(jù),而Google Analytics更具有行為性,可為您提供操作時(shí)間和流量來(lái)源等。雖然這兩種工具都可 以提供這兩種形式的數(shù)據(jù),但它們的側(cè)重點(diǎn)各不相同,我們需要選擇最適合需求的那一款。
注意:這兩種工具都可以在一定數(shù)量?jī)?nèi)免費(fèi)使用。Webflow和類(lèi)似平臺(tái)通常通過(guò)簡(jiǎn)單的API密鑰交換使得分析設(shè)置變得更加容易。
Webflow中值得稱(chēng)道的交互設(shè)計(jì)
許多Webflow的設(shè)計(jì)師已經(jīng)使用這些原則來(lái)構(gòu)建直觀且引人入勝的交互,比如說(shuō):
擴(kuò)展的圈式導(dǎo)航
Waldo brooodryk設(shè)計(jì)了一個(gè)有趣的可移動(dòng)的,并且對(duì)桌面十分友好的動(dòng)畫(huà)菜單。在頁(yè)面加載時(shí),右下角的源泉顯示菜單,單擊時(shí),它會(huì)展開(kāi)以顯示可用頁(yè)面和對(duì)X的更改,從而允許用戶(hù)關(guān)閉菜單并專(zhuān)心于內(nèi)容。
這是一個(gè)設(shè)計(jì)簡(jiǎn)潔且迷人的組合,同時(shí)十分切合Fitts法則:在屏幕邊緣防止鏈接是最適用的。當(dāng)用戶(hù)不希望在導(dǎo)航中隱含層次結(jié)構(gòu)時(shí),循環(huán)導(dǎo)航會(huì)是一個(gè)不錯(cuò)的選擇。
你會(huì)為這位女孩買(mǎi)杯酒嗎?
設(shè)計(jì)師Shane Hurt將這個(gè)互動(dòng)決策放在了一起,以幫助您決定是否為這位女孩購(gòu)買(mǎi)一杯酒。這樣的設(shè)計(jì)其實(shí)包含了很多內(nèi)容,但能讓用戶(hù)專(zhuān)注于眼前的任務(wù):回答此時(shí)的問(wèn)題,并繼續(xù)朝著我們想要的決定前進(jìn)。這也是一種保持簡(jiǎn)潔的方法。
重新設(shè)計(jì)優(yōu)衣庫(kù)
有一天,設(shè)計(jì)師Tim Noah在優(yōu)衣庫(kù)網(wǎng)站上購(gòu)物時(shí),他發(fā)現(xiàn)他們的導(dǎo)航系統(tǒng)十分復(fù)雜,他想要重塑這一元素,采用更平板化、對(duì)移動(dòng)端更友好的方式。
我最喜歡的,就是他將優(yōu)衣庫(kù)的需要幾次點(diǎn)擊和頁(yè)面加載才能遍歷完的多層級(jí)導(dǎo)航重新設(shè)計(jì)成了單頁(yè)體驗(yàn)。公平地說(shuō),優(yōu)衣庫(kù)在他們的移動(dòng)端網(wǎng)站上做了同樣的事情,但他只是一個(gè)移動(dòng)子域名,并不是桌面網(wǎng)站的相應(yīng)版本。
需要注意的是,這次重新設(shè)計(jì)只是一個(gè)個(gè)人行為,和優(yōu)衣庫(kù)無(wú)關(guān)。
引領(lǐng)運(yùn)動(dòng)加速器
2017年初,設(shè)計(jì)師Jaro Quastenberg推出了一個(gè)真正展現(xiàn)Webflow視覺(jué)交互能力的網(wǎng)站——引領(lǐng)運(yùn)動(dòng)加速器。
這個(gè)網(wǎng)站在前面所提到的亮點(diǎn)上十分突出。第一,了解客戶(hù)。引領(lǐng)運(yùn)動(dòng)加速器知道他們需要吸引產(chǎn)品制造商的注意力,而他們的網(wǎng)站則會(huì)留下第一印象。第二,提供反饋。無(wú)論是滾動(dòng)、懸停還是點(diǎn)擊跳轉(zhuǎn),網(wǎng)站都會(huì)立即響應(yīng)訪問(wèn)者的操作,并且還是一些令人驚喜的方式。
從菜單到滾動(dòng)的交互,這些都是功能優(yōu)化的很好的例子了。
網(wǎng)站名稱(chēng):做網(wǎng)站時(shí)必知的網(wǎng)頁(yè)設(shè)計(jì)技巧,讓網(wǎng)站頁(yè)面建設(shè)更加合理
網(wǎng)頁(yè)網(wǎng)址:http://m.newbst.com/news/116726.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有做網(wǎng)站等
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)