响应式网页设计的定义、方法及特点

《响应式网页设计的定义、方法及特点》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、响应式网页设计的定义、方法及特点　　互联X已经渗透到人们日常生活的方方面面，台式机、笔记本、平板电脑、智能等设备日新月异，如何在不同厂家、不同型号的产品上呈现适合的信息以使用户获得一致的体验，是每个互联X内容开发商长期面临的难题。　　早期，开发人员需要为电脑和移动智能设备分别设计内容和样式，针对不同用户分别定向，耗时费力。随着移动终端的飞速发展，为支持多种设备且节省X站的开发时间及维护成本，响应式X页设计逐渐成为主流设计。　　一、响应式X页设计的意义　　传统X站在不同客户端展现一样的内容，小屏幕显示细小紧密的文字和链接，用户不得不在手持设备的小屏幕上不停地滑动手指放大页面阅读信息、缩小

2、页面查找信息，横屏竖屏来回切换，页面中提供交互的视觉元素需要多次放大才能适合手指操作。例如，传统X站中的用户登录或注册区块。　　移动用户首先需要在密集的信息中找到它，随后通过手指操作多次放大这个区域，同时，在放大过程中注意不要触及到其他链接或按钮，然后把光标落实在文本域进行输入，最后移动到确认按钮处单击。此外，传统X站的文件量在移动X络环境中下载速度较慢，并且有些媒体内容不适应移动端浏览器的要求而不能正常显示。　　随着智能设备的开发，基于台式机、平板电脑、智能，屏幕分辨率、尺寸、材料、显示方式，系统、浏览器、脚本支持等软件硬件带来的不同，用户都希望获得一致的X络体验，让产品迎合用户的需

3、求，而不是让用户烦乱地适应产品。响应式X页设计是以用户为中心的设计实践。早在2012年，谷歌公司就指出，响应式设计是优化移动X站的最佳方式。不单是移动互联X，在品牌和服务的整体推广营销策略中，这一设计方法不断地巩固，成为整个互联X行业的发展战略之一。　　二、响应式X页设计的定义　　2010年，EthanMarcotte提出响应式X页设计(ＲediaQueries)、流式布局(FluidGrids)、自适应图片(ScalableImages)的有机组合。随着技术标准的扩展，这三项技术(媒介查询、流式布局、自适应图片)虽然仍是响应式X页设计的核心，但并不是全部。响应式X页设计无论从观念还是

4、技术都正在经历着优胜劣汰的进化过程。　　响应式X页设计，是指根据用户的使用设备，使用情境以及使用行为来调整X页的版式、内容、功能和交互方式的设计方法。响应式X页设计为适应多样的浏览情况而设计更流畅、更灵活的页面，达到良好设计实践，为用户提供更优化的体验。　　三、响应式X页设计的方法　　响应式X页设计是以用户为中心的设计，关注特定情境下的用户体验，它既要适应设备的功能和限制又要适应用户的使用环境。响应式X页设计的方法主要包括以下几个方面。　　(一)移动优先(MobileFirst)　　在X站策划与制作的初步阶段，响应式技术比常规方法费时耗力。一般来讲，开发人员需要了解用户设备及不同使用情

5、境，优先从移动端开始设计，从创建具有一定可用性的基本体验开始，满足用户简洁、顺畅的情境需求。然后，渐进增强，布局显示内容，提高图片质素，增加必要的服务，提供恰当的交互，创造更丰富的体验。移动优先采用渐进增强(ProgressiveEnhance-ment)原则，而非早期X站设计提倡的优雅降级(GracefulDegradation)原则。移动优先既可以为不支持媒介查询的移动设备提供适合的布局，聚焦当下最重要的事，也可以降低CSS代码复杂性，减少冗余代码。　　(二)媒介查询(MediaQueries)　　媒介查询是指根据用户特定情境，查询设备各种属性来布局样式和内容。测试的属性包括:设备

6、屏幕宽高(device-为单位，随着文本大小的改变，容器的宽度也等比例地改变，将容器调整到合适的宽度。因为行宽过短，眼睛往复跳跃扫视会破坏阅读节奏;而行宽过长，容易造成持续行进阅读失误。为了提高文本的可读性，尽量使每行的中文字符个数介于25～45之间，英文字符个数介于45～70之间。　　X格布局(GridLayouts)可以使信息展示得有序、和谐，间距均衡、布局工整的页面提高了可读性，添加或更新内容时也更加容易。X格布局多采用8列、10列、12列、16列，由于12可以被2、3、4、6整除，因此它是最常用的X格布局列数。　　混合布局(HybridLayouts)则结合上述两种及以上的布局

7、方法。相对固定布局，其他布局更具灵活性，但每种方法都各有优势和缺点。目前，响应式X页设计较常用的流式布局方法是利用CSS表格属性(display:table-cell)混合内容列为流动宽度，侧边列为固定宽度的方法。页面布局采用内容优先(ContentFirst)原则，即权衡如:图片、视频、文本、广告等不同内容的重要性来决定X格的编排。　　(四)文本单位(SizingFont)　　设计师常用像素(px)来设置文本大小，不同的设备屏幕具有不同的长宽