在响应式项目中连接设计与开发

2023-08-10 15:46:00 编辑:格度视觉 来源:互联网

响应式网页设计,对设计师与开发者的团队协作提出了更高的要求,开发者需要更多参与设计的讨论,设计师也需要更多重视开发的细节。

优秀的网页项目,不会单靠好的设计或是开发就能成功——它也需要设计师与开发者的沟通与协作。

我看过相当多的设计师与开发者由于缺乏沟通而糟蹋了项目,结果导致关系恶化。我也见过很多初学的设计师和开发者,通过团队协作创造出惊人的结果。他们避开了潜在陷阱,及时发布项目,并且迅速迭代。这种协作不仅对项目有益——善于沟通协作的团队也是一个更快乐的团队。如果任务并没有如愿进行,也会有更少的误解与紧张。

设计与开发的协作,在响应式网页设计(RWD)项目中尤其重要。各团队如今都要应对大批设备。固定的、“像素精准”的设计,如今该让位于流动的百分比设计。而且,图片资源也需要为多种设备尺寸与分辨率进行优化。

简而言之:响应式设计带来更多变数,需要交付更多资源——这也会导致更多问题。我发现一些技巧,可以克服这些障碍。

1. 首先关注“最极端”的屏幕尺寸

如果对此存疑,可以根据网页的一般经验设定屏幕尺寸范围:iPhone尺寸和桌面浏览器展开。

尽管有些设计师直接“在浏览器中”创作,一开始就完全是流式布局。但多数设计师仍然从固定尺寸开始:选定一组屏幕宽高,以此绘制效果图。

但这提出几个问题:你对开发团队重视到何种程度?应该首先交付哪些高保真资源?由于技术限制需要先考虑哪种设备?

我一直都建议从最“极端”的用户设备入手——最小和最大的设备尺寸。如果对此存疑,我建议以此为2015年的网页用户标准:

320 x 568像素(iPhone 5竖屏)

1600 x 1000px(桌面浏览器展开)

注意:你的用户可能存在差异,所以要看数据分析来定义你的“极端情况”。

“为最小和最大的设备尺寸设计,以此为响应式设计项目的起点。”

先应对最小的屏幕尺寸,这会迫使你做出艰难的选择,选出设计中最重要的功能。大屏幕尺寸则让人从另一个方向思考:最多包含多少内容?文字段落是不是太宽不易阅读?下拉菜单元素需要额外留白吗,如果需要,多少才能避免给人脱节的感觉?最后,选定最小和最大屏幕,通常需要你思考至少两种输入方式——最小的屏幕基于触摸操作,最大屏幕则使用鼠标和键盘操作。

可能最重要的是,当你应对极端情况时,你是在同时处理两种尺寸。并非完全绘制出一种屏幕尺寸,而后去适应另一种。那样会引发设计与开发的冲突。


2. 在各个断点之间讨论内容布局

既然在静止线框图和排版上投入这么多,就千万要记住,响应式网页设计天生是流动的。这意味着众多网站用户体验到的,是你设计的“中间”状态。所以几乎每件设计,都需要考虑特定尺寸间必要的布局调整。比如当尺寸减小时,内容可能会收缩,图片减少为单列。

要避免主观臆断,认为开发团队能够或是应该实现那样的布局调整。尽早行动,先知会你的开发团队,避免他们陷入太深。对于特别复杂的布局变化,最好另外绘制一张线框图或效果图来说明。特殊性不太重要的情况,通过简单的讨论,或者用邮件描述这些变化就足够了。


3. 尽早制定资源图策略

很多响应式图片需要多套资源。我个人网站的主页头图,根据屏幕尺寸和分辨率不同,会从6张不同图片中选择一张呈现。

图片格式与尺寸,通常是设计师与开发者之间的障碍。你可以使用PNG、JPG、图标字体,或者用SVG实现更小的元素或图标。并没有哪个是正确答案:一切都取决于内容和可用的资源。但重要的是对某种格式达成一致,坚持使用它。而且随着网页项目的进行,你还可以创建一些常用图片尺寸。

不过对于如今的响应式设计,这只是刚开始。你要至少输出2套位图资源(JPG):1套给普通显示器,一套给高分辨率显示器。高级的响应式图片技术,需要更多套资源适应不同屏幕尺寸。

避免到项目末尾再决定响应式图片格式。至少要有一套像素密度显示策略。看看srcset和Picturefill,来保证良好的跨浏览器支持。如果感觉太过了,就从简单入手。用srcset属性来更换一些图片元素,这是个好的开始。看它如何处理,然后由此展开。


4. 微观的思考,模块化的设计

我的响应式设计工作流程深受Brad Frost的Atomic Web Design和Jonathan Snook的SMACSS影响。两者的框架都依赖小型、可复用的组件,以此为基础打造强大的网站结构。

对于交付给开发的资料,我喜欢先专注于小型、可复用的组件。因为它们在不同设备上,通常表现出同样的体验和外观。这样的统一性有利于开发团队消化。另外,小组件通常更容易跨页面复用。所以如果你设计了一套有效的解决方案,之后再重复使用就非常简单了。

小组件通常在不同设备上表现出同样的体验和外观。这样的统一性有利于开发团队消化。

假设你在设计一个注册页面,有标题、大幅图片和表单。根据设备不同,这些元素可能会变换交错或是改变尺寸。起初,要同开发团队一起专注于注册表单的小细节。它看起来是怎样的?需要怎样的验证?相对鼠标键盘,触摸输入会使表单发生什么变化?


5. 从开发者那里获得视觉与用户体验的反馈

有些设计师把开发者阻挡在产品会议、可用性讨论和其他反馈机会之外。只有一个启动仪式,交付一些资源,和一点点其他东西。这是错误的。

要记住,经验丰富的开发者掌握大量知识。如果他们与产品接触了一段时间,他们可能也有独到见解。

前端开发者和设计师的技能通常是重叠的。越来越多的设计师自己写代码。开发者也在刻苦钻研快速原型设计、线框图和美术设计。响应式设计加剧了这项趋势。即使没有“设计师”的头衔,一名开发者也可以表达出强有力的设计见解。

我们得承认,角色与责任的独立仍然有其价值。但稍加融合便可显著改善最终产品。所以,在你的下个可用性测试中,请一位开发者加入来讨论最终产出吧。或者如果你在进行一场设计头脑风暴,或许应该邀请一些开发者。

合作很重要


所有这些技巧都需要规划和认同。由于注重产品发布与截止日期,这就难以做到。但设计与开发关系良好对任何网页项目,尤其响应式设计项目都是有益的。初期的小投资,会为你的团队带来指数级的回报。


本文关键词: 网站建设

本文均为格度视觉摘自权威资料,书籍,文章,或来自网络,如有版权纠纷或违规问题,请联系我们删除。我们欢迎您的分享,谢绝直接抄袭复制。感谢…

关注格度视觉