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