您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

标签式导航的设计思路

原创文章 分类: 经验/观点 版权:
17994 147 189 17
更新于:2016-09-08
0.0
首页推荐

最近发现一个问题:就是现在文章太多了,很多人看过之后其实就忘了,或者收藏起来根本没看的(当然不包括那些特别认真的,比如我)。很少人会去做笔记,做总结,做规划。

针对这个现象,我打算以后的文章内容做到尽可能的少,以及尽可能的精。让大家看完之后就能学到一点东西,而不是看一眼就想收藏(以后基本就不会打开了,又比如我)。


正文

上面说过,现在文章太多,基本上都不深入,只是点到某个知识,跟大家说个理论的东西,然后罗列出所有导航的形式,每个形式都用几十个字概括下。读者看了之后跟没看是一样的,遇到问题还是没法解决,只知道有这类导航存在而已。


有人说导航仅仅就是方便用户操作的小东西而已,没那么神奇。是的,对于小众的产品来说,确实没那么神,因为神你也看不出来。去看看Facebook为什么把抽屉式导航改成标签导航,就知道导航对一个App的影响有多大了。


导航分很多类别,如标签导航、抽屉式导航、九宫格导航、混合组合导航、列表式导航、Tab导航、平铺导航等等。之前在我的读书笔记中也有提到过三类导航:平铺类、标签类、列表类。


现在用到更多的导航其实是标签导航,它随处可见,相信目前大部分的App用的导航都是标签形式的。所以,是不是知道今天要说啥了?嗯,就是标签导航。


理清产品框架

相信很多设计师在设计导航时,一上来就开始YY自己的导航要放什么,因为这个时候他已经被标签形式的导航洗脑了,认为自己的App就应该用标签导航。然后继续YY产品的功能,自己理出个最适合的,放上去就好了。


其实不然。做好一个导航要考虑的问题其实非常多,还要考虑产品后期发展的延展性。必须定好整个产品的框架,把最核心的功能放在第一层页面,再根据产品的深度来设计导航的模式。


我们作为交互设计师,需要把握产品的整体架构,这不仅仅是产品经理的工作。所以在前期我们要付出很多努力,才能把一个产品的线框图画好。


标签导航的优劣势

先来看个图:

Image title

(路人:又特么是微信,呆总敢不敢来个新花样!!!)

不要看上面的列表,就看下面的标签。是不是特别熟悉?很多App都是用这类标签式导航来引导用户切换功能。


那它的优势是什么呢?


1.简单高效,操作方便。

下面的四个功能可以快速切换,用户在使用的过程中不会迷失方向,且简单清晰,层级明确。


2.更好的用户体验

试想一下,一般在使用App时,用户更多的会怎么使用手机?双手还是单手呢?肯定都有。所以单手使用手机的用户碰到的App是标签导航时,可以更方便的操作,不需要一定得使用另一只手。而某些导航如果不用两只手是没办法操作的。


3.快速了解App主要功能

一般来说,用户第一次使用产品,会关注这个App有什么功能,它能帮助自己完成什么任务。所以标签导航可以很好地帮助用户了解产品的主要功能,让用户看到的第一眼就知道自己能做什么。


然后再来看看劣势:


1.功能不能过多

有些产品功能过多,但是却又都是必要的,不能做删减。而一旦超过五个,就不适合用标签导航。因为标签导航不适合做滑动,所以功能多了可点击区域(热区)就变小了,操作上会有一定影响。


2.占用一定屏幕尺寸

标签导航占用了屏幕下方不少的位置,所以有些App就不适合用标签导航,比如阅读类的App。先不说一屏内少了很多字展示,就说在滑动的时候不小心点到了其他功能是不是很烦?


标签导航的延展

有的人会问,如果我的产品很想用标签导航,但是又超过了5个功能,那有办法解决么?看个图:

Image title

当你的主功能超过5个又一定要使用标签导航的话,那知乎的这个解决方案很适合你(最右边的功能是“更多”)。


还有一类情况是:主功能是标签导航,次要功能也是标签导航。有没有听着很乱?继续看图:

Image title

主功能是“新闻”,次要功能是顶部的“要闻”、“NBA”等等,如果在某个主功能中,你的次要功能很多,就可以使用这类方式来解决这个问题。还有很多类似的,标签导航能解决不少问题,但是前面说过,一定要注意规划,理清产品框架,不要一上来就随便定个导航形式。


小结

今天详细的讲了关于标签类导航的几个知识点,希望可以帮助大家在工作中更好的运用。最近出的文章大多是偏向交互、产品的。可能有些人初入这个行业,平时还涉及不到这类工作,所以下周我会出一篇文章,教大家如何学习(可能谁都会),就说说我自己是怎么走到现在的吧,虽然现在也就这样。嗯,来一篇不是鸡汤的鸡汤文。


这是本期内容,谢谢大家的支持!

Image title



微信公众号:呆呆U理

呆呆丶

微信公众号:呆呆U理

10452粉丝/0关注

首页霸主身经百战人气明星一鸣惊人原创小生
按钮规范系列 - 「取消按钮」的设计解析 | 细节分析按钮规范系列 - 「取消按钮」的设计详解 | 细节分析
1
呆呆丶

给你点个赞!

精彩!

呆呆丶

呆呆丶

微信公众号:呆呆U理

首页霸主身经百战人气明星一鸣惊人原创小生

扫描二维码
去手机端查看海报

呆呆丶

TA已经获得10枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN