页面布局与色彩创意.ppt

赵锋赵锋页面布局色彩创意赵锋网页设计布局两个概念黄金分割：a:(a+b)=b:a九宫格：四个交叉点即为视觉中心点正中心属于盲点区，视觉习惯不宜引起视觉刺激大布局与小布局分辨率与网页大小关系：留白，避免平分上中下3：6：1左中右3：4：3细节布局：核心板块位于顶部与中间的中部位置规范的存在是相对的，网页设计不存在规范，当设计意识形态达到一定高度的时候，这些规范都可以忽略网页布局类型的确定方法捕获自己喜欢的网站页面并修改为自己所要内容导航结构、信息架构、主页内容按照不同的网页布局类型，草绘出不同页面的模板根据不同类型网页布局特点及视觉效果差异选择网页设计中的“脏、乱、差”问题色彩使用不当产生“脏”细节或局部效果粗糙称为“差”布局效果“乱”栅格设计是平面设计中用于解决布局乱的一种理论栅格系统英文gridsystems，又译网格系统，运用固定的格子设计版面布局，是今日出版物设计的主流风格之一Adobe【图L-1】、Yahoo【图L-2】、IBM【图L-3】信息结构设计从大的信息关系来布局，可使浏览者一目十行并留下关于信息的印象，知道信息的大概内容，这是网页信息传递的根本目的【图L-4】单一结构【图L-5】【图L-6】【图L-7】复合结构【图L-8】【图L-9】【图L-10】副空间副空间，即留白，最典型范例是中国山水画中的留白，留白使画面变得很有意境01网页留白是给浏览者留出透气的空间，只有舒适的网站才会更受欢迎【图L-13】【图L-14】【图L-15】01网页布局赏析采用flashbanner作为网站展示并占主体的网页设计，同时调用外部的视频内容作为banner弹出窗浮出画面，直接传递产品信息横向三栏布局动态flash为第一视觉中心进行下移引导[图L-16]页面设计受到线的齐边裁切，突出环境和立体感蓝灰色调统一后处理三栏式划分，通过圆角矩形框配合阴影区分布局成功细节圆角设计四种导航按钮状态使用阴影打破空间维度限制[图L-17]主体内容衬托于画面之上，使画面趋于简洁图文均衡呼应的版面设计内容设计类似于打开电子书的形式利用圆形元素统一网站设计01020403[图L-18]创意点：画中画01利用高清视频特效引导浏览者对显示器的主观印象，三维空间设计使显示器立体化02光源元素的应用+光斑、半点、拉丝+黑色底纹03[图L-19]以实拍、实物元素的场景设计主页面柔和的光线、诱惑的食品照片内部页面打破开始创意，以平面为基础内容介绍[图L-20-2][图L-20]三维场景打造和设计利用镜头运动+遮挡展现层次空间形象有趣的加载页面+镜头的推进和定格CBA[图L-21]私人博客页面，以标题和概要为主1树冠和树的根基有始有终2[图L-22]赵锋赵锋