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

2014-04-24  来源:本站原创  分类:产品  人气:0 

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

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

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

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

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/

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

来自:http://cdc.tencent.com/?p=2431

相关文章
  • 越简单越丰富--极简网页设计视觉呈现技巧 2014-04-24

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

  • 拥抱极简--TeamCola设计实录(上) 2014-06-16

    6月29日,当我一如既往地打开Chrome进入Gmail时,顶部导航栏的变化像是在向我表达着什么.5分钟之后,当我点击了小滨滨的邀请链接,我惊奇地发现----连接被重置了!! 于是我只好全局ssh再次打开了邀请链接,Google+这才渐渐显山露水迎面走来,依然是熟悉的三栏布局,比例和功能分布也和facebook类似,抛开可以把亲朋好友圈养起来的恶搞特性(误)不讲,Google+最吸引我的是出色的视觉设计,简洁清丽的风格令人爱不释手.随着Google+的发布,诸如Google Calendar.G

  • 高品质的网页设计:实例与技巧 2014-07-01

    提升网页和博客设计品质的一些实例和技巧 "高品质"是所有人追求的目标,在网页设计的世界中也不例外.不过何为"品质",如何判断一项设计的品质是好还是坏?笔者恰好有一套找出网页设计中品质焦点的方法.一旦你了解到如何判断一项高品质的设计究竟好在哪里,你就掌握了让自己的设计更趋完美的大量技巧. 接下来我会给大家列一些要点,并附上相应的例子,与大家分享一下我在别人的网页设计中寻找"高品质"的过程. 01. 留白 在好的网页设计中我最留意的是那些对设计元素之

  • [转贴]高品质的网页设计: 实例与技巧 2011-10-26

    提升网页和博客设计品质的一些实例和技巧 "高品质"是所有人追求的目标,在网页设计的世界中也不例外.不过何为"品质",如何判断一项设计的品质是好还是坏?笔者恰好有一套找出网页设计中品质焦点的方法.一旦你了解到如何判断一项高品质的设计究竟好在哪里,你就掌握了让自己的设计更趋完美的大量技巧. 接下来我会给大家列一些要点,并附上相应的例子,与大家分享一下我在别人的网页设计中寻找"高品质"的过程. 01. 留白 在好的网页设计中我最留意的是那些对设计元素之

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

    工作中,网页设计师经常会遇见这些状况:时间这么短又要出彩.又是要大气要有气氛.风格不明确很难把握.栏目这么多页面又这么长-- 突然觉得束手无策,脑袋里一片空白,没想法了,怎么办? 下面简浅的归纳了几个快速让页面出彩的小技巧: 1.旋转法 – 将页面的主体或局部进行旋转 我们一般的页面版式都是方方正正,四平八稳,有点呆板.如果将局部或整体适当的旋转,打破稳定的构图,画面就会动感有趣一些. 对于上图,这种基调轻松活泼又恰好内容比较少的页面来说,主体整个旋转后,画面马上轻松活泼起来,看过现在这个画面,

  • 拥抱极简--TeamCola设计实录(下) 2015-04-14

    上回说道,TeamCola的第一个可用版本在开发完成后在2月2日这个非常2的日子里正式在团队里内部使用了,在新鲜感和使用热情渐渐退去后,越来越多产品和视觉上的问题开始显现出来,1个多月后,团队讨论决定对TeamCola做一次大的调整. 即使是早期的版本TeamCola也没打算支持IE6 在视觉上,经过讨论后总结了一些这个版本的不足,首当其冲的是TeamCola的标志.不少人对标志的第一印象是看不出TeamCola的字样,甚至不能辨识代表CO两个字母的橙色小拉环.当一个标志的识别性遇到了问题,无论

  • 极简主义网站设计:寓丰富于简单 2014-09-19

    作为设计师,我们都知道,一个极简的设计可以实现漂亮的效果. 然而,很多设计师在实现上有些麻烦:要么是没有时间让使用如此少的元素制作的页面看起来漂亮,要么就是最终的结果只是看起来"不完美". 网上有很多关于极简主义设计的文章,而本文的目的是帮你实现一个漂亮而不空洞的极简网站设计 最重要的是,我们将展示一个小的极简网站设计画廊,这样你就可以分析为什么一些设计可以而其它的则不可以. 什么是极简主义设计 极简主义设计已经被描述为最基本的设计,剔除了多余的元素.色彩.形状和纹理. 它的目的是使内

  • 当我们谈论极简设计,我们在谈些什么 2015-01-20

    使用留白的极简主义是现代设计的大趋势之一.很好的使用留白的人往往可以使你的页面第一眼看上去非常清爽,但是实际上用少量的元素和大量的留白做好设计还是有些难度的.甚至有些情况下你的客户不会那么喜欢,因为他们总是想要尽可能在页面上放更多的信息. 但是很多设计师都把极简主义的风格当做是一种挑战.极简主义风格的网页可以在不同的终端上转换,当然也适用于打印,页面设计和包装设计.接下来,我们来分析一下使用极简主义的特别棒的案例. 巧妙使用留白 每当设计师谈论到极简主义的时候,总会有一种"所见即所得"

  • 浅谈极简风格在设计中的运用 2015-02-24

    Hi 大家好,我是阿木,今天我结合我在微博的实际项目跟大家分享一下极简风格的一点设计心得.现代城市生活中我们每天要面对嘈杂拥堵的街道和地铁,各式各样的广告,处理各种邮件和信息.于是我们内心追求一种体验那就是-极简,像大家家喻户晓的品牌如:MUJI无印良品. 苹果 .宜家家居,都是这一风格的发扬者,他们的产品也获得了巨大成功. 极简在摄影中是一种突出主体取简去繁的摄影手法,在生活中是一种放松的生活态度,在设计中是一种简洁的设计手法. 微博的设计体验也是如此,我们去掉了复杂的视觉干扰,力求给用户带来

  • 伙伴分配器的一个极简实现 2014-04-20

    提起buddy system相信很多人不会陌生,它是一种经典的内存分配算法,大名鼎鼎的Linux底层的内存管理用的就是它.这里不探讨内核这么复杂实现,而仅仅是将该算法抽象提取出来,同时给出一份及其简洁的源码实现,以便定制扩展. 伙伴分配的实质就是一种特殊的"分离适配",即将内存按2的幂进行划分,相当于分离出若干个块大小一致的空闲链表,搜索该链表并给出同需求最佳匹配的大小.其优点是快速搜索合并(O(logN)时间复杂度)以及低外部碎片(最佳适配best-fit):其缺点是内部碎片,因为按

  • 移动互联网时代:响应式网页设计已成为大势所趋 2014-09-15

    我们正处在移动互联网快速发展的时代,智能手机和平板也越来越普及,有些人甚至都到了没有智能手机或平板就无法过活的地步.智能手机和平板的普及,也就意味着越来越多的用户会通过移动设备访问互联网. 通过移动设备访问互联网的用户或多或少都有过这样的经历:有些网站压根就没有针对移动设备的网站,哪怕是有,大多都是不够"移动友好",阅读体验完全跟不上传统的Web版本:而且在不同的移动设备上,浏览体验也是大相径庭,让很多用户大为苦恼. 根据相关数据统计,到2015年,移动互联网的用户数量将会超过桌面用户

  • 关于网页设计中的留白 2014-07-03

    先是看了这篇文章:高品质的网页设计: 实例与技巧 我突然意识到,我之所以崇尚的一些网页设计风格是什么原因了,原来其关键是恰到好处的留白. 比如douban,比如yahoo.com,比如microsoft,等等 (图1) 上面图1是douban首页的截图,我们看到在右下角有大胆的留白,而页面整体非常协调,给用户的眼睛留下一个休息的地方,而不是像很多国内的运营页面,恨不得页面上只要有个地方都要放点东西,放个链接. 再比如,看一下yahoo首页的下面,图2 (图2) 依然是留白,但页面整体看上去非常和

  • 三论iPhone5(2-1)-极简设计误区 2014-02-11

    如果我问,为什么iphone1代的解锁画面是一只鱼,操作界面壁纸是黑色,不能更换.而到了iphone4和ipad2时代,为什么操作界面壁纸不仅可以自由更换,并且和解锁画面保持一致,都是水珠玻璃壁纸,甚至到了iphone4s和new ipad时代仍在沿用. 我相信,绝大多数设计师还没有细细琢磨过这些问题. 大多数厂商在制造出没有功能缺陷,美学价值也过关的产品上都不会遇到太大困难,但到底是因为什么使得苹果这家公司在创造思维上与众不同? 现在几乎所有的设计都在标榜极简设计,明暗没了,渐变没了,高阶色也

  • 产品设计创新:Kindle阅读器的极简主义 2015-02-20

    Kindle设计风格的极简主义,正在使得亚马逊将这项标志性产品变为一种文化和生活方式. Kindle 2即便拥有了16阶灰度和更好的显示效果,它仍然只能是黑白两色,并且没有背景光:改良了按键的形状与位置,最主要的按键却仍然只有右边的两个:"上一页 "和"下一页". 有人问:"Kindle的意思是照亮,但为什么Kindle系列阅读器却连个背景灯都没有?"对此,Amazon最大的产品经理贝索斯早已有了自己的答案. 贝索斯从一开始就从不曾把Kindle

  • 2010年网页设计趋势 2015-04-19

    在即将到来的新一年里,是抛开过时陈旧的网页设计,为未来准备大胆全新的网页设计的时候了.尽管趋势不是在一月一日开始或结束的,但新年伊始的时候我们的渴望和在一年之末时我们寻求教程指导之间依然有一个很明显的分界.大多数时候,分界线模糊不清.这就是对当前潮流趋势是完善还是重新诠释的的选择.趋势会帮助设计师并让之进化.如果我们掌握了这些设计美学的技巧,我们就可以推进趋势或者开发一个全新的领域. 理解这些,你将会认识到这些趋势背后的创意.尽管这些趋势和在2009年流行的没有巨大的变化,但它预示了那些趋势将会

  • 全局于网站整体的网页设计:可用性测试与用户体验 2014-04-05

    全局于网站整体的网页设计系列文章目录:全局于网站整体的网页设计:需求决定网站产品模型 全局于网站整体的网页设计:脱离纯美术概念看界面设计 全局于网站整体的网页设计:风格是网站的外衣 全局于网站整体的网页设计:代码设计 全局于网站整体的网页设计:可用性测试与用户体验 操作流程中的用户体验 这里我们从几个失败的例子,来看看界面设计是如何影响用户体验的. 图1是myspace失败的登录按钮设计.myspace上线后,无数用户表达了对图1这个极不合适的登录按钮设计的不满,这个重要的元素,被极不显眼地淡化

  • 微软10大网页设计漏洞:未充分利用人才 2015-01-15

    今天,我们将分析大名鼎鼎的软件公司的网页设计做法和倾向,看看我们是否可以学到一些东西,以避免在我们自己工作的失误.同意或不同意我的看法,随时在下面评论建议.作为专业设计师,你的观点是有价值的,我期待着你的想法. 偶尔的数落 如果你讨厌文章充满吹毛求疵般的唠叨,我很抱歉,这个文章偶尔会有点挑剔.我通常喜欢赞扬好的设计而不是批评坏的设计,但是当大卫.阿普尔亚德和我决定写一个微软设计倾向分析的文章后,好像不得不见识一下什么是杂乱,丑陋,甚至(或者)失败的东西. 为了避免评论沦入口舌之争,我在下面的分析

  • 有关网页设计的那些事儿(第1周问答) 2013-11-07

    从这周起,飞鱼的声纳将汇总QQ交流群中每天回复读者的一个网页设计方面的问题,按照一周的周期集结成文章,每周五发布在博客并共享在群中,供大家阅读参考.相较于我们经常发布的设计教程,这样的问答对于个人来说更有针对性,离我们日常的设计工作更近一些.我个人也有这样的体会,有时会有一两个问题长期停留在脑子里,得不到解决,偶然的碰到刚好涉及到这方面的文章,会有一下子豁然开朗的感觉.所以这样的形式也是非常有价值的.以下就是第1周的所有问题和答复,希望在设计对大家有所帮助. 一.质感的表现.作品好坏的评价(小李

  • 访客至上的网页设计秘笈 转载 2014-01-13

    现在网页设计师除了把页面做的漂亮以外,越来越注重"用户体验",就是要做"别让用户思考"的网页,使网站真正做到"可用性".望望结合几年的工作经验,粗谈这方面的一些问题,和大家共勉! 一.人们如何浏览网页 首先本书说明了上网的人是如何浏览网页的,这似乎跟我们想象有很大的差距,因为我们觉得"用户会盯着每个网页,仔细阅读我们精心制作的文字,领会我们页面的组织方式",事实上大部分时间用户看网页就象"高速公路看广告牌一样&quo

  • 如何成为网页设计专家 2014-06-16

    我们都希望成为专家是因为我们希望我们的观点能够被其它人认真对待.被人尊敬,让自己更有价值,也为了满足自己的自负,当然,最主要的是我们希望自己能成为最棒的,同时有自己独特的有力的行事方式. 你是否想与客户侃侃而谈让他们认真的对待你的观点,因为看上去你就是个专家?如果你的答案是肯定的,那么恭喜你,有许多人与你一样.如果希望有一天能真正做到,那么你需要退后一步再想想,成为专家对你来说为什么如此重要? 为什么我们都希望看上去像个专家 我们都希望成为专家是因为我们希望我们的观点能够被其它人认真对待.被人尊