如何用编程思维快速完成产品设计？

人们普遍认为，过程和工具并不重要，重要的是思考和思考。尽管如此，我认为过程和工具也能反映设计师的设计态度和个人思维方式。愿意折腾和改变的设计师在接受新的设计理念和趋势时往往更容易适应。本文作者BenjaminBerger是一位来自法国的互动设计师。在这篇文章中，他介绍了常用的设计工具，发现了这些工具协作的缺点，并提出了他基于原子设计思维的进一步想法。你愿意和他讨论吗？如果我们称2015年为设计工具井喷之年，应该不会有太多异议。数据显示，目前约有34.7%的Medium文章(超过三分之一)与设计工具有关。但人们仍然习惯于使用静态图形工具来制作界面。当我仍然使用本地存储照片并重新设计每个组件时，我无法理解程序员只写三行代码，然后不断使用真实数据衍生出其他模式的行为。以下是我常用的设计工具：Sketch：常用于制作线框、界面，偶尔绘制图形。Illustrator&Photoshop：用于图标设计、图形绘制、照片编辑等，但任何不适合Sketch处理的人都会考虑两者。Invision：用于制作简单的线框原型。Principle&AfterEffect：用于制作交互复杂的原型。(Principle仍在内部测试中，您将在公开后获得更多关于该工具的信息)Zeplin：协助设计师配合前端开发。我认为Sketch和Zeplin之间还有很大的差距需要填补。一旦概念设计和线框完成，就需要考虑视觉定义，从创意到产品开发都会经历几个阶段。主页的布局和视觉风格需要反复尝试才能找到最适合目标用户的一套，并能从竞争产品中脱颖而出。我称之为创意阶段。Sketch的故事板特别容易使用。您可以在设计草案之间快速迭代，尝试不同的图形、按钮和字体，然后将它们放在一起，依次查看。进入下一步：产出阶段。之所以被称为产出阶段，是因为此时视觉定义已经完成，字体、颜色、布局、形状等元素已经确定。下一步是输出几页高精度视觉草稿，即著名的主页、设置、朋友列表、个人信息、*、启动页面等。我习惯戴耳机听音乐来处理它们。所以问题来了，从一个页面开始完成所有的页面设计，不仅要花费大量的时间，而且很容易消耗脑细胞。Sketch受到设计师的青睐，对这类批量生产类工作无能为力。更糟糕的是，有时候，即使视觉语言没有定义，这些页面仍然需要设计，在现有项目上设计新功能，或者将当前项目移交给后续设计师。2015年，我仍然尝试组合不同的工具并记录其规则。当被问及编程思维是否会写代码时，我回答说：“不，但稍微了解一下代码原理。“对我来说，了解我的设计是如何以技术方式实现的，因为它不仅能让我设计出更可行的产品，还能提高我的创造力。我学会了Javascript的基础和PHP/Mysql的逻辑，以及HTML/CSS。我习惯于经常与开发团队沟通，以了解他们的工作内容。我知道iPhone的应用程序由许多不同的视图组成，数据如何迁移和转移，以及我应该如何图形化地表达它们。这些让我从图形元素结构的角度来看待产品，而不是用代码编辑器的模糊印象来找出实现的方法，而是理解它们是如何构建和相互影响的，就像一个大谜一样。一旦你开始用编程思维思考设计，你就开始分析产品的每一个图形元素，这就是所谓的原子设计思维。简单地说，每个物体，如字体、图片、图标或按钮，都被称为原子。然后原子可以像细胞(列表条目)一样形成分子。一堆细胞变成一个组织，即列表。如此反复。在我公司，前端开发通常制定一套全景规范来描述产品的各种设计原子、分子和组织。我喜欢想象乐高积木的设计（我的朋友形容设计学校就像幼儿园一样，只是说设计原子按积木拼写…）。但我需要将这个过程直接适应到视觉设计工具中，以提高我的设计工作的一致性和效率。如果所有的设计原子都可以设计在一个面板或故事板上，它们会自动处理，而不用担心对齐、字体、颜色等。想象一下，如果原子设计规范能不断传递给下游设计公司，那该有多美。Matejhrescak开发了一个Sketch插件，可以快速设计组件，这对我来说只是一个好的开始。我希望继续升级它。一旦视觉语言确认了工作原理，您可以制作一个单独的文档来处理规范，并删除软件中的其他无用信息。第一步是设置颜色、主字体、图形、边距和空白。第二步，开始设置更精细的原子:标题、文本字体、按钮和输入框。最后，在故事板中制作基本的文本和图层：然后通过右键给出预设的样式。矩形会自动嵌套预设的风格，就像你手动编辑标签一样。通过设置边距，按钮会根据标签文本的长度自动适应，故事板的内部元素可以通过空白设置自动对齐。我们还可以设置更复杂的组织(如导航栏)来保持各地的一致性。在此基础上，可以添加更多的功能，使页面、列表和卡片可以通过设置每个元素自动生成。所有元素都会自动应用改变设计设置。这样可以很容易地测试不同颜色、字体风格等效果。界面模板套件的制作将不费吹灰之力，可以通过预设原始组件来实现。在从事移动设计三年后，我仍然能清楚地记住导航栏的准确高度。当然，在设置一些元素时，我们也可以及时提供一些可用的提示，如颜色、字体对比、响应元素的快速制作、调色板等，而不用担心太多的细节。目前，Sketch已经能够通过文字样式制作符号（symbol），Photoshop通过智能对象完成这些工作，但还远远不够。你怎么认为？你怎么想？