- 原文地址：A developer's guide to web design for non-designers
- 原文作者：Patrik Krupar
- 译者：Zheng7426
一份开发写给非设计师的网页设计指南
在我 14 岁的时候写了第一个网页，那是学校的一个作业。 任务很简单： 创建一个有些文字、图片和一个表格的简易网站。对于学校的作业，我一般都是先抛之于脑后，然后在最后一刻想出一些解决的方法。然而那一次，我全情投入。
在首次建立网页之后，一直以来我都把美化网站的外观放在第一位。无论你承认与否，这是个看脸的社会。如果你写的网页看起来好看，人们往往会更相信你，因为你知道自己在做什么，事情就是这样。
在做业余项目的这些年里，我把重心逐渐转移到了提升设计能力上，而不是一味地去完善我的编程。你会发现，成为一名编写算法的老手也就那么回事。而当你追寻着用 bootstrap 设计一个赚钱的业余项目的梦想时，你将不得不干很多不同的活。成为一名设计师就是其中之一。就像 Cross-fit 的运动员那样，独自创业的人们必须面面俱到才能表现出色。（译者注：Cross-fit 是一套高强度运动方法。）
精湛的设计不一定是在 Dribble 上获赞最多的，而是你一开始并不会注意到的，是 “老奶奶也可以做出来” 和 “哇，这简直炫得飞起” 之间的完美平衡。设计可以成为你的竞争优势，亦能成为棺材板上的钉子。
这无关天赋
我小时候玩 Minecraft 花了很多时间。在游戏里，我见过很多玩家们造的美轮美奂的建筑物。但是当我做点什么东西时，它看起来就像一个盒子，丑陋且没有风格。在 Minecraft 里你咋能做出漂亮的东西呢，对吧？
之后，我在 Youtube 上找了一个家伙，然后完美地山寨了他的建筑物。几周之后，我已经发展出自己的风格，可以自立门户了。突然间，我发现自己的作品看起来不像垃圾了。嘿，我甚至还赢了一场建筑竞赛。
设计是一项技能，它就像任何别的技能一样，是可以习得的。
找准你的金刚钻
在编程时，你使用 Notepad 写出来的应用程序可能和使用一个完备的 IDE 写出来的一样好……虽然用 Notepad 写的时候你可能会苦不堪言，而且很可能会花更多时间。在网页设计的世界里，MS Paint 将扮演 Notepad 的角色，就像 Notepad 一样，很少有人真的用它来设计……希望如此。
最流行的网页设计工具：
- Sketch，一个只适用于 MacOS 的工具，就像 React 一样，似乎会出现在每一个招聘要求上。它的价格是 99 美元一年。
- Adobe XD，一款免费的跨平台工具，相当于前端中 Vue 的角色。它的社区较小，然而非常容易上手。
- Adobe Photoshop，家喻户晓的针对设计任务的瑞士军刀。它相当于……你猜到了，jQuery。它的价格是 9.99 美元一个月。
使用 Sublime 或 VS Code 编写应用程序几乎没有分别，就如同你用 React 还是 Vue 来写前端一样，说到底这只是个人偏好问题。设计工具也是如此，因为每个工具都有其长处和短处。
我用的是 Adobe XD。我的主要原因在于它是跨平台的，所以我不会被 Apple 的生态系统绑架。这个软件背后有 Adobe 支持，所以短时间内没理由被淘汰掉。对于新手来说最棒的事情莫过于，自 2018 年 5 月开始， Adobe XD 可以被免费使用，除了很少的一些功能不可以免费使用（你也不太可能会遇到那些功能的）。
调整你的思维方式
对我来说，进入网页设计这一行所面临的最大挑战是调整自己的思维方式。我习惯于编写网站时一贯的设计思维。所有的元素都有先后顺序，其流动的方向是从左到右，以及从上到下。事实上，这样的方式会让你成为一个更糟糕的设计师。
设计工具都是混乱的，因为它们迫使你在每一个元素都被绝对定位的条件下进行设计。你需要接受这个思维方式上的变化。这将给你带来快速调整事物的自由，并且让试验变得更加简单。这一点至关重要，因为设计是一个持续的过程。在得到一个很棒的结果之前往往你需要做很多的改动。
学习一些工具
写代码时，你会用到像 div、span 以及 input 这些 HTML 元素，并且让浏览器渲染，然后才能看见它们。而对于设计工具来说，你完全可以跳过中间的步骤，而直接使用像形状或文本这样的可视化元素。
我选出了 4 种最常用的设计工具，方便你花更少的时间学习、花更多的时间去设计。这样一来，你可以尽快地开始练习。下面，我来给你展示这些工具的工作原理及使用方法。
矩形工具
矩形是最普遍的形状。你会发觉自己总是在使用它们。把矩形当成是一个 div。它简直是万精油，从创建文字到创建容器都很有用。
文本工具（标签）
文本工具，名副其实，是让你创建文字的。然而事情并没有这么简单，因为文本工具有两种状态：一种用于单行文本，另一种用于多个段落。幸运的是，学会正确使用它们是非常容易的。
第一种状态是单行文本容器，可根据文本大小调整自身的范围大小。它就相当于 <span> ，但除非你切换到下一行，它是不会自己换行的。这种状态的好处就在于，文本框的大小会根据行高和字体大小而自行进行调整。
要创建单行文本容器，只需单击选中的文本工具并输入文字即可。经验表明，这种状态适用于所有不需要具体宽度而且只占一行的文本。比方说单行标题和标签。
文本工具（段落）
第二种状态是有具体大小的文本容器，它的行为类似于有着具体宽度的 <p> 或是在网格系统中一列之间的 <p> 标签。这种状态的好处在于你可以控制文本框的大小。要创建段落，你只需点击选中的文本工具并长按来进行选择。经验表明，这种状态适用于占了不知一行的段落和标题。
选取工具
这个工具的用途是移动、调整大小以及复制。那些粉色线条显示了与周围元素的距离。蓝色线条可以帮助你无误地对齐元素。
直线工具
有的时候一条线可以有效地将设计的一些部分分隔开来。这就是直线工具存在的原因。从技术上来说，你也完全可以使用矩形工具，嘿嘿，这就好比说 div 可以用于任何事情。
设计的小帖士和技巧
布局
在网页开发中，布局通常被描述为标题、菜单、内容和页脚。其实这些只是一部分而已，布局可不止如此。它实际上是所有元素呈现出来的方式。
举个例子，当我为 Sidemail 设计项目信息时，我在卡片的内部均匀地分布了元素，使其感觉更完整，看起来也更加干净。
色彩
为了帮助你为下一个项目找到完美的颜色，你可以考虑一下色彩心理学(colorpsychology.org)。Paleton 是一个基于你的原色来找到完美颜色组合的实用工具。
使用原色及文本颜色的色调来建立视觉层次。使用彩色背景时，你可以针对文本尝试更深或更浅的色调。
文字设计
字体很大程度上影响了你项目的品牌形象，所以得机智地进行抉择。高端字体往往比谷歌字体更好看，但你刚涉足这个领域的话，先别急着买。就算是在谷歌字体里，也有些隐藏的好东西呢。
我常常用来在视觉上分解文本的一个技巧是把标签给大写化，并且加上更多的字母间距。大写字母构成的文字因为对称的缘故，从视觉角度上看起来更棒，但是不要过度地使用它，否则会令人不容易阅读。
设计一个主页（或登录页面）
我总是试图去避免一个诱惑，那就是设计当下流行的元素，并且把我想传达的信息满满地塞进去。相反地，我想出一些优势（而非特点），把它们放进故事里，然后通过视觉上有吸引力的页面来讲述故事。
在我构建了想要传达的信息之后，通常会去寻找一些灵感的启迪。有一个很好的资源是 land-book.com，一个人们可以投票并且满是漂亮的登录页面的网站。关于设计灵感的另一个很赞的网页是 interfaces.pro，你可以按类别过滤找到相关的页面，比如说价格、404 或者是 “关于我们” 这些类别。我一般就是各种浏览，直到找到足够多的让我觉得符合我想要的风格的网站。
真正困难的部分是将它们融合在一起。不幸的是，没有捷径可言。你必须得不断地尝试，直到你得到自己喜欢的结果。
你可能会遇到这样的情况 —— 你突然觉得一周前的设计看起来不够好，甚至有些难看，可一周以前自己还很满意。这样的情况其实相当正常，而且还是件好事呢。这主要是因为你成长、学习，并且变得更厉害了。旧日的挑战放在今日已经不再那么有挑战性了。要记住这一点，这样你才不会在激烈的竞争中无能为力。
小帖士：
- 独到的字体能有奇效
- 图形非常重要，去尝试使用一些插图或图像
- 通过运用多种色调来突出视觉上的重点。单纯的文字和三原色是不够的。
- 不要使用太宽的容器 —— 大概 1100 px 就够宽了
- 善用留白
- 要谈论优势，而不是特点
- 如果遇到瓶颈，去观察不同的事物寻找灵感
设计一个网页应用（或是一个控制台）
就像设计登录页面一样，不要闷头开始设计的阶段。这一次，你不是去讲一个故事。恰恰相反，易用性才是王道。拿好你的笔和纸，开始计划一下你的 app 有怎样的功能、它将依赖于什么，以及如何容易地在页面中引导用户。
如果有必要的话，只做一些草图或者线框。你可以选一个竞争对手，针对其设计做一次适当的勘查，借此看看自己缺乏什么，哪些地方可以做得更好，甚至可能变成竞争优势。有的时候，最好在做好计划之后休息一下，然后再开始设计。
在不针对具体的项目时，我可以给出的最好建议就是选择一个合适的页面布局。通常来说，所有网页应用根据其目的会用到这两种页面布局：固定宽度的容器，抑或是填满整个屏幕的流动容器。
固定容器
我更喜欢固定容器，因为固定容器避免了不必要的眼球运动，所以在使用时你更容易专注于一块紧密的区域。然而，由于宽度较小，使用固定容器的 app 会更难设计。
例子: Twitter, Buffer, DigitalOcean, Netlify, GitHub
流动容器
对于聊天应用、电子表格应用及屏幕上必须有很多内容的应用来说，流动容器是不二选择。但请注意，屏幕上的海量数据可能会使用户感到眼花缭乱。
例子: Slack, Intercom, Hotjar, Google Sheets, Trello, Spotify
选对容器相当重要，因为你整个页面的布局将会取决于你选择的容器，而且以后再更改容器的类型会比较累人。每一个项目都是独一无二的，当然也需要独一无二的解决方案。所以呢，不要害怕去尝试！
小帖士：
- 把事物简单化
- 使用易读字体
- 显示海量数据时，用到视觉层次
- 利用好竞争对手糟糕的设计选择
结语
请记住，设计可以成为你的竞争优势 —— 所以使用它并制作出美妙的事物吧。
你可以获取一份我自己最新项目的登录页面的 Adobe XD 模版 来开始你的设计之旅。只需 订阅我全新的邮箱列表，这份模版就会出现在你的邮箱里了。
不但如此，你将会在第一时间收到我下一篇文章的通知，我将在 Sidemail 上分享 69 天以来的进展 —— 关乎我正在研究的 SaaS 项目。它将囊括订阅者计数、网站访问量、花销和设计草稿等内容。不言而喻，我保证你不会收到来自我的垃圾邮件，我根本没时间整那破玩意儿。
我的推特私讯是开着的，所以说如果你在设计过程中遇到困难，或对这篇文章有什么别的疑问，完全可以私讯我。
*译者注：本文征得原文作者同意后翻译，如需转载请注明原文作者的名字及原文链接，请尊重原作者的知识产权。如有翻译上的不妥之处，还望指出，以便更改，谢谢。
