响应式设计——以及网页开发对设计过程的影响

Posted 2021-04-30 读一点儿UX

原文链接:

https://medium.com/owl-studios/responsive-design-af7a1f14b991

这篇文章深入探讨了设计过程中网页开发的影响，特别讨论了响应式设计。它针对和设计团队协作的设计负责人/经理和开发者，以及想成为优秀网页设计师的视觉设计师。我会试着把问题展开，并提出实用的解决方案。希望能帮到你。

响应式网页设计。黑暗的艺术？

现在是2018年了。为什么我们还要讨论响应式设计呢？

我在2011年最初了解到响应式设计。我一开始读了Ethan Marcotte的书：'响应式网页设计'。

https://ethanmarcotte.com/

https://abookapart.com/products/responsive-web-design

网页设计的黑暗艺术？

响应式设计已经出现了约8-9年了。在早些时候，看见响应式的网站是非常让人叹为观止的！几乎就是网页设计的’黑暗艺术’。但是，那是很久之前的事情了。

作为设计师或开发者，我还在被客户，代理公司和设计师问这样的问题，这让我很诧异：

“…响应式网站…”

我的第一想法通常是：

“好，当然…”

但是，我的网页开发的私活很多都包括‘做成响应式的’。设计师让我给他们做一个网站，然后只发给我一张电脑版的网站原型图。我的第一个问题通常是：

“这在手机上是啥样的？平板上又是啥样的？”

想到电脑端之外的情况

引用自Ethan的书：

想到电脑端之外的情况，创作出能回应用户需求的设计，无论显示设备大还是小。

亲身经历告诉我，即使是现在，视觉设计师都没有在这么做。或者至少没有做得足够好。

出问题的网页设计的恐怖故事

为了提供一些背景信息，我想分享我网页设计出错的最糟糕的亲身经历。我不会公开点名。我只会说网站的流量很大，包括移动设备上的流量也很大。公司依靠着网页带来的销量。所以正确的处理至关重要！

一家公司已经花费了三个多月，远超100000美元在网站的改头换面上。他们创作了一些美丽的概念，但是远未达到能直接开始构建的设计的程度，苛刻的发布日期也步步逼近。

团队对除了电脑端之外应该怎么办没什么想法。当我质问负责的团队它在别的尺寸的屏幕上是什么样子的时候，他们回应的表情一脸木然，就好像我在问什么奇怪的问题！他们想当然的没有把考虑这些事情当做工作的一部分。

他们设计好了精美的网站的图片，仅止于此。根本什么都搭建不出来。

现在，我不是在说在开始搭建可执行的设计之前，对设计概念的探索是毫无价值的…但是，他们已经花掉了几乎整个项目的时间，搭建已经落后很多很多了（或者更甚，因为根本还没开始）。

在我打开他们的第一份PSD文件时，我发现网站的容器大约1750px宽。如果你还没理解其中意味的话，容我解释一下：这个宽度只适用于1-5%的流量！

研究了一会之后，我对其原因了解的很清楚了：

几个月来，有一队视觉设计师在热忱地创作着，完完全全没和任何有着响应式或开发知识的人接触过。

与此同时，他们在大的电视显示器上审阅作品，将拟真图打印在小的纸张上，钉在工作室的墙上。令人吃惊的是，这个过程中没人想过它在网页浏览器中是什么样的，更不用说更小的屏幕和移动设备了。

最后，他们在截止日期内发布了（点什么）。电视，网页只完成了一半，数不清的问题，很多非常愤怒的利益相关者们生气的质问道：

“这是怎么搞的？！”

开发者会搞清楚的

很不幸的，这就是很多设计师的思维方式。

我做过无数个需要把电脑端设计转化到功能齐备，可搭建，响应式网站的项目。

作为设计师，我将别的设计师作品中的坑填平。但是，作为开发者，我越过了自己的职责，来完成设计师们应该做的事情。

*注意：老实说，作为具有创造力的开发者，我其实（有时候）很喜欢这样的挑战。只是顺口一提；一般的开发者/开发团队并不喜欢这种事。

我们能够做些什么呢？

我觉得这取决于思维模式的转变：

• 用响应式的方法思考。

• 重新思考你的设计过程。

文章后面的部分里我会谈及我和合作的设计团队做过的被证明有成效的工作。但是首先；这篇文章中最有争议的部分是…自己振作起来…

设计师学习写代码的情况

我在冒险…但是，别怕！继续读我的全部的理由。这并非你所想的‘白纸黑字’…

‘开发者会搞清楚’的思维模式还不够好。

但是，有经验的设计师不只是能做出好的响应式网页设计的设计师，他们更能用交互式的思维思考。

