APP界面框架设计模式

日期:2019-07-09  作者:小天  来源:www.txunda.com  人气:1635

随着互联网科技的发展,APP已经成为一家公司的标配,那怎样的设计才能更加满足用户的体验呢?今天和大家分享3个最常见的app界面和设计模式。

这个3种设计模式分别是:标签导航、宫格导航、列表导航、

首先我们先说说标签导航,标签导航是十大界面框架设计里最常用的界面框架设计,也是被业界之内公认的一种普遍使用的页面框架设计。那么这种页面框架设计在作业方面对一个用户来说也是最常见的一种页面框架设计,比如说微博、微信、手机百度、支付宝、淘宝,这些我们所谓的超级APP都是运用的标签导航,无一例外。从这个角度也可以看出来,优秀的产品用标签导航这种页面框架设计是非常普及的。标签导航位于页面底部,标签的分类最好可以控制在5个之内。


优点:

1、标签导航能够让用户清楚当前所在的入口位置。比如对于微信来说,无论用户在“发现”还是“对话框”里面,用户都能通过底部的高亮区域来划分当前所处的这个产品结构的区域。无论是当前位置的判断,还是要找这个入口,都比较方便,比如对于微信来说,很容易都过标签导航找到“朋友圈”。

2、轻松在各入口间频繁跳转且不会迷失方向。比如对于微信来说,微信团队不仅希望我们拿微信来聊天,还希望我们拿微信来逛朋友圈、购物、支付、滴滴打车等等,那么如果能够让用户在不同的入口间实现频繁的跳转,那这时用标签导航是最合适不过的。
3、直接展现最重要入口的内容信息。这有两层意思,第一层就是它能展示出来最重要的入口,比如拿微信来说有那么多的重要入口,显然“微信对话框”最重要,那么他们默认的把微信对话框作为主入口。同样微博最重要的是首页,所以默认把微博首页作为最主要的入口。其次,入口不仅可以展示,入口里面的信息也可以展示。

缺点:

功能入口过多时,该模式显得笨重不实用。怎么理解“功能模块过多”,比如说现在标签导航,一般情况下功能入口控制在5个以内,我们也会遇到6个的情况,但那种产品一般来说比较复杂,最少会是3个,最多5到6个。如果过多的话,标签导航会弹不开,那这种模式就失效了。过多不行,过少也不太方便,如果说就一个Tab、两个Tab,那么标签导航下面就会显得特别的空,也不太好看,所以这个时候我们就会知道标签导航的适用范围最好在3至5 个之间,并且这几个功能希望用户能够频繁的去操作。如果说你的产品比较保守,那么就可以采用这种标签导航。

接下是宫格导航,宫格导航和之前所讲的两种界面框架设计不太一样,宫格导航是将主要入口全部聚合在页面,让用户进入界面之后第一步的反应就是做出选择。比如下图美图秀秀,它把所有的功能一开始就罗列在一级页面里面,让用户自己选择。


优点:
1、直观展现各项内容。

2、方便浏览经常更新的内容。比如美图秀秀吸进新推的一个功能“万能相机”,它就在里面加了一个“hot”,能够让用户非常方便的浏览到更新的功能。

缺点:

1、无法入口间跳转。比如进入到美图秀秀中美化图片的功能里面,一旦进入之后就无法通过一次性的操作直接的跳到拼图的功能里面,它与标签导航最明显的区别就在于无法直接进行相同入口之间的切换。

2、不能直接展现入口内容。比如刚讲的微博、微信,它们都能在导航首页看到它所展示的内容,如微信里面主要的就是对话框列表。而这种宫格式导航,主要是宫格入口,主要展示了宫格入口而没有展示入口里面的内容,比如说“拼图”,它不能在这个页面里面直接展示拼图有哪几种拼法,美化图片也不知道究竟是怎样美化。
3、不能显示太多入口次级内容。它只能展示一级入口,比如“美化照片”里面有没有其他的功能,如“滤镜”这些二级的入口在这里面是无法体现的。而对于标签式导航,就能够在一级页面里面看到次级界面入口,如在微信的“发现”里面能看到“朋友圈”、“摇一摇”、“扫一扫”这样的二级功能的入口。

