SAP FIORI for iOS - 任务管理应用 - 设计

前言

前面了解了SAP Cloud Platform SDK的基本框架，接下来将进行实战开发。在真正的开始写代码之前，按照企业应用开发的最佳实践，首先需要设计UI，然后生成原型程序。之后发送到最终用户进行 Review，然后进行设计的更改。在和最终用户确定设计方案之后，才能进行真正的程序开发。

准备

• 工具
  • Sketch
• 素材
  • SAP FIORI for iOS Stencils
  • Download 地址
    SAP FIORI for iOS Design Stencils

产品描述

我们将设计一个产品,这个产品用来管理日常的任务,这个产品应该具备以下功能特点:

• iPhone 应用
• 管理个人任务清单
• 可以创建，修改，完成，删除新的任务
• 两个屏幕，第一屏显示任务清单，支持任务的基本操作
• 第二屏显示任务的详细信息
• 在第一屏可以筛选需要显示的任务

UI 设计

• 设计元素

  • NavigationController
  • Table
  • TableCell - Timeline Cell

• 第一个屏幕

  • 抬头显示任务清单
  • 表格显示任务列表
  • 左边时间轴显示任务截止日期
  • 右边显示任务的描述信息
  • 图标显示任务的优先级
  • 图标下显示任务执行的估计时间

  • 设计原型如下

    
    任务清单

• 第二个屏幕

  • 导航栏显示返回
  • 导航栏抬头显示任务名称
  • 导航栏右边显示完成任务的按钮
  • 抬头显示任务的基本信息
  • 下方表格显示任务的详细信息

  • 设计原型如下

    
    任务详细信息

原型

本应用原型比较简单，只有两个屏幕的流转

结语

• 使用 Sketch 做应用的设计相对简单，能够很容易的创建程序原型。Sketch 支持很多插件，比如Craft，zeplin，可以帮助在 xcode 做 stotyboard 屏幕设计的时候方便的使用颜色，css style 等。当然各种图标的也可以使用 Sketch 导出不同尺寸以适应 iOS 不同的分辨率。

• 通过本文，我们完成了一个简单应用的设计，使用这个设计文件，可是创建原型程序，然后发送到最终用户收集反馈信息，这样可以避免在开始编程之后因为用户的需求不确定而导致的返工。

下一步

有了程序原型，就可以开始进行程序的设计。接下来将进行真正应用的开发。