网页设计应急小技巧

标签: 产品设计 网页设计 | 发表时间:2011-09-29 23:38 | 作者:P迪 goochin
出处:http://www.alibuybuy.com

作中,网页设计师经常会遇见这些状况:时间这么短又要出彩、又是要大气要有气氛、风格不明确很难把握、栏目这么多页面又这么长……
突然觉得束手无策,脑袋里一片空白,没想法了,怎么办?
下面简浅的归纳了几个快速让页面出彩的小技巧:

1.旋转法
– 将页面的主体或局部进行旋转

我们一般的页面版式都是方方正正,四平八稳,有点呆板。如果将局部或整体适当的旋转,打破稳定的构图,画面就会动感有趣一些。
对于上图,这种基调轻松活泼又恰好内容比较少的页面来说,主体整个旋转后,画面马上轻松活泼起来,看过现在这个画面,真是无法想象未旋转前的平淡。同时,相比大块的方形空白,不规则的余白也不会显得空洞。

上图,将背景旋转后,大面积的斜面产生了很强的速度感,赛车急速飞驰着,好像下一秒就要从电脑中冲出来一样,倾斜的大标题和旋转后的背景交叉配合,使画面整个都运动起来。这种方法可以应用到很多运动的主题上。


2.黄金分割法
– 灵活运用黄金比例分割的办法将页面“切”开

黄金比率被认为是最理想的矩形比例,在过去的文化遗产中也有很多这样的遗存。将这个比率应用到版式设计中,也能够设计出容易为用户所喜欢的构图。但不要被这些比例所束缚,很多是靠自己的感觉去应用。
上图,除去背景无非就是一个排版清晰的页面,将背景分割后,对比的色块使画面产生纵深感,页面的丰富性和视觉冲击力迅速增强。人物也好像着陆了一样,平稳的站在画面中。

上图,用反差强烈的色块进行分割,强调了版块的划分,即使有很多地方需要强调,也能让用户迅速清楚各版块的重点,不用像以往一样1、2、3…… 将内容依次竖排下来,鼠标都已经拖到第三屏了还没完没了,又没什么新鲜感。


3.曲线法
– 将曲线用于背景或版块分割,消除矩形分割的生硬感。

与直线相比,曲线具有圆润的特点,让人感觉轻松、愉悦。增强视觉感的同时也能够营造活跃的气氛。
上图中,大众的logo和焦点图中的机器人产品,全部由曲线组成,这种情况下,用曲线来分割背景和焦点就显得理所当然了,画面中曲线合理的运用也提高了层次感,机器人和红色标题都更突出。

仿照球的运动轨迹,贯穿着整个页面的曲线,将用户直观的带入了正在激烈进行的棒球比赛现场。看似随意,其实用曲线精当的将标题、焦点图和新闻等版块按重点进行了不同比例的分割。


4.借用法
– 借用现实中的东西,将实物抽象化,提炼出大形轮廓用于背景

现实中的东西也可以应用到网页设计中?当然可以,只要想的到。
如图,信封是我们生活中常用的东西,如此生活化的东西借用到网页上,展开在用户面前,好像邮寄给您的信一样,立马让人眼前一亮,亲切感油然而生。作为游戏活动的通告页,用白色的信纸来盛放主体内容也再合适不过。

上图,将赛车在赛道上疾驰的场面置放到页面上作为背景,虚化的大城市,放大的赛道,飞奔的赛车……就像此刻坐在电脑前玩赛车,左手正紧紧按着W、A、S、D键一样。让用户身临其境,完全抓住了对方眼球。
以此类推,生活中很多东西都可以借用,例如:写满粉笔字的黑板、电脑的屏幕、写日记的本子、老古董的地图,空旷的足球场……


5.三角拼贴法
– 像做手工一样,将裁剪好的三角形打乱,重新拼贴

不同的几何形状有不同的性格,圆形是活泼可爱的,方形是平稳整齐的,三角形就是尖锐动感的。
三角形的不平衡性及其尖锐性能够增强视觉上的刺激,快速吸引用户,可以用于科技和时尚这种风格同样比较“锋利”的网页。
上图,将同色系小三角形均匀的拼贴起来,马上就营造出一种钻石璀璨般的时尚感。但实践的时候要注意加减法,不能乱堆一通,点到为止即可。

上图,用艳丽的三角形对页面进行划分、拼贴。大小的组合,色块的对比,能够带给用户强烈的视觉冲击力。在搭配的时候,注意主次,以一个大的形状为主,给内容摆放留下足够空间,与其他辅助的小形状相区别。


6.色块分割法
– 将各版块用不同颜色来区别

经常面对需求方这里是重点、那也是重点、那那那也挺重要,统统需要突出的要求,对于主题比较明快的页面 可以考虑将版块用不同颜色来区别,通过色块来强化页面版式和布局,难度较大的是在色彩搭配上要取得平衡。
上图,版式在页面都以块来体现,没有什么效果,为了突出重点,在重要区域选择了饱和度较高的红黄绿三个颜色,产生明确的视觉中心,让用户能够按照我们希望的那样阅读下去。但对比色调容易造成不和谐,红黄绿之间加上灰底的中性色来调和一下就显得不会突兀了。

当使用四到五种纯色进行搭配的时候,注意只要色相、纯度、明度三个属性中有一个属性是基本相同或者接近,搭配起来基本上都不会觉得太牵强。

—————————————————————-
以上几个小技巧可以在情况紧急时参考,大家也可以用类似的方法总结出更多的小技巧自用。

