订阅摹客文章

免费获取优质的设计资讯!

文章分类
【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多
热门文章
Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、百度、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用
2019,都在用iDoc了!

更高效的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用
入门教程 了解更多

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

设计资源 > 设计文章 > 知名APP(支付宝、微信、花瓣等)首页设计技巧及原型实例讲解

知名APP(支付宝、微信、花瓣等)首页设计技巧及原型实例讲解

Thomas 2018-12-26 13864

APP首页设计对APP自身来说是至关重要的,一款优秀的APP产品,其首页设计不仅需要清晰的展示产品核心功能,给用户创造良好的用户体验,而且还需要展示公司的品牌形象,提升在用户心中的品牌认知度。今天,就带领大家一起来聊聊APP首页设计那些事儿。


为什么要进行APP首页设计?

①首页是用户打开APP后最先看到的界面,也是用户与APP之间的第一交互界面;


②在首页上,用户在APP中可以快速找到最为核心和重要的功能,以方便用户快速进入对应的需求模块;


③首页是用户的第一印象,用户在首页上交互体验的好坏将直接影响到用户后续对整个APP的体验;


APP首页设计规则

我们在对APP首页进行设计时,需要遵循一定的规则,具体如下:


①设计出精美的UI界面


用户进入APP首页后,直接映入眼帘的就是界面,其次才会是APP里的内容。第一印象都不好了,造成的结果也许是直接卸载APP,致使大量潜在用户流失。


②展示核心功能


用户下载使用某一App的原因是能够为其解决某一问题,比如春节出行,我们都会下载12306进行购票。那么,在用户在打开12306首页时,急需迫切的就是想看到购票功能。因此,在APP首页设计时,一定要展示产品的核心功能点。当然,良好的交互体验也是必不可缺的。


12306APP首页


③及时给用户更新和推荐优秀内容


此阶段是针对正在使用APP的用户来说的,此时,我们需要强大的数据库对用户日常活动进行分析,以实时向用户更新匹配用户习惯的内容。


APP首页设计常见设计方案

我们在对APP首页进行设计时,一般会使用4种常见的设计方案,具体如下:


①导流型APP首页设计


这种首页设计方案也是我们目前最常见的一种方案,与之匹配的就是宫格布局。这种方式的布局一般都会在首页精简的展示核心功能,提供活动的banner。引导用户快速进入二级页面以便起到分流作用。


比如:支付宝APP、携程APP、房天下APP等。


支付宝APP首页

②瀑布流APP首页设计


这种设计方式在电商类APP中非常常见,可以让用户在首页无限加载内容。如闪购类网站唯品会APP、聚美优品APP、花瓣网APP以及国外的pintrest这样的图片社交类网站。


花瓣APP首页

③对话列表型APP首页设计


这种APP首页设计方式在社交类软件中比较常见。比如我们日常常用的微信APP、腾讯QQ等;


微信APP


④地图导航类APP首页设计


这一类的APP首页设计基本都是以地图为主要功能点的一些APP。比如:滴滴打车APP、高德地图APP、哈罗单车APP等。


高德地图APP首页


APP首页设计原型工具

要想做出像上面这些优秀的APP产品,在构想阶段对产品进行原型设计必不可缺。大家可以去尝试一下我常用的APP原型图设计工具-国产Mockplus。软件上手快,操作便捷,内置200多个常见的交互组件,3000+素材图标,随拖即用。语言太单薄,下面带领大家实际操作一下。


先来看看原型图:


APP首页设计原型


原型演示地址:https://run.mockplus.cn/Ppb5P7huQEIQcIDy/index.htm


APP原型设计


原型演示地址:https://run.mockplus.cn/BEQJf3VtgqtjAl2T/index.htm...


原型实现技巧:

从上面APP首页截图可以看出,这些APP中的布局基本都是一致的,而像这种重复性的布局方式,在Mockplus中使用快速格子可以快速实现。(具体看教程详情


小结

APP首页设计的重要性就不再赘述了,有兴趣的小伙伴赶紧使用Mockplus来做一个专属你自己的APP首页吧。

上一篇
AI教程 | 三分钟搞定像素画!

SUPERYEAH_098   12/27

双旦特惠集锦,设计师的专属福利

Jongde   12/24

下一篇