文档章节

网页中的原子设计

请勿吸烟
 请勿吸烟
发布于 2017/03/28 19:44
字数 1024
阅读 21
收藏 0

原子设计是一种网站迭代开发普遍,有效的方法。这个由Brad Frost在2013年引进的设计方法跟网页的敏捷开发类似。原子设计是模块化,动态的设计系统,由五个层面组成——“原子”,“分子”,“组织”,“模板”和“页面”。

“原子”,包括表单标签,输入框或者一个按钮,都是设计师在架构网站时所需要的基本模块。所有与项目有关的人员都需要在逻辑上遵循这种流程。这种技术性的,代码集中的开发方法把用户体验放在了很突出的位置。

“原子”包括更多的抽象元素比如调色板,字体,甚至更多的界面的无形部分比如动画。作为物质的原子是抽象的,单独而言是无意义的。但是它们非常适合在模式库的上下文中引用,因此可以很容易地看到全局样式的展示。

“分子” - 当我们开始把原子结合在一起的时候,事情就会变得更加有趣真实。分子由一组原子组成,是复杂元素的最小基本单元。这些分子都有自己的功能特性,并形成我们设计系统的骨干。

举个例子,表单标签,输入框或按钮本身是不能实现用户功能的,但是当它们被分组在一起形成表单的时候,他们就可以完成诸如搜索的任务。

组织 - 分子是我们需要处理以实现局部功能的一些界面板块,接下来我们就可以把分子组合起来形成组织。组织是由一组分子组合形成的相对复杂,独立的界面功能模块。

在网页原子设计中有以下几点需要避免的误区:

1. 静态工作流

通常情况下代理机构都会把基于印刷的工作流转移到网站的开发上。比如书籍或海报这样的静态媒介需要静态的网格和图案——但是媒体和用户在数字,交互格式中的永久交互需要复杂的动作反应循环。

2. 屈服于客户的压力

在原子设计中,数字设计师会从小到大整体地进行工作。因此,最终的布局相对较晚。一些缺乏抽象能力的客户不应该强迫他展示完整的设计。 

3. 千篇一律

成功的前端框架如Bootstrap或Foundation是现在网站大同小异的潜在原因。因此,网站中即使是最小的元(正如众所周知的Microinteraction微交互)都应该根据品牌风格精心设计,否则会非常千篇一律。

此外,还有以下几点是需要遵循的:

1. 对复杂项目使用原子设计

网站工程越庞大,遵循原子设计的作用和意义就越大,因为这样的工程需要大量的准备时间。单个的网页是不值得的。

2. 直接进入编码

概念和设计的修正应该直接在代码中完成,而不是建立固定的线框和PS布局模型。这需要允许模块在任何时候被重复使用。这种线框应该可以跟客户更客观地讨论,因为可以具体的显示用户如何感知信息的架构并与其交互。

3.  不带视觉元素测试

在测试的时候使用灰度原型能够减少视觉元素带来的影响,只有在释放编码线框后才能使用前端指南中定义的原子,分子和组织来开发布局。此外灰度原型可以由一些简便快捷的原型软件工具来制作。

4.  早期测试

建议在代码中尽早检查UX的概念。这样可以更好的理解编程上面限制和挑战。

© 著作权归作者所有

请勿吸烟
粉丝 0
博文 13
码字总数 15986
作品 0
成都
私信 提问
「CSS思维」组件化VS原子化

废话 从我两个月前,在掘金发第一篇文章到现在,关注数每天都在以至少20个人数的量持续增长,现在马上就要突破1000大关了。可是自己却断更了很久了,想想很对不起我的粉丝们(我是想当前端网...

ziven27
2018/07/09
0
0
Python-----正则表达式与Cookie的学习

正则表达式与Cookie 这篇我们将学习如何书写Python中使用的正则表达式,我们将从原子、元字符、模式选择符、模式单元符、模式修正符、贪婪模式、懒惰模式。 1.原子是正则表达式的最小基本单位...

android-key
2018/07/02
42
0
[译] 优化 MP4 视频以获得更快的流传输速度

原文地址:Optimizing MP4 Video for Fast Streaming 原文作者:BILLY HOFFMAN 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:HaoChuan9421 校对者:coolseaman、h...

郑昊川
2018/08/15
0
0
gitclebeg/nlp-spider-dynamic

#nlp-spider-dynamic ###专门为自然语言处理系统组件爬取数据的组件,动态信息爬取的网络爬虫 这个爬虫的特点是主要针对动态网页信息爬取的垂直爬虫。设计思路与八爪鱼采集器类似。 ###注意此...

gitclebeg
2015/08/21
0
0
前端思想实现:面向UI编程_____前端框架设计开发

引子,我去小说看多了,写博客竟然写引子了!!!不过,没引子不知道怎么写了。言归正传吧,前端这个职业,也就这几年刚刚火起来的职业,以前那个混乱的年代,前端要么是UI设计师代劳解决问题...

仲强
2016/09/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
717
10
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
40
0
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
26
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
75
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
74
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部