一个写代码的前端为什么要懂设计？

在我们正式开始使用React 框架编写我们的应用之前，我们最好对自己要开发的应用界面有一个比较直观的规划。既然我们要做的主要是前端用户界面的开发，那在我们编写代码构建各个组件之前最好能先有一个简单的图稿用作参照。

这个时候就涉及到原型设计，我们需要预先为我们要开发的界面绘制出一个草图。

我一个写代码的前端为什么要懂设计？

并不是说只有设计才会去画原型，设计可以分为视觉设计和交互设计。视觉设计可能更关注界面的配色、图形等；而前端则需要关注界面由哪些元素构成、如何布局等方面的内容。

在编写前端代码之前，我们要先确定界面上有哪些输入框、按钮、文本等内容。另外，React 组件化的特性要求我们要把界面在组件的粒度上进行划分。

原型设计软件介绍

原型设计可以使用很多专业的桌面端软件，虽然这些专业软件可能需要练习一段时间才能上手，但制作出来的应用原型效果肯定是最好的。如果你时间比较充裕，或者想要认认真真开发一个像模像样的项目，可以考虑使用此类专业软件来制作你的原型。

Axure RP

Axure RP 可以说是最强大的老牌原型设计软件了。

Axure RP 是美国 Axure Software Solution 公司旗舰产品，是一款专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或 Web 网站的线框图、流程图、原型和规格说明文档。

使用 Axure RP 除了能够画出你应用的界面外观，还能够模拟一些用户的交互流程，例如添加新的待办事项、标记事项完成状态等等。

你无须任何美术功底，Axure RP 内部预置了非常多的界面组件，直接通过拖拽的方式就能迅速组合出一个界面的原型图。

Axure RP 甚至可以强大到直接将设计好的原型导出为 HTML 代码，这同样能作为你之后开发编写组件代码时的依据。

Adobe Photoshop CC

PS 应该是我们最为熟悉的设计软件了。实际上它不光能够 P 图，在最新的 Adobe Photoshop CC 2017 版本当中，PS 提供了对 Web 端和移动端设计更为广泛的支持，并且你能够直接在 PS 内下载界面设计的模板。通过使用一些例如 craft 之类的原型设计插件，在 PS 当中你也能够非常轻松地设计出你要开发的应用界面原型。

Sketch

如果你是 Mac 用户的话，那你一定不能错过 Sketch 这款设计应用，它完全就是为了用户界面设计而生的。对开发者也非常友好，你可以直接用代码控制你的设计，设计稿的各个元素也能非常方便地导出，以便直接在我们要编写的页面当中使用。

Airbnb 的团队甚至开发了一款可以直接把 React 代码转换成 Sketch 设计稿的插件：

Sketch 也非常的轻量，上手很快，很适合非专业人员用它来做一些简单的设计。

在线原型制作工具介绍

当然，如果你觉得上述这些设计软件都太过复杂，或者你觉得没有必要为了一个简单的原型设计如此大动干戈，你完全可以尝试一些打开网页就能使用的原型设计 Web 应用：

       · Mockplus

       · 墨刀

       · balsamiq mockups

这些在线的原型设计工具大多提供了非常丰富的界面组件供我们使用，同样只需要简单的拖拽组合就能完成我们应用原型的设计，也能够展示一些简单的交互操作。

比方说我在这里就使用了 balsamiq mockups 制作了我们即将要开发的 Todo 应用的原型。

类似的工具有很多，我在这里简单列出几个仅做推荐，如果你觉得不满意也可以自行搜索相关的工具使用。

纸和笔

不过话说回来，有时候我们又何须那么麻烦。其实只需要简单的纸和笔，我们就能够画出应用的原型。

不论是用什么软件，采用何种方法，我们的目的是通过设计原型来理清我们开发应用时的思路，让我们即将要用代码编写的组件有一个具象化的展示，这样我们就不会觉得开发一个项目时无从下手。

设计原型同样也让我们有了一个机会，在正式投入开发编码之前进行试错。原型可以在一定程度上模拟出我们开发好的应用的交互流程以及用户体验，如此也就能够有效降低我们的开发成本，而不至于“直接上手就是干”，结果接下来又面临各种改需求的痛苦情境。

如何划分界面组件

初步分析我们要开发的 TodoList 应用，界面中大概需要包含以下几个元素：

      · 应用名称标题

      · 添加待办事项输入框

      · 待办事项列表

      · 事项状态（全部/已完成/未完成）导航

参照之前的原型图，我们要把这些界面当中的元素划分为一个个 React 组件。到正式编码开发时一个组件也就相当于一个文件。组件的命名你可以自己确定，只要表意清晰即可。

首先我们需要一个承载应用的根组件，可以叫做 Root ；之后例如添加待办事项的输入框可以叫做 AddTodo ；事项状态导航可以叫做 Footer ，因为我们在设计时把它设计成了应用的底部导航；导航链接可以叫做 Link ，其他组件也以此类推进行划分：

      · Root

            · Title

            · AddTodo

            · TodoList

                  · Todo

            · Footer

                  · Link

接下来在我们正式编码时也可以参考组件的划分来设置文件名称、编排项目的目录结构。

在实际的编写过程中也可以视情况继续细化或者合并一些组件，比方说完全静态不涉及任何逻辑的页面组件完全可以和其他组件合并，涉及到复杂用户交互或者需要填充数据的组件则可以单独划分。

React 组件化以及单向数据流的思想也要求我们在开发编码之前对整个应用的界面元素以及数据交互有一个非常清楚的认识。所以在正式编写组件代码之前，设计好我们应用的原型是非常有必要的。

总结

在我们独立开发一些小项目或者做 Side Project 的时候，除了编写前端代码之外，经常还会用到别的领域的知识。比方说在开发之前我们需要设计原型，这就要了解设计相关的知识；在开发完成之后需要部署到服务器，这就要了解后端方面的内容。简历当中常说的“良好团队合作精神”并不是一句空话，了解掌握一些基本的设计知识也有助于我们在一个团队当中更好地同设计交流合作。

在原型设计完成后，我们将正式进入开发阶段，下一讲我们就说说在开发工作前需要进行的准备工作。

GitChat畅销课——

《如何从零学习 React 技术栈》

>>> 现已 免费开放 阅读 <<<

>>> 扫码 立即领取 <<<

为什么要学习 React?

首先，React 相较于其他框架，其生态圈发展最为完整成熟，有非常多现成的、完整的解决方案。

其次，它适用于大中型应用的开发，便于团队中多人之间协作，很多大厂都在正式的项目中使用了 React。

在学会 React 之后，你的能力将不止局限于浏览器，React 还可以拓宽到使用 React Native 开发原生应用，以及使用 ReactVR 开发虚拟现实等各个领域。

通过本课程可以学到什么？

本课程共六篇文章，除了示例代码的讲解之外，还会对个别核心概念的原理进行讲解介绍，并用实际案例 TodoList 应用来展示。

在课程最后我还会分享一篇学习 React 的心得体会。

点击阅读原文能得到更多哦 ~