设计、网站、推广
始于2004年
当前位置:首页 > 网站制作

导航设计与信息架构

发表日期:2011-5-18 作者来源:派谷网络 浏览次数:0

    大部分时候我们讲导航,讲的是导航对内容和结构的一种表现。就是说我们在讨论导航的时候,更多的去关注怎么与之交互,以及视觉上是怎么好看。但是导航,不仅仅局限于交互方式和视觉形式。

    被狭义化的导航

    回想一下我们是如何设计导航的?难道不正是根据内容、根据内容的结构去设计?最终,导航可能包含了三方面的功劳:交互设计、视觉设计,别忘了,还有信息架构。是信息架构决定了导航的设计。

    信息架构决定了我们是用几级分类,一个项目是否可以属于两个或多个分类,等等。信息架构里面,有很大一部分工作是分类。分类,就是对已有的项目、内容,通过已知的共同属性,进行分组、归类。在计算机、信息系统被发明以前,人们就在不断进行着分类工作。从日常生活到科学研究,分类无处不在。我们为什么会要对动物、植物进行分类呢?哦,是为了形成科学的知识体系。那么当然,是先有了动物、植物、微生物的具体存在,才有了界、门、纲、目、科、属、种这样的生物分类法。为什么要分那么细致那么多层级?是因为生物届的复杂性要求分的这么细致。

    所以我一直以来支持的观点是,根据内容去进行分类,和信息架构。所以我也十分推崇使用卡片分类法,既是定量分析也是定性分析。在有条件的情况下,推荐大家尝试。

    回到开始的话题,如果我们考虑导航的时候,仅考虑其交互方式和视觉形式,那么很有可能反作用于信息架构。比如下面的例子。

    Tab 式导航的例子

    我们为什么要用 Tab 式导航?是因为它能比较好的表现出分类以及分类的结构(一般是两级)。并不是因为有了 Tab 式导航,所以人们才把分类分为两级。最初的时候,一定是因为先有了两级分类,设计师才设计出了精妙的 Tab 式导航。而 Tab 式导航的大规模使用,也在反面的影响大部分信息架构的设计。简单的几项内容,本可以一级逻辑表明,却被套用了两级分类,理由是 Tab 式导航比较好看。就好比人们总是习惯于用四个汉字作为导航文案一样。比如蛮好用“新闻”两字可以的,非得用“新闻热点”。这道理是一样的。

    导航的交互和视觉设计不应该影响信息架构的设计。鱼眼菜单真的那么好用么?如果原本一个下拉菜单就十个菜单项,你会选择用鱼眼菜单吗?或者又是仅仅因为它很酷。

    仍然是那个问题,什么样的内容,决定了什么样的导航。尤其要注意下,我这里说的内容,不仅包括文本资料的分类,也包括功能型网站的用户任务和目标。

    导航不仅仅是 Tab

    我们看到在 Office 2007 系列产品中,原来的菜单已经被板砖儿样的按钮所取代。这些被称为 Ribbon 的板砖儿,或者称之为 Context Navigation(情景式导航),是对类似交互操作的一种分类。显然,情景式导航,已经超越了简单的针对内容的分类。

    搜索框是一种导航吗?这样说似乎有些牵强。但是在信息检索系统中,搜索框、过滤器等,确实是起到了导航作用的。或者我们可以称之为辅助导航。

    归本溯源,导航为什么会存在?在所有的系统、应用中,都是为了让使用者能够高效的完成任务、达成目标。这样的话,从广义上讲,引导用户快速完成任务的链接、按钮,都可以作为大导航系统的一部分。

    可能很多朋友有这样一个问题:导航设计是否要考虑商业目标?我觉得这与上文并不冲突。具体的可留待讨论。

    小结

    不要为了导航而导航,前面一个导航是指表现形式,后面一个导航是指实际的导航系统。

    对于导航的设计,信息架构比交互方式、视觉形式更加的重要。

    导航不仅仅是内容的一种分类,也包括类似交互操作的分类。导航的目的是为了让使用者高效的完成任务、达成目标。

    情景式导航有可能是导航设计的一种发展趋势。

本文章系本站编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与本站联系,我们将在第一时间删除内容!

相关网站设计案例

相关推荐新闻

缂傚倸鍊搁崯顖炲垂瑜版帗鍋熸い鏍仜鐎氬鈧箍鍎遍幊搴綖閵堝鐓曢柨婵嗗暙婵℃寧绻涢崼鐔风仼缂佽鲸甯為埀顒佺⊕閿氱悮妯肩磽娴e搫顎撶紒杈ㄦ礋楠炲啴鏁撻敓锟�...

