×

打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮

×

打开微信“扫一扫”,关注我们官方微信^_^

梦创义官方微信

亚博app安全有保障 > 新闻 > 网站制作教程 > app制作 APP原型的设计步骤是什么?

app制作 APP原型的设计步骤是什么?

2020-12-031022分享

app制作 APP原型的设计步骤是什么?


一、app原型设计 app制作 定框架

一款APP应该有固定的上导航、下导航和尺寸大小,基于这个思路,在开始画页面之前,应先定好上导航、下导航和原型尺寸。

1.上导航:app原型设计 app制作 上导航位于页面的顶部,一般组成有三部分,左按钮、页面标题、右按钮。

A.左按钮一般为“返回”上一级的功能,用于告诉用户怎么回去之前的路;

B.页面标题则居中显示,app原型设计 app制作 为当前页面的名称,告诉用户当前在哪;

C.右按钮一般为操作区,app原型设计 app制作 用于隐藏一些针对当前页面的操作、全局操作等,一般设计为抽屉导航,以节省页面空间和统一设计。

2.下导航:下导航位于页面底部,由四到五个标签组成,点击标签,用户可方便地在不同页面间来回切换。一般将应用中最重要的几个功能模块抽象出来后,形成下导航标签。

3.原型尺寸:app原型设计 app制作 原型尺寸的确定取决于APP目标用户使用设备的分辨率。此处需调查两份数据:

A.设计一份简单的在线调查,面向目标用户收集到他们的设备使用情况.其中iPhone使用率占49.57%,华为使用率占比18.48%,之外,OPPO和vivo分别占比12.6%和11.34%,小米占比7.9%;

B.查阅Android和iOS设备分辨率占比情况:

综合两份数据,app原型设计 app制作 将应用支持的分辨率确定为:安卓 1920 x 1080,ios  1334*750,应支持的系统版本:安卓适配4.4及以上,ios适配8.0及以上。

根据屏幕分辨率的定位,结合在网上查找的一些资料,最终确定原型尺寸为375*667。

有了上导航、下导航和尺寸,app的框架就定下来了,页面的设计就是往这个框架里面塞内容了。为了提高效率,将框架制成母版,做到在所有页面的复用和统一:

二、定全局

一款应用中,app原型设计 app制作 每个模块或页面都要用到的功能,可以抽象出来做成全局功能,一是可以达到一次设计,全局适用的效果,提高原型设计的速度;二是防止每次遇到都交代,导致同样的功能,设计不一样。根据业务的需要,抽象出的全局功能有:

除了全局功能,app原型设计 app制作 保持操作和反馈的一致性,是对用户友好、降低用户学习成本的最基本要求。为此定义应用的全局规范,包括:

其中反馈包括操作反馈(错误反馈、操作成功提示、操作确认等)、页面加载反馈(刷新提示、加载中、加载失败、全部加载等)、页面状态反馈(无网络、请求失败、加载失败、无内容、页面不存在等)

这一块会跟UI设计师一起确定,并形成适合我司的标准规范,设计成我司组件库,方便各个项目之间复用。

三、画页面

页面框架定好了,全局规范定好了,最后就剩下设计具体的页面了。在设计具体的页面时,用状态去指导设计不仅让自己的思路很清楚,不会遗漏功能,在交付给其他团队成员的时候,也更容易理解和沟通。

如此,在设计每一个页面时,app原型设计 app制作 应先梳理这个页面涉及的业务操作流程:

然后根据操作流程抽象出不同的操作状态迁移图:

根据不同的状态,此处至少应输出:包裹创建中的页面、保存为草稿的页面、创建失败的页面、创建成功的页面;其中创建包裹时,又可以细分出操作流程,如选择仓库、选择sku、选择物流方式,根据这个流程又划分出不同的状态,画出不同的页面。如此一层层细分,直到所有业务逻辑划分完成。这样做的好处是,流程清晰、操作逻辑清晰,不容易遗漏细节。

四、输出原型

最后,将产品的来龙去脉、用户等简介信息与操作页面融合起来,整理出完整的文档,目录脉络是这样的:

因第一次负责移动端产品,app原型设计 app制作 没有经验和成熟的思路指导,在设计的过程中走了很多弯路:

一是盲目下手,没有充分利用网络上的资源,比如在搭建页面框架的时候,其实已经有成熟的组件可直接使用,只要按需改一下文字名称即可,比如antdesign这个网站上就有很完善的mobile、web端的组件库可供下载,充分利用可大大提高原型设计效率。

二是没有确定固定的表达模式(如按状态划分页面,说明业务规则),导致每个功能表达方式不一致,又不得不花费时间和精力调整。

三是没有仔细研究和学习iOS和Android的官方design guide,导致有一些设计不符合规范,app原型设计 app制作 看起来不像一款移动端应用的设计,更像web端。


本文由梦创义网站建设(www.lylzsp.com)收集于网络或网友投稿,对于内容系文章作者个人观点,不代表本站观点.我们每日更新最新网站建设教程,网站制作教程,网站建设亚博APP-有安全保障报价等,如果你想了解更多建站知识,请收藏并持续关注我们网站.

本文地址:/content-88-734-1.html转载请注明出处!

  • 基于用户创新

    界面设计日新月异,梦创义坚持基于用户需求的界面创新设计……

  • 服务设计思维

    互联网的格局发生的改变,在我们进行设计服务时更是考虑不同用户、不同……

  • 洞察用户心理

    洞察用户有意识和无意识的行为以及心理特征通过构造一系列的服务来促进……

  • 查看更多 >>

最新新闻Latest News

做一个直播app需要多少钱?
视频APP开发是现在最热门的移动应用,那么最值得关注的问题是,开发一……
移动开发 请人开发app大概得多少钱?
app开发的费用主要就是人力成本,而决定人力成本的因素包括
开发一个app开发步骤
一、开发一个app多少钱?个人亲身经历分享: 开发一个app多少钱?几百……
视频直播软件开发 视频直播软件制作 视频直播软件开发功能
视频直播软件开发 视频直播软件制作视频直播软件开发 视频直播软件制作
在线教育APP制作 在线教育APP设计如何开发
1、app类型:拓词、超级课程表等;   2、交易平台型:百度教育、淘宝……
  

ABOUT US

北京梦创义科技有限我司成立于2012年
创始人以及初创团队成员均来自各大互联网我司 目前我司拥有员工近百人  平均3年以上从业经验 核心团队成员均有10年以上互联网从业经验

Contact information

手机:13910811300
电话:010-52661970
传真:010-82694569

网址:www.lylzsp.com
邮箱:13910811300@126.com
朝阳一部:朝阳区紫芳路九号院广顺园2号楼2605A
海淀二部:回龙观黄平路19号院泰华龙旗广场E座1212室(距西三旗桥2公里,8号线育新站海淀昌平交界)

北京梦创义网站建设logo

Copyright 2008 ASAweb company. All rights reserved.
京ICP备13003869号-1