反应型网站设计在不同分辨率设备面前具有灵活性,能快速解决多设备显示适应性问题,能与多台智能移动浏览终端兼容,能自动适应屏幕尺寸、风格的统一,提高网站识别度,而且反应型网站使用的后台和数据库都是统一的,即在PC端编辑网站内容后,手机、PAD等智能移动浏览终端能同步显示修改后的内容,网站数据管理更加及时方便。提高网站的技术质量,为用户提供友好的网络界面,可以更好的挖掘潜在客户群,为网站带来更多的访问量。这就是为什么响应式网站现在如此流行的原因。那么究竟怎样才能更好地开发响应站点呢?还有什么技巧需要掌握吗?
第一,优先关注“极限尺寸”。
疑问自然会在你面对两个极端的屏幕尺寸——手机屏幕和桌面屏幕时产生。有些设计者一开始是从动态的视角开始设计,但绝大多数设计者还是从静态的页面开始设计:选择一个固定的高度和宽度,画出相应的草图或视觉草图。
通过这种方式,我们提出了一些问题:您的开发团队优先考虑哪些尺寸?设计组第一次交付的高逼真度视觉草稿是什么尺寸?你应该优先考虑哪种设备,而不是技术限制。建议从用户最基本的“极限”尺寸开始考虑,并推荐目前(2015年)常用设备的最小和最大尺寸:
以前的iPhone5,因为是视网膜屏,我们通常都是按72dpi来设计,但iPhone5的显示器实际上是144px,所以我们就按这个尺寸来设计。用户界面设计师应该很清楚@2x和@3x的问题)1600×1000px(普通桌面显示尺寸)。你的用户的实际情况当然会稍有不同,稍微调查一下,找出“极端情况”。在刚开始响应网页项目时,就从用户最常用的最大最小尺寸的设计入手。
面对最小的屏幕时,你需要在小屏幕上显示最重要的内容,而选择这些内容时就显得相当麻烦了。但面对大屏幕时,你所想的又是截然相反的:如何显示内容就算是过多的分栏是否因为过宽而降低了可读性?怎样选择元素来避免这种情况呢?最终,面对两个不同大小的界面,你还需要考虑它们的输入方式,通常在最小的屏幕上使用触摸屏和虚拟键盘,在最大的屏幕上使用传统键盘鼠标的占绝大多数。在这里,你可能需要一次选择两个界面尺寸,而不是传统的单一屏幕设计,然后再完成其余的。设计与开发人员在这一问题上的分歧对后来的发展影响很大。
讨论了不同断点之间的内容布局。
每天的网页设计中,大家对静态的线框图都给予了很大的关注,但在进行响应式设计时,一定要谨记页面的布局是流动的。也就是说,你的网页用户在经历页面的时候,大多数时候实际上是处于“中间状态”的页面。因此,郑州网站制作公司必须考虑随着屏幕尺寸的变化,每次调整和更改布局设计。例如,当屏幕变小时,文本内容需要进行收缩,而混排的图片则需要在一栏中显示。对于那些适合和不适合的问题,尽量不要和你的开发团队一起去“假设”或“推测”。在你负责开发的同事做很多事情之前,积极主动地识别这些信息并与他们达成共识。对复杂的布局更改,事先画出前框图或草图单独说明是很明智的选择。对某些不太重要的功能,只需要简单的讨论或电子邮件通知就可以了。