`

web2.0图形设计样式指南

阅读更多
http://bbs.mycgs.cn/viewthread.php?tid=35248&extra=page%3D6
web2.0图形设计样式指南
常见的属性

简单设计 simple design

是什么阻碍了你的设计?也许是太多无用的元素?在进行一个设计的时候,我经常会发现我自己在使用一个元素后,立刻问自己一个问题这个设计元素的目的到底是什么,问过之后我发觉我不需要那个元素。

大面积留白 lots of white space

注 意留白(空白的地方可以让你的作品呼吸,如果你愿意的话)是web2.0设计风格当中很重要的。恰当的留白会使页面元素更加出彩,同时也给眼睛一个休息的 地方。我通常都在960栅格设计用20-35px的留白来衬托设计。这个模式给了我一个很好的框架,也让里面的文字看起来真的很赞。

更大的文字 larger text

设 计之前一个主要的步骤是想到不要用那些很久之前用的像素字了,然后说我觉的28号字很好。另外一个用h1这种大字体做标题的或者头部字的优点是,将会给你 的站点SEO带来很好的优化效果。 其中一个主要因素是访问者可以迅速知道你的站点是讲什么的。大的字体可以让访问者快速的抓住要点。
所以总结一下:大的字体做为标题是很好的,试着给SEO一些更加精简有效的关键字,但也不要全篇的都是28号字,不然访客会很不开心的哦。

渐变 Gradients

当渐变处理恰当的时候看上去效果好极了。它们可以增加一个乏味设计的深度。就渐变本身而言,它们可以使布局、文本、甚至logo都会变得更加丰富。

集中的布局Centered layout

集中的布局在页面设计中做为一个整体已经越来越流行了,不仅在web2.0是这样的。集中的布局被认为是更加直白的,并且这个方式也非常适合标榜着前卫、幽默的web2.0的调调。

更少的分栏 Less columns

使用了大号字体和漂亮的留白之后,你是不是还想用14的列宽?
简单的设计等同于较少的布局。为了布局而对内容进行排版设计,在很多设计中都能看到使内容的风格布局不琐碎的趋势。

分割头部 Seprarate top section

分割头部把一些号召行动和核心区分开来。如果我是个新访客,我才不会关心你们的股票期权,我只想知道你们公司是干啥的,有什么值得我关心的。分离的头部就会提供给我一些我想要的基本信息,直到我对这些基本信息满意,才会想要关注更详细的问题。

简单的导航 Simple navigation

第一点内容就告诉我们一个问题,一个新的访问者很可能因为导航很烂就离开了你的站点。导航应当在网站中一直坚持容易识别的原则,并且要组织得当哦。

醒目简洁的LOGO Bold simple logos

你是谁。这个问题logo就可以回答了。web2.0风格使用了大量的醒目简洁的logo。这里 有些关于简洁大方的LOGO的最佳案例。

诙谐的标题简介 Witty title intros

准确的定位并且了解每一位XX个是使你的站点或公司个性化的主要方式,。使用互联网,你就不需要和人进行面对面的进行互动。但注意使用幽默的招呼方式会让你的访问者感觉访问你的网站更轻松。


鲜明的色彩 Strong colors

很多web2.0网站经常大量的使用中性色,偶尔用一两种醒目的颜色。现在的这个Blog 就是个例子。

丰富的表现 Rich surface

当设计师们疯狂的寻找最佳的纹理好像木纹、砖块、布纹等等的时候,纹理素材网站就应运而生了。
在photoshop里可以往背景和文字上叠加元素,如果他们被恰当使用的话,也的确可以给设计带来一些情趣。如果你不是很确定是否过度使用了这个 Web2.0的特征(或者其他特征),那就试着把设计贴到设计论坛里面寻求反馈吧。

反光 Reflection

著名的苹果水晶按钮让一种设计风格流行起来了。
反光在很多web2.0的设计风格中逐渐开始有了立足之地。这个设计风格的关键是注意降低不透明度,这会使整个设计看起来效果很好。

闪耀的图标 Bling icons

我喜欢好的图标,可爱的图标的确能为一个平淡的设计带来层次和亮点。
Everaldo创建了一个自己的水晶图标集,同时也激发很多有天赋的图标设计师的灵感。

web2.0 的徽章 \ 价格标签

web2.0的徽章和最近流行的价格标签可以用来吸引游客的注意力。
大部分的徽章都是反光的(闪闪发光的),而价格标签却普遍是灰暗的。

灰色的字 Gray-text

灰色的字是什么?
使用灰色字体可能导致屏幕看起来有些混乱。尽管灰字可以让它看起来更漂亮,
但是某些设计犯了个错误,总是把字的颜色弄的很浅,太浅了以至于我们不得不选中文字使其高亮才能阅读。
这种不友好的设计和挫败感会使访问者远离你的网站,同时也会给打印带来一些问题(除非你使用独立的CSS来控制打印)。
注意:如果你的显示器的亮度下调10%,你的站点上的字消失了,那你可能就是犯了这个错误。
分享到:
评论

相关推荐

    什么是web2.0 Web 2.0特征Web 2.0七大原则Web 2.0的设计模式

    什么是web2.0 主要特点 ...Web 2.0的设计模式 从Web 2.0到Innovation 2.0 技术 什么是web2.0 主要特点 相关技术 Web 2.0特征 Web 2.0七大原则 Web 2.0的设计模式 从Web 2.0到Innovation 2.0 技术

    web2.0 网页设计师必备手册+教程

    网页设计师详细教程,网页布局和设计全解.详尽介绍设计时的技巧 。web2.0 网页设计师必备手册+教程

    web2.0色系web2.0色系

    web2.0色系 web2.0色系web2.0色系web2.0色系web2.0色系

    Web2.0的生动图解

    如今我们经常说起Web2.0,那么,什么是 Web2.0?它与Web1.0有什么不同?事实上,Web2.0没有一个确切的概念,相对于Web1.0,它有明显的特征:每个人都是内容生产与获取者、信息个性化定制自由度大、网页技术不同、...

    Web 2.0在中国的发展及其社会影响

    在中国,虽然在网站运营中普遍推广WEB 2.0概念并以此作为新一轮网站竞争要点主要始于2005年,但关于WEB 2.0中一些相关应用(如博客)的关注从2002年左右就开始了。 在WEB 2.0的发展中,博客概念的推广以及博客网站的...

    web2.0样式

    web2.0样式 web2.0样式 web2.0样式

    11_WEB2.0启发式爬虫实战_猪猪侠.pdf

    2018先知白帽大会web2.0爬虫ppt2018先知白帽大会web2.0爬虫ppt2018先知白帽大会web2.0爬虫ppt2018先知白帽大会web2.0爬虫ppt2018先知白帽大会web2.0爬虫ppt2018先知白帽大会web2.0爬虫ppt

    绿色web2.0设计模板下载

    绿色web2.0设计模板下载 潮流 时尚 设计 绿色 HTML CSS web2.0 模板下载

    web2.0技术标准

    web2.0技术标准 里面包括了web2.0常用的技术

    web2.0网页设计水晶元素矢量素材

    web2.0网页设计水晶元素矢量素材 web2.0网页设计水晶元素矢量素材 web2.0网页设计水晶元素矢量素材

    web2.0效果的photoshop层样式包

    web2.0效果的photoshop层样式包 使用方法:拷贝web20layerstylesv1.asl到C:\Program Files\Adobe\Photoshop CS\Presets\Styles目录下,在PS里打开窗口->样式面板即可

    什么是web2.0

    Web2.0 是相对Web1.0 的新的一类互联网应用的统称。Web1.0 的主要特点在于用户通过浏览器获取信息。Web2.0 则更注重用户的交互作用,用户既是网站内容的浏览者,也是网站内容的制造者。所谓网站内容的制造者是说...

    Web2.0样式(Photoshop)

    该资源为可导入Photoshop的Web2.0网站常用设计样式。 这些样式的颜色过渡大都鲜艳、明快、活波,即使不是Web2.0网站,也都适合大部分网站。 包含以下四个文件: web20.asl Web2dot0.asl web20layerstylesv1.asl Web_...

    --------《WEB2.0设计》---------

    WEB2.0设计,老外的书,英文全彩高清,看图就明白。

    ASP.NET 2.0 Web开发入门指南

    ASP.NET 2.0 Web开发入门指南

    精通Web 2.0

    精通Web 2.0 精通Web 2.0精通Web 2.0 精通Web 2.0 精通Web 2.0 精通Web 2.0

    photoshop渐变 220款web2.0样式

    photoshop渐变 220款web2.0样式 ps玩家都会用到的

    web2.0常用网页设计图标素材 打包下载

    web2.0常用网页设计图标素材 很多实用的小图标打包下载

    经典web2.0网页设计.pdf

    这是一个网页设计素材,连同图酷,经典web2.0网页设计欣赏电子刊物,英文版,编者共用7部分介绍国外现时流行的web2.0设计典范,内容很详细。

Global site tag (gtag.js) - Google Analytics