第四章产品视觉形象设计的构成

第四章产品视觉形象设计的构成
例子：
心理模型：将要扔掉的物品的名称，或最多包括一些 朴素的关于物品的分类方法：食品类、包装类等；
实现模型：“可回收”与“不可回收”； 系统模型：标有“回收、不可回收物品”字样的外观
的垃圾桶 ？ 作业：设计垃圾桶界面。
第四章产品视觉形象设计的构成
n 前面案例说到的“好用”，在交互界面设计领域， 选择的措辞是“界面友好” 。但界面友好是一个比 较模糊的概念，今两年来，设计人员倾向于采用 “可用性”(Usability)这个词，并得到越来越多的相 关专业人士的认同，其理论也在不断的发展中，形 成了一门学科:可用性工程(Usability Engineering)。 可用性工程是交互式IT产品/系统的一种先进开发方 法，包括一整套工程过程、方法、工具和国际标准， 它应用于产品生命周期的各个阶段，核心是以用户 为中心的设计方法论(user-centered design一UCD)， 强调以用户为中心来进行开发，能有效评估和提高 产品可用性质量，弥补了常规开发方法无法保证可 用性质量的不足。
我国产品在这方面的研究很少，设计方面重视不够。
第四章产品视觉形象设计的构成
第四章产品视觉形象设计的构成
SONY TR-2
第四章产品视觉形象设计的构成
第四章产品视觉形象设计的构成
第四章产品视觉形象设计的构成
3）图形用户界面（GUI, Graphic User Interface ）
图形用户界面是通过计算机编程来实现的 一种可视化的人机交互界面。实际上是软件的 图形界面，用来帮助人们认识和理解产品的设 计理念和操作方式。就表现形式来讲，主要有 图标、菜单、工具栏、事件动画等元素。 其作用有：
第四章产品视觉形象设计的构成
n 钱抒，张福昌，MP3的界面设计研究，江南 大学，2005.6
n 周睿，张锡，基于可用性的手机交互界面设 计研究，南京理工大学，2006.6
n 霍发青，陈汗青，人机界面研究，武汉理工 大学，2003.11
第四章产品视觉形象设计的构成
作品欣赏
第四章产品视觉形象设计的构成
视觉感知主要起到了信息拾取的作
用，比如产品上的各种标志与符号，以
及按键的形状和排布等；
触觉主要是对拾取信息的操作，比如旋钮的调节、按键的拨弄、
屏幕的感压等；
听觉感知更多地表现了对信息操作的一种反馈，比如按键的声
音等。
因此，用户界面作为一种传达产品理念、操作等信息的综合方 式，同样成为产品形象的一个重要部分。它直接影响到产品使用的 便利性，而人们总能对使用方便的产品留下深刻的印象，并影响对 产品形象的整体评价。
对操作的可视化； 显示产品的运行状态； 增加产品使用乐趣等；
第四章产品视觉形象设计的构成
第四章产品视觉形象设计的构成
第四章产品视觉形象设计的构成
第四章产品视觉形象设计的构成
应用现状：
在产品图形用户界面设计方面，Apple 公司的水平可以说是傲视全球。作为全球软 件霸主Microsoft公司也具有相当实力。
（1）按键的形状、大小、排布、位置、弹性等； （2）标志上的数字、文字、符号等（字体、大小、位置）； （3）发音孔和散热孔的形状、大小、位置； （4）各种端口的位置、间距等； （5）显示液晶的形状、大小、位置、角度、亮度 （6）指示灯的形状、大小、位置、颜色、亮度 （7）铭牌及一些辅助图形或造型等。
第四章产品视觉形象设计的构成
根据不同的人机互动方式，用户界面主要可以分为以 下三种形式：
实体用户界面（SUI） 图形用户界面（GUI） 声音用户界面（AUI）
硬界面 软界面
第四章产品视觉形象设计的构成
2）实体用户界面（SUI，Solid User Interface）
实体用户界面是通过硬件设计来实现的一种既可视 又可触摸感知的人机交互界面，是对产品理念和使用方 式的一种固化表现。实体用户界面的表现内容主要包括：
简而言之，用户界面就是人与产品之间互动方式的 物化表象。
产品用户界面是近年来伴随IT产业突飞猛进而发 展起来的一个新兴复合专业领域，涉及学科：视觉艺 术、人机工程、认知心理、逻辑分析、计算机图形学
等。
第四章产品视觉形象设计的构成
n 关于广义界面，美国学者赫伯特.A.西蒙提出:设计是人 工物的内部环境(人工物自身的物质和组织)和外部环境 (人工物的工作或使用环境)的接合。这种接合是围绕人 来进行的。“人”是设计界面的一个方面，是认识的主 体和设计服务的对象，而作为对象的“物”则是设计界 面的另一个方面。它是包含着对象实体、环境及信息的 综合体，就如我们看见一件产品、一栋建筑，它带给人 的不仅有使用功能、材料的质地，也包含着对传统思考、 文化理喻、科学观念等的认知。应该说，广义的界面设 计是以功能性界面为基础，以环境性界面为前提，以情 感性界面为重心而构成的，它们之间形成有机和系统的 联系。
第四章产品视觉形象设计的构成
第四章产品视觉形象设计的构成
n 美感： 往往有比例和尺度、均衡与稳定、统一
与变化、节奏与韵律等多种形式，产品的界 面美是从人类长期实践经验总结出的结论， 对设计具有一定的指导作用。当然，这里的 “美”，不单单是指产品的外观能够引起人 们的喜爱，同时也包括使用产品的爽快感、 拥有高科技产品的满足感、以及在使用过程 中因为产品造型风格的独树一帜而造就的炫 耀感等等。
第四章产品视觉形象设计的构成
5）人机界面的评价
在同一用户界面中，所有的菜单选择、命令输入、数
据显示和其他功能应保持风格的一致性。风格一致的人机
界面会给人一种简洁、和谐的美感。
n 1、界面的色彩及风格统一
n
产品软件界面的总体色彩应该接近和类似实体界面的
总体色调。
n 1)一致性：一致性的界面设计让使用者更易学习和记忆。
我国在这方面可以说是刚刚起步，发 展迅速当参差不齐。比较好的代表QQ和盛 大传奇网络游戏。
有研究表明，界面的美观程度将影响用 户对其可用性评价。而且，若界面的“外观 和质感”令人心情舒畅，如使用漂亮的图形、 巧妙地组合各种元素、设计精美的字体、使 用优雅的图像和色彩，用户就更容易容忍系 统可用性方面的问题。
下面我们从设计理论的角度分析界面友好的判定 ：
界面友好即系统模型与心理模型具有良好的一致性。
第四章产品视觉形象设计的构成
n 我们先介绍三个概念：
心理模型：心理是存在于人们头脑中的关于一个产品应 该具有的概念和行为的知识。
实现模型：是产品的内部结构和工作原理。它存在于设 计人员的头脑中。
系统模型：是指产品的最终外观以及产品呈现给用户后， 用户经过观察或使用而形成的关于产品如何使用和 工作的知识。
这主要是因为实体用户界面与产品外观在对产品形象塑造方 面所起的作用是不同的：
产品外观中的形态、色彩和质感等都是对产品理念的一种单 向表达，并没有包含产品使用方式的信息；而实体用户界面对产 品理念的一种双向互动表达，包含产品使用方式的信息。从作用 深度来看，产品外观主要在视觉层面起作用，而实体用户界面则 主要在心理和行为层面上起作用。
第四章产品视觉形象设计的构成
目前人们习惯于用“界面友好性”这一抽象概念 来评价一个人机界面的好坏，但“但面友好”与“界 面不友好”恐怕无人能定一个确切的界线，一般认为 一个友好的人机界应该至少具备以下特征： n (1)操作简单，易学，易掌握； n (2)界面美观，操作舒适； n (3)快速反应，响应合理； n (4)用语通俗，语义一致。
第四章产品视觉形象设计的构成
第四章产品视觉形象设计的构成
第四章产品视觉形象设计的构成
第四章产品视觉形象设计的构成
第四章产品视觉形象设计的构成
第四章产品视觉形象设计的构成
从上面的各种表现内容看， 实体用户界面作为产品形 象视觉层面的一个部分， 还会在细节方面极大地影 响产品的外观（如图）。 但为什么不纳入产品的外 观中去？
n 2 界面视觉元素的规范 n 3 声音界面与实体界面和图形界面的一致性
第四章产品视觉形象设计的构成
EMP-ZII
第四夏章产新品u视觉8形0象7设计的构成
怎样评价一个人机界面设计质量的优劣，目前 还没有一个统一的标准。一般地，评价可以从以下 几个主要方面进行考虑： n (1)用户对人机界面的满意程度； n (2)人机界面的标准化程度； n (3)人机界面的适应性和协调性； n (4)人机界面的应用条件； n (5)人机界面的性能价格比。
第四章产品视觉形象设计的构成
4）声音用户界面（AUI, Audio User Interface）
声音用户界面就是通过在产品中使用过程中引入 声音而实现的人机交互界面。声音用户界面是对图形 用户界面和实体用户界面的有益补充，并与后两者共 同构成三位一体的人机互动方式。 其主要表现形式有： n 语音提示：主要是让人明白下一步该如何操作； n 事件铃声：是为了提醒使用者一项功能的开始或完成； n 背景音乐：既可以缓解对某项操作的过长等待，又可 以增加产品使用的乐趣； n 操作反馈声音：主要是让使用者明白操作的正确与否， 当然有时也是为了表现一种使用的满足感。
第四章产品视觉形象设计的构成
图形设计师Aaron Marcus设计了这两个颇具吸引力的界面。界面设计(a)是 为美国女性设计的，右面的界面(b)是为欧洲男性知识分子设计的。设计师 Marcus的思想是，欧洲男性知识分子喜欢“温和的散文，较为拘谨的信息分 布，古典的字体”相反地，美国女性“爱好更复杂的表现方式和弯曲的形状， 但是不喜欢过于豪放”。
n 2) 亲和性：界面应该亲切地邀请使用者进一步探索系统。
第四章产品视觉形象设计的构成
n 3)简单明了：使用者需要能迅速了解界面的架构，开 始使用它。不要使选单太杂，动画及图标不要使用太 难理解的隐喻，或需要太多想象的隐喻。
n 4)谨慎的使用颜色：颜色当然是高度有效的非语言方 法(例如同样是蓝色的指令应该代表着它们互相关联)。 但是如果随机使用，颜色能够让使用者转移注意力而 感到混淆。考虑使用相同色系但是深浅不一的颜色， 而非彻底对比的颜色。