`
axengine
  • 浏览: 145645 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

web2.0图形设计样式指南

阅读更多
web2.0 :我一直听到说这个时髦的词,不管是喜欢还是讨厌web2.0,它都是这种特定的web2.0设计风格的一个主要的部分。这个指南的目的是想给一些设计新 手一些参考,或者是做为一个清单,给那些还在挣扎着适应着好多社会性网络/社会性媒体网站风格的页面图形设计师们。 首先我们知道web2.0有很多技术定义,比如新媒体或者分享信息或者媒体等等。我不准备讲那些繁杂的东西,因为我们只要关注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%,你的站点上的字消失了,那你可能就是犯了这个错误。 延伸阅读 2009年1月5日 — 可用性第一法则:不要听用户的 (0) 2009年1月5日 — 十大网站设计错误 (0) 2009年1月5日 — Web 2.0 的核心思想 (0) 2009年1月4日 [...]
分享到:
评论

相关推荐

    《Web2.0 动态网站开发-JSP》配套光盘

    3. 图形和样式表:Web2.0网站通常重视视觉效果,光盘可能包含CSS样式表和图像资源,帮助创建现代、互动的UI设计。 4. 教程视频:对书本内容的补充,通过视频教程帮助学习者直观理解JSP和Web2.0开发。 5. 开发工具:...

    web2.0企业灰色全站模板源码v2.0

    总结,"web2.0企业灰色全站模板源码v2.0"是一款基于Web2.0理念、免费提供的企业网站模板,使用了CSS、XHTML和JS技术,提供了无后台的简单部署方式。用户需要一定的编程基础才能进行内容管理,且文件列表中包含多种...

    JavaFx2.0入门指南

    JavaFX 2.0 入门指南是针对那些希望通过JavaFX快速开发富用户体验应用程序的开发者设计的。这个指南,源自Oracle官方,包含了中英文对照,旨在帮助初学者快速上手。在本文档中,你将学习如何利用JavaFX创建一个名为...

    黑色博客模板-黑色 博客 web20 大图.rar

    【标签】"web2.0" Web 2.0不仅仅是一个技术概念,它也影响了设计趋势。在网页设计中,Web 2.0风格通常包括以下特点: 1. **扁平化设计**:去除了多余的装饰元素,使设计更为简洁。 2. **大胆的色彩**:鲜艳的色彩...

    大图背景简洁的企业博客模板-大图 简洁 企业 博客 蓝色 白色 web20.rar

    首先,让我们深入了解一下Web2.0的设计理念。Web2.0不仅仅是技术上的更新,更是设计和用户体验的升级。它鼓励用户参与,通过评论、分享、协作等功能来增强互动性。这种设计风格通常包含清晰的布局、大胆的颜色、简洁...

    黑色炫光风格CSS模板-黑色 炫光 背景 web20 整体色 光.rar

    在设计上,Web2.0通常采用更现代、简洁的风格,以及丰富的图形和动画效果。 3. **黑色背景**:黑色背景在网页设计中常被用来营造高质感、神秘或专业的氛围。它可以使得其他颜色和元素更加突出,尤其适合展示高对比...

    墨绿色网页模板-墨绿色 绿色 企业 大气 web20.rar

    在网页设计中,Web2.0风格通常表现为更动态、富有质感的图形,简洁明了的布局,以及高度互动的用户体验。这个墨绿色网页模板正是基于这些原则进行设计的,旨在提供一个用户友好的界面,使访问者能够轻松浏览和交互。...

    梅花雪树形菜单2.0

    1. **图形化设计**:设计风格可能借鉴了梅花和雪的元素,提供了美观的视觉体验,使得菜单在功能性和艺术性之间达到平衡,提升了用户的使用愉悦感。 2. **动态交互**:可能具备动画效果,比如节点展开、收缩时的平滑...

    天蓝色简洁商务网站模板-蓝色 商务 整站 web20 简洁 灰色.rar

    在模板设计中,Web2.0的特点可能体现在响应式布局、互动元素、清晰的导航和美观的图形设计上。 "天蓝色简洁商务网站模板"这一名称暗示了模板的主要颜色主题是天蓝色和灰色,这两种颜色组合通常给人以专业、稳重的...

    蓝色个性漂亮的整站模板-蓝色 个性 整站 web20 整体色 简洁 商务.rar

    这个模板以其蓝色调、个性化设计、符合Web2.0标准的整体色彩以及简洁和商务风格为特点。 首先,我们要理解“整站模板”的概念。在网页设计中,整站模板是指一套预先设计好的页面布局、色彩方案、图形元素和交互样式...

    web前端设计

    - 随着互联网技术的发展,尤其是进入Web2.0时代后,网页设计经历了显著的变化。从前单一的文字和图片展示,到现在各种富媒体如视频、音频等的应用,使得网页变得更加生动有趣。 - 例如,新浪、搜狐等大型网站对其...

    EXT.NET.WEBFORMS.PRO.2.5.2.0

    EXT.NET.WEBFORMS.PRO.2.5.2.0 是EXT.NET专业版的一个特定版本,专注于为ASP.NET Web Forms开发提供丰富的用户界面组件和功能。EXT.NET Pro是一款基于JavaScript和HTML5的UI库,它扩展了ASP.NET的Web Forms模型,...

    漂亮的绿色透明博客模板-漂亮 精品 绿色 透明 博客 整体色 web20 花纹 光 设计.rar

    关键词“漂亮”、“精品”强调了设计的质量和吸引力,“整体色”意味着模板可能包括一致的颜色方案,而“web20”通常指的是符合Web 2.0设计理念的元素,这可能包括互动性、简洁的布局和现代感。另外,“花纹”和“光...

    mathjax-org-en-latest-2.0_mathjax2.0api_

    在`mathjax-org-en-latest-2.0.pdf`文档中,你将找到关于MathJax 2.0 API的详细指南,包括如何初始化、如何处理自定义命令、如何优化性能以及如何解决常见问题等内容。此外,还有丰富的示例代码和实际应用案例,帮助...

    javafx2.0 中文文档.rar

    JavaFX是Oracle公司推出的一种用于构建富互联网应用程序(RIA)的平台,它提供了一套丰富的图形用户界面(GUI)工具包和编程模型,允许开发者创建跨平台的应用程序,包括桌面、移动和Web环境。JavaFX 2.0是该平台的...

    个性漂亮的记事本CSS模板-灰色 web20 企业 个性 幻灯.rar

    Web2.0是一个广泛使用的术语,代表了互联网发展的第二阶段,其特点是互动性更强、用户体验更佳的设计和功能。 首先,我们需要了解CSS(Cascading Style Sheets)在网页设计中的重要性。CSS是一种样式表语言,用于...

    收藏的几款web界面

    WebQQ的出现,使得用户无需安装额外软件就能进行在线聊天,降低了用户使用门槛,也体现了Web2.0时代的特性——更加强调用户参与和交互。 【知识点详解】: 1. **Web设计原则**:包括对齐、对比、重复、亲密性等基本...

    Asp.net2.0车票管理系统

    通过研究这个车票管理系统,开发者不仅可以了解到Asp.net2.0的基本概念和技术,还能学习到如何设计和实现一个完整的Web应用程序,包括数据库交互、用户界面设计、以及系统配置等多个方面。这对于提升开发者在实际...

    漂亮的公司企业CSS模板-漂亮 黑色 公司 企业 灰色 白色 web20 头部.rar

    在这款模板中,“web20头部”可能指的是采用了符合Web2.0设计理念的头部设计,比如响应式布局、动态效果、清晰的导航结构以及吸引人的图形元素。这些特性有助于提升用户体验,使用户能够更直观地了解网站的结构和...

Global site tag (gtag.js) - Google Analytics