《UI设计教程》PPT课件.ppt

《《UI设计教程》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《UI设计教程》PPT课件.ppt（68页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、用户界面（用户界面（UI）User Interface曾俊勇视觉的要素视觉的要素n造型造型决定一个物体看起来像什么视觉的要素视觉的要素n颜色颜色会带给人们一种感觉视觉的要素视觉的要素n大小大小给人某种差异视觉的要素视觉的要素n远近，清晰度等在摄影中，比较强调这些。计算机人机交互界面计算机人机交互界面人机交互界面主要因素是什么？人机交互界面主要因素是什么？n造型n颜色n大小n远近n清晰度计算机UI中，把握好造型，颜色，大小成功UI的开始！造型造型 Demo 1寥寥几笔，先勾画出造型，像什么。小提示：日本的很多小孩能惟妙惟肖地勾画出机器猫的造型。造型造型 Demo 2网友评价：最简洁，最有表现力的

2、表情小提示：兔斯基QQ表情至今为止互联网上最全的表情。造型造型 Demo 3我们常用一个造型像什么来叫它的名字小提示：比如鸟巢。公司的大胖造型造型 Demo 4我们常用一个造型像什么来叫它的名字小提示：裤衩咋走？（三环央视大楼）造型造型 Demo 5我们常用一个造型像什么来叫它的名字小提示：迪拜的七星级帆船酒店UI造型造型 Demo 1QQ小巧的造型，像一个通讯簿。利用它，我们还可以与它对话。人机交互UI（User Interface）用户界面除了给用户提供信息外，往往还有交互性。我们称之为“人机对话”吧。UI造型造型 Demo 2音乐播放器（千千静听）的造型。包括“控制面板”，“播放列表”，

3、“歌词秀”。觉得它很酷，似乎听起歌来都好听些。UI造型造型 Demo 3浏览器再怎么都会有像一个“地址栏”的造型。UI造型造型 Demo 4这个“地址栏”的造型。看起来就像网页浏览器了。不管是Firefox还是chome，或者IE，最基本的造型是一定是不可缺少的。UI造型造型 Demo 5iphone 的造型。思考 and 问题：造型是指某个东西看起来像什么，用一些基本线条，形状勾画出来。请描述一下 iphone 的基本造型。UI造型造型 Demo 6一个 website，它有哪些造型？UI造型造型 Demo 7先观察几个网页吧。UI造型造型 Demo 8先观察几个网页吧。UI造型造型 Dem

4、o 9先观察几个网页吧。UI 之之 website 造型造型 1 LogoWebSite 的基本造型有哪些？让它看起来不像一份报纸？从“各种各样”的UI demo中不难发现有这些元素。UI 之之 website 造型造型 2WebSite 的基本造型有哪些？让它看起来不像一份报纸？从“各种各样”的UI demo中不难发现有这些元素。Menu and Navigate（导航）UI 之之 website 造型造型 3WebSite 的基本造型有哪些？让它看起来不像一份报纸？从“各种各样”的UI demo中不难发现有这些元素。ContentUI 之之 website 造型造型 4WebSite 的基

5、本造型有哪些？让它看起来不像一份报纸？从“各种各样”的UI demo中不难发现有这些元素。CopyRight（bottom）竟然发现Mtime还将造型，颜色等申请了产权保护！可见，这些要素很能影响心灵深处。UI 之之 website 造型总结造型总结nLogonMenu and Navigate（导航）nContentnCopyRight（bottom）答案原来太简单了！真想拍你一板砖，这也要你说。等先，那我再多说一点，造型其实还可以内套造型！设计网页的思路一般是这样，考虑到外部的造型，其次再考虑到内部的造型。比如 logo,menu,content.等再是什么造型。起个名字叫“造型渐进”法。

6、画龙最后点睛一笔还是较为简单的，而画轮廓，慢慢地勾画出来很难。造型小结造型小结造型决定一个物体看起来像什么像什么平时我们如果细致观察，将一些基本的元素勾画出来，深入人心，就是成功的造型。颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感

7、觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色的感觉分类颜色颜色 Demo 1一叶知秋颜色颜色 Demo 2黑白的老照片时间的久远颜色颜色 Demo 3红色海报革命年代的热情颜色颜色 Demo 4偏重暗色非主流的色调小提示：正常图片暗色化，加入一些文字，这样玩非主流。颜色颜色 Demo 5犀利哥：低调的黑色内衣深沉的蓝色裤带上有红色的强调色当然，造型也是关键。造型好的男人叫“型男”。颜色颜色 D

8、emo 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曾俊勇曾俊勇