• APP原型的设计步骤是什么?


    当我们开始设计一款APP的原型时,应该遵从的设计步骤是什么?总结一下自己首次设计APP的思路步骤,以期自己对原型的设计认知能更规范化、流程化。

    一、定框架

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

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

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

    B.页面标题则居中显示,为当前页面的名称,告诉用户当前在哪;

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

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

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

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

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

     
     

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

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

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

     
     

    二、定全局

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

     
     

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

     
     

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

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

    三、画页面

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

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

     
     

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

     
     

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

    四、输出原型

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

     
     

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

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

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

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

    静下来总结思考,其实每件事情都有几乎接近标准的实施步骤,有了这个步骤的指导,当你拿到相关任务的时候,就不会感觉无从下手了。




  • 相关阅读:
    pandas(六):pandas对excel进行读写
    当方法类bean无法注入时
    js 替换css属性
    select既可以输入也可以下拉框选择
    Java 容器详解
    前端页面获取URL拼接的参数值
    web前端工程师需要掌握的技能
    小程序云开发图片上传存储
    小程序云开发删除‘存储’的图片或文件
    小程序云开发对数据库增删改查相关操作
  • 原文地址:https://www.cnblogs.com/bailing80/p/12235483.html
Copyright © 2020-2023  润新知