TOPVE唯艺互动

TOPVE VIEW
保持不断的探索与研究
慧眼看世界,在设计的路上不断追求创新!
Keep exploration and research

版式、色调、留白、像素级精妙细节-网站界面设计品质提升

发布于:2011-09-20 00:52:51 来源:TOPVE收集整理  人气:

当前位置:首页观点技术日志 正文

高品质是所有人追求的目标,在网站界面设计的领域中也不例外。但是何为品质,一项设计的品质是好还是坏要怎么来判断?笔者正好有一套找出网站界面设计中品质焦点的办法。一旦你了解到如何判断一项高品质的设计究竟好在哪里,你就掌握了让自己的设计更趋于

“高品质”是所有人追求的目标,在网站界面设计的领域中也不例外。但是何为“品质”,一项设计的品质是好还是坏要怎么来判断?笔者正好有一套找出网站界面设计中品质焦点的办法。一旦你了解到如何判断一项高品质的设计究竟好在哪里,你就掌握了让自己的设计更趋于完美的大量技巧。

7招提升网页设计品质

我们为大家列出一些要点,并附上与之相应的实例,分享在其他优秀网页设计中寻找“高品质”的过程。

一、留白

  在优秀的网页设计中我最留意的是那些对设计元素之间留白的聪明运用。注意不同内容区块之间的间距和排列方式,能让设计的整体感官大不一样,从而提升界面设计的品质。个人认为处理好留白的关键是从整体上感知设计元素;把设计稿缩小之后来观看就是个比较好的办法。

出色的留白处理的实例:Good.Is
  页面整洁而有开放感,全都得益于设计师对图像和文字之间留白量的准确把握。

7招提升网页设计品质

Digital Mash
  在大片空白上展示的元素往往会更具有吸引力。Digital Mash的网站就创造了极佳的亲和力。

7招提升网页设计品质

Creatica Daily的大量空白
  优秀的留白运用又一次让网页内容成为整个视觉的焦点。每篇文章中都有大量的内容,不过这个站点的设计师们并不惮于给这么多内容之间填上大量留白。并不是说你的文字不够多,就不能用很多留白。

Postbox上也有很多空白
  接下来我们仔细观察Postbox的网站,你能看到边缘处的留白应该如何处理。它的方框边缘有60像素的边内留白。听起来好像挺大的,实际看起来效果却好极了。

7招提升网页设计品质

留白时的错误
  大家在设计留白时的最常见问题就是各个区块的内容到边缘的距离太小了。不论你的设计多么有风格,如果你非要把东西塞得紧紧的,这些风格连同设计的品质,就都一同被破坏并流失了。

留白不够的例子
  我们已经看到PostBox的网站那些大留白创造了多么动人的效果,所以下面我们修改一下其它的页面,看看减少留白会是什么效果。品质感明显下降了。留白就有这么大的影响。

7招提升网页设计品质

控制留白的高效技巧
  在各种不同情况下,留白要求也是不尽相同的。你需要不断训练自己,做到对留白所能带来的改变时刻心中有数,从而有效地利用留白满足设计需求。这主要是要靠个人感觉的,不过一般都能从大量的实践中锻炼出来。
·使用网格辅助设计:利用网格当然能帮助你理解元素之间的空白。
·不断尝试:不断尝试—失败—尝试,直到发现最佳方案。
·留白并不是浪费空间:空白并不总是等着你去填充的。
·没错,少就是多:与其用尽心思填满某个区域,不如就把它留空,只保留至关重要的信息或元素就好。

二、像素级细节处理

  某人在完成一项网页设计时是否真的用心了,有一个方法就能轻松的发现。有时候创造奇迹的就是一些小细节,一些别人通常几乎无法察觉的细节。我所说的“像素级的完美”就是指在线条、边缘和边框描边上仔细推敲。与其就用一条单一的线,不如多加一些细节。细节可以是细微的渐变,也完全可以只是一条1像素宽的细线(用来表现阴影或高光)。有了这些细节, 你的设计就会与众不同。部分设计师在这方面尤为擅长:Collis Ta’eed,David Leggett以及Wolfgang Bartelme。

像素级完美细节的实例:Envato的细节鉴赏
  下图的例子Example 1中,绿色内容框的边缘有一条更亮的绿色线。而Example 2处,区块内边缘有柔和的渐变阴影,而边缘之上还有一像素的白色描边。这做法极其聪明,用阴影来强调高光。后面的绿色区域有非常柔和细微的光影效果,有助于将注意力吸引到下面的白色区块中那清新脆爽的细节上去。尽管这种做法并不是总能让设计看起来更加精致,不过它们的确能帮助你赋予设计以三维的真实感。于是设计元素就成了镶嵌在页面上的宝石,而不是平铺在上面的一张毫无动感的纸。

7招提升网页设计品质

Tutorial9.Net上的细节
  David Leggett对于如何制造单像素顶边条有很深的理解。他最近重新设计的tutorial9集合了很多非常棒的像素化技巧。Example1处你能看到,他是如何仅仅通过添加一条1像素的高光,而将导航标签变得更有质感的。Example2处使用的技巧则更多了。相机图标的投影,下方白色区域的阴影与高光,以及导航条上的1像素高光。

7招提升网页设计品质

RedBrick Health:按钮和分割线上的完美像素级细节
  这个漂亮的导航菜单,由Ryan Scherf创造,就是使用完美像素级细节提升设计品质感的绝佳实例。红色按钮有1像素的高亮,链接之间的分割线也有同等的品质与细节。正如你所看到的,他没有满足于只用一条灰色线分割,Ryan还在下面添加了一条1像素宽的高光线,避免了设计看起来过于平坦的感觉。

7招提升网页设计品质

完美像素级细节也适用于Grunge风格:AvalonStar
  译注:Grunge风格有“做旧”、“迷幻摇滚”、“做脏”等几层意思在里面,也算是平面艺术中的一个流派。
下面的例子是漂亮的AvalonStar:Distortion(扭曲)的主题博客,有着极赞的grunge风格。不过,即便是肮脏做旧的grunge风,利用1像素高光也能创造大不同。下图的Example1处,上面的棕色区域有一个渐变阴影,下面的绿色区块的顶部则有着一条1像素高亮线。阴影与1像素线的结合,让这些区块显得更为精致。

7招提升网页设计品质

完美细节小贴士
  要在这一技巧上达到完美,不断的实践尤为重要。如您所见,一条1像素线这么简单的东西就能给设计添加非常酷的深度感。你甚至不一定要用到那些倒角/图案或渐变,费尽心力做一些实实在在的置于某对象之上的效果。

·一定要注重细节:小细节完善内容感官是关键。
·思考像素级问题:描边、渐变、线条、阴影等等,即使不用太宽大也能有效增强设计
·前后对比:应用效果后注意与没有这种效果之前进行对比。如此你就能清楚的知道这些细节到底带来了哪些改观。

1 2 3
分享到:
你觉得这篇文章:
收藏到个人中心
唯艺互动-专注高端网站设计

TOPVE唯艺互动

相信设计的价值 让美好的事情发生

专注高端网站界面设计

联系我们

QQ联系:270304282

邮箱:haobanfa1@163.com

唯艺互动-专注高端网站设计

抱歉!好像您使用的浏览器版本太低了
为了得到我们网站最好的体验效果,我们建议您升级到最新版本的IE浏览器,或选择其它推荐浏览器

继续访问请进入旧版TOPVE