所以说宫格导航有它明显的优点,就是最直观的把各个功能入口展示出来并且能够非常方便的看到它哪些更新的、主推的一些内容,但它也有很多缺点,只适合一些功能层级没有太多的APP,并且每一个功能与功能之间有明显的间隔。最后说说我们的列表导航,列表导航是在我们这种二三级页面最常见的一种导航模式,或者说二三级功能里面最常见的。比如微信“发现”就是纯的列表式导航。

优点:
1、层次展示清晰。
虽然都是列表,但是它可以划分层级。比如说“朋友圈”作为单独一级,“扫一扫”和“摇一摇”是单独的一级,“附近的人”和“漂流瓶”是单独的一级,“购物”和“游戏”是单独的一级,层级可以清晰地进行划分,这时候就有一个个问题了,为什么微信的“发现”用这种分类方式呢?我们分析一下,首先“朋友圈”为什么单独分为一类?因为原来“发现”不叫“发现”,就叫“朋友圈”,也是用户使用最多的一个功能,那么与其说把“朋友圈”和其他功能混在一起,还不如单独拿出来,作为最重要的一级放在最上面,它和其他功能都不一样,用户使用频率最高,也是目前朋友圈粘性最高的一个功能。“扫一扫”和“摇一摇”为什么放在一起?因为它们都是移动交互的新方式,也是微信的普及的一种新方式,被誉为移动端的网址,通过“扫一扫”和“摇一摇”可以获取到很多的信息、建立各种的关系,所以它们之间有着相似的产品功能。“附近的人”和“漂流瓶”为什么放在一起?首先它们不是微信独创的功能,原来QQ里就有这样的功能,甚至PC端就有这样的功能,需要用户被动的开启、添加,也是老的添加方式,所以它俩要放在一起。而最后的“购物”和“游戏”放在一起是因为它们是微信的商业化。
2、可展示内容较长的标题。
比如三个字、四个字、五个字都可以。
3、可展示标题的次级内容。比如“购物”是一级标题,可以接着展示一下二级标题如“618京东大促”。
缺点:
1、同级过多时,产生疲劳。比如说“扫一扫”和“摇一摇”之后又并了很多级,那么这时就会觉得级别过多了,尤其是同一级别内容过多了,这样用户会觉得没有层次感,而且也分不清哪个更重要,不知如何选择。
2、排版灵活性不高。无论怎么排都是列表的样式,而且每一个列表的细分模块都要同样大小的图标,甚至风格都要固定,标题、文案都需要摆放在固定的位置,排版非常不灵活,样式基本是固定死的。
3、只能通过排列顺序、颜色、来区分各入口重要程度。列表这种导航框架模式设计对于重要度的这种排版并没有明确的指示,只能通过排列顺序、颜色、来区分各入口重要程度。比如微信的“发现”页面,“朋友圈”作为单独的一个级别搁在了最上边,通过顺序可以传递给用户“朋友圈”是“发现”里面最重要的功能。还得通过颜色来区分,比如说有些Tab,可以在它的右边加一些内容,如“购物”右边标注“京东618大促”,可以通过这种辅助的文案和通过颜色的区分来展示某种信息。尽管优缺点,但列表导航和标签导航被誉为现在APP里面的主流导航设计,如果说实在没有别的导航创意的话,这两种导航模式是最大程度上避免产品经理犯错的一种设计方式。

这三种设计模式有没有你喜欢的模式?不喜欢没关系,天津天迅达科技公司为您的app进行定制开发,你想要它是什么样子,它就可以制作成什么样。所以说如果想定制app。想做网站,想开发微信小程序找天迅达科技公司就对了,因为专业所以更专业。


标签:天迅达科技 天津APP开发 天津网站建设 网站建设