网页设计的逻辑化和视觉化[精选].ppt

网页设计的逻辑化和视觉化 计算机与通信工程学院 吴强 三栏结构 一般用于主页，可以容纳大量的信息 这样的主页，主要是超链接的标题信息，极少显示具体详细内容 新浪主页 Reuters主页 两栏结构 一般用于栏目（频道）页和内容页，为用户提供详细的信息 两栏结构中，主栏（较宽的）为对应标题的内容，副栏（较窄的）为与主题相关的链接、广告等 新华网内容页 河南农药信息网栏目页 用户的注意力是有限的 用户浏览网页的眼球顺序 从上到下，从左到右 先标题后段落，先图画后文本 先突出强调的部分，再看没有强调的部分 Google网页浏览眼球运动呈F型 新华网头条 抓住用户眼球 非综合性门户网站，则采用较艺术的方法，将最重要的内容，用很大篇幅显示给用户，类似于平面媒体的cover story 卢浮宫主页 Apple主页 Amazon主页 设计布局 所有的设计布局，都是使用盒子模型完成。 使用不同的盒子布局，放置图片或者文字，即可完成设计。 文字大小设计 主标题可以设计任意大小，注意保证标题显示在一行，不要折行 分栏标题一般选用14px 正文内容一般选用14px或12px 14px or 12px 14px or 12px 配色设计 红色---是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。绿色---介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。 它和金黄，淡白搭配，可以产生优雅，舒适的气氛。橙色---也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。黄色---具有快乐，希望，智慧和轻快的个性，它的明度最高。蓝色---是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛(象天空的色彩:)白色---具有洁白，明快，纯真，清洁的感受。黑色---具有深沉，神秘，寂静，悲哀，压抑的感受。灰色---具有中庸，平凡，温和，谦让，中立和高雅的感觉。每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。 ? 对于学校网站的设计来说，按专业来分，偏重文科的话红色系、黄色系、灰色系，理科的话蓝色系、绿色系，色彩要稳重，调子灰一些，不要太多的颜色和太鲜艳的就好。各种深浅的灰也是比较保险的颜色。 The End 14px加粗 14px 12px