SAP FIORI for iOS - 订单展示应用(1)
2017-04-20 本文已影响176人
46b61a5f089d
前言
前面几篇文章介绍了SAP FIORI for iOS的基础知识,并且做了两个简单的应用.一种使用SAP Cloud Platform SDK assistant,一种是通过手动编程. 有些朋友反馈说写的有些潦草,对于没有基础知识的看起来比较费劲,比如如何做原型,怎么使用 sketch,如何把一个应用从设计到开发完整的完成.
基于这些反馈,我将会在接下来的文章中尽量详细的介绍,本人也在学习过程中,希望能够和朋友们一起进步.
在本系列文章中,我会通过一个订单展示应用,详细的介绍各个阶段需要做的工作.该应用基于 Northwind odata 模型.
应用的初期研究和设计
- 模型的搭建
做任何应用,首先要确定模型,而模型的搭建,完全基于需求.我们要做的应用需要实现那些功能,能够帮助到最终用户方便的完成业务流程,这是必须弄清楚的.
举例来说, 应用的使用者是谁,使用者最关心的功能是什么,目前的使用者遵循的业务流程是什么,这个应用的引入能够帮助使用者解决什么具体的问题. - 屏幕的初期设计
对于应用的 UI 设计,开始首先确定需要几个屏幕,屏幕之间的关系如何,如何流转,每个屏幕所涵盖的功能是什么.
在该阶段无须特别关注具体使用什么样的 UI 组件,该应用什么样的动画,里面有什么具体的数据,只需搭建一个简单的屏幕框架即可.在这个阶段,基本上使用纸笔完成设计就可以了.
订单展示应用总体设计
- 需求
- 使用者: 客服以及主管
- 主要功能: 能够通过一个应用,查看订单的相关信息
- 一个可以运行于 iPhone 上的 Fiori风格的本地应用
- 能够展示和订单相关的详细信息
- 订单中的产品,价格,数量
- 订单中的产品信息,以及供应商的信息
- 客户的信息,包括地址,联系人
- 送货单位信息以及联系方式
- 处理订单的员工信息
- 支持条件查询以及筛选
- 模型
Northwind Odata Model -
屏幕初期设计
草图:
- 第一个界面: 显示所有订单抬头信息,以列表方式展现
- 第二个界面: 订单的详细信息
- 第三个界面: 产品的详细信息
- 第四个界面: 客户的详细信息
- 第五个界面: 销售的详细信息
- 第六个界面: 地图显示位置
- 第七个界面: 供货人的详细信息
- 第八个界面: 供应商
- 屏幕的流转
- 当用户在第一个界面点击订单,显示订单详细信息界面
- 在第二个界面,用户点击客户,显示客户详细信息
- 在第二个界面,用户点击产品,显示产品的详细信息
- 在第二个界面,用户点击销售人员,显示销售人员详细信息
- 在产品详细信息界面,用户点击供应商,显示供应商详细信息
- 在任何界面,有联系方式的,用户点击电话号码,直接拨打电话
- 在任何有地址信息的界面,用户点击地址,在地图界面显示具体的位置
下一步
接下来的文章将介绍第一个界面的设计.
