10课 UI界面设计.pptVIP

Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd.;第10章 UI界面设计;在互联网中，网页是提供信息的最主要手段，凡是在互联网上通过浏览器阅读到页面，都叫网页。我们通常看到的网页，都是以htm或html后缀结尾的文件，所以网页也俗称HTML文件。 网页也是互联网中的基本组成部分、网上的重要媒体方式，因此，他也是人们关注的焦点；网页作为网上内容的一种视觉包装艺术，他具备了声音、动画、映象以及三维空间等诸多因素，形成了21世纪重要的视觉艺术表现形式。;10.1.1 网页设计的基本原则;10.1.2 网页设计界面的构成要素;10.1.3 网页的分类;10.1.4 网页设计的基本元素;2.图形（图像） 网页设计中的图形包括：标题、背景、主图、链接按钮。网页上的图片一般为JPG和GIF格式，如右图所示。;4.色彩 网页设计中的色彩搭配通常不要只运用单一颜色，会显得太单调；反之，颜色太多会则会花哨，一般使用一种或两种主题色，配以辅助色，一个页面尽量不要超过四种色彩。背景色设计要考虑与前景文字的搭配。两者要拉开层次，不能影响阅览者阅读内容。标志要突出显示，其色彩跟网页的主题色层次要拉开，也可以用对比色；导航和小标题是网站的指路灯，浏览者要在网页间跳转、了解网站的结构及内容，必须通过他们。这时可以使用稍具跳跃性的色彩来加以强调，以吸引视线，让人感觉网站功能清晰明了、层次分明，不至于迷失方向。网页设计中的色彩要均衡，如右图所示。;5.多媒体多媒体网页元素中，除了文本、图像和Flash动画外，还有声音、视频等其他媒体，如下图所示。;现如今的社会移动设备已经成为人们生活娱乐的必需品之一，移动设备的用户界面及体验越来越受到用户的关注。;10.2.1 手机UI设计的概念;10.2.2 手机UI设计原则;10.2.3 手机UI设计的3大趋势;2.四维思考 用户界面设计者开始意识到，没有必要再坚持把现实生活中的对象按照原样照搬进数字空间里面。数字世界跟现实本来就有差异。他可以赋予用户魔力。他不再是用户、鼠标以及需要跟眼睛协调的手指芭蕾舞。而是用户直接操作屏幕或者对象，他们所接触到的是一个用户无论走到哪里都可见的四维世界（时间、空间、人、信息）。;4.空间利用率 元素布局平衡，功能区域划分合理。窗体大小与长宽比例合理，空间充分利用，避免过大的灰色空白格区域，也不要过于局促，将空间的利用率提高到最合理的数值，如下图所示。;设计思路指导 第1点：由于手机UI界面的尺寸有限，所以图片的尺寸和比例需注意实用性。 第2点：充分利用空间，避免过大的灰色空白格区域，也不要过于局促，将空间的利用率提高到最合理的数值。 第3点：减少需要用户思考的机会，尽量为客户提供选择。 第4点：交互性设计注重人机交流，要使用户操作方便。 第5点：这里制作的是个人首页界面，所以版面不可太复杂，只需展示必要的信息即可。 案例背景分析 本例是为智能手机设计的个人首页界面，首先明确整个设计风格以简洁为主，结构上一目了然，在色彩上运用清爽的对比色系，合理的界面规划也便于使用，整个设计通过简洁的界面风格给人带来舒适的视觉效果，本例效果如下图所示。;Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd.;设计思路指导 第1点：要注意界面的设计与其所向玩家提供的功能之间的冲突，切勿将视觉效果凌驾于功能之上，会影响游戏操作。 第2点：游戏中通常需要显示大量的信息，但是访问频率并不高。如果你知道玩家并非总是需要这类信息，那么将其进行适当隐藏。 第3点：本例制作的是一款海洋类游戏界面，可以选择海洋为背景，添加相关植物作为点缀元素。 第4点：画面文字效果要突出，要符合整个游戏界面的感觉。 案例背景分析 本例是为游戏公司设计的游戏界面，该游戏为海洋类游戏，以美丽的海底世界为界面背景，构建出一幅梦幻唯美的海底世界，其界面简洁便于玩家快速上手，营造出美观、操作简单并且具有引导功能的人机环境，整个设计符合特定界面空间的视觉规律，主题突出，如下图所示。;Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd.;设计思路指导 第1点：整体架构要模块化、清晰化，