设计师参考:十个简单好用的设计技巧

复杂的设计技巧总是很花时间,也实在是....复杂 (-_-)。 高级效果 为设计增色不少,但如果用得不对,只会影响用户对重点内容的关注。高级效果可能正好是一项好的设计的冲击力所在,但即便如此,也还是需要一些更简单的效果与其配合。

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

本着“少就是多”的理念,网页教学网为你精选了十个简单好用的设计技巧 ,它们能大大提升你设计的专业性和感染力。

基础先行。 学会走之前要先学会爬,让我们从最基础的简单有效设计的概念开始。

1. 增加对比

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

Joost de Valk 采用了细的高对比度边线,让访客能更容易区分页面的不同区域。在上图中放大了的部分,你可以看到,大多数时候这种对比只是一条1像素的高亮线挨着1像素的暗线。

话说回来,这个页面上的“More”和“Go”按钮与周围的对比度太小,即使你刻意在找也很容易被忽略掉。

WordPress 为页面中最受欢迎的链接 “Download(下载)” 使用了对比色。 这种红色在冷灰色调的页面中自己跳了出来。但这红色在明度方面有所收敛,避免了影响页面整体效果。

如果你对于该不该使用对比犹豫不决,就把这一决定过程当做是化妆。你要做的不是让人们大吼“看呐,对比色!”,你需要的是自然而然的吸引他们注意页面中重要的内容,高亮出已经存在的重点。

2. 渐变

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

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

Commission Junction的渐变运用远没有Media Temple的细致,而且采用了过于丰富的渐变类型:

  1. 从黑色到灰色的水平线性渐变,位于页面顶部
  2. 页眉处的绿色径向渐变
  3. 登陆框背景的“CJ” 标志上方模糊的斜向渐变
  4. 输入框背景中淡淡的垂直线性渐变
  5. 导航条背景的垂直渐变
  6. Webinar广告中明亮的线性渐变
  7. 另一个垂直线性减弱,用在了大标题处

这种设计有点冒险,大部分渐变式有用的,但还是存在一些问题。最突出的一点是,设计丧失了一致性。同选择可辨性强的色彩组合一样的道理,设计师也需要为每个项目选择合适的渐变组合。

例如,大的水平渐变(1)引导眼睛横向注视页面。这本没有什么问题,但就在此渐变的正下方又出现了把视线吸引到中心的径向渐变(2)和把视线引导到右下角的斜向渐变(3)。这会给访客造成困扰,起伏变化的视觉流(visual flow)也削弱了可读性。

使用渐变时,保证好的视觉流很重要:请保守而精致地使用渐变。最重要的一点,仅当对整体设计有帮助时才使用渐变。

时间: 2024-08-29 04:20:16

设计师参考:十个简单好用的设计技巧的相关文章

十个简单好用的设计技巧

[编者按]本文作者Mark Praschan是一位具有将近十年经验的http://www.aliyun.com/zixun/aggregation/7007.html">网页设计师,Web开发师,Web项目经理人. 文中强调复杂的高级效果能为设计增色不少,但如果用得不对,只会影响用户对重点内容的关注.高级效果可能正好是一项好的设计的冲击力所在,但即便如此,也还是需要一些更简单的效果与其配合. 简单的效果和技巧是建造当今设计的基石.比方说,如果你都不知道如何正确选择颜色和文字效果,灿烂的 星

网站设计:十个简单好用的设计技巧

[编者按]本文作者Mark Praschan是一位具有将近十年经验的网页设计师,Web开发师,Web项目经理人. 文中强调复杂的高级效果能为设计增色不少,但如果用得不对,只会影响用户对重点内容的关注.高级效果可能正好是一项好的设计的冲击力所在,但即便如此,也还是需要一些更简单的效果与其配合. 简单的效果和技巧是建造当今设计的基石.比方说,如果你都不知道如何正确选择颜色和文字效果,灿烂的 星光效果又能有什么用? 本着"少就是多"的理念,通过十个简单好用的设计技巧 ,就足以大大提升你设计的

十个简单好用的设计技巧[SM]

