当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 五个设计技巧,开拓你的设计视野

心得技巧
IE8 Beta 1两个地方需要大家注意
提高网站性能中内容有关的10条原则
网页设计者应该从三个方面优化网页
Web 设计 实现干净代码的12条定律[图文]
网页设计必备工具 firefox Web Developer插件 CSS工具组教程
UCenter Home 站点添加统计代码
9款很棒的网页绘制图表JavaScript框架脚本
提高网站可用性的10个小技巧
网站维护页面的列表制作技巧
B2C 网站用户体验细节设计参考
收集12个实用的网页在线工具
设计参考 漂亮和原创的博客设计
收集25个知名网站标志中使用的字体
极尽简约的网站设计实例
个性化创意鲜明的网站设计实例(30个)
水平滚动的网站设计 小结
更受欢迎 更具创造性的深底色网页设计实例
有创意的关于我们网页页面设计
整洁漂亮的网页设计的4项原则
设计参考 WordPress建站成功案例

心得技巧 中的 五个设计技巧,开拓你的设计视野


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-01   浏览: 183 ::
收藏到网摘: n/a

译者的话】 为什么一张图片比三张图片更有力量?如何设计产品使用指南?如何在设计中通过各种对比产生层次感?如何使设计内外统一协调?如何设计一个独一无二的签名式 LOGO ?本文继续发扬实用主义,对这些问题给出了解决办法。五个设计技巧,开拓你的设计视野。

封面设计:小即是多

当你在设计时手头上有三张照片,你会如何处理?你会将这三张照片都用上,对吧?其实没必要!一张照片就已经能够使设计信息有效传达。在这个例子中,校区里的塔楼就已经能够传达出这所学校的本质,比用上三张效果更好!标题单独一行,文字中的背景颜色区域静静地传达出有关信息。

设计师有三张照片,但如果在版面上都用上这些照片,那你还要对这三张照片进行剪切,然后将它们挤进版面里。但出来的效果却是,这三张照片在版面中的样式很相似(相似的图片元素及图案),文字阅读起来很费力。所以,设计师又不得不将字体变得很粗,字体变粗后,又要找个地方放置学校的名字,所以在最下方设计师又加上一个紫色区域来突出学校名称。设计师越“设计”,封面就越虚弱。无论是学校信息还是所要传达的文字信息都在这些复杂的、太多人工痕迹的元素中消失得一干二净。封面可以说是成为“被侮辱及被损害”的对象。为什么会这样?因为设计师做过头了!解决办法:只让一张图片来说话!

记住,在设计中,小即是多。学校的塔楼已经可以传达很多信息。简单的居中设计,就是直接让这张照片“说话”,然后加上文字就行了。注意在上图中,文字的背景区域并没有横跨整个版面,因为我们要让图片由上至下都可以流动。而上图右,学校的主色(紫色)及褐色与树的绿色形成吸引人的视觉效果,留意这三种颜色在色轮中的位置关系,绿色及褐色是紫色的补色的邻近色,听起来很复杂?紫色的补色是色轮中相隔 180 度的草绿色,而草绿色的两边邻近色就是绿色及褐色(留意色轮中的线条)。我们将这种颜色关系称之为“补色分割”( Split complementary )。

排版:文字应该与图片紧密配合

我们经常会接触到一些与电器、高科技产品,而设计一个描述式的版面其实充满乐趣。

原来的设计使版面变得复杂。对于这种小型产品的使用指南,我们的目标是要追求简单易读,让使用的人一看就知道文字是指哪一部分。但上面的设计却使这种联系断裂,也使到这张说明卡片的元素呈一个平放的“ L ”型,在上图中,图片放在一边,而文字说明则放在另一边。结果就是,产品显得很单薄,而页面中间那么重要的空间却空无一物。读者为了看明白这张卡片,不得不来来回回仔细对照。

在修改后的版面中,产品显得靠前,而且居中。我们将产品尽可能拉大,然后将各个要说明的部位用引线在其周围说明。非衬线字体容易辩认阅读。文字对比不强烈,整个版面显得干净清爽。并不需要象原图一样采用数字来说明。

