分享Zomato新推出的sushi皇冠官方APP系统

印度外卖平台Zomato最新推出了全新的sushi皇冠官方APP系统,这不仅是一套为加速内部皇冠官方APP开发的皇冠官方APP系统,也让用户在使用app时获得更好的体验。接下来就让我们一起来看看Zomato是如何皇冠官方APP这套系统的,这套系统对公司的发展有什么意思。


什么是皇冠官方APP系统?

皇冠官方APP系统是由大量可重用组件组成,并结合了一定的规则,可存储视觉皇冠官方APP信息(例如颜色或间距),并使我们能够快速构建一致的应用。


为什么要建立Sushi皇冠官方APP系统?

Zomato的第一个皇冠官方APP系统创建于2017年。其皇冠官方APP目的是增强现有功能,但并没有我们期望的那样具有丰富的可扩展性。然后我们开始研究更灵活,更强大的解决方案。

考虑到Zomato的发展速度,我们必须保持良好的用户体验。对于我们发布的每个新功能,其目标应该是能够利用尽可能多的现有组件,以便我们不会引入任何视觉上的不一致。无论我们是使用像素,代码还是文字,都有适当的可以帮助我们的皇冠官方APP模块,它们不仅可以节省时间,而且可以保持我们的UI一致,从而创造更好的用户体验。

使用Sushi皇冠官方APP系统后,无需重新思考我们在Zomato上添加的每项新体验,又能使皇冠官方APP师,开发人员,产品经理以及其他利益相关者专注于轻松地将想法转换为实时产品。


如何皇冠官方APP这个全新的系统?

皇冠官方APP原理

在此过程中,我们牢记了一些核心原则–

  • 以用户为中心——我们希望确保用户与我们产品之间的每一次互动都是积极的,并能解决问题,通过多个平台与我们的品牌或产品建立牢固的联系。

  • 包容性——我们的产品为所有人提供服务,从还在上大学的青少年到对现代技术不太了解的人们。我们希望皇冠官方APP和构建我们的平台,无论能力,年龄和地理位置如何,该平台都应尽可能多的人使用。

  • 简洁性——我们每次都会通过清晰,专注的体验来带来愉悦和满足。通过依靠形式,功能和流程直观的现有通用皇冠官方APP模式,我们确保为所有用户提供更加用户友好的界面。

  • 一致性——通过在整个平台上对问题应用相同的解决方案,我们可以建立熟悉度的用户界面。


我们遵循了Brad Frost的Atomic Design原子皇冠官方APP方法,并将其映射到我们的皇冠官方APP系统中。

Zomato’s new Sushi Design System 7.jpg

建立基础

基础是数字品牌准则,该准则定义了我们皇冠官方APP系统的版式,颜色,图标,间距,阴影和信息体系结构。所有基础都是原子,分为两个层次–

准则提供了哲学上的连续性,但没有提供任何实际的代码,例如-我们的文本将如何截断,滚动行为,间距等,以便皇冠官方APP人员在创建新的皇冠官方APP模式时会参考并尊重它。

基础知识包括版式样式,颜色,图标,图像等方面的准则,可帮助制定一致的组件。

Zomato’s new Sushi Design System 8.jpg

基础:版式和色彩系统


Zomato’s new Sushi Design System 10.jpg

基础:图标,间距和阴影


“一个皇冠官方APP系统不应仅仅是用户界面组件以及一些皇冠官方APP理论的集合。”


组件库

组件指的是与众不同的用户界面(UI)元素,这些元素在产品的整个开发过程中反复使用-通常是可操作的,有时只是用来传达含义。但是,组成部分可以是分子,也可以是组织,因为两者之间有很好的区分。一些示例包括按钮,输入,选择,切换,列表,等级,标签等。

Zomato’s new Sushi Design System 9.jpg



每个组件均由标题,文字,图像,操作按钮和一些可选的文本/元素定义。

所有这些组件都存储在称为库的共享存储库中,这是构建一致的UI并加快应用程序开发的一种好方法。UI的一致性提高了用户对应用程序的熟悉程度,从而在与我们的产品进行交互时将用户的困惑降至最低。


Zomato’s new Sushi Design System 3.jpg

sushi组件(中级):线框图


Zomato’s new Sushi Design System 4.jpg

sushi组件(高级)—餐厅卡


模板

在定义了基础之后,我们收集了所有基本组件,然后将它们用于构建更复杂,可重用和可扩展的代码段,称为模板。

Zomato’s new Sushi Design System 6.jpg



方案

我们最终将在未来几个月中为我们的皇冠官方APP人员推出基于我们的皇冠官方APP系统的新Zomato App和Zomato Web版本。这是我们新版本的界面-

Zomato’s new Sushi Design System 2.jpgZomato’s new Sushi Design System 11.jpgZomato’s new Sushi Design System 1.jpg



关于皇冠官方APP系统的工具

我们开始使用Sketch构建Sushi UI套件。因为从那时起,每个人都喜欢处理单个Sketch文件,并且仅在需要时借助云,inVision或只是导出它来共享它。我们并没有高度依赖符号或组件的使用。我们只是根据需要复制了元素,并创建了另一个页面,而无需使用符号来更新元素。搜索现有组件和模板始终是一项繁琐的任务。

在Sketch中创建样式和组件符号几乎是一项可能的任务,但是维护/使用这些符号将使皇冠官方APP变得困难。在探索了一些替代方案之后,我们发现Figma最适合我们的皇冠官方APP系统。Figma使用专用的项目面板,使项目易于使用和组织得更好。





英语原文:https://medium.com/zomato-technology/zomatos-new-sushi-design-system-d7f4f98664c5

每天更新,
全站高品质素材免费下载!