如果你是一名从事科技行业的设计师，你可能曾经听过或看过一个当下设计领域很火的话题: 在浏览器中设计。正如它的字面意义所说，与其花数小时、数日、数周、甚至数月的时间在Photoshop里设计出精确到每一个像素点的作品（自上而下的主流设计过程：由设计师设计视觉稿，再由后台程序员予以实现），在浏览器中直接设计使设计师可以拿着简单粗糙的草图直接进入编写代码并实现的过程。

但是如何才能在浏览器中高效地进行设计呢？

什么时候才是采用这个方法的最佳时机呢？

这篇文章将会告诉你什么时候应该用浏览器而不选用传统的Photoshop设计，以及如何才能高效地在浏览器中进行设计。

我认为“在浏览器中设计”的概念更多是一种用浏览器得到你想要的效果而不是单纯的设计。在我看来，设计的目的是为了给用户解决问题，而在浏览器中设计可以让你以最快的速度得到可以实现设计效果的代码——仅需要几次讨论和几张草图。

何时选择？

在科技论坛里有很多文章都在歌颂在浏览器中设计的优势——说它是网页设计的未来，或者说Photoshop应该被淘汰诸如此类。我承认用浏览器设计可以成为你进行项目设计时的第一选择，但有些情况下你并不可以这样做——比如客户有特殊要求，或者最终交付产品的属性并不合适，又或者有时间限制等等。

下面我列举了一些你不应该选择用浏览器设计的可能情形：

客户的需求并不合适在浏览器中实现。你可以说“那就不要跟他们合作了”，但是我们都知道现实往往不是由你能决定的。也许当下客户的首要需求是通过呈现一个设计精美的网站而在竞争者中脱颖而出或者是赢取投资者的青睐；也许客户对功能的需求一直在变；也许客户现有的版本存在着许多根本问题。在这些情况下，传统的先做线框图再生成设计效果图的方式也许可以更为有效的呈现他们所需要的原型。

许多客户将视觉效果图视为成果。有时候每周给客户10-20张高保真效果图比1-5张可以运行但平淡无奇的网页要来的有效的多。

构思中的网站功能与布局太过复杂，无法同时在视觉与代码层面同时实现。作为人类，我们大部分人的大脑无法支持我们在两个维度同时思考。尽管有人会说设计与代码是密不可分的，但对我来说在想象一个有许多变化的复杂布局的同时为这个布局写下相应代码是一件非常困难的事。研究表明人类并不擅长多线工作，用浏览器设计时就是如此。的确，长时间的锻炼可以让你更快的在脑海中想象出复杂构图、写出更干净的代码，所以请不要放弃。

<p class=”em”>有时候就是这样。比如，纳尼？！</p>

作品处于“改良”阶段。项目已经经过了初始的MVP阶段，现在在你面前的是一个设计得体的成品网站，你要做的只是为其增加更多的功能。如果用户已经表达过对浏览器中特定设计的不满，比如行动按钮不够清晰，或者他们不知道从页面的何处开始读起。这个时候你就应该回到Photoshop里仔细的重新审视一下这些设计。

在我看来，在浏览器中设计的最大挑战正如Andy Budd所说的一般：

“最好的设计工具将设计者与设计作品之间的界限降到最低（铅笔就是个很好的例子），用浏览器设计为这个过程增添了一层不必要的阻隔。”                                                                                                                                                                                                   —— Andy Budd

除此以外，你也确实享受着在画板上精心绘制每一个像素点的过程。许多网页设计师的前身都是平面设计师。对细节精益求精的精神早已融入了我们的骨子里。

我们选择用浏览器设计的理由各种各样，根据项目的不同我们也会相应采用不同的方法。当需要用浏览器进行设计的时候，以下就是我所用的方法。

如何开始？

启动一个设计项目的方法有很多种。比如我写这篇文章的时候，我采用的是philosophie在为新成立公司设计产品时所通常使用的方法。许多设计领域的领军人物，比如Dan Mall，都曾详尽阐述过使一个项目成功启动的方法，在此我就不加以赘述了。

在项目启动的过程中，如果我们已经明确了用户群、用户对产品的意见、产品自身的定位以及初步想实现的目标乃至基本的线框图和功能列表，那么我们就对产品的用户群以及客户的理念有了初步的认识。

我喜欢用情绪板开始我的设计。情绪板可以帮助我省时省力地绘制出品牌形象。我通常去Pinterest、Dribble寻找适合客户的视觉素材。

在这里我挑选出可以让我快速布局并且复制到UI的框架。如果是市场营销或者面向消费者的网站，我倾向于使用Foundation，因为Foundation里所有的选项都直接体现代码中。在我看来，Foundation比Bootstrap更为基础也更容易被覆盖。Bootstrap是一个发展成熟的框架，是以管理人员为用户的应用的理想选择。用Bootstrap上手很容易，但当你需要覆盖原有的CSS时将会十分痛苦。

