在好的网页设计中我最留意的是那些对设计元素之间留白的聪明运用。留心不同内容区块之间的间距和排列方式,能让你的设计的整体感官大不一样,从而提升设计的品质。 “高品质”是所有人追求的目标,在网页设计的世界中也不例外。不过何为“品质”,如何判断一项设计的品质是好还是坏?笔者恰好有一套找出网页设计中品质焦点的方法。一旦你了解到如何判断一项高品质的设计究竟好在哪里,你就掌握了让自己的设计更趋完美的大量技巧。 这里,为大家列一些要点,并附上相应的例子,分享在其他优秀网页设计中寻找“高品质”的过程。 Digital Mash Creatica Daily的大量空白
Postbox上也有很多空白
留白时的错误
高效控制留白的技巧 各种不同情况下,留白要求都不尽相同。你需要不断训练自己,做到对留白所能带来的改变时刻心中有数,从而有效地利用留白满足设计需求。这要靠个人感觉的,不过都能从实践中锻炼出来。 ·使用网格辅助设计:利用网格当然能帮助你理解元素之间的空白。 ·不断尝试:不断尝试—失败—尝试,直到找到最佳方案。 ·留白并不是浪费空间:空白并不总是等着你去填充的。 ·没错,少就是多:与其用尽心思填满某个区域,不如就把它留空,只保留至关重要的信息就好。 有一个方法能够看出某人在完成一项网页设计时是否真的用心了。有时候创造奇迹的就是一些小细节,一些别人几乎无法察觉的细节。我所说的“像素级的完美”就是指在线条、边缘和边框描边上仔细推敲。与其就用一条单一的线,不如多加一些细节。细节可以是细微的渐变,也完全可以只是一条1像素宽的细线(用作表现阴影或高光)。有了这些细节, 你的设计会大不一样。有些设计师在这方面特擅长:Collis Ta’eed,David Leggett以及Wolfgang Bartelme。 像素级完美细节的实例:Envato的细节鉴赏 下图的Example 1(例子1)中,绿色内容框的边缘有一条更亮的绿色线。而Example2处,区块内边缘有柔和的渐变阴影,而边缘之上还有一像素的白色描边。这做法非常聪明,用阴影来强调高光。后面的绿色区域有非常柔和细微的光影效果,有助于将注意力吸引到下面的白色区块中那清新脆爽的细节上去。尽管这种做法并不是总能让设计看起来更加精致,不过它们的确能帮助你赋予设计以三维的真实感。于是设计元素就成了镶嵌在页面上的宝石,而不是平铺在上面的一张毫无动感的纸。 Tutorial9.Net上的细节 RedBrick Health:按钮和分割线上的完美像素级细节 完美像素级细节也适用于Grunge风格:AvalonStar 要在这一技巧上达到完美,不断的实践尤为重要。如您所见,一条1像素线这么简单的东西就能给设计添加非常酷的深度感。你甚至不一定要用到那些倒角或渐变,费尽心力做一些实实在在的置于某对象之上的效果。 ·一定要注重细节:小细节完善内容感官是关键。 ·思考像素级问题:描边、渐变、线条、阴影等等,不用太宽大也能有效增强设计 ·前后对比:应用效果后注意与没有这种效果之前进行对比。如此你就能知道这些细节到底带来了哪些改观。 3、文字排列与字体选用的诀窍
Web Design Ledger:配合情绪的字体 网页设计中字体选用的快速决断 看了上面这么多好例子,将来你选用起字体来应该会更加得心应手。不过,为什么他们给人的感觉这么好?下一次在你自己的设计中,你又该如何运用? ·是否可读?不要怕尝试粗大的字体 ·你可否考虑过间距?间距对于可读性有很大决定作用 ·你的字体带给人什么情绪?确保字体选择适合你的设计风格 这方面还有大量值得关注的地方,不过我不是这方面的专家,我也只是刚刚学会了如何鉴赏那些用得极好的字体而已。 4、元素的组织 设计师这一职业对很多人都有吸引力,因为那些制造创意的过程,实在是十分有趣。我知道组织内容的过程就没有那么有趣了,不过一旦你养成了组织内容的好习惯,你就会发现其实它也没有想象中那么枯燥。组织内容的方式总是需要看情况而定,比如说,这站点是什么类型?某项特定内容在页面上的重要性如何? 如何放置内容,以及放到哪里,可能的排列组合实在太多了。不过还是有一些技巧可循的。最基础的就是,先决定你的设计需要达到的效果。例如,你是在做卖东西的网站吗?是要做内容展示吗?或者是在做一个用户注册页?推广页面?等等…… 靠设计做买卖: 37Signals 看看这个广受欢迎的37 signals的网站。他们的东西能卖这么好,可不是靠的运气。他们的网站让你尽可能容易地了解了他们的产品,帮你做出最终决定。你所看见的东西都被精妙地设计而呈现。 如图中所示,他们提供了四大理由让你购买他们的产品。吸引注意力(Attention)是第一步,他们做了一个黑色区块,放上关于产品的简单介绍,并且使用了粗大的标题。接着,他们通过一些漂亮的插画把你的兴趣(Interest)吸引到对产品优点的介绍上。再然后,他们想要让你产生购买需求 (Desire),这能通过放置客户评论引言和产品获奖证书来实现。在这一实例中,他们是通过几个“What our Customers have tosay”(我们的客户如是说)的视频来实现的。最后要实现的即促成购买行动(Action); 37Signals的网站上有大量行动点(action points,即引导用户进行下一步操作的链接)贯穿于整个页面,由于页面很长,页面底部还放置了更多的行动点。
你当然可能会遇到需要打破常规,选用非同寻常方式的时候,不过你还是可以遵循这些简单技巧,以保证内容结构和阅读顺序的良好。 ·你为何而设计?如前所述,确定设计的目标。 ·利用网格:网格帮助你发挥页面的最大潜能。 ·测试元素位置:以访问者的角度考察内容的易用性。 ·移除所有不必要元素:不必要的东西都应该被消灭,或者至少不要放到显眼的地方。 ·注意力的均衡:有些东西需要被简单化,好让另外的事物闪耀光辉。 5、自我克制与精妙细节 设计师总是在寻找制造冲击力的方式,总是想做一个独一无二的设计,创造些前所未有的效果。不过有时候通过自我克制也能形成冲击力。量变产生质变,过多的“好”也会带出不好的结果。好的设计师晓得平衡点在哪里,并且能避免让过多的特殊效果毁了一项设计。 Things网站上的柔和渐变 对于我访问过的站点,我总是很关注他们的细微渐变。听起来可能有点恼火,不过我就是忍不住要去研究别人的那些小细节,以积累我将来设计时的灵感。渐变是最被滥用的设计方法之一,不过运用成功的话,还是能让设计增色不少,它所能提供的真实感和深度感是其他技巧所不能达到的。大部分人都不太注意渐变,不过别人对渐变的运用确实是我最好的灵感来源。
精细的背景材质:Scouting For Girls 做旧与撕碎的启发:Viget Advance
WebDesignerWall上的水彩效果
精妙的植物:Dara’s Garden
运用精妙细节的小贴士 我认为,精妙细节能让一项好的设计升华为灿烂夺目的设计。如果你还在寻找让设计与众不同的方法,精妙细节是个不错的尝试方向。 以下是关于运用精妙细节的小贴士: ·创建细节图层:不要在一个笔刷或材质上吊死,多加些图层,多做点细节。 ·尝试不同透明度和色彩:有时候只有 3% 的不透明度也能产生正面影响。 ·拒绝缩手缩脚:不要担心太多细微,或者太不明显。 6、 发挥色彩的全部潜能 设计师一般喜欢按照自己的品味来选择颜色,这可实在太不专业了。要决定哪种颜色是最适用的,你的脑子里想的应该一直是品牌需求,然后选好色彩的搭配组合,指定其专属的主题和目标情绪。 网页设计中色彩运用的绝妙例子,无趣并不代表无色:Oypro Oypro的网站让我喜欢的地方是,他们告诉了我们,一项“无聊”的行业相应的设计并不一定也得“无聊”。通常企业的网站都不允许设计师有太多视觉创意上的发挥。保持简单、单调、淡彩色成了不成文的规定。不过Oypro的例子证明,不用束缚自己,你也能创造出一个有足够“企业感”的网站。 让色彩相互联系:Tennessee Summertime Summertime in Tennessee(田纳西州夏日观光)是一个充满活力的、明亮的,非常温暖的站点。所有一切看起来都是为了推送夏日活动而设计。该站点使用了非常多不同色相的高饱和度色,但每一种颜色都切中要害,没有一种是不适合主题的。高品质设计的色彩搭配必定与其要呈现的服务或产品密切关联。好的设计并不总是需要费尽心力选一些出奇制胜的颜色,那些最明显最该用的颜色反而能创造更好的效果。比如说Hell Design(地狱设计),不用象征地狱的火红色简直说不过去。 背景还可以大作文章:Saturized Studio 只涂一层单调的背景色可没法让你的设计变得有趣。有一点变化的背影才是最好的背景。此例中我们看到,漂亮的橙/红色被运用到各种各样的光照和渐变效果中。这种为背景增加变化的做法,有效避免了平淡和沉闷。另一个需要特别注意的地方是,暗深橙色背景与上层明亮内容区的对比产生了非常戏剧化的漂亮的视觉冲击。 在网页设计中运用颜色的小贴士 颜色永远是值得探索和尝试的区域。尝试不同的组合变化能为设计带来无限可能。不过选择颜色和色彩搭配时,应该做到对下面的要点心中有数: ·尝试突破:无趣的主题并不一定得使用无趣的色彩组合。 ·多变:尝试在你多彩的背景上使用渐变、重复图案、笔刷,光有颜色可不容易让设计显得好看。 ·坚持主题:确保你的用色与你需要呈现的产品/服务有关联。 7、做别人没做过的事 最好的网站中有一些非同寻常的,奇怪的,甚至可以算得上诡异的设计。不过那些挑战传统的尝试说不定会已经改变了传统的定义。话说回来,要做到完全原创,创造出没人做过的东西实在是设计过程中最难做的事。 打破常规之后,成功与失败只有一步之遥。你要么做出令人惊艳的聪明设计,要么做出一堆垃圾饱受批评。别人从来不这么做是有原因的,因为有些点子实在是糟透了。要从人们知道并喜欢的区域走出来,你得非常勇敢才行。下面是一些相关实例: MB Dragan 上的独特导航 不是你通常所见的站点导航,但看起来还是一个网站,同那些标准导航同样的好。这样做有点冒险,但结果非常符合该网站特质。十分切题的设计,很难让人不欣赏这导航与整个设计之间的配合呼应。 Visualbox(视觉盒子)非常视觉化的导航 Visualbox的网站只有一个目标,向你展示他们充满智慧的作品。所以他们没有用多少文字,你第一眼看到的就是他们的名字和作品选集。鼠标滑过预览图片时,会显示出项目名称,点击时会带你滑到页面中该项目的相应位置。这是非常高效而实用的解决方案,而且比简单地堆一个列表出来要吸引人得多。 废话不多说的Nikola Mircic 假设你是位交互设计师,你需要别人看了你的作品,能感动得雇用你。NikolaMircic为我们展示了“直截了当”对建造一个令人难忘的站点有多大的作用。一打开他的站点,各种风格的作品就向你问好,他的名字和职业放在页顶的醒目位置,当然,联系链接没少。没有大量多余文字来劝说你雇佣他,作品本身就证明了他的实力。当然,点击作品缩略图会出现一个详细介绍页,里面就有足够的文字了。实在喜欢他组织内容的方式。 实践新鲜想法的小贴士 上面的例子并不是为了“激发”你的独特创意,只是一些我发现的一些很独特的站点,仅此而已。事实上,你也不应该到处搜寻,寻找新想法的灵感,因为这样你的点子也是受别人的启发,与完全创新是相悖的。所以如果你打算做真的非同寻常的东西出来,就赶快忘掉这一部分! 保证事物之间的联系:如果你打算做一些特别特别特立独行的事,先问问自己“真的有必要吗?”,“这样说得过去么?”,“和品牌诉求符合吗?”……如果答案是肯定的,再采取行动! 忘掉所有已知事物:好吧其实也并不是所有,基本原则还是要的。话说回来,也没必要从全新的想法里面寻找灵感,因为那样很容易误入歧途。 保证品质和水准:基本上我觉得如果你的新想法足够好,判断品质究竟如何对你来说应该很容易。 |
|