找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2101|回复: 0

[杂谈] 网页设计的导航展现模式

[复制链接]
发表于 2017-4-5 11:24:40 | 显示全部楼层 |阅读模式 来自 河北省石家庄市
  网页设计的时候,页面中都需要导航,可以在顶部,可以在侧边,也可以是隐藏的。网页设计有不同的导航展现模式,常见的、或者是有趣的,都有各自的意义,方便用户到达想要去的页面。下面石家庄网页设计就分享网页设计的7种导航展现模式。
  1、置顶
  将导航置顶平铺,是一种最简单的导航实现方式,易于实现,是当下许多网站“标配”,也是用户很熟悉的导航展现模式。
  2、侧边栏导航
  侧边栏导航的设计多种多样,它可以是静态的也可以是动态的,宽度可大可小,几乎可以随心所欲地进行设置。
  但是如果你仔细审视会发现,它不仅仅是单纯的将原本的顶部导航旋转 90 度放到侧面就好了,对于正常的上下滚动的页面而言,常驻的侧边栏导航意味着整个页面其他部分的长宽比和以往截然不同了。
  所以,不论侧边栏导航的宽窄如何,你都需要重新审视,尤其是它在不同尺寸、比例的屏幕下的显示效果,并且进行合理的重设计。同时,导航中的文字如果太长,在侧边栏中还存在展示上的问题,那么你要怎么解决呢?
  需要考虑的问题非常之多。
  最优的导航设计通常都不会使用太长的词汇,并且占据的空间也相对固定。导航项目最好不要太多,如果导航栏需要滚动浏览那就太过了。
  3、隐藏和弹出式导航
  汉堡图标的流行让隐藏式导航大行其道,而隐藏式的设计所带来的另外一个结果就是弹出式导航,手机网站上运用的比较多。
  在桌面端上,隐藏/弹出式导航很少会占据整个屏幕,而在移动端设备上,为了保证可用性,不少的弹出菜单会选择做成全屏式的。
  隐藏/弹出式导航严格意义上算不上是非常实验性的设计,但是它可以玩的非常多样。对于一部分用户而言,汉堡图标并不是那么直观,也不够熟悉。设计师可以在弹出效果、样式和位置甚至图标样式上,多花点心思,玩出花头。
  在绝大多数的设计师还在使用扁平而简单的弹出样式的时候,他们走的更远。这种设计让用户更容易注意到关键的信息,引导用户浏览信息。
  4、水平滚动
  当你首次浏览一个需要水平滚动的网站的时候,体验会非常的奇怪。首先它的物理和视觉运动方向和常规的纵向滚动不同,而且当你使用鼠标滚轮滚动的时候,这种交互的错位感会极其强烈。
  想要让水平滚动式浏览更加自然,设计师需要加入视觉线索来帮助用户导航,强化浏览逻辑和体验。使用箭头和定位式导航效果会非常不错。
  5、无导航模式
  有些网站摒除了导航这个模块,而是选择将所有的内容平铺在整个页面之上。这种设计其实挺棘手的,因为如何页面所承载的内容过于复杂的话,这种模式可能会让用户觉得无所适从,难以下手。
  无导航模式其实最适合一些小型的、目的直接而简单的网站,就不需要导航。还有一些特定工能的小网站,只需要简单的滚动浏览,几乎不需要太多点击就能完成信息的获取。
  结合简单的动画和动效,这样的无导航的网页也可以非常有趣。不过总的来说,这样的设计会让人觉得缺了点什么。
  6、带标记的单页式设计
  许多优秀的实验性的网页设计都采用单页式设计作为主要载体。而这种选择也是有道理的:用户不会在单页式设计中迷失。
  而与此同时,长单页设计中,用户需要通过不断向下滚动来浏览信息,浏览到什么程度,用需要通过标记、目录和进度条这样的视觉标识来判断,而这本质上和导航的功能异曲同工。
  当你采用这样的设计之时,技巧在于尽量让导航定位快一些,利索的切换能够让整个体验更加令人舒适。
  7、微妙的边缘导航
  和侧边栏导航不同,这种完全旋转 90 度到右侧的文字导航,设计的更加微妙,通常出现在小型的作品展示型的网页上。
  这种风格的导航只会使用文字,并且条目通常会非常少,字体也相对会少。这种导航元素会随着界面、元素的变化而发生改变,甚至在某些界面中会消失。
  和侧边栏式的导航相同,这样的边缘导航也会影响到整个界面比例,不过总体上是很微妙的,这种影响非常小。
  以上就是网页设计的7种导航展现模式,网页设计的时候可以选择普通常见的导航,也可以是一些有趣的导航,让网站展现更加完美。

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-6-2 01:26 , Processed in 0.037846 second(s), 10 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表