面向未来的更好的响应式Web设计流程

发布时间:2019-09-02 16:17:16 阅读:60

网站设计的固定宽度方法可能已经为您提供了多年的服务,但是当应用于响应式网站时,这个过程就会停滞不前。

如果您想要响应性地设计网站,以下是在我们进入新的一年时使该工作流程更新所需的更改。该建议是基于我15年的网页设计师,代理创意总监和罗德岛大学的设计讲师。

重新思考网页设计过程

更新响应式网页设计的工作流程从重新思考设计过程开始。

在Photoshop中创建静态的以桌面为中心的comps,在一些占位符Lorem Ipsum文本中转储,然后将这些comps呈现给客户端进行审阅在响应环境中不能很好地工作,因为这些静态设计不显示交互性或用户体验的方式改变不同的屏幕。

image01

UX照片:UXPin

正如免费指南响应式设计最佳实践中所述,更好的响应式设计需要现代流程,例如:

  • 思考内容优先和移动优先
  • 在流程早期提供低保真设计选项
  • 显示响应原型而不是静态comps
  • 处理您的设计必须适应的最极端情况

内容优先设计

当设计师为有形产品创建包装时,他们通常会拥有一个完全开发的原型(甚至是实际产品)来为他们的设计创建环境。

产品的形状,重量和所有使用案例只是设计人员在设计过程中考虑的几个因素。如果没有明确的产品概念,设计师就很难创造出合适的包装,但网页设计师必须多年才能做到这一点。

开始没有内容的网站设计就像创建没有产品的包装设计。您可以尽力而为,但谁知道最终内容或产品是否真正适合您创建的内容?

2602771507_f6e1d90f58_o

照片来源:SOCIALisbetter知识共享

网站的设计不仅仅是客户端转储内容的模板。从内容开始,您可以决定如何最好地将其呈现给用户。在响应式环境中,从内容开始还允许您确定最重要的优先级。此内容层次结构对于您为响应式网站中的各个断点做出的布局决策至关重要

在网站设计过程开始时需要内容听起来很棒,但实际情况是客户很少在项目开始时拥有最终内容。这可以。您不需要最终的生产就绪副本。您只需要了解内容的内容以及初稿的一些实际样本这与使用原型的包装设计师类似。

在项目一开始就与客户讨论内容,并引入任何帮助他们制定内容策略的人。无论您的代理机构是提供该服务还是由其他团队处理,请立即将其作为您流程的一部分。代替初稿,您甚至可以使用竞争对手网站的副本来开始估算您的空间限制。

移动优先设计

通过实际的,深思熟虑的内容(与一些占位符Lorem Ipsum文本相对),您现在可以考虑如何呈现内容并确定其优先级。最好通过使用Mobile-First方法来完成

Mobile-First与传统的网页设计流程背道而驰,您可以从以桌面为中心的设计布局开始。因为只有很多屏幕空间可供使用,从小开始强迫您确定哪些元素和内容最重要。它还可以向您显示可能根本不需要的内容,因此可以从所有版本的设计中删除。

image00

因此,您可以扩展感觉100%的体验,而不是将体验降级到更小的屏幕尺寸。

在Mobile-First过程中,从网站内容的线框开始。然后,您可以为线框中的每个部分/内容分配优先级。部分的优先级将帮助您确定如何以及在何处为不同的断点呈现它。


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"面向未来的更好的响应式Web设计流程",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560