网络学院 News龙岗网站建设公司为您分享企业网络营销的百科知识

当前位置: > >

深圳龙岗响应式网站设计的五大技巧分析

日期:2018-04-13 / 人气:

  响应式网站设计在面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题,可兼容多个智能移动浏览终端,并自动适应其屏幕尺寸,风格统一,增加网站辨识度,并且响应式网站所用的后台及数据库是统一的,即在电脑PC端编辑了网站内容后,手机、PAD等智能移动浏览终端能够同步显示修改之后的内容,网站数据的管理能够更加及时和便捷。提升网站技术品质,向用户提供友好的Web界面,能够更好地发掘潜在客户群体,给网站带来更多访问流量。这些也就是现在为什么响应式网站受欢迎的原因。那到底如何才能更好的开发响应式网站?都有哪些技巧需要掌握?
  1、优先专注“极端”尺寸
  当你面对着手机屏幕和桌面端显示器这两种极端的屏幕尺寸之时,疑问会自然而然出现。有的设计师打一开始就从动态的视角开始他们的设计,但是绝大多数的设计师仍然是从静态的页面开始着手设计的:选择一个固定的高度和宽度,绘制相应的草图或者视觉稿。
  这样一来,就引出了几个问题:你的开发团队优先考虑什么尺寸?设计团队首先交付的高保真视觉稿是哪个尺寸的?从技术限制的角度出发,你应该优先考虑什么设备。推荐从用户最基本的“极端”尺寸开始考虑,推荐当前(2015年)常用设备中最小和最大的情况:
  当你面对最小的屏幕的时候,你需要在小屏幕上呈现出最重要的内容,如何选取是一件颇为费神的事情。但是面对大屏幕的时候,你所思考的事情又是截然相反的:怎么展示内容才算是过多分栏是否因太宽降低了易读性?如何选取元素才能避免这样的问题?最后,面对两个不同尺寸的界面,你还要考虑它们所涉及的输入方式,最小的屏幕上通常是触摸屏和虚拟键盘,最大的屏幕上,绝大多数时候是传统的键盘鼠标。这里最重要的事情可能是你需要一次挑选两个界面尺寸来做,而不是传统的针对一个屏幕设计,然后完成剩下的部分。设计师和开发者在这个问题上出现分歧,对后续的影响是非常大的。
  2、讨论不同断点之间内容布局
  在日常的网页设计中,大家对于静态的线框图投注了如此之多的关注,但是在做响应式设计的时候,应该始终谨记页面内的布局是流动的。这也就意味着,你网页的用户绝大多属时候所体验到的页面其实是它的“中间态”。所以,你必须考虑随着屏幕尺寸大小的转变,布局设计的每一个调整和改变。比如,当屏幕尺寸变小的时候,文本内容需要收缩,并且和混排的图片会与文章缩到一栏中去。这些适配能与不能、该与不该的问题上,尽量不要同你的开发团队去“假设”或者“推测”。积极主动地去确定这些信息,在你负责开发的同事还没有做太多之前,和他们达成共识。对于复杂的布局改变,事先绘制先框图或者草图来单独说明,是非常明智的选择。对于一些不那么重要的特性,通过简短的讨论或者电子邮件通知就足够了。
  3、对于图片素材的处理策略早做准备
  响应式网页中的图片,通常是由一组多个不同尺寸的图片组成的。图片格式和尺寸通常会让团队内的设计师和开发者之间产生隔阂。你可以用PNG,也可以用JPG,图标字体和SVG也会在网页上很好的运用。也就是说,并没有一个正确的答案:用什么更多是取决于可用的内容和资源本身。但是重要的地方在于,大家要在使用格式上达成共识,并且坚持使用下去。另外,你可能也想钻研出一套通用的图片尺寸体系,运用在不同的项目中。
  不过对于现代的响应式网站设计,这仅仅只是一个起点。现在要做你至少需要两套图片素材,一种是给普通PPI的屏幕所设计,一种是给高PPI的视网膜屏所准备的。更完备的响应式网页,对于图集和素材的要求更高,细分更多,针对性更强。尽量避免将响应式图片格式的筛选决策留到项目后期。最起码,你得针对不同像素密度的屏幕作出基本的区分。
  4、从基础元素开始思考,使用模块化设计
  响应式网页设计流程深深地受到了Brad Frost的Atomic Web Design和Jonathan Snook 的SMACSS的影响。两个框架都依靠小而可复用的基础组件来实现强大的网络架构。
  所以,在与开发者交接的过程中,圣玺网络会优先专注小而可复用的组件,因为它们能给不同平台不同设备带来相同的用户体验和视觉效果。这种一致性会更容易为开发团队所消化吸收。而且,小组件在不同页面之间的复用性也非常强,所以,如果你设计出了一套高效的方案,今后还会有用武之地。想象一下,你正在设计一个带有大标题、高清大图和表单的注册页面。由于网页是响应式的,所以所有这些元素都会随着设备和屏幕的转换而变化尺寸。那么在项目研发早期,应该同开发团队一起钻研,敲定页面所涉及的各个细节。它看起来应该是什么样子?用什么样的验证机制?如果要输入表单,如何配合触摸屏和传统的键鼠。
  5、让开发者给视觉和体验设计做反馈
  有些设计师在产品设计会议、可用性设计环节和其他的沟通环节不让开发者参与或提供反馈。这种放任和封闭是错的。要知道,经验丰富的开发者在产品、体验和设计领域同样有着极为丰富的知识。让他们参与到这些环节中,能让产品更加成熟。前端和设计师在技能上的重叠就更多了。
  深圳网站建设公司【圣玺网络:15019448256,业务QQ:1377838268】专业提供龙岗网站建设,龙岗网页设计,龙岗网站制作,龙岗网站改版,龙岗网络推广,龙岗网站优化等互联网广告服务!

编辑:龙岗网站建设