SAP Fiori学习笔记

资料链接:有些是需要自带*的哦~

Fiori Design Guidelines​experience.sap.comSAP Fiori学习笔记戴团长:SAP Fiori Design​zhuanlan.zhihu.comSAP Fiori学习笔记如何评价 SAP Fiori Design Guidelines?​www.zhihu.comSAP Fiori学习笔记https://mp.weixin.qq.com/s?__biz=MzIyNjY4NjQ3Ng==&mid=2247483792&idx=1&sn=7128698a3180eeb522ee37d29df48894&chksm=e86de2f3df1a6be5faf2dae491a24a4a749fd2ff78043a6188f6d46580112db9ccf5a551da6d#rd​mp.weixin.qq.com

 

SAP(德国开发的企业管理系列软件)

先对SAP有个了解吧(来自百度百科):

SAP公司也是目前全球最大的 ERP软件公司,SAP更是ERP软件的代名词。同时,SAP又是其ERP (Enterprise Resource Planning)软件名称,SAP是ERP解决方案的先驱,也是目前全世界排名第一的ERP软件,可以为各种行业、不同规模的企业提供全面的解决方案。SAP代表着最先进的管理思想、最优秀的软件设计,世界500强中有将近80%的公司使用SAP软件,中国将近90%的大型国营、民营企业使用SAP软件。

资料里“SAP Fiori”的解释:

SAP Fiori它指的是一个针对企业软件的综合设计系统。SAP Fiori提供了一套可在不同组合中重复使用的组件和模版,其中也包括相关的使用场景、视觉规范、如何复用、文本规范以及如何集成的说明和指导。这套设计系统不仅跨越多种技术、平台和交互模式,同时,SAP Fiori中的所有内容都遵循相同的设计价值观、原则和实践标准。”

“SAP Fiori的最初的应用程序集中于移动端的解决方案,当其发展到下一个阶段Fiori 2.0阶段,SAP Fiori 2的目标是将SAP Fiori设计应用于所有的核心的ERP方案。而今天,我们将进入下一阶段,即SAP Fiori 3,SAP Fiori设计系统将应用于智能企业应用领域里的所有SAP产品。”

  • SAP Fiori的意义在于 ——它开启了SAP和企业软件的用户体验革命。
  • 当我们将SAP Fiori 2构建到我们的旗舰产品SAP S/4HANA中,我们在2016年的Sapphire向客户展示它如何将ERP的强大功能与现代简单的设计结合在一起。
  • SAP Fiori 3 —— 一致性(Consistent), 集成(Integrated), 智能 (Intelligent)

SAP Fiori学习笔记

“Fiori 就是大而全的设计规范,Material Design System 是小而精的设计规范。”

Fiori覆盖了Android和iOS两大平台,又有web端的规范应用,可以说是很全面地把方方面面都介绍到了,“大而全”形容觉得很贴切。


For Android篇:

基本组件完全遵循Material Design的定义,因为它们是Android UX的组成部分。SAP Fiori for Android颜色和排版将这些组件与应用程序的其余部分完全集成,并在所有组件中保持相同的可视语言。

SAP Fiori学习笔记

Design Principles:

SAP Fiori学习笔记

1. 基于角色的(Role-based);2. 自我适应的(Adaptive);3. 简洁大方的(Simple);4. 连贯一致的(Coherent);5. 令人愉悦的(Delightful)

Type system:

SAP Fiori学习笔记

为SAP Fiori Android系统设置了自己的字体系统,SAP专有字体“72”。这种字体的设计特别考虑了Fiori的原则,使SAP Fiori Android设计保持一致。“72”经过优化,可在不同的上下文中提供可读性、清晰度和一致性。

Colors:

主色、文字颜色、按钮颜色、主题颜色(深浅主题下也有不同)、强调色

ICON:

SAP Fiori学习笔记

SAP Fiori学习笔记

(这里和以往MD、iOS的规范有所不一样貌似,这里icon的绘制要求没有其它的严格)

Layout:

Density-Independent Pixels (dp):密度独立像素(dp)

8dp/4dp Increment system:8dp / 4dp增量系统(这里的翻译不知道对不对?)

SAP Fiori学习笔记

Keylines:

SAP Fiori学习笔记

SAP Fiori学习笔记

padding:

SAP Fiori学习笔记

height:

SAP Fiori学习笔记

Touch Target:手指触碰区域48x48dp,两个区域之间的间距是8dp

SAP Fiori学习笔记


Attach(模式)

这部分官网讲的其实蛮细致的,最好还是去看一下官网上的具体内容比较好。

