技术资讯
网页设计中标签式导航的设计思路
2016-08-03 10:53:41
最近力图数字科技小编出的文章大多是偏向交互、产品的。今天详细讲述关于标签类导航的几个知识点,希望可以帮助大家在工作中更好的运用。有人说导航仅仅就是方便用户操作的小东西而已,没那么神奇。是的,对于小众的产品来说,确实没那么神,因为神你也看不出来。去看看Facebook为什么把抽屉式导航改成标签导航,就知道导航对一个App的影响有多大了。
导航分很多类别,如标签导航、抽屉式导航、九宫格导航、混合组合导航、列表式导航、Tab导航、平铺导航等等。
现在用到更多的导航其实是标签导航,它随处可见,相信目前大部分的App用的导航都是标签形式的。
理清产品框架
相信很多设计师在设计导航时,一上来就开始YY自己的导航要放什么,因为这个时候他已经被标签形式的导航洗脑了,认为自己的App就应该用标签导航。然后继续YY产品的功能,自己理出个最适合的,放上去就好了。
其实不然。做好一个导航要考虑的问题其实非常多,还要考虑产品后期发展的延展性。必须定好整个产品的框架,把最核心的功能放在第一层页面,再根据产品的深度来设计导航的模式。
我们作为交互设计师,需要把握产品的整体架构,这不仅仅是产品经理的工作。所以在前期我们要付出很多努力,才能把一个产品的线框图画好。
标签导航的优劣势
先来看个图:
不要看上面的列表,就看下面的标签。是不是特别熟悉?很多App都是用这类标签式导航来引导用户切换功能。
那它的优势是什么呢?
1.简单高效,操作方便。
下面的四个功能可以快速切换,用户在使用的过程中不会迷失方向,且简单清晰,层级明确。
2.更好的用户体验
试想一下,一般在使用App时,用户更多的会怎么使用手机?双手还是单手呢?肯定都有。所以单手使用手机的用户碰到的App是标签导航时,可以更方便的操作,不需要一定得使用另一只手。而某些导航如果不用两只手是没办法操作的。
3.快速了解App主要功能
一般来说,用户第一次使用产品,会关注这个App有什么功能,它能帮助自己完成什么任务。所以标签导航可以很好地帮助用户了解产品的主要功能,让用户看到的第一眼就知道自己能做什么。
然后再来看看劣势
1.功能不能过多
有些产品功能过多,但是却又都是必要的,不能做删减。而一旦超过五个,就不适合用标签导航。因为标签导航不适合做滑动,所以功能多了可点击区域(热区)就变小了,操作上会有一定影响。
2.占用一定屏幕尺寸
标签导航占用了屏幕下方不少的位置,所以有些App就不适合用标签导航,比如阅读类的App。先不说一屏内少了很多字展示,就说在滑动的时候不小心点到了其他功能是不是很烦?
标签导航的延展
有的人会问,如果我的产品很想用标签导航,但是又超过了5个功能,那有办法解决么?看个图:
知乎
当你的主功能超过5个又一定要使用标签导航的话,那知乎的这个解决方案很适合你(最右边的功能是“更多”)。
还有一类情况是:主功能是标签导航,次要功能也是标签导航。有没有听着很乱?继续看图:
腾讯新闻
主功能是“新闻”,次要功能是顶部的“要闻”、“NBA”等等,如果在某个主功能中,你的次要功能很多,就可以使用这类方式来解决这个问题。还有很多类似的,标签导航能解决不少问题,但是前面说过,一定要注意规划,理清产品框架,不要一上来就随便定个导航形式。
近期更新
- [2023-05-06 10:32:26] 青岛网站建设公司,高端网站定制,一站式网站服务——力图数字科技
- [2023-04-27 13:47:54] 高端定制网站建设——从满足预期到走向卓越
- [2023-04-11 09:17:49] H5页面设计开发——移动端传播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力图数字科技配套网站服务支持
- [2021-05-18 10:14:11] 青岛网站建设的流程
- [2021-04-29 10:14:38] 企业定制化官网建设项目
- [2021-03-05 10:34:45] 移动互联时代房地产行业的微信小程序解决方案
- [2021-01-22 17:29:38] 微信小程序有哪些优势?为什么要开发微信小程序?
- [2021-01-08 17:28:04] 网站建设最容易忽略的人性化设计
- [2020-12-16 16:55:32] 建设一个常规的公司网站建设成本大概是多少?
- [2020-10-28 11:21:27] 关于青岛网站建设的一些看法
延伸阅读
- [2014-10-14 09:49:31] 网页设计中需要掌握的功能以及美化
- [2012-02-19 21:01:54] 网页设计如何传达信息
- [2014-12-31 15:12:14] 教你如何使用摄影来优化网页设计
- [2012-12-23 00:11:11] 交互设计的逻辑关系应用
- [2012-08-21 23:06:54] dede调用自定义字段
- [2011-11-24 21:48:52] 极具创意的网站栏目菜单效果欣赏(42款)
- [2014-01-01 11:14:59] 网站设计的 20%与80%
- [2013-07-14 21:52:03] 网页设计中的图片运用与重要性
- [2014-12-01 09:19:17] 网页设计的关键所在
- [2012-11-20 19:53:15] DEDE调用当前栏目链接
- [2009-04-19 08:40:00] 交互设计方法论 2.0探讨
- [2012-06-18 14:21:28] 青岛网站设计如何突出网页核心内容