您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

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

原创文章 分类: 经验/观点 版权:
3452 5 18 0
更新于:2019-04-12
15.6

    

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


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


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


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


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


APP首页设计规则


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


①设计出精美的UI界面

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


②展示核心功能

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


Image title


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

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


APP首页设计常见设计方案


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


①导流型APP首页设计

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


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


Image title


②瀑布流APP首页设计

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


Image title


③对话列表型APP首页设计

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


Image title


④地图导航类APP首页设计

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


Image title


APP首页设计原型工具


要想做出像上面这些优秀的APP产品,在构想阶段对产品进行原型设计必不可缺。如何使用APP原型图设计工具Mockplus进行设计呢?别担心,Mockplus上手快,操作便捷,内置200多个常见的交互组件,3000+素材图标,随拖即用,助你轻松搞定。现在更有协作设计平台摹客iDoc的加持,成倍提升设计效率,快速沟通和交付。语言太单薄,下面带领大家实际操作一下。


先来看看原型图:


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


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


原型实现技巧:


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


格子是Mockplus 3.2新增的功能,可以快速制作重复的布局,提高设计效率。究竟如何使用呢? 很简单哦:


一、创建格子


1. 选中一个或多个组件。


2. 在主工具栏上,点击“转为格子”的图标,此时可以看到格子已经生成(你也可以鼠标右键,“转为格子”)。


3. 拉动格子,格子的内容会自动生成。

Image title

二、调整单元格的大小、行距和间距


在格子上,拉动单元格侧边的红线,可以设置单元格的大小;拉动灰线,设置单元格的行距和间距(当然,你也可以在属性面板上直接输入数字,来进行设置)。

设置属性


在属性面板上,还有一些属性可以设置,比如:你可以给格子设置分隔线,包括其颜色、粗细等。


脱离


有时候,你需要某个格子保持自己独立的样式,不受整体变动的影响,那么,在当前格子上点击“脱离”。

Image title

三、数据自动填充


Mockplus v3.2.4实现了数据的自动填充功能,支持填充的数据类型为文字和图片。目前,自动填充功能适用于以下两种情况:


1. 直接使用,用于图片或文字的单个或批量填充。


2. 在格子中使用,快速构建带有重复布局的组件(如列表),大大节省设计时间。

Image title

小结


APP首页设计的重要性就不再赘述了,是不是很简单呢?你也可以用Mockplus亲手做一个哦。


还有福利相赠哦,我们也希望给你可以更好的进行设计,特意免费升级设计神器iDoc,前往

https://idoc.mockplus.cn/get-idoc,注册后输入福利码free即可。


摹客Mockplus产品协作设计

http://t.cn/EwqFgms 原型,标注,切图,协作。

368粉丝/6关注

“劳模勋章”之扁担勋章“劳模勋章”之锄头勋章身经百战活雷锋原创达人
涨姿势!摹客iDoc切图小技巧30个最优CSS动画案例分享,轻松让网页用户随心而“动”

摹客Mockplus产品协作设计

摹客Mockplus产品协作设计

http://t.cn/EwqFgms 原型,标注,切图,协作。

“劳模勋章”之扁担勋章“劳模勋章”之锄头勋章身经百战活雷锋原创达人

扫描二维码
去手机端查看海报

摹客Mockplus产品协作设计

TA已经获得9枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN