写给 Web 工程师的设计入门

今天分享一篇 设计过程 的入门~ 其中也包含一些有用的 设计网站。如果你你想知道如何完整设计一个项目，可以一起来看下~

在本文中，将以设计一个 CMS 系统界面为例，介绍针对 web 开发中的通用设计流程。

CMS，全称 Content Management System，即内容管理系统

搭建环境

原文作者使用的是 Adobe XD（它是完全免费的）中的 Web 选项：

如果你使用 Sketch，Photoshop 或者其他软件，记得选择 文档尺寸 为 1920x1080，这是 web 项目的标准分辨率。

面向客户

如果你有机会跟客户直接交流，最重要的就是 确认客户到底想要什么。

假设本文设计的项目基于以下背景：

我们的客户，Pablito，拥有一个面包房，他想要一个 CMS 系统用来展示面包的图片和视频，并且系统里可以新增和编辑文章，而且这些文章可以从 CMS 中发布到 Twitter 和 Facebook。

那么让我们来列举一下这个项目的功能：

系统中的内容都有什么？

• 图片
• 视频
• 文章

系统的功能都有什么？

• 登录；退出。
• 上传图片；删除图片；分享图片到社交媒体。
• 上传视频；删除视频；分享视频到社交媒体。
• 创建文章；编辑文章；发布文章到外部博客。

好！下一步：调查。

不要重复造轮子

很多同学在做设计的时候喜欢从零开始，这怎么可能？ 设计不是魔法，互联网上 所有的东西 都是设计出来的，都可以参考！

在这个例子中我们要设计一个 CMS，所以需要一些灵感。你可以在以下网站找到：

Pinterest

Bëhance

搜索能力

不要跳过这个步骤。只需要在 Google 中搜索 CMS，然后依次点进去，你可能会看到很多网站是用 Wordpress，Wix , Joomla 或者 Drupal 做的。可以体验一下这些 CMS，看看人家是怎么设计的。

草图

是时候拿起 纸和笔 开始画出你的想法了。我的建议是用一个 小点儿的笔记本，这对于表达简单的想法很有帮助，因为你不必关心大片空白的区域。

下面给你看下我画的草图：

登录界面：

主界面：

图片展示界面：

分享模态框：

文章编辑界面：

侧边栏：

如果你想向客户展示草图，以便确认他们的想法，那么就去做吧！

设计，但是用灰色

我们还没有说到颜色的部分，暂且把它放在设计完成之后。

是时候将我们的草图数字化了。选一个软件然后开始吧~ 我们将会遵循几个简单的设计指南，如果你想要深入了解 如何做具有可用性和可访问性的设计，可以参考文末的文章。

那么为啥用灰度设计？因为这样我们就可以 专注于内容以及元素摆放的方式和位置。

第一步：网格

我们不会深入讲 网格。它们对于设计中定位和放置元素很有用，你可以根据需要创建。下面是基本的例子：

创建网格的步骤是这样的：在文档的 正中间创建一条简单的线。然后在右侧复制粘贴它。你可以按自己的想法控制线条间的距离。

然后只需要复制粘贴到另一侧使其对称即可。

第二步：摆放元素

为了简单起见，我只展示部分绘制的页面：

主界面：

图片展示界面：

分享模态框：

可以看到，我只用了灰色调。也没有用黑色，因为如果要突出某个颜色，可以使用不同类型的灰色。

终于，该上色了

好了，是时候为我们的设计着色了。

我们不会深入了解调色板和颜色的理论。你只需要记住：理想的调色板包括：一个主要颜色，一个次要颜色和一个高亮颜色。如果你的客户有 logo 或者商标，调色板中也应该体现其中的颜色。

假设我们的客户 Pablito 不介意使用的颜色。如果你不想在创建调色板上花费时间，可以看文末的第二个链接，找到一个自己喜欢并且反映了业务本质的调色板。

我选择了下面这个色板，并用它来作为示例：

下面是应用后的效果：

主界面：

登录界面：

图片展示界面：

上面所有的图标，都是在 Adobe XD 中完成的。当然你也可以使用外部图标库。图片也可以在 Unsplash 上找。

就是这样！

让我们总结一下上面的流程：

1. 搭建环境。
2. 确定 项目的 内容和需要的功能。
3. 挖掘一下 现成的例子，寻找一些 灵感和能力。
4. 在一个小本子上用纸和笔画出 草图。
5. 用一个简单的 网格 以 灰度等级 将这些草图数字化。
6. 创建一个 调色板。
7. 为数字草图 上色，进行最后的 装饰和修复。

总结

设计是一个复杂的过程，但是在进行元素摆放和着色之前先弄清楚几个步骤，会让整个流程更 简单和快捷。

如果你连要设计的内容都不清楚，那你还怎么设计它呢？难道从猜测开始？或者说，如果你连项目具有哪些功能都不了解，又怎么开始画草图呢？

我的最后的也很重要的建议是：设计与 外观 无关，设计是用来展现 信息 的。你所设计的 所有内容 都与 信息 有关，没有信息，你的设计就只剩下…

…好看的颜色和各种形状。

全文完！希望对你了解设计有所帮助~

相关链接

• Why usability and accessibility matters in Design: 5 tips
• 调色板 ColorHunt
• Unsplash
• About Grids
• About Typography

本文首发于公众号：码力全开（codingonfire）

本文随意转载哈，注明原文链接即可