网页导航设计技巧:尽情拓展设计创意和思维的导航设计

文章描述:导航一般位于网页的中上部分,也是视觉中心的区域内。在保持其合理的功能作用的同时,一个好的导航设计,往往 能够成为整个网页设计的点睛之笔!

导航是网页设计中不可缺少的部分,它是网站访问者获取所需内容的快速通道和途径。导航让网站的层次结构以一种有条理的方式清晰展示,并引导用户毫不 费力地找到并管理信息,达到有效传递。同时,导航一般位于网页的中上部分,也是视觉中心的区域内。在保持其合理的功能作用的同时,一个好的导航设计,往往 能够成为整个网页设计的点睛之笔!

一个设计师在布局和整体规划网页设计时,导航总是一个重要的元素。我们会思考,导航以什么形式呈现?是否能够最大程度地发挥其梳理网站结构、有效传 递信息的功能?是否能够烘托和配合整个页面的设计风格?是否能够别出心裁润色和体现该网站的特点又不影响其功能性?是否能够精益求精成为整个网页设计至关 重要的一笔?那么,就让我们一起分享和浅析一下一些让设计师们花费心思精雕细琢的导航设计吧。

导航的设计会根据网站的基本类别、属性和各自特点而有所定位。在这里,我挑选了一些非系统、门户等类型,有明确特点、用户定位、产品及品牌特色的品 牌类、专题类网站。对于这些网站来说,导航的设计将突破我们常见的横向长条导航或者竖式导航,会更加有意味、趣味和玩味,是能让设计师们尽情拓展设计创意 和思维的“有点儿意思”的导航设计!

A. 材质类,给导航加点材质!

材质类的导航,是润色导航、增加导航意味最常用的设计方法。在有特殊定向和用户指向的网站设计里是广被设计师们使用的手法。这种快速、简单、效果直 接的设计方式,能够迅速将产品的特性和设计师的巧思呈现出来。并且材质类的导航设计往往都可以不必打破导航的基本形态,能够很好的保持导航的功能性,页面 排版的整齐感。因此可以在固定的网页原型的结构和位置上,灵活地表达产品的特性。设计师们可以随心所欲雕琢内部的材质,从而打造不一样的意味导航,成为整 个页面的小小亮点。

B. 拟物类,让导航不仅仅是导航!

如何让一个页面看起来如身临其境融入了该网站产品的世界?那么就要让用户的视觉体验真实地感受到该产品特性的存在。这个 时候,一个普通呆板的导航,远远不能满足页面的设计需要。即使产品图片再诱人,一个毫不融入氛围的冷冰冰的导航,在页面上不仅让人失望更加破坏了应该有的 气氛。所以,越来越多的设计,让导航成为了烘托、增强网页及产品氛围的振奋一笔!拟物类的导航,就像变色龙,在不同定位的网页设计中,捕捉和适应环境的特 点,从而化身为环境的一部分。拟物类的导航,可以是抽屉,可以是布条、可以是树木,可以是任何你能想到和创意出来的东西!打破一切既定的规则,不必一定要 是长条四方,不必一定要是整齐划一的排版,拟物类的导航可以将设计师的能动性发挥到极点!这样的导航设计,在整个网页中可以达到另外一层的功能性,那就是 辅助提升产品给用户的强大视觉认知度,还未见其产品的详细信息,你就能提前感受到它是干什么的,有什么样的风格,有什么样的追求。让导航不仅仅只是导航!

C. 形态类,换个形状设计导航!

若问到导航是什么样的,大多数人都会立刻浮现出几种基本的形状和样式,顶部的横栏、侧边的竖栏。即便是高矮胖瘦、颜色各 异、材质各异,大多数的导航都不会跨出基本的界限。那么导航是不是一定要遵守形状这个“规矩”呢?答案肯定是否认的。用户虽然习惯了导航的“规矩性”,但 是另类形态的导航设计却无疑给了用户们一个新的视角,原来导航也可以“没规没距”!那么是否可以随意改变导航的形态设计呢,答案也是否定的,设计师们始终 都要记住导航的根本属性和用途,让导航始终都不能脱离它在页面设计中的核心作用。如果你是一个大胆的设计师,又有新颖的设计理念和产品诉求,那么不妨尝试 做一次大地调整,换个形状设计导航!

