SEARCH
新闻资讯

网站知识库

伯乐相马网站中自适应式网页的运用

2020/5/2 14:05:44

1自适应式设计简介

1.1 自适应式的起源

2010 年 5 月,Rthan Marcotte 就在“A List Apart”发表了一篇叫做“Responsive Web Design”(自适应式网页设计)的文章,提出了自适应式网页设计的理念。 自适应式网页设计来源于建筑界的设计理念,即自适应式建筑,它是指某个空间的大小会根据内部的人员的数量和流动的速度而主动调整。把这种设计思路运用到网页中来,也有异曲同工之妙。快速增加而且日趋多样化的可联网设备的产生,使得广义的屏幕标准尺寸已经不存在,并且屏幕尺寸也在赓续转变以知足人们的需求;严酷定义的自适应式一样平常是指自适应式 Web 设计, 而 Web 凭借其特有的天真性和可塑性,可以适应各种尺寸和配置的设备,它可以无处不在。自适应式设计概念一提出,各大网站及平台都盼望能够采用这秉一应万的模式,可以更天真地去适配更多设备,尤其是在移动设备大爆棚的时代。

1.2 自适应式的发展情况

2013 年 TNW 发布了 10 大网页设计趋势排行, 其中排名第一的为自适应式布局,即一个网站适配多种屏幕。 其实早在 2012 年我们就看到一些新的设计趋势出如今 Web 设计领域,分外是自适应式网页设计。

国内的自适应式发展情况比国外落后许多,在国外的自适应式网站很盛行的时候,我国才后知后觉的其上风。 自适应式网站在 2013 年才为我国的少数人所知晓,此时,国外的自适应式技术已经进入成熟期,不仅小型的商务公司采用自适应式设计,许多大公司也在探索在他们的网站采用自适应式网页设计。 2013 年底苹果公司的一份调查问卷表现,国外智能手机的覆盖率已经为 80%, 而同年,Google 的智能手机使用调查报告上表现,中国城市的智能手机的普及率为 47%. 而智能手机的普及推动了自适应式技术的发展,由此可见,智能手机的普及度也是我国自适应式网站发展缓慢的缘故原由。

2用户举动分析

研究用户举动,是由于我们的产品是要为用户服务的。 以用户为中间的设计能给用户更好的体验, 让用户对开发出来的产品产生好感,进而购买我们的产品。设计与生产就是为了出售,而客户就是推动生产与创新的力量,因此,在开发产品的每个阶段,都要把用户考虑在其中。

2.1 设备的多样式

生活中,许多人一天会用三种设备上网。外出时使用手机上网,在室内用电脑上网,而睡前用平板获取信息。 这三种设备的屏幕各不雷同,分辨率从 320 像素到 1920 像素不等。 当代家庭中,数字电视也开始普遍,也就是说,有一部分人除了用手机、平板和电脑上网之外,还会使用数字电视,另外还有一部分人用可穿戴设备上网,而统一种设备还有不同的大小型号。 由此可见,现现在的网站比之前的任何时候都更必须要能够在不同的设备上适用,而每一种设备又都是功能与被限定的关系产物。

2.2 使用环境与网速的关系

用户在家时,时间比较充裕,最可能使用电脑或平板上网,有些人还会使用数字电视,此时网络连接一样平常为宽带或 WIFI,网络流畅,速度较快,不在乎欣赏网页时所花的流量多少,也会增长页面的等待时间;用户在户外时,所在的地方有公交车上、开车中、行走中、商场或者等待中,此时的用户时间都是碎片化的,而且网速较慢,时间匆忙,用户很容易失去耐心。

3自适应式网站的好处

3.1 一个站点适应所有屏幕

在国内,许多大型网站,财力比较足够,所以会为 pc 端和移动端各建立一个站点,方便在各个端口实现最好的页面结果。 然而时代在发展, 各种的设备的种类越来越多, 屏幕分辨率也各不雷同。 随着Google 眼镜的推出,Apple Watch 的成功发布,可穿戴设备离我们越来越近,这也说明,往后会有更多我们闻所未闻的设备接踵而来,并且这些设备将会越来越普及。 面对如此多的设备,我们的网站应该如何去适应各个不同设备的端口?解决这个问题的最好方式是建立一个可以适应各种屏幕的站点,这种站点就是自适应式网站,不仅解决了必须要建立多个站点的问题,而且在各个站点都能最好地展示页面结果。

3.2 提高用户体验