复杂的设计技巧总是很花时间,也实在是-.复杂 (-_-||). 高级效果 为设计增色不少,但如果用得不对,只会影响用户对重点内容的关注.高级效果可能正好是一项好的设计的冲击力所在,但即便如此,也还是需要一些更简单的效果与其配合. 简单的效果和技巧是建造当今设计的基石.比方说,如果你都不知道如何正确选择颜色和文字效果,灿烂的 星光效果又能有什么用? 本着"少就是多"的理念,我们为你精选了十个简单好用的设计技巧 ,它们能大大提升你设计的专业性和感染力.   更多技巧可参阅(英文): 12

网页设计师参考:以蓝色为主的网站设计实例

网页制作Webjx文章简介:经典蓝色系网站设计欣赏. 蓝色是所有网站中使用频率最高的一种颜色,无论什么类型的网站几乎都能使用蓝色,最常见的还是一些商业公司网站,对于网页设计师来说蓝色使用如此普遍,所以很多时候我们也经常会寻找一些蓝色系的网站最为设计灵感的挖掘与参考,本文介绍的也是以蓝色为主的网站,类型五花八门,适合网页设计师寻找灵感做参考 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]  下一页

网页设计师参考:使用白色衬托的网页设计

白色有各种变色.白色包括古董白.乳白色.亚麻白.米白色.纸色.雪白.珍珠白以及象牙白,它们会比纯白色显得更温和或不那么僵硬.很多白色可以和浅蓝色搭配成一个冬天风格的色盘,或者和黄色或粉色搭配出一种夏天的味道. 少量的白色可以非常棒的点亮一个设计,也可以让暗色的红色.绿色.蓝色 和 紫色 看起来更醒目.如果你是美国人.法国人.英国人.瑞典人(以及其它的一些国家),红色.白色和蓝色可以创建一种有爱国意义的色盘.黑色和白色是最有对比度的组合,你可以用它传达一种严肃或者喜剧性的感觉. 使用白色并不是意味

3个简单的UI设计技巧

  我将为大家带来3种非常简单实用的UI设计技巧,这些技术和处理像素有关,只是简单地操作像素来使你的UI设计变得突出,但现在很多现代的设计潮流都经常使用这些技术,它确实有着不错的效果.它为设计带来了更加立体和触手可及的感觉. 1.像素阴影 像素阴影的UI设计技术实现起来非常简单,就是为图像增加一个像素的硬边投影.简单来说,就是在Photoshop的图层混合选项里选择投影,并将尺寸(Size)设为0,将距离(Distance)设为1px.由于只有1个像素的阴影,设计上不会给人过度使用的感觉. 2.

设计参考:30个简单整洁的网页设计实例

简洁--简单,整洁,设计中最有效的方式就是简单有效,在UCD主导的今天,国内也出现一批极简主义的设计师,的确,最有效的设计,就是用最简单的方式,实现效应的最大化!这里收集了30张极简主义的网页设计,大家亮剑! UMedia Ronis Childcare Envato Six Central Gregory Wood AC Sys Lilly's Table Sofitek News Group Direct ParaplyApp

设计师参考:专业的LOGO标志设计方式

专业LOGO标志设计师必定总结了一些设计技巧,我们通过欣赏一些出色有创意的商业标志也能发现,本文中的这些标志十分有创意,但基础都是利用了一些常见的标志设计方式,比图数字,图片,变形等.在掌握了这些规则后,也就可以算是一个入门级的标志设计师了. 每个标志下都有说明,仔细阅读并思考这些设计方式,当你再看到其他标志时,都能从中找到相同点. Zoorganic 鹰的翅膀二边白色的部分分别一只马和一头狼.   Brandclay 二个手型被设计成字母B,代表brandclay   Foot 用一个脚印表述

photoshop十个简单好用的照片处理技巧分享

给各位photoshop软件的使用者们来详细的解析分享一下十个简单好用的照片处理的技巧. 技巧分享: 01.内容有关联的图片,与内容没有关联的图片相比,多出了94%的阅览量. 02.通过组合图像与信息,它会让人更容易记住.(纯声音的信息只有10%能在三天后还能让人记住,而视频与音频相互组合的信息却有65%能让人在三天后还能记住.) 03.视频内容在社交媒体上占了40%的市场份额. 图像在设计中起到了举足轻重的作用,你的项目越有魅力,作品就会更有效地完成.但是你的用户每天都会接触到无数作品,如何在