D. 融合类,“和谐共进”的导航设计!

有雷厉风行抢风头的导航哥,也会有为人低调注重和谐的导航们。在某些网页设计中,需求的导向性会要求将导航一定程度的削 弱,从而来突出产品的主体内容。那么对于这部分的导航设计,设计师们该如何取舍呢?是简单地罗列文字?还是将导航舍弃在边角的位置?如何才能使得被削弱的 导航仍然不失设计感,甚至能够辅助主体内容的突显?这个时候,对导航的处理和设计就能更加体现出一个设计师对宏观大局的把控,以及对细节局部的掌控,让局 部服从整体,但又不是粗糙对待,反而精致得恰到好处!削弱并不是不需要设计,和谐并不是隐藏和消失。很多优秀的设计作品,在处理这类情况时,通常将导航和 网页主体背景进行关联性的融合。从色彩的恰接、风格感受、背景图片的关联、线框等多方面都可以进行处理和设计。让导航自然地呈现,仿佛为主体的一部分,又 退而求其次,把更多的视觉焦点留给了主体内容。从而完美地保持其功能性,又能与整体页面“和谐共进”!

E. 延展类,导航设计的更多可能性!

设计是在不断进步的,随着用户体验的提高、用户认知度的拓展、产品需求的多样性、设计师理念的不断探索和更新,我们相信,导航设计将存在更多的可能性!也许下一个新的设计形式就诞生在你我之间!越来越多关于导航设计的研究和探索,将会给用户带来全新的视觉和使用体验!

时间: 2024-12-14 14:08:17

网页导航设计技巧:尽情拓展设计创意和思维的导航设计的相关文章

网页设计技巧:能影响观众的网站首页设计

我想你应该知道网站主页对整个网站的来说是非常重要的,哪么我们如果让它能吸引你的观众(访问用户)?这就取决于你的设计了,网站首页一般包含:导 航菜单.搜索栏.网站LOGO.目录以及其它内容,还有就是能一眼看到你网站就知道这是做什么的.我们除了让首页设计得有吸引力外,还得使它有其它功能或 是一些引导性信息.下面我们将告诉你能影响观众的网站首页设计的10个要点. 1. 让它能吸引访客 摘自: Art 4 Web 首先,网站首页就像是一本书的封面或是杂志封面,它是用户浏览网站时第一眼看到的,因此,你的首

网站设计技巧:WEBJX收集国外漂亮的contact页面设计

文章描述:在设计网站的时候,我们需要考虑到各个方面,从页眉到脚,从着陆页(landing page)到关于页(about us page),还有联系页面(contact page)都要考虑.联系页面是网站重要的组成部分之一,访客通过联系表单和网站所有者取得联系,反馈信息.新颖的网页表单设计能吸引 在设计网站的时候,我们需要考虑到各个方面,从页眉到脚,从着陆页(landing page)到关于页(about us page),还有联系页面(contact page)都要考虑.联系页面是网站重要的组

网页导航设计技巧:图标导航设计趋势

文章描述:不知不觉的,很多网页设计中采用了图标式导航(Navigation)--一般使用三道杠作为图标,用以导航. 不知不觉的,很多网页设计中采用了图标式导航(Navigation)--一般使用三道杠作为图标,用以导航.这种导航的好处是节省空间,让界面更简洁. 图标式导航的案例 这是YouTube 的图标式导航(移动版): 这是Squarespace的图标式导航: AWARD的图标式导航不拘一格: 问题所在 问题在于,点击图标式导航之后,图标本身没有任何变化.也就是说:操作缺乏反馈. 按钮的状态

网页设计技巧总结:导航栏设计的三大要点