这不像‘设计师应该写代码’一样白纸黑字。但是，它的确有用。

如果你不是真的理解它是怎样的，你就会亲自去试一试。但是，开发者不想让设计师去试一试，这样搞清楚到底要怎么做的任务就留给了他们自己。

我们都需要提升自己——无论是设计师学习写代码，或是和视觉设计师合作，教他们如何设计更好的响应式的网站。

这是16世纪的一个雕塑作品，叫做‘两个被劫掠的人和他们的尸骨’，由意大利的雕塑家Domenico del Barbiere所作。

https://www.metmuseum.org/toah/works-of-art/49.95.181/

这个艺术作品是就像达芬奇和米开朗基罗那样的意大利文艺复兴时期的艺术家的代表作品，他们解构了死去人类的尸体来研究肌肉的原理，所以他们就可以创作出更栩栩如生的画作和雕塑。

这种实践是全身心投入创造的绝佳范例。我不是在建议我们要从解构我们的网站用户，或是网页开发者开始！但是，这为以下问题提供了很好的思路：

更好地理解事物的原理对于力求完美而言是至关重要的。

拆解思考一个流行的例子

如果你曾和视觉设计师就‘设计师需要知道怎么写代码吗’这个问题争论过，那你一定听过这句话：

“但是建筑师并不知道怎么建房子啊！”是吧！

好吧，答案是否定的。大多数建筑师的确建不出房子。但是，好的建筑师知道里面的学问。他们不只是画好看的建筑图片。他们画出原理图。他们了解所用的材料——它们的外观，感觉，不同光照下的状况，等等。

我的父亲是一个施工技术员。他的工作包括风险评估，以及给建筑师的——通常不现实的——愿景报价。我们完全可以理解，他并不喜欢某些和他合作的建筑师！（听起来和视觉设计师和开发者之间的关系像不像？）

https://en.wikipedia.org/wiki/Quantity_surveyor

但是，最好的合作过的建筑师们——那些真的理解权衡的——设计的更现实，更有可行性，能给所有人节省时间和金钱。他很喜欢和这些建筑师合作！就像开发者喜欢和了解自己工作的设计师合作一样。这构建出了健康的工作文化和更好的最终产品。

我真诚地建议：

学习搭建自己设计的方法。这会让你成为更优秀的网页设计师。我觉得你会为其中的乐趣而大吃一惊。把自己的创作在浏览器中赋予生命，并精益求精是很有意思也很有满足感的事情。

但是，不然的话：

这并不是说视觉设计师不能成为优秀的网页设计师，或是学会响应式设计。他们只是必须以响应式的方式思考——像开发者一样思考，而不需要真的了解代码。

两个做响应式网页设计的方法

我有两种做网页设计的方法，但是，思维过程——响应式思维的概念——是始终如一的。我认为这是重中之重。

基本上我做视觉上设计多少（比如说细致的拟真图）取决于谁来构建它。

方法一：当其他人来构建我的设计

这种情况下，作为设计师：

• 我设计出每个断点。

• 我确保我包含了所有情境和状态。

• 我给出响应式模板设计。

• 我给出包含一切在视觉设计中没有明显表现出来的元素，比如说光标悬浮时的状态，的设计指南。

最终的产品如下图：

Adobe Portfolio的市场运营网站（2016）设计案例研究

http://roomfive.net/adobe-portfolio-brand-marketing/

方法二：当我要构建自己的设计时

与我之前说的包含一切断点和情境相反——这种情况下——我只设计电脑端的。但是，我会不断思考并设想更小的屏幕中它可以是什么样的。因为我是构建它的人，我尽可能快的投身浏览器当中来证实我的想法。

这种方法的实例之一就是我的个人项目，Club of the Waves：

http://clubofthewaves.com/

Club of the Waves设计案例研究

http://roomfive.net/club-of-the-waves/

正如你所看到的，我只做出了电脑端核心页面的拟真图。

我的设计过程大概是这样的：

• 这是已有网站的再设计。所以，我用了Google Analytics来了解浏览网站的‘大多数人’的浏览器的尺寸是多大。然后我按照这个尺寸来设计电脑端的拟真图。

• 再往后，我设计出浏览器剩下的部分——写代码——然后实时查看改动。这样，我可以调整尺寸，间距，布局和动画以及我心仪的内容。

• 我还能在不同的浏览器尺寸中做测试，随时加入需要的断点和媒体查询。

这个网页设计师方法的另一个例子是Owl Studios网站。我在电脑端做了拟真图，请看下图：

http://owlstudios.co/

Owl Studios设计案例研究

http://roomfive.net/owl-studios/

然后我在浏览器里玩了一下：

