前言
在SAP FIORI for iOS - 任务管理应用 - 设计中我们介绍了这个应用的总体框架以及流程,在本文中将进行第一个界面的设计.首先可以画出该界面的草图,想想需要放什么样的信息到这个界面上. 然后使用 Sketch 作出原型.
界面设计草图
在制作草图的过程中,对于设计人员而言,需要非常紧密的和最终用户沟通,了解真实的业务场景以及用户的真正需求.特别是页面的展示信息以及位置有限的情况下,如何组织数据,如何找到用户最关心的数据是设计的核心.至于页面上使用什么样的控件进行展示反而是次要的问题.
使用SAP Fiori for iOS 进行应用开发的好处就是, SAP 已经按照企业应用的多数场景,定制了一些可重用的组件,这些组件可以应用到不同的场景,这样可以使企业应用对类似的业务流程有着一致的应用体验.
因为第一个应用界面涉及到订单清单显示,所以我们选择 table 组件,在 table cell 层级,使用FUIObjectTableViewCell.
设计草图如下:
- 导航栏显示”订单清单”
- 主界面使用 TableViewController
- 最左面显示订单状态 - 是否送货
- 订单状态旁边图片显示销售人员头像
- 右边显示订单的抬头信息
- 标题显示订单号
- 副标题显示客户名称
- 描述部分显示主要日期包括
- 订单创建日期
- 订单计划送货日期
- 订单实际送货日期
未画出部分:
- 需要有筛选功能,所以表头可以添加搜索框
- 右侧可以添加信息图标,表示该行项目有详细信息
使用 Sketch 设计界面
- 打开 Sketch, 创建一个新的设计
- 创建一个新的 artboard
- 选择 iPhone7作为主设计页面
- 打开
SAP Fiori for iOS Stencils_Compact_V2.sketch文件,该文件在前文中有介绍,可以从 SAP 网站下载 - 选择需要使用的 symbol, 复制到我们的设计文件中
复制 symbol:Nav Bar / Modal / Close - Ungroup 这个 symbol, 然后拖放到我们的 artboard 中
- 重新分组,重命名组
- 修改描述,删除 Close 按钮
- 接下来设计 cell, 复制以下两个 symbol 到我们的设计文件
Detach Symbols, 然后修改 cell 如下: - 复制这个 Cell, 占满屏幕
- 选择头像控件,使用 Craft 插件,填充头像图片
成品图
按照以上步骤,完成了第一个界面的设计,接下来,可以把设计文件导出,分享给用户,再根据用户的意见作出修改.
Sketch 导出:
最终导出的 png 文件如下:
结语
关于 Sketch 的详细使用介绍,请参考官方帮助.
Sketch 有很多好用的插件,今天用到的叫 Craft.
在原型的设计过程中,要多多的和用户交流沟通,可以避免很多重复或者修改的工作,节省大量的时间.
下一步
接下来的文章会真正的进入编程,在 XCode 中创建订单清单界面.