UI设计教程.ppt

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