我没有确切的网页动效的方案。我只是感受一下，写写代码，然后刷新浏览器，直到达到我满意的效果。这几乎是‘开发的事情’，但是也百分之百是设计过程的一部分。

同样的‘在浏览器中设计’的过程也适用于所有断点。下面你可以看到最后它在移动端的样子：

微调的问题

我刚描述了我是如何在浏览器中微调的——加入动画，调整尺寸和间距，等等。

试想一下，对于一个有创造力的开发者来说这是多么简单，高效以及快速啊。现在，设想一下设计师试着把这些调整转达给一个开发者…

• 你会通过电子邮件一轮又一轮的支持他们的开发工作吗？

• 你会在Slack上骚扰他们吗？

• 你会提交大一堆GitHub Issues吗？

• 你能一次又一次用高亮了改动的新设计文档来支持他们吗？

• 或者说，你能坐在他们身边，告诉他们应该怎么做吗！？

我向你保证，没有开发者想要一个在后座上指手画脚的设计师！

然而，如果你这么做，这个来来回回的过程会很花时间，低效而且让人难受，对于所有人都是如此。

设计中的开发

设计师，产品经理，设计经理，甚至是开发者，都需要摈弃把开发与设计分开的想法。

这并不就意味着：

• ‘设计师应该写代码。’

• 或者，‘开发者应该做设计。’

它的意思是；我们应该齐心协力。

现在，html, CSS, 以及甚至是javascript都是设计过程的一部分。

设计在你关掉Sketch，Photoshop或是XD之后也并未结束。也不会在发布网站或产品后结束。

• 我们在浏览器里调整设计。

• 我们和真实的人们测试设计，

• 然后设计师和开发者齐心协力，对设计进行迭代。

网页动画可能是开发作为设计一部分的最明显的例子。我们的行业已经充满了动效网站。但是，不是设计师在做这件事*，是开发者在做这件事。

*我不是在说设计师要用特别高端的设计原型工具来创作视频和模拟来模拟加载状态和交互。抱歉，不是这样的。开发者仍然需要重建设计师所做的——尽可能接近——在资金和时间限制内。

Epicurrence №6 和 Basic Culture，在：‘给电子产品注入生命力’

https://www.behance.net/gallery/56086681/Epicurrence-No6

http://culture.basicagency.com/

https://medium.com/owl-studios/breathing-life-into-digital-products-268f8861b633

如果像上面提到的那样开发不被认为是创造性的，或者不是设计过程的一部分…那我就真不知道什么才算是了。

所以，在设计中和开发的角色建立联系。

要：

将前端和创造开发者带到设计过程中。早一点获取他们的意见，在还来得及的时候处理掉一切问题。

不要：

把设计在最终阶段扔给开发者，寄希望于它不出问题。不然，你就是在讲一个恐怖故事了，尽早啊！

你们是一个团队，行动一致

鼓励设计师和开发者同心协力的一个简单的方法是让设计和开发团队坐在一起。或者，至少靠的很近。别把它们分开。

• 把团队分开会带来不必要的壁垒。

• 创造分裂的文化。

• 让协作变得困难。

我已经在大公司和设计公司遇到过很多次这样的问题了。这是有害的。

用响应式的方式思考

没有设计师想激怒开发者，但是有时他们会在无心之间设计出不能用，或者不够完善的作品。作为写代码的人，我完全理解，但是仅仅专注于视觉的设计师通常做不到。他们需要学习如何用响应式的方式思考——像开发者一样思考。

所以，我们怎么教会视觉设计师用响应式的方式思考呢？

答案并非在他们犯错时对他们大喊大叫。而是教育他们，这样他们才能在设计过程和思考时形成更好的习惯。

下面是5个我曾在纽约的设计团队中试过的，被证明很有效果的点子：

1）用响应式模板来设计

这里有一个我制作的给之前工作中设计师团队用的Sketch模板：

这是个教会设计师们把所有情境考虑全面，完成更具有响应式的设计的好方法。

好的响应式模板应该包括：

• 显示每个断点的画板。

• 每个都有着清晰可见的响应式网格。

• 这种情况中，断点几乎等同于‘大的’和‘小的’电脑端视图，平板（竖直方向），和移动端。

现在，我要说；我认为你需要不仅仅把网页放在‘电脑端’，‘平板’和‘移动端’上考虑，又或者‘断点1’，‘断点2’以及等等…但是，这是一个帮助不做技术的人们来构建设计的好用的方法。并且它作为视觉设计方法来说已经足够好了。

我觉得最重要的一课是：

压力测试

你不大可能用这样的模板拟真方法来解决所有的响应式问题，但是至少它为设计师提供了一个简单的对设计进行压力测试的手段。运气好的话，能在交给开发者之前发现设计中的问题。

