網站的導航設計技巧(一)
2019.07.22
想象一下這個場景:你(ni)一(yi)直(zhi)想(xiang)買(mai)一(yi)個(ge)新(xin)的(de)筆(bi)記(ji)本(ben)電(dian)腦(nao)包(bao)。最(zui)後(hou),您(nin)有(you)時(shi)間(jian)坐(zuo)下(xia)來(lai),在(zai)線(xian)瀏(liu)覽(lan)不(bu)同(tong)的(de)網(wang)站(zhan)選(xuan)擇(ze)自(zi)己(ji)喜(xi)歡(huan)的(de)商(shang)品(pin),經(jing)過(guo)重(zhong)重(zhong)篩(shai)選(xuan),您(nin)找(zhao)到(dao)了(le)自(zi)己(ji)滿(man)意(yi)包(bao)包(bao),想(xiang)要(yao)購(gou)買(mai)。但(dan)隨(sui)後(hou),沮(ju)喪(sang)的(de)事(shi)發(fa)生(sheng)了(le),-你無法找到“買我”按an鈕niu,購gou物wu車che圖tu標biao已yi經jing消xiao失shi,退tui貨huo政zheng策ce無wu處chu可ke見jian。這zhe一yi切qie看kan起qi來lai都dou太tai複fu雜za了le,最zui終zhong,你ni放fang棄qi了le這zhe個ge網wang站zhan,選xuan擇ze另ling外wai一yi家jia。這zhe是shi網wang站zhan導dao航hang如ru何he破po壞huai用yong戶hu體ti驗yan,最zui終zhong影ying響xiang流liu量liang,轉zhuan化hua率lv和he跳tiao出chu率lv的de典dian型xing示shi例li。
lianghaodewangzhandaohangkeyibangzhuyonghuzhaodaotamenzhengzaixunzhaodeneirong,bingweitamentigongjijidetiyan,gulitamenfanhui。beijingfenxingkejishiyijiajingyanfengfudezhuanyehuadegaoduanwangzhanshejigongsi,benwenjiangjiehejingyan,weidajiajieshaoruhechuangjianwangzhandedaohang。
有you些xie事shi情qing最zui好hao是shi提ti前qian計ji劃hua的de。當dang涉she及ji到dao創chuang建jian一yi個ge網wang站zhan時shi,一yi點dian點dian前qian瞻zhan性xing思si維wei肯ken定ding是shi必bi要yao的de。在zai您nin深shen入ru研yan究jiu之zhi前qian,請qing說shuo明ming您nin的de網wang站zhan需xu要yao哪na些xie功gong能neng和he頁ye麵mian,以yi及ji它ta們men的de層ceng次ci結jie構gou應ying該gai是shi什shen麼me。您nin需xu要yao“關於我們”頁麵,社區論壇、博客或常見問題頁麵嗎?哪些頁麵對您的網站訪問者最重要或最有價值?要根據您的需求規劃菜單,請創建“站點地圖”。站zhan點dian地di圖tu是shi您nin網wang站zhan的de所suo有you主zhu要yao頁ye麵mian及ji其qi中zhong所suo有you子zi類lei別bie的de列lie表biao。它ta應ying該gai清qing楚chu地di表biao明ming哪na些xie頁ye麵mian更geng重zhong要yao,哪na些xie更geng不bu重zhong要yao。您nin的de站zhan點dian地di圖tu將jiang成cheng為wei導dao航hang菜cai單dan的de基ji礎chu。
02.確定頁麵的優先級
在(zai)決(jue)定(ding)您(nin)的(de)層(ceng)次(ci)結(jie)構(gou)時(shi),請(qing)考(kao)慮(lv)您(nin)希(xi)望(wang)引(yin)導(dao)訪(fang)問(wen)者(zhe)的(de)位(wei)置(zhi)以(yi)及(ji)如(ru)何(he)最(zui)好(hao)地(di)引(yin)導(dao)他(ta)們(men)通(tong)過(guo)您(nin)的(de)渠(qu)道(dao),最(zui)終(zhong)將(jiang)其(qi)轉(zhuan)換(huan)為(wei)客(ke)戶(hu)或(huo)粉(fen)絲(si)。此(ci)外(wai),請(qing)考(kao)慮(lv)訪(fang)問(wen)者(zhe)最(zui)感(gan)興(xing)趣(qu)的(de)信(xin)息(xi)。這(zhe)稱(cheng)為(wei)“主要導航”,應盡可能輕鬆訪問。構成主要導航的所有頁麵都應顯示在網站的主菜單中。
jishizainindecaidanzhong,ninyehuiyongyouyouxianjiyuelaiyuegaodeyemian。yidanninquedingleyemiandeyouxianji,jiukeyizaidaohangcaidanshejizhongchuandazheyidian,congershizuiguanjiandeyemiantuoyingerchu。zheyangzuodehaofangfaheyibanguizeshi,caidanshangshouxianhuozuihouchuxiandexiangmuhuiyinqigengduoguanzhu,yincininyinggaifangzhigaoyouxianjiyemian。
如果您的網站包含大量信息,您可能還需要輔助導航頁麵的附加菜單。這些頁麵不太重要,但當然仍需要清晰的導航。
03.堅持慣例
雖sui然ran嚐chang試shi打da破po模mo板ban並bing創chuang造zao一yi個ge前qian所suo未wei見jian的de設she計ji很hen誘you人ren,但dan有you時shi候hou最zui好hao堅jian持chi人ren們men已yi經jing知zhi道dao的de東dong西xi。畢bi竟jing,超chao鏈lian接jie通tong常chang顯xian示shi為wei藍lan色se和he下xia劃hua線xian,或huo者zhe為wei什shen麼me徽hui標biao通tong常chang會hui放fang置zhi在zai網wang站zhan的de一yi個ge頂ding角jiao中zhong,這zhe是shi有you原yuan因yin的de。存cun在zai這zhe些xie熟shu悉xi的de細xi微wei差cha別bie或huo“設計慣例”,yinweitamenqizuoyong。zaidaohangfangmian,ninxiwangyonghunenggoujinkenengqingsongdiwufengliulannindewangzhan。jishineirong,chanpinhuoshejiduitamenlaishuodoushiquanxinde,tamenrengranxiwangcaidanweiyubiaozhunweizhizhiyi:頂部角落或網站標題中。
04.考慮創建一個粘性菜單
粘性菜單(也稱為“固定”或“浮動”菜單)是(shi)一(yi)個(ge)菜(cai)單(dan),即(ji)使(shi)訪(fang)問(wen)者(zhe)向(xiang)下(xia)滾(gun)動(dong)您(nin)的(de)網(wang)站(zhan)也(ye)會(hui)保(bao)留(liu)。這(zhe)對(dui)於(yu)長(chang)滾(gun)動(dong)頁(ye)麵(mian)尤(you)為(wei)重(zhong)要(yao),因(yin)為(wei)您(nin)不(bu)希(xi)望(wang)訪(fang)問(wen)者(zhe)必(bi)須(xu)一(yi)直(zhi)向(xiang)後(hou)滾(gun)動(dong)才(cai)能(neng)訪(fang)問(wen)另(ling)一(yi)個(ge)頁(ye)麵(mian)。但(dan)是(shi),還(hai)可(ke)以(yi)選(xuan)擇(ze)添(tian)加(jia)“返回頂部”按(an)鈕(niu),以(yi)幫(bang)助(zhu)用(yong)戶(hu)節(jie)省(sheng)時(shi)間(jian)。無(wu)論(lun)您(nin)采(cai)用(yong)哪(na)種(zhong)解(jie)決(jue)方(fang)案(an)取(qu)決(jue)於(yu)您(nin)網(wang)站(zhan)的(de)設(she)計(ji)和(he)布(bu)局(ju),因(yin)此(ci)在(zai)考(kao)慮(lv)為(wei)您(nin)的(de)網(wang)站(zhan)提(ti)供(gong)最(zui)方(fang)便(bian)的(de)導(dao)航(hang)時(shi),請(qing)考(kao)慮(lv)不(bu)同(tong)的(de)選(xuan)項(xiang)。
05.限製菜單中的項目數量
meiyourenxihuanbeixinxihongzha。zailiulanwangyeshi,nulibaochizhuanzhu,bingqiehuituranchuxiansuoyoufenxin。baochicaidanzuixiaohua,zuiduoliugehuoqigeleibie。zheyang,yonghujiangnenggougenghaodichulixinxibinggengkuaididaodatamenxiangyaodeyemian。
如ru果guo您nin的de網wang站zhan包bao含han大da量liang信xin息xi,您nin可ke以yi使shi用yong下xia拉la菜cai單dan將jiang其qi細xi分fen為wei多duo個ge部bu分fen。這zhe意yi味wei著zhe當dang訪fang問wen者zhe將jiang鼠shu標biao懸xuan停ting在zai菜cai單dan上shang的de一yi個ge項xiang目mu上shang時shi,會hui出chu現xian一yi個ge可ke供gong他ta們men選xuan擇ze的de子zi類lei別bie列lie表biao。但dan是shi,盡jin量liang避bi免mian使shi用yong下xia拉la菜cai單dan,因yin為wei當dang用yong戶hu點dian擊ji菜cai單dan中zhong的de某mou個ge項xiang目mu時shi,他ta們men希xi望wang直zhi接jie轉zhuan到dao另ling一yi個ge頁ye麵mian。額e外wai的de步bu驟zhou可ke能neng是shi用yong戶hu體ti驗yan中zhong的de輕qing微wei“打嗝”。
本文的技巧介紹是文章的第一部分,想要了解更多,敬請期待我們的網站導航設計技巧(二)。獨樂樂不如眾樂樂,歡迎分享北京分形科技的網站設計經驗!
lianghaodewangzhandaohangkeyibangzhuyonghuzhaodaotamenzhengzaixunzhaodeneirong,bingweitamentigongjijidetiyan,gulitamenfanhui。beijingfenxingkejishiyijiajingyanfengfudezhuanyehuadegaoduanwangzhanshejigongsi,benwenjiangjiehejingyan,weidajiajieshaoruhechuangjianwangzhandedaohang。
有you些xie事shi情qing最zui好hao是shi提ti前qian計ji劃hua的de。當dang涉she及ji到dao創chuang建jian一yi個ge網wang站zhan時shi,一yi點dian點dian前qian瞻zhan性xing思si維wei肯ken定ding是shi必bi要yao的de。在zai您nin深shen入ru研yan究jiu之zhi前qian,請qing說shuo明ming您nin的de網wang站zhan需xu要yao哪na些xie功gong能neng和he頁ye麵mian,以yi及ji它ta們men的de層ceng次ci結jie構gou應ying該gai是shi什shen麼me。您nin需xu要yao“關於我們”頁麵,社區論壇、博客或常見問題頁麵嗎?哪些頁麵對您的網站訪問者最重要或最有價值?要根據您的需求規劃菜單,請創建“站點地圖”。站zhan點dian地di圖tu是shi您nin網wang站zhan的de所suo有you主zhu要yao頁ye麵mian及ji其qi中zhong所suo有you子zi類lei別bie的de列lie表biao。它ta應ying該gai清qing楚chu地di表biao明ming哪na些xie頁ye麵mian更geng重zhong要yao,哪na些xie更geng不bu重zhong要yao。您nin的de站zhan點dian地di圖tu將jiang成cheng為wei導dao航hang菜cai單dan的de基ji礎chu。
02.確定頁麵的優先級
在(zai)決(jue)定(ding)您(nin)的(de)層(ceng)次(ci)結(jie)構(gou)時(shi),請(qing)考(kao)慮(lv)您(nin)希(xi)望(wang)引(yin)導(dao)訪(fang)問(wen)者(zhe)的(de)位(wei)置(zhi)以(yi)及(ji)如(ru)何(he)最(zui)好(hao)地(di)引(yin)導(dao)他(ta)們(men)通(tong)過(guo)您(nin)的(de)渠(qu)道(dao),最(zui)終(zhong)將(jiang)其(qi)轉(zhuan)換(huan)為(wei)客(ke)戶(hu)或(huo)粉(fen)絲(si)。此(ci)外(wai),請(qing)考(kao)慮(lv)訪(fang)問(wen)者(zhe)最(zui)感(gan)興(xing)趣(qu)的(de)信(xin)息(xi)。這(zhe)稱(cheng)為(wei)“主要導航”,應盡可能輕鬆訪問。構成主要導航的所有頁麵都應顯示在網站的主菜單中。
jishizainindecaidanzhong,ninyehuiyongyouyouxianjiyuelaiyuegaodeyemian。yidanninquedingleyemiandeyouxianji,jiukeyizaidaohangcaidanshejizhongchuandazheyidian,congershizuiguanjiandeyemiantuoyingerchu。zheyangzuodehaofangfaheyibanguizeshi,caidanshangshouxianhuozuihouchuxiandexiangmuhuiyinqigengduoguanzhu,yincininyinggaifangzhigaoyouxianjiyemian。
如果您的網站包含大量信息,您可能還需要輔助導航頁麵的附加菜單。這些頁麵不太重要,但當然仍需要清晰的導航。
03.堅持慣例
雖sui然ran嚐chang試shi打da破po模mo板ban並bing創chuang造zao一yi個ge前qian所suo未wei見jian的de設she計ji很hen誘you人ren,但dan有you時shi候hou最zui好hao堅jian持chi人ren們men已yi經jing知zhi道dao的de東dong西xi。畢bi竟jing,超chao鏈lian接jie通tong常chang顯xian示shi為wei藍lan色se和he下xia劃hua線xian,或huo者zhe為wei什shen麼me徽hui標biao通tong常chang會hui放fang置zhi在zai網wang站zhan的de一yi個ge頂ding角jiao中zhong,這zhe是shi有you原yuan因yin的de。存cun在zai這zhe些xie熟shu悉xi的de細xi微wei差cha別bie或huo“設計慣例”,yinweitamenqizuoyong。zaidaohangfangmian,ninxiwangyonghunenggoujinkenengqingsongdiwufengliulannindewangzhan。jishineirong,chanpinhuoshejiduitamenlaishuodoushiquanxinde,tamenrengranxiwangcaidanweiyubiaozhunweizhizhiyi:頂部角落或網站標題中。
04.考慮創建一個粘性菜單
粘性菜單(也稱為“固定”或“浮動”菜單)是(shi)一(yi)個(ge)菜(cai)單(dan),即(ji)使(shi)訪(fang)問(wen)者(zhe)向(xiang)下(xia)滾(gun)動(dong)您(nin)的(de)網(wang)站(zhan)也(ye)會(hui)保(bao)留(liu)。這(zhe)對(dui)於(yu)長(chang)滾(gun)動(dong)頁(ye)麵(mian)尤(you)為(wei)重(zhong)要(yao),因(yin)為(wei)您(nin)不(bu)希(xi)望(wang)訪(fang)問(wen)者(zhe)必(bi)須(xu)一(yi)直(zhi)向(xiang)後(hou)滾(gun)動(dong)才(cai)能(neng)訪(fang)問(wen)另(ling)一(yi)個(ge)頁(ye)麵(mian)。但(dan)是(shi),還(hai)可(ke)以(yi)選(xuan)擇(ze)添(tian)加(jia)“返回頂部”按(an)鈕(niu),以(yi)幫(bang)助(zhu)用(yong)戶(hu)節(jie)省(sheng)時(shi)間(jian)。無(wu)論(lun)您(nin)采(cai)用(yong)哪(na)種(zhong)解(jie)決(jue)方(fang)案(an)取(qu)決(jue)於(yu)您(nin)網(wang)站(zhan)的(de)設(she)計(ji)和(he)布(bu)局(ju),因(yin)此(ci)在(zai)考(kao)慮(lv)為(wei)您(nin)的(de)網(wang)站(zhan)提(ti)供(gong)最(zui)方(fang)便(bian)的(de)導(dao)航(hang)時(shi),請(qing)考(kao)慮(lv)不(bu)同(tong)的(de)選(xuan)項(xiang)。
05.限製菜單中的項目數量
meiyourenxihuanbeixinxihongzha。zailiulanwangyeshi,nulibaochizhuanzhu,bingqiehuituranchuxiansuoyoufenxin。baochicaidanzuixiaohua,zuiduoliugehuoqigeleibie。zheyang,yonghujiangnenggougenghaodichulixinxibinggengkuaididaodatamenxiangyaodeyemian。
如ru果guo您nin的de網wang站zhan包bao含han大da量liang信xin息xi,您nin可ke以yi使shi用yong下xia拉la菜cai單dan將jiang其qi細xi分fen為wei多duo個ge部bu分fen。這zhe意yi味wei著zhe當dang訪fang問wen者zhe將jiang鼠shu標biao懸xuan停ting在zai菜cai單dan上shang的de一yi個ge項xiang目mu上shang時shi,會hui出chu現xian一yi個ge可ke供gong他ta們men選xuan擇ze的de子zi類lei別bie列lie表biao。但dan是shi,盡jin量liang避bi免mian使shi用yong下xia拉la菜cai單dan,因yin為wei當dang用yong戶hu點dian擊ji菜cai單dan中zhong的de某mou個ge項xiang目mu時shi,他ta們men希xi望wang直zhi接jie轉zhuan到dao另ling一yi個ge頁ye麵mian。額e外wai的de步bu驟zhou可ke能neng是shi用yong戶hu體ti驗yan中zhong的de輕qing微wei“打嗝”。
本文的技巧介紹是文章的第一部分,想要了解更多,敬請期待我們的網站導航設計技巧(二)。獨樂樂不如眾樂樂,歡迎分享北京分形科技的網站設計經驗!












