网络学院 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】专业提 供龙岗网站建设,龙岗网页设计,龙岗网站制作,龙岗网站改版,龙岗网络推广,龙岗网 站优化等互联网广告服务!

编辑:龙岗网站建设


友情链接:    671棋牌app下载-首页   JBO棋牌-首页   可以支付宝提现的棋牌-首页   超级水果老虎机---首页_Welcome   四人通比牛牛---首页_Welcome