缂傚倸鍊搁崯顖炲垂瑜版帗鍋熸い鏍仜鐎氬鈧箍鍎遍幊搴綖閵堝鐓曢柨婵嗗暙婵℃寧绻涢崼鐔风仼缂佽鲸甯為埀顒佺⊕閿氱悮妯肩磽娴e搫顎撶紒杈ㄦ礋楠炲啯绻濋崶褍寮峰銈嗙墬婢规洟鍩€椤掍季鎴犵矚閸楃偐鏀介柛顐犲灮鏁堢紓鍌欑劍濮婂綊鎮疯瑜板﹪鏌f惔銈庢綈闁告繂閰i崺鈧い鎴f硶椤︼箓鏌i敐鍐ㄥ鐎规洘顨婃俊鎼佹晲閸屾矮澹曟繛鎾村焹閸嬫捇鏌e┑鎰珝鐎殿噮鍋婂畷濂告晲閸モ晩鍚嬮梺鑽ゅ仦缁嬫垿鎯夐悡搴樻灁闁硅揪绠戠粈鍌炴煙閹澘袚闁哄棙绋撻埀顒冾潐閹爼宕曢幍顔剧闁跨噦鎷�...

闂備礁鎼崯銊╁磿閹绘帪鑰块柨鐔哄У閺咁剟鏌ㄩ悤鍌涘2025-4-3

缂傚倸鍊搁崯顖炲垂瑜版帗鍋熸い鏍仜閺嬩線鏌eΔ鈧悧鍡欑矈閿曞倸绠归悗娑櫳戠亸顓㈡煟閿濆啫濮傜€规洘顨婃俊姝岊槼闁伙綁浜堕幃浠嬵敍濞戞碍鎲欏銈庡亜濡瑧鎹㈠☉銏℃櫢闁跨噦鎷�...

缂傚倸鍊搁崯顖炲垂瑜版帗鍋熸い鏍仜閺嬩線鏌eΔ鈧悧鍡欑矈閿曞倸绠归悗娑櫳戠亸顓㈡煟閿濆啫濮傜€规洘顨婃俊鎼佸煛閸屾稏鈧啯绻涢幋鐐村碍妞ゆ洦鍘煎玻鍧楀礃閳轰胶绐炲┑顔斤耿绾ǹ岣垮鑸靛仺妞ゆ牗绋撻幗鍐┿亜椤愩垺顥炵紒缁樼⊕閹峰懘鎸婃径濠傗挄闂備焦瀵х粙鎴︽儗娴g儤宕查柡宥冨妿椤╁弶绻涢幋鐐冩岸寮搁崱娑欑厾闁稿繐鎳愰ˇ锔炬喐閻楀牏鍙€闁硅櫕顨婇幐濠冨緞濡儤顔撻梻浣哄帶閸㈡煡鎮洪妸鈺佹辈闁绘梻鍘х粻鍙夈亜閺冨倹娅曟い鈧劦濮婂宕惰濠€鎾煃瑜滈崜銊╁箯閿燂拷...

闂備礁鎼崯銊╁磿閹绘帪鑰块柨鐔哄У閺咁剟鏌ㄩ悤鍌涘2025-4-3

缂傚倸鍊搁崯顖炲垂瑜版帗鍋熸い鏍仜閺嬩線鏌eΔ鈧悧鍡欑矈閿曞倸绠归悗娑櫳戠亸鍨箾閸喎鐏╅柍褜鍓涢幊鎾凰囬鐐茬煑闊洦娲樻刊濂告煙鐟欏嫬濮﹂柛姘e亾闂傚倸鍊搁崑濠囧箯閿燂拷...

缂傚倸鍊搁崯顖炲垂瑜版帗鍋熸い鏍仜閺嬩線鏌eΔ鈧悧鍡欑矈閿曞倸绠归悗娑櫳戠亸顓㈡煟鎺抽崝鎴濈暦閹烘惟鐟滃海寰婄拠宸唵闁割偄妫楀ú銈呪枍閵堝鈷戦柟缁樺笧鍟稿銈傛櫔缁犳捇骞嗛崘顔肩妞ゆ帊鐒﹂宥夋⒑绾拋鍤冮柛锝庡灣濡叉劕鈹戦崶锔剧畾闂佺ǹ鏈划宥夊汲韫囨稒鐓欑痪鎯ь儐閼电懓菐閸パ嶈含妤犵偘绶氶、娑樜熷畡棰佸婵炶揪缍侀弨閬嶅船婢舵劖鐓涢柛鏇ㄥ墯瀹曞嫭銇勯弬鎸庣┛闁靛洦鍔欏鏉懳熷畡棰佸婵炶揪缍侀ˉ鎾绘偡瑜版帗鐓曢柡鍌氭惈婢ф煡鏌¢崱顓熷...

