《UI界面设计》教案 - 图文(3)

可用性原则

可理解 软件

要为用户使用，用户必须可以理解软件各元素对应的功能。

如果不能为用户理解，那么需要提供一种非破坏性的途径，使得用户可以通过对该元素的操作，理解其对应的功能。

例如：删除操作元素。用户可以点击删除操作按钮，提示用户如何删除操作或者是否确认删除操作，用户可以更加详细的理解该元素对应的功能，同时可以取消该操作。 可达到

用户是交互的中心，交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。 用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。

要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏（一般来说超过4层）那么用户达到该元素的几率就大大降低了。

可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。（参考简单导向原则） 可控制

软件的交互流程，用户可以控制。 功能的执行流程，用户可以控制。

如果确实无法提供控制，则用能为目标用户理解的方式提示用户。

第三章 案例展示欣赏与分析

课 题：UI设计案例展示欣赏与分析 授课教师：汪永吉

教学目标：通过本章学习使学生了解UI设计案例展示欣赏与分析。 教学重点：掌握UI设计案例展示欣赏与分析。 教学难点：掌握UI设计案例展示欣赏与分析。 教学准备：课本、参考图形 教学方法：讲授、讨论、案例分析 教 材： 教学时间：8课时

教学内容：UI设计图标、输入法、播放器、界面；

第一节 图标

图标是具有明确指代含义的计算机图形。其中桌面图标是软件标识，界面中的图标是功

能标识。

图标分为广义和狭义两种： 广义

具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。应用范围很广，软硬件网页社交场所公共场合无所不在，例如：男女厕所标志和各种交通标志等。 狭义

应用于计算机软件方面，包括：程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。

一个图标是一个小的图片或对象，代表一个文件，程序，网页，或命令。图标有助于用户快速执行命令和打开程序文件。单击或双击图标以执行一个命令。图标也用于在浏览器中快速展现内容。所有使用相同扩展名的文件具有相同的图标。

图标有一套标准的大小和属性格式，且通常是小尺寸的。每个图标都含有多张相同显示内容的图片，每一张图片具有不同的尺寸和发色数。一个图标就是一套相似的图片，每一张图片有不同的格式。从这一点上说图标是三维的。图标还有另一个特性：它含有透明区域，在透明区域内可以透出图标下的桌面背景。在结构上图标其实和麦当劳的巨无霸汉堡差不多。

一个图标实际上是多张不同格式的图片的集合体，并且还包含了一定的透明区域。因为计算机操作系统和显示设备的多样性，导致了图标的大小需要有多种格式。

象素分辨

操作系统在显示一个图标时，会按照一定的标准选择图标中最适合当前显示环境和状态的图像。如果你用的是Windows98操作系统，显示环境是 800x600分辨率，32位色深，你在桌面上看到的每个图标的图像格式就是256色32x32象素大小。如果在相同的显示环境下，Windows XP操作系统中，这些图标的图像格式就是：真彩色（32位色深）、32x32象素大小。下面就是Windows各个操作系统中的标准图标格式：（单位：大小象素—颜色）

Windows 98 SE/ME/2000

48 x 48 - 256 32 x 32 - 256 16 x 16 - 256 48 x 48 - 16 32 x 32 - 16 16 x 16 - 16 Windows XP

48 x 48 - 32bit 32 x 32 - 32bit 24 x 24 - 32bit * 16 x 16 - 32bit 48 x 48 - 256 32 x 32 - 256 24 x 24 - 256 * 16 x 16 - 256 48 x 48 - 16 32 x 32 - 16 24 x 24 - 16 * 16 x 16 - 16 * 这种格式在XP图标中并不是必须的。

注意：Windows98/2000对24 x 24格式的图标不兼容。你可以在相关应用软件中打开含有这种图像格式的图标，但操作系统却认为是无效的。你必须确保你所设计的图标中至少含有以上所列的图像格式来获得良好的显示效果。如果操作系统在图标中找不到特定的图像格式，它总是采用最接近的图像格式来显示，比如把大小为48 x 48的图标缩小为24 x 24象素大小。当然，效果就差些了。

不同的操作系统版本

Windows 95， Windows 98， Windows ME， Windows 2000

· 建议： 48x48 （ 256色， 16色） ， 32x32 （ 256色， 16色） ， 16x16 （ 256色， 16色）.

· 最低： 32x32 （ 256色， 16色） ， 16x16 （ 256色， 16色）. Windows XP

· 建议： 48x48 （RGB /A， 256色， 16色） ， 32x32 （RGB /A， 256色， 16色） ， 24x24 （RGB /A， 256色， 16色） ， 16x16 （RGB /A， 256色， 16色） ·最低： 32x32 （的RGB /A， 256色， 16色） ， 16x16 （的RGB /A， 256色， 16色）.

·可选： 128x128 （的RGB /A） Windows Vista?

· 建议： 256x256 （RGB /A） ， 64x64 （RGB /A） ， 48x48 （RGB /A， 256色， 16色） ， 32x32 （RGB /A， 256色， 16色） ， 24x24 （RGB /A， 256色， 16色） ， 16x16 （RGB /A， 256色， 16色）

· 最低： 256x256 （RGB /A） ， 48x48 （RGB /A， 256色） ， 32x32 （RGB /A， 256色） ， 16x16 （RGB /A， 256色）

· 可选： 256x256 （ 256色， 16色） ， 64x64 （ 256色， 16色） 此画面为手机的操作系统的图标。 同学们主要在以下几个方面来考虑： 1 造型； 2 颜色； 3 艺术性； 4 创造性； 5 统一性；

我收集了一些图标的文件，我们接下来可以分享一下。

第二节 输入法设计

输入法是指为了将各种符号输入计算机或其他设备（如手机）而采用的编码方法。汉字输入的编码方法，基本上都是采用将音、形、义与特定的键相联系，再根据不同汉字进行组合来完成汉字的输入的。

中文热门输入法 搜狗拼音输入法：

搜狗拼音输入法是2006年6月由搜狐（SOHU）公司推出的一款Windows平台下的汉字拼音输入法。搜狗拼音输入法是基于搜索引擎技术的、特别适合网民使用的、新一代的输入法产品，用户可以通过互联网备份自己的个性化词库和配置信息。搜狗拼音输入法为中国国内现今主流汉字拼音输入法之一，奉行永久免费的原则。 QQ拼音输入法：

QQ拼音输入法是腾讯公司开发的一种方便人们使用和观看的输入法，可下载各种各样的皮肤来改变自身的皮肤。