网页设计技巧剖析:专题页面设计传情达意

文章描述:推荐:如何设计“传情达意”的专题头图。

xiaoning:相信大家在平时的工作中,经常会碰到专题的设计吧!而且大部分是时间紧任务重。
专题不同于网站的常规页面,常规页面更侧重于内容的阅读及人机的交互,因此可读性、可用性是第一位的,装饰性次之。

而专题正好相反,它更侧重于通过气氛的渲染来”传情达意”。首屏的头图在气氛的渲染中尤为重要。

我们知道了头图在专题设计中的重要性,那构成头图的主要元素又有哪些呢?它们有 文字、背景、色彩、布局这四种主要元素。下面就通过一些实例的分享,指出头图设计中的一些要点,避免一些硬伤。


电脑字体

现在人们的审美在逐渐趋向于简洁化,在电脑字体的选择上要力求简洁、大方,识别性好。以黑体类、宋体类为主,跟据主题含意可以有倾斜、大小的变化。字色与背景色要拉开对比,像”万达广场”专题的金色字很好的传递了高端、商务、权威的信息。再如”镜彩一夏”的渐变色,使人感受到夏日的绚丽多彩。

设计字体

前面提到有些字体会有版权的问题,那我们可以动手设计字体,这样可以使标题更具艺术性和专属性,使主题诉求更加明确。例如”疯降天团”的字体设计,加入了闪电的元素,四个字有机的结合一体,突显了降价力度的疯狂,促进了受众购买欲望。

书法字体

书法是中华文化的体现,在设计与文化、历史有关的专题时可以使用,行云流水般的书法体会为专题增色不少。例如”万水千山粽是情”中把”粽”字放大,突显节日主题。字色上采用黑、棕、绿色来呼应粽叶和枣泥的色彩,使文字与画面完美的融为一体。

背景元素

背景包括底图、配图等元素,背景要很好的配合标题文字,但不要喧宾夺主。例如”如何破冰前行”中断裂的冰面背景很好配合了主题,加上红色小浮标配图,起到画龙点睛的作用。”国际十大新闻”的砖墙背景衬托了喷涂效果的文字。

色彩原则

1、同色系色彩:色相接近或同一色相不同明度的几种色彩。同色系色彩会营造出和谐统一的效果,如要增加一些变化可以在局部加入对比色。
2、对比色或互补色:视觉对比强烈的色彩容易营造生动活泼、 积极向上的效果,但是要注意把握,防止给人眼花缭乱的感觉。
3、巧妙运用过渡色:两种色彩的中间色、 单色中混入黑、 白、 灰的调和色都可以作为过渡色,运用过渡色可以将几种犯冲的色彩统一起来。
配色要尽量控制在三种色彩以内,背景色和前景色的对比度要大。

配色实例

在专题色彩的选择上要与主题诉求相一致,左侧3个专题头图为”两会”的专题,这种政治性专题重点是”又红又专”,所以红橙主色的选择不会出现任何硬伤,如果使用了暗色或冷色系就与主题的诉求相悖了。背景还可以配上国徽、天安门等标志元素,使气氛更加强烈。

头图布局

一般常见的布局有:国字型、左右框架型、倾斜型、不规则型等。
头图的布局没有一个固定的规范,以方便展示网页内容与美观和谐为选择标准,另外主体元素一定要突出。

以上是本人的一些浅显观点,只为抛砖引玉。
专题的设计形式千变万化,只要不犯一些硬伤,大可不必拘泥于一些固定形式,俗话说”尽信书不如无书”。
希望今后能看到大家更多更好的专题设计作品……

原文地址:ued.focus

时间: 2024-09-17 13:42:56

网页设计技巧剖析:专题页面设计传情达意的相关文章

网页设计技巧:特殊人群的设计关怀

文章描述:网页设计技巧:特殊人群的设计关怀.   2010年12月,Thomas应邀参加中国交互设计体验日大会,展开了一次主题为<特殊人群的设计关怀>的演讲.演讲主要介绍了在做产品设计时,公司对于特殊群体的一些考虑.以下是对这次演讲的现场记录: "盲人对QQ的依赖度非常高." 在正式演讲之前,想请大家看一段视频.大家可以看出这是个怎样的用户吗?是的,这是一位盲人.可能很多人会吃惊,盲人怎么可以使用QQ?其实盲人不光使用QQ,他们正在利用互联网的很多服务充实自己的生活.我们关

网页设计技巧:网站首页设计宽度和高度

