例如:颜色、文字、图标、浙ICP备11017208号-3分割线等

当前位置:manbetx官网手机版 > 浙ICP备11017208号-3 > 例如:颜色、文字、图标、浙ICP备11017208号-3分割线等
作者: manbetx官网手机版|来源: http://www.sihmiaomu.com|栏目:浙ICP备11017208号-3

文章关键词:manbetx官网手机版,原子理论

  近年来,Style Guide 逐渐发展衍变为 Design System,基于一套架构严谨、规则统一的框架体系,产品表现层面的设计可以逐渐实现模块化运作,从而大大提高设计效率。

  而 Atomic Design(原子设计)是构建 Design System 的核心指导理论。那么,以原子理论为依据构建的设计体系有哪些?如何运用原子理论构建自己的设计体系/组件库呢?原子设计体系使用过程中,又该如何规避常见的问题呢?本文将一一为你揭晓。

  在化学中,所有的物体都是由原子构成,原子组合构成分子,分子组合构成有机物,最终形成了宇宙万物。

  2013 年前端工程师 Brad Forst 将此理论运用在界面设计中,形成一套设计系统,包含 5 个层面:原子、分子、组织、模板、页面。

  原子是最基本和最小颗粒度的单位,在界面中以「元素」的形式存在,例如:颜色、文字、图标、分割线等。

  原子排列组合构成了分子,在界面中多以「组件」的形式存在,例如:导航栏、标签栏、搜索框、按钮、弹窗等。

  原子、分子排列组合构成了组织,在界面中多以「模块」的形式存在,例如:商品列表、内容卡片、入口模块、瀑布流图等。

  原子、分子、组织排列组合构成了模板,在界面中也称为「原型图」,例如:电商展示原型、外卖点单原型、店铺详情原型、商户管理原型等。

  模板填充了真实的内容(图片、文字等)后形成页面,也就是常说的「视觉稿」,例如:商品列表页、外卖点单页、教育课程页、资讯管理页等。

  原子设计理论以上文 5 个层面为基础,从原子到页面的构建过程中,充分发挥了设计元素的可复用性,避免重复生产,体现了一致性的设计原则。

  原子设计理论从抽象到具象、由局部到整体,层级分明,为设计师构建组件库提供了清晰的方法论指导,同时帮助团队成员更好地理解设计体系的价值。

  随着产品的不断迭代,以原子设计理论指导完成的设计体系,将会更加高效便捷地适应新的变化,你只需轻轻改变某些原子、分子的属性或组合方式,便会迎来整个体系的同步更新,易于扩展和维护。

  原子设计理论不仅方便设计师思考页面的整体性和统一性,浙ICP备11017208号-3也能让前端工程师和产品经理,清楚地了解产品框架层和表现层的逻辑结构,降低不必要的沟通和修改成本。

  UX Power Tools 提供了构建产品和应用程序所需的基本元素,包含了网页端和移动端,均可响应原子级别的操作。除了基础元素,这套体系还添加了各种常见的设计模式、工作流程和模板,让设计师能专注于做更重要的事。

  Frames 使用了精致的组件和先进技术,并结合 Sketch 构建了强大的 Web 设计系统,同样能满足修改原子,全局同步更新的功能,支持响应式布局。提供了近百个网页模板,可以非常迅速地完成效果图制作。

  Blueprint 是一款专注于 iOS 应用的响应式设计系统,包括嵌套符号、样式和文本图层,可根据需求轻松进行扩展。除了基本的 Library 功能外,它还提供了一些通用模板,比如登录、浙ICP备11017208号-3注册页等,开箱即用。

  这是一套免费的设计系统,它将按钮、输入框、下拉菜单、通知等控件,都制作成了嵌套符号,方便自定义和编辑。系统中的所有元素,都是作者从他在上排名第一的畅销产品 Dashboard UI Kit 中挑选出来的。

  原子设计理论最大的价值,就是为设计体系/组件库的构建提供思路和方法,如果你不满足于市场上现有的设计系统,我们还可以自己创建。下文我会简单介绍如何使用 Sketch Library 功能实现组件库的创建。

  一个 Library 本质上就是一个 Sketch 文件,当你编辑了 Library 中的 Symbol,那么调用了该 Library 的其他 Sketch 文件便会收到更新提示,你可以对变更进行预览、对比和确认,使这些 Sketch 文件中所调用的 Symbol自动更新到最新版。

  将颜色添加 Main、Text、Status 等一级分类,例如:Color/Status;再添加二级分类,例如:Color/Status/Success等,命名需使用 / 符号区分层级结构。定义好颜色和命名后,将每个颜色转换成 Symbol,便可统一调用。

  根据设计规范,将不同字号的文字样式逐一罗列出来,例如:Large Title、Title 1、Body 等,按照 样式名称/颜色/对齐方式 的层级结构,将文字赋予 Text Style,例如:Body/Blue/Left等,可使用 Rename it 插件批量命名。重复这个操作,直到整理出所有的字体样式。

  将图标放置在 24*24px 的安全框内,从定义好的颜色系统中选择合适的 Symbol,调整到相同的尺寸后覆盖在图标之上,再把图标设置成Mask 蒙版,便能获取到颜色了。这种 Symbol 嵌套的方式,有利于颜色的同步更新。

  将图标转换成 Symbol,在属性面板中锁定Size,并把Resizing设为上下左右同时吸附,以确保图标在使用时可以等比缩放。重复这个步骤,直到整理出所有的图标 Symbol。

  使用快捷键「cmd+, 」打开 Preferences 面板,选择「Libraries」标签,点击「Add Library」按钮添加刚才的 Sketch 文件,完成后就可以从其他的 Sketch 文件中,对此库里的元素进行调用了。

  当你编辑了 Library 中的 Symbol,那么调用了该 Library 的其他 Sketch 文件便会收到更新提示:Library Update Available(Sketch 工具栏右上角),点击后可以对变更进行预览、对比和确认,从而自动更新到最新版。

  根据以上对原子的定义和命名方式,依次完成对其他原子、分子和组织的定义,整个过程通过 Symbol 的不断嵌套,最终实现 Library 体系的创建。

  在哲学中,真理分为绝对真理和相对真理,绝对真理是不受任何限制的广义的道理;相对真理是在特定条件下成立的有局限性的道理。原子设计理论就是一种相对线. 适合用工程师思维

网友评论

我的2016年度评论盘点
还没有评论,快来抢沙发吧!