网站设计和美工.PPT

版式设计 排版是一门艺术，也是一门技巧。如何能在准确传递信息的同时，又能排出精美的版面，这是设计师们值得深思的问题，因为这关系到访客的阅读感受。 版式设计 骨骼型 满版型 上下分割型 左右分割型 中轴型 倾斜型 网页版式布局 TOP11 三角型 对称型 并置型 自由型 四角型 版式设计 骨骼型 此类网站均属企业门户、新闻媒体网站所采用 版式设计 骨骼型是一种规范的理性的分割方法， 体现理性之美 满版型 此类网站均属商品广告常用网站所采用 版式设计 版面以图像充满整版，主要以图像为诉求， 视觉传达直观而强烈 上下分割型 泛用 版式设计 把整个版面氛围上下两个部分， 在上半部或下半部配置图片， 另一部分则配置文案 左右分割型 泛用 版式设计 把整个版面分割为左右两个部分， 分别在左或右配置方案 中轴型 垂直排列的页面给人以舒畅的感觉。 适用于个人网站或商品展示网站 版式设计 将图形做水平或垂直方向的排列， 以上下或左右配置文案 倾斜型 适用于商品展示网站 版式设计 版面主体形象或多幅图像作倾斜编排，造成 版面强烈的动感和不稳定因素，引人注目 对称型 对称分为－绝对对称和相对对称。 一般多采用相对对称瘦法，以避免过于严谨。　?　　对称一般以左右对称居多。? 版式设计 对称的版式给人稳定、庄重理性的感觉 三角型 适用于服务类型的网站? 版式设计 在圆形、四方形、三角形等基本形态中，正 三角形（金字塔形）是最具有安全稳定感 并置型 并置构成的版面有比较、解说的意味，给予原本复杂喧闹的版面以秩序、安静、调和与节奏感。? 版式设计 将相同或不同的图片作大小相同而位置 不同的重复排列 自由型 在这个页面中没有规矩的骨骼没有绝对的对称没有吸引人的焦点，但它随性的布局和颜色的飘渺感，是画面非常轻快，自由，给人无拘无束的感觉。 ? 版式设计 自由行结构是无规律的、随意的编排 构成，有活泼、轻快之感 四角型 ? 给人严谨、规范的感觉。?　　面构成得基本元素 —— 点、线、面 版式设计 版面四角以及连接四角的对角线结构上编排图形 版式设计 / http://bm.straightline.jp/ / 版式设计干货 * 交互 交互设计是一种目标导向设计，所有的工作内容都是在围绕着用户行为去设计的。设计师通过设计用户的行为，让用户更方便更有效率的去完成产品业务目标，获得愉快的用户体验。 交互设计 * 交互 没有按下去的按钮底部边缘更暗，因为没有光线照到那里。 没有按下去的按钮上半部分比下半部分稍微亮一些。这是在模仿一个略有弧度的表面（见侧视图）。 没有按下去的按钮下方有一些细微的阴影，在放大图中看得更清楚。 按下去的按钮整体颜色都更暗了，但下半部分的颜色依然比上面深。这是因为按钮在屏幕的平面上，光线不容易照到。也有人说，在现实中，按下去的按钮颜色更深，因为手遮挡住了光线。 * 交互 例子: IOS6 04 Part Four 动手实操 练习讲解 谢谢大家 ——网站设计和美工课程结束 模板来自于 / * * 网站设计和美工 授课人——林碧莹 动手实操 网站设计 作品欣赏 概述 01 02 03 04 Contents 目录 * 01 Part One 概述 网页设计是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。 什么是网页设计？ 网页设计一般分为三种大类： 功能型网页设计（服务网站B/S软件用户端）、 形象型网页设计（品牌形象站）、 信息型网页设计（门户站）。 设计网页的目的不同，应选择不同的网页策划与设计方案。 网页设计的工作目标，是通过使用更合理的颜色、字体、图片、样式进行页面设计美化，在功能限定的情况下，尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光、交互等来实现更好的试听感受。 网页设计常用的工具包括AI、PS、FL、FW、CDR等。 矢量图 位图 二维动画 矢量图+位图 矢量图 02 Part Two 作品欣赏 往期作品 购物商城 云桐轩 青春回忆录 网站欣赏 Adidas Wake Heyfitty 03 Part Three 网站设计 * 色彩 色彩是网页设计的核心，因为它是快速有效构建主题和样式的基础。另外，色彩和心理学关系紧密，合理地运用色彩可以提高用户体验，让访客流连忘返。 * 色彩 * 色彩 色彩-主导色 同色系主导 邻近色主导 类似色主导 中差色主导 对比色主导 中性色主导 多色搭配下的主导 色彩 同色系配色 品牌色 主导色 辅色 整体蓝色设计带来统一印象，颜色的深浅分别承载不同类型的内容信息，比如信息内容模