写给 Web 工程师的设计入门
in 码农技术宅翻译点文章 with 0 comment

写给 Web 工程师的设计入门

in 码农技术宅翻译点文章 with 0 comment

0-cover.jpg

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

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

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

搭建环境

原文作者使用的是 Adobe XD(它是完全免费的)中的 Web 选项:

1-adobe-xd.png

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

面向客户

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

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

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

2-baker.jpg

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

系统中的内容都有什么?

系统的功能都有什么?

好!下一步:调查。

不要重复造轮子

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

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

Pinterest

3-pinterest.jpg

Bëhance

4-behance.jpg

搜索能力

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

草图

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

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

登录界面:

5-sketch-login.jpg

主界面:

6-sketch-home.jpg

图片展示界面:

7-sketch-image.jpg

分享模态框:

8-sketch-modal.jpg

文章编辑界面:

9-sketch-article.jpg

侧边栏:

10-sketch-sidemenu.jpg

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

设计,但是用灰色

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

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

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

第一步:网格

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

11-grid.png

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

12-grid-split.png

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

第二步:摆放元素

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

主界面:

13-xd-home.png

图片展示界面:

14-xd-image.png

分享模态框:

15-xd-modal.png

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

终于,该上色了

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

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

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

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

16-colors.png

下面是应用后的效果:

主界面:

17-color-home.png

登录界面:

18-color-login.png

图片展示界面:

19-color-image.png

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

就是这样!

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

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

总结

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

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

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

20-information.png

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

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

相关链接


本文首发于公众号:码力全开(codingonfire)

本文随意转载哈,注明原文链接即可,公号文章转载联系我开白名单就好~

codingonfire.jpg

Responses