首页 » 服务支持 » 知识讲堂 » 这5种成熟的导航设计模式,可以为用户体验加分

这5种成熟的导航设计模式,可以为用户体验加分

摘要:导航设计千变万化,但是能够同时兼顾到可用性、易用性还能够带来足够舒适体验的导航模式,就不是那么多了。可靠的导航设计需要帮助用户达成目标,找到内容,提升页面的转化率。设计不合理的导航对于用户体验是灾难性的,最直接的影响,是用户不再能足够快捷方便的找到想要的页面和内容,间接地影响了网站的转化率和用户的留存率。

导航设计千变万化,但是能够同时兼顾到可用性、易用性还能够带来足够舒适体验的导航模式,就不是那么多了。可靠的导航设计需要帮助用户达成目标,找到内容,提升页面的转化率。设计不合理的导航对于用户体验是灾难性的,最直接的影响,是用户不再能足够快捷方便的找到想要的页面和内容,间接地影响了网站的转化率和用户的留存率。

而易用性良好的UI界面很大程度上是从设计优良的导航开始的。导航是用户从A点走向B点的重要指引,设计师在设计过程中不仅要确保这个路标足够清晰,而且要让导航的过程足够顺滑、流畅。在整个设计流程中,导航设计应该占据有一定的优先级,因为它不仅仅在整个网页的信息架构中占据着近乎骨架的作用,而且在整个体验设计中也扮演着重要的角色。在原型设计阶段,导航的设计应该就已经打磨清晰,并且集中了所需的设计素材,确保开发伊始便能搞定导航。

在诸多导航设计当中,有一些优秀的设计模式已经经过反复的设计验证,今天的文中就挑选出其中最突出的 5 种,供你参考。

1、带有流畅动效的下拉导航菜单



下代菜单是UI设计中最常见的设计元素,作为一种扩展性良好的控件,它在被触发之后扩展显示更多的选项,呈现更多的内容。下拉菜单有许多种不同的衍生样式,在导航设计中也很常见。许多传统的导航当中,导航元素的下拉菜单是需要点击触发的,而现在更多的设计师会选择光标悬浮在导航元素上的时候触发,这样对于用户会更加省心省力。

为了确保导航的整洁清晰,如今网页的主要导航类目通常不会太多,控制在4~ 6 个选项,而下拉菜单则用来承载二级导航元素,这样就节省了空间,也让信息层级更加清晰。

这种设计模式对于用户而言并不陌生,浏览起来也颇为方便,对于多层级、大量选项的导航需求而言,它正好可以应对。值得注意的是,光标悬浮触发下拉菜单的时候,展现的动效要足够的微妙,降低用户打开的突兀感,这样会让体验更加优秀。

2、汉堡菜单+侧边栏



汉堡菜单加上弹出式的侧边栏在iOS和 Android 平台上都是极为常见的导航设计模式。虽然有数据表明,汉堡菜单和默认隐藏的侧边栏导航在打开率上并不如常见的显性导航,但是它在体验上有独特的优势,让整个界面更加简约、整洁,干扰性更小。用户点击汉堡菜单,侧边栏导航从侧面滑出显示,用户可选择他们想要点击的选项。

汉堡菜单和侧边栏的搭配特别适用于响应式的网页设计,例如Android 平台的 Gmail 官方应用,YouTube 和 Facebook,均是沿用了这样的设计。

隐藏式的侧边栏导航,在很大程度上让用户更加专注于主要的界面内容,让界面更加整洁。虽然打开率不如显性导航,但是在很多情况下,这种隐藏性的设计更符合实际需求。

3、悬浮固定网页导航菜单



悬浮固定的导航菜单在越来越多的网页设计中出现,当用户在滚动页面向下浏览的时候,悬浮固定导航在页面顶部悬浮不动,随着用户浏览,它们一直都可见,用户无需滚动到顶部就可以点击导航跳转。

目前,悬浮固定导航菜单已经成为常见的导航设计手法,电商、产品类的网站,多会选择这样的导航设计,便于用户快速跳转。这种导航设计的优势在于快速、便捷,用户对于在网站不同的页面间跳转的需求比较大,那么这样的设计能够省去很多麻烦。根据 Akamai 和 Gomez.com 的调研,79%的线上购物的用户,在遭遇糟糕的浏览和导航体验之后,会一去不复返,由此可见,便捷的导航是多么重要。

4、深度定制的超大导航菜单



此处我们所说的深度定制的超大导航菜单,更接近选项卡的设计,它们大多分为 2 个层级,不同的选项被组织到不同的选项卡当中,选项卡中所承载的导航选项相比于下拉菜单更大,设计也更加视觉化,更易于点击选取。有的选项当中甚至会包含文本和说明,便于用户进行选择。

这种超大导航菜单当中的子选项的尺寸足够大,视觉化设计也足够突出,可见性极强,用户很难选错。

超大导航菜单所能容纳的导航条目相对更多、更加视觉化,和开头所说的下拉菜单导航类似,光标悬浮在标签页上的时候,自动显示下面的选项。根据 NNGroup 的研究,这类导航当中,导航菜单越大,越受欢迎。