当你欣赏网站时,你会发现许多网站在 pc 端是如此的完善,但是到了移动端却是惨不忍睹。 例如在国外的 copyblogger 的博客有提到过一个很经典的案例---迪士尼公司的网站,他说在迪士尼网站中有很多给小同伙玩的网页游戏,但是这些游戏却只能在 pc 端玩,在移动端是无法打开的。 而自适应式网站却能够让你无论在 pc 端照旧移动端都能体验到优秀的视觉结果。

4自适应式在伯乐相马网站的应用

4.1 自适应式导航的设计方法

自适应式导航惯用的设计模式有 7 种,分别是:置顶、页脚锚点、置底、菜单选择、侧滑、开关和彻底隐蔽。在伯乐相马网中,重要采用的是菜单选择,菜单选择是将导航收纳在一个选择菜单的控件当中的方式。 削减了导航所占用的屏幕空间。 选择菜单选择的缘故原由如下:

在移动设备中,空间资源特别很是有限,因此移动端的导航不能像 pc端那样直接表现,必须要将导航整合在一路。 置顶虽是简单的导航实现方法,但是在移动端会造成不好的视觉结果;对于页脚锚点和和置底来说,都是将导航放在页脚,对于一个求职网站来说必须要的是快速探求所需的信息,而这种方式增长了用户的使用成本;开关的导航方法,是用户点击后菜单才滑动睁开,但菜单的设置区域是固定的,用户必须要探求才能发现,增长用户的使用成本;彻底隐蔽也同样增长了用户成本。

4.2 自适应式网页的布局

基于自适应式网页的布局,有人曾经这样形容:倒入杯中的水的形态由装它的容器形态决定。 网页设计也可以把这个概念融入其中,网页的展示情势取决于展示它的设备屏幕尺寸。页面常用的布局方法有固定布局、流动布局、弹性布局和混合布局。自适应式网站中一样平常采用后三种,选择合适的方法才是最好的,并没有哪一种布局方法是最好的。可以多种方法混合使用,取长补短。通栏、等分结构的适合采用弹性布局方法、 而对于非等分的多栏结构每每必须要采用混合布局的实现方法。

4.3 设计模式

设计模式重要有两种:基于设备和内容优先,早先年间许多网页采用基于设备的模式,由于当时屏幕种类较少,且有标准屏幕之说。现在,标准屏幕已经不复存在。 因此,内容优先是一种不错的选择。 在伯乐相马网中采用的是内容优先的方法,由于对于一个信息类的网站而言,可读性和移动性至关紧张。

4.3.1 基于设备

通过主流设备的类型及尺寸来确定布局断点(Break point),设计多套样式,再分别投射到相应的设备。 不要使用流行的设备尺寸来确定断点。 该设备的屏幕(Device Landscape)是赓续在转变的,所以使用流行设备的尺寸作为断点, 他的现实价值存在的意义可能没有什么,甚至一年的时间都坚持不到。 Web 本质是流动的,因此我们的工作是在任何屏幕上创建表面、功能等。

4.3.2 内容优先

根据内容的可读性、易读性作为确定断点(Break point)的标准,即在对内容进行布局设计的时候,可以漠视设备,由内容决定何时必须要采用不同的呈现方法。 这种方法和将来友爱型是相契合。

4.4 自适应式网页的字体

字体对于一个网站来说,起着至关紧张的作用,不单是画风影响风格,字体也会影响风格,自适应式网站的字体尺寸会随着屏幕尺寸而赓续调节,显现最适合人类视觉的界面。

4.4.1 字体大小

从 2006 年开始有人开始保举了“透视化比例”字体尺寸。 正笔墨体尺寸可以通过透视窍门来评估,而行高必须要一些调整。 随着更远的阅读距离和更多的像素污点,给屏幕上的笔墨比印刷的更大一点的行高是比较好的方法。140%是一个好的参照。 调整字体尺寸不是一个关于爱好的问题,是一个阅读距离的问题。 相称一部分的网站会选择小字体,想用这种方式让人觉得此网站做工很邃密,大部分用户也会按照这个字体大小去阅读,到后面也会风俗了。

4.4.2 字体边界

字体跟边界的距离很有讲究,在自适应式网站中,不同屏幕尺寸中的边界也是不一样的,吻合人类的观看视觉,才会让读者觉得恬逸,如若处理不当,就会让用户觉得太窄,空间不够用,太挤或太宽,存在感小,视觉上出现不适,就不想再看下去了。 所以每次变换屏幕的时候,边界尺寸也必须要调整。


如没特殊注明,文章均为成都网站建设公司唯赛网络原创,转载请注明来自http://www.weseo.cn/News/knowledge_675_12099.html

Contact

ADD:成都市青羊区光华东三路西环广场6楼

TEL:028-64232097

Wechat

微信二维码