Tagged

设计系统

A collection of 2 posts

搭建一套符号原子设计的设计框架
设计的故事

搭建一套符号原子设计的设计框架

摒弃页面思维网页、页面,这个词从互联网诞生的时候就开始存在了,但是‘页’这个词是我们对现实世界的概念过渡过来的,因为我们习惯叫一页纸,一页文档。 但是在现代的互联网中,页面这个概念整悄悄的消失了。 在互联网初期,一些公司只是把平面设计的的页面直接搬到网站上,时隔20几年,这个概念正在发生变化,大家不再把网页,当成一个单纯页面而已了,我们已经意识到页面已经消失了,取代它的是流动的数据,功能模块等等。而我们意识到,页面是一个时刻都在流动的媒介,它可以与人交互,可以快速的切换样式。一个新的概念也不断的出现在WEB社区中,它就是:模块化。 通过把元素分割组合而成的单独模块来组成一个页面。 页面的每个元素可以自由使用和可配置,并且随着终端设计的尺寸而改变展现效果。 在HTML的设计历程里,前端框架的使用,使得模块化变得非常简单和扎实UI框架twitter 开发的Bootstrap 目前是Git上最受欢迎的代码库。 优点是方便,简单,稳定。 框架的问题就是,仿佛大家都穿着同样的衣服。 设计系统良好的设计系统的基石是风格指南(style guide),它记录和整理了能够提供指引,使用和准则的设计资料。 品牌识别在传统的品牌设计中,VI手册一般是最终出现的产出物。 品牌识别指南(VI手册)定义了使公司保持独特的资产和材料。LOGO,

什么是原子设计系统
设计系统

什么是原子设计系统

原文翻译地址 “我们不设计页面,我们设计构成元素的系统。”——Stephen Hay随着网页设计的持续发展,我们认识到开发设计系统(design system)的重要性,而不是创造网页的简单集合。 很多人都提过创造设计系统,他们大都注重建立颜色、排版、网格、结构和风格的偏向。这种思考当然重要,但我没有那么痴迷于此,因为最终这些东西会并始终会是主观的。后来我把兴趣放在界面的构成元素及创造设计系统的方法论上。 在寻找灵感和类比时,我想到了化学。所有事物(无论固体、液体、气体,简单的还是复杂的东西)都由原子构成。这些原子单元聚合在一起构成分子、形成更复杂的有机物,最终形成了宇宙万物。 与此类似,界面由更小的元素组成。这意味着我们可以把整个界面拆分成一些基础模块[原文:building block ,建筑砖]并从这些模块开始。这就是原子设计的基本主旨。 Josh Duck的HTML周期表对网页设计元素做了很好的分析。 什么是原子设计?原子设计是创造设计系统的方法论。它有五个不同等级: 1.原子 2.分子 3.有机物