高手传经 网页设计中的几个小技巧

技巧|设计|网页|网页设计

如上图是Relen的个人主页Relen.com,2004版的首页发布信息,尤其是过年前后,利用雪花来点缀页面是非常合适的。注意这里面的雪花的摆设位置是有些技巧的,你可以考虑用黄金分割来支配你的设计思路,以达到合理、舒适的效果。

先排列文字,运用两到三种不同的字体,绝大多数文字对齐左侧,而其中一行突出,形成错落有致的感觉。文字的大小需要调整,主要信息文字大写,字体突出。而其他根据信息主次和平面设计的要求等多种因素进行排列。个别地方使用斜体加强,或用加粗的形式明示。

字体位置可以放在对角线的中部位置。如下三张图,效果都会不错。

注意,当文字的位置已经确定时,插图背景中的雪花要对照着文字放入。先做对称比例,注意雪花的大小。太大,会抢夺文字在画面中的重要性,也会影响到其他雪花的排入。寻找合适的位置与大小,感觉画面中各个物体之间的关系。

在文字上方放入的雪花及文字旁边放入的雪花,最下方的雪花,基本上成为斜直线,如此会形成一种飘落的感觉。上方的雪花显示出一般,处理时灵活些,与右上方的点呼应。

注意到这几个点的位置都相当重要,可以形成独立的垂直三角形。平面设计中也有力的关系,每个物体之间均有影响和推动作用,不要生硬的搭配它们,而是摸索它们之间的作用关系和相互的对比。

几个点把握好后,再加入一些雪花是画面更加丰富。注意下部又加了一个点这个点使雪花的飘动减慢了,部分雪花可以近似垂直的飘落下来。左下角的部分多些雪花,这个地方的雪花堆积,起到画面平衡重心的作用。

 

加入多少雪花,主要看画面的左右两边是否平衡。

因字体区域大,文字信息也是画面中最为重要的部分,对比来说,雪花是陪衬,是附带信息,美化信息。雪花在传递信息上就要略微弱一些。雪花面积小,但数量多,重复使它提升了重要性,也加强了左右的对比关系,最重要的是,丰富画面内容,使画面完美统一,效果好。

再次强调:均衡与对称是不同的。对称是在某一个轴线的两边或周围的形象对应、等同造成的一种美感样式,如中国古代建筑或人的双眼、双耳等,它是最早出现以及对人类美的认识产生影响的形式之一。由于对称过于单调,才逐渐形成了均衡这一形式美学的概念,它是对比对称而产生的。是支点两边的形状相异而量感等同的意思,均衡变化多样,只要使画面协调就可以了。

新年过后正好的情人节,把上述的图形稍做变化来适应情人节的节日气氛,其实是十分容易的。某位朋友参照Relen上述的设计作品,设计了一下这副作品。这副作品效果不假,它出现了严重的概念错误。

分析上图:

1、色彩。情人节是浪漫的象征,而他使用了偏暗的红色,给人一种非快乐的阴郁感觉,相当不好。

2、文字装饰。字体选择是很重要的,若选择的字体富有了一定的表情情感,如2004中的心型,那么设计就需要考虑这些细节的不同,并加以调整。可这副作品虽然选择了可爱的字体,其他两种字体就没有与之配合,而是孤立的摆放。字体的疏散及缺乏细节,使画面感觉松散缺乏统一的美感及细致的环节。

3、图形。图形的问题最大。表现浪漫的图形,常用的有心型、气球、彩棒(开Party用的小饰物)等等都可以使用。而他运用了十分理智的图形,这种理智的图形象征的是化学、科学,严谨而庄重的事情,没有快乐、温馨的感觉。使画面看起来相当不搭配,十分怪异。

看似简单的一个小的平面设计,居然会出现这么多问题。为了给了他一个小小的建议,Relen制作了下图:

花了不到2分钟,把色彩进行了调整,但只有色彩的变化是不够的,情人节很容易让人联想到礼盒的包装,仅仅使用表现浪漫的斜线,就完全表达出了温馨、幸福、快乐的这一概念。

在上面加上文字,即使不做其他装饰,现在的图像,意义已经可以表达完整了。还可以稍微对色彩做些改变,如果你习惯浅的色彩,或是更浪漫的紫红色都可以。注意,不论你选择怎样的色彩组合,画面背景深、斜线色彩浅等方式,图片最终都要和网页背景相互搭配和谐。

斜线的用法是平面设计中相当常见的。如淘宝网的女性商品页面,用到了表示浪漫的粉白斜线,效果不错。

斜线的交叉、错位,也会达到较好的效果。如下图,只需几分钟就更改了效果。

时间: 2024-08-21 20:36:35

高手传经 网页设计中的几个小技巧的相关文章

网页制作高手进阶:网页设计中的文字运用

设计|网页|网页设计  如今,互联网越来越走近我们的生活,网上冲浪也渐渐成为我们生活不可缺少的一部分.网络世界五彩缤纷,涌现出大量优秀精美的网页.大量网络信息的呈现,无非就是通过文本.图像.Flash动画等,其中, 文本是网页中最为重要的设计元素.对于网页设计初学者而言,了解和掌握网页设计中的文字排版设计就显得尤为重要,下面笔者想谈谈一己之见.     文字的格式化     1.字号.字体.行距字号大小可以用不同的方式来计算,例如磅(Point)或像素(Pixel).因为以像素技术为基础单位打印

