如何用编程思维快速完成产品设计？发布者：本站     时间：2020-06-20 15:06:58

依旧使用本地存储照片，每次设计都重新制作每个组件时，我无法理解程序员只写下三行代码然后不断使用真实数据衍生出其它模式的行为…

以下是我常用的设计工具：

Sketch：常用来制作线框、界面，偶尔绘制图形。
Illustrator & Photoshop：用作图标设计、图形绘制、照片编辑等，但凡不适合用Sketch处理的都会考虑它俩。
Invision：用来制作简单的线框原型。
Principle & After Effect：用来制作交互复杂的原型。（Principle仍在内测，公开后你会得到更多关于这个工具的信息）
Zeplin：用以辅助设计师和前端开发的协同配合。
我认为Sketch与Zeplin之间依然有很大的空隙等待填补。

从创意到产品开发会经历数个阶段，一旦概念设计和线框完成之后，就需要考虑视觉定义了。主要页面的布局与视觉风格需要反复尝试才能找出最适合目标用户，并且能从竞品中脱颖而出的一套。

我将之称为创意阶段。Sketch的故事板特别好用，你能快速的设计稿之间进行迭代，尝试不同的图形、按钮、字体，放在一起依次查看。

直到进入下一步：产出阶段。

之所以叫做产出阶段是因为此时已完成了视觉定义，确定了字体、颜色、布局、形状等元素，接下来就是产出数页高精度视觉稿，即大家熟知的首页、设置、好友列表、个人资料、关注、启动页等等。我习惯戴上耳机听着音乐来搞定它们。

那么问题来了
从单一页面开始完成所有的页面设计，不仅花费了很多时间，而且极易消耗脑细胞。设计师青睐的Sketch对于这类批量产出类的工作无能为力。

更糟糕的是，有时即使尚未定义视觉语言，依旧需要设计这些页面，在已有项目上设计新的功能，或是将当前项目交接给后续的设计师。

2015年，我依旧尝试不同的工具组合并将其规则记录下来。

编程思维
当被问到是否会写代码时，我回答：“不会，但略懂一些代码原理。”

对我来说，弄明白我的设计如何以技术方式实现特别重要，因为它不仅让我设计出比较可行的产品，也能提升创意能力。

我学会了Javascript的基础和PHP/Mysql的逻辑，还会一点儿HTML/CSS。

我习惯频繁的与开发团队沟通，从而理解他们的工作内容。我知道iPhone的应用是由很多不同视图组成，数据如何迁徙转移，我该如何图形化的表达它们。

这些让我从图形元素的结构视角去看待一个产品，不是以代码编辑器的模糊印象去揣摩实现方式，而是像一个超大谜题一样抽丝剥茧的理解它们是如何构建和相互影响的。

原子设计思维
一旦你以编程思维开始思考设计时，你开始剖析产品的每个图形要素，这就是被称作原子设计的思维。

简单说，像字体、图片、图标或者按钮等每一个物体都称作原子。