1、用户界面（UI）,User Interface,曾俊勇,视觉的要素,造型,造型决定一个物体看起来 像什么,视觉的要素,颜色,颜色会带给人们 一种感觉,视觉的要素,大小,大小给人 某种差异,视觉的要素,远近，清晰度等,在摄影中， 比较强调这些。,计算机人机交互界面,人机交互界面主要因素是什么？,造型 颜色 大小 远近 清晰度,计算机UI中，把握好 造型，颜色，大小 成功UI的开始！,造型 Demo 1,寥寥几笔， 先勾画出造型， 像什么。,小提示：日本的很多小孩能惟妙惟肖地勾画出机器猫的造型。,造型 Demo 2,网友评价： 最简洁， 最有表现力的表情,小提示：兔斯基QQ表情至今为止互联网上最全
2、的表情。,造型 Demo 3,我们常用一个造型 像什么 来叫它的名字,小提示：比如鸟巢。公司的大胖,造型 Demo 4,我们常用一个造型 像什么 来叫它的名字,小提示：裤衩咋走？（三环央视大楼）,造型 Demo 5,我们常用一个造型 像什么 来叫它的名字,小提示：迪拜的七星级帆船酒店,UI造型 Demo 1,QQ小巧的造型， 像一个“通讯簿“。 利用它，我们还 可以与它对话。,人机交互UI（User Interface）用户界面 除了给用户提供信息外，往往还有交互 性。我们称之为“人机对话”吧。,UI造型 Demo 2,音乐播放器（千千静听）的造型。包括“控制面板”，“播放列表”，“歌词秀”。
3、 觉得它很酷，似乎听起歌来都好听些。,UI造型 Demo 3,浏览器再怎么都会有 像一个“地址栏”的 造型。,UI造型 Demo 4,这个“地址栏”的 造型。看起来就 像网页浏览器了。 不管是Firefox还是 chome，或者IE，最 基本的造型是一定是 不可缺少的。,UI造型 Demo 5,iphone 的造型。,思考 and 问题： 造型是指某个东西看起来像什么， 用一些基本线条，形状勾画出来。 请描述一下 iphone 的基本造型。,UI造型 Demo 6,一个 website ，它有哪些造型？,UI造型 Demo 7,先观察几个网页吧。,UI造型 Demo 8,先观察几个网页吧。,U
4、I造型 Demo 9,先观察几个网页吧。,UI 之 website 造型 1,Logo,WebSite 的基本造型有哪些？让它看起来不像一份报纸？ 从“各种各样”的UI demo中不难发现有这些元素。,UI 之 website 造型 2,WebSite 的基本造型有哪些？让它看起来不像一份报纸？ 从“各种各样”的UI demo中不难发现有这些元素。,Menu and Navigate（导航）,UI 之 website 造型 3,WebSite 的基本造型有哪些？让它看起来不像一份报纸？ 从“各种各样”的UI demo中不难发现有这些元素。,Content,UI 之 website 造型 4,W
5、ebSite 的基本造型有哪些？让它看起来不像一份报纸？ 从“各种各样”的UI demo中不难发现有这些元素。,CopyRight（bottom）,竟然发现 Mtime还将造型，颜色等 申请了产权保护！ 可见，这些要素很能影响 心灵深处。,UI 之 website 造型总结,Logo Menu and Navigate（导航） Content CopyRight（bottom）,答案原来太简单了！真想拍你一板砖，这也要你说。等先，那我再多说一点，造型其实还可以内套造型！ 设计网页的思路一般是这样，考虑到外部的造型，其次再考虑到内部的 造型。比如 logo , menu ,content . 等
6、再是什么造型。 起个名字叫“造型渐进”法。画龙最后点睛一笔还是较为简单的，而画轮廓，慢慢地勾画出来很难。,造型小结,造型决定一个物体看起来 像什么 平时我们如果细致观察， 将一些基本的元素勾画 出来，深入人心，就是成功 的造型。,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜色的感觉分类,颜
7、色的感觉分类,颜色 Demo 1,一叶知秋,颜色 Demo 2,黑白的老照片时间的久远,颜色 Demo 3,红色海报 革命年代的热情,颜色 Demo 4,偏重暗色 非主流的色调,小提示： 正常图片暗色化， 加入一些文字， 这样玩非主流。,颜色 Demo 5,犀利哥： 低调的黑色 内衣深沉的蓝色 裤带上有红色的强调色 当然，造型也是关键。 造型好的男人叫“型男”。,颜色 Demo 6,QQ校友色调主打绿色，清新，亲近 网页颜色搭配，一般不超3种颜色，主色，辅色，强调色。,颜色理论,这么多丰富多彩的颜色？ 做为设计师，如何调配它们？,可见光谱 三原色 三次色 十二次色环,网页颜色搭配,传统，高雅，
8、优雅,网页颜色搭配,传统，稳重，古典,延伸Ways To Take Your Webdesign From Good To Great,保持微妙的颜色倾斜度,延伸Ways To Take Your Webdesign From Good To Great,网格化,延伸Ways To Take Your Webdesign From Good To Great,很多的情况下，用 上等长列。,延伸Ways To Take Your Webdesign From Good To Great,学习印刷术。,延伸Ways To Take Your Webdesign From Good To Great,高亮显示 COOL小图标 圆角,延伸Ways To Take Your Webdesign From Good To Great,交互性： 悬浮时有清晰的小图标,延伸书本,Dontt make me think别让我思考,Thanks,曾俊勇,
