010-63307995
文章资讯
成立11周年,感恩回馈新老客户钜惠活动进行中……
文章资讯ARTICLE
公司新闻
建站指南
行业新闻
营销分享
建站技术
网站建设资讯
最新签约

五大技巧帮你快速提速响应式网页设计项目

来源:本站 最后更新:2018-10-22 12:36:31 作者:佚名 浏览:683次

网站、建设、科技、技巧、响应式、设计

五大技巧帮你快速提速响应式网页设计项目

1、优先专注“极端”尺寸

当你面对着手机屏幕和桌面端显示器这两种极端的屏幕尺寸之时,疑问会自然而然出现。有的设计师打一开始就从动态的视角开始他们的设计,但是绝大多数的设计师仍然是从静态的页面开始着手设计的:选择一个固定的高度和宽度

       320 x 568 px (iPhone 5 ,由于它是视网膜屏幕,平时我们是按照72dpi来设计,但是iPhone 5的显示实际是144px,所以我们给出了这样的一个设计尺寸。作为UI设计师的你应该很清楚@2x和@3x的问题)

  1600×1000 px (桌面显示器的常见尺寸)

2、讨论不同断点之间内容布局

在日常的网页设计中,大家对于静态的线框图投注了如此之多的关注,但是在做响应式设计的时候,应该始终谨记页面内的布局是流动的。这也就意味着,你网页的用户绝大多属时候所体验到的页面其实是它的“中间态”。所以,你必须考虑随着屏幕尺寸大小的转变,布局设计的每一个调整和改变。比如,当屏幕尺寸变小的时候,文本内容需要收缩,并且和混排的图片会与文章缩到一栏中去。

3、对于图片素材的处理策略早做准备

响应式网页中的图片,通常是由一组多个不同尺寸的图片组成的。比如我的个人网站首页顶部的大图,就是由一组6个图片组成的,分辨率和尺寸各不相同,确保不同的设备都能匹配上对应的图片。

图片格式和尺寸通常会让团队内的设计师和开发者之间产生隔阂。你可以用PNG,也可以用JPG,图标字体和SVG也会在网页上很好的运用。也就是说,并没有一个正确的答案:用什么更多是取决于可用的内容和资源本身。但是重要的地方在于,大家要在使用格式上达成共识,并且坚持使用下去。另外,你可能也想钻研出一套通用的图片尺寸体系,运用在不同的项目中。

4、从基础元素开始思考,使用模块化设计

5、让开发者给视觉和体验设计做反馈

本文关键词:网站建设科技技巧
快速搜索
热门标签
推荐阅读
友情链接/ Links

北京星诚视野网络科技有限公司 © 2008-2019 京ICP备09003513-1号 技术支持:北京网站建设公司  北京APP开发