稍微用点心,你的导航就会与众不同!

导航在网站设计中的重要性已经毋庸置疑,但重要不意味着它必须高调,安静与显眼兼具的导航才最符合用户的使用体验,而侧边导航恰巧同时满足了这两点。网站侧边导航的好坏与否很容易判断,主要取决于它的大小、形式、色彩和排版。

一般来说,侧边导航的宽度尺寸控制在内容部分宽度的三分之一左右;主要表现形式有抽屉式导航、固定式侧边导航和隐藏式侧边导航等;色彩上要与页面整体风格互相协调融合,避免过于亮眼的颜色。虽然导航应该显眼,但通过色彩来实现却不是一个好方法,通过排版、形式、字体等方式同样能达到目的;侧边导航的排版布局比较简单,分为左侧导航和右侧导航。一般将导航置于左侧的居多,这样能获得更多的关注度。

1.逼真的拟物化设计加上木质纹理背景,案例网站中的侧边导航应用变得格外应景。导航与网页整体设计风格很融合,同时用纹理的细微变化以示区别,不仅让用户获得视觉上的舒适感,也让导航更加与众不同。

2.这个案例中体现的是导航设计中的惯用手法,使用与背景色反差较大的颜色来点缀页面中的重要元素,同时起到提亮导航的作用。由于背景色选择了深沉的闷黑色,所以导航的颜色也选用了同色系的黑色,但相对亮一些,整体效果既不唐突,也能很快速、自然的吸引用户视线。

3.这个是一个比较单一的网站配色,导航设计的比较随性,所以让整体效果神秘中带着休闲。设计师将网页打造成少线框的体验,让页面更加自由而无拘束,同时突出了右上角“LOGIN”幽灵按钮的设计,引导用户登录点击。

4.这个网站没有遵循导航尺寸介于内容三分之一到二分之一大小的规律,因此视觉上会让用户造成内容部分有些压抑的感觉。但这个案例中的某些细节很值得我们借鉴,比如内容板块顶部的自然阴影设计;大标题中的水印字样等,这些元素都令网站看起来更加自然亲切,拉近了网站与用户之间的距离感。

5.纯手绘风格的网页设计可能会让网站显得太过童真,而下面的案例却表现出了手绘风格的另一种形态。设计师没有将网站中的文字都设置成手写涂鸦的状态,因此网站的用户体验并没有因为风格的原因受到任何影响。尤其导航部分,与底色同色系的浅灰色底纹将导航和背景很好的区分开来,视觉流畅不违和。

6.Georgina Bousia的网站很直观的给用户一种清新平静的感觉。干净简单的导航也能为网站带来高端大气的感觉,但也不可否认设计师在其中花了很多小心思。内容大图上有轻微的半透明几何阴影效果,让图片中的风景多了一些阳光洒落的设计感。

7.网站导航也能设计出一种场景交错的感觉。内容部分的某一环节与导航自然衔接,黑色的使用不仅没有显得乏味单调,反而制造出了一种独特的复古时尚感。两者之间的垂直视差效果更利于吸引用户。

8.这是一个很特别的网站导航设计,设计师用下拉的形状侧面体现了导航的简易性和适用性。导航在网站整体中表现得比较隐蔽,更像是一个页面中的补充设计。

9.TONYMOLY的网站导航采用了双层设计,再加以简单的图标设计,这样的好处是让用户更清晰的查看到网站的内容分类。色彩上,设计师使用了中性的黑白搭配,将对主内容区域的视觉影响降到最低。

10.如果你觉得网站导航只是静静的安置在页面侧边看起来太正统的话不妨试试下面这个案例的做法。设计师在导航周围添加了丝带效果,让页面看起来瞬间充满活力。

有时候,只需要一些别出心裁的小效果就能让导航变得与众不同。但基于导航对整个网站的重要性,舒适的用户体验与美观度之间的取舍需要设计师仔细考量。

原文地址:艾艺信息

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,383评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,522评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,852评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,621评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,741评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,929评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,076评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,803评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,265评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,582评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,716评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,395评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,039评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,027评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,488评论 2 361
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,612评论 2 350

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,837评论 25 707
  • 下面的原则对于有效的用户界面的设计和实现都是最基本的,不管是针对传统的图形用户界面还是针对任意的可联网的智能电子设...
    arlene112阅读 2,291评论 0 16
  • 周末参加了考试,不管结果如何,总算事情告一段落了,心里顿觉轻松了不少。从报名到培训再到考试,这一路也收获很多,借...
    采采二小乙阅读 207评论 0 1
  • 加莱有一顶非常漂亮的绒线帽,帽子上面有一个五彩的毛线做的毛茸茸的小毛球,加莱戴着帽子的时候,小毛球就在她的头顶上晃...
    山野林间阅读 249评论 0 1
  • 夏天入手了两批多肉,七八月份的时候死了一批,到九月搬了新家就剩四颗活了下来。 九月初,怀孕八个月了,...
    晚春阅读 310评论 0 0