越简单越丰富——极简网页设计视觉呈现技巧

标签: 视觉设计 作品 推荐资源 理论 轻设计 | 发表时间:2010-04-16 10:14 | 作者:番茄果果 阿德
出处:http://cdc.tencent.com

  如何让杂乱又咄咄逼人的网页变得轻薄简洁而美观,又需保留完整功能、同时很好的区分出重点模块?这往往是让设计师困扰纠结之源;如何更好的将多余的元素、色彩、形状和纹理剔除,保留重点并梳理清晰的视觉流动方向?

  如果一个页面有太多的元素,用户将迷惑于去看哪里或误解每个元素的优先级。优秀的设计师需要用设计语言将焦点正好引导到正确的内容上,正如提到的,极简的网页视觉能够将最重要的内容带到最前面并为用户避免分散注意力,比如,在一个黑白设计上的任何色斑,都会引起用户的注意力,色彩本身也将成为焦点,这便成为我们即将要展开探讨的小小话题。


http://www.janreichle.com/

 

产品原型视觉转化

  设计开始之初,从原型稿到视觉稿的转化过程中,擅长图形化识别的视觉设计师们,在面对繁杂而单调的线稿内容时,往往急于上马大施拳脚展开创作,缺忽略了清晰梳理判断整体页面结构的重要环节。
  哪些属于重点模块需要突出展示,哪些次要模块可以移动到更优化的布局或者精简合并?这是一个需要长期经验积累,不断磨练耐心和提高理解判断能力的成长过程,也是职业化的开端。

 

权衡布局及简化设计

  排版布局中的平衡、对齐及对比关系,对页面视觉效果至关重要。如果画面效果头重脚轻,或者左右不均衡,会让用户感觉到压迫感,从而影响到浏览信息的顺畅。

  相关参考请查看 “设计的原理
  实现简化设计的第一步,不是简单的去掉大部分图片,而是要重新考虑内容并将其简化到无遮盖的需求。只有那样才能让页面中最重要的元素实现其预期的效果。

  我们可以写下必须要的内容:logo、介绍、导航等等。和你的产品经理一起,去掉其它一切不需要的元素,尽可能的丢掉它们。


http://labs.qq.com/

  这里的关键并非让网站有较少的功能,而是去掉不是必要的元素或将多个部分整合到一个更简单的布局。你也可以分割内容到独立的页面,给予内容的每个部分更多关注。


http://www.areyoufrank.com/

 

善用色彩的心里暗示

  简约而通透的白色页面
  白色,因其明度最高,无色相,明亮干净、畅快、朴素,永恒无暇,在自然界象征着极致的纯净与贞洁。白色优雅、平和而简单,没有强烈的个性,因而网站设计中,白色具有高级,科技的意象,是永远流行的主色调。
  轻快的白色可以给人很好的轻快速度感,运用得当可以让其它任何浅颜色及亮颜色呈现出其深度、明度和饱和度的不同,通过对比让其亮色更加明快、专注和舒适。整洁、大空白的同时让用户保持欢快的情感进行浏览。

  下面的网站展示了如果使用白色来呈现内容和一个网站自身的潜力:


http://www.istockphoto.com/index.php

 

  白色页面设计小技巧:
  让链接更容易识别, 使用浅色或亮色;
  减少杂乱广告图片; 不要使用过小的字体,
  避免页面看起来琐碎和疲劳;


http://www.flickr.com

  明快的文字颜色,让内容更易识别


http://www.sixapart.com/

 

  精致高雅的灰色绅士
  “灰质(Gray matter)”让人联想到智商与脑力。它不像黑色那么鲜明,又不像纯白那样苍白,灰色是黑与白的过度,是完美的补色。灰色可以和任何色彩搭配,由于它的中立性,它常常被用作背景颜色,可以让其它色彩突出。使用浅灰色替代白色或者用暗灰色替代黑色,能够赋予网页与众不同的高雅之感。


http://www.apple.com


http://www.dbushell.com/

  灰色无论是作为背景颜色还是标题或者主字体颜色都很流行。灰色也是极简主义网站设计的首选色彩,这类网站通常会选用浅灰色作为背景色彩,然后选用深灰色作为主要的字体颜色。这里是一些使用灰色的几个很不错的网站设计。


http://www.iconwerk.de/


http://2008.dconstruct.org/

 

  设计的加减法哲学
  从第一个像素开始,我们开始不断用加法进行创造,搭建出完美的设计作品,然而这就是极致么?在设计适时运用放大或减少,不断地变化,可以更好的趋向极简,反复历练考究每一个必要的元素存在的价值。


http://pc.qq.com/

  每当到达这个阶段,设计师需要静下心来思考,当加法到一定的量的时候再转做减法设计,考验的是设计师对整体把握能力。减法设计是在加法比较成熟的情况下才能去尝试的设计方式。理论上来说,加法设计比减法设计相对更加容易。减法设计更能体现设计师的功力和积累,目标要求的是少而精炼。


http://www.31three.com/

  鼓起勇气大胆的去除边框,让画面更加通透大气,空间视觉元素不多不少,但又显得很丰富、美观。
  这个加减的过程正是让设计不断趋向完美的历练之路。

 

  让空间更加透气
  通过去除与隐藏的方式降低设计复杂性的方法中,减少“视觉感知”的复杂性也是很重要的。空白与对比无疑成为行之有效的减少视觉干扰的重要方法。
  视觉布局中适当的空白对平衡即将出现在页面中的少量元素是必要的平衡。它应是你默认的布局工具。经典法则之一:如果可以使用空白就不要放置其他设计元素。如果用这种方式布局,你会很惊讶调整界面的空白就可以完成布局了。


