SAP成都C4C小李探花:浅谈Fiori Design Guidelines

Jerry: 我和周帅认识不久,自去年7月SAP成都研究院Cloud for Customer(以下简称为C4C)开发团队组建至今,根据这段时间和周帅愉快的合作经历,我觉得如果把周帅比作我读过的小说里的一位主人公,我认为是古龙《风云第一刀》中的主角李寻欢。

李寻欢出身名门,“一门七进士,父子三探花”,连其宿敌上官惊鸿也曾当面吐槽:“你本是三代探花,风流翰林,名第高华,天之骄子,又何苦偏偏要到这肮脏江湖中来做浪子?”

周帅也是出身名校,美国研究生毕业,在美国SAP实习过,做的也不是我们这些普通程序猿做的脏活累活,而是高大上的人机交互设计工作。

李寻欢是《风云第一刀》书中第一高帅富。小李飞刀在百晓生兵器谱排第三,在古龙笔下“谁的刀快谁就牛逼”的江湖里,这个排名相当于现在的福布斯全球富豪榜第三位。

书中没有提到李寻欢师承何处,一登场他的飞刀,轻功,内力等技能就点满了,而周帅的交互设计技能也没有人教,是在美国大学里自学习得。

古龙很少在书中花笔墨对人物外貌进行正面描写,我复制一段孙小红眼中的李寻欢:

而周帅在成都SAP研究院同事中绝对是鹤立鸡群的存在,超过190的身高,我每次和他对话得仰着头,费劲。最近周帅又换了个光头的发型。这个非常依赖颜值的发型得贝克汉姆陈冠希吴彦祖这类人物才hold得住,而周帅驾驭得轻车熟路,无怪乎深受SAP成都C4C开发团队所有女同事的喜爱。

古龙笔下的高帅富主角们身边是不缺美人的,比如“彩蝶双飞翼,盗帅夜留香”的楚香帅。而李寻欢作为一位浊世佳公子, 无论行至何处,一颗心始终在林诗音身上。有文为证:

而周帅,虽然漂泊了4个城市,换了3个办公地,但始终对SAP情有独钟。虽然期间身处机会无数的美国Palo Alto和互联网公司云集的北京,周帅对SAP的挚爱从未动摇,这份坚持正如李寻欢手中永远雕刻不完的那个林诗音的木像。

下面是周帅的正文。


大家好,我叫周帅,是SAP Hybris C4C团队的一名交互设计师。我这五年常住了四个城市,换了三个办公地,横跨了两个国家,就职于一家公司。

我本科和研究生学的都是工业设计专业,然而在北卡的两年研究生学习中,我发现了交互设计比工业设计更吸引我,便选修了一些相关的课程,到处参加专业性的讲座,也自学了许多相关的技能。在较短时间内完成了工业设计到交互设计的转型。

我是2015年年底作为实习设计师加入SAP Palo Alto的,当时是在SAP Hybris C4C交互设计组实习。

由于签证到期,于16年5月回国,在北京SAP干了一年左右的前端开发。去年C4C在中国正式成立开发团队之后,我作为交互设计师重返了C4C,也从北京搬来了成都。

正文:世界上一些著名的大型科技公司都有自己的设计语言(Design Language),从最初苹果的Human Interface Guideline(HIG), 到后来居上的谷歌 Material Design, 再到去年新鲜出炉的微软Fluent Design。这些设计语言已经深度融入并改变了人们日常对电子设备的使用习惯。在这些设计语言中,当然也有我们SAP独创的设计语言:获得过红点设计大奖的Fiori Design。

Fiori的问世与SAP创始人之一Hasso Plattner对设计的重视有关。早在2005年,他便在斯坦福大学捐资成立了Hasso Plattner Institute(HPI) of Design, 也就是后来大名鼎鼎的d.school。d.school能在全世界率先把设计思维(Design Thinking)作为一个正式的方法论向工科学生传授,并且Hasso积极将其融入SAP的DNA中,也是由于他看中了设计思维的发展潜力及设计的力量。现在我们普遍采用的设计先行的开发流程(Design-Led Development Process)便源于此。他当时说过SAP有些产品既不实用也不吸引客户,而我们还在销售它们,这在云计算时代行不通。这最终也促成了Fiori的诞生。

Fiori 致力于建立标准的现代化企业级用户体验,通过仅给客户提供他们真正所需的内容,使他们对自己的业务有完全的掌控。这个核心目标体现在五个设计原则中:基于用户角色,可适配不同设备,流畅直观的体验,简单和令人愉悦。

SAP Fiori 1.0 是在2013年正式推出的,一经面世便备受关注,并很快应用在了SAPS/4HANA, Success Factors, Ariba移动端以及C4C等解决方案中。所谓的Fiori 1.0是指所使用的SAP UI5控件版本介于1.26到.1.38之间的样式,大概长下面这个样子👇。

而从2016年10月开始,控件版本升到1.40之后,Fiori正式进入了2.0时代。画风更加唯美的同时,也进一步增强了灵活性和空间的利用。比如用户处理主线任务的可以兼顾追踪其他区域的动态,提升了导航特性,通过”viewport”可以做到跨界面交互,以及可以跨屏查看个人设置等等。因为本文是通识介绍,所以在此就不详细介绍设计的细节了。

Fiori是SAP的Global Design团队打造的设计语言,像是一个总纲,提供整体的原则及使用规范层面上的指导,但不针对具体的某个产品。

