数字界面设计——软件界面设计.ppt

L/O/G/O 数字界面设计 第六章软件界面的设计 软件界面的设计 软件界面设计的整体思考 1 软件界面的视觉基本构件 2 3 4 为“交互”服务：角色、场景和礼貌 软件界面设计介绍 软件界面概述 人因工程与软件界面的布局原则 基于多状态的软件界面设计 1 2 3 软件界面设计的整体思考 软件界面设计的整体思考 软件界面概述 软件界面（Soft User Interface） 是用户与计算机通过软件进行信息交流的平台。 文本方式——图形方式 软件界面提倡设计简洁、直观、所见即所得，强调人性化，因此软件界面必须具备良好的可读性和可操作性，并符合人因工程学的相关标准。 软件界面设计的整体思考 软件界面的版面布局对于软件用户操作来说具有实际意义。软件界面的设计与网页界面有着一定的区别，后者信息接受行为相对主动，而前者有一定的被动成分。因为上网的过程是一个主动寻求信息交互的过程，而操作软件的过程则不然，很多时候用户都带着一定的工作负担。所以软件界面的布局特别关注人的基本因素，这样才能设计出有实际价值的软件界面。 人因 工程 软件界面的 布局原则 人因工程与软件界面的布局原则 版面布局简洁明了 善用最佳视域和有效视域 合理的版面布局顺序 屏幕不能拥挤 协调界面的视觉平衡感 软件界面设计的整体思考 多状态图标 可以有效避免工作的的复杂性，不需要用户去记忆大量的图标和相应的功能指令，当用户在使用某种功能完成相应的任务时，不相关或在这个过程中不推荐使用的功能图标应体现为“非当前状态”，可以帮助用户集中精力于当前的操作，有效利用了软件界面的空间，用户操作也较少受一些不相干信息的干扰。另外，多状态图标的设计应保持一致的视觉风格。 基于多状态的 软件界面设计 多层次窗口(面板）可以避免窗口与面板之间的遮挡，使用户能一目了然地观察到他们所需要的信息，以确保用户在使用时不会混淆而错误操作。需要从界面布局、色彩搭配，到界面元素，用“多状态”的构思进行改良设计，以形成“当前状态”和“非当前状态”；“当前程序”和“非当前程序”；”后台运行”和“前台运行”窗口（面板）在视觉上的差别。为了使用户能够迅速地寻找自己的窗口（面板)，软件界面应设置一个自动排列窗口和隐藏窗口的功能。 进一步扩大用户的工作空间，简洁界面的布局，合理化功能模块在界面中的作用，使界面信息能够一目了然并且彼此保持联系。 软件界面的视觉基本构件 1. 软件界面的文本 2. 软件界面的图形 软件界面的视觉基本构件 段落格式 需注意中文段落格式和英文段落格式有很大的差别中文格式允许竖排文字，在软件界面设计中，竖排文字的装饰性就远远大于功能性。 对齐方式 字体与大小 对齐有居中、左齐、右齐、齐头尾等方式，在软件界面中，大篇的文字主要是一些帮助信息，其功能性是举首位的，应尽量常规编排。 字体的类型、字体的大小等选择余地很多，但在软件界面的设计中一定要谨慎使用。 软件界面的文本 文本是软件界面最基本的构建之一，它与图形、视频一起构成了软件界面的多种形态。（对用户有引导性。Windows VS MAC OS X） 字型 在软件界面的设计中并不适用艺术字型，一旦被艺术性强化后，其功能性，即被识读的特性就会减弱，应尽量少用。 最好的设计效果就是让用户觉察不到用了什么文本样式，但文字看起来舒服明朗就足够了。 软件界面的视觉基本构件 软件界面的图形分类 1.平面图：适合意义的阐述，便于对意义的理解 2.三维图：有较强的视觉冲击力，易引起注意 软件界面中的图标、背景 软件界面中的信息图 软件界面中的图标（按钮）和背景这类图形的设计应充分体现对软件性质和功能，特别是设计的风格应体现用户任务的行业特点。 信息图是软件界面中有着很强功能性的图形。包括：图标信息图、帮助信息图、导向信息图等。具备如下特质：显著、简单、直接、连贯且全面。 软件界面的图形 图形是软件界面关键性的构件。恰当地使用图形，能使用户在使用界面时产生临境感。（以不分散用户的注意力为准。） 软件界面信息图的三大挑战 1. 理解要表述概念的类型、意义及内在逻辑结构 2.酝酿合理的形式来表现一个连贯的信息整体 3.选择恰当的方式展现信息图—静态、动态、交互 (5)菜单设计 (4)软件面板设计 软件界面设计介绍 (1)软件启动封面设计 (2)软件框架设计 (3)软件按钮设计 (6)标签设计 (7)图标设计 (8)滚动条及状态栏设计 (9)安装过程设计 (10)包装及商品化 为“交互”服务：角色、场景和礼貌 礼貌与交互 场景与交互 角色与交互 这里的角色并不是真实的用户，是真实用户的各种需求。通过设立角色能够为软件界面的交互设计提供一个良好的基础。一方面，构建角色能