1.sapui5之在Axure软件中使用Fiori模板操作示例

@1.sapui5之在Axure软件中使用Fiori模板操作示例

1 基本了解与操作

1.1控件

通过下面网站进行fiori模板的下载以及根据步骤加入到axure中进行使用

https://experience.sap.com/fiori-design-web/design-stencils-for-axure-rp/

另：axure中的占位符：对于逻辑细节未考虑清楚的地方暂时用此符号进行标记。如下如

1.2 交互

（1）利用交互去进行页面的跳转

步骤：
	a. 针对于需要交互的组件点击新建交互：
	b. 添加事件，例如“鼠标单击时”。
	c. 添加动作，例如“打开链接”。
	d. 选择链接到的页面。
	e. 点击确定。

(2）利用交互去进行页面部分内容的显示隐藏。

步骤：
		a. 针对于需要交互的组件点击新建交互：
		b. 添加事件，例如“鼠标单击时”。
		c. 添加动作"显示隐藏”。
		d. 选择需要显示或隐藏的组件。
		e. 点击确定。

（3）动态面板的使用

1.入门用法
https://jingyan.baidu.com/article/851fbc378949e43e1f15abf4.html
2.在axure中怎么实现弹窗效果
https://jingyan.baidu.com/article/f3ad7d0fd1ab3f48c2345b24.html

动态面板通过不同状态（“新增状态”）去实现不同页签的改变。

在触发页签改变的控件上通过 “设置面板状态“ 去实现不同页签的改变。

1.3注释

用来向开发人员、用户等表达某些内容的意思以及解释，说明内涵，方便理解。

注：搜索框对于整个大框写注释，按钮针对于按钮控件进行编写注释，其他在文本上标注注释。

2 fiori原型开发

2.1 原型设计网址

首页：https://experience.sap.com/fiori-design-web/
Eg. 框架类型介绍：帮助了解fiori页面大致页面结构
https://experience.sap.com/fiori-design-web/smart-templates/#
清单报表（每个功能的列表页） 对象页面（每一个功能的详情页面）

（1）动态页面
§ 以下平面图使用动态页面：
§ 分析列表页面
§ 清单报告
§ 概览页面
§ 向导`
§ 工作清单
§ 初始页面
§ 对象页面
来自 https://experience.sap.com/fiori-design-web/dynamic-page-layout/
（2）List 报表页 （可以进行模糊搜索类型的）
（3）内层使用object page页 （以便进行增删改查操作）
https://experience.sap.com/fiori-design-web/list-report-floorplan-sap-fiori-element/
Eg. ui元素介绍：帮助快速找到自己需要的控件
https://experience.sap.com/fiori-design-web/ui-elements-overview/#
消息提示类：
Message Controls
SAP Fiori uses the following message controls and visualizations:
§ Message box
§ Message popover
§ Message view
§ Message toast
§ Message strip
§ Message page
§ Value states for input fields
§ Quick confirmation popover
Eg. 页面具体布局介绍：了解页面结构组成
https://experience.sap.com/fiori-design-web/floorplan-overview/#
Eg. Lanchpad 磁贴
https://experience.sap.com/fiori-design-web/home-page/
https://experience.sap.com/fiori-design-web/launchpad/

2.2 常用设计组件

在axure左下角元件库中通过模糊搜索
（1)报表/列表查询页 ：list report
(2)信息弹框：Message Box


(3)显示提示框：toast

(4)表单输入框：
创建横向的表单框 input Field Horizontal_compact，同理纵向Vertical_compact


(5)脚部栏(footer)：
Compact和cozy区别在高度（40/44）。

(6)一般弹框：

(7)列表类的弹框(s_value Help Dialog_Basic_Sele)：