如何设计Predix的应用--基于原子设计模式(Atomic design)

作者:李丹,用户体验设计师,GE数字集团


Predix为了方便程序的设计或者开发者快速构建自己的应用,设计了一套可以直接使用的设计系统。接下来就会介绍如何用这套设计系统中提供的现成的控件快速设计和搭建自己的应用。


第一部分:基本组成

这套系统是基于原子设计模式(Atomic design)。从下图可以看出:

  • 世界万物是由“原子”组成,在设计系统中“Basics”和“Princiles”就相当于“原子”,是最小的单位。
  • “分子”由“原子”组成,在设计系统中就相当于"Components"。
  • “组织”由“分子”组成,在设计系统中就相当于“Templates”。
  • 由"Templates"组成"Features"
  • 由"Features"组成"Applications"


第二部分:Principle

"Principle"相当于一些通用的基本的逻辑和原则,这些原则会被应用于整套应用中,例如:"Grid"原则可以指导各个界面中坐标的统一规则。"Truncation"可以统一定义界面中对于如何截断显示字数的统一规则等。"Principle"可以让这个界面具有一致性。



第三部分:Basics

统一的规则制定好以后,可以开始关注Predix提供的很多Basic,这个就是你设计整个界面可以使用的最小单位,一些基本的控件。如按钮是什么样子,字体和大小用哪些和使用规则,Popovers是什么样子的等等。整个界面都是由这些最小单位的控件组成的。



第四部分:Components

组件是比前一部分控件Basic更加复杂的部分,他包含了一些更加复杂的交互和功能,组件通常可能是有多种控件"Basics"以及原则“Principles”组合而成的。如日历选择器,时间序列等。



第五部分:Template

Template模板是一个整屏幕的界面或者是一屏界面中的某一部分。模板注重的是内容的架构以及布局,而并不是内容本身。



第六部分:Features

Features是由各种template, components等组成的用于解决一个应用中特定问题的特征。如分析功能,案例显示,数据分析等等。



第七部分:Applications

Applications是最后整个程序,是各个"Features"最后组成的系统。



到此为止,您就知道如何应用Predix设计系统中的各个组成部分设计自己的应用程序了。



  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值