最底部的联系信息排成一行,呼应产品的水平感。而文字都是同一种字体,只是样式不一样而已——用粗体和细体来形成对比。

版面:差别产生层次

哈钦斯大街广场酒店( Hutchins Street Square Hotel )是举行会议、宴会、接待及其它活动的理想场所,但如果你只是看它的这张价格宣传单张,没有人会觉得这家酒店有什么优点。它的版面缺乏生气,字里上的文字同一种字体,同一种尺寸,同一种的样式,同一种颜色,但都迷失在白色的海洋中——虽然页里上写满信息,但毫无生命力。

这种低调的设计很容易让人忽略,但你要记住,对于酒店来说,很多顾客第一个看到的东西就是它(也可能是最后!)。还是让我们花点时间来设计,使人瞥上一眼就能知道它要说什么。

这个设计让人看起来并不象是一家酒店,反倒象是一个电子邮件的宣传版面,所有东西都是相同的,缺乏变化,而图表的细线看起来就象是用铅笔画出来一样,没有层次,没有视觉焦点。宣传的对象倒是美轮美奂(见下图),但问题是,如果这张价格牌本身不能吸引别人阅读从而使顾客走进这家酒店,里面再漂亮,也没有人知道!这张平淡的单张使所有的信息都变得暗淡。

看一下我们改造后的效果:

通过字体创造出层次感:只需要简单的对字体、字体样式及颜色作一些调整,就可以轻易使版面变得吸引。上图中:

  • 1, 此处让人一看就知道是标题,其字体轮廓与桌子上的摆设有共同的特征;
  • 2 及 3 ,粗体突出主要信息,而黑和白则告诉你这是两个不同的信息;
  • 4 ,细体是具体的描述文字;
  • 5 ,线条用了白色而不是黑色,线条不明显,使整个图表给人一种以行排列的感觉。


(点击上图看修改后大图)

通过颜色来创造层次:深中浅三色是用吸管在这张宴会厅的图片上取色的,我们用这三种颜色安排版面,轻易创造出层次感。深色用在图表的上方,而另外两种用来区分每一行。由于这三种颜色来自于酒店图片,使到颜色直接与酒店产生了联系。

版面:由外到内

要使设计的内部与外部有着相同的风格需要一定的技巧。怎么做?简单,将封面的字体、颜色、图片风格及主要的版式都搬到里面去。注意各种元素的比例,如绿色的使用比例及图片的大小,具体看一下效果:

人物采用轮廓形图片,没有背景,使到其不规则的边缘显得更有活力。对一张大图片来说,采用这种轮廓形的设计,可以加强图片的力量,使图片充满流动感。模糊的边缘传达了一种开阔及健康的气息。留意,两张图片在实际应用中都有一个直角形的部分,即图片直接去到出血位区域。而文字无论是左对齐还是右对齐,都与这种直角区域相似。留意设计中的标题,采用了一种非常幼细的字体,这种字体充满清新,一如版面的风格。两者配合,天生一对。

签名 LOGO :

还有什么图案比你自己的签名显得更独一无二?它完全属于你自己。所以当你有一项业务或项目是需要你最终来确认的——一个典型的例子就是公证人——那你为什么不直接用你的名字作为一个 LOGO ?

一个签名式 LOGO 很容易制作。你只需要在纸上签个名,扫描进电脑,然后用钢笔工具描边。一个独一无二的 LOGO 就完成了。可以象上图一样,将白色的 LOGO 放在灰色背景上,当然,你也可以艺术一点——选择一种您喜欢的颜色。

字体调整:我们可以通过对字体进行恰当的调整及选择来加强设计。在这个例子中,经典的 Adobe Garamond 传达了一种久远、传统及权威的感觉,而粗壮的 Franklin Gothic 粗体加强视觉的传达效果。因为上述这些都是差别很大的字体,所以为了使它们在一起能够协调配合,我们需要对个别字体进行调整。在这个例子中,我们将 Franklin 缩小一些。留意在上图名片中,白色的标题放在灰色区域中,显得特立独行。

本文所用颜色数值: