阐述10个简单实用的设计技巧[1]

  • 作者:Mark Praschan
  • 来源:56gee
  • 更新时间:2012-10-24 22:05:56
  • 点击:14390
[100分]

作者Mark Praschan是一位具有将近十年经验的Web设计师、Web开发师和Web项目经理人。 文中强调复杂的高级效果能为设计增色不少,但如果用得不对,反而会影响用户对重点内容的关注。高级效果可能正好是一项好设计的冲击力所在,但即便如此,也还是需要一 些更简单的效果与其配合。

简单的效果和技巧是建造当今设计的基石。比方说,如果你都不知道如何正确选择颜色和文字效果,灿烂的星光效果又能有什用?

本着“少就是多”的理念,通过下面10个简单实用的设计技巧,就足以大大提升你设计的专业性和感染力。学会走之前要先学会爬,让我们从最基础简单而有效设计的概念开始吧。

1、增加对比

很可惜,添加额外的对比是最容易被忽视和弃用的技巧之一。

10个简单实用的设计技巧 Mark Praschan
图1-1

图1-1中,Joost de Valk 采用了细的高对比度边线,让访客能更容易地区分页面的不同区域。在上图中放大的部分可以看到,大多数时候这种对比只是一条1像素的高亮线挨着1像素的暗线,但这种高对比色却显示相当有力量。相反,这个页面上的“Go”按钮与周围 的对比度太小,很容易被忽视掉。

10个简单实用的设计技巧 Mark Praschan
图1-2

图1-2中,WordPress 为页面中最受欢迎的链接 “Download”(下载) 使用了亮眼的对比色——红色。 这种红色在冷灰色调的页面中自动浮现出来,但它却在明度方面有所收敛,避免了影响页面整体效果。

2、渐变

技术的发展为所有想使用渐变的人提供了各种创造渐变的工具。但渐变真的很好么?

10个简单实用的设计技巧 Mark Praschan
图2-1

图2-1中,Media Temple 网站的每一个页面都使用了渐变,不过其渐变使用的节制和精妙才是设计成功的关键。logo、大标题、按钮和背景都有细微的或者镜像的渐变,以强调内容。而最复杂的渐变用在那些简单的120像素宽的按钮(子页面中 的“ACTIVATE”和“LEARN MORE”)上,因为它们财是真正需要访客注意的重点。

10个简单实用的设计技巧 Mark Praschan
图2-2

图2-2中,Commission Junction的渐变运用远没有Media Temple的细致,而且采用了过多的渐变类型——1:从黑色到灰色的水平线性渐变,位于页面顶部;2:页眉处的绿色径向渐变;3:登陆框背景的“CJ” 标志上方模糊的斜向渐变;4:输入框背景中淡淡的垂直 线性渐变;5:导航条背景的垂直渐变;6:Webinar广告中明亮的线性渐变;7:大标题处用了垂直线性减弱。这种设计有点冒险,大部分渐变式虽然都有用,但还是存在一些问题。最突出的一点是,设计丧失了一致性。同选择可辨性强的色彩组合一样的道理,设计师也 需要为每个项目选择合适的渐变组合。

例如,大的水平渐变 1 引导眼睛横向注视页面。这本没有什么问题,但就在此渐变的正下方又出现了把视线吸引到中心的径向渐变 2 和把视线引导到右下角的斜向渐变 3 。这会给访客造成困扰,起伏变化的视觉流(visual flow)也削弱了可读性。因此,在使用渐 变时,保证好的视觉流很重要:请保守而精致地使用渐变。最重要的一点,仅当对整体设计有帮助时才使用渐变。

收藏内容
评分

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途。若转载请注明来自56gee.com中的“来源”。

栏目精华