网页设计的布局原理

左侧： 导航菜单 其他
网站主要内容
右侧： 友情链接 其他
用于主页设计 特点：页面容纳内容多，信息量大
页脚横条：版权信息+联系方式+其他
网页设计的常用布局
1. “国”字型布局
网页设计的常用布局
视觉优先级: 位置
33%
28%
规律：
左上部和中上部为 『最佳视域』
网站Logo、商品名、主题等重要信息放在最佳视域区
二级导航
内容二
导航 内容三
Banner
内容四
内容五 页脚横条：版权信息+联系方式+其他
网页设计的常用布局
5. 变化式布局:
(3)坏绕式布局
网页设计的常用布局
新兴流行布局：
1. 页面分割设计 2. 无边界设计 3. 模块化设计 4. 全屏式设计
网页设计的常用布局
1. 页面分割设计
网页设计的常用布局
视觉优先级－位置
56%
44%
摘自罗琦 宫晓东《网页界面设计艺术》
61% 39%
规律：
a、眼睛水平运动速度 > 垂直运动
b、上下关注度差别 > 左右关注度差别 c、体现并列关系，左右排列更合适 d、拉开差距，通过位置实现，上下排列
更容易达到目标
网页设计的常用布局
2. 无边界设计
网页设计的常用布局
3. 模块化设计
关于网页设计的布局
Something about web design
赵琰 2016
网页设计的常用布局
常用的设计布局分为：
1. “国”字型布局 2. “T”字型布局 3. 标题正文型布局 4. 左右框架布局 5. 变化布局
网页设计的常用布局
1. “国”字型布局
页头横条：网站Logo+导航栏+Banner广告
网页设计的常用布局
4. 全屏式设计
规律： 距离临近的信息关注度 > 距离远的信息关注度
谢谢观看！!
该文文档的版权为百度UE讲堂所有，如需转载请注明出处。!
23%
16%
摘自罗琦 宫晓东《网页界面设计艺术》
网页设计的常用布局
2. T型布局
页头横条：网站Logo+导航栏+Banner广告
左侧： 导航菜单 其他
网站主要内容
优点：页面结构清晰，主次分明
缺点：规矩呆板，如把握不好，容易让 人看了乏味
网页设计的常用布局
2. T型布局
网页设计的常用布局
2. T型布局
Banner
内容一
导航 进入
内容二
内容三
页脚横条：版权信息+联系方式+其他
网页设计的常用布局
5. 变化式布局: (2)导航在主视觉下布局
网页设计的常用布局
5. 变化式布局: (3)环绕式布局
网站Logo
二级Байду номын сангаас航
导航
内容一
Banner
内容二
内容三 页脚横条：版权信息+联系方式+其他
网站Logo 内容一
4. 左右框架布局
网页设计的常用布局
5. 变化式布局: (1)通栏布局
网站Logo
二级导航
导航
内容一
Banner 进入 内容二
内容三
页脚横条：版权信息+联系方式+其他
网页设计的常用布局
5. 变化式布局: (1)通栏布局
网页设计的常用布局
5. 变化式布局: (1)通栏布局
网页设计的常用布局
5. 变化式布局: (2)导航在主视觉下布局
网页设计的常用布局
3. 标题正文型布局
标题
正文详细内容
通常用于文章页面，注册页面 特点：简洁明快，干扰信息少，较为正规
网页设计的常用布局
3. 标题正文型布局
网页设计的常用布局
4. 左右框架布局
标题
左框架页 面：导航栏 链接+网站 logo+其他
右框架页面： 网站主要内容
大型论坛和企业常用
网页设计的常用布局