< >

2017 TOP10 RWD网站设计趋势与特点

发表日期：2021-01-18 16:03:36作者来源：浏览次数：

　　过去几年，全球所有的设计师透过各种方式不断探索RWD网页设计的设计模式，2017年即将进入成熟阶段，成熟且大众化的RWD网页设计样式才能提高网站流量。

　　网页设计是一种产品设计，因此，不够实用或不符合趋势的设计，不只会导致使用者在网站里迷航，更可能让使用者对你的网站失去耐心与信心。

　　在RWD的时代，每一种网页设计样式都必须找到得以同时适应电脑版与手机版的解决方案，成为当前网页设计师们的重要课题。许多过去很炫且视觉效果强烈的网页设计，在RWD的考量下，不见得都可以继续使用。设计师们必须找出同时可以符合RWD规范，又能具体呈现不同网页设计风格的作法。我们来看看有哪些成熟的RWD设计方式，能让你的客户在手机上顺利浏览，同时增进网站流量。

　　1.汉堡选单(hamburger menu)

　　汉堡选单目前已广泛作为手机版选单的设计模式，IBM官网则进一步将它发展成电脑版和手机版共用的选单样式，并保留电脑版的主选单，使电脑版和手机版的操作习惯更为一致。

　　2.下拉选单(dropdown menu)

　　过去网站次要选单经常采用左选单的方式来设计，在RWD的时代，GE官网直接将这些网站次要选单直接在主选单上以下拉选单的方式呈现。如此的规划，可让使用者在电脑版选单和手机版选单，看到一致性的选项。

2017 TOP10 RWD网站设计趋势与特点

　　3.全幅背景(full background)

　　全幅背景是目前最流行的RWD设计模式，不论内容是图片轮拨(slider)、影片或单色色块。由于大背景主要是透过width:100%让画面尺寸自动贴合萤幕尺寸，一来在电脑或行动装置都可以贴齐边界，二来大背景可以呈现大萤幕的观赏效果，因此成为最受欢迎的RWD设计样式之一。

2017 TOP10 RWD网站设计趋势与特点

　　4.卡片列表(Card List)

　　卡片式列表应该算是RWD时代最典型的设计样式。卡片式的设计可以在电脑版和手机版自由切换，与手机APP清单的浏览模式相近，可清楚呈现每个item，点选范围也变大了，许多列表的样式(例如news list)也都直接采用卡片式设计。

2017 TOP10 RWD网站设计趋势与特点

　　5.全萤幕相簿(full screen album)

　　有图有真相，透过照片来介绍是最简单有效的方式。然而不是所有的相簿外挂都能RWD的。全萤幕相簿可直接侦测萤幕宽高来自动调整图片呈现的尺寸，不像嵌入网页的相簿，需顾虑网页上其他元素相对的位置，因此全景相簿成为RWD时代最受欢迎的相簿设计模式。

2017 TOP10 RWD网站设计趋势与特点