SAP FIORI for iOS - 订单展示应用(2)

前言

在SAP FIORI for iOS - 订单展示应用(1)中我们介绍了这个应用的总体框架以及流程,在本文中将进行第一个界面的设计.首先可以画出该界面的草图,想想需要放什么样的信息到这个界面上. 然后使用 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 文件如下:

订单清单界面.png

结语

关于 Sketch 的详细使用介绍,请参考官方帮助.
Sketch 有很多好用的插件,今天用到的叫 Craft.
在原型的设计过程中,要多多的和用户交流沟通,可以避免很多重复或者修改的工作,节省大量的时间.

下一步

接下来的文章会真正的进入编程,在 XCode 中创建订单清单界面.