欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

【设计干货分享】标签式导航的设计思路

发布时间:2017:10:09 17:35:20 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1398个文字,预计阅读时间4分钟
导语
有人说导航只是即是便利用户操作的小东西罢了,没那么奇特。是的,对于小众的商品来说,确实没那么神,因为神你也看不出来。去看看Facebook为何把抽屉式导航改成标签导航,就知道

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

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

现在用到更多的导航本来是标签导航,它随处可见,相信现在大部分的App用的导航都是标签办法的。所以,是不是知道今日要说啥了?嗯,即是标签导航。

理清商品结构

相信许多计划师在计划导航时,一上来就初步YY自己的导航要放啥,因为这个时分他从前被标签办法的导航洗脑了,认为自己的App就应该用标签导航。然后持续YY商品的功用,自己理出个最适宜的,放上去就好了。

推荐阅读:支付宝口碑人气眼2.0设计总结

本来不然。做好一个导航要思索的疑问本来非常多,还要思索商品后期展开的延展性。必需定好全部商品的结构,把最基地的功用放在第一层页面,再根据商品的深度来计划导航的方法。

咱们作为交互计划师,需要掌握商品的全体架构,这不只仅是商品司理的作业。所以在前期咱们要支付许多尽力,才干把一个商品的线框图画好。

标签导航的优劣势

先来看个图:

【设计干货分享】标签式导航的设计思路

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

那它的优势是啥呢?

1. 简略高效,操作便利

下面的四个功用可以迅速切换,用户在运用的过程中不会迷失方向,且简略清楚,层级了解。

2. 非常好的用户体会

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

3. 迅速了解App首要功用

一般来说,用户第一次运用商品,会重视这个App有啥功用,它能帮忙自己完结啥任务。所以标签导航可以极好地帮忙用户了解商品的首要功用,让用户看到的第一眼就知道自己能做啥。

然后再来看看优势:

1. 功用不能过多

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

2. 占用必定屏幕尺寸

标签导航占用了屏幕下方不少的位置,所以有些App就不适宜用标签导航,比如阅览类的App。先不说一屏内少了许多字展现,就说在滑动的时分不留神点到了其他功用是不是很烦?

标签导航的延展

有的人会问,假设我的商品很想用标签导航,可是又逾越了5个功用,那有办法处理么?看个图:

【设计干货分享】标签式导航的设计思路

当你的主功用逾越5个又必定要运用标签导航的话,那知乎的这个处理计划很适宜你(最右边的功用是“更多”)。

还有一类状况是:主功用是标签导航,非必须功用也是标签导航。有没有听着很乱?持续看图:

【设计干货分享】标签式导航的设计思路

主功用是“新闻”,非必须功用是顶部的“要闻”、“NBA”等等,假设在某个主功用中,你的非必须功用许多,就可以运用这类办法来处理这个疑问。还有许多类似的,标签导航能处理不少疑问,可是前面说过,必定要留心计划,理清商品结构,不要一上来就随意定个导航办法。

小结

今日详尽的讲了对于标签类导航的几个学问点,希望可以帮忙我们在作业中非常好的运用。近来出的文章大多是倾向交互、商品的。也许有些人初入这个行业,往常还触及不到这类作业,设计也不是一朝一夕练成的,还需不断努力。


如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:【设计干货分享】思考设计标准

下一篇:【设计干货分享】 零基础如何自学UI设计

  • 同行价格

    统一报价,无隐形消费

  • 金牌服务

    一对一专属顾问,7*24小时金牌服务

  • 售后无忧

    完善售后,客服经理全程跟进

建站优化二维码
建站优化二维码

截屏,微信识别二维码

微信号:13825575516

(点击微信号复制,添加好友)

优化二维码打开微信