- 浏览: 122768 次
- 性别:
- 来自: 上海
文章分类
最新评论
工作中,网页设计师经常会遇见这些状况:时间这么短又要出彩、又是要大气要有气氛、风格不明确很难把握、栏目这么多页面又这么长……
突然觉得束手无策,脑袋里一片空白,没想法了,怎么办?
下面简浅的归纳了几个快速让页面出彩的小技巧:
1.旋转法 – 将页面的主体或局部进行旋转
我们一般的页面版式都是方方正正,四平八稳,有点呆板。如果将局部或整体适当的旋转,打破稳定的构图,画面就会动感有趣一些。
对于上图,这种基调轻松活泼又恰好内容比较少的页面来说,主体整个旋转后,画面马上轻松活泼起来,看过现在这个画面,真是无法想象未旋转前的平淡。同时,相比大块的方形空白,不规则的余白也不会显得空洞。
上图,将背景旋转后,大面积的斜面产生了很强的速度感,赛车急速飞驰着,好像下一秒就要从电脑中冲出来一样,倾斜的大标题和旋转后的背景交叉配合,使画面整个都运动起来。这种方法可以应用到很多运动的主题上。
2.黄金分割法 – 灵活运用黄金比例分割的办法将页面“切”开
黄金比率被认为是最理想的矩形比例,在过去的文化遗产中也有很多这样的遗存。将这个比率应用到版式设计中,也能够设计出容易为用户所喜欢的构图。但不要被这些比例所束缚,很多是靠自己的感觉去应用。
上图,除去背景无非就是一个排版清晰的页面,将背景分割后,对比的色块使画面产生纵深感,页面的丰富性和视觉冲击力迅速增强。人物也好像着陆了一样,平稳的站在画面中。
上图,用反差强烈的色块进行分割,强调了版块的划分,即使有很多地方需要强调,也能让用户迅速清楚各版块的重点,不用像以往一样1、2、3…… 将内容依次竖排下来,鼠标都已经拖到第三屏了还没完没了,又没什么新鲜感。
3.曲线法 – 将曲线用于背景或版块分割,消除矩形分割的生硬感。
与直线相比,曲线具有圆润的特点,让人感觉轻松、愉悦。增强视觉感的同时也能够营造活跃的气氛。
上图中,大众的logo和焦点图中的机器人产品,全部由曲线组成,这种情况下,用曲线来分割背景和焦点就显得理所当然了,画面中曲线合理的运用也提高了层次感,机器人和红色标题都更突出。
仿照球的运动轨迹,贯穿着整个页面的曲线,将用户直观的带入了正在激烈进行的棒球比赛现场。看似随意,其实用曲线精当的将标题、焦点图和新闻等版块按重点进行了不同比例的分割。
4.借用法 – 借用现实中的东西,将实物抽象化,提炼出大形轮廓用于背景
现实中的东西也可以应用到网页设计中?当然可以,只要想的到。
如图,信封是我们生活中常用的东西,如此生活化的东西借用到网页上,展开在用户面前,好像邮寄给您的信一样,立马让人眼前一亮,亲切感油然而生。作为游戏活动的通告页,用白色的信纸来盛放主体内容也再合适不过。
上图,将赛车在赛道上疾驰的场面置放到页面上作为背景,虚化的大城市,放大的赛道,飞奔的赛车……就像此刻坐在电脑前玩赛车,左手正紧紧按着W、A、S、D键一样。让用户身临其境,完全抓住了对方眼球。
以此类推,生活中很多东西都可以借用,例如:写满粉笔字的黑板、电脑的屏幕、写日记的本子、老古董的地图,空旷的足球场……
5.三角拼贴法 – 像做手工一样,将裁剪好的三角形打乱,重新拼贴
不同的几何形状有不同的性格,圆形是活泼可爱的,方形是平稳整齐的,三角形就是尖锐动感的。
三角形的不平衡性及其尖锐性能够增强视觉上的刺激,快速吸引用户,可以用于科技和时尚这种风格同样比较“锋利”的网页。
上图,将同色系小三角形均匀的拼贴起来,马上就营造出一种钻石璀璨般的时尚感。但实践的时候要注意加减法,不能乱堆一通,点到为止即可。
上图,用艳丽的三角形对页面进行划分、拼贴。大小的组合,色块的对比,能够带给用户强烈的视觉冲击力。在搭配的时候,注意主次,以一个大的形状为主,给内容摆放留下足够空间,与其他辅助的小形状相区别。
6.色块分割法 – 将各版块用不同颜色来区别
经常面对需求方这里是重点、那也是重点、那那那也挺重要,统统需要突出的要求,对于主题比较明快的页面 可以考虑将版块用不同颜色来区别,通过色块来强化页面版式和布局,难度较大的是在色彩搭配上要取得平衡。
上图,版式在页面都以块来体现,没有什么效果,为了突出重点,在重要区域选择了饱和度较高的红黄绿三个颜色,产生明确的视觉中心,让用户能够按照我们希望的那样阅读下去。但对比色调容易造成不和谐,红黄绿之间加上灰底的中性色来调和一下就显得不会突兀了。
当使用四到五种纯色进行搭配的时候,注意只要色相、纯度、明度三个属性中有一个属性是基本相同或者接近,搭配起来基本上都不会觉得太牵强。
发表评论
-
什么是完美
2013-05-06 10:58 639什么是完美? 准确满足需求或适应情况需要;这意味着,无论怎 ... -
设计沟通的七条经验
2013-04-07 14:27 736经常有新入职的同学, ... -
字体设计是网页设计的根本
2012-08-07 09:37 657你已寻找这个问题多 ... -
[iA 旧文] 网页设计工作的 95% 在于字体排印
2012-08-07 09:36 662网上 95% 的信息是文字。从逻辑上讲,网页设计师自然应 ... -
A/B测试得出的一些有意思的数据和小tips
2012-07-30 16:16 0原文:The Ultimate Guide To A ... -
伟大的交互界面都来自…… (转)
2012-07-30 15:27 666原文链接:http://apple4.us ... -
付款流程的11个最基本的guidelines
2012-07-30 15:19 706又是好文一篇,虽然说 ... -
Web可用性设计的247条指导方针
2012-07-30 15:13 876原文链接:http://www.userfocus.co ... -
卓越的Web软件具有下列品质
2012-07-24 11:35 599卓越的Web软件具有下列品质: ---- 确定产 ... -
Alibaba国际站首页改版小结
2012-07-18 12:40 555阿里巴巴国际站(Alibaba.com)是全球最大、最有影响力 ... -
逻辑路径与网格系统
2012-07-17 16:00 0栅格系统: 创建逻辑路径 除了要精确的遵从网格 ... -
用户体验的五层–概念篇
2012-07-16 15:06 750在找实习的过程中,算是有缘吧,交互设计走进了我的视野,不 ... -
美国广告设计实用教程--作品评价指南
2012-05-10 13:09 735最近在看High哥买的《美国广告设计实用教程》, 里面有 ... -
7个开发人员和设计师适用的WEB应用资源
2012-05-08 22:45 510对于开发人员和设计师来说,很多项目和设计都需要有前期的规 ... -
27个网页设计中色彩的使用
2012-05-08 22:38 655互联网上现在有着数不清的网站,公司的、个人的、政府的、公 ... -
30网页设计美丽纹理的启示
2012-05-08 22:37 563每个网站都会给人一种感觉。那种感觉可能是一见倾心,也可能 ... -
世界500强网站
2012-05-03 10:48 1291世界500强网站大多设计精美、大气简洁,视觉很不错,与大家一起 ... -
windows8 UI,Metro 设计风格浅析
2012-04-23 15:31 1048微软称要通过Windows ... -
Android4.0手机界面与交互设计原则
2012-04-23 15:26 675译者按:在iOS HIG已经 ... -
2012年手机程序设计趋势
2012-04-23 15:23 7782011年涌现出诸多优秀设计,随着操作系统的更新和硬 ...
相关推荐
工作中,网页设计师经常会遇见这些状况:时间这么短又要出彩、又是要大气要有气氛、风格不明确很难把握、栏目这么多页面又这么长…… 突然觉得束手无策,脑袋里一片空白,没想法了,怎么办? 下面简浅的归纳了几个...
施工组织设计应急预案.doc
【消防应急照明设计规范】消防应急照明最新规范.pdf
空姐招聘面试:应急减压小技巧-3页.pdf
小程序源码 急救应急处理 (代码源)小程序源码 急救应急处理 (代码源)小程序源码 急救应急处理 (代码源)小程序源码 急救应急处理 (代码源)小程序源码 急救应急处理 (代码源)小程序源码 急救应急处理 (代码源)小程序...
智能消防应急照明和疏散指示系统工程施工组织设计方案.pdf
11 2.3 信息量分析和预测 13 2.3.1 数据处理量 13 2.3.2 数据存储量 13 2.3.3 传输流量 13 2.4 互联互通需求分析 14 第三章 应急数据库设计 16 3.1 应急数据库系建设原则 16 3.1.1 应急资源的空间化 17 3.1.2 高可靠...
施工组织设计专项方案之应急预案.doc
6 应急车辆改装及结构设计 14 6.1 车辆选型 14 6.2 车辆改装布局 16 6.3 电源性能 17 6.4 工作舱改装 17 6.5 云台 17 6.6 升降杆 17 6.7 警示系统 18 6.8 秘书台 18 6.9 车内走线 18 6.10 整车喷漆 18 7 项目组织...
提出了一种煤矿应急通信保障系统的设计方案。该系统的核心即应急救援软件平台通过中继网关、专用转换器等设备整合井下扩播电话机、小灵通、WiFi手机、调度电话机、井下广播系统,从而实现各通信系统间的互联互通;该...
实现所辖企业应急系统实时接入、生产数据实时监控、应急指挥调度等功能,为决策层提供数据驾驶舱管理模式,公司可准确及时地掌握所辖作业区的生产调度、应急资源管理、重大危险源信息、安全环保等信息,以便及时发现...
应急响应技巧(1).pdf
应急资源管理系统数据库设计文档.pdf
数字化预案,高校学生安全系统设计,以及思想、思路等。
应急小知识,答题类 应急小知识程序,根据应急急救知识设置的答题类小程序
机械产品与装备的人机结合应急设计,滕弘飞,张宝,人为或自然灾害的非正常情况下的机械产品或装备的应急设计研究,对于抗灾、减灾、救灾具有重要意义,但是目前有关文献尚少。研究
一、精细化工公司生产安全事故应急预案() 二、液化气站生产安全事故应急预案() 三、加油站火灾事故应急预案() 四、非煤矿山企业事故应急预案() 五、铁矿公司尾矿库防汛应急预案() 六、服装加工...
基于STM32的电梯应急电源设计.pdf
业务应急与运维保障方案设计.pdf业务应急与运维保障方案设计.pdf业务应急与运维保障方案设计.pdf业务应急与运维保障方案设计.pdf业务应急与运维保障方案设计.pdf业务应急与运维保障方案设计.pdf业务应急与运维保障...