文章描述:根据用户可见区域高度统计图及整体二八比例划分的原则,如果把首屏高度确定在710像素可以照顾到约80%的用户群体,小K建议:前端开发在做页面时可考虑把710 像素视为首屏区域高度,采用技术手段对首屏的表现进行优先加载可获得良好的用户体验度. 一个经验丰富的网页设计师在做网页原型设计或者视觉效果图时,首先必须要做的是标注清楚网站首屏的高度线,以便直观的看到网站首屏的高度,首屏可以显示的元素.那么,我们该如何来标注一个网页的首屏线那?笔者结合网上的一些谈论特整理如下: 首屏的高度直接跟客户端

谷歌Android UI设计技巧:优秀UI设计准则

本文原是Android的官方开发者博客的一份Android UI设计的幻灯片,51CTO的译者将这份教程5部分进行翻译整理,希望对Android开发者能有帮助.本文为<谷歌Android UI设计技巧>第二部分:优秀UI设计准则. 本文为<谷歌Android UI设计技巧>第二部分:优秀UI设计准则.

网页设计技巧总结:导航栏设计的三大要点

文章描述:在网页中设计导航菜单的三个原则(附案例). 导航菜单可能是网页设计中最重要的部分了.每个用户浏览网站时一定有所需,因此导航菜单能够帮助用户寻找信息.好的导航菜单像是导游,告诉用户网站是干什么的,内容分类有哪些,在哪里可以找到什么信息. 而且导航栏也是整体布局的重要组成. 总结一下,导航栏的重要性. 1. 浏览完Logo后,导航栏是用户第一个看到的组件.2. 导航栏的作用是引导用户.3. 导航栏的作用也类似于索引,快速帮助用户找到所需信息. 想让导航栏更加优雅.美丽.响应式么?看看导航栏

网页设计技巧:网页表单设计经验分享

文章描述:关于表单每个设计师都必须知道的10件事. 有很多设计糟糕的表单,不管你是否喜欢他们,表单都是必不可少的.Joe Leech(cxpartners负责用户体验的)将介绍其在表单设计上的一些经验. 估计没有什么比表单更让设计师出气了.表单不一定可以让(设计师)表现创意,还是可以?我们可能需要从做基本的层面,重新审视表单,理解表单--表单是用户和软件之间的对话. 忘掉切换啊,点击什么的,表单是我们数字设计师(我想应该是依赖计算机进行设计的设计人员)将面临的最富有的交互.下一次,你要对付一个表

网站商城专题页面设计:设计中的常见问题

文章描述:前几天内部就近期的商城专题进行了一些评估,讨论了一些常见的问题.跟大家分享一下. 课程简介前几天内部就近期的商城专题进行了一些评估,讨论了一些常见的问题.跟大家分享一下.课程内容 1 入口banner和专题头部要相呼应,不应有太大出入,可以选取相同的元素.背景等,保持视觉的延续性,以符合用户心理预期. 2 避免使用涉及到版权的字体,主标题如需使用,要对字体变形改造. 3 专题头部图片尽量控制在550px以内,以便保证在第一屏能显示出一部分商品,否则用户很可能误以为下面没有内容.腾讯刚刚

网页设计技巧之面包屑设计

What? 什么是面包屑 面包屑是作为辅助和补充的导航方式(secondary navigation scheme),它能让用户知道在网站或应用中所处的位置并能方便地回到原先的地点. 最常见的面包屑的样式是:横向的文字链接,由大于号">"分开,这个符号也暗示了它们的层级关系. [ 面包屑的分类] 1.基于用户所在的层级位置.(Location-based) 基于位置的面包屑用于告知用户在当前网站中所在的结构层级.用在具有多级导航(通常具有2级以上导航)的网站中. 2.基于产品的属

案例解析专题页面设计思路

专题页什么的我最喜欢了~为什么呢?你以为我会告诉你,主题页省时省力省金币吗 没错,事情就是这样的,啊哈哈~专题页做的各种嚣张各种浪啊~没有大汉在你的背后,那几天屏幕异常干净~吃饭都更香了~ 绿色的~ 蓝色的 紫色的 一天3个专题页,带切图的哦 ~哼哼哼~说到切图~ 这次就是红色的了,不知道为什么X总看了之后淫荡的笑了,难道这个页面看起来这么像姨妈巾呢...或者说是我的打开方式不对... 是的,这个星期小斌过上了幸福快乐的生活~ 不过,就在刚才

交互设计技巧:网站的标签设计要明晰有效

文章描述:交互设计实用指南系列(6) –标签明晰.有效. 导航标签彼此互斥.完全穷尽. 导航标签其实就是一种文字表达形式,我们用标签来代表网站上的各种分类信息.比如"联系我们"这个标签,代表的内容通常会包括公司名称.电话.地址.邮箱等信息.它可以是文字,也可以是图片.在英文里被称作"Label",并不同于我们常说的"tag"标签云图. 说简单一点,我们就是要为网站的信息做分类,并为它们起一个通俗易懂的名字.这其实是任何人都可以做的一件事情,所以在