课件中的UI设计(主讲内容)

四、色彩：美化课件的要素 常用的三种色彩搭配
单色搭配： • 就是一种颜色和它的明暗色 • 搭配 类比色设计： 任意连续三种颜色之 间的搭配 • • 对比色设计： 一组相对的颜色之间 的搭配
四、色彩：美化课件的要素
课件色彩快速搭配的6捷径
1.使用单色
尽管课件设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色 彩的饱和度和透明度也可以产生变化，使课件避免单调。
四、色彩：美化课件的要素
2.使用邻近色
所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互 为邻近色。采用邻近色设计课件可以避免色彩杂乱，易于达到页面的和谐统一。
四、色彩：美化课件的要素
3.使用对比色
对比色可以突出重点，产生了强烈的视觉效果，通过合理使用对比色能够使课 件特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀， 可以起到画龙点睛的作用。
四、色彩：美化课件的要素
4.黑色(灰色)的使用
黑色(灰色)是一种特殊的颜色，如果使用恰当，设计合理，往往产生很强烈的艺 术效果，黑色一般用来作背景色，与其它纯度色彩搭配使用。
四、色彩：美化课件的要素
5.背景色的使用
背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩 作为背景色，同时背景色要与文字的色彩对比强烈一些。
Innovators to create more successful propositions. CEO’s to grow profits through customer-centricity.
Athens Brussels Bucharest Hamburg Iasi Kiev Moscow Shanghai
宋代禅宗大师青原行思提出参禅的三重境界：参禅之初，看山是山，看水是水； 禅有悟时，看山不是山，看水不是水；禅中彻悟，看山仍然山，看水仍然是水。 其实，不光是参禅，从领悟人生，到一项技能的修炼，哪个不是要经过这样的三重 境界呢。 所谓三重境界，其实就是对事物认识的三个层次，简单概括，那就是繁、简、 道三层。 第一层：繁。看山是山，看水是水，大千世界，风云雷电，虫鸟鳞兽，我们眼 观、耳闻、鼻嗅、舌尝、手触，面对这各式各样纷繁复杂的的信息，正如歌中所唱 的那样，请借我借我一双慧眼吧，让我把这纷扰看得清清楚楚明明白白真真切切。 第二层：简。看山不是山，看水不是水，那看到的是什么？是风云变幻节奏， 是草长莺飞的规律。牛顿从落地的苹果中看到了地球的引力，爱因斯坦从一束光中 看到了相对理论，他们的目光穿越了时间和空间的迷雾，不再受到外表的迷惑，从 千丝万缕中找到了那一条最为精简的纲领，世界，顿时清晰了。 第三层：道。看山依然是山，看水依然是水。有人会问，何为道？在星球大战 中，这个东西叫做原力。在黑客帝国中，这个东西叫做Matrix，在黄易笔下，那叫 破碎虚空。总而言之，道可道，非常道！ 简而言之，这三层境界，就是对一个事物，从茫然无知到了解规律再到最后运 用规律的的三个阶段。
缺乏色彩搭配的基本知识，不知从何做起、如何配搭才得当。
四、色彩：美化课件的要素
如何让课件配色协调一致、赏心悦目？
四、色彩：美化课件的要素
课件中色彩搭配的
素
色彩的鲜明性，版面色彩丰富但不花哨。
个要
色彩的独特性，要有与众不同的色彩。
色彩的合适性，色彩搭配适于教学主题。 色彩的联想性，不同色彩会产生不同的联想。
2014年龙里县中等职业学校教师信息化教学能力提升培训
课件中的UI设计
何宗霖
二零零四年六月十
常见教学工具软件
常见的教学工具软件：创作平台工具软件和辅助工具软件
创作平台工具软件： PowerPoint、 AuthorWare、 方正奥思、课件大师、广州凯迪等等。 辅助工具软件： Photoshop、 AdobeIllustrator、 美图秀秀、CorelDRAW 、Graphics Suite、光影魔术 手、 flash、 Swish、会声会影、格式工厂等等。
色彩的协调性，原则是总体协调，局部对比。
四、色彩：美化课件的要素
课件中色彩搭配的原则
1．根据课件的主题与内容、学生的年龄特征，确定主色调 2．增强文字与背景的对比度 3．注意颜色的传统意义 4 . 制作完成后的课件要经过大屏幕的检验
课件中色彩搭配的忌讳
1．不要将所有颜色都用到，尽量控制在3~5种色彩以内。 2．背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突 出主要文字内容。
方案
结尾
2、内容要有组织（经典导航示例）
【5. 抒情式】
片头
背景
剖析
事件
观点
结尾
2、内容要有组织（经典导航示例）
【6. 渲染式】
片头
内页
片尾
一、原则：化繁为简，去粗存精
3、保持观众注意
一、原则：化繁为简，去粗存精
3、保持观众注意
一、原则：化繁为简，去粗存精
4、形式勿贪华丽
一、原则：化繁为简，去粗存精
2
模块对齐
3
等距分布
3. 对称之美
左右对称
上下对称
4. 留白之美
三、字体：赏心悦目的根本
字体在课件中也是有生命力的
1、字体字号的选择 2、文字的排版
三、字体：赏心悦目的根本
文字的可读性
避免繁杂零乱，应易认，易懂。
文字的整体性
文字即图形，要有层级区别。
文字的美观性
字体选恰当，字号应适中，字色巧搭配。
I Am The Media
FUTURELAB
FUTURELAB
“Informed” consumers are much less reliant on advertising for product information
Out of 20 media company blogs are “least trusted” sources of information. Consumer product ratings/reviews are the second most trusted source. (Forrester, Q2-2008
“The problem is not the [online] medium, the problem is the message, and the fact that it is not trusted, not wanted, and not needed” Eric Clemons
FUTURELAB
4、形式勿贪华丽
保存信息、确立概念 筛选关注讯息
获取基础视觉信息 视觉处理信息的三个阶段
二、版式：课件设计的骨骼
版式设计丨四要丨四不
1.要突出核心内容 2.要保持风格一致 3.要有版式布局变化 4.要使用高质量图像
1.不堆砌太多元素 2.不滥用项目符号 3.不随意使用不规则布局 4.不过多使用艺术字
Human Centric Communication Planning
What would this man want to hear?
FUTURELAB
To make me pay attention, stop looking at yourself
Starts from what the brand wants to say and how to efficiently get it to pre-defined homogeneous audiences.
常用于页面中较多图片的处理，可通过改变图片形状，保持页面统一
修炼前
修炼后
五、媒体：合理添加与布局
拟物化
直白一点就是给照片赋予一个载体形态常用的就是相框，胶片之类
修炼前
修炼后
感谢各位 请多指点
Starts from what the customers want to “hear” and and being relevant to their situation, environment, interests and needs.
1.距离之美
1
边距
2
行距
3
段距
2. 对齐之美
1
边界对齐
片头
【1. 说明式】
封面 目录
过渡页
正文页 结尾
2、内容要有组织（经典导航示例）
【2. 罗列式】
片头 封面
内页 片尾
……
……
……
……
……
……
2、内容要有组织（经典导航示例）
【3. 故事式】
开场动画
场景一 场景二
场景三
场景四 场景五
2、内容要有组织（经典导航示例）
片头
【4. 剖析式】
引子
问题 过渡
Some Credentials Astra Zeneca Deloitte Fortis Investments Heineken Hewlett Packard Lego Mobistar
Special Relationship
Gemalto Lexus Philips Pireaus
Flashba的 形象要素之一，具有传达感情的功能。
三、字体：赏心悦目的根本
三、字体：赏心悦目的根本
课 件 文 字 处 理 的 四 个 阶 段
三、字体：赏心悦目的根本
2. 文字排版→①字少时的排版 字少时的排版：
错落有致、突出重点。
三、字体：赏心悦目的根本
2.文字排版→②字多时的排版 字多时的排版：
课 件 常 见 设 计 问 题
一、原则：化繁为简 去粗存精
二、版式：课件设计的骨骼
三、字体：赏心悦目的根本
四、色彩：美化课件的要素
五、媒体：合理添加与布局