闂備礁鎼崯銊╁磿閹绘帪鑰块柨鐔哄У閺咁剟鏌ㄩ悤鍌涘2025-4-3

缂傚倸鍊搁崯顖炲垂閸ф违濠㈣埖鍔曠粈鍡涙煛閸垺鏆╃紒瀣躬閹粙顢涘顓熷枑闂佽桨闄嶉崐鏇㈩敊韫囨稑唯闁靛鍎辩欢顕€姊洪崨濠勭煀闁哄牜鍓氭穱濠咁樄鐎殿喚鏁婚弫鎾绘晸閿燂拷...

缂傚倸鍊搁崯顖炲垂閸ф违濠㈣埖鍔曠粈鍡涙煛閸垺鏆╃紒瀣攻缁绘盯骞嬪┑鎰﹂悗娈垮枤閸忔ê鐣峰璺虹骇婵炲棛鍋撻埢鍏肩箾閹寸偞鎯勫ù婊呭仱閻涱噣宕卞☉娆忔疅闂佺ǹ鐭夋俊鍥╃矆婢跺⊕褰掓偐椤旂厧濮嶇紓浣诡殔閹冲繒绮欐径瀣闁规鍠氶埥澶嬬箾鐎电ǹ孝妞ゆ垵娲ㄩ崚鎺戔槈濮橆厽娈伴梺鍛婄缚閸庢煡寮宠箛娑欑厽闁靛ǹ鍎遍鈺伱归崗鐓庡鐎规洘顨呴悾锟犳偋閸繍浼呴梻浣烘嚀閻忓牓宕戦幘缁樼厸闁割偒鍋勯悘鑼磼鏉堛劌顥嬮柡渚囧櫍瀹曨偊濡烽敂鑺ヮ吂闁诲骸缍婂ḿ濠氬箯閿燂拷...

闂備礁鎼崯銊╁磿閹绘帪鑰块柨鐔哄У閺咁剟鏌ㄩ悤鍌涘2025-4-2

缂傚倸鍊搁崯顖炲垂瑜版帗鍋熸い鏍ㄧ矋婵ジ鏌熺憴鍕Е闁告埃鍋撻梻浣藉椤銇愰崘顔肩=闁汇垻枪缁犺銇勯幘鍗炵仼閻㈩垱濞婇弻娑樜熼悡搴㈢亖闂佽鍣幏锟�...

缂傚倸鍊搁崯顖炲垂瑜版帗鍋熸い鏍ㄧ矋婵ジ鏌熺憴鍕Е闁告埃鍋撳┑鐐村灦閹尖晠宕㈤幆褉鏋旈柟杈鹃檮閸ゅ矂鏌熺紒妯虹瑨闁稿繐锕弻鐔哄枈閸楃偛绫嶉梺鍛娗滈崐婵嗙暦閵忋倖鍋勯柣鎴灻埀顒傚仦缁绘盯骞嬪┑鎰﹂悗娈垮櫍閺€鍗烆嚗閸曨偒娼╂い鎰剁畱濞堟繈姊洪崫鍕偓鍝ョ礊婵犲倴缂氬ù鐓庣摠閺咁剟鎮橀悙璺盒撻柛濞垮€濋弻锝夋倷閸欏妫ョ紓浣筋嚙缁夊綊骞冩禒瀣╅柕濞у拋鍟囧┑鐐茬摠缁秶绮欓幋鐘虫殰妞ゆ劧闄勯崑鐘绘煕閳╁喚娈旈悹浣瑰絻闇夐柣姗嗗枛閸旀岸鏌涢…鎺撳...

闂備礁鎼崯銊╁磿閹绘帪鑰块柨鐔哄У閺咁剟鏌ㄩ悤鍌涘2025-4-2

