专注优质Wordpress企业网站搭建与优化

抛砖引玉Web2.0设计指南(九)



抛砖引玉Web2.0设计指南

原文地址:WEB2.0 Design Style Guide

翻译整理:西米CC

完美来自细节——友好的视觉感受

多数2.0风格的网站都会适当的使用微妙的3D效果来提升用户对设计质量的体验,我们都知道这些细节有很好的辅助作用,但是我们可能不知道其中的奥妙。诸如投影、斜角、倒影之类的视觉设计,使得网站的外观看起来更加贴切、实在以及“完美”:

SEO优化,CSS教程,Wordpress博客 WordPress企业建站+企业网站SEO优化推广 抛砖引玉Web2.0设计指南
抛砖引玉Web2.0设计指南- http://ximicc.com 抛砖引玉Web2.0设计指南
抛砖引玉Web2.0设计指南 汇聚博客资源,点亮博客价值 - http://ximicc.com WordPress企业建站+企业网站SEO优化推广

何时及如何使用丰富的界面?

即便是金科玉律也要用之适度,而不应过头。诚如我在介绍3D效果教程中解释的一样,我们不必为每个元素都强加这些效果,界面视觉设计应该体现出其对站点设计的价值,在运用的时候要讲求灵活性和适用性。3D立体效果可以让某些元素在页面上显得很突出醒目,但也是基于其它元素的平面性。

不要让你的整个设计都洋溢着3D视觉,因为:

1.这会大幅增加你的工作量;
2.页面的体积也会太过“可观”;
3.最重要的一点就是:你完全不必这么做!

多一点变化,多一点体验——柔和的颜色渐变

在Web 2.0设计中,渐变的运用及其丰富和灵活。

抛砖引玉Web2.0设计指南

恰当的渐变可以使网站的版块显得柔和而不呆板,在视觉上让页面中的元素突破单纯二维平面的限制。

SEO优化,CSS教程,Wordpress博客

渐变通常是同一种色调的深浅变化,它对情景的营造也有很大的帮助。

抛砖引玉Web2.0设计指南

一个运用了渐变的背景,就很容易让用户形成一种距离感和空间感。蓝-白是很常用的渐变色系组合,它们能很容易的引发空间透视的视觉效应。

这类渐变一般用在页面的顶部,某种程度上也是一种区域分界。

抛砖引玉Web2.0设计指南

在质感按钮等元素中常用的投影、内光、高亮等效果中,蓝-白渐变也有很广泛的运用。

SEO优化,CSS教程,Wordpress博客

Curve2的主页上,因为应用了渐变的版块放置在纯白或灰度的区域中,其所体现的功能就更加明显了。记住一点,如果想让页面中的渐变更加醒目,最好把它们跟纯色之类平面感较强的元素放在一起。在Curve2的主页中,暗色调的背景把高亮的绿色衬托出温暖、亲切的感觉,从而使得整张页面也显得更加柔和友好、层次丰富。

[ 以下内容您也可能感兴趣 ]

Add a Comment