有哪些将侧边导航玩得特别出彩的网站

   导航的方式多样,今天着重聊聊侧边导航。如何在大小、形式、色彩以及排版方面将导航玩出不一样的姿态,来看高手的作品跟@AnyForWeb_UED 同学细致专业的分析 >>>

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

  一般来说,侧边导航的宽度尺寸控制在内容部分宽度的三分之一左右;

  主要表现形式有抽屉式导航、固定式侧边导航和隐藏式侧边导航等;

  色彩上要与页面整体风格互相协调融合,避免过于亮眼的颜色。虽然导航应该显眼,但通过色彩来实现却不是一个好方法,通过排版、形式、字体等方式同样能达到目的;

  侧边导航的排版布局比较简单,分为左侧导航和右侧导航。一般将导航置于左侧的居多,这样能获得更多的关注度。


  Fine Goods


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

  The Max


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

  CDN77


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

  DHIRAJ


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

  SVN FTP


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

  GEORGINA BOUSIA


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

  212


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

   VIPER


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

  ONYMOLY


  T

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

  ATLANTA


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

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

时间: 2024-11-05 06:26:48

有哪些将侧边导航玩得特别出彩的网站的相关文章

jQuery实现气球弹出框式的侧边导航菜单效果_jquery

本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的气球弹出框式的侧边导航菜单,预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了:当然,在实际使用中,不会出现这样的问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-alt-dlg-left-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUB

百度优化:FLASH导航害苦了我的网站

当初一开始设计网站的时候,就未曾想到,http://www.aliyun.com/zixun/aggregation/12592.html">Flash导航对百度优化有如此大的影响.当时只觉得FLash导航非常美观.事实上,几个月下来,Google收录跟网页数量是相符的,基本上是100%的收录,而百度却一直只收录50多张页面.于是觉得挺奇怪的,觉得网站地图页面(sitemap.html)已经把网站的主栏目及次栏目都列出来了,而且网站地图本身的页面在底部导航中已经存在.而sitemap.ht

玩联盟六大优势带来网站盈利新突破

中介交易 SEO诊断 淘宝客 云主机 技术大厅 玩联盟简介 玩联盟(http://www.wanlianmeng.com)是一个休闲棋牌类的网页游戏联合运营平台.网页游戏(WebGame)是基于Web浏览器的网络多人在线游戏,简单说就是直接用浏览器来玩的游戏,它不用下载客户端,也不需要安装任何插件,任何地方任何时间任何一台能上网的电脑就可以进入游戏.它采取开放API接口模式,为各类网站提供网页游戏产品,满足网站用户的休闲娱乐需求. 玩联盟目前拥有四款受众面广.经典流传的25044.html"&g

在线导航吧浅谈八种网站推广方式

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 做网站推广的动力来源于网站的流量,流量的高低取决于站长的推广方式,而在站长们的使用的众多的推广方法中,几乎都发现推广不同所带来的效果也不同,那么如何使网站推广发挥最大的效益,获取网站稳定的流量呢?接下来由在线导航吧浅谈八种网站推广 一.软文推广 软文推广也是最直接,最有效的推广方式,好的一篇软文想当于2000篇垃圾新闻,同时好的软文经常会被互

20个将导航玩得独一无二的网站

  导航是网站不可或缺的一部分,看惯了一成不变传统的网站导航和今年倍受宠爱的隐藏式汉堡菜单导航,是时候来点不一样的刺激下灵感了.这20个网站不仅都有自己脑洞大开的导航设计 ,整体设计也是创意丰满,一起来点意料之外的惊喜吧. Vincent Tavano ACT Festival ECC Architectural Print Gallery Heat Architecture The Mark Hotel Gloria Cortina Irene Alice + Whittles Beth El

有哪些“说话”特别干脆的网站翘楚?

  电梯测验原指在乘电梯的30秒内,清晰准确地告诉客户解决方案,现在也成了网页设计 的热门技巧,可以迅速吸引网友,让网站信息一目了然.今天我们精选了一组这方面的高手如何运用排版和色彩 >>> Tyler Copeland Jan Cavan Boomerang Blocks A Collective Melbourne Promotions Static Interactive The Infantree Raygun Nudge Coulee Creative Paradox Desi

14个特别走心的网站着陆页设计

  在过去的几年里,精美的登陆页面见证了设计趋势实实在在的转变.不论是iPhone应用.Web应用.服务还是实际产品,在登陆页面设计方面的门槛是节节升高. 我认为在其中很多初创公司发挥了很大作用.在初创公司的世界里,给用户留下第一印象的机会仅此一次,所以如何展示产品至关重要.而为了有效竞争,一些比较大的品牌在这一方面也不得不多走点心,而这一竞争就造就了越来越多精美的营销页面,这些页面能够有效地展示产品.说明产品功能和好处,并鼓动顾客的情怀,让他们产生比较高的期望. 下面我收集了一些我个人比较喜欢

玩转节日祝福让网站流量飞升起来

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 漫漫国庆长假,对于站长来说跟一个平常日子一样.一样推广.一样的优化.但是对于网民来说,国庆长假是一个放松的日子,是一个收祝福的日子,也是一个开心的日子,因为不用再工作了,可以放下心来轻轻松松的度假.那么对于站长来说,这是一个推广网站,引流量的好机会.一般网民假日期间很多人都喜欢上网看小说,看新闻,看自己喜欢的东西,做自己喜欢的事.而且还特喜欢

双12网购擦亮双眼 特别小心“钓鱼网站”

硅谷网综合讯 据武汉晨报报道,买耳机落入钓鱼网站陷阱.网友"末日地平线":年底想买个耳机犒劳下自己,没想到遇到了诈骗网站,还好自己机灵,只损失了500元."双十二"马上就要到了,提醒大家一下,网上购物一定要多个心眼,小心遇到钓鱼网站! 记者谢冰林核实报道:一个月前的淘宝网11・11购物节,支付宝总销售额达到http://www.aliyun.com/zixun/aggregation/37072.html">191亿元,创造了中国零售新纪录,商家赚得