http://www.kylestanding.com/

  虽然使用空白多多益善,但也要尽可能的保证有对比感。设计师应使用最小的视觉变化来表达想法。事实上这就是意味着元素之间要有主次感。

 

  空白不等于苍白
  页面变得苍白?是不是整版的文字缺少图片的点缀?在保留有必要的留白空间后,试着为文字配上一张点睛的美图吧,或者给段落文字总结一个示意小图标,适当的点缀必不可少。


http://Pc.qq.com

  透气的留白不等于无力的苍白,让有趣的设计大胆的去激发用户的视觉神经,让设计更有思想,不断趋向简洁和完美。


http://www.devia.be/

  感谢您的阅读,希望对您有所帮助 ^_^


版权所有 © 2008 - 2010
您看到的文章来自 腾讯CDC博客 http://cdc.tencent.com ,原文链接为 http://cdc.tencent.com/?p=2431 ,转载时请注明出处。

相关 [网页设计 视觉 技巧] 推荐:

越简单越丰富——极简网页设计视觉呈现技巧

- 阿德 - 腾讯CDC
  如何让杂乱又咄咄逼人的网页变得轻薄简洁而美观,又需保留完整功能、同时很好的区分出重点模块. 这往往是让设计师困扰纠结之源;如何更好的将多余的元素、色彩、形状和纹理剔除,保留重点并梳理清晰的视觉流动方向.   如果一个页面有太多的元素,用户将迷惑于去看哪里或误解每个元素的优先级. 优秀的设计师需要用设计语言将焦点正好引导到正确的内容上,正如提到的,极简的网页视觉能够将最重要的内容带到最前面并为用户避免分散注意力,比如,在一个黑白设计上的任何色斑,都会引起用户的注意力,色彩本身也将成为焦点,这便成为我们即将要展开探讨的小小话题.

网页设计应急小技巧

- Guan - 所有文章 - UCD大社区
工作中,网页设计师经常会遇见这些状况:时间这么短又要出彩、又是要大气要有气氛、风格不明确很难把握、栏目这么多页面又这么长……. 突然觉得束手无策,脑袋里一片空白,没想法了,怎么办. 下面简浅的归纳了几个快速让页面出彩的小技巧:. 1.旋转法 – 将页面的主体或局部进行旋转. 我们一般的页面版式都是方方正正,四平八稳,有点呆板.

我的防身暗器-网页设计应急小技巧

- MooM - 网易用户体验设计中心博客
工作中,网页设计师经常会遇见这些状况:时间这么短又要出彩、又是要大气要有气氛、风格不明确很难把握、栏目这么多页面又这么长……. 突然觉得束手无策,脑袋里一片空白,没想法了,怎么办. 下面简浅的归纳了几个快速让页面出彩的小技巧:. 1.旋转法 – 将页面的主体或局部进行旋转. 我们一般的页面版式都是方方正正,四平八稳,有点呆板.

经典推荐:网页设计构图技巧

- - 优设(UISDC)
一篇开拓网页设计思路的文章,虽然有些年代了,但是其中分享的构图技巧到现在依然是非常受用的,如果你能领悟个中精髓,融会贯通. 那么今后你设计出来的网站,一定会从格局形势上让客户眼前一亮. 网页给人最直观的感受就是它的页面框架与构造,就像一座大楼的主体框架与形态,你可能记不起东方明珠塔和艾菲尔铁塔是用什么颜色或什么材料涂的外墙,但我想你一定记得起它们是什么样的形状.

网页设计中图片格式的选择技巧

- - 优设(UISDC)
网页设计中,切图输出是指设计师将手边绘制完成的原始图稿转换成网页用的图片格式、并交由下一位人员网页排版的重要步骤. 选择适合的图片格式不但可以将让设计得到合理的显示效果、甚至还可以有效的控制图档的档案大小,节省下载时间、有效的减少服务器的负担. 以设计师最常用的 Photoshop 以及 Illustrator 为例,都提供了「储存为网页用…」的功能.

网页设计师必备的10个CSS技巧

- - 博客 - 伯乐在线
CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页. 使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情. 在CSS的深海世界里有很多有意思的东西,你只需要找到最适合你的就好. 当然我们不可能一下子就记住所有CSS的规则和语法,但为了以后的发展我们还是应该记住那些非常有用的CSS技巧.

简洁网页设计你需知的6点技巧

- - 优设(UISDC)
洁净和一尘不染之间是不能划等号的. 去掉了多余内容的设计看起来外形美观,一目了然,让人心旷神怡,尤其是对 网页设计领域更甚. 设计师在网站设计过程中,时常会遇到过度设计的例子. 保持审美需求和实际需求之间的平衡,对整洁,干净和条理清晰的网站来说很重要. 在激烈的行业竞争中, 网页设计师想要获得成功,先决条件之一就是要掌握简洁的网站设计基础.

伟大网页设计之10个设计技巧和40个例子

- 山河之外 - 互联网的那点事...
作为一名网页设计师,如何在第一时间打动潜在的客户是至关重要的. 如果你设计的东西不能够打动他们,你就会失去一切,这个世界有的时候就是这么的现实. 那究竟要注意哪些细节才能够在一个正确的方向去打动客户,让浏览者源源不断呢. 我们知道有一个好的标志是企业形象的开始. 好的口号可以让你以更快的速度去曝光自己的站点.

网页设计中的不对称设计技巧【附12个精美示例】

- - 博客园_梦想天空
  不对称是对称的反面,但并不意味着不对称就缺少平衡与和谐. 不对称的设计技术可以在视觉上引人入胜,为内容创建出重要程度不同的差异性. 这篇文章分享一组鼓舞人心的例子,介绍了不对称设计在网页中的使用技巧. 10套精美的免费网站后台管理系统模板. 35个立体动感的视差滚动效果网站作品. 13套非常精美 Web 应用程序图标素材.