网页设计范文10篇

网页设计范文10篇

2024年，EthanMarcotte提出响应式网页设计(RWD，ResponsiveWebDesign)，其实，这并不是一项新技术，而是已有技术———媒介查询(MediaQueries)、流式布局(FluidGrids)、自适应图片(ScalableImages)的有机组合。随着技术标准的扩展，这三项技术(媒介查询、流式布局、自适应图片)虽然仍是响应式网页设计的核心，但并不是全部。响应式网页设计无论从观念还是技术都正在经受着优胜劣汰的进化过程。响应式网页设计，是指依据用户的使用设备，使用情境以及使用行为来调整网页的版式、内容、功能和交互方式的设计方法。响应式网页设计为适应多样的扫瞄状况而设计更流畅、更敏捷的页面，达到良好设计实践，为用户供应更优化的体验。

二、响应式网页设计的方法

响应式网页设计是以用户为中心的设计，关注特定情境下的用户体验，它既要适应设备的功能和限制又要适应用户的使用环境。响应式网页设计的方法主要包括以下几个方面。(一)移动优先(MobileFirst)在网站策划与制作的初步阶段，响应式技术比常规方法费时耗力。一般来讲，开发人员需要了解用户设备及不同使用情境，优先从移动端开头设计，从创建具有肯定可用性的基本体验开头，满意用户简洁、顺畅的情境需求。然后，渐进增加，布局显示内容，提高图片质素，增加必要的服务，供应恰当的交互，制造更丰富的体验。移动优先采纳渐进增加(ProgressiveEnhance-ment)原则，而非早期网站设计提倡的优雅降级(GracefulDegradation)原则。移动优先既可以为不支持媒介查询的移动设备供应适合的布局，聚焦当下最重要的事，也可以降低CSS代码简单性，削减冗余代码。(二)媒介查询(MediaQueries)媒介查询是指依据用户特定情境，查询设备各种属性来布局样式和内容。测试的属性包括:设备屏幕宽高(device-width，device-height);视窗显示区域的宽高(width，height)，例如扫瞄器窗口的大小;屏幕方向媒体特性打算一个设备是处于横屏还是竖屏，即设备处于垂直或水平的状态(orienta-tion)，宽长比例等特性(aspect－ratio);设备屏幕辨别率(resolution)，每平方英寸像素数(ppi)，一般的屏幕为163ppi，视网膜(Retina)屏为326ppi。这些属性可以通过“与或非”等规律运算符形成简单的表达式，以此推断是否为特定目标设备类型，从而加载特别样式、调整页面布局、供应适合的功能和交互。(三)流式布局(FluidLayouts)传统的固定宽度(FixedWidth)布局以像素为单位，是网页布局中最常见的方法，它简洁粗暴地固定了页面的宽度，使用户在不同设备上扫瞄相同的页面。屏幕较大时，页面两侧消失大片的空白区域未加利用;屏幕较小时，页面内容位置不变，用户只能不断地通过手指滑动进行扫瞄和界面交互。流淌宽度(FluidWidth)布局的单位是百分比。流淌布局依据扫瞄器窗口宽度自动调整页面布局，不会消失水平滚动条。大屏幕时，页面两侧不会消失固定布局中的大面积空白;小屏幕时，内容也不会挤成一团难以阅读。弹性宽度(ElasticWidth)布局以“em”为单位，随着文本大小的转变，容器的宽度也等比例地转变，将容器调整到合适的宽度。由于行宽过短，眼睛往复跳动扫视会破坏阅读节奏;而行宽过长，简单造成持续行进阅读失误。为了提高文本的可读性，尽量使每行的中文字符个数介于25～45之间，英文字符个数介于45～70之间。网格布局(GridLayouts)可以使信息展现得有序、和谐，间距均衡、布局工整的页面提高了可读性，添加或更新内容时也更加简单。网格布局多采纳8列、10列、12列、16列，由于12可以被2、3、4、6整除，因此它是最常用的网格布局列数。混合布局(HybridLayouts)则结合上述两种及以上的布局方法。相对固定布局，其他布局更具敏捷性，但每种方法都各有优势和缺点。目前，响应式网页设计较常用的流式布局方法是利用CSS表格属性(display:table-cell)混合内容列为流淌宽度，侧边列为固定宽度的方法。页面布局采纳内容优先(ContentFirst)原则，即权衡如:图片、视频、文本、广告等不同内容的重要性来打算网格的编排。(四)文本单位(SizingFont)设计师常用像素(px)来设置文本大小，不同的设备屏幕具有不同的长宽尺寸和像素密度，这就造成了以像素为单位的文本可能在这台设备上显示的效果不错，在另一台设备上看起来太大或太小。并且，由于像素的精确掌握，不同的文本大小需要分别逐一设置，调整时也更繁琐。在响应式网页设计中默认文本大小(em)的比例和百分比(%)却具有更好的可访问性和敏捷性。“em”可以进行跨扫瞄器缩放，1em相当于当前默认文本大小，指定了默认文本大小以后，调整默认基准或倍数，其余的文本就会自动按比例进行缩放，从而简化了维护。“%”和“em”类似，文本尺寸也可以按比例缩放，两者在技术上没有太大区分，且都是随父级容器级联的，只是“em”在语意上作为默认文本大小的比例设置更简单理解。另外，还有一种更具敏捷性的单位“rem”(rootem)，其设置的大小只与HTML元素有关，避开了在嵌套元素中产生的级联问题。但是，目前“rem”虽然在桌面设备扫瞄器的支持较好，在移动平台却没有得到广泛的支持。(五)自适应图片和视频(ScalableImages＆Vidoes-)很多网站在小屏幕设备上实行简洁的方法来处理图片:方法一，设置图片的CSS的display属性为none，从视觉上隐蔽图片;方法二，通过媒介查询简洁地掌握缩放图片的比例。采纳这两种方式的图片依旧会被根据原始文件量下载，既没有节约流量也没有节约下载时间，因此都是不行取的。目前最优的方法是在加载页面之后，根据页面布局确定加载哪张图片。依据图片容器在不同设备上的宽度设置断点，通过媒介查询为不同断点供应不同的图片，假如图片等比缩放的艺术效果不够好，则需要视觉设计师为其单独切割画面以保证艺术感染力。对于Retina高辨别率屏幕，需要创建较大面积和文件量的图片，达到细致清楚的显示效果，而不需要在小屏幕低质素的设备上加载这样大的图片。可伸缩矢量图形(SVG，ScalableVectorGraphics)，可以自如缩放而不失真、文件量也不会增大，是将来屏幕显示矢量图形的抱负解决方案。视频的处理与图片不同，在小屏幕中可以只供应一个视频链接来提高页面的加载速度;在大屏幕中则根据布局需要成比例缩放，关键是视频的容器要设置与视频的长宽比例全都，这样，视频才能够随着容器的变化而成比例调整。(六)导航方式(NavigationMode)不论在哪种设备中，导航都是引导用户交互的重要元素，其可访问性和易用性是至关重要的，尤其在小屏幕中如何布局导航成为影响用户体验的重要课题。最简洁的方式是任导航我流淌堆叠下来，虽然直观整齐，但却占用了屏幕的珍贵空间，把主要内容信息挤了下去。其次种方法是把导航转化为下拉列表，节约空间，但不够直观，许多用户还不能把原本用于表单中的组件和导航我结合起来，另外，目前大多数设备都不支持下拉列表的样式化。第三种方法则是先隐蔽导航，然后通过单击一个形象化的按钮来绽开导航我，节约了屏幕空间，相对于下拉列表也比较简单理解，但增加了一个单击的操作步骤。

三、响应式网页设计的特点

响应式网页设计是为了让扫瞄者使用不同设备时获得全都的用户体验而开发的，不只是针对移动设备。在互联网产品、技术和标准不断进展的过程中，响应式网页设计也是不断进化的，只有了解其利弊，才能更好地为用户服务。首先，响应式网页设计操作敏捷，可以针对某个页面调整，而不必影响网站中的其他页面;其次，响应式网页设计适应性强，相对传统方法更简单调整以适应层出不穷的新设备;再次，响应式网页设计虽然在规划阶段有些耗时费劲，但从长远看，却可以节约产品整体的开发维护成本，节省时间;最终，响应式网页设计可以促使产品在不同设备上保持视觉体验的统一性，维护品牌体验的全都性。响应式网页设计并非总是最合适的方法。有的网络服务商需要为大屏幕、固定位置用户和小屏幕、移动用户供应的内容差别特别大，两者的生命周期不同，动态效果和交互体验不同，以及移动定位、传感器和大数据带来的诸多因素，设计师就需要为不同用户的不同使用情境分别设计网站，然后通过媒介查询自动定位到适合的站点。

四、结语

响应式网页设计从媒介查询、流式布局、自适应图