所以我们C4C成都组所属的SAP C4C 产品线就拥有一支专属的设计团队。团队内部还细分为针对业务的设计师,针对框架的设计师,视觉设计师和用户研究可用性测试的设计师。大部分设计师在硅谷,有三个在班加罗尔,我一个在成都,是针对框架的设计师。

上图是C4C产品现在的主页,乍一看是不是像极了Fiori 1.0界面?没错,作为SAP家族重要成员之一,C4C的确使用了大量的Fiori标准控件,这样能确保我们的产品与众多其他SAP产品保持样式的一致性,从而令用户对SAP拥有更统一的认知。然而由于一些特有的业务场景需要,C4C也有很多自己增强的控件。比如上图左侧黑色的导航列表,就是继承了标准控件的C4C特有控件。这么做可以进一步丰富了产品的特性,但同时也增加了日后维护成本。比如我们最近在做的主题升级,开发人员和设计师就耗费了很大精力对控件逐个定位并修改样式。我们设计团队也意识到了这个问题,现在正在组织编写C4C自己的设计规范,把C4C产品里所有使用到的控件都囊括在内,与UI5标准控件清晰的区分开。设计规范也将详细规定何时何地使用何种控件,并提供详细视觉设计稿,以便开发人员准确理解,避免歧义。

我们内部把这个界面叫做RUI(Responsive User Interface),因为它可以适配手机,平板,笔记本和台式机,也可以同时在app和浏览器上使用。

C4C大概是在2015年逐渐采用RUI设计的,那么C4C在此之前长什么样呢?请看下图。

是不是一股复古风扑面而来?我们内部管它叫UX3或者html5。因为它使用的是html5框架,因此不支持app端的使用。虽然不如RUI好看,但目前它的配置功能比RUI要齐全,所以很多客户现在还在使用这个版本。不过在不远的将来,RUI会具备UX3所有的功能,而且目前我们也已停止针对UX3的新功能开发,它会逐渐的被RUI取代。而这还不是C4C最老的版本,下图才是。

我们称之为Silverlight,因为用的是微软的Silverlight框架。这大概是2011-2012年C4C刚成立时的版本。而就在不久前,官宣停止对这个版本的维护,因此这个版本已经正式退出历史舞台。

我们用倒序的方式看了C4C的演化史,而这三个只是大阶段,每个阶段内都在根据客户的反馈及我们的调研结果不停地进行UX的优化。而一切设计的初衷就是让我们产品的用户用的舒适满意,并吸引更多的客户购买我们的产品。

要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏BestSDK

美摄SDK助力OPPO R15,上线相册“回忆”功能

近日,OPPO R15曝光其外观设计及存储配置等信息,并在系统上做出了大幅调整,虽然新机搭载的ColorOS 5.0尚未公布更多细节,但在3月初公测的Color...

40080
来自专栏web前端教室

为啥总感觉跟前端开发“隔”了一层?因为你没有构建自己的三位一体的前端开发能力。

三体一体,一般是指核反击能力,陆海空三个维度都有足够的能力。看清了哈,是反击的能力。 先说结论,我这个说法落实到具体人身上,就是“js技能 + 分析需求的能力 ...

19650
来自专栏轮子工厂

简历修改了100遍,却仍然没有找到满意的工作,你可能需要看一下这篇文章

最近恰逢秋招,身边很多朋友都跟我抱怨说,简历投出去了不少,可是很多都是石沉大海,没有了回音。于是就急的不行,纷纷跑过来请教简历制作大法。

11920
来自专栏钱曙光的专栏

一周极客热文:关于编程一些鲜为人知的真相

《关于编程一些鲜为人知的真相》一文讲了一些编程的真相:如果把所有项目的生命周期平均一下,那么一个程序员大概10-20%的时间用来写代码,并且大多数程序员可能每天...

22750
来自专栏HenCoder

关于 HenCoder

这,就是「HenCoder,给高级 Android 工程师的进阶手册」的意思,就是我对 HenCoder 的定位。

8730
来自专栏程序员的知识天地

程序员半夜12点没加班,领导:你来我公司养生呢?网友:凭什么?

每次阿里腾讯的朋友聊天问候对方的第一句话就是,你们加班多吗?每次阿里腾讯的朋友想要转岗到另一个部门问最多的就是,那边加班多吗?每次阿里腾讯的朋友跳槽最关心的问题...

10210
来自专栏机器之心

前沿 | 「变形金刚」面世:MIT推出微型可变形态机器人

机器之心编译 参与:李泽南 MIT 的研究人员表示,这种可变形态的机器人可以适应严酷的环境,如灾难现场和外太空,或许在不远的未来,我们就可以对机器人发出这样的指...

303100
来自专栏知晓程序

比导游更生动!这个小程序,让全国微信用户陪你看展览 | 亲儿子 #23

博物官通常是我们了解历史、增长知识的好去处。但是如果对作品不了解,逛一圈下来通常也就是看看热闹,更别提学到什么了。

13030
来自专栏Sign

关于h5游戏

多年前,我无意间发出个疑问句『h5是指html5?』 一位长者听到后拉住我说,『你刚说什么?h5就是html5?你这话我不能当作没听到,我要和你大辩300回合,...

44270
来自专栏北京马哥教育

怎样成为知乎大V?爬取张佳玮138w+知乎关注者:数据可视化

作者:Deserts_X 用python爬虫玩点好玩的;用可视化看见不一样的内容。 个人公众号: 牛衣古柳(ID:Deserts-X) 简书:ht...

41530

扫码关注云+社区

领取腾讯云代金券