高手进阶:网页设计中的文字运用

    如今,互联网越来越走近我们的生活,网上冲浪也渐渐成为我们生活不可缺少的一部分.网络世界五彩缤纷,涌现出大量优秀精美的网页.大量网络信息的呈现,无非就是通过文本.图像.Flash动画等,其中, 文本是网页中最为重要的设计元素.对于网页设计初学者而言,了解和掌握网页设计中的文字排版设计就显得尤为重要,下面笔者想谈谈一己之见.     文字的格式化     1.字号.字体.行距     字号大小可以用不同的方式来计算,例如磅#quotel.quoter#或像素(Pixel).因为以像素技术为基

网页设计中的图标的使用技巧与资源合集

  提到图标设计,似乎每个设计师都有话说,但是要做好图标设计真的那么容易么?今天这篇文章针对网页设计领域的图标设计进行了相对全面的梳理,从设计技巧到设计资源一应俱全,但愿能帮上你! 图标是每一个现代UI中不可或缺的组成部分,它们不仅能协助UI布局组织内容,而且轻量级的图标融入界面也不会喧宾夺主.不仅手机和平板的APP UI中会大量用到各种图标,而且iPod和智能手表的界面中也是如此,这正是因为图标具备快速直观传达信息的能力. 在网页设计刚刚兴起的时代,小图标就已经被早期的网页设计师和开发者投入使

网页设计中透明效果的使用技巧

运用好透明效果是提高网页设计水准的重要方法之一.如同使用其他方法一样,设计师们有很多种手段将透明效果运用到网页中,今天这篇文章就来好好和您分享一下关于"透明"的实用小技巧哟:) 在网页设计中使用透明效果是件既美观又冒险的事儿.透明效果的使用是把色块,文本或图像"变薄"或者降低饱和度,使颜色变浅透明,这样下个图层的内容就能穿透显示出来.这种方法如果用好了,效果将会特别棒--能突出显示文本或者在图像的特定区域形成焦点.但设计者在运用透明效果时要特别小心,因为这么做可能会

网站设计分析:网页设计中透明效果的使用技巧

运用好透明效果是提高网页设计水准的重要方法之一.如同使用其他方法一样,设计师们有很多种手段将透明效果运用到网页中,今天这篇文章就来好好和您分享一下关于"透明"的实用小技巧哟:) 在网页设计中使用透明效果是件既美观又冒险的事儿.透明效果的使用是把色块,文本或图像"变薄"或者降低饱和度,使颜色变浅透明,这样下个图层的内容就能穿透显示出来.这种方法如果用好了,效果将会特别棒--能突出显示文本或者在图像的特定区域形成焦点.但设计者在运用透明效果时要特别小心,因为这么做可能会

网页设计中图片格式的选择技巧

  网页设计中,切图输出是指设计师将手边绘制完成的原始图稿转换成网页用的图片格式.并交由下一位人员网页排版的重要步骤.选择适合的图片格式不但可以将让设计得到合理的显示效果.甚至还可以有效的控制图档的档案大小,节省下载时间.有效的减少服务器的负担. 以设计师最常用的 Photoshop 以及 Illustrator 为例,都提供了「储存为网页用-」的功能.与默认的存盘模式不同,在这个模式中,软件提供了仿真图文件输出的质量调整.档案大小控制等针对网页图文件需求的选项: 相信许多人都知道网页设计中最常

ASP网页开发过程中的几个小技巧

过程|技巧|网页 摘要:本文介绍了用ASP进行网页设计过程中的几个小技巧,包括新闻栏的创建和自动更新,以及公告栏的创建.使用和维护.指明了解决此类问题的大致方法. Abstract: We introduce several tricks when using Active Server Pages to design homepages. These include the creation and automatic updating of news columns, as well as

网页设计中排版与布局小基础

设计|网页|网页设计 有些人始终认为,网页最主要是内容,不需要再搞些门面上的东西,还拿出MUD来比 喻.可是,红花还需要绿叶陪衬.想想,若MUD不只是单纯的文本,还有画面出来, 那么,它所吸引的何止现在的这些MUD迷呢? 那么,我所要说的到底是什么呢?初学者如果能够了解一些设计上的东西,那么, 自己的页面不会显得乱,自己看了也开心,别人看了也开心,何乐而不为呢? 我们的主页,说到底,只是一个800*600的画面,那么,我们要怎么对它进行安排 才合理呢? 首先,也是最重要的一点,就是先停下创作,先

网页设计中制作Flash站点的技巧

技巧|设计|网页|网页设计|站点 根据Macromedia 顶级Flash设计者,开发者以及可用性专家的建议,我们收集了创建一个具备可用性的Macromedia Flash站点的十大技巧. 这些技巧只是一个开始,我们将继续提供更多的研究,学习与技巧. 1.记住用户的目标 用户往往带着目的访问一个站点,每个链接,每次点击都要合乎他们的经验并且引导他们通向他们的目标.当传输你的页面时,应该让关键的导航链接首先装载--万一用户想转到网站其它的区域.模仿通常的用户图形界面往往可以增加可用性. 2. 记住