点击上面蓝字关注我们
封面
微信小程序的火爆又带来了一拨伪App高潮，微信小程序如何去做如何去设计，也困扰着所有正在勤奋加班加点做的人。本期不会涉及微信小程序的开发，让我们来谈谈开发之前的设计，如何高效去管理你的设计素材
文 | 灯泡点灯
编辑 | Lightman
时长 | 6 min
初级设计师 vs 高级设计师
首先看看初级设计师与高级设计设计过程的区别
初级设计师与高级设计设计阶段的区别
像编程一样管理设计
在Digital Design领域工作了4年后，我对整理和整理信息非常痴迷。这让我总结了一套如何管理设计资料的方法。
它是一种面向对象的，编程灵感的方法，是各种想法的集合。使用它来处理喜欢的设计软件或coding。它有助于将设计师与程序员连接并将它们放在同一个水平面上 - 更好的沟通以更好地了解和创作。我也受到Material Design，SCSS变量，Macaw，Origami，Atomic Design和各种pattern libraries的启发。本文会以之前我们做过的项目为实例讲解。
Attentions are pure
在一些大规模项目上工作时，我因为缺乏结构而厌倦了Sketch中麻烦的设计过程。虽然Craft中的最新更新（如嵌套符号）和样式插件取得了一些进展，但它仍然达不到完美工作流程所需的级别。为了更好地理解，以下是一些示例：
清除变量
让我们大体看看，我们用了什么样的圆角，字体大小，字体颜色或背景颜色。
样式分组
设计的哪些部分与变量的某些变化相关联？我想去定义哪种字体适合某些情况 - sans-serif的UI样式和serif的较大的文本，以确保更好的可读性。在另一个例子：有2种类型的排版样式 - 一个版本为浅色背景和一个为黑暗的。
变量配对
我想要我的所有16px的Karla字体的高度为1.2，无论是一个段落，一个笔记，项目描述或报价。
只改变一个变量
我想在项目的中间做一个小的变化，让50+的artboards同时改变，我不想再重复做同样的动作。假设我想在一个地方更改标题的字体，并看到它在每个Artboard的标题样式中同步更新。
我意识到，我在每个项目中继续重复相同的动作，就像使用主体字体颜色，辅助字体颜色和禁用字体颜色。我也意识到我没有对我创建的视觉层次任何控制。这就是为什么我试图自动化这些更改变化
基本原则
一切都是对象
每个布局都包含对象 - header，footer，title, button，下拉列表，链接。您可以将这些对象视为单独的实体，并单独设计它们。
一切都有属性
一切都有自己的属性。每个标题都有自己的颜色，大小或行高。每个按钮都有一定的大小，背景颜色或字体。这就是它在代码中的工作原理。同样也可以用在设计中
属性的继承
真正的乐趣：创建好了基本块，样本变量 - 即$ font-size-s，$ gray-500，$ border-radius-s或$ sans-serif。
它们一起构成了一个基本的库，你可以结合起来创建一个可视的层次结构。
然后你可以创建一些类别变量，$ font-size-main，$ color-link-secondary，$ border-radius-secondary或$ font-headlines。他们将作为基本色板和中间变量。将这些变量分配给各种用法和情景，就像在SCSS中一样。
最后，将这些继承的变量应用于对象 - 按钮，段落，标题，列表项名称，列表项描述，引号等...
Be Prepared For Everything
你可以设计对象的每一个可能性（主，辅助，清除按钮）或状态（禁用，正常，悬停按钮）。它需要一些努力，但它不需要很多时间，你要去准备这些可能性。遇到大项目，你会感谢自己当初这么做的设计~
如何在设计时使用
基本的方法是组织你的刚才准备的材料，思考所有的关系。下一个步是改进我们的工具来支持这个系统，从而使我们更高效。
例如，Sketch不能像在SCSS中那样继承样式。这就是为什么我为每个视觉组合创建视觉样式。
要只改变列表项描述的大小，我不可避免地更改所有使用相同文本样式的对象，即使我只想更改特定项。我需要一次更改所有使用font-size-s的对象。
想象一下，一个基于节点的编辑器（像Mindnode），您可以在其中查看和维护项目的视觉关系。它将能够读取SCSS文件并连接到Sketch以更新您的共享样式。
使用示例
字体
你可以有一个$ sans-serif字体用于UI和标题，$ serif用于较长的文本。
字体大小和LIne heights
在此示例中，行高与特定字体大小的特定字体配对（例如：每12个像素的Karla字体应具有1.8的行高，而14px的行高应为1.75，16px为1.6等）。请记住 - 更大的字体大小需要更小的线高，因为它们看起来比例更大。
颜色
像我之前提到的，当选择UI排版的颜色时，我意识到我总是需要一些基本，次要和禁用的字体颜色与贯穿整个项目的连续性。
通过对您使用的颜色进行阴影定义您的基本调色板。在光谱的末端选择更多的颜色阴影 - 你需要他们在光或暗界面更细微的细节
为什么这样做
更容易维护
创建关系和样式的系统可以让您在工作中有更多的控制。对象集合作为概述或文档，使您能够快速更改样式。通过提前定义好的样式，可以快速开展设计，并且也很容易把项目转交给别人或者协同合作
更好的一致性
使用一组基本的对象和参数强制您使用较少数量的段落，页眉，页脚，模态，按钮或列表项，如果您从头开始做的话，您将使用它们。首先使用你的库中的东西，如果它不工作，创建一个新的对象。这使您的工作更一致。你永远不会有6种类型的几乎相同的文字颜色了。
更容易理解
Consistency对用户体验非常重要。在UI中使用恰当数量的样式不会让人感到不知所措。简易程度取决于UI的复杂性，通过管理轻松释放了因为思考额外的排版而产生的困扰
END
别急
UniversApp 推出了澳洲百人IT求职技术群，欢迎加入Say Hi，这里是只有IT人士，分享技术，分享求职，欢迎长按扫码加我们客服然后邀请入群
我们是谁
Universapp是一家来自澳洲布里斯班，面向全球提供解决方案与服务供应商，致力于通过创新的信息化技术来推动社会的发展与变革，为个人创造新的生活方式，为社会创造价值。Universapp拥有自主研发的系统，大数据和机器学习算法。 公司主营业务包括：行业解决方案、产品工程解决方案及相关软件产品、平台及服务等。包括IOS，Android，Web消费级平台级及企业级开发，对SEO也有相当长的经验。团队由行业顶级IT人才组成，只做情怀产品。
商务联系
首席勾搭官 | +61 411 392 977
欢迎勾搭邮箱 | [email protected]
Universapp
微信：universapp
Bring stunning products to life
长按二维码关注
点击阅读原文，查看更多
