国画中有句话,“画虎先画骨”。对应到网页上,视觉效果就像一张皮,而前端代码是支撑这张皮的骨,了解骨架是怎么长的,有助于设计出更合理高效的页面。

一、常见视觉效果是如何实现的

关于文字效果

文字自身属性相关的效果css中都是有相对应的样式的,如字号、行高、加粗、倾斜、下划线等,但是一些特殊的效果,主要表现为ps中图层样式中的效果,css是无能为力的。但是css也在不断发展,在css3中已经新增了文字阴影的效果,可惜IE6、7、8均不支持。所以,一些比较特殊的文字效果,依然只能通过图片来实现。

说说文字间距

查看更多

数据之美
“我生活在一个拥有7,080,360,000人的星球上,这是关于他们的故事,
现今平均每人会对7.4个人说2250个词,人们会发3000亿封邮件
190亿条短信,加起来可组成1个巨大的马赛克图案……”——《触摸未来》(最近很迷的一部美剧)

没错,在这个信息爆炸的时代,借助图形化的手段,高效和清晰的交流信息是数据可视化的目的所在,作为一种信息载体,她拥有对数据的多种表现形式,可以是美丽的且带有趣味性的,以前对于数据在图形上表现只是停留在饼图、柱状图和直方图等简单的视觉表现形式上,为了更加有效的传达数据信息,帮助用户理解引起共鸣,依附与目前多媒体的科技手段,可视化的表现形式从平面到三维,媒介形式从纸张到网络以及视频,在互动性及时效性上都不断发生着变化。

当然,之所以将数据的外衣称之为美,也并不意味这对于她的表现仅仅只是拥有华丽的视觉外观而已,而更重要的是能把握好外观与信息本身功能之间的平衡关系。有学者认为这是理性与感性、“美”与“用”结合的一种设计方式,我很赞同这样的说法,如果对于可视化的设计只是为了漂亮而绘制出图形复杂内容空洞的数据图形是没有任何意义的。

查看更多

身为一个业余摄影爱好者,平时有机会总喜欢拍点照片,今天和大家分享一下我的一点心得体会。
为什么要摄影?
摄影更像是生命的图像日记,比文字更真实,具体,迅速。当“咔嚓”的一瞬间,这一秒钟已经成为历史,但记录的图片却成了留给未来的一份珍贵礼物。所以,拿起相机,拍照吧!把美好的瞬间和事物记录下来。

怎么样能拍出更有表现力的照片?

1.合理的构图

构图是摄影的最基础的要素之一。其中九宫格构图,又称为“井”字构图,是最为常见、最基本的构图方法,如果把画面当作一个有边框的面积,将整个画面纵横均分为三等份,得出四个交叉点,这四个点是人们习惯上的视觉重点,又称为趣味中心点。将要拍摄的主体位置放在四个点上,画面一般会体现比较好的效果,不死板,而有较好表现力,画面整体更为均衡。

 

查看更多

现在随着互联网企业的发展与业务的拓展,随着时间的推移,一个公司的产品可能将越来越丰富多样,同样每一个产品随不断的功能完善和扩展,随着一个产品的“长大”产品内所需要用到的图标也必然会越来越多,这时候众多产品形象的呈现、产品内图标等视觉原素的表现,如何能与整个产品或公司的战略计划相适应,这时候在图形语言的视觉呈现,语义表达、识别性等层面就需要作一个全面细致的考虑了。

我们来看几个典型的例子,回顾一下 Adobe 产品系列的成长过程, 从2005年 Adobe 收购了原最大的竞争对手Macromedia公司后,它的产品线得到了极大丰富, 而后在2002年Adobe确立了 Creative Suite概念后,后续的新产品持续推出,庞大的产品线以一种什么样的展现方式呈现在用户面前便成为了一项非常重要的课题。下图中我大致的列了一下Adobe产品logo的一个进化转变过程:

查看更多