资讯中心 资讯详情
了解企业新闻和行业动态,获取官网通知公告,掌握做网站的基本知识和技巧!

浅析网站设计中的原子设计方法论的五个重要方面

来源:易助科技网浏览量:15收藏

原子设计是一种创新的五阶段界面创建方法。每个阶段都专注于实现比当今软件市场所能提供的更平衡、更一致的界面设计系统。


UI组件越灵活,从长远来看就越有弹性和多用途

      ——摘自Brad Frost的《原子设计》一书


原子设计的五个阶段包括:


原子 - 基本的UI构建块,是最基本和最小颗粒度的单位,无法进一步细分的UI元素。这些可以是web表单、输入字段、按钮和其他无法分解为较小部分的元素,因此得名。每个原子都有独特的特性,这些特性定义了它在复杂的用户界面系统中的工作方式。


分子 - 由一群原子按一定工作方式组和而成的简单UI组件,在界面中多以「设计控件」的形式存在。例如,一个搜索栏、一个下拉选择框,一个输入字段和一个按钮可以连接到网站上的深度一致搜索表单中。将原子组装成功能组件,有助于定义UI元素的用途并提高其整体效率。


组织 - 由分子、原子等组成的复杂UI组件,在界面中多以「基础组件」的形式存在,如:一个表单页面。这些帮助形成了界面的单独区域,可以随意重复使用。


模板 - 连接底层组件以形成基本页面内容结构的布局,在界面中也称为「业务组件」。这样的模板有助于可视化组件在特定上下文中的外观和工作方式,而不是过度关注给定内容的现有细节。在此阶段将处理基本组件属性,以便于将来更改内容。


页面 - 使用模板一定规则排列组合而成的完整视图,其中填充了真实的内容,有助于查看实际操作中的结果界面。页面也用于测试设计系统的效率。


网站设计-原子设计的五个阶段


及时采用基于原子设计原则的接口设计系统具有以下优点:


更好的用户体验一致性和完整性提高了转化率、收入和指标

更高的团队生产力和更快地实现新页面和功能

统一、富有洞察力的工作环境可提高不同专家的协作能力

方便的性能、可用性和跨浏览器测试加快了项目的启动和完成

坚实的基础确保了未来更改、配置和扩展的效率、安全性和盈利能力



以下就使用原子设计理论进行系统设计时应考虑的五个重要方面作简要分析。


1. 创建设计系统,而不是页面


当涉及到原子设计时,至关重要的是要理解您所创建的是设计系统,而不是单独的页面,页面是为了帮助用户更好地感知和理解系统而引入的。


我们不设计页面,我们设计组件系统

       ——摘自Brad Frost的《原子设计》一书


但是,如果我们希望创建智能界面来方便管理许多互连设备,我们就必须停止将UI设计前景限制在页面上。


网站原子设计-创建设计系统,而不是页面



2. 保持模块化


系统设计的另一个重要方面是模块化。系统的模块化性质使我们能够为接口的每个部分分配责任,并推广单一责任原则(SRP),尽可能让一个模块只负责完成一个职责或者功能。这里的一项关键任务是确保生成的界面在一系列设备上看起来和运行得同样好,包括智能手机、平板电脑、上网本、笔记本电脑等等。

关于广单一责任原则(SRP),需要说明的是,多数情况下,需视具体而定。在真正的软件设计中,没必要过度设计。我们可以先涉及一个粗粒度的模块,满足业务需求。随着业务的发展,如果模块越来越庞大,代码越来越多,这个时候,我们就可以将这个粗粒度的模块,拆分成几个更细粒度的模块,这就是所谓的持续重构。



3. 保持敏捷


原子设计方法优先考虑敏捷方法,但定义抽象敏捷性和敏捷模型中的敏捷性之间的区别很重要。敏捷是一种灵活的软件开发方法,基于其自身的使用指南,并结合了SCRUM(一种结构化项目管理方法)和Lean(一种优化开发原则)的力量。


随着用户设备范围的扩大,为其他网站页面创建静态布局变得不切实际。功能强大的设计师PC上的布局视图并不能告诉我们什么,因为它没有显示网站在现实生活中不同设备上的工作方式

       ——摘自Brad Frost的《原子设计》一书


敏捷哲学促进了跨团队绩效、加快上市时间、频繁的结果报告以及将大型议程细分为小型任务。这些原则有助于实现最终的开发灵活性和原子设计效率。



4. 使用UI框架


每个UI元素都需要单独的开发方法,以保证其在任何设备上的最佳性能和视觉美感。

专业化框架的一大优势是,它们大大加快了开发周期;也就是说,它们帮助开发人员快速将概念转化为原型并启动网站。除此之外,框架提供了在不同浏览器中尝试和测试的模板,使您能够专注于核心任务,而不是将时间浪费在额外的测试上



5. 创建样式指南


为了使用设计系统,你需要创建样式指南,定义你的品牌的独特属性。


品牌的声音从第一天起就没有变化,但它的语气应该适应形势和观众的情绪

       ——摘自Brad Frost的《原子设计》一书


样式指南是一套重要的指导方针,有助于避免发展和组织方面的混乱。样式指南的可用性促进了用户界面的一致性和完整性。这些指导方针有助于进一步的产品开发,为适当的产品性能设定结构和限制,并有助于避免各种误解。


开发者+设计师


前端开发是有效实现UI设计系统的关键设计方面。至关重要的是,使客户能够查看和评估所有工作流程阶段,而不仅仅是最终结果。


一个好的设计系统永远不可能是模板化的基础设施。它由迭代周期组成,只有当有动态沟通、持续反馈和纯粹的合作意愿时,迭代周期才能产生正确的结果。

       ——摘自Brad Frost的《原子设计》一书


一个成功的原子项目的另一个关键方面是从一开始就将前端开发与设计相结合。开发人员必须在最早的初步阶段参与整个过程,以帮助设计师做出明智的用户体验决策。这种及时的协作导致了将干净的核心代码转化为最终产品。它还加快了工作速度,提高了工作流程的透明度,并使设计师能够提前看到工作流程的成果。



最后的想法


长期的市场成功需要对设计过程进行更新。与其把重点放在最终产品上,不如把设计系统视为高质量产品和模式库的基础。


创建风格指导原则本身并不是目的。设计系统是一个可以无限完善的项目。它是关于创造一种有助于其他项目开发的活的、不断增长的产品

       ——摘自Brad Frost的《原子设计》一书


你的设计系统必须是敏捷的,对反馈做出反应,并能够随着它生产的产品而发展。调整良好的开发人员和用户协作是高效设计系统管理的另一个先决条件。最后,确保尽早根据相关市场趋势和项目趋势更新和更改您的设计系统。所以记住这一点,其他的事情都会随之而来。