小雨点

pk10一天稳赚5000图片:从零开始系统设计

小雨点 设计理论 3513浏览

pk10技巧 冠亚和稳赚 www.581n8.cn 几个月前我换了新的工作,从移动端设计开始转而开始接触到大量后台界面的设计。标题从零开始也是这段时间学习了原子设计(Atomic Design)所得到的和之前不一样的设计方法和思考模式,让我对界面设计有了更多新的认识。

 

??榛嘉?/span>

我们的界面也可以想象成和汽车一样由不同的??樽槌傻?,就像一辆汽车一样,由不同的零件相互配合组成一个完整的功能???,反之??橛挚梢圆鸱殖刹煌牧慵源死嗤?。


图片来源于网络

在原子设计(Atomic Design)中,也是运用这样??榛牟鸱炙嘉?,认为一套设计系统分别包含5个层面:原子、分子、有机体、模板、页面。

 

组合与构建

原子是在构成页面时最基本和最小的单位,,例如:颜色、文字、图标、分割线等。他们是组成页面最基本的元素,无法往下再做拆分。


图片来源于网络

有了最小单位之后,我们将几个原子组合起来便形成了分子,也就是在我们页面中所出现相对简单的组件例如:按钮、输入栏、导航栏、搜索框等。

当原子和分子组合排列就会得到有机体,它是界面中相对复杂的组件,你也可以把它理解成我们常说的「??椤?。


图片来源于网络

模版就是将上面提到过的原子、分子、有机体都排列组合起来,将它们分层放置在布局中。


图片来源于网络

我们将真实的数据、状态应用到模版中去,就形成了页面。


图片来源《Atomic Design》

值得一提的是,这里虽然是按照原子、分子、有机体、模板、页面的顺序来说的。但它们并不是分步骤地,并不是孤立的要去创建一个组件或者按钮样式然后依次进行。我在刚开始做的时候也常常陷入这样的困境。得益于诸如 Ant Design,Element等优秀的平台和规范指导,让我在一开始在没有进行后台设计的时候以为自已应该能很快得心应手。


图片来源《网易蜂巢交互文档》

可随着项目的复杂度提升,平台所提供的组件库,没有随之匹配的组件可利用。比如说组件中一行有两个操作,而自己的界面中一行需要有十个操作,这时候要是按两个的排列方式就不一定合适了,我就遇到过类似的问题,需要你单独去改一个之前没有的??楹妥榧?,查找了其他参考找到了合适的设计形式再放到现有的页面中就显得很突兀。

所以原子、分子、有机体、模板、页面并不是有顺序、有步骤的,不要是只盯一个组件或者???,你可以用俄罗斯套娃来理解它,它们在一起为的也是组成一个整体。


图片来源于网络

 

一致性

固定元素

前面我们说了通过对页面的拆分,我们得到了组成页面最基本的原子(尺寸、描边、文字、颜色、圆角等),在搭建页面的时候为了保证了整体页面风格的一致性。当设置好这些基本元素之后,就不要太轻易去改变它们,尤其是在页面已经完成之后。充分发挥这些元素的复用性,避免重复设计。


图片来源于网络

 

简化参数

前面说了因为有了像 Ant Design,Element等优秀的平台和规范指导,我一度觉得有了这些优秀的平台,之后在搭建后台页面的时候都不用太需要设计师的参与,在工程师沟通进行规范说明之后工程师自己就能搭建出一个后台出来,而即便是和工程师们沟通过所产出的也可能是这样的界面。

我们刚开始会设置一个统一的基数来进行设计、常见的比如说4、8、10。通常我们在设计完成标注的时候,也会把这些数值标注出来。但是大量的数值其实不太方便记忆,这时候我们可以把数值简化一下。


比如我的基数数值是4,那么8我就简化为2a以此类推,将这样的基数理念深植在团队成员的脑中以此来达成共识。

 

小结

关于原子设计还有很多东西没讲完,网上也有很多关于原子设计的文章和实践产品的产出,比如阿里 推出的 fusion design 很大程度使用了原子设计的概念,大家有兴趣的话可以去尝试使用一下。

下次我将和大家着重聊一聊在日常学习工作中怎么使用原子设计理念打开学习思路。

 

参考文献:

https://wenku.baidu.com/view/53a0322759fb770bf78a6529647d27284b7337a3.html《原子设计》

 

原文地址:海盐社(公众号)
作者: 刘清

转载请注明:pk10技巧 冠亚和稳赚 » 从零开始系统设计

登录收藏
 
你可能喜欢的:
设计师的进阶:洞悉产品诉求与用户诉求设计师的进阶:洞悉产品诉求与用户诉求
译文 | 5种方法使行为召唤按钮更直观译文 | 5种方法使行为召唤按钮更直观
【海平面】分享创意名片设计的21款案例【海平面】分享创意名片设计的21款案例
设计师进阶笔记|情绪设计让你的工作效率蹭蹭蹭!设计师进阶笔记|情绪设计让你的工作效率蹭蹭蹭!
从设计师角度看待设计中的同理心从设计师角度看待设计中的同理心
一文读懂最全语音交互设计流程一文读懂最全语音交互设计流程
好的banner广告,都是用户设计的好的banner广告,都是用户设计的
关于「我的」??榈纳疃冉馕?/span>
设计语言 - 侧边导航栏/分页设计语言 – 侧边导航栏/分页
网格的历史网格的历史
?
  • 赵振民的专栏作者中国国家地理网 2019-05-24
  • 习近平齐鲁之行的七个感人瞬间 2019-05-24
  • 抢先试驾新一代唐 更接地气的多面手 2019-05-23
  • 卫生费猛涨 商户讨说法 2019-05-22
  • 70年正青春,不停步向未来(评论员观察) 2019-05-21
  • 法国总统马克龙首次访华 法国居民期待成果 2019-05-21
  • 海南前5月查处赌博类治安案件2161起 持续铁腕治赌 2019-05-20
  • 后峰会时代,看崂山如何“再出发”! 2019-05-20
  • 2016中国重庆国际时装周 2019-05-19
  • 西部网(陕西新闻网)www.cnwest.com 2019-05-19
  • 回复@“老笑头”,你的这种逻辑是你当年生sj病住院时向你同室的“病友”学来的吧!哈哈哈哈! 2019-05-18
  • 谈“人的本质”却离“人的本质”相去甚远。“人的本质”是对社会财富的占有,包括对社会财富的共同占有和私人占有,对社会财富共同占有的所有制是公有制,对社会... 2019-05-17
  • 河北省实施中医药强省建设人才支撑计划 2019-05-17
  • 学思践悟丨修好共产党人“心学” 2019-05-16
  • 3岁小孩骑童车绊倒老人算交通事故警察这样解释 2019-05-15
  • 755| 496| 122| 581| 606| 133| 233| 354| 458| 855|