2021-04-05 分類(lèi): 網(wǎng)站建設(shè)
你以前可能經(jīng)歷過(guò)類(lèi)似的情況,如果你下載了一個(gè)app,卻要花時(shí)間去尋找你想要的東西,那么你不可能長(zhǎng)期呆在這里,甚至不會(huì)回來(lái)。
那要如何設(shè)計(jì)出“清晰,簡(jiǎn)單,一致”的導(dǎo)航呢?
想象一下,你周日早上出去買(mǎi)自己喜歡的巧克力。走進(jìn)商店,你首先看到的是貨品分區(qū)的名字掛在墻上。(它們夠大,可以在商店的任何地方看到他們)。
“啊,雜貨區(qū)。”你一邊想一邊朝著這個(gè)方向走去然后找到了你想要的巧克力。
在完全相同的場(chǎng)景下,只需一點(diǎn)小小的改動(dòng),去掉貨品分區(qū),那你可能對(duì)巧克力放在哪一無(wú)所知了。
現(xiàn)在,將商店比作你的web應(yīng)用程序,將你視為訪問(wèn)web應(yīng)用程序的客戶(hù)。
當(dāng)你在訪問(wèn)web應(yīng)用程序時(shí),你將經(jīng)歷與商店中相類(lèi)似的感受,并試圖在其中找到一些東西。
“一個(gè)用戶(hù)沒(méi)有必要記住他在你的網(wǎng)頁(yè)應(yīng)用上瀏覽的方式,導(dǎo)航應(yīng)該是在最前面的,而且應(yīng)該非常明顯?!?/p>
網(wǎng)絡(luò)應(yīng)用程序和商店之間的一個(gè)區(qū)別就在于,前者是沒(méi)有導(dǎo)購(gòu)站在客戶(hù)的身邊,引導(dǎo)客戶(hù)。 而導(dǎo)航欄就要充當(dāng)導(dǎo)購(gòu)的角色:搜索 - 在搜索框中輸入關(guān)鍵字,然后跳到需要的鏈接列表。
在web應(yīng)用程序中,您可以通過(guò)一個(gè)層次結(jié)構(gòu),使用導(dǎo)航欄來(lái)作為引導(dǎo)。
通常,在整個(gè)web app中都有一個(gè)靜態(tài)全局導(dǎo)航(global navigation),其他主要部分都有一個(gè)子導(dǎo)航欄。
導(dǎo)航的兩個(gè)主要目的是顯而易見(jiàn)的:幫助我們找到想要的東西,并告訴我們?cè)谀摹?/p>
但導(dǎo)航也有一些重要且容易被忽視的功能:它告訴我們這里有什么。
通過(guò)讓層次結(jié)構(gòu)可見(jiàn),導(dǎo)航可以告訴我們?cè)搼?yīng)用程序包含了哪些內(nèi)容,即導(dǎo)航顯示的內(nèi)容!而且,揭示這款應(yīng)用的功能可能比指導(dǎo)我們更重要。它幫助我們?nèi)绾问褂迷搼?yīng)用程序。
導(dǎo)航的主要任務(wù)就在于,它會(huì)告訴你從哪里開(kāi)始,以及你要選擇什么。如果做的正確,它應(yīng)該符合你所需要的所有指令。(這聽(tīng)起來(lái)不錯(cuò),但是大多數(shù)用戶(hù)都會(huì)忽略其他指令。)
它讓我們對(duì)創(chuàng)造它的人更有信心。
每當(dāng)我們進(jìn)入一個(gè)網(wǎng)絡(luò)應(yīng)用程序的時(shí)候,我們都會(huì)有一種精神冥想:“這些家伙知道他們?cè)谧鍪裁磫幔俊边@是讓我們返回應(yīng)用程序的主要因素之一。
簡(jiǎn)單明了,經(jīng)過(guò)深思熟慮后的導(dǎo)航是應(yīng)用程序可以利用的好機(jī)會(huì)之一,從而給用戶(hù)創(chuàng)造良好的第一印象。
為回答如何創(chuàng)建眾所周知的“清晰、簡(jiǎn)單、一致”的導(dǎo)航,我總結(jié)了以下網(wǎng)絡(luò)的基本導(dǎo)航慣例:
全局導(dǎo)航——什么與為什么?
現(xiàn)在不要急著往下看,畢竟他會(huì)跟著我們的。
web設(shè)計(jì)人員使用“持久化導(dǎo)航”(或全局導(dǎo)航)來(lái)描述在應(yīng)用程序的每個(gè)頁(yè)面上出現(xiàn)的導(dǎo)航元素集合。
持久的導(dǎo)航——用一種平靜、理性的聲音說(shuō):“這個(gè)元素在這里。有些部分會(huì)根據(jù)你在網(wǎng)頁(yè)應(yīng)用中的位置而有所改變,但它會(huì)一直在這里,而且總是以同樣的方式引導(dǎo)用戶(hù)?!?/p>
就像商店里的各個(gè)部門(mén)的名字一樣,不管你在哪里,如果你想知道你的位置,你總是會(huì)抬起頭來(lái),然后你可以以自己的方式找到你最喜歡的巧克力。
只要導(dǎo)航出現(xiàn)在每個(gè)頁(yè)面的相同位置,并且保持一致的外觀,就可以立即確認(rèn)你仍然在同一個(gè)應(yīng)用程序中——這比你想象中的更為重要,在整個(gè)應(yīng)用程序中保持一致意味著你只需要知道它是如何工作的。
關(guān)鍵部分:
關(guān)鍵部分——有時(shí)被稱(chēng)為“主導(dǎo)航”——是應(yīng)用程序主要部分的鏈接,也是應(yīng)用程序的層次結(jié)構(gòu)的高級(jí)。
在某些設(shè)計(jì)中,持久導(dǎo)航還將包含顯示二級(jí)導(dǎo)航的空間:當(dāng)前部分中的小節(jié)列表。
在其他情況下,指向一個(gè)名稱(chēng)或點(diǎn)擊它會(huì)顯示一個(gè)下拉菜單。而在某些情況下,單擊它將帶你到該部分的首頁(yè),在那里你會(huì)發(fā)現(xiàn)輔助導(dǎo)航。
面包屑導(dǎo)航——您的導(dǎo)航指南
就像“你在這里”的指示器一樣,面包屑導(dǎo)航會(huì)告訴你你在應(yīng)用程序的具體位置。
其作用當(dāng)然是不言而喻的,不占用太多空間,卻提供了一個(gè)方便和一致的方式來(lái)做你最需要做的兩件事情:回到上一個(gè)頁(yè)面或者首頁(yè)。
他們之所以被稱(chēng)為面包屑,是因?yàn)樗鼈冏屓讼肫饾h斯在樹(shù)林里掉落的面包屑,使得他和格萊特爾可以找到回家的路。
面包屑向您顯示從主頁(yè)到您所在的位置的路徑,讓你輕松地在應(yīng)用程序中移回到更高的層次結(jié)構(gòu)。
很長(zhǎng)一段時(shí)間,面包屑導(dǎo)航是一個(gè)奇怪的現(xiàn)象,只在應(yīng)用程序中才有大量的數(shù)據(jù),但現(xiàn)在它們?cè)趗i/ ux中是必不可少的。
以下是一些好實(shí)踐方法:
1、置頂
面包屑導(dǎo)航在置頂中似乎是做的最好的,我想這可能是因?yàn)榘阉鼈冞吘壔恕屗鼈兛雌饋?lái)像一個(gè)附屬品,就像書(shū)或雜志里的頁(yè)碼一樣。
2.使用>層級(jí)
試驗(yàn)和錯(cuò)誤似乎表明,層級(jí)之間的好分隔符是“大于”符號(hào)(>),可能是因?yàn)樗鼘⑾蛳乱苿?dòng)可視化。
3、最后一項(xiàng)使用粗體
列表中的最后一個(gè)項(xiàng)目應(yīng)該是當(dāng)前頁(yè)面的名稱(chēng),并使其為粗體,以突出其應(yīng)有的重要性。 因?yàn)檫@是當(dāng)前使用頁(yè),自然它不是一個(gè)鏈接。
標(biāo)簽
選項(xiàng)卡是少數(shù)幾個(gè)在用戶(hù)界面中采用暗喻的例子之一。就像一個(gè)三環(huán)的活頁(yè)夾里的文件一樣,它們會(huì)把東西分成不同的部分。通過(guò)點(diǎn)擊它的標(biāo)簽(或者,在web上點(diǎn)擊它)來(lái)打開(kāi)內(nèi)容是很容易的。
如果你還記得購(gòu)物中心和巧克力,那也很棒了。標(biāo)簽類(lèi)似于商場(chǎng)的一個(gè)貨架,它會(huì)告訴你你的所想之物在哪里,你可以在不同的貨架上看到不同種類(lèi)的巧克力,供不同的人購(gòu)買(mǎi)。
我認(rèn)為這是一個(gè)非常優(yōu)秀的導(dǎo)航選擇。這也是為什么我喜歡他們的原因:
1、簡(jiǎn)潔明了
我從來(lái)沒(méi)見(jiàn)過(guò)任何人——哪怕是“電腦文盲”——看一個(gè)選項(xiàng)卡界面,然后說(shuō),“嗯,我想知道這些是怎么做的?”
2、不容錯(cuò)過(guò)
當(dāng)我做可用性測(cè)試時(shí),很吃驚的是,人們?cè)诰W(wǎng)頁(yè)頂部經(jīng)常忽略水平導(dǎo)航欄。而選項(xiàng)卡的視覺(jué)特征是如此的與眾不同,以至于很難被忽略。因?yàn)槌藢?dǎo)航,它們很難被誤認(rèn)為是其他的什么,所以它們創(chuàng)建了導(dǎo)航和內(nèi)容之間的那種“顯而易見(jiàn)”的劃分。
3、操作平滑
網(wǎng)頁(yè)設(shè)計(jì)師總是在努力讓頁(yè)面看起來(lái)更有趣一點(diǎn)。如果操作正確,選項(xiàng)卡還可以為你的導(dǎo)航潤(rùn)色,并提供其他實(shí)用功能。
當(dāng)前題目:導(dǎo)航的作用,怎樣寫(xiě)出一個(gè)完美導(dǎo)航
標(biāo)題鏈接:http://m.rwnh.cn/news18/106468.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供軟件開(kāi)發(fā)、服務(wù)器托管、全網(wǎng)營(yíng)銷(xiāo)推廣、建站公司、網(wǎng)站排名、電子商務(wù)
聲明:本網(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)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容