文中是一位韩雪冬的网页设计"大腕",设计技巧。 网页设计其实也是UI,所以要用做UI的概念来做设计。




上面是韩老师作品中的元素截图,相信很多人都对这种酷炫的光效效果感兴趣而去临摹。但是其实就像韩老师教给大家的那样,技术上实现起来并不难,关键在于要对光效的理解到位。哪里是高光,哪里是阴影,哪里是反光要能够考虑到。拿第二张图片登录表单来说,顶部的左右两边的高光最亮的部分是白色的,这是一个层次,那么既然有这么亮的光线存在,那么必然在这些亮光周围有向外扩散的光晕,这又是一个层次,所以你可以看到这些高光周围的紫色是要比更远处的紫色浅一些的,所以你如果考虑到了这些东西,并且掌握了实现的技术,做出来的东西应该是很细腻漂亮的。
而这些效果仅仅靠图层样式的参数调整是不能够实现的,如果我们仅仅死记硬背了几个图层样式的参数设置,或者在Photoshop中保存了一大堆图层样式,而没有真正理解的话,是不会有提高的。为什么韩老师做这种光效很厉害?我觉得和他一开始做UI设计有非常大的关系,做UI要考虑到很多关于结构、光效之类的东西,比起网页上的元素来说要复杂很多。
下面是韩老师最近设计的煤气罐图标,我们可以认真观察,仔细考虑其中的高光和阴影,为什么高光和阴影放在这里?为什么是这个形状?明白了这些之后,网页元素上的光效看上去就比较简单了。所以多拿这种图形设计练手是非常好的提高设计能力的方法。

用UI的概念做网页设计的另外一个要点是细节。就像观止教育的优秀设计师辛旭起接受68Design采访时说的那样”我就拿一个按钮来说明,什么是按钮的细节?做出了颜色的渐变,做出了玻璃质感的高光,还需要什么?现在做出了三个面:亮部,暗部,高光。但是仔细想想:高光可能不止一处有高光,可以有多处光源,可以有多处高光。暗部不只是暗,它里面可能还会有反光,还有反射的物体,还有被反射的物体上面也有高光等等这些。把这些在这个按钮里有力的表现出来,这个时候,跟原来的按钮相比,就看到了细节。”要让设计出来的东西看上去漂亮,细节的表现是其中非常重要的一个方面。很多设计师在创建页面元素的细节时总感觉无从下手,不知道该做些什么,总被批评为设计粗糙,原因就在于想法还不够深入,看不到更深一层的东西,辛老师总结的这几句话算是给我们道破了迷津。



|