APP导航设计样式总结

来源:互联网 阅读:- 发布:2020-08-21 04:09:39


APP导航设计样式总结


APP导航设计是每个设计师都要经历和学习的,有些时候不总解一下,可能都不熟悉每个导航的布局样式场景是什么,优缺点又是什么。「移动端界面设计模式」是基于大量设计师的智慧和尝试总结下来的可实施的解决方案,可以帮助我们解决绝大多数常见的移动界面设计需求。一个好的操作体验必不可少的要有合理的导航搭配设计,让产品操作舒适、体验友好,这个可能好多人会忽略掉,没关系!今天我们就对导航设计做了以下总结希望能帮助大家!


APP导航设计样式总结

一:导航模式定义


个人理解为在页面框架中承载信息维度的桥梁。通俗的理解就是跳转的承接点标志,从这里进去跳转到那个页面。从哪里来到哪里去,是不是有点禅意那,哈哈。其实做设计就是理解到设计本质,设计元素的本质,做起来就舒服多了,产品易用了,用户体验也友好了。


APP导航设计样式总结

二:导航设计模式的类型


导航设计模式的类型这里通过横向、纵向的方式分为了以下9种常见的导航,底部TAB导航、标签导航、鸵式导航、轮播导航、下拉导航、列表导航、宫格导航、抽屉式导航、隐喻式导航。


1.底部TAB导航


底部的TAB导航是我们最为常见的导航,一般为3-5个,放在页面底部,作为APP主要功能的切换。例如微信、微博、美团、百度网盘等。


APP导航设计样式总结


APP导航设计样式总结

APP导航设计样式总结

APP导航设计样式总结


2.标签导航


标签导航一般是功能多时用于分类作为二级导航显示。主要是放置于页面顶部,展示样式为可左右滑动或者固定展示。数量太多时会增加分类跳转。

APP导航设计样式总结

APP导航设计样式总结

APP导航设计样式总结

APP导航设计样式总结


3.鸵式导航


鸵式导航一般放在底部中间位置,较常规TAB比较突出设计,可以加入产品特点进行设计,也可以趣味性设计。点击展开隐藏功能。在此类导航设计中许多趣味设计师为了避免用户操作疲劳,或者有记忆负担。


APP导航设计样式总结

APP导航设计样式总结

APP导航设计样式总结

APP导航设计样式总结

APP导航设计样式总结

4.轮播导航


轮播导航属于比较特殊的导航方式,每一个大的卡片,页面都一个导航的入口位置。适合扁平类、个性化的APP。


APP导航设计样式总结

APP导航设计样式总结

5.下拉导航


一般位于页面的顶部位置,下拉导航一般用户二三级导航,筛选功能较多时的入口,连贯性较好,满足信息筛选量大的APP功能页面设计,不用跳转其他页面,直接当页面展示。


APP导航设计样式总结

APP导航设计样式总结

6.列表导航


最早也是最容易接受的信息展示方式之一,可以无限延伸功能信息框架。列表通常用来展示某个具体模块内容的信息进行分类。


APP导航设计样式总结

APP导航设计样式总结

7.宫格导航


有些产品功能较多无法全部展示,因此宫格导航可以满足用户的个性化需求选择自己需要的功能展示,例如支付宝、百度网盘、优酷


APP导航设计样式总结

APP导航设计样式总结


8.抽屉式导航


抽屉式导航,一般使用点击滑动效果展示,对于一些不重要的功能信息展示。例如我的、关于我们、具体设置等。


APP导航设计样式总结

APP导航设计样式总结

9.隐喻式导航


隐喻式导航就是信息比较复杂时,不适合上下排列,需要结合游戏、线索等排列的方式,适合产品游戏、故事、日记等。


APP导航设计样式总结

APP导航设计样式总结


三:总结


大部分的导航设计都是我们设计师设计产品演变而来的,产品设计的过程中,我们要做适合产品的设计,去把控导航设计样式结合,更好的服务用户。

推荐阅读:奢侈女人网