五个提示可以帮助您加快响应式网页设计项目



没有成功的Web项目是在设计师和开发中不能顺利沟通的前提下得到的,协作是做好基础的基础。
我看过有经验的设计师和开发人员由于沟通不畅导致项目失败,同时也看到新手设计师和开发团队通过高效协作,共同打造惊人的设计项目。项目启动初期,使项目在后续快速迭代更加流畅。足够的沟通不仅对工作有好处,而且还能使整个团队保持情绪稳定。
为了回应网页设计项目,设计师和开发者之间的沟通畅通无阻,更为重要。
设计响应式网站时,整个团队必须充分考虑到大量不同尺寸屏幕的设备。习惯于“像素精度”的设计师和开发人员需要为移动界面和大量不同比例的设备做好准备。简而言之,响应式设计使整个项目交付面临很大的不确定性,这是响应式网站项目的难度。
希望接下来的五个提示,可以帮助每个团队在通信障碍和技术问题上得到这个项目。1,优先关注“极限”大小
当您面对移动屏幕和桌面侧显示这两个极端的屏幕尺寸时,问题自然会出现。一些设计师从设计的动态角度出发,但绝大多数设计师仍然从静态页面设计开始:选择固定的高度和宽度,绘制相应的草图或可视化脚本
这样就提出了几个问题:你的开发团队有多大的优先级?设计团队的一个高保真视觉演示有多大?从技术的角度来看,你应该考虑哪些优先事项?
我一直推荐从用户更基本的“极限”尺寸考虑,推荐目前(2015)常用设备在更小和更大的情况下:
320 x 568 px(iPhone 5,因为它是视网膜屏幕,通常我们根据72dpi设计,但iPhone 5显示器实际上是144px,所以我们给这样的设计大小作为一个UI设计师,你应该很清楚@ 2x和@ 3x的问题)
1600×1000像素(桌面显示的公尺英寸)
当然,你的用户的实际情况可能略有不同,有点调查,以确定“极端情况”。
“只需启动响应式网页项目,从用户更常见的更大和更小尺寸设计开始。
当您面对更小的屏幕时,您需要在小屏幕上显示更重要的内容,如何选择是相当麻烦的。但是大屏幕的面孔当你觉得事情是完全相反的:如何显示内容太多了?由于可读性降低,列太宽?如何选择元素来避免这样的问题?更后,面对两种不同尺寸的界面,你必须考虑到它们所涉及的输入,更小的屏幕通常是触摸屏和虚拟键盘,更大的屏幕,大部分时间是传统的键盘和鼠标。
这里更重要的是可能需要选择两个界面大小来做,而不是传统的屏幕设计,然后完成其余的部分。设计师和开发者在这个问题上的差异,对后续的影响是非常大的。
2.讨论不同断点之间的内容布局
在日常的网页设计中,每个人对于静态线框的投注都是如此之多,但是在戒指中应该设计当页面应该始终记住页面的布局是流动的。 这意味着你的页面的用户是更经验的页面实际上是它的“中间状态”。 所以,你必须考虑屏幕的大小随着每个调整和布局的大小而改变。 例如,当屏幕尺寸变小时,文本内容需要缩小,图片和文章的混合将被缩小到一列。
这些调整不能,也不应该在这个问题上,尽量不要与开发团队合作,以“假设”或“投机”。 主动确定信息,你对同事的发展负责,以前没有做太多,他们达成了共识。 复杂的布局变化是非常明智的选择,提前绘制一个框图或草图。 对于一些不太重要的功能,只需简要讨论或电子邮件通知就足够了。
3,为图片材料加工策略做好准备
响应网页中的图片通常由一组多种不同大小的图像组成。例如,我的个人主页在大图的顶部,由一组六张图片组成,分辨率和大小各不相同,以确保不同的设备可以匹配相应的图片。
图片格式和尺寸通常会在团队中的设计师和开发人员之间产生差距。您可以使用PNG,也可以使用JPG,图标字体和SVG也将在页面上使用非常好。也就是说,没有一个正确的答案:更重要的是可用的内容和资源本身。但重要的是我们必须用格式达成共识,坚持使用它。另外,您可能还想学习一套常用的图像大小系统,用于不同的项目。
但是对于现代响应式网页设计,这只是一个起点。现在你至少需要两套图片资料,一个是PPI屏幕的一般设计,一个是高PPI视网膜的准备。更完整的回复页面,对于阿特拉斯和材料要求更高,更细分,更有针对性。
尽量避免回应图片格式在该项目后期的筛选决定中。
至少,您必须对不同像素密度屏幕进行基本区分。仔细观察这篇关于srcset的文章,或者使用Picturefill等工具来确保跨浏览器的支持。如果你认为整个程序不堪重负,那么可能希望从小部分开始。逐渐调整图片元素srcset的属性是一个很好的开始,在这个过程中,你会逐渐看到响应页面越来越多的Kaopu。
4,从思想的基本要素,采用模块化设计
我的响应式网页设计流程深受Brad Frost的Atomic Web Design和Jonathan Snook的SMACSS的影响。这两个框架都依赖于小型可重复使用的基础组件来实现强大的网络架构。
所以,结合开发人员,我将专注于小型和可重复使用的组件,因为它们可以给不同的平台带来相同的设备体验和视觉效果。这种一致性将更容易让开发团队消化和吸收。此外,不同页面之间的小部件的复杂性也非常强,所以如果你是设计了一套高效的方案,未来将是无用的。
想象一下,您正在设计具有大标题,大图片和表单的注册页面。由于页面响应,所有这些元素将随着设备和屏幕的转换而变化。所以在项目开发初期,应该与开发团队一起学习,更后完成涉及到的页面细节。它应该是什么样子?什么样的认证机制?如果要进入表单,如何匹配触摸屏和传统的鼠标和键盘?
5,让开发者以视觉和体验做设计反馈
一些设计师不允许开发人员参与或提供关于产品设计会议,可用性设计链接和其他通信会话的反馈。这种自由放任和关闭是错误的。要知道,经验丰富的开发人员在产品,经验和设计领域也拥有非常丰富的知识。让他们参与这些环节,使产品更加成熟。前台和设计师在重叠的技能上更是如此。
越来越多的设计师开始编写自己的代码,开发人员逐渐习惯了快速原型的制作,一个框图,并且还将在隐私的审美和设计阶段的知识。响应式网页设计的出现使得两个职业之间的重叠越来越多越是这种趋势加剧。 虽然设计师的头衔没有挂在开发者头上,但它们往往是为了惊人的语言而设计的,发人深省。
当然,师的不同角色和责任还是非常重要的。 但稍微调整一些小步骤,真的可以显着提高更终产品。 所以,当您进行下一轮产品可用性测试时,您可能需要与开发人员讨论。
结论
所有这五种技术都需要进行规划和保存。 绝大多数团队将专注于产品发布和卡片截止日期,此阶段考虑这些问题,不利于产品,不适合当时设计师和开发人员的团队。
项目开发初期,有点计划,后半部分的回报大概丰富。



上一页:创意型网站建设需要注意建立创意点下一页:如何建设一个好的企业网站?
关注微信
  • 微信
联系电话
  • 13770851495 联系电话
回到顶部