响应式设计——以及开发在设计中的作用
这是对开发在设计过程中的作用的深入探讨，重点是响应式设计。它面向与设计团队合作的设计领导者/经理和开发人员，以及希望成为更好的网页设计师的视觉设计师。我将尝试解决问题，并提出切实可行的解决方案。希望对您有所帮助。🙂
响应式网页设计。黑暗的艺术？
现在是2020年。为什么我们仍在谈论自适应设计？
我早在2016年就学会了响应式设计。我首先阅读了Ethan Marcotte的书“响应式Web设计”。
网页设计的黑暗艺术？
响应式设计已经存在大约8-9年了。在早期，看到一个响应迅速的网站真是令人印象深刻！几乎是网页设计的“黑暗艺术”。但是，那是很久以前的事了。
...
超越桌面思考
不论显示器大小，都可以在台式机之外进行思考，并设计出可以满足用户需求的设计。
根据我的经验，即使是现在，视觉设计师也没有这样做。或者至少做得不够好。
...
开发人员会弄清楚
不幸的是，这就是许多设计师的想法。
作为设计师，我正在填补其他设计师的空白。
但是，作为一名开发人员，我要超越这些才能完成设计人员应具备的功能。
注意：说实话，作为一名体验设计师，我实际上（有时）喜欢这项挑战。但其他人说的更多的是；普通开发人员/开发团队不会对此表示赞美。
我们对于它可以做些什么呢？
我认为这归因于思维方式的改变：
·反思性思考
·重新思考你的设计过程
设计师学习编码的案例
“开发人员会弄清楚”的这种心态还不够好。
如果一个有经验的设计师能够以响应的方式思考，那么他们不仅可以成为一名优秀的响应式网页设计师。
如果你真的不了解某事是如何工作的，那么你只会被它刺痛。事实，开发人员不希望设计师对此行动，更希望，让他们自己弄清楚它是如何工作的、运用的。
我们所有人都需要做得更好-无论是设计师学习编码，还是与视觉设计师合作教他们如何设计更好的响应式网站。
意大利雕刻家Domenico del Barbiere16世纪创作的版画
被称为“两个男人和他们的骷髅”。
此艺术品代表了意大利文艺复兴时期，例如伟大的莱昂纳多·达·芬奇和米开朗基罗，他们解剖了人体以更好地了解肌肉的运作方式，从而可以创作出更逼真的绘画和雕塑作品。
这种做法是工艺的不可思议的例子。不是建议我们开始剖析网站的用户或网络开发人员！但是，这是值得思考的问题：
更好地理解某件事是如何工作的，这对你做好工作至关重要。
剖析流行类比
如果您曾经与视觉设计师争论过“设计师应该知道代码”，那么您可能已经听过以下话：“但是建筑师不知道如何建造！” 知道了！😎
好吧，不。大多数建筑师无法建造建筑物。但优秀的建筑师将对其中的内容有一个很好的了解。他们不只是绘制漂亮的建筑物图片。他们绘制原理图。他们了解所使用的材料-它们的外观，感觉，对不同光线的反应等。
就像开发人员喜欢与知道他们的知识的设计师一起工作一样。这样可以建立更加健康的工作文化和更好的最终产品。
建议是：
了解如何构建自己的设计。它只会使你成为更好的网页设计师。我认为你会喜欢它，并会感到惊讶。将自己的创作变为现实，并在实际中对其进行改进，这很有趣，并且非常令人满意！
但是，失败了：
所有这一切并不是说视觉设计师不能成为优秀的网页设计师，也不能被教导响应式设计。他们只需要学习做出响应式思考-像开发人员一样思考，而无需实际知道代码。
响应式网页设计的两种方法
我采用两种方法来进行Web设计，但是思考过程（即响应式思考的概念）始终是相同的。我认为这是关键。
本质上，我实际进行视觉设计（即创建详细的模型）的多少取决于谁在构建它。
方法1：当其他人要构建我的设计时；在这种情况下，作为设计师：
·设计每个断点breakpoint。
·确保涵盖了所有情况和状态。
·提供响应式模板设计。
·提供了样式指南，涵盖了视觉设计中不明显的所有内容，例如悬停状态等。
最终产品看起来像这样：
Adobe Portfolio营销网站（2016）设计案例研究
方法2：当我要建立我设计的自己
与我之前谈到的涵盖所有断点breakpoint和方案的说法相反（在这种情况下，我仅针对PC进行设计）。但是，我一直在思考并设想在较小的屏幕上的显示效果。由于我是构建它的人，因此我会尽快进入浏览器以验证我的想法。
这种方法的一个例子
Waves设计案例研究
如您在上面看到的，我只在桌面上模拟了核心页面。
我的设计过程大致如下：
·这是对现有网站的重新设计。因此，我使用Google Analytics（分析）找出“大多数人”使用哪种浏览器大小浏览网站。然后，我设计了桌面模型以匹配该大小。
·我在浏览器中设计了其余的部分-编写代码-并看到我的更改实时发生。这样，我可以根据自己的内心调整内容的大小，间距，布局和动画。
·而且，我可以在不同的浏览器大小下对其进行测试，并在需要时添加任何必需的断点breakpoint和媒体查询。
发展就是设计
设计师，产品经理，设计经理，甚至开发人员都需要停止将开发与设计分离开来。
那并不一定意味着：
“设计师应该编码。”
要么; “开发人员应该设计。”
它的意思是；我们应该一起努力。
你是一个团队，像一个人一样
鼓励设计师和开发人员更好地合作的一种简单方法是让你的设计和开发团队相互配合。或至少彼此靠近。不要隔离它们。
·划分团队将建立不必要的界限。
·创造分裂文化。
·并且使协作变得困难。
在大型公司和设计机构，我已经经历了很多次这样的错误。这不是健康的。
使用响应式模板进行设计
一个好的响应式模板包括：
·代表每个断点breakpoint的画板。
·每个都带有清晰可见的响应式网格。
·在这种情况下，断点大致等于“大”和“小”的桌面视图，平板电脑（人像）和移动设备。
现在，我应该说；我认为重要的是不要将网站仅视为“桌面”，“平板电脑”和“移动设备”上的网站。或“断点1”，“断点2”等等……但是，对于非技术人员来说，这是一种有效的构架方法。而且，对于这样的视觉设计方法来说已经足够了。
我认为这里的重要教训是：
这不是“版本”
对于某些人来说，一个有力的认识就是不要将手机和平板电脑视为“版本”。这不是版本。
·这是同一个网站。
·这是相同的HTML代码。
·仅CSS已更改。
“版本”是将移动流量重定向到针对移动用户的完全不同的网站的时代的遗留术语-取代响应型网站的时代。我们需要从这个传统术语继续前进。
我认为这种“版本思维方式”使一些设计师无法进行响应式设计。
针对所有方案进行设计，而不仅仅是最佳方案
将响应式布局视为：
·几乎无法中断的UI。
·可以占用任何数量的内容和字符。
·可以在任何浏览器宽度或高度下工作。
设计时不要使用方便的字符数来适合您的设计。
不要设计给你的设计师朋友留下深刻印象的东西，不要赢得奖项或在Dribbble上赢得喜欢。
将您的工作置于现实中，并以真实的内容和数据（或近似近似值）进行设计。
考虑百分比而不是像素
您可以在设计软件中设计宽度为100px的东西。但是，在浏览器中，该100px将是其容器的百分比宽度。因此，随着浏览器宽度变小，您的100px会变得更像80px，60px，40px等。
现在，考虑一下该100px区域中的内容...
·能以小于100px的宽度吗？
·如果不是，则需要重新考虑布局或内容。
·或者，创建一个断点以涵盖不再可用时发生的情况。
在浏览器或设备上查看设计
回到前面的恐怖故事：如果我们不将工作立足于现实，很容易犯错误。所以：
·请勿（仅）在大型显示器或电视显示器上查看您的作品。
·不要（仅）打印出样机，并查看将它们固定在墙上。
这些都不能准确描述最终用户将看到的内容。真正重要的是哪件事。
另外，在视网膜屏幕和小型笔记本电脑屏幕上进行设计时，请务必小心。例如，在MacBook或任何笔记本电脑上设计网站很困难，因为您可能无法在设计软件中看到页面的整个宽度。
希望这些表明了我的观点
并希望你在现实中扎根你的设计，让它变得有价值。