今天分享一篇 设计过程 的入门~ 其中也包含一些有用的 设计网站。如果你你想知道如何完整设计一个项目，可以一起来看下~
在本文中，将以设计一个 CMS 系统界面为例，介绍针对 web 开发中的通用设计流程。
CMS，全称 Content Management System，即内容管理系统
搭建环境
原文作者使用的是 Adobe XD（它是完全免费的）中的 Web 选项：
如果你使用 Sketch，Photoshop 或者其他软件，记得选择 文档尺寸 为 1920x1080，这是 web 项目的标准分辨率。
面向客户
如果你有机会跟客户直接交流，最重要的就是 确认客户到底想要什么。
假设本文设计的项目基于以下背景：
我们的客户，Pablito，拥有一个面包房，他想要一个 CMS 系统用来展示面包的图片和视频，并且系统里可以新增和编辑文章，而且这些文章可以从 CMS 中发布到 Twitter 和 Facebook。
那么让我们来列举一下这个项目的功能：
系统中的内容都有什么？
- 图片
- 视频
- 文章
系统的功能都有什么？
- 登录；退出。
- 上传图片；删除图片；分享图片到社交媒体。
- 上传视频；删除视频；分享视频到社交媒体。
- 创建文章；编辑文章；发布文章到外部博客。
好！下一步：调查。
不要重复造轮子
很多同学在做设计的时候喜欢从零开始，这怎么可能？ 设计不是魔法，互联网上 所有的东西 都是设计出来的，都可以参考！
在这个例子中我们要设计一个 CMS，所以需要一些灵感。你可以在以下网站找到：
Bëhance
搜索能力
不要跳过这个步骤。只需要在 Google 中搜索 CMS，然后依次点进去，你可能会看到很多网站是用 Wordpress，Wix , Joomla 或者 Drupal 做的。可以体验一下这些 CMS，看看人家是怎么设计的。
草图
是时候拿起 纸和笔 开始画出你的想法了。我的建议是用一个 小点儿的笔记本，这对于表达简单的想法很有帮助，因为你不必关心大片空白的区域。
下面给你看下我画的草图：
登录界面：
主界面：
图片展示界面：
分享模态框：
文章编辑界面：
侧边栏：
如果你想向客户展示草图，以便确认他们的想法，那么就去做吧！
设计，但是用灰色
我们还没有说到颜色的部分，暂且把它放在设计完成之后。
是时候将我们的草图数字化了。选一个软件然后开始吧~ 我们将会遵循几个简单的设计指南，如果你想要深入了解 如何做具有可用性和可访问性的设计，可以参考文末的文章。
那么为啥用灰度设计？因为这样我们就可以 专注于内容以及元素摆放的方式和位置。
第一步：网格
我们不会深入讲 网格。它们对于设计中定位和放置元素很有用，你可以根据需要创建。下面是基本的例子：
创建网格的步骤是这样的：在文档的 正中间创建一条简单的线。然后在右侧复制粘贴它。你可以按自己的想法控制线条间的距离。
然后只需要复制粘贴到另一侧使其对称即可。
第二步：摆放元素
为了简单起见，我只展示部分绘制的页面：
主界面：
图片展示界面：
分享模态框：
可以看到，我只用了灰色调。也没有用黑色，因为如果要突出某个颜色，可以使用不同类型的灰色。
终于，该上色了
好了，是时候为我们的设计着色了。
我们不会深入了解调色板和颜色的理论。你只需要记住：理想的调色板包括：一个主要颜色，一个次要颜色和一个高亮颜色。如果你的客户有 logo 或者商标，调色板中也应该体现其中的颜色。
假设我们的客户 Pablito 不介意使用的颜色。如果你不想在创建调色板上花费时间，可以看文末的第二个链接，找到一个自己喜欢并且反映了业务本质的调色板。
我选择了下面这个色板，并用它来作为示例：
下面是应用后的效果：
主界面：
登录界面：
图片展示界面：
上面所有的图标，都是在 Adobe XD 中完成的。当然你也可以使用外部图标库。图片也可以在 Unsplash 上找。
就是这样！
让我们总结一下上面的流程：
- 搭建环境。
- 确定 项目的 内容和需要的功能。
- 挖掘一下 现成的例子，寻找一些 灵感和能力。
- 在一个小本子上用纸和笔画出 草图。
- 用一个简单的 网格 以 灰度等级 将这些草图数字化。
- 创建一个 调色板。
- 为数字草图 上色，进行最后的 装饰和修复。
总结
设计是一个复杂的过程，但是在进行元素摆放和着色之前先弄清楚几个步骤，会让整个流程更 简单和快捷。
如果你连要设计的内容都不清楚，那你还怎么设计它呢？难道从猜测开始？或者说，如果你连项目具有哪些功能都不了解，又怎么开始画草图呢？
我的最后的也很重要的建议是：设计与 外观 无关，设计是用来展现 信息 的。你所设计的 所有内容 都与 信息 有关，没有信息，你的设计就只剩下...
...好看的颜色和各种形状。
全文完！希望对你了解设计有所帮助~
相关链接
- A simple design process for developers or non-designers
- Why usability and accessibility matters in Design: 5 tips
- 调色板 ColorHunt
- Unsplash
- About Grids
- About Typography
本文首发于公众号：码力全开（codingonfire）
本文随意转载哈，注明原文链接即可，公号文章转载联系我开白名单就好~
本文由 savokiss 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Jan 21, 2020 at 03:01 pm
灰度设计，豁然开朗