• [鄙视]江湖片子又脑残瞎举例了,尔幼稚到连“顺应民心就是人民主导”这个简单的道理都不懂?! 2019-04-20
  • 南宁前7月有115个空气优质天 美丽“南宁蓝”常现 2019-04-16
  • 南宁前7月有115个空气优质天 美丽“南宁蓝”常现 2019-04-14
  • 原来这小菜竟能让癌细胞自杀 以后可要多注意了-美食资讯 2019-04-13
  • 要有传承,但重在创新。这样才不会被历史的进步所淘汰。 2019-04-12
  • 红枣-热门标签-华商生活 2019-04-12
  • 个税法迎第七次大修 起征点调至每年6万元 2019-04-12
  • “黑洞”边缘的冥思者 2019-04-11
  • 外媒:乌克兰民间武装称找到马航客机黑匣子 2019-04-05
  • 四川乐山公交车爆炸案嫌疑人已被控制 排除恐怖活动 2019-04-05
  • 赌王四太家的豪宅曝光,网友:一点都不羡慕 ——凤凰网房产 2019-04-04
  • 鹿泉全媒体宣传互动平台--河北频道--人民网 2019-04-04
  • 报考人员注册应注意哪些事项? 2019-04-01
  • 网络作家“唐家三少”:将传播网络正能量进行到底 2019-03-28
  • 紫光阁中共中央国家机关工作委员会 2019-03-28
  • 小雨点

    游戏危害作文400字:从零开始系统设计

    小雨点 设计理论 3483浏览

    电子游戏的作文600 www.geg6.net 几个月前我换了新的工作,从移动端设计开始转而开始接触到大量后台界面的设计。标题从零开始也是这段时间学习了原子设计(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《原子设计》

     

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

    转载请注明:电子游戏的作文600 » 从零开始系统设计

    登录收藏
     
    你可能喜欢的:
    从设计师角度看待设计中的同理心从设计师角度看待设计中的同理心
    一文读懂最全语音交互设计流程一文读懂最全语音交互设计流程
    好的banner广告,都是用户设计的好的banner广告,都是用户设计的
    关于「我的」??榈纳疃冉馕?/span>
    设计语言 - 侧边导航栏/分页设计语言 – 侧边导航栏/分页
    网格的历史网格的历史
    产品设计中的破窗理论产品设计中的破窗理论
    设计理论研究,什么是游戏化动机模型?设计理论研究,什么是游戏化动机模型?
    简洁设计分析与思考模型简洁设计分析与思考模型
    设计心理学,你懂多少?(二)设计心理学,你懂多少?(二)
    ?
  • [鄙视]江湖片子又脑残瞎举例了,尔幼稚到连“顺应民心就是人民主导”这个简单的道理都不懂?! 2019-04-20
  • 南宁前7月有115个空气优质天 美丽“南宁蓝”常现 2019-04-16
  • 南宁前7月有115个空气优质天 美丽“南宁蓝”常现 2019-04-14
  • 原来这小菜竟能让癌细胞自杀 以后可要多注意了-美食资讯 2019-04-13
  • 要有传承,但重在创新。这样才不会被历史的进步所淘汰。 2019-04-12
  • 红枣-热门标签-华商生活 2019-04-12
  • 个税法迎第七次大修 起征点调至每年6万元 2019-04-12
  • “黑洞”边缘的冥思者 2019-04-11
  • 外媒:乌克兰民间武装称找到马航客机黑匣子 2019-04-05
  • 四川乐山公交车爆炸案嫌疑人已被控制 排除恐怖活动 2019-04-05
  • 赌王四太家的豪宅曝光,网友:一点都不羡慕 ——凤凰网房产 2019-04-04
  • 鹿泉全媒体宣传互动平台--河北频道--人民网 2019-04-04
  • 报考人员注册应注意哪些事项? 2019-04-01
  • 网络作家“唐家三少”:将传播网络正能量进行到底 2019-03-28
  • 紫光阁中共中央国家机关工作委员会 2019-03-28
  • 刮刮乐表情套路 中国足彩网赛事中心 乐彩ViP下载app 广东福利彩票 广东彩票26选5 登录北京时时彩官网 中国福利彩票官网app 快赢481号码合并走势 天津十一选五 体彩排列5走势图 竞猜足彩胜平负计算器 双色球大彩预测分析 凯利公式赌时时彩单双 竞彩足球半全场什么意思 江西时时彩软件下载 广东时时彩11选五停止