`

网页设计应急小技巧

 
阅读更多

工作中,网页设计师经常会遇见这些状况:时间这么短又要出彩、又是要大气要有气氛、风格不明确很难把握、栏目这么多页面又这么长……

突然觉得束手无策,脑袋里一片空白,没想法了,怎么办?
下面简浅的归纳了几个快速让页面出彩的小技巧:

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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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

分享到:
评论

相关推荐

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

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

    应急管理系统平台方案设计.doc

    应急管理系统平台方案设计是针对现代社会日益频发的突发公共事件,旨在提高应对能力与效率的综合性解决方案。该平台的建设旨在整合各类应急资源,优化应急响应流程,减少灾害带来的经济损失和人员伤亡,确保社会公共...

    【消防应急照明设计规范】消防应急照明最新规范.pdf

    消防应急照明设计规范 消防应急照明是现代建筑安全保障的关键设施之一,在火灾发生时,能够快速撤离和开展救援工作。消防应急照明可以分为火灾应急照明和非火灾应急照明两种,前者是指在火灾发生时,保障人员迅速...

    施工组织设计应急预案.doc

    施工组织设计应急预案.doc

    应急指挥车辆整体设计方案.doc

    应急指挥车辆整体设计方案是针对现代应急管理和灾害应对需求而提出的,旨在快速建立现场指挥中心,高效有序地组织和调度应急响应。这样的车辆不仅是一个移动的通讯中心,还集成了多种功能,如计算机网络、监控、数据...

    智能消防应急照明和疏散指示系统工程施工组织设计方案.pdf

    智能消防应急照明和疏散指示系统工程施工组织设计方案 本文档介绍了智能消防应急照明和疏散指示系统的施工组织设计方案,旨在提供一个安全、可靠的疏散系统解决方案,适用于大型公共建筑物及人员密集场所。 智能...

    应急预案论文设计

    ### 高校突发事件应急预案设计与运行机制:构建和谐校园的关键 #### 重要性与背景 在当前高等教育的大背景下,高校不仅是知识传授与学术研究的中心,更是社会变革与青年成长的重要阵地。随着高等教育大众化的推进...

    小程序源码 急救应急处理 (代码源)

    小程序源码 急救应急处理 (代码源)小程序源码 急救应急处理 (代码源)小程序源码 急救应急处理 (代码源)小程序源码 急救应急处理 (代码源)小程序源码 急救应急处理 (代码源)小程序源码 急救应急处理 (代码源)小程序...

    急救应急处理_应急知识小程序_

    在设计上,"应急小知识程序"可能包含以下几个主要功能模块: 1. **知识库**:提供丰富的急救和应急处理知识,包括心肺复苏、止血包扎、烧伤烫伤处理、骨折固定等常见紧急情况的应对方法。 2. **答题模式**:通过...

    基于微信小程序的应急指挥后勤管理平台源码+数据库(毕业设计).zip

    基于微信小程序的应急指挥后勤管理平台源码+数据库(毕业设计).zip 微信小程序毕业设计,微信小程序课程设计,基于微信小程序开发的,含有代码注释,新手也可看懂。可作为毕业设计、期末大作业、课程设计、高分必看...

    应急指挥中心系统建设项目设计方案.doc

    【应急指挥中心系统建设项目设计方案】 应急指挥中心是企业在面对突发情况时进行快速响应和有效管理的核心机构,其目的是实现统一指挥、快速反应和高效运作。本设计方案针对xx有限公司的应急指挥中心,旨在构建一个...

    基于STM32的电梯应急电源设计.pdf

    根据提供的文件信息,本文将详细介绍基于STM32微控制器的电梯应急电源设计的关键知识点。 首先,电梯应急电源的设计目的是确保在电梯发生故障或电源中断的情况下,电梯能够维持稳定运行,避免乘客被困。这类设备...

    施工组织设计专项方案之应急预案.doc

    《施工组织设计专项方案之应急预案》是对建筑工程施工过程中可能遇到的各种紧急情况的预防与应对措施。这份文档旨在确保在突发灾难或紧急事件时,能够有序、有效地减少财产损失、人员伤亡以及保护工程成果。以下是...

    空姐招聘面试:应急减压小技巧-3页.pdf

    【空姐招聘面试:应急减压小技巧】 面试是求职过程中至关重要的环节,尤其是对于空姐这样的服务行业,面试不仅仅是对个人技能和专业知识的考察,更着重于评估应聘者的综合素质和应对压力的能力。以下是针对空姐招聘...

    2021年基础软件设计服务行业生产安全事故应急预案.docx

    基础软件设计服务行业生产安全事故应急预案是一项旨在预防和应对突发性安全事故的重要文件,旨在保障行业内的组织、指挥协调以及现场处理救援工作的迅速、科学和有序开展。该预案的编制单位是基础软件设计服务行业,...

    矿井应急广播系统的研究与设计

    在矿井应急广播系统的设计中,本质安全的理念应当贯穿始终,从硬件设备的选择到系统架构的规划,都需要考虑到本质安全的要求,从而在根本上减少故障发生的可能性,提高系统的整体安全性。 总结来说,矿井应急广播...

Global site tag (gtag.js) - Google Analytics