网页设计心得:我对网页设计的一些看法(进阶篇) 网页设计  ruanjian jiaocheng

上期文章:

网页设计心得:我对网页设计的一些看法(初阶篇)

在开始正文之前还是先说点别的,前两篇写了网页设计的入门和设计原则的基本运用,实话说想把 网页设计往深里说还真是不容易的事,只讲大道理又没人看………..从这点看各位写文章的前辈也真是不容易,关于本次的内容取名为进阶篇我觉得是比之前的略有深入,进阶既不是中阶也不是高阶,哎〜我是不是又开始纠结了。还是接着聊干货吧〜

图片的选择

大家看到标题也许会想一个网站选个图片有什么难的,其实随着现在带宽的提高,大图片的运用在 网站设计中越来越频繁,优秀的图片质量自然能提高网站的整体视觉水平,那么网站选择图片也是有技巧的。我们需要提升抽象信息的表达能力。

除了信息表达,我们还要注意大图的清晰和内容质星,如果图像不够清晰有时就会拖很大的后腿。

同样的网站框架所选的图片质星不高给人的感受肯定也是不一样的,经常有设计师出的效果图是很 高大上,但是到了用户手里自己上传图片那就矮矬穷了,当然这都是后话,我们所做的都是为了前 期客户确认效果图。

例 1-1图文案例

做一个案例,主题是跟时尚类有关的英文网站,以图片为主结构简单(大家不要纠结logo,我随手放的没有任何意义…)好吧我实在不想吧这个案例做的太烂。
先卖个关子你们觉得那个配图更好些?

网页设计心得:我对网页设计的一些看法(进阶篇) 网页设计  ruanjian jiaocheng

网页设计心得:我对网页设计的一些看法(进阶篇) 网页设计  ruanjian jiaocheng

网页设计心得:我对网页设计的一些看法(进阶篇) 网页设计  ruanjian jiaocheng

如果你看到这里还分不出有什么区别,或者是那个好,那可能是你对图片的感觉还不敏感〜(我找公司的很多人来看这个案例,凡是设计一直认为左边的,销售和程序员们有一小半选右边的…可能右边的美女更性感的原因?)

我的选择是左边的选图,好吧不做太多的纠结,我们来分析一下。

前面说了,这是一个关于时尚类的英文网站,这一点很重要,因为你做一个网站要知道这个网站的 商业定位或者是营销策略、受众人群等等。

作为时尚类网站给人第一印象是摄影、时装、奢侈、设计感等等关键词,那么我们在选图的时候也 要注意关于图片内容的质星。但只有这些还不够,这两个图中的基本元素都有,但是为什么右图给 人的感觉更加的廉价?

首先从摄影角度来讲:

左图在整体场景、氛围、光影、纹理等等细节上对 比右图更加的精致,更容易体现图片主形象的品质感。所以童鞋们不要轻 视了选图的环节,选图本身也是设计的过程。

其次从色彩角度来讲:

左图在图片色调的整体性上更优与右图,看上去色 调更统一。有的童鞋说:“那我们并不能保证网站上线客户就一定注意这 个啊〜有必要这么认真么? ”我想说的是客户上传什么样的图片你管得着 么?既然管不着那咱们就先做好自己的事情。(你效果图都还没通过,还 上传个球〜)

最后从网页角度来讲:

这个网站的导航是无背景的白色纯文字,banner大图需要进行处理才能把导航显现的更清楚,那右图的大banner没有经过处 理就直接导致了导航消失在了背景中。(下面汫如何处理)

图片的处理

接苕上面的讲〜现在大图背景的网站或者是视频背景的网站开始流行(视频背景在普通建站公司基本上是遇不到的),那么大图的效果如何处理才能在展示视觉效果的同时又能配合文字进行信息的传达。

我们先找几个比较简单的案例:

网页设计心得:我对网页设计的一些看法(进阶篇) 网页设计  ruanjian jiaocheng

我们这么处理一个是丰富图片,另一个是为了让文字有更高的识别性,不是非要给文字添加样式才能让文字突出,有时候干干净净的好好排版就可以了。

那么蒙层也不只是单一的放上一个颜色图层半透明就可以了,其实有很多的变化我们可以进行尝 试,都会带来意想不到的效果。比如:

网页设计心得:我对网页设计的一些看法(进阶篇) 网页设计  ruanjian jiaocheng

这里我们看到了我们又加入了一个新的元素就是图案纹理,那么我们就分析重复的图案结构。

网页设计心得:我对网页设计的一些看法(进阶篇) 网页设计  ruanjian jiaocheng

右边为放大后的展示效果,灰色为单个图案的实际面积,而黑色方块则代表了 1px单位的实际着色 面积,把他们作为图案填充连续循环就得出了左边的的连续图案纹理。这种图案连续的方式我们可 以创造出很多种,常常可以在网页设计中有出色的细节表现。

注意现在填充的为100%的黑色,但是在实际运用中一般都是会进行透明度或者是色相、明度、饱 和度上的再处理,不会直接就这样放上去使用。

例2-3模糊处理&景深处理(案例来自网络)

大家都知道近实远虚,模糊背景&景深处理其实意思都差不多,主要是模糊背景图来体现前面的内 容,或者是同时突出产品或者文字。

还是截取几个网站的首屏来分析下:

网页设计心得:我对网页设计的一些看法(进阶篇) 网页设计  ruanjian jiaocheng

这里选的几个案例基本上都是banner的案例,大图在网站的运用还有其他的方式,比如贯穿整个网 站始终的大图背景等等,同时模糊之后也可以进行其他的手段进行再加工比如加蒙层等等,这里篇 幅原因就不一一举例了,希望大家多多动脑举一反三才是正解。

总结

本期主要讲了图片的内容质星,配合网站主题选择更有品质的图片,还有图片的几种处理手法,当 然还有更多的处理手段和方法等待大家挖掘和发现,和前一期讲的设计的四原则一样,今天讲的所 有要点都是可以同时存在互相组合的,希望大家灵活运用。

属性标签: