WWW 网页视觉传达设计的原则

一:关于整体版面部份

﹝一﹞关于标题的呈现方式

  1. 标题宜以包括图像及文字的综合设计表现之。

  2. 台湾地区使用者喜欢色彩较丰富的标题。

  3. 标题宜居于版面中间位置,并以长方形方式呈现。

  4. 标题宜突显于背景之上。

﹝图一﹞:YAHOO 全球信息网
﹝二﹞关于版面的留白的呈现方式

  1. 版面留白量以 50% 为宜。

2. 背景色彩纯度过高会造成版面空白量感觉消失。 

﹝图二﹞:Adobe 公司的页面
﹝三﹞关于连结点的呈现方式

  1. 横列式较长的文字连结点以单排向左对齐为宜。

  2. 横列式较短的文字连结点以双排位置居中,文字向左对齐为宜。

  3. 直列式图文连结点,个别间距宜加宽,以利区分。

  4. 连结点之前用图像或色球来指引或强调,能方便搜寻。

﹝图三﹞:US News & World Reports 全球信息网
﹝四﹞关于重要信息呈现方式

  1. 重要信息应置于标题之后,首页连结点或内文之前。

  2. 重要信息可以运用置于前端明显或突出的图像强调。

  3. 重要信息可以运用不同颜色区块强调。

﹝五﹞关于讯息的连贯性

  1. 保持固定的版式,求取统一感,方便阅读与搜寻。

二:关于背景使用部份

﹝一﹞背景与主体的关系

  1. 背景与主体明度对比为 3:1 到 5:1 之间为宜。

﹝二﹞背景的色彩

  1. 淡色系列的背景有助于整体和谐。

﹝三﹞背景的材质机能

1. 淡色材质背景为佳,能与主题分离之浅色标志或文字背景亦可。

﹝图四﹞:A-List-Apart.com
三:关于色彩使用部份

﹝一﹞关于纯色的使用

  1. 同版面不宜超过七种纯色。

﹝二﹞关于整体色彩的表现

  1. 做到和谐并能达到视觉平衡。

﹝三﹞关于色彩的对比

  1. 避免类似色调,以致不同类信息之间的区隔不明显。

﹝四﹞关于机能性色彩区块的应用

  1. 运用小色球或色块能造成集群化的效果,以协助视觉搜寻。

﹝图五﹞:颜色大胆的ROUGHCUT.COM网站
四:关于内文设计部份

﹝一﹞关于每一行文字的长度

  1. 最好 20 到 30 个中文字﹝40 到 60 个英文字母﹞

﹝二﹞关于行距与字距

1. 行距与字距已由软件内定。设计者能以段落与段落间空行,及首行 缩排方式以辅助阅读。

﹝三﹞关于字体大小

  1. 标题以 H1 到 H3 为佳,内文 font size = 3 到 4 级为佳。

﹝四﹞关于同版面字型

  1. 三种字型以内。

﹝五﹞关于文字的颜色

  1. 三种颜色以内。

﹝六﹞关于已选过的文字

  1. 在颜色上要能与未选过之文字连结点辨别,也要与背景区分。

﹝七﹞关于内文的排列

  1. 向左对齐并与左边界保持适当距离。可以善用表格填入文字以达此 效果。

﹝八﹞关于表格或清单内的字

  1. 运用相同字型与字体大小,以利辨别。

五:关于图形设计部份

﹝一﹞关于图形的主体

  1. 清晰可见,去除不必要噪声。

﹝二﹞关于图形的意义

  1. 简单明了。

﹝三﹞关于图形内文字的本身

  1. 清楚容易视认。

﹝四﹞关于图形内文字的装饰

1. 没有过分花俏装饰,造成文字辨识不易。

(0)

