小雨点

pk10开奖号码:从零开始系统设计

小雨点 设计理论 3273浏览

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技巧 冠亚和稳赚 » 从零开始系统设计

登录收藏
 
你可能喜欢的:
简洁设计分析与思考模型简洁设计分析与思考模型
设计心理学,你懂多少?(二)设计心理学,你懂多少?(二)
关于无障碍设计的七件事关于无障碍设计的七件事
高级的设计技法,UI设计师应该有品牌意识!高级的设计技法,UI设计师应该有品牌意识!
做到这两点方案一稿过做到这两点方案一稿过
小小滑块大大学问,你真的会用滑块了吗?小小滑块大大学问,你真的会用滑块了吗?
潘帅:亲子类场景化产品的设计方法潘帅:亲子类场景化产品的设计方法
解析:「点赞」与「收藏」功能解析:「点赞」与「收藏」功能
移动搜索体验设计总结移动搜索体验设计总结
优秀的Aha Moment,能让用户上瘾优秀的Aha Moment,能让用户上瘾
?
  • 骆惠宁主持召开十一届省委全面深化改革领导小组第十五次会议 2019-03-25
  • 中信国安·北海第一城 2019-03-25
  • 刚拿到!江西语文、数学高考试卷和答案来了!各地作文题哪里最难? 2019-03-24
  • 打造金融科技交流平台 中小银行互联网金融(深圳)联盟成立 2019-03-24
  • 纪检组长拒捕涉腐老板“自证龌龊” 2019-03-23
  • 越冷越嗨!跟着彼得潘去无人岛冒险吧!早鸟票抢先购彼得潘 2019-03-22
  • 全国政协常委、中国石油大学(北京)校长张来斌谈“贯彻五大发展理念 推进高校改革发展” 2019-03-22
  • 广东金林村:农民爱写诗 2019-03-21
  • 候选案例:国酒茅台·国之栋梁 2019-03-20
  • 人民日报民生观:把住网红食品安全关 2019-03-20
  • 从海员到工人运动的杰出领袖——苏兆征 2019-03-19
  • 江西庆祝世界献血者日 2019-03-18
  • 上月广州楼市库存创近一年来新高 2019-03-18
  • 高德置地广场荣获RICS China Awards 2018三项殊荣 2019-03-17
  • 侯马国土局召开民生领域腐败和不正之风专项整治工作会议 2019-03-17
  • 979| 630| 387| 885| 478| 834| 102| 446| 376| 975|