1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

写给新手的APP结构指南:首页相关(下)--九分科技

时间:2020-06-20   分类:交互设计    作者:网络   来源:网络整理   点击:100

写给新手的APP结构指南:首页相关(下)--九分科技

copyright 9fen.net

九分网络

《写给新手的APP结构指南:首页相关(上)》的功能盘点已经更新了一段时间了,希望对你有所帮助,今天跟大家继续分享的是首页相关功能的下半部分,先来看一下整体结构:

九分网络

写给新手的APP结构指南:首页相关(下)--九分科技 本文来自九分网络

内容采集来自9fen.net

△ 图片来源于应用截图,仅作为学习交流使用

九分网络

一、导航的形式

说到导航大家应该很熟悉了,导航是在各个功能场景之间切换的工具,是整个产品功能的大框架。它将产品的功能有序地连接起来,让功能出现在合理的位置;如果没有导航的话,用户在使用产品时会不知所措,想使用某个功能也无法快速找到,可见它的意义是十分重大的。网上关于导航的文章很多,详细介绍了导航形式之间的区别和优缺点,估计多写也是重复,我在这里就简单的说一下吧,想看详细的文章可以自己去网上搜一搜。(编者按:更多导航设计好文→导航设计

本文来自九分网络

导航的类别有: copyright 9fen.net

1. 底部标签式导航 本文来自九分网络

底部标签式导航是最常见、最常用、最符合用户习惯的样式,导航中的首选样式。根据拇指热区图显示,拇指的最佳操作区域只有页面的三分之一,所以标签导航常位于页面底部,一般作为全局导航使用;导航的内容最直观,不会被隐藏,并且被选中的标签会高亮显示,明确告诉用户当前所在位置,用户可以轻松点击标签进行页面切换。

九分网络

写给新手的APP结构指南:首页相关(下)--九分科技 copyright 9fen.net

九分网络

2. 顶部tab式导航 内容采集来自9fen.net

这类导航形式也很常见,常和底部标签式导航搭配使用,作为二级辅助导航样式,一般 tab 数量3个以上,并且可以进行左右滑动切换;当然也有作为一级导航使用的情况,比如安卓的设计规范中,将顶部 tab 式导航作为一级导航;再比如 QQ音乐,出于产品核心功能需要,音乐播放页面的快捷入口始终置于页面底部,所以主导航就使用了顶部 tab 式导航。

copyright 9fen.net

写给新手的APP结构指南:首页相关(下)--九分科技

九分网络

www.9fen.net

3. 舵式导航 copyright 9fen.net

舵式导航也叫点聚式导航,其实我感觉可以归到底部标签式导航一类,因为在两者搭配使用时,它常作为核心功能入口放在中间位置,形成了对称,故而叫做舵式导航;设计上会和其他标签有明显区分并重点突出了自己,很容易吸引用户的注意力,也有鼓励用户使用该功能的意味,但是因为过于明显所以会弱化其他功能入口;比如带有社交属性的产品,会希望用户多发布一些 UGC 内容,常采用这种导航形式;这类导航里常放置用户最多使用的或是产品最重要的功能,拓展的功能数量不宜过多。

内容采集来自9fen.net

写给新手的APP结构指南:首页相关(下)--九分科技

内容采集来自9fen.net

www.9fen.net

4. 抽屉式导航 九分网络

抽屉式导航也叫汉堡或侧边栏导航,也是很常见的一种导航样式,多用于阅读类产品,因为可以给用户沉浸式阅读体验,可以将很多低频功能藏到抽屉导航内,节省了屏幕空间,自然可以让页面看起来简洁美观;还有一些产品因为功能比较复杂,抽屉导航常作为辅助导航进行配合使用,比如 QQ 既有底部标签式导航又有抽屉式导航;还有一类就是目的性比较强的产品,比如共享单车或是打车软件,都是采用这类导航,将用户最需要的核心功能放在首页,其他的都隐藏起来,不干扰用户的注意力。当然这类导航的弊端也有很多,比如隐藏起来的功能用户可能会想不起来去展开,需要用户多操作才能进入其他功能页面等。

copyright 9fen.net

写给新手的APP结构指南:首页相关(下)--九分科技 九分网络

本文来自九分网络

5. 宫格式导航 本文来自九分网络

使用这种导航样式最具代表性的就是美图秀秀了,这类导航在视觉上比较整齐直观,方便用户快速查找,同等级功能之间割裂感比较大又或是功能之间没有很大的关联可以采用这种导航形式。虽然这种导航形式功能的数量上可以很多,但还是建议这种导航方式作为辅助导航使用,一方面用户对这种导航形式相对比较陌生,接受度不一定高,另一方面,由于功能间割裂感较大,可能用户切换其他功能时会比较麻烦。比如微信钱包页面、电商和团购类产品首页 banner 下的类目入口也是属于宫格式导航,都是作为辅助导航使用。

copyright 9fen.net

写给新手的APP结构指南:首页相关(下)--九分科技

copyright 9fen.net

www.9fen.net

6. 列表式导航

www.9fen.net

标签: 优设 优设网 导航设计 APP UI 加载场景 加载设计

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----