这种导航菜单适合对可访问性要求高的网页,对于有视力障碍和进阶用户都更为友好。另外一方面,这种导航还为设计师提供了更多发挥的空间。

5、响应式卡片栅格导航



响应式的设计就不必赘述,但是卡片栅格式的导航无疑是从移动端开始流行的导航模式。在这里,导航选项被设计成为小卡片,置于导航栏的栅格当中,当屏幕尺寸发生改变的时候,导航中的小卡片会随着自适应的栅格而重新排列,以匹配整个布局。这种设计不仅高度可视化,而且可以根据主题风格,进行深度的定制。

这种导航当中,各个选项不仅便于光标点击,而且在移动端上,更加适合手指点击,可以说是跨平台响应式设计的。许多网站目前都采用了这样的导航设计,比如 Pinterest 和著名的音乐服务 Spotify。


 

 

以上 【这5种成熟的导航设计模式,可以为用户体验加分】的内容由欣创网络( https://www.xcwl.com)收集整理,本文网址 : https://www.xcwl.com/news/ddwaj5ab5.html ,转载请注明出处,如有侵权,联系删除!

更多有关汉中网站建设汉中网站设计汉中网站制作汉中做网站公司微信公众平台开发电商平台建设 等互联网应用服务都可以联系我们。网站建设热线: 0916-2233667/手机:18700660007(朱先生)

    2019-04-04 4107 1

    2017-10-23 8370 1

    汉中万泽工贸公司一直致力于建筑智能化工程、社区智能弱电工程、信息集成工程、舞台灯光音响工程、公共广播工程、远程会议工程、安防监控工程、智能停车场管理工程、智能综合布线、办公设备销售等工程项。公司集项目开发、设计、施工、维护为一体,经营代理众多知名建筑智能化产品,是该领域一家技术领先、实力雄厚的专业级系统集成商。

    2017-10-17 8530 1

    黑滩子生态农场位于勉县勉县黑滩子村,农场秉承古法种养,专注生态食材的理念,农场分为有机种植、养殖示范园及生态养殖、种植示范园。

    2017-11-20 8942 1

    汉中市汉台区妇女联合会是区委领导的群众团体,负责宣传男女平等基本国策、维护妇女儿童合法权益、引领城乡妇女发展和未成年人思想道德建设等工作。机关内设办公室、城乡工作部。

    2017-11-18 8734 1

    汉中新三环变压器有限公司是以生产电压等级为10KV、35KV级,容量为10~40000KVA及以下各类、型号的电力变压器、整流变压器、电炉变压器、电抗器、非晶合金变压器、有载调压自耦变压器、干式变压器、组合式箱式变电站等专业分公司。公司具有丰富的设计制造经验和完善的测试手段,生产设备先进、技术力量雄厚。

    2014-05-14 42020 1

    汉中市鑫兴菌业有限公司位于陕西省汉中市西乡县沙河镇,公司从事食用菌菌种生产有三十余年的专业厂家,菌种选育,优良品种引进筛选,高新技术推广为一体的专业菌种生产厂家。菌种生产设备齐全,生产厂区规范整洁,生产经验丰富,生产厂房占地2亩,栽培基地50余亩,所生产的菌种从原材料——制种每个环节均按照菌种规范化生产,年产各类菌种50余万袋(瓶)。公司常年为客户提供“天麻蜜环菌、萌发菌、黑木耳、香菇等优质菌种”。

    2015-01-31 38618 1

    中心将电话热线、网络平台和智能终端结合,利用物联网技术,为老人量身定制了七大系统:紧急援助系统、主动关爱系统、居家养老服务系统、健康档案系统、康复护理系统、电子商务系统和费用结算系统,利用物联网技术打造智能化、数字化、虚拟化新型社区,力求为社区居民及老人提供全天候、全方位、一站式的优质服务。

    2014-08-15 36533 1

    汉中安邦气瓶安装、检测有限公司是汉中市专业进行气瓶安装、检测的合法企业,其中气瓶检验是汉中地区 唯一一家具有检验资质的企业。

    2014-06-30 34766 1

    王建刚——国家特一级厨师,国际饭店烹饪协会会员,老子饮食文化研究会会员,陕西省汉中市执行会长。20年厨龄,十余年厨师长,三年行政总厨工作经验,对川菜、湘菜、官府菜、江湖菜、海鲜、火锅、干锅、特色小吃(成都、重庆)、及地方陕菜有一定研究。 在各大城市(北京、郑州、成都、重庆、许昌、新乡、林州、江苏、益阳、汉中)多家知名大酒店任职过,有自己专业的团队,厨政管理、成本控制、营销等经验丰富,承包各类酒店酒楼厨房。

    2014-08-16 34417 1

    陕西东鼎投资管理有限公司是经陕西省政府批准,并经省工商管理局核准成立的专业投资管理公司。我公司与银行及其它多家金融机构建立有长期的战略合作伙伴关系,公司注册资金为人民币2000万元。