用戶(hù)瀏覽頁(yè)面的視覺(jué)流向通常是從左上至右下的一條弧線,我們可以看到通常瀏覽器的操縱都是在右側(cè),封閉|縮小|動(dòng)彈條等等。我們可以看范例iTunes的主窗口,四個(gè)角分別放置了一組按鈕,界面中間的歌曲也有良多的步履點(diǎn)。加上動(dòng)彈條,該界面只有有14個(gè)按鈕。以后臺(tái)頁(yè)面的按鈕為例,一級(jí)按鈕和二級(jí)按鈕尺寸大小規(guī)格都是一致的,只要就是以顏色來(lái)區(qū)分(整張頁(yè)面中橙色的按鈕至多泛起一個(gè))。假如改成“加入珍藏”商品仍是在購(gòu)物車(chē)中留存,效果應(yīng)該會(huì)更好。確實(shí)有良多的功能,不外由于視覺(jué)上和語(yǔ)言上的巧妙組合,并不會(huì)給用戶(hù)很亂的感覺(jué)。
舉例看淘寶和當(dāng)當(dāng)?shù)馁?gòu)物車(chē)頁(yè)面,淘寶的操縱是左右結(jié)構(gòu),固然有4個(gè)按鈕但是很符合我們的記憶,左邊全選刪除利便快捷。
假如按鈕都有自己的小圖標(biāo),類(lèi)似用于表單,列表中,可以將它們放在工具條或者類(lèi)似工具條狹長(zhǎng)的區(qū)域上,通常在頁(yè)面的頂部。符合視覺(jué)流向通常情況下,我們會(huì)將按鈕鋪排在相同的對(duì)象右邊,或者是下面,但是復(fù)雜界面元素的底部一般是用戶(hù)的“盲點(diǎn)”。當(dāng)當(dāng)?shù)目扇≈幵谟谠黾恿艘粋€(gè)“移入珍藏”的文字鏈,個(gè)人覺(jué)得很實(shí)用,但是后續(xù)操縱“移入珍藏”的商品就不顯示在購(gòu)物車(chē)中了。而且淘寶在這里處理的很好,大小樣式很同一。用簡(jiǎn)短而又含義明確的動(dòng)詞或者動(dòng)詞短語(yǔ)作為標(biāo)簽,假如用戶(hù)不需要的時(shí)候不要使用高深的專(zhuān)門(mén)用語(yǔ)。
幾個(gè)按鈕放在一起,由于它們可能完成類(lèi)似的功能。
制定“阿里助手”視覺(jué)規(guī)范的時(shí)候運(yùn)用的就是視覺(jué)相似性歸類(lèi),假若這組按鈕大小都一致,那么看起來(lái)就是一個(gè)整體,合適的大小和對(duì)齊可以匡助一組按鈕組成一個(gè)大一些的組合圖形。
用戶(hù)習(xí)慣的題目,當(dāng)用戶(hù)對(duì)于某種操縱形成習(xí)慣之后,很大程度進(jìn)步了他的工作效率,但假如我們?cè)O(shè)計(jì)上調(diào)整了習(xí)慣,他必需馬上思索這個(gè)工具一次,增加使用本錢(qián)。
分組按照按鈕的功能來(lái)分,設(shè)計(jì)上以顏色,大小來(lái)區(qū)分,為了頁(yè)面的整體性,質(zhì)感我們都保持一致的。我們將影響整個(gè)頁(yè)面或者對(duì)話框的按鈕,確認(rèn)|取消|下一頁(yè)|保留這樣類(lèi)按鈕設(shè)置在彈出框的右側(cè)有很好的擴(kuò)展性,左側(cè)可以添加幫助按鈕,這樣有助于功能的區(qū)域劃分。右側(cè)的橙色按鈕跟當(dāng)當(dāng)?shù)木G色“結(jié)算”按鈕功能一致,區(qū)別在于當(dāng)當(dāng)將“繼承購(gòu)物”按鈕樣式縮小了,這樣會(huì)增加用戶(hù)的判定本錢(qián)。
按鈕的分組可以讓一個(gè)界面變得具有自我描述能力.在復(fù)雜的布局中,組織良好的各組按鈕用以選擇,而且由于很顯著,這樣可以很快告訴用戶(hù)有哪些功能可以使用。
【 微信掃一掃 】