文章描述:在网页中设计导航菜单的三个原则(附案例). 导航菜单可能是网页设计中最重要的部分了.每个用户浏览网站时一定有所需,因此导航菜单能够帮助用户寻找信息.好的导航菜单像是导游,告诉用户网站是干什么的,内容分类有哪些,在哪里可以找到什么信息. 而且导航栏也是整体布局的重要组成. 总结一下,导航栏的重要性. 1. 浏览完Logo后,导航栏是用户第一个看到的组件.2. 导航栏的作用是引导用户.3. 导航栏的作用也类似于索引,快速帮助用户找到所需信息. 想让导航栏更加优雅.美丽.响应式么?看看导航栏

网站设计技巧:质感的网页导航设计

网页制作Webjx文章简介:一直都有朋友在问质感方面的问题,很多朋友也一直希望记忆能做一期质感方面的教程,但是由于一直很忙,所以到今天才简单为大家带来一期质感方面的教程! 一直都有朋友在问质感方面的问题,很多朋友也一直希望记忆能做一期质感方面的教程,但是由于一直很忙,所以到今天才简单为大家带来一期质感方面的教程! 首先来看一个标准的导航质感如何展现吧! 导航在网站设计中占有举足轻重的地位,导航是整个站点中(特别是门户站)视觉的焦点和中心,其影响力仅次于Banner!导航的成败直接影响了整个站点的

网页中照片预览导航设计技巧

导航并不只是指常位于网站头部的导航条,路边的指示牌.商场的指示牌等等都是一种导航,可以说导航在生活中无处不在,如果没有这些导航存在,那么我们将迷失,迷失在互联网信息的海洋中,迷失在纵横交错的马路上,迷失在琳琅满目的商品货架之间. 在所谓的WEB2.0风潮疯狂的从国外吹入国内的时候,国外一些成功网站的成功模式也疯狂的吹入到国内的模仿者的眼前.目前在国内关于网络相册方面或者时尚一点是说关于WEB2.0网络相册方面做得比较好的应该算是yupoo了,同时它也是国内模仿flickr模式最像的最成功的--事

你知道这些css网页设计技巧吗

css|技巧|设计|网页|网页设计 本翻译并未得到作者或网站授权.一切权利都归原作者及原网站所有.如果你得到原作者或原发表网站的授权,可以自由使用本翻译. 1.CSS字体属性简写规则 一般用CSS设定字体属性是这样做的: font-weight:bold;font-style:italic;font-varient:small-caps;font-size:1em;line-height:1.5em;font-family:verdana,sans-serif; 但也可以把它们全部写到一行上去:

网页设计技巧:特殊人群的设计关怀

文章描述:网页设计技巧:特殊人群的设计关怀.   2010年12月,Thomas应邀参加中国交互设计体验日大会,展开了一次主题为<特殊人群的设计关怀>的演讲.演讲主要介绍了在做产品设计时,公司对于特殊群体的一些考虑.以下是对这次演讲的现场记录: "盲人对QQ的依赖度非常高." 在正式演讲之前,想请大家看一段视频.大家可以看出这是个怎样的用户吗?是的,这是一位盲人.可能很多人会吃惊,盲人怎么可以使用QQ?其实盲人不光使用QQ,他们正在利用互联网的很多服务充实自己的生活.我们关

浅谈网页设计技巧

  首先我们需要了解一下网站的页面组成,网站一般包括以下几部分: 首页:网站的门面,如同公司的形象,特别注重设计和规划. 框架页:网站的主要结构页面,又称次首页.内页,大型网站往往框架页即首页,如一些门户网站.框架页主要是网站内部主要栏目的首页,讲究风格的一致性,并于主页呼应. 普通页:网站主要的承载信息的页面,设计要求不高,但要求链接准确.文字无误.图文并茂,并沿袭网页的风格. 弹出页:一般用于广告.新闻.消息.到其他网站的链接等等,一般用的很少. 通过上面的分析,我们可以看出: 从功能上来看