来源:http://uedc.163.com/7779.html


© 推荐 for 互联网的那点事, 2011. | Permalink | No comment | Add to del.icio.us
Post tags:

你可能也喜欢:

优雅妩媚,女性专用酒杯设计赏 (@toodaylab)

精美图案印上面包,传统厨具的创新设计 (@toodaylab)

2010网页设计趋势

提升网页和博客设计品质的一些实例和技巧

25个优秀的对称网页设计的例子
无觅

Feed enhanced by Better Feed from Ozh

相关 [网页设计 技巧] 推荐:

网页设计应急小技巧

- Guan - 所有文章 - UCD大社区
工作中,网页设计师经常会遇见这些状况:时间这么短又要出彩、又是要大气要有气氛、风格不明确很难把握、栏目这么多页面又这么长……. 突然觉得束手无策,脑袋里一片空白,没想法了,怎么办. 下面简浅的归纳了几个快速让页面出彩的小技巧:. 1.旋转法 – 将页面的主体或局部进行旋转. 我们一般的页面版式都是方方正正,四平八稳,有点呆板.

我的防身暗器-网页设计应急小技巧

- MooM - 网易用户体验设计中心博客
工作中,网页设计师经常会遇见这些状况:时间这么短又要出彩、又是要大气要有气氛、风格不明确很难把握、栏目这么多页面又这么长……. 突然觉得束手无策,脑袋里一片空白,没想法了,怎么办. 下面简浅的归纳了几个快速让页面出彩的小技巧:. 1.旋转法 – 将页面的主体或局部进行旋转. 我们一般的页面版式都是方方正正,四平八稳,有点呆板.

经典推荐:网页设计构图技巧

- - 优设(UISDC)
一篇开拓网页设计思路的文章,虽然有些年代了,但是其中分享的构图技巧到现在依然是非常受用的,如果你能领悟个中精髓,融会贯通. 那么今后你设计出来的网站,一定会从格局形势上让客户眼前一亮. 网页给人最直观的感受就是它的页面框架与构造,就像一座大楼的主体框架与形态,你可能记不起东方明珠塔和艾菲尔铁塔是用什么颜色或什么材料涂的外墙,但我想你一定记得起它们是什么样的形状.

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

- - 优设(UISDC)
网页设计中,切图输出是指设计师将手边绘制完成的原始图稿转换成网页用的图片格式、并交由下一位人员网页排版的重要步骤. 选择适合的图片格式不但可以将让设计得到合理的显示效果、甚至还可以有效的控制图档的档案大小,节省下载时间、有效的减少服务器的负担. 以设计师最常用的 Photoshop 以及 Illustrator 为例,都提供了「储存为网页用…」的功能.

网页设计师必备的10个CSS技巧

- - 博客 - 伯乐在线
CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页. 使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情. 在CSS的深海世界里有很多有意思的东西,你只需要找到最适合你的就好. 当然我们不可能一下子就记住所有CSS的规则和语法,但为了以后的发展我们还是应该记住那些非常有用的CSS技巧.

简洁网页设计你需知的6点技巧

- - 优设(UISDC)
洁净和一尘不染之间是不能划等号的. 去掉了多余内容的设计看起来外形美观,一目了然,让人心旷神怡,尤其是对 网页设计领域更甚. 设计师在网站设计过程中,时常会遇到过度设计的例子. 保持审美需求和实际需求之间的平衡,对整洁,干净和条理清晰的网站来说很重要. 在激烈的行业竞争中, 网页设计师想要获得成功,先决条件之一就是要掌握简洁的网站设计基础.

伟大网页设计之10个设计技巧和40个例子

- 山河之外 - 互联网的那点事...
作为一名网页设计师,如何在第一时间打动潜在的客户是至关重要的. 如果你设计的东西不能够打动他们,你就会失去一切,这个世界有的时候就是这么的现实. 那究竟要注意哪些细节才能够在一个正确的方向去打动客户,让浏览者源源不断呢. 我们知道有一个好的标志是企业形象的开始. 好的口号可以让你以更快的速度去曝光自己的站点.

越简单越丰富——极简网页设计视觉呈现技巧

- 阿德 - 腾讯CDC
  如何让杂乱又咄咄逼人的网页变得轻薄简洁而美观,又需保留完整功能、同时很好的区分出重点模块. 这往往是让设计师困扰纠结之源;如何更好的将多余的元素、色彩、形状和纹理剔除,保留重点并梳理清晰的视觉流动方向.   如果一个页面有太多的元素,用户将迷惑于去看哪里或误解每个元素的优先级. 优秀的设计师需要用设计语言将焦点正好引导到正确的内容上,正如提到的,极简的网页视觉能够将最重要的内容带到最前面并为用户避免分散注意力,比如,在一个黑白设计上的任何色斑,都会引起用户的注意力,色彩本身也将成为焦点,这便成为我们即将要展开探讨的小小话题.

网页设计中的不对称设计技巧【附12个精美示例】

- - 博客园_梦想天空
  不对称是对称的反面,但并不意味着不对称就缺少平衡与和谐. 不对称的设计技术可以在视觉上引人入胜,为内容创建出重要程度不同的差异性. 这篇文章分享一组鼓舞人心的例子,介绍了不对称设计在网页中的使用技巧. 10套精美的免费网站后台管理系统模板. 35个立体动感的视差滚动效果网站作品. 13套非常精美 Web 应用程序图标素材.