网页界面设计要点-1-视觉篇

`2;lakdfjaldfjad中文||苦苦
劳而无功><adfadad><功大于过><过犹不及><及格就好><^^)(*&)(*&
界面布局 色彩搭配 分隔类型
视觉篇\3-分隔类型\分隔中常见问题及建议解决方案1
• 空白分隔：空白间距过小（或空白间距与内容本身的空白间距接近），达不到 分隔的效果
字描述重要，还是图表重要？是否需要先登陆？…… – 想清楚系统需要如何引导客户行为：希望客户关注什么位置？希望在哪儿停留的时间长？
希望哪里可以简单再简单？…… – …………
尼尔森十大 可用性原则
• 状态可见原则 • 环境贴切原则 • 撤消重做原则
• 一致性原则 • 防错原则 • 易取原则
• 易扫原则 • 人性化帮助原则 • 容错原则 • 灵活高效原则
Thank You!
十大可用性原则具体内容请百度详细了解
界面布局 色彩搭配 分隔类型
视觉篇\1-界面布局\总述2
界面布局指的是网页的整体结构分布。清晰有效的布局将大大提升网站的可阅读性和整体视觉效果。
一栏式
两栏式
三栏式
界面布局 色彩搭配 分隔类型
视觉篇\1-界面布局\一栏式布局
• 一栏式布局的页面结构简单、视觉流清晰， 便于用户快速定位，但由于页面的排版方式的
• 两栏式布局主要有三种类型：左窄右宽式、左宽 右窄式、左右均等式
左窄右宽式
右窄左宽式
左右均等式
界面布局 色彩搭配 分隔类型
视觉篇\1-界面布局\三栏式布局
• 三栏式的布局方式对于内容 的排版更加紧凑，可以更 加充分地运用网站的空间， 尽量多地显示出信息内容， 增加信息的密集性，常见于 信息量非常丰富的网站， 如门户类网站首页。
界面布局 色彩搭配 分隔类型
视觉篇\3-分隔类型\ 分隔中常见问题及建议解决方案2
– 色块分隔：
问题现象
颜色过多，界面杂乱
建议解决方案
同一个界面，尽量不要超过四种颜色，尽量采用相近色进行 配置。若有需要突出、强调或强分隔的时候，可以采用不同 色系，但需要控制在小范围内，并且要注意所分隔的位置
配色方案差
界面布局 色彩搭配 分隔类型
视觉篇\1-界面布局\布局中常见问题
• 使用者不能清晰的识别系统各功能分布：
– 感觉混乱、不清晰\找不到业务入口\使用不舒服\颜色不舒服等
V
案
S
例
讨
V
论
S
界面布局 色彩搭配 分隔类型
视觉篇\1-界面布局\布局效果示意\网页眼动效果案例
• 理解F型（金三角）理论并不绝对，网站的布局，影响使用者习惯
界面布局 色彩搭配 分隔类型
界面布视局 觉篇\1-界面布局\布局效果示意\网页布局案例讨论
界面布局 色彩搭配 分隔类型
视觉篇\2-色彩搭配\案例分析
界面布局 色彩搭配 分隔类型
视觉篇\2-色彩搭配\主要色彩简介
颜色 颜色示意
红 橙 黄 绿 蓝 紫 黑 白
代表含义
联想
注意点
兴奋、激情、奔放、欢乐
空白分隔
线条分隔
色块分隔
界面布局 色彩搭配 分隔类型
视觉篇\3-分隔类型\常用分隔类型2
背景分隔
字型\图形\位置等分隔
字 型
/
ห้องสมุดไป่ตู้
图 形
位 置
综合分隔
符号 分隔
[石洋于：2013-08-15] [石洋于：2013-08-15] [石洋于：2013-08-15]
190022345563563||134716309481374;kdsf||
• 除首页外，一栏式布局还适用于目的性单一、较为
独立的二级页面或者更深层次页面，如注册表单 页面，用户只聚焦在表单填写上，因此除表单外
只需提供返回首页及少数重要入口即可。
• 由于其排版方式和信息量的局限性，采用一栏式布 局的大型网站较少。
界面布局 色彩搭配 分隔类型
视觉篇\1-界面布局\两栏式布局
天空、海洋
高贵、优雅、浪漫、神秘、公正、
真相
眼睛对紫色分辨力弱、容易引发 疲劳
严肃、恐怖、冷静
非彩色
明亮、简单、干静、纯真、和平
非彩色，很少单独使用，白色背 影对内容干扰最小
界面布局 色彩搭配 分隔类型
视觉篇\2-色彩搭配\配色方案确定
根据需求确定系统基础色调，并先设定好相应的配色方案
主 色
中色
补 色
网页界面设计要点-1-视觉篇
BIZ BI 魏 凌 2013年9月
文档修订摘要
日期 2013-08-14
修订号
V1.0
初稿
描述
修订人 魏凌
审阅人 审阅日期
目
录
• 视觉篇
– 1-界面布局 – 2-色彩搭配 – 3-分隔类型
• 功能篇
– 导航 – 条件选择 – 提示框 – 表单 – 表格 – 图形 – 按钮
• 两栏式的排版是最常见的布局方式之一，它中和 了一栏式和三栏式布局的优缺点：相对一栏式 布局，它可以容纳更多内容，相对三栏式布 局来讲，信息不至于过度拥挤和零乱，但它不 具备一栏式布局的视觉冲击力和三栏式的超大内 容量的优点。
• 这种形式的布局通常采用左边是导航（以树状 导航或者一系列文字链接的形式出现），右边 是内容的设置。此时左边不适宜放次要信息或 者广告，否则会过度干扰用户浏览主要内容。用 户的浏览习惯通常是从左到右、从上到下，因此 这类布局的页面更符合理性的操作流程，能够引 导用户通过导航查找内容，使操作更具有可控性， 适用于内容丰富、导航分类清晰的网站
配比
界面布局 色彩搭配 分隔类型
视觉篇\2-色彩搭配\一些配色方案示意
界面布局 色彩搭配 分隔类型
视觉篇\2-色彩搭配\部分银行网页案例分析
界面布局 色彩搭配 分隔类型
视觉篇\3-分隔类型\常用分隔类型1
• 页面中不同内容之间必须有清晰的分隔，可以清晰的识别出是不同内容区域。
– 通常采用以下分隔类型：空白分隔、线条分隔、色块分隔、背景分隔、形状分隔、符号分 隔、综合分隔等
背景色过于显眼，刺眼或暄宾夺主
一般情况下，系统背景色不建议用过于强烈的颜色（特殊情况下 除外，如春节庆贺，或一些主题展示等）同时，背景与展示不适 宜反差太大。
界面布局 色彩搭配 分隔类型
视觉篇\3-分隔类型\ 分隔中常见问题及建议解决方案3
• 字型、位置、符号分隔等：
– 这几种分隔类型在一般的网页上用的并不多，比较常用的是标题字体放大，加粗等，如：
界面布局 色彩搭配 分隔类型
视觉篇\1-界面布局\总述1
• 在进行界面布局设计之前，我们需要想清楚一些事情：
– 想清楚系统是什么类型：销售（大众、小众、专业）、服务、专业型（金融、电信、军事 等等）……
– 想清楚使用客户类型：大众、男性、游戏族、体育迷、运维岗、分析人员…… – 想清楚系统要展现的内容如何排序：信息重要还是菜单重要？导航重要还是搜索重要？文
旗帜、激情、危险、 对人眼刺激大，不适宜大面积使 火灾、竞争、侵略等 用
激情、欢乐、健康
独特、辨识度高
对人眼刺激大，容易造成疲劳
轻快、明亮、乐观
黄金、缎带、高贵、 黄色系颜色多，差异大，需要区
富有
别使用(如金黄、土黄的差别)
平和、恬静、谦虚、智慧、生命 富饶、康复、生态
冷静、沉思、智慧、自信、生命、 神秘
限制，只适用于信息量小、目的比较集中或者相对 比较独立的网站，因此常用于小型网站首页以及注 册表单页面等。
• 采用一栏式布局的首页优点在于信息展示集中、 重点突出。通常都会通过大幅的精美图片或者动
态Flash来实现强烈的视觉冲击力，给用户留下深 刻的印象，提升品牌效应，留住用户进一步浏览。 但是，这类首页的信息展现量相对有限，因此需要 在首页中添加导航或者重要的入口链接等，起到入 口和信息分流的作用。
“ 新闻 体育 娱乐 财经 ” 。还有一些颜色、字体的，如一些热词图等,如：
“
” 这些也可以有效的区别，但是需要注意字体、字形、大小、颜色
不能过于接近，否则区分不清晰。
• 综合分隔：
• 分隔类型是灵活使用的，很难 说组合起来好或不好，也很难说简洁的，或是繁复的就是好 或不好，一切都需要和网页的主题、目的、内容、使用者习惯等相结合，所以元素都一样， 如何能综合应用成高手，只能自己修炼了。
• 线条分隔：
问题现象
建议解决方案
线条与背景色相近，看不清楚
采用色差更大一些的相近色，或非互补色的其它颜色
线条与背景色色差过大，不协调 线条过粗过或细，主次表达不清
一般情况下，互补色不建议在严肃专业的页面中使用，若使 用，需要控制线条的粗细，或是调整背景的色调或着色面积
一般情况下：范围大的、模块重要的，在不破坏界面平衡 下，可以用更粗的线条，注意线条粗细反差不要太大
• 但是内容量过多会造成页面 上信息的拥挤，用户很难找 到所需要的信息，增加了用 户查找到所需要内容的时 间，降低了用户对网站内容 的可控性。
中间宽、两边窄
两栏宽、一栏窄
• 由于屏幕的限制，三栏式布局都相对类似，区别主要是比例上的差异。常见的包括中间宽、两边窄或者两栏宽、 一栏窄等。第一种方式将主要内容放在中间栏，边上的两栏放置导航链接或者次要内容；第二种方式将两栏放 置重要内容，另一栏放置次要内容。
确定系统基础色调，并先设定好相应的配色方案
主 色
中色
配比
补 色
界面布局 色彩搭配 分隔类型
视觉篇\3-分隔类型\ 分隔中常见问题及建议解决方案3
• 背景分隔：
问题现象
背景与展现内容颜色太相近，不易区分
建议解决方案
背景色与展现内容配色尽量差一个色阶（特别提醒：配色最好考虑 不同展示环境，如：光强弱、打印成黑白色等），或是展现内容用 立体、阴影、线条等加以标识，进行区分。