相关推荐

  • WWW 网页视觉传达设计的原则

    一:关于整体版面部份 ﹝一﹞关于标题的呈现方式 1. 标题宜以包括图像及文字的综合设计表现之. 2. 台湾地区使用者喜欢色彩较丰富的标题. 3. 标题宜居于版面中间位置,并以长方形方式呈现. 4. 标题宜突显于背景之上. ﹝图一﹞:YAHOO 全球信息网﹝二﹞关于版面的留白的呈现方式 1. 版面留白量以 50% 为宜. 2. 背景色彩纯度过高会造成版面空白量感觉消失. ﹝图二﹞:Adobe 公司的页面﹝三﹞关于连结点的呈现方式 1. 横列式较长的文字连结点以单排向左对齐为宜. 2. 横列式较短的

  • c++ 面向对象设计五大原则

    面向对象设计(OOD)是面向对象编程(OOP)必不可少的一个环节,只有好的设计,才能保障程序的质量.面向对象设计的主要任务就是类的设计,不少面向对象(OO)的先驱和前辈已经提出了很多关于类的设计原则,用于指导OOP,其中就包括类设计的五项基本原则. 1.单一职责原则(Single Resposibility Principle,SRP) 专注是一个人的优良品质,同样,单一职责也是一个类的优良设计.单一职责的核心思想:一个类只做好一件事情. 单一职责原则可以看作是高内聚.低耦合在面向对象原则上的引

  • 网页布局设计的标准尺寸

    1.800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定. 2.1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条. 3.在ps里面做网页可以在800*600状态下显示全屏,页面的下方又不会出现滑动条,尺寸为740*560左右  4.在PS里做的图到了网上就不一样了,颜色等等方面,因为WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很

  • 从美的原则谈 WWW 网页上的艺术表现

    一:美的原则 什么是美呢? 美的事物应该具备什么条件呢? 我们根据人类美感的共通性可以定出十个美的原则:连续.渐变.对称.对比.比例.平衡.调和.律动.统一.完整. 在讨论美的原则之前,必须先了解「单位形」的意义.单位形是在相同或相似的形象组合中最基本的单位元素.单位形可以单独重复排列,或组成「单位形组合」,再以「单位形组合」为基础,作有规律的反复排列.下列图例说明以一个「单位形」配置构成八种「单位形组合」. 以一个「单位形」配置构成八种「单位形组合」图例 每一个「单位形组合」又可以重复以线状﹝

  • 网站制作之网页技巧

    相信众位网友在网上尽情冲浪时,一定会看到不少设计独特.创意新颖.页面诱人的个人网页,遇到这些网页你也一定会驻足停留.仔细欣赏一番,同时脑海中大概也会有一丝想要制作一个属于自己的个人主页的念头.如果你确实有这个想法,那就请你继续看完下面的内容,下面提供的网页设计技巧一定会使你大饱眼福,并让你在以后设计自己的主页过程中游刃有余.好了,说了这么多,还是让我们直接切入正题,和大家一起看看笔者今天带来了哪些网页制作技巧吧: 1.设计前要有筹划 设计主页也许并不是很困难.但这一工作与编制传统的宣传品一样,都

  • IOS中使用UIWebView 加载网页、文件、 html的方法

    UIWebView 是用来加载加载网页数据的一个框.UIWebView可以用来加载pdf word doc 等等文件 生成webview 有两种方法: 1.通过storyboard 拖拽 2.通过alloc init 来初始化 创建webview,下列文本中 _webView.dataDetectorTypes = UIDataDetectorTypeAll; 是识别webview中的类型,例如 当webview中有电话号码,点击号码就能直接打电话 - (UIWebView *)webView

  • 数据库设计技巧奉送了

    1. 设计数据库之前(需求分析阶段)     1) 理解客户需求,询问用户如何看待未来需求变化.让客户解释其需求,而且随着开发的继续,还要经常询问客户保证其需求仍然在开发的目的之中.     2) 了解企业业务可以在以后的开发阶段节约大量的时间.     3) 重视输入输出.     在定义数据库表和字段需求(输入)时,首先应检查现有的或者已经设计出的报表.查询和视图(输出)以决定为了支持这些输出哪些是必要的表和字段.     举例:假如客户需要一个报表按照邮政编码排序.分段和求和,你要保证其中

  • 数据库设计的折衷方法

    作项目分析,数据库设计是一个很重要也很难的问题, 完全按照范式有可能不符合用户需求,不利于编程, 看来是具体问题具体分析,数据库设计是范式和需求的折中. 在上学时,没觉得数据类型有多重要,现在发觉了解数据类型 的具体内容也是很重要的,可以知道不同数据库之间的兼容问题 该怎么处理. 数据库设计技巧: 第2 部分- 设计表和字段 1. 检查各种变化 我在设计数据库的时候会考虑到哪些数据字段将来可能会发生变更.比方说,姓氏就是如此(注 意是西方人的姓氏,比如女性结婚后从夫姓等).所以,在建立系统存储客

  • 提高网页的效率 Use YSlow to know why your web Slow第1/2页

    所以网页的效率绝对是最值得关注的方面.虽然我们在 <如何提高网页的效率(上篇)--提高网页效率的14条准则>提到了如何提高网页效率的14条准则,但是如何知道我们现在的网页的效率到底如何?到底处于怎样一个级别?又有哪些方面做的不够好,需要改进呢?也许,你会说,问一下用户不就知道了吗?但是相比感性比例占据太大的用户感受而言,理性的工具和数据更具有说服力.本篇就将向你介绍一款评测网页效率的工具--YSlow(why slow,这个名字起的太好了). yslow YSlow是由Yahoo开发者团队发布

  • CSS编辑工具Topstyle轻松打造网页风格

    本文特意为你找来了一款CSS编辑利器--Topstyle,利用它你能轻松做出更有风格的网页来! 精彩.漂亮是每一个设计者在制作网页时的不懈追求,而网页的精彩几乎都离不开CSS的强力"支撑":CSS是一种为超文本标签语言提供增强补充服务的技 术,可对每一个html的标签做精雕细刻的修饰.活用CSS,将会使网页更加生动活泼.不过,普通的网页编辑工具在CSS方面,表现难能让人满意:为了充 分发挥CSS潜能,设计出更加美丽的网页. 最新版本:3.11 文件大小:3836KB 软件性质:共享 使

随机推荐