光影与 WEB 界面设计

May 07, 2016

前言-情怀

首先感谢《CSS禅意花园》这本书。看书的过程也许唤起了我许多年前对于艺术设计的一些追求,让我想起了五六岁时就热爱的绘画,想起了小时候挂满墙壁的作品,想起了学习四年的素描画与水粉画的经历。多年以后偶然回想起最初的梦想,早已烟消云散,只得莞尔而笑。

书中的 CSS 布局方案都很巧妙,其中一些页面的界面设计巧夺天工,好几次看得我心潮澎湃,竟不自觉鼓起掌来。

尤其推荐其中

Zunflower

Atlantis

两篇。虽然这个网站一些设计有些过时(分辨率比较低,使用绝对单位长度,大屏幕看会不习惯),但是它们的设计思想都是很巧妙的,各有可取之处。

本文只从光影角度思考web界面设计,那么光影是什么呢?光线与阴影。

我所过很多较差的web界面可以用胡乱拼凑来形容,另有些尽管有一定的设计因素在里面,但缺乏专业的思考。高中艺考必考素描和色彩,这两项对于艺术设计来说就是最基本的知识,前者培养结构、光线和透视,后者培养色彩的感知。如果一个美术作品中光影自相矛盾,或者层次混乱,那么我们可以说这是不好的作品,并没有继续评价优劣的资格,如果连常识都不懂的人非要说这是超现实抽象的作品,我觉得是不恰当的。

做web设计应该有追求,有思考,有核心的创作理念,不要得过且过。追求整个作品风格的统一、色调的和谐、层次的清晰。在整个设计过程中基于创作理念持续思考这些问题,在给用户解释的时候要有理有据地一一陈列出来以说服用户。要从用户角度进行创作,不要把自己当成主要用户,自己想当然地觉得怎么好就怎么做。我们所做的作品可能是几十人甚至成千上万人要用的,不能太随意。应该有种极客的精神追求作品的完美。

大部分用户无法从专业角度赏析艺术作品,所以web界面设计做得好于不好很多时候是细节问题,细节体现了一种认真的态度和对用户的尊重。屏幕相对于纸质品来说已经很宽容了,像素级为单位,72dpi,有限的色彩数。因此细节处于可控制的状态,共勉!

光影与拟物化

素描作为美术专业的基础课,其非常适合培养人们对光影和结构的感知能力。

当今扁平化设计理念大行其道,绝大多数作品都是邯郸学步,根本没学到扁平化设计的精髓。现在的扁平化设计与前两年的纯扁平化已经不同了,从之前的纯扁平到现在配以阴影效果增强层次感(Android 5.0起的UI设计已优化了之前的纯扁平)。

对于Web界面设计,光影首先要保持基本的方向统一性。整个页面的光线一般是从一个方向照射过来,要注意这个方向不一定和网页平面平行,也就是说这个光源照射方向将会影响页面内所有元素的投影。如果页面中有拟物化的图标图片等元素,这些拟物化的图形阴影应当符合正常的自然规律,即顺应光源方向。如果在页面中混入了个别扁平化的按钮,其阴影方向与其他元素不一致,将会非常难看。

其次要注意阴影范围和颜色深度的影响。利用阴影可以按时遮挡物的大小,或者遮挡物距离页面表面的距离:即遮挡物距离页面越远,阴影范围越大而颜色越浅;遮挡物本身越大,阴影范围越大而阴影相距物体更远位置的边缘越模糊。

以上两点为最基本的符合自然规律的常识,我觉得如果做不到的话是最基本的逻辑错误,将会引导用户进一步使用的逻辑混乱。

光影与层次感

上一段提到,由光影所直接影响的层次感也是很重要的。

web页面一般是在平面上展示(如果响应式适配到曲面屏另说),但是在平面上也可以展现出多种层次,从而让平面变得立体,或者更有意境。无论是中国的山水画,还是西方的透视原理,都是以平面为载体使观看者产生空间感,那么可想而知层次在页面中就有多种多样的形式来产生。

其一可以使用扁平化模块配合阴影形式体现,这种形式给用户一种“模块漂浮在页面上层”的感觉,如果多个模块重叠,则层次数目随之增加。这里要尤其注意上一段中我所提到的阴影方向、范围、颜色深度要符合自然规律的问题。这种方式塑造的层次感主要是为了区别不同板块的重要性,从而优化用户的使用逻辑(例如某些板块的折叠与展开)。

其二可以使用整块的图形图像放置在页面上,这里的图像即和美术作品的作用一直,是为了让平面变得立体或者更有意境,从而引发作者的一些思考,或者单纯为了使页面赏心悦目。这种方式塑造的层次感要注意的是立体感强烈的图像与外围其他元素的关系,如果整个页面都是扁平化设计,中间忽然多了一张立体的放射性构图的风景图,则会显得格格不入,要尽量保持图像与页面其他元素风格和所表达含义的统一。

光影与情感暗示

光影配合色彩所共同营造一种情感气氛,对于页面的用户来说会受到这种气氛的影响。

处于光影的明处与暗处的内容可以不尽相同,不同性格的人会更加注意明处或者暗处的内容,因此可以区别对待。

使用光影的问题

虽然光影对于WEB界面设计起到很好的辅助作用,但是他也存在很多问题:

1.出错率高,由于做WEB界面设计的人很多并没有收过专业的美术培训,因此仅凭个人的感觉来制作页面非常容易与自然规律相乖离。

2.不好掌控与页面中其他元素风格的统一性。比如在相对扁平化设计的页面中使用光影很可能风格混乱。

3.对于老版本浏览器兼容性存在一定问题,使用css3或者一些插件可以制作一些很酷炫的光影作品,但是对于老版本浏览器显示极易出现问题,甚至无法显示。

4.对于现实效果不好的介质(强光照射下的屏幕、亮度值调整得不正常的显示屏)或者用户本身视觉存在生理问题的时候,光影很有可能不被用户所察觉,甚至南辕北辙。

慎用!慎用!慎用!