《伯乐相马网站中响应式网页的运用,网页设计论文.docx》由会员分享，可在线阅读，更多相关《伯乐相马网站中响应式网页的运用,网页设计论文.docx（9页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、伯乐相马网站中响应式网页的运用,网页设计论文2018 年 5 月，Rthan Marcotte 就在 A List Apart 发表了一篇叫做 Responsive Web Design 响应式网页设计的文章，提出了响应式网页设计的理念。 响应式网页设计来源于建筑界的设计理念，即响应式建筑，它是指某个空间的大小会根据内部的人员的数量和流动的速度而自动调整。把这种设计思路运用到网页中来，也有异曲同工之妙。快速增长而且日趋多样化的可联网设备的产生，使得广义的屏幕标准尺寸已经不存在，并且屏幕尺寸也在不断变化以知足人们的需求；严格定义的响应式一般是指响应式 Web 设计， 而 Web 凭借其特有的灵敏
2、性和可塑性，能够适应各种尺寸和配置的设备，它能够无处不在。响应式设计概念一提出，各大网站及平台都希望能够采用这秉一应万的形式，能够更灵敏地去适配更多设备，尤其是在移动设备大爆棚的时代。 1.2 响应式的发展情况 2020 年 TNW 发布了 10 大网页设计趋势排行， 华而不实排名第一的为响应式布局，即一个网站适配多种屏幕。 其实早在 2020 年我们就看到一些新的设计趋势出如今 Web 设计领域，十分是响应式网页设计。 国内的响应式发展情况比国外落后很多，在国外的响应式网站很盛行的时候，我们国家才后知后觉的其优势。 响应式网站在 2020 年才为我们国家的少数人所知晓，此时，国外的响应式技术
3、已经进入成熟期，不仅小型的商务公司采用响应式设计，很多大公司也在探寻求索在他们的网站采用响应式网页设计。 2020 年底苹果公司的一份调查问卷显示，国外智能手机的覆盖率已经为 80%, 而同年，Google 的智能手机使用调查报告上显示，中国城市的智能手机的普及率为 47%. 而智能手机的普及推动了响应式技术的发展，由此可见，智能手机的普及度也是我们国家响应式网站发展缓慢的原因。 2用户行为分析 研究用户行为，是由于我们的产品是要为用户服务的。 以用户为中心的设计能给用户更好的体验， 让用户对开发出来的产品产生好感，进而购买我们的产品。设计与生产就是为了出售，而客户就是推动生产与创新的气力，因
4、而，在开发产品的每个阶段，都要把用户考虑在华而不实。 2.1 设备的多样式 生活中，很多人一天会用三种设备上网。外出时使用手机上网，在室内用电脑上网，而睡前用平板获取信息。 这三种设备的屏幕各不一样，分辨率从 320 像素到 1920 像素不等。 当代家庭中，数字电视也开场普遍，也就是讲，有一部分人除了用手机、平板和电脑上网之外，还会使用数字电视，另外还有一部分人用可穿戴设备上网，而同一种设备还有不同的大小型号。 由此可见，现如今的网站比之前的任何时候都更需要能够在不同的设备上适用，而每一种设备又都是功能与被限制的关系产物。 2.2 使用环境与网速的关系 用户在家时，时间比拟充裕，最可能使用电
5、脑或平板上网，有些人还会使用数字电视，此时网络连接一般为宽带或 WIFI,网络流畅，速度较快，不在乎阅读网页时所花的流量多少，也会增加页面的等待时间；用户在户外时，所在的地方有公交车上、开车中、行走中、商场或者等待中，此时的用户时间都是碎片化的，而且网速较慢，时间匆忙，用户很容易失去耐心。 3响应式网站的优点 3.1 一个站点适应所有屏幕 在国内，很多大型网站，财力比拟充足，所以会为 pc 端和移动端各建立一个站点，方便在各个端口实现最好的页面效果。 然而时代在发展， 各种的设备的种类越来越多， 屏幕分辨率也各不一样。 随着Google 眼镜的推出，Apple Watch 的成功发布，可穿戴设
6、备离我们越来越近，这也讲明，今后会有更多我们闻所未闻的设备接踵而来，并且这些设备将会越来越普及。 面对如此多的设备，我们的网站应该怎样去适应各个不同设备的端口？解决这个问题的最好方式方法是建立一个能够适应各种屏幕的站点，这种站点就是响应式网站，不仅解决了需要建立多个站点的问题，而且在各个站点都能最好地展示页面效果。 3.2 提升用户体验 当你阅读网站时，你会发现很多网站在 pc 端是如此的完美，但是到了移动端却是惨不忍睹。 例如在国外的 copyblogger 的博客有提到过一个很经典的案例-迪士尼公司的网站，他讲在迪士尼网站中有很多给小朋友玩的网页游戏，但是这些游戏却只能在 pc 端玩，在移
7、动端是无法打开的。 而响应式网站却能够让你无论在 pc 端还是移动端都能体验到良好的视觉效果。 4响应式在伯乐相马网站的应用 4.1 响应式导航的设计方式 响应式导航常见的设计形式有 7 种，分别是：置顶、页脚锚点、置底、菜单项选择择、侧滑、开关和彻底隐藏。在伯乐相马网中，主要采用的是菜单项选择择，菜单项选择择是将导航收纳在一个选择菜单的控件当中的方式方法。 减少了导航所占用的屏幕空间。 选择菜单项选择择的原因如下： 在移动设备中，空间资源非常有限，因而移动端的导航不能像 pc端那样直接显示，需要将导航整合在一起。 置顶虽是简单的导航实现方式，但是在移动端会造成不好的视觉效果；对于页脚锚点和和
8、置底来讲，都是将导航放在页脚，对于一个求职网站来讲需要的是快速寻找所需的信息，而这种方式方法增加了用户的使用成本；开关的导航方式，是用户点击后菜单才滑动展开，但菜单的设置区域是固定的，用户需要寻找才能发现，增加用户的使用成本；彻底隐藏也同样增加了用户成本。 4.2 响应式网页的布局 基于响应式网页的布局，有人曾经这样形容：倒入杯中的水的形状由装它的容器形状决定。 网页设计可以以把这个概念融入华而不实，网页的展示形式取决于展示它的设备屏幕尺寸。页面常用的布局方式有固定布局、流动布局、弹性布局和混合布局。响应式网站中一般采用后三种，选择适宜的方式才是最好的，并没有哪一种布局方式是最好的。能够多种方
9、式混合使用，扬长避短。通栏、等分构造的合适采用弹性布局方式、 而对于非等分的多栏构造往往需要采用混合布局的实现方式。 4.3 设计形式 设计形式主要有两种：基于设备和内容优先，早先年间很多网页采用基于设备的形式，由于当时屏幕种类较少，且有标准屏幕之讲。如今，标准屏幕已经不复存在。 因而，内容优先是一种不错的选择。 在伯乐相马网中采用的是内容优先的方式，由于对于一个信息类的网站而言，可读性和移动性至关重要。 4.3.1 基于设备 通过主流设备的类型及尺寸来确定布局断点Break point，设计多套样式，再分别投射到相应的设备。 不要使用流行的设备尺寸来确定断点。 该设备的屏幕Device La
10、ndscape是不断在变化的，所以使用流行设备的尺寸作为断点， 他的实际价值存在的意义可能没有什么，甚至一年的时间都坚持不到。 Web 本质是流动的，因而我们的工作是在任何屏幕上开创建立外观、功能等。 4.3.2 内容优先 根据内容的可读性、易读性作为确定断点Break point的标准，即在对内容进行布局设计的时候，能够无视设备，由内容决定何时需要采用不同的呈现方式。 这种方式和将来友好型是相契合。 4.4 响应式网页的字体 字体对于一个网站来讲，起着至关重要的作用，不单是画风影响风格，字体也会影响风格，响应式网站的字体尺寸会随着屏幕尺寸而不断调节，展现最合适人类视觉的界面。 4.4.1 字
11、体大小 从 2006 年开场有人开场推荐了 透视化比例 字体尺寸。 正文字体尺寸能够通过透视窍门来评估，而行高需要一些调整。 随着更远的阅读距离和更多的像素污点，给屏幕上的文字比印刷的更大一点的行高是比拟好的方式。140%是一个好的参照。 调整字体尺寸不是一个关于兴趣的问题，是一个阅读距离的问题。 相当一部分的网站会选择小字体，想用这种方式方法让人觉得此网站做工很精细，大部分用户也会根据这个字体大小去阅读，到后面也会习惯了。 4.4.2 字体边界 字体跟边界的距离很有讲究，在响应式网站中，不同屏幕尺寸中的边界也是不一样的，符合人类的观看视觉，才会让读者觉得舒适，如若处理不当，就会让用户觉得太窄
12、，空间不够用，太挤或太宽，存在感小，视觉上出现不适，就不想再看下去了。 所以每次变换屏幕的时候，边界尺寸也需要调整。 5总结 随着计算机软硬件技术的飞速发展， 网站的实现技术也日渐成熟，各种网站的种类和数量也是数不胜数，网络知识也越来越普及，各地网民也在不断增加。 想要在比比皆是的网站中脱颖而出，前提是要有良好的用户体验， 而响应式网站设计正是以用户为中心的设计，往往能给用户良好的体验。 伴随着社会的发展，人类的欣赏水平和体验感觉也会变得越来越高，除了页面要美观之外，打开网页的速度的快慢也决定了用户能否会停留在网页，所以在响应式的基础上还要不断努力的提升网页速度。响应式具体表现出的是一种高度适应性的设计思维形式。在响应式设计探究的道路上，响应式的本身不是唯一的目的，任意设备对页面内容进行完美规划的设计谋略及工作流程才是我们更远大的追求。 【以下为参考文献】 1美Tim Cadlec,着。候 儒鸿，译。响 应式 Web 设计实 践M.北 京：人 民邮 电出版社，20206：1-20. 2德Smashing Magazine,寒武纪，译。众妙之 门-国 际顶 级 Web 设 计师 成功法则M.北京：人民邮电出版社，20201：5-11,152-153.