https://experience.sap.com/fiori-design-android/attach/​experience.sap.com

 


资源下载(提取码: aqvj) :

 

https://pan.baidu.com/s/1ENGiil8dT55ONkbZwIFMLQ​pan.baidu.com

 


For iOS篇:

SAP Fiori学习笔记

Design Principles:

SAP Fiori学习笔记

1. 基于角色的(Role-based);2. 自我适应的(Adaptive);3. 简洁大方的(Simple);4. 连贯一致的(Coherent);5. 令人愉悦的(Delightful)

Navigation:

Hierarchical Navigation:分层导航

SAP Fiori学习笔记

SAP Fiori学习笔记

Flat Navigation:平行导航

SAP Fiori学习笔记

SAP Fiori学习笔记

Modals:

模态用于帮助用户专注于完成任务或查看关键内容。(这部分没看懂)

Adaptive Design:

SAP Fiori学习笔记

Time and Date Formats:时间表达

Accessibility:

颜色对比度:建议尽量争取4.5:1的色彩对比度,但优选7:1的比例。要确定合适的颜色对比度,请使用在线颜色对比度计算器。(我想知道这个颜色比例如何计算出来的?)

SAP Fiori学习笔记

动态类型:动态布局,更加灵活

SAP Fiori学习笔记

iOS辅助功能:除了色彩对比度和动态类型之外,还有更多方法可以确保每个人都可以访问您的应用。iOS提供了有关如何启用辅助功能的指导,例如语音,阅读支持,开关控制,听写等等。


Controls、Patterns:

Fiori for iOS Design Guidelines​experience.sap.comSAP Fiori学习笔记

这2部分还是去看看官网比较好,Fiori的控件说明和使用场景解释的真的很仔细。例如text input从intro、types、guidelines、behavior&interaction四个方面去说明。下图所示是text input的behavior&interaction,图中讲述的是信息输入的时候,不同字段信息存在内容差异,如何展示比较好。此类的例子比较多,感觉看它的控件部分,都能学习到很多东西。

SAP Fiori学习笔记


For Web篇:

SAP Fiori学习笔记

SAP Fiori于2013年推出,已从一系列应用程序发展为SAP软件的新用户体验。

SAP Fiori 2.0于2016年10月推出。

多设备支持:

响应与自适应;

移动优先:

从最小和最有限的设备开始,然后再是更大的设备;

SAP的UI主题设计器:

可以在这个设计器里编辑自己的主题,不过基础还是fiori的。这个网站我点进去查看过,愣是没找到使用路口,所以具体如何不太清楚,不过看到这个,联想到了之前推出的fusion design,总感觉有点相似。

运动设计:

平均眼球运动需要230毫秒(基于70-700毫秒的研究)。我们将通用动画分类为0 ms到500 ms。如果持续时间超过500毫秒,我们会说“连续动画”。

SAP Fiori学习笔记

1.立即响应(<150毫秒)

当用户直接操作内容时,此持续时间适用 。如果需要此类型的动画(例如,要显示悬停效果,向下状态或拖放),设备必须立即做出反应,动画的持续时间不应超过150毫秒

据尼尔森诺曼集团称,0.1秒是用户感觉他们直接导致屏幕上发生某些事情的响应时间限制。例如,为了给用户提供他们直接操作表的印象,用户单击表列与突出显示的列之间所需的时间不应超过0.1秒。理想情况下,这也是排序列的响应时间。然后用户感觉他们正在对表进行排序,而不是命令计算机对它们进行排序。

SAP Fiori学习笔记

2.小动作(150毫秒 - 250毫秒)

在某些情况下,应用程序会以如此快的速度响应交互,以至于用户可能无法跟踪屏幕上发生的情况。为了以更自然的方式呈现反馈,我们在元素在位置或状态之间移动时显示短动画。

SAP Fiori学习笔记

3.大移动 (250毫秒 - 500毫秒)

如果需要在屏幕上描绘大的移动,请使用较长的动画持续时间以避免快速闪烁移动。

SAP Fiori学习笔记

4.连续动画 (500毫秒 - ∞)

这些动画的持续时间是不可预测的。任何不到一秒的时间都应尽快反映在屏幕上。但是,某些交互具有未知的响应时间。占位符动画是连续动画的典型示例。

SAP Fiori学习笔记

Fiori Design Guidelines​experience.sap.comSAP Fiori学习笔记

 

上一篇:[转]在C#程序设计中使用Win32类库


下一篇:windows下的gsl(科学计算库)配置