用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字

小蜜锋    -  云代码空间

—— 技术宅拯救世界!

导航条设计那些事儿

2013-06-25|1584阅||

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

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

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

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

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

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

导航条设计那些事儿

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

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

导航条设计那些事儿

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

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

导航条设计那些事儿

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

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

导航条设计那些事儿

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

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

转自:w3cfuns

顶 3踩 0收藏
文章评论
    发表评论

    个人资料

    • 昵称: 小蜜锋
    • 等级: 高级设计师
    • 积分: 7088
    • 代码: 757 个
    • 文章: 360 篇
    • 随想: 211 条
    • 访问: 1261 次
    • 关注

    标签

    设计模式(4)java(9)命名规范(2)广告创意(1)愤怒的小鸟(1)游戏(5)jsp(1)配置(1)Surface(1)windows(1)javabean(1)设计方法(1)开发工具(2)web(4)大数据(2)GPU(1)硬盘(1)内部结构(1)黑客(1)窃取(1)编码(1)解决方法(1)php(28)mysql(9)数据库备份(1)数据库还原(1)命令(2)数据库(1)安装(1)2012(2)世界末日(3)仙剑5前传(1)默哀(1)电源(1)女生(1)装饰器模式(2)古剑奇谭(1)电脑桌(1)史上最牛(1)编程语言(2)小米(3)电视机顶盒(1)营销策略(1)Android(8)手势(1)诺亚方舟(1)Eclipse(1)汽车(1)操作系统(1)软件(1)互联网(5)大事记(1)设计师(2)壁纸(1)古剑奇谭2(1)古剑奇谭网络版(1)云计算(2)服务器(1)框架(2)Socket(1)jquery(1)构造函数执行顺序(1)火车票(1)3D(1)数据中心(2)正则表达式(2)Web前端(1)开发框架(1)系统瘫痪(1)12306(2)cpu(1)javascript(2)开发日记(15)体育馆管理系统(15)网页设计(1)CSS3(3)腾讯(3)小游戏(1)interface(1)平板(2)面试(2)设计(5)摄影(2)数据挖掘(1)钢琴谱(1)情人节(1)陈欧体(1)程序员(3)漫画(1)UserAgent(1)iPhone(2)NoSQL(1)ui(9)越狱(1)指南(1)abstract(1)css(3)git(2)八核(2)三星(1)linux(11)数据类型(1)html5(2)UML(2)perftools(1)创意(1)logo(1)色谱(1)响应式(5)Metro(2)虚拟机(1)jvm(1)垃圾回收(1)left(1)join(1)连接查询(1)溯源系统(1)Override(1)SAE(2)WordPress(1)指针(1)链表(1)系统分析师(1)中间件(1)corba(1)static(1)无线(1)监控(1)iPad(1)Apache(2)比特币(2)命名规则(1)手机支付(1)curl(3)笔记(1)导航(1)thinkphp(1)异常导致本地路径泄漏(1)web设计(1)网络安全(1)诗句(1)4K对齐(1)代码库(1)色彩(1)动画片(1)struts2(3)漏洞(5)确认框(1)心情驿站(1)ArscEditor(1)resources.(1)apktool(1)AppKey(1)新浪微博(1)app(5)广告(3)赚钱(1)响应式布局(1)html(1)淘宝(2)微信(1)重构(5)缓存(1)破解(1)后门(1)七夕(1)SEO(2)概念设计(1)面向对象(1)bootstrap(1)性能(2)优化(1)iis(1)爬虫(1)采集(1)算法(2)文本相似度(2)cto(1)js(1)fsockopen(1)扁平化设计(2)网页(1)心情(7)小米电视(1)开箱(1)励志(2)招聘(3)命名(1)notepad++(1)python(1)配色(3)扁平化(4)ps(2)搞笑(2)创业(3)渲染(1)电影(1)模板(1)微博(1)企业家(1)公司(1)总结(1)前端(1)运营(1)变形(1)svn(4)教程(3)搜狗(1)泄密(1)双11(1)天猫(1)UC(1)启动界面(1)光棍节(1)双十一(2)物流(1)备份(1)更新(1)插入(1)插件(2)jsTree(1)(1)海量数据(1)分辨率(1)草图(1)手绘(1)速度(1)文本处理(1)实习(1)感想(1)文件(1)简历(1)65.49.2.17(1)yum(1)解决办法(1)阿里云(2)推广(1)来往(1)春运(1)LBS(1)gb2312(1)utf-8(1)log4j(1)详解(1)收购(1)私服(1)TortoiseGi(1)post(1)异常(2)flappyBird(1)应用创新大赛(1)宙斯杯(1)学习方法(1)xp(1)退役(1)安全(1)技术贴(1)flash(1)刷机(1)京东(1)电商(1)Tomcat(1)JDK(1)免费(1)长投影(1)图标(1)Photoshop(1)云端集成开发环境(1)软件开发(1)可视化(1)工具(2)OpenSSL(1)Heartbleed(1)vsftp(1)中国知网(1)学术论文(1)免费下载(1)开发(1)手册(1)速查表(1)追随战略(1)sdk(1)文章(1)发布(1)文件管理(1)沙画(1)动效(2)原型(1)感悟人生(1)哲理(1)Bash(1)类图(1)知识管理(1)Console(1)调试命令(1)rpm(1)报错(1)挂载(1)数据盘(1)云主机(1)产品经理(1)原型设计(1)mql4(1)mt4(1)ea(1)程序化交易(1)CURLOPT_PO(1)阿里云​(1)CentOS6(2)OpenSSH(1)漏洞修复(2)升级(1)安骑士(1)链克(1)

    站长推荐