【编者按】一种声音总是很危险,而艺术设计更应该警惕只有一种声音,网站设计自然属于艺术设计之一。为此,我们开设“艺术设计异论”专题,讨论关于网站设计的不同论点、声音。
什么是响应式网站?很多人是从效果而不是技术角度理解的——响应式网站就是能够适应不同终端设备的网站,可以适应手机、PC、平板乃至大屏。
于是便产生了这样一个问题——不同屏幕的大小不同,采用缩放的方式适应不同大小屏幕,会不会导致体验差别很大?举例来说,为了匹配小屏,需要降低信息量,但是这样信息量较少的页面,在大屏或者PC上,会给我很空洞的感觉。
天然矛盾
这其实也是响应式网站的天然矛盾——为了适应小屏,需要降低单个页面的元素、信息,而大屏上看,会显得很空洞。
我们发现,大多数的响应式网站都存在这一不可解决的矛盾,也是天然矛盾。
有人尝试去解决——增加单个页面的元素和按钮,但是在小屏上,会显得很拥挤和杂乱。
还有人换了个思路——满足小屏体验,但是放到大屏上,则很空泛、毫无实物。
也是因为如此,有的企业,并不认可响应式网站,仍然坚持开发传统网站,单独开发移动端、PC端、平板端,例如淘宝就是独立的非响应式网站。
所以,我们也建议,餐饮类、电商类的网站,并不必须要做成响应式的。
缓和矛盾
做响应式网站,虽然可以适应不同屏幕,但是在大屏上,会显得很空洞。
这一矛盾,不可解决,但是可以缓和。如何让留白看起来不那么空洞呢?
我们提供如下一些设计方面的策略和建议:
其一,布局方面,倾向于左中右布局。这种布局,可以将留白放在左右,重要的版块和内容置于中间和中央,无论在小屏还是大屏,重要内容都可以突出。
其二,元素方面,放置在中间位置。例如苹果的中文官网,产品的图片都是置于中间位置,即便在小屏上,也能一目了然。
其三,文案方面,语气偏硬朗而非委婉。为了适应小屏,单屏的文字不宜过多,所以,过于委婉和曲折,会导致用户理解难度的提高,文案描述需要简洁和直接,语气偏硬朗。
其四,色彩方面,善于使用色块。通过色块的填充和变换,来减少因为元素过少而导致的空洞感。也是因为如此,一些潮流网站都非常喜欢使用渐变色,就是缓和矛盾的措施。
其五,视觉方面,各个元素距离适中。不能距离过大,虽然在大屏视觉较好,但是小屏就有疏离感;不宜距离过小,满足了小屏,但是大屏会显得留白过多。
如上思考,希望能够引起网站设计的思考,共同讨论,提高响应式网站的设计水准。
什么是响应式网站?很多人是从效果而不是技术角度理解的——响应式网站就是能够适应不同终端设备的网站,可以适应手机、PC、平板乃至大屏。
于是便产生了这样一个问题——不同屏幕的大小不同,采用缩放的方式适应不同大小屏幕,会不会导致体验差别很大?举例来说,为了匹配小屏,需要降低信息量,但是这样信息量较少的页面,在大屏或者PC上,会给我很空洞的感觉。
天然矛盾
这其实也是响应式网站的天然矛盾——为了适应小屏,需要降低单个页面的元素、信息,而大屏上看,会显得很空洞。
我们发现,大多数的响应式网站都存在这一不可解决的矛盾,也是天然矛盾。
有人尝试去解决——增加单个页面的元素和按钮,但是在小屏上,会显得很拥挤和杂乱。
还有人换了个思路——满足小屏体验,但是放到大屏上,则很空泛、毫无实物。
也是因为如此,有的企业,并不认可响应式网站,仍然坚持开发传统网站,单独开发移动端、PC端、平板端,例如淘宝就是独立的非响应式网站。
所以,我们也建议,餐饮类、电商类的网站,并不必须要做成响应式的。
缓和矛盾
做响应式网站,虽然可以适应不同屏幕,但是在大屏上,会显得很空洞。
这一矛盾,不可解决,但是可以缓和。如何让留白看起来不那么空洞呢?
我们提供如下一些设计方面的策略和建议:
其一,布局方面,倾向于左中右布局。这种布局,可以将留白放在左右,重要的版块和内容置于中间和中央,无论在小屏还是大屏,重要内容都可以突出。
其二,元素方面,放置在中间位置。例如苹果的中文官网,产品的图片都是置于中间位置,即便在小屏上,也能一目了然。
其三,文案方面,语气偏硬朗而非委婉。为了适应小屏,单屏的文字不宜过多,所以,过于委婉和曲折,会导致用户理解难度的提高,文案描述需要简洁和直接,语气偏硬朗。
其四,色彩方面,善于使用色块。通过色块的填充和变换,来减少因为元素过少而导致的空洞感。也是因为如此,一些潮流网站都非常喜欢使用渐变色,就是缓和矛盾的措施。
其五,视觉方面,各个元素距离适中。不能距离过大,虽然在大屏视觉较好,但是小屏就有疏离感;不宜距离过小,满足了小屏,但是大屏会显得留白过多。
如上思考,希望能够引起网站设计的思考,共同讨论,提高响应式网站的设计水准。