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

《网页界面设计要点-1-视觉篇.pdf》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网页界面设计要点-1-视觉篇BIZBI魏凌2013年9月文档修订摘要日期修订号描述修订人审阅人审阅日期2013-08-14V1.0初稿魏凌目录•视觉篇–1-界面布局–2-色彩搭配–3-分隔类型•功能篇–导航–条件选择–提示框–表单–表格–图形–按钮界面布局色彩搭配分隔类型视觉篇1-界面布局总述1•在进行界面布局设计之前，我们需要想清楚一些事情：–想清楚系统是什么类型：销售（大众、小众、专业）、服务、专业型（金融、电信、军事等等）……–想清楚使用客户类型：大众、男性、游戏族、体育迷、运维岗、分析人员……–想清楚系统要展现的内容如何排序：信息重要还是菜单重要？导航重要还是

2、搜索重要？文字描述重要，还是图表重要？是否需要先登陆？……–想清楚系统需要如何引导客户行为：希望客户关注什么位置？希望在哪儿停留的时间长？希望哪里可以简单再简单？……–…………尼尔森十大•状态可见原则•一致性原则•易扫原则•人性化帮助原则•环境贴切原则•防错原则•容错原则•灵活高效原则可用性原则•撤消重做原则•易取原则十大可用性原则具体内容请百度详细了解界面布局色彩搭配分隔类型视觉篇1-界面布局总述2界面布局指的是网页的整体结构分布。清晰有效的布局将大大提升网站的可阅读性和整体视觉效果。一栏式两栏式三栏式界面布局色彩搭配分隔类型视觉篇1-界面布局一栏式布局•一栏式

3、布局的页面结构简单、视觉流清晰，便于用户快速定位，但由于页面的排版方式的限制，只适用于信息量小、目的比较集中或者相对比较独立的网站，因此常用于小型网站首页以及注册表单页面等。•采用一栏式布局的首页优点在于信息展示集中、重点突出。通常都会通过大幅的精美图片或者动态Flash来实现强烈的视觉冲击力，给用户留下深刻的印象，提升品牌效应，留住用户进一步浏览。但是，这类首页的信息展现量相对有限，因此需要在首页中添加导航或者重要的入口链接等，起到入口和信息分流的作用。•除首页外，一栏式布局还适用于目的性单一、较为独立的二级页面或者更深层次页面，如注册表单页面，用户只聚焦在表单填写上，

4、因此除表单外只需提供返回首页及少数重要入口即可。•由于其排版方式和信息量的局限性，采用一栏式布局的大型网站较少。界面布局色彩搭配分隔类型视觉篇1-界面布局两栏式布局左窄右宽式右窄左宽式•两栏式的排版是最常见的布局方式之一，它中和了一栏式和三栏式布局的优缺点：相对一栏式布局，它可以容纳更多内容，相对三栏式布局来讲，信息不至于过度拥挤和零乱，但它不具备一栏式布局的视觉冲击力和三栏式的超大内容量的优点。•这种形式的布局通常采用左边是导航（以树状导航或者一系列文字链接的形式出现），右边是内容的设置。此时左边不适宜放次要信息或左右均等式者广告，否则会过度干扰用户浏览主要内容。用

5、户的浏览习惯通常是从左到右、从上到下，因此这类布局的页面更符合理性的操作流程，能够引导用户通过导航查找内容，使操作更具有可控性，适用于内容丰富、导航分类清晰的网站•两栏式布局主要有三种类型：左窄右宽式、左宽右窄式、左右均等式界面布局色彩搭配分隔类型视觉篇1-界面布局三栏式布局•三栏式的布局方式对于内容的排版更加紧凑，可以更加充分地运用网站的空间，尽量多地显示出信息内容，增加信息的密集性，常见于信息量非常丰富的网站，如门户类网站首页。•但是内容量过多会造成页面上信息的拥挤，用户很难找到所需要的信息，增加了用户查找到所需要内容的时间，降低了用户对网站内容的可控性。中间宽、

6、两边窄两栏宽、一栏窄•由于屏幕的限制，三栏式布局都相对类似，区别主要是比例上的差异。常见的包括中间宽、两边窄或者两栏宽、一栏窄等。第一种方式将主要内容放在中间栏，边上的两栏放置导航链接或者次要内容；第二种方式将两栏放置重要内容，另一栏放置次要内容。界面布局色彩搭配分隔类型视觉篇1-界面布局布局中常见问题•使用者不能清晰的识别系统各功能分布：–感觉混乱、不清晰找不到业务入口使用不舒服颜色不舒服等V案S例讨V论S界面布局色彩搭配分隔类型视觉篇1-界面布局布局效果示意网页眼动效果案例•理解F型（金三角）理论并不绝对，网站的布局，影响使用者习惯界面布局色彩搭配分隔

7、类型界面布局视觉篇1-界面布局布局效果示意网页布局案例讨论界面布局色彩搭配分隔类型视觉篇2-色彩搭配案例分析界面布局色彩搭配分隔类型视觉篇2-色彩搭配主要色彩简介颜色颜色示意代表含义联想注意点旗帜、激情、危险、对人眼刺激大，不适宜大面积使红兴奋、激情、奔放、欢乐火灾、竞争、侵略等用橙激情、欢乐、健康独特、辨识度高对人眼刺激大，容易造成疲劳黄金、缎带、高贵、黄色系颜色多，差异大，需要区黄轻快、明亮、乐观富有别使用(如金黄、土黄的差别)绿平和、恬静、谦虚、智慧、生命富饶、康复、生态冷静、沉思、智慧、自信、生命、蓝天空