接下来是设计指南。在设计之初准备好一份（或一系列）设计指南对于统一并简化所有的设计元素是非常重要的。由于前人已详细的阐述了设计指南的重要性，我并不会再加以赘述。不过我想说的是，一份设计指南可以使未来大幅改动设计稿的过程变得极为简单，这也是我们一开始就应该用浏览器设计的原因之一。我习惯根据需要手动创建UI元素的设计指南，但是你也可以使用KSS法甚至类似于Hologram的软件来帮助你自动生成设计指南。

最后，让我们来谈谈构图。我总是提醒自己不要忘记那些设计原则，比如眼球运动、层级结构和对比。在设计的过程中，这些很容易被人遗忘。当我全部的设计都由Photoshop来完成时，我可以考虑更多的设计理念问题与设计中的细节，我会测试不同的行动按钮、布局排版或是引人入胜的动画效果。从这个角度来说，用浏览器设计从根本上妨碍了我们跳出固有思维对设计进行审视。对我来说最简单的方法就是从最低层级往上叠加：先放纯文本，包裹上HTML语言，之后放入框架中布局，再加上设计样式标记并在CSS中定义它们。

使用浏览器工具

现在你已经在浏览器中创建了你第一代网站的原型，是时候和客户一起检查它了。接下来就是奇迹发生的时刻：你将在一次会议中解决绝大部分对设计的反馈，而不用进行无数次的反复更改。

下面告诉你我是如何通过Chrome的审查元素功能实现这一切的：

1. 客户想要改变文本。打开审查元素点击“编辑文本”，将改变后的效果截图。

2. 我们想要在页面的某一部分新增加一列。打开审查元素点击“编辑HTML”，复制粘贴入新的一列，同样将改变后的效果截图。

3. 我们想要增加表格中单选按钮的大小。点击放大镜后右击按钮。放大镜可以展示母元素中的子元素属性。改变样式代码并截图。

4. 我们想要改变颜色、大小、或者任何样式，右击审查元素，开始编辑。记得截图，截图，再截图。

比起用Chrome自带工具保存代码我更倾向于截图。这是因为使用审查元素并不能得到最干净漂亮的代码。审查元素只是一个用来测试设计决策以及展示给客户的取巧之道。但是通过截图可以让你记录下所有做过的改变，在你稍后需要编辑代码时给予你参照。

团队协作

声明： Philosophie选择Pivotal Tracker作为其项目管理工具，Ruby On Rails进行堆栈运算。

比起我早先提到的传统自上而下的设计加工过程，用浏览器设计可以让你和你的小伙伴们同时工作。第一稿可能充斥着基本的模板或者Bootstrap样式，这远远达不到MVP设计的标准。在这一稿之上，我们可以放慢脚步进行诸般改进比如品牌形象、字体、内容层级关系等等。你甚至可以进入上文提到的“改良”阶段并使用Photoshop进行精细修改。

我们是如何将设计流程放入PivotalTracker里的？我发现将用户需求分为前端任务和后段任务两部分是最有效的管理方式。这样你可以让设计跑在开发前头，或者让工程师先开发模型和控制器再让设计师进行外观设计，二者可以交替进行。

举例来说：当前端设计师在设计静态页面诸如首页、联系表格、内容页的同时，后台程序员可以生成登陆系统的输入框和视图。前端设计师可以随后介入进行样式的设计。

在实际项目中是如何运作的？

我们选择用浏览器设计的方法处理我们最近接的一个项目，因为我们认为这可以帮助我们在得到一个干净清新的设计同时将花费控制在预算内。我使用Bootstrap模板和Sublime Text代码编辑器快速的草拟出了页面布局，并在重要的地方进行一些简单的改进。此外，就像我前文描述的一样，我与后台开发者同时工作，在他们在后台工作的同时处理一些前端问题。

在项目中期，客户想要探讨一下新的首页的设计方向。为了不局限自己的设计，我决定使用Photoshop来展示一些精美合成的首页迭代。这样仅对单独页面反复修改就没有那么痛苦了。

有了Photoshop里合成的新样式以及设计好的UI元素，我仅仅需要在一个地方修改下样式，整个网站的样式就会变得与新的首页一样了。

小结

设计网页的方法并没有优劣之分。就算你经常用浏览器设计也并不意味着你应该放弃Photoshop。

对我来说，用浏览器设计最有价值的地方在于它可以减少传统设计流程带来的痛苦，让你在不需要牺牲自己设计原则的前提下与你的团队高效合作。

————————————————————

原文链接：https://medium.com/philosophie-is-thinking/the-when-why-and-how-of-designing-in-browser-3c7fa2ebcb94

原文作者：Brooke Kao

IFEC译者：米斯特华

审校：米斯特华