资料链接:有些是需要自带*的哦~
Fiori Design Guidelinesexperience.sap.com戴团长:SAP Fiori Designzhuanlan.zhihu.com如何评价 SAP Fiori Design Guidelines?www.zhihu.comhttps://mp.weixin.qq.com/s?__biz=MzIyNjY4NjQ3Ng==&mid=2247483792&idx=1&sn=7128698a3180eeb522ee37d29df48894&chksm=e86de2f3df1a6be5faf2dae491a24a4a749fd2ff78043a6188f6d46580112db9ccf5a551da6d#rdmp.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)
“Fiori 就是大而全的设计规范,Material Design System 是小而精的设计规范。”
Fiori覆盖了Android和iOS两大平台,又有web端的规范应用,可以说是很全面地把方方面面都介绍到了,“大而全”形容觉得很贴切。
For Android篇:
基本组件完全遵循Material Design的定义,因为它们是Android UX的组成部分。SAP Fiori for Android颜色和排版将这些组件与应用程序的其余部分完全集成,并在所有组件中保持相同的可视语言。
Design Principles:
1. 基于角色的(Role-based);2. 自我适应的(Adaptive);3. 简洁大方的(Simple);4. 连贯一致的(Coherent);5. 令人愉悦的(Delightful)
Type system:
为SAP Fiori Android系统设置了自己的字体系统,SAP专有字体“72”。这种字体的设计特别考虑了Fiori的原则,使SAP Fiori Android设计保持一致。“72”经过优化,可在不同的上下文中提供可读性、清晰度和一致性。
Colors:
主色、文字颜色、按钮颜色、主题颜色(深浅主题下也有不同)、强调色
ICON:
(这里和以往MD、iOS的规范有所不一样貌似,这里icon的绘制要求没有其它的严格)
Layout:
Density-Independent Pixels (dp):密度独立像素(dp)
8dp/4dp Increment system:8dp / 4dp增量系统(这里的翻译不知道对不对?)
Keylines:
padding:
height:
Touch Target:手指触碰区域48x48dp,两个区域之间的间距是8dp
Attach(模式)
这部分官网讲的其实蛮细致的,最好还是去看一下官网上的具体内容比较好。
https://experience.sap.com/fiori-design-android/attach/experience.sap.com
资源下载(提取码: aqvj) :
https://pan.baidu.com/s/1ENGiil8dT55ONkbZwIFMLQpan.baidu.com
For iOS篇:
Design Principles:
1. 基于角色的(Role-based);2. 自我适应的(Adaptive);3. 简洁大方的(Simple);4. 连贯一致的(Coherent);5. 令人愉悦的(Delightful)
Navigation:
Hierarchical Navigation:分层导航
Flat Navigation:平行导航
Modals:
模态用于帮助用户专注于完成任务或查看关键内容。(这部分没看懂)
Adaptive Design:
Time and Date Formats:时间表达
Accessibility:
颜色对比度:建议尽量争取4.5:1的色彩对比度,但优选7:1的比例。要确定合适的颜色对比度,请使用在线颜色对比度计算器。(我想知道这个颜色比例如何计算出来的?)
动态类型:动态布局,更加灵活
iOS辅助功能:除了色彩对比度和动态类型之外,还有更多方法可以确保每个人都可以访问您的应用。iOS提供了有关如何启用辅助功能的指导,例如语音,阅读支持,开关控制,听写等等。
Controls、Patterns:
Fiori for iOS Design Guidelinesexperience.sap.com
这2部分还是去看看官网比较好,Fiori的控件说明和使用场景解释的真的很仔细。例如text input从intro、types、guidelines、behavior&interaction四个方面去说明。下图所示是text input的behavior&interaction,图中讲述的是信息输入的时候,不同字段信息存在内容差异,如何展示比较好。此类的例子比较多,感觉看它的控件部分,都能学习到很多东西。
For Web篇:
SAP Fiori于2013年推出,已从一系列应用程序发展为SAP软件的新用户体验。
SAP Fiori 2.0于2016年10月推出。
多设备支持:
响应与自适应;
移动优先:
从最小和最有限的设备开始,然后再是更大的设备;
SAP的UI主题设计器:
可以在这个设计器里编辑自己的主题,不过基础还是fiori的。这个网站我点进去查看过,愣是没找到使用路口,所以具体如何不太清楚,不过看到这个,联想到了之前推出的fusion design,总感觉有点相似。
运动设计:
平均眼球运动需要230毫秒(基于70-700毫秒的研究)。我们将通用动画分类为0 ms到500 ms。如果持续时间超过500毫秒,我们会说“连续动画”。
1.立即响应(<150毫秒)
当用户直接操作内容时,此持续时间适用 。如果需要此类型的动画(例如,要显示悬停效果,向下状态或拖放),设备必须立即做出反应,动画的持续时间不应超过150毫秒。
据尼尔森诺曼集团称,0.1秒是用户感觉他们直接导致屏幕上发生某些事情的响应时间限制。例如,为了给用户提供他们直接操作表的印象,用户单击表列与突出显示的列之间所需的时间不应超过0.1秒。理想情况下,这也是排序列的响应时间。然后用户感觉他们正在对表进行排序,而不是命令计算机对它们进行排序。
2.小动作(150毫秒 - 250毫秒)
在某些情况下,应用程序会以如此快的速度响应交互,以至于用户可能无法跟踪屏幕上发生的情况。为了以更自然的方式呈现反馈,我们在元素在位置或状态之间移动时显示短动画。
3.大移动 (250毫秒 - 500毫秒)
如果需要在屏幕上描绘大的移动,请使用较长的动画持续时间以避免快速闪烁移动。
4.连续动画 (500毫秒 - ∞)
这些动画的持续时间是不可预测的。任何不到一秒的时间都应尽快反映在屏幕上。但是,某些交互具有未知的响应时间。占位符动画是连续动画的典型示例。
Fiori Design Guidelinesexperience.sap.com