网站建设解决方案
缂傚倸鍊搁崯顖炲垂瑜版帗鍋熸い鏍ㄧ矌绾惧ジ鎮楀☉娅亣顣介梺鑽ゅ枑閻熻京寰婃禒瀣獥闁告稒娼欏Λ姗€鎮峰▎蹇擃伌闁衡偓閿燂拷 濠电偞鎸冲Λ鍨渻閹烘梻绠旈柣鏂垮悑閳锋帡鏌曟繝蹇曠暠闁绘挻娲滅槐鎾诲礃閳轰胶浠奸梺缁樼箥閸ㄨ泛顫忛崸妤€骞㈡繛鍡楁禋閸炴椽姊洪崨濠勫闁绘鍋犻。楣冩⒑閸涘﹤濮屾繛鍛礋瀵鎮㈡總澶嬬闂佽法鍣﹂幏锟� 闂備浇袙閸嬫捇鏌曟径鍡樻珕闁轰焦锕㈤弻娑㈠Ω閵夘喖鍓崇紓鍌氱Т椤﹁京鍒掗埡浣叉瀻闁硅鍋呯敮鈥崇暦濮椻偓閹煎綊顢曢敐鍥у箥婵犵鍓濋〃鎰板箯閿燂拷 闂備胶枪缁绘垵危閹烘鐒垫い鎴f硶缁愭梹绻涢崨顓犵伇闁诡喗澹嗘禒锕傛嚃閳哄啯鍤岀紓鍌氬€搁崯顖炲垂瑜版帗鍋熸い鏍ㄥ嚬閸ゅ牆螖閿旂瓔鍎ラ柛鐔烽叄閹嘲鈻庡▎鎴濆煂闂佸摜濮撮幊妯侯嚕椤掑倹鍠嗛柛鏇炵仛閺侊拷 闂備礁鎲¢悧鏇⑩€﹀畡鎵虫瀺鐎光偓閳ь剟骞忛悩宕囩瘈闁告劦鐓堥弳锛勭磽閸屾艾鏆為柛銊ョ秺閹敻顢涘鐓庢畼婵°倧闄勯娆撳疮鎼淬劍鍋℃繛鍡樼懅閸掍即鏌涢悩鍙夊殗鐎殿噮鍓涢幉鎾礋閸偅鏆� 闂備礁缍婂ḿ褔顢栭崱妞绘敠闁逞屽墴閺屸剝鎷呴悷閭︽闂佺粯鐗楃划搴ㄥ箖閹殿喕娌柤娴嬫櫇閹虫繄绱撻崒姘殲闁搞劌缍婇幃鐢割敍濮樼厧娈樻俊銈忛檮椤戞瑩宕惔銊︾厸闁稿本绻嶅ḿ鎰亜椤喗瀚� 濠电姰鍨奸崺鏍偋閻愮儤鐓ラ柕鍫濐槸缁€鍌涖亜閹哄棗浜鹃悗鍨緲閸熸壆妲愰弮鍫濈闁绘﹢娼х拋鏌ユ倵閻愮懓鈧繄绱撳棰濇晩闁哄洨濮甸崰鍡涙煥濠靛棙鍣归柡瀣у亾闂備礁鎼崐浠嬶綖婢舵劑鈧線鏁撻敓锟� 闂傚倷绀佸鍫曞垂婵傚憡鍊甸柧蹇撴贡绾鹃箖鏌熺€电ǹ啸鐟滄媽灏欓埀顒傚仯閸婃繄绱撳棰濇晩闁哄洨濮甸崰鍡涙煥濠靛棙鍣归柡瀣у亾闂備礁鎼崐浠嬶綖婢舵劑鈧線鏁撻敓锟� 闂佽崵鍋炵粙鎴炵附閺冨倻绠旈柣鏃傚帶绾偓闂婎偄娲ゅù椋庣玻濡ゅ啰纾兼い鎰╁劚閸氬湱绱撳鍜佹Ш缂侇喒鏅涢埢搴ょ疀閺囩姴顦╅梺鑽ゅС閻掞箑鐣峰Ο娆炬毎闂備礁鎲¢崝妯衡枍閺囥垹钃熼柣鏂款殠濞存牠鏌ㄩ悤鍌涘 闂備礁鎲$换鈧柤瀹犲煐閺呰泛鈹戦崼姘壕閻熸瑥瀚ョ紓姘辩磽瀹ュ拋妲虹紒杈ㄦ楠炲鎮╅棃娑滎唹闁诲海鍋i崐婵堢磽濮橀鏁婇柡鍥ュ灩濡﹢鎮峰▎蹇擃伌闁衡偓閿燂拷