2）它不是一个‘版本’

我认为对于一些人来说，不再把移动端和平板当作一个‘版本’会是一个重要的进步。

• 它不是一个版本。

• 它是同样的网站、

• 它的HTML代码一样。

• 只有CSS变了。

‘版本’是把移动端流量导流到一个完全不同的网站的时期的遗留术语，目标是移动端用户——这是一个被响应式网站取代了的时代。我们需要摈弃这个遗留术语。

我认为这个‘版本思维模式’就是阻止一些设计师做响应式设计的原因。

“别的人会搞清楚其他的版本是啥样的…”

或是；

“不会有很多人用移动端来访问…”

行吧，这种态度已经不再合适了。因为‘其他的版本’比认识到并在意去思考更喧宾夺主。想到电脑端之外的情况是设计师的职责之一。

3）给所有的情境，而不仅仅是最理想的情境做设计

把响应式布局理解为：

• 用户界面几乎不会出问题。

• 能承载各种不同量的内容和字符。

• 对各种浏览器的宽度和高度都适用。

通常我发现设计师只为有限量的字符做设计，但是客户几乎一定会在标题上写更多的单词，而不只是“Lorem Ipsum.”

不要去按照匹配你设计的合适的字符数来设计。

把设计和内容当作同等重要，互相配合的两个部分。不要轻视其中任何一个。

不要为了让其他设计师印象深刻，或是获奖，或是在Dribbble上获得好评而设计。把作品立足于现实，用真实的内容和数据——或是很接近的数值。

4）用百分比，而不是像素点来思考

你可能会在设计软件中设计一个宽为100px的东西。但是，在浏览器中，100px会是容器的百分比宽度。所以，浏览器的宽度变小时，100px可能会变成80px, 60px, 40px等等。

现在，想一想你在那100px的区域中放的内容…

• 在小于100px宽度时，这个内容还能显示正常吗？

• 如果不行，你要不就得重新考虑布局，或是内容。

• 或者，创建一个断点来解决不再适用时的情况。

我强调用百分比而不是像素来思考，是因为这是我上一份工作的视觉设计师们最苦恼的部分。他们就是不能想明白这个元素按百分比变窄的概念，以及它为什么会成为一个设计问题。

我很快地创造了一个拟真图（上方）来向我上一份工作的新人（以及资深）视觉设计师展示这一点，这被证明很有用！

• 这显示了两种不同浏览器宽度中的，相同的12列网格。

• 它清楚地展示了网格的列是怎么变窄的，

• 并且还有，对于相同的文字，跨越相同的四列在两种情境中会产生什么样的影响。

有时候，眼见为实。在设计拟真图中，或是快速的浏览器展示中（通过类似于Codepen这样的服务）展示这些，对于让人们理解非常重要。

https://codepen.io/

5）在浏览器中，或是设备上查看设计

回到我之前说的恐怖故事：当我们的作品脱离现实基础时，就很可能会出错。所以：

• 不要（仅仅是）在大的显示器或是电视上审查作品。

• 不要（仅仅是）把拟真图打印出来，并钉在墙上看。

这些都不能准确的描述终端用户会看到的东西。而这才是真正唯一重要的。

并且，在设计视网膜屏幕和小的电脑端的时候要万分小心。举个例子，在MacBook上——或是别的笔记本电脑上——设计网站是困难的，因为你很有可能无法看到设计软件中的页面的全部宽度。所以，你会缩小视图来看你设计的作品。但是，问题是：只有你，你的设计师朋友，以及你的Dribbble粉丝会这样看你的作品。终端用户却并不会这样。

我希望下图展示了我的观点：

左边是你的网页设计拟真图。你的团队以整体的视角审查了它，和你审查一份图像设计一样。

但是，右边是随着滚动，用户实际上会看到的——在浏览器中。区别很大！所以，你必须考虑这个现实，而不是把页面当整体。

这不是图像设计，这是网页设计。

避免这个问题的一个好方法就是尽快构建原型。或者，另一个好工具就是InVision原型。这样，你的团队就可以在浏览器中审查作品，就好像终端用户看到的一样…或者，在他们手中的移动设备上。

https://www.invisionapp.com/

保持透视的视角，将设计立足现实很重要。

我衷心希望这能帮到你和你的设计团队。如果事实如此，请务必分享你的经历和感悟。

感谢Meagan Fisher的帮助。

转载自Medium.com

原文链接:

https://medium.com/owl-studios/responsive-design-af7a1f14b991

译者说：

下周因为圣诞节出游，可能没办法正常按时更新，在此提前跟读者们说声抱歉，以及感谢大家长久以来的关注。最后，圣诞快乐+新年快乐呀！祝大家新的一年能变得更好！