界面交互设计教学设计

界面交互设计教学设计（通用8篇）

界面交互设计教学设计 篇1

在交互过程中，交互设计关系到用户界面的外观与行为，它不完全受软件的约束。界面设计师以及决定如何与用户进行交互的工程师应该在这一领域深入研究。在界面开发过程中，他们必须贴近用户，或者与用户一道来讨论并得出结果，所以他们的工作是较为辛苦但是最具有意义的。

另一方面，界面与软件代码的生成，代码本身的意义以及功能的实现是紧密联系的。因此编译代码的人同样也应该在这方面做深入的研究。过去，编码人员只是单独地进行软件研发，而缺少必要的美学知识和界面专门技术来处理交互的问题。不幸的是，最终的结果往往不是用户所期望的。对于用户而言，最好的交互方式让程序员去实现往往是最难的，由此矛盾出现了，这使得很多专家或者工程师肤浅地应付一些交互方面的问题。以至于在软件开发完成之后，这些专家和工程师惊讶地发现，用户对他们所实现的特征感到一片茫然，不知所措，通常选用另外一种方式进行交互。

要进行界面开发设计，用户分析是第一步。总所周知，进行任务和用户分析，以及相关调研的必要性和重要性。用户是计算机资源，软件界面信息的使用者，由于目前计算机系统以及相关的信息技术应用范围很广，其用户范围也遍及各个领域。我们必须了解各类用户的习性，技能、知识和经验，以便预测不同类别的用户对界面有什么不同的需要与反应，为交互系统的分析设计提供依据和参考，使设计出的交互系统更适合于各类用户的使用。由于用户具有知识、视听能力、智能、记忆能力、可学习性、动机、受训练程度、以及易遗忘、易出错等特性，使得对用户的分类、分析和设计变得更加复杂化。另外，为了设计友好而又人性化的界面，也必须考虑各类不同类型用户的人文因素。

基于上述诸多因素的影响和我们设计师自身的特点，在界面设计和开发中我们可以遵循一些的科学而合理设计原则和设计步骤，任何时候都不忘学习，并不断总结，积累经验，归结工作库。

以下我们可以借鉴人机交互中的一些原则和步骤

1.一致性原则

应该要求其概念模式、显示方式等的一致性，在类似的情况下具有一致的操作序列：如在提示、菜单和帮助中产生相同的术语;具体是指在不同的应用系统中都具有相似的界面外观、布局、相似的交互方式以及相似的信息显示等。界面设计保持高度一致性，用户不必进行过多的学习就可以掌握其共性;还可以把局部的知识和经验推广使用到其他场合。人机界面设计的一致性要求对构成易学易用是极为重要的，

2.提供信息反馈

交互系统的反馈是指用户从计算机一方得到信息，表示计算机对用户的动作所做

的反应。如果系统没有反馈，用户就无法判断他的操作是否为计算机所接受，是否正确，以及操作的效果是什么.反馈信息的呈现方式可以是多种多样的，如文本、图形和声音等。

3.合理利用空间，保持界面的简洁

在界面的空间使用上，应当形成一种简洁明了的布局。界面设计最重要的就是遵循美学上的原则——简洁与明了。

那么再来看看步骤：

(1)用户调研，拟定需求，初步建立界面原型

(2)任务分析 根据任务的复杂性、难易程度等，详细分解任务动作，进行合理分工，确定适合于用户的交互方式;

(3)环境分析 确定系统的硬、软件支持环境及接口，向用户提供各类文档要求等;

(4)成本/效益分析 根据需求分析、任务分析、环境分析等，分析实现界面形式所要花费的成本/效益，如开发成本/效益，用户要花费的成本/效益等，以便选择合适的开发设计途径; ’

(5)确定界面 根据用户的自身特性.以及系统任务、环境、成本/效益，确定量为适合的界面类型：

(6)屏幕显示和布局设计 制定屏幕显示信息的内容和界面显示的次序，然后进行屏幕总体布局和显示结构设计

(7)进行艺术设计完善 包括为吸引用户的注意所进行的增强显示的设计，例如，采取运动，改变形状、大小、颜色、亮度、环境等特征(如加线，加框、前景和背景设计等)，还包括创新的设计以增加亮点，或者应用多媒体手段等;

(8)帮助和出错信息设计 决定和安排帮助信息和出错信息的内容，组织查询方法， 井进行出错信息、帮助信息的显示格式设计;

(9)原型设计 在经过初步系统需求分析后，开发出一个满足系统摹本要求的、简单的、可运行系统给用户试用，让用户进行评价提出改进意见，进一步完善系统的需求规格和系统设计;

(10)综合测试与讦估 这个阶段的关键任务是通过各类型的测试与评估，使系统达 到预定的要求.它可以采取多种方法，如试验法、用户反馈、专家分析、软件测试等，对软件界面的诸多因素如功能性、可靠性、效率、美观性等进行讦估，以获取用户对界面的满意度，便于尽早发现错误或者不满意的地方，以改进和完善系统设计。

(11)维护阶段 维护阶段的关键任务是：通过各类必要的维护活动，使系统持久地满足用户的需要。

界面交互设计教学设计 篇2

关键词：网络,科普,交互,界面设计

互联网的普及和快速成长为科普创作提供了一个新的媒介和平台, 网络平台上科普作品的阅读是通过计算机和计算机程序的使用来实现的, 与传统的书籍、报纸、影视等科普作品相比, 创作者可以采用结合文字、图形、图像、声音、视频、动画和动态交互等等更加丰富的元素进行设计和创作, 创造出更加直观、生动和易于理解的科普作品。网络特有的“交互”功能更是为网络科普提供了一个新的创作方向。交互性是互联网络媒体最大的优势, 它不同于传统媒体的信息单向传播, 而是信息互动传播, 用户可以获取他们认为有用的信息。[1]通过交互形式创作的科普作品可以创造一个由读者主动选择与参与, 能够激发好奇心的互动学习情境, 其中, 游戏互动的方式在网络科普设计与制作中越来越受到重视, 2010年11月25日在北京举行的第二届严肃游戏创新峰会的主题就是“科普游戏”。[2]网络科普创作无论采用那种表现形式, 与读者的交流都是通过用户界面来实现的, 界面设计关乎网络科普作品直接呈现给读者的形象和面貌、以及浏览者的用户体验。网络因其开放性和用户多样化使得网络科普的目标受众分布广泛, 就单个网络科普作品而言一定要就其目标受众进行群体分析, 在目标群体特征分析的基础上才能进行交互设计, 但是网络科普作品有其共同的特点, 在这里仅就其共同的特点进行讨论。

网络科普创作的目的是传播科学知识、科学方法、科学思想和科学精神, 使其被公众理解和接受, 因此网络科普的交互过程可以理解为知识的传授与接收的过程。网络科普的交互设计要解决的首要问题是这一整个知识的传授和接收过程的构架和逻辑, 即对网络科普主题知识内容进行讲授所需要包含的全部页面, 和这些页面的层次和关系;其次是每个页面所包含的知识信息的前后、主次关系等等, 也就是页面的布局设计。通过这个交互过程, 要让读者也就是浏览者获取知识的过程流畅通顺, 通过良好的交互设计增加学习的乐趣。

一、交互模式

优秀的网页设计必须具有良好的导航设计, 使得网站的层次结构有条理地展示出来, 让浏览者能够轻松地了解网站内容并找到需要访问的页面。这个导航设计, 反应在网络科普作品的交互设计中, 就是知识体系导航。它可以由主导航, 二级导航目录和三级按钮组成。从传授与学习的角度出发, 网络科普导航系统最好不要使用超过三级层面的架构, 因为读者初次访问时, 对知识主题和作品形式都不熟悉, 互动的方式又使得浏览者阅读的随意性增大, 太多的结构层次会导致浏览者在浏览过程中迷失, 这既有可能造成知识认知的混乱, 也有可能造成继续访问兴趣的丧失。在这个知识体系导航系统中, 知识点导航的功能最好尽可能地出现在每个页面中, 以方便浏览者能够随时进行对其他感兴趣知识点阅读的选择, 或者跳转到同级别的内容进行比较等等的操作。比如美国国家航天航空局 (NASA) 为纪念航天飞机服役30周年和最后一次飞行而特别制作的网站中, 关于航天飞机知识介绍的科普页面 (如图1) 采用的是在页面跳转后也保持不变的水平主导航条, 包括欢迎、大事年表、航天飞机系统、航天飞机的数据、出仓, 发射、飞行员、纪录片和留言等按钮, 一目了然地把所要介绍的主要内容都呈现出来;在进入页面后, 二级目录主要采用的是固定在页面右边的垂直目录, 也非常直观, 对航天飞机感兴趣的浏览者从这些导航中可以直观地建立知识体系模型, 在访问中了解各个方面的知识数据, 不会产生迷失感。

网络科普游戏的交互设计则可以采用问与答的模式, 但是采用问答模式要注意避免考试化。和传统科普作品如《十万个为什么》相反, 网络科普游戏会向浏览者提出问题, 然后提供答案的选择和对错的提示。虽然浏览者还不太清楚答案也就是要学习的知识, 但是未知性可以驱动好奇心, 给学习增加乐趣, 同时选择答案的过程也是思考的过程, 这增加了学习的主动性。比如澳大利亚ABC广播公司网站的科学频道中以食品保鲜为主题的互动游戏 (如图2) , 这个游戏让浏览者在厨房环境中通过选择和点击相关的物件激活对话窗口, 从而向浏览者提出一个与这个物件相关的食品保鲜问题, 同时列出三个问题答案以供选择, 如果选择的答案是正确的, 就会有一个进一步阅读的按钮, 点击这个按钮就是答案的进一步图文的解释。通过寻找可以被激活的物件和回答提出的问题的过程, 既有趣又学习到了知识。科普游戏以传播知识为主, 多数科普游戏与其他游戏比较相对简单, 但是即使采用的是显而易见的形式, 也要注意提供帮助页面、以及返回和关闭按钮。因为网络环境是开放的, 互联网的浏览者可以是任何人, 帮助页面可以向浏览者解释如何进行游戏, 而返回和关闭按钮可以帮助浏览者实现回到之前的页面或者主页面寻找相关的介绍或者进入其他页面学习等等的功能。

国内的数字科普网站建设通常集合了很多主题的科普知识, 每个主题的内容不同造成页面的设计风格上会有各自的特点, 但是一个网站内的科普作品在进行交互设计的时候应该要注意保持界面的一致性。当然, 这个一致性并不是统一和一层不变。当浏览者初次访问该科普网站时候, 通过操作和应用往往会建立网站空间的认知模式, 如果整个网站环境的交互设计保持一致, 就可以帮助浏览者建立空间记忆, 当他们访问这个网站其他主题科普内容的时候, 他们就可以在类似的位置找到类似的功能, 这减少了记忆负担, 作品的实用性就得到了提高。

二、美术风格设定

在信息化社会, 视觉设计围绕释放和传递信息、对话与交流的功能展开。视觉传达要力求以集约化、符号化的形式表现最深刻最丰富的内容, 通过高度精炼的图形符号和易于理解的构图秩序传达预想的意义。[3]那么在视觉化的时代, 如何做好网络科普作品的风格设计?对于这个问题的解答要同时考虑科普的科学性和人文性。网络科普是在遵循科学的特征、表达科学特性基础上, 创造性地把职业科学的真理性、客观性以适应大众接受能力的通俗性、易理解性的方式进行传播从而为大众所掌握。[4]因此网络科普作品的设计与其他网页设计不同, 一定要注意科学性, 避免夸张化和过度艺术化, 要求真实地、客观地描绘科学知识, 页面设计要能直观和快速地传递科普知识主题内容。不到位的设计不仅不能实现科学性, 还会使得浏览者在访问的时候不能进入知识情景, 产生不知所云的的感觉。创作的时候, 要在对主题透彻了解的基础上, 围绕主题营造氛围和进行色彩设计, 通过符合主题情境的图形图像素材抓住浏览者的视线并传递信息, 保证信息传达的快速、准确、有效, 做到明确而自然。江西数字科技馆的景德镇陶瓷历史馆设计 (如图3) 是围绕景德镇的青花瓷展开的, 首页页面设计采用青花瓷的图案风格进行设计, 内页则以一个个博物馆展示窗展示陶瓷作品的方式呈现, 每个陶瓷作品的详细介绍页面是以淡雅的青花瓷照片为背景, 整个设计风格统一雅致, 把浏览者带入景德镇制陶久远的历史中去。中国数字科技馆铁路博览馆精品互动版 (如图4) 主要对铁路的运行基础进行介绍, 它的首页以坐在火车上的乘客视角所见来组织画面, 从地图、火车模型、火车窗外所见的铁路沿线风景为背景对与铁路运行基础相关的铁路路线、铁路桥梁和铁路车站进行介绍;铁路路线、铁路桥梁和铁路车站的页面采用三维模型结合真实环境图片模拟铁路运行环境从而呈现要介绍的知识内容。通过对江西数字科技馆景德镇陶瓷历史馆和中国数字科技馆铁路博览馆的访问, 可以看到这些页面通过图形图像的有效组织, 科学地、生动地阐述了知识主题。

三、页面布局元素

当一个网络科普作品的风格确定后, 就进入具体的页面设计, 页面设计通常包含页面布局、图形图像、图标、按钮、色彩、文字等视觉元素的设计, 只有这些视觉元素都统一在整个主题风格之下, 界面设计的任务才能很好的完成。网络科普作品的学习性决定单页页面一般包括首页、简介及目录结合的页面、和单个知识点的描述页面, 网络科普作品的页面布局更像PPT幻灯片而不是网页, 每个文本框单次展现给浏览者的文字数量最好不超过200字, 可以采用上下按钮或者滑动条按钮的方式进行翻页阅读的方式来处理;单页的空间布局主要协调解释性图片图像、图标、文本窗口、文字和按钮这些元素和背景的关系, 做到突出重点、塑造细节, 使整个页面左右均衡构图协调, 和谐地构成整个学习情境。

研究表明人与事物接触最初的印象来自色彩, 因此浏览网络科普作品时浏览者的第一认识不是来自页面的具体结构和内容, 而是来自色彩搭配形成的视觉效果, 人们还会对色彩视觉效果产生情感认知和联想, 因此色彩设计是非常重要的环节。从某种程度看, 大多数人对色彩认知和联想是一致的, 如果页面采用人们已认知的色彩会让人们在初次访问时, 对它的主题产生共鸣和信赖感, 例如一个以妇幼保健为主题的网络科普, 人们会联想到家庭、健康、关爱等等, 而这些联想的事物共同色系是暖色系。当遇到像传染病、火灾这样的主题, 在整体风格设计和色彩设计的时候要注意避免产生阴沉、压抑和恐怖的气氛, 因为科普的目的在于让人们通过学习掌握相关知识、科学地和理性地面对传染病和火灾这样灾难性的主题, 而不是通过这些知识的学习愈加地产生恐惧感, 以至不能理性地分析问题解决问题。在确定主色后, 辅助色的选用最好不要超过3个, 以避免杂乱和花哨。主要内容文字的色彩一般采用黑、白色或者深的有彩色, 与文字窗口的背景颜色形成对比, 避免产生阅读困难, 做到减少阅读时的眼部疲劳。

在网络科普中, 也要善用图标这个设计元素, 它可以通过写实的或者抽象的图形快速地表达事物的含义, 对一些晦涩难懂的知识形象、生动地进行诠释;在设计中重复使用图标, 使浏览者形成记忆和识别, 可以提高互动体验的品质;图标在网络科普页面中还可以成为具有意义的指示牌。按钮设计通常采用文字形式、图标形式和两者的结合, 网络科普的按钮设计要直观、明确、符合知识主题要求, 带有相关语义的图标按钮, 可以给浏览者提示:这个按钮将带领浏览者进入怎样的知识内容页面, 从而引导浏览者的阅读。点击互动将会产生什么效果, 通过不停旋转的按钮提示访问者点击, 鼠标经过这些按钮的时候, 介绍和其他设计一样,

文字是最直白的符号, 网络科普即使采用多媒体的方式创作, 也离不开大量文字的介绍, 在界面设计中, 这些文字包含名称性文字、指示性文字和内容性文字。名称性文字和指示性文字可以在整体设计风格的框架内进行艺术化处理。内容性文字是页面中数字量最大的文字部分, 在对这些文字进行排版的时候要注意行距、字距和字体大小, 这些参数要适应网络科普的平台计算机, 即不同屏幕大小和显示大小对字的识别的要求。

四、结语

利用网络媒体进行科普创作越来越受到大家的重视。利用网络媒体互动优势的网络科普创作是一个系统工程, 通过整合理顺要讲授的知识内容, 建立清晰的页面结构, 并通过页面布局、充分利用各个设计元素以实现互动和交流, 动画演示和游戏参与使得这个工程更加的生动有趣, 这一切都有赖于互动界面的良好设计。让人们毫不费力地完成学习任务, 在学习过程中感觉流畅, 尽情享受探索新知的乐趣, 这需要通过大量艰苦的设计工作。创作科学地、人性化的网络科普作品是一切努力的最终目标。

参考文献

[1]师高民, 李鹏, 杜秀玲, 马宁.网络广告设计[M].合肥:合肥工业大学出版社, 2009:31.

[2]冯婷婷.科普, 严肃游戏新方向——第二届严肃游戏 (北京) 创新峰会侧记[J].中关村, 2011 (1) :76-79.

[3]王亚萍.视觉传达设计的符号学解读[J].艺术研究, 2011 (1) :118-119.

产品的界面交互设计探析 篇3

引 言

当今的产品设计不仅作为审美观念阐释，而更多的关注人类的情感与行为以及对社会发展进程的预测与控制，而交互设计正是链接艺术与生活、科技与时尚的桥梁和纽带。现代产品的功能日趋复杂，所呈现的信息量剧增。大多以触摸屏为操作界面，并且搭载了智能系统，人们在使用的时候感到有挫折感。在体验经济中，设计的目的并不仅仅是设计一种创新的产品，消费者消费的不再是只局限于实实在在的产品造型、功能和触觉，而更多的是一种感觉，一种非物质层面上的生理、心理的体验，享受设计带来的乐趣和新感觉。

设计现状分析

当下界面设计领域在苹果公司引领下流行华丽的、半透明的界面设计。很多产品在界面实验上花了很大的气力来增强界面的视觉冲击，但这也是出现问题的根源。伴随着巨大运算量，使得当时大多数电脑无法很好的兼容。首先，用户的机器性能参差不齐，其次，多数用户通常会使用一台电脑实现多任务的功能操作，安装大量的应用软件，最终使得电脑系统臃肿不堪。可见功能对于用户来说是排在首位的，因此做好界面设计与软件性能的平衡非常重要。

交互界面设计原则

随着科技的发展，电子设备成为人类生活及交流的重要工具，软件界面作为人机交互的窗口，决定着用户的体验和使用效能，界面设计已经成为一门重要的设计学科[1]。交互界面设计方法包括数据如何在平面上与自身交互，以及用户与数据操控和展示之间的交互。

1. 功能至上

亨利·凡·德·威尔德明确提出了“功能第一”的设计原则，奠定了现代设计理论的基础。美国芝加哥建筑派的领军人物路易斯·沙利文，他提出“形式服从功能”设计原则[2]。 “功能至上”在界面设计中的具体意义就是要以软件的主要功能为核心，试想如果软件连最基本的功能都不能实现或者不能高效流畅实现的话，再华丽的界面都是多余。因此，“功能至上”应当作为软件界面设计的基本原则被遵守。

2. 简约直观

设计师制作交互界面、交互系统是为了让人们能够通过对界面的操作来完成他们想要做的事，而不是只为了创造视觉上的感受。从根本上讲，一个好的界面设计应该拥有明确的视觉导向系统，能够很好的引导用户去浏览需要的资源。一个是否具有人性化设计的界面，直接关系到应用系统的性能能否充分发挥。

3. 可持续意义

近年，设计界越来越重视关注人类长远发展可持续设计[3]，界面设计目的就是服务于用户，给用户带来极佳的使用体验。优秀的界面设计要通过长效发展设计的系统概念，深入分析用户可持续的使用行为与消费心理，通过围绕核心任务，满足视觉方面的用户体验要求的同时，更要保证与产品匹配的效能与效率，进而减少产品制作与实现过程所消耗的时间成本，深度考虑产品更新换代的可移植性等方面，进行系统可持续的设计规划。

4. 情感化意义

情感是人类所特有的，也是最丰富和最能够表达人的内在欲望的。界面设计是一个比较复杂的学科，在心理学、设计学、语言学等学科都充当着重要的角色，情感化设计最终的目的也在于把握用户的情感，诱发潜在的购买欲望，不仅使用户能够获得心理上的情感愉悦，也让商家达到获得最大利润。所以，将“情感化设计”理论导入到交互界面设计中这一想法，不仅符合交互界面设计的根本要求，也更好的体现以人为本的“人性化设计"这一设计理念。

5. 用户参与行为

设计界面是被用户使用的。所以在设计过程中要时刻贯彻以用户为中心。其核心理念就是：用户清楚他们需要什么样的产品和服务，最清楚他们的需要和使用偏好，而设计时就要根据用户的需求来进行设计，主张用户参与产品的设计的全过程。交互设计思想在领域的影响不断深入，优化了产品设计部门及人员构成，提出工业设计师、交互设计师与其他设计人员共同协作的以交互设计思想为核心的设计流程，它为设计开发提供了一条新的思路。

结 论

信息时代的设计正在由工业时代的物质设计转向新时代的非物质设计。用户体验和人性化、个性化、情感化设计正在成为新时代人们所关注的对象。界面交互设计的发展，提升了产品与使用者之间一种的情感上的沟通，给人们带来更多的使用体验记忆和乐趣，让产品引起人们的情感共鸣，满足人们心理和精神层面上的需求，让人们能更好地使用产品，从使用所带来的体验中捕获用户的心。交互界面设计顺应时代发展，体现科学技术高度又关注用户需求，给产品带来强有力的生命力，把产品设计带入一个新的境界。

移动界面设计的一些心得交互设计 篇4

跨平台界面是一种观念的错误

跨平台界面是一个从未实现的幻想，是否记得 Java Swing？它许诺在任何运行 Java 的平台统一界面，而这个许诺从未兑现，为什么？

跨平台 UI 糟糕透顶。跨平台 UI 意味着它在任何平台的视觉和感觉都很糟糕。

因为人们喜欢自己平台的特殊性，如果你想为某个平台开发应用，必须深入了解每个平台的特点。跨平台界面意味着你的界面在任何平台都像一个异类，这不仅仅是按钮和窗口的问题，也不仅仅是风格和配色的问题。根本没有“一个尺寸，适合全部”的界面。

网页是一个例外

游戏是一个例外，但这个可以先放下不谈。如果说有一种界面能够跨平台，那就是网页界面。这是因为人们已经习惯了网页界面各有不同。

当用户打来浏览器的时候，他们知道自己进入了一个充满不同的领域。

这正如你进入了一个书店，你知道自己会看到不同尺寸、不同排版、不同颜色的书籍和杂志，这就像是多彩的网页一般，充满了不同的界面设计。但是，如果你看到图书系列中的某本图书排版不同，或者杂志的下一期突然改变了排版，你会感到惊讶，这种惊讶就像是在原生应用中突然看到了跨平台的界面。

因此，用户的心理期待的差异带来了不同的效果。显然，网页给开发者提供了跨平台的自由。他们可以开发一套在所有平台运行的通用界面，而且不遭受批评。只是需要注意一个问题，不要模仿原生应用。

如果你模仿原生应用，用户会期待着它和原生应用完全一样，而网页应用常常满足不了这种期待，更糟糕的是，模仿一个平台上的原生应用，在其它平台上看起来反而成了一个异类。

应该怎么做?

构建一个与平台无关的界面和体验（UI 和 UX）……以非原生来使你的用户惊喜，但是要增加功能、动画，易用性，这些是他们使用网页应用时没有心理期待的东西，

电脑资料

移动界面呢？

同样的道理，用户不喜欢看到其它平台的模仿品，网页应用不要模仿原生应用。或者说，不要制造那种快捷方式的应用，在用户看来，主屏幕上的图标就是应用，他们不在乎具体的实现细节。他们会期待这是原生应用，而他们会失望。

在移动设备上使用网页技术模仿原生界面，只能带来失望。

你有充分的自由去创造出色的、独特的界面。如果你模仿原生界面，用户会将你花费心思使用的技术当做理所当然，当他们看到你的应用不如原生的流畅，他们会失望。

原生还是网页？

首先问自己一个问题，“我想用这个应用达到什么目的？”如果你没有明确，不要去做。

人们希望应用是有用、漂亮、令人惊异或者有娱乐性的。如果它不符合以上条件，不要花费心思去开发它……如果你想要开发一个应用，开发一个你也想要使用的应用。否则，不要去想这个问题。

如果你想把应用放到 App Store，用户会期待它和原生应用一样的速度，界面和体验。坦白的说，最简单的方法是做原生应用。

网页技术构建应用更加简单和快速是一个神话。它很可能花费更长的时间，而用户体验仍然更加糟糕。构建一个简单的原生应用反而更简单。如果你用网页技术构建的话，可能更加复杂（如果你试图去模仿原生的话。）

如果你非要那么做，可以去试试 Appcelerator Titanium 或者关注一下 Strobe。使用一个专业的平台可能会减少你的麻烦。

当然，App Store 更容易获得回报。如果你对回报不是很急切，或资金不足，可以考虑开发一个移动网页或者网页应用。出色的网页应用同样是一个挑战。

一些大公司，比如 Google 和苹果会同意一个统一的网页应用标准吗？可能性不大，它们对跨平台开发的兴趣不大，而对应用的平占性更加有兴趣。

结论

如果你想要最好的用户体验，去开发原生应用吧。但如果你不喜欢 App Store，而你的应用不会因为缺失原生界面和功能而失色的话，开发一个出色的网页应用，但不要模仿原生界面。

界面交互设计教学设计 篇5

免费元素

软的UI工具包：免费的PSD模拟网页设计

一个样机常见的网页元素的设置，由Adrian佩尔蒂埃设计和六个修订提供。

透明玻璃的用户界面：用户界面设计的免费的PSD

这黑暗的UI元素所PixelsDaily创建的，也是由六个修订提供。

免费赠送：现代用户界面包的Photoshop PSD

一个现代化的，与一些简单，基本要素的极简的用户界面工具包。

免费赠送：大量的Web用户界面和按钮设置

这个Web UI工具包包括从MediaLoot色泽鲜艳的按钮，信息箱，​​面包屑，搜索表单，和许多其他元素。

Web UI的宝物公益金V1.0

该套件包括为您的设计超过100个元素，包括横幅，按钮，工具提示，徽章，以及更多。

Web窗体元素

一个灰色和金色的网页表单元素，包括文本区，按钮和下拉菜单。

Web窗体元素VOL.2

一个灰色的网页表单元素的设置，包括滑杆，下拉菜单，制表符，和更多。

得到了木？UI设计元素

木纹的外观与100多个现代化的UI元素组成的一个工具包。

斯诺的UI工具包

这从MediaLoot的UI工具包具有与暗蓝色，灰色的口音静音的灰色的配色方案。

黑暗神秘的网页元素

是专为与黑暗和高风格的网站使用这一套的设计元素。它包括搜索栏，分隔符，按钮，音频播放器元素，等等。

黑色的UI工具包

黑色的UI工具包中包含有光泽，黑色和蓝色的元素，包括大量的媒体控制。

Moonify用户界面

Moonify是一个UI元素，其中包括一个搜索栏，评级明星，以及一些基本的形式元素。

蓝色和白色的GUI工具包

柔和的蓝色和白色的UI元素，包括形式输入和按钮。

黑UI元素

一个光泽的黑色和鲜艳的蓝色UI元素的设置，包括滑杆，按钮，下拉菜单，和文本输入。

“灰度”的UI工具包

灰度是一套浅灰色的形式UI元素。

固体的UI工具包

固体的UI工具包，给它复古科幻看看，一个金黄色的配色方案。

暗UI元素集

，略带光泽的暗紫色加载栏按钮和UI元素。

电子商务的步骤用户界面

这里的元素是专门设计作为一个电子商务结帐过程的第二步。

“书法”GUI元素

一套UI元素，灵感来自中国书法技巧。

“棕褐色”的用户界面元素

一个与他们的古董，但干净的感觉，棕灰色的表单元素。

布卢姆的UI工具包

绽放的UI工具包包括按钮，输入的形式，滑块，。

苹果风格的用户界面元素

一个苹果灵感元素，包括按钮和表单输入。

纹理警报

一个透明的警报样式的设置，与多变的颜色和一个可移动的纹理覆盖。

页眉和导航包

三个导航/标题样式。

简单的UI元素

一套通用的极简，圆润的UI元素。

漂亮的小搜索字段

这些漂亮的小搜索字段有两种样式（圆形和方形），三种不同的配色方案。

添加到购物车按钮

一个在三个柔和的色彩添加到购物车按钮，

简单的标签导航

一个简单下拉菜单的选项卡式导航屏蔽门。

暗扣导航2

一个黑暗的导航按钮设置水平或垂直菜单。

透明的工具提示

一个在四种颜色的透明度工具提示，从优质像素。

整洁的滑杆 – 免费的PSD

复古滑块与镀铬按钮和黄色口音。

极简水平导航

微妙的着色和真棒状态设计简单的导航元素。

圆润的下拉菜单

一个黑暗的下拉菜单按钮。

花式滑块及切换

一个华丽的多色滑块与镀铬结束。

一个最低限度的日历组件

一个简单的蓝色和灰色的日历部件PSD。

表善套件

表善套件是一套简约，但大胆的表单元素，包括输入域和按钮。

绿色联系表

一个简单的，现代的绿色联系的形式，图标和一个提交按钮。

模式对话框联系表

一个最低限度的模式对话框的联系表格。

登录表单PSD

一个高度风格PSD登录表单。

在表格的快速登录

一个短，简约的符号形式，在蓝色和灰色。

老式通讯表

一个古典风格的新闻注册表格。

一个清洁的登录框

一个白色和静音红色简约的登录框。

所有在一个Web元素套件

一个暗灰色，红色，蓝色，绿色的巨大集合中的元素，这个套件包括按钮，滑动条，以及多种内容样式。

维克多元素

复古风格的UI元素的设置，包括滑杆和按钮。

迷你画廊

PSD图片廊元素。

包裹和丝带包

一套色带和包装效果PSD文件。

设计元素

此包包括搜索的投入，按钮，滑块，下拉菜单，更。

大块UI

大块的用户界面包括一个大胆的元素，包括一个搜索框，滑块，评级星，和一个下拉按钮数量。

免费赠送：现代Web UI设置

这一套黑色和灰色，略带光泽的UI元素，包括导航，按钮，滚动条，板，和面包屑。

轻UI元素

一个浅灰色的元素，包括按钮，媒体播放器控件，和面包屑，与各种丰富多彩的口音。

春天的GUI

一个绿色的元素，包括按钮和下拉菜单，其中包括设置。

网页元素

一个黑暗的，多种颜色的元素，包括滚动，搜索领域，下载按钮，并。

视频播放器

一个灵活的视频播放器铬。

高级要素(收费)

光荣颜色的UI工具包（$ 6）

一个颜色鲜艳的UI元素的设置，包括滑杆，转换开关，按钮，以及更多。

灿若繁星的UI工具包（5元）

一个发光的UI元素，包括表单元素，分离器，按钮，以及更多。

简约滑块造物主​​（400）

包含70多个创建滑块，包括阴影，帧，插图，多元素。

缝合的网页元素（$ 5）

套装包括一个登陆框，订阅框，下载按钮，等等，并在四个不同的颜色。

微妙的网页元素II（$ 5）

复古风格的元素设置一个微妙的色彩方案，包括明亮的蓝色和橙色的亮点。

白无华网页元素的V3（3元）

干净清爽的白色和浅灰色元素。

网页元素包（5元）

设计师常用界面原型设计工具 篇6

GUI Design Studio

* 最新版本：4.5

界面模型设计中很实用的一个工具GUI Design Studio，可以让界面示意图实现基本的交互，便于演示、交流。推荐需求、软件界面设计开发等界面原型相关人员使用。

GUI Design Studio提供的了大部分C/S、B/S组件的示意图，可组合使用，在一般软件界面模型设计阶段基本可以满足需要。

Axure RP

* 最新版本：6.5

无疑是目前最受欢迎的快速原型设计软件，它是一套专门为了网站或者应用程序策划所设计的辅助工具，可以让应用网站策划人员或网站界面设计师，更快速且更简易的建立Web AP和Website的示意图、流程图、原型和规格。

Axure借鉴了office的界面，能够让用户快速上手，并且提供了丰富的组件样式修改，使得通过其能够创建低保真、高保真甚至接近于实际效果的界面。

然而最让人称道的是，Axure的丰富的脚本模式，可以通过点击和选择能够快速完成界面元素的交互，如链接、state切换、动态变化等效果，使得

Axure能够生成十分接近于真实产品的原型。另一方面，Axure能够导入其他人创建的元件库，使得Axure能够满足绝大多数类型产品的设计。

虽然现在Axure RP已经流传有汉化版，但对于中文的支持仍然不太友好。在小部分元件上输入的时候，经常需要像碰运气似的反复切换输入法，破坏了设计师的用户体验。

另外，界面交互设计师还用到的一些原型工具有VISIO、Mockups、Dreamweaver、Pencil sketch等，这里就不一一赘述了，有兴趣的都可以尝试一下。

总结

这两个原型设计工具都非常好用，各有千秋。Axure

RP多是基于页面的原型设计，对于web网站尽管很实用，但是对于软件界面的流程设计却略显繁琐。而GUI Design

Studio却另辟蹊径，直接以建立元素与元素之间关联的方式来自动化的创建动作流程，很大程度上提升了软件界面原型搭建的效率。

最后我想说明的是，不管你是推崇手绘，还是喜欢用原型软件，做界面设计最重要的还是想法，工具只是用来帮助实现想法的。不必过于追求技术，也不必过于追求视觉表现，你只需要专注于产品逻辑、页面交互、布局结构这些，其余的就交给美工吧!

原作者：mayz

界面交互设计教学设计 篇7

在开发应用软件时,用户通过软件的界面和程序进行交互,这种交互通过消息来实现,Windows程序是基于消息和事件驱动的,用户通过事件和程序进行交互,在Windows程序中需要一些界面来接收用户的输入的信息或数据,同时对用户提交的事件作出响应,其中控件是在系统内部定义的用于和用户交互的基本单元。作为用户而言,希望软件的界面不仅友好而且美观。Microsoft Visual C++提供了基于对话框、单文档、多文档的界面设计,对话框是Windows应用程序中最重要的用户界面元素之一,是与用户交互的重要手段。VC++本身可以通过封装的函数对软件的界面进行设计,这种设计一般是通过CDC类的画图函数来实现,对于各种控件的显示外观,可以用DrawItem函数进行设计,给控件加载漂亮的图片,但是如果单纯地使用Microsoft Visual C++制作程序界面在应用中存在一些问题,主要表现在:(1)设计的界面不够美观,经常会存在刷新时显示不正常的问题;(2)程序复杂,如果想要比较美观的界面,则需要编写大量的代码来控制界面的显示和刷新;(3)程序中包含界面的显示和事件的响应代码,模块化程度低,不利于软件的升级和维护。目前,有很多第三方的换肤软件,可以设计很专业的软件界面,在这些换肤软件中,功能最强大的为SkinMagic,它是制作皮肤的界面库,支持Windows常用控件及窗口,可以方便地设计出美观的应用程序界面。

2 优势

SkinMagic软件是一款基于VC的界面编辑软件,SkinMagic提供可视化的编辑工具SkinMagicBuilder软件,应用它可以设计软件启动界面、软件框架、界面中各种控件、菜单、滚动条及状态栏等,SkinMagicBuilder提供了强大的界面编辑功能,不需要编写代码,设计的界面美观、友好。设计好的界面作为皮肤文件保存,可以通过VC中调用SkinMagic提供编程接口将皮肤文件导入应用程序中,并非常方便地对界面上各种控件进行控制。由于界面的设计工作和程序的编写工作分离,可以由美术功底好的人员专门设计界面。对界面的设计人员不需要掌握编写程序的能力,设计好的界面提供给程序员,供程序员调用。SkinMagic提供了函数库和消息支持作为VC中控制皮肤的接口,可以使用户方便地对皮肤进行控制。由于界面设计和功能代码分离,当界面改变时,如果功能没有变化就不需要改写代码,因此,应用程序不仅界面美观,而且程序模块化程度高,可移植性好,大大减少了程序开发和维护的工作量。

3 基于SkinMagic的皮肤设计

3.1 设计皮肤文件

SkinMagic是一款很好的换肤工具,是专门设计皮肤的可视化开发工具,皮肤上可以显示任意设计好的BMP格式的图像,所以可以先采用专门的图像处理软件如PhotoShop设计好用于显示的多幅位图图像,然后运行SkinMagicBuilder,通过文件菜单建造一个皮肤工程,有几种窗体类型可以选择,选择好窗体以后,就可以通过右侧的窗体设计视图为窗体的不同区域指定显示的图像。需要指出的是,这些图像必须首先通过文件菜单的Import功能导入到该项工程中。

3.2 设计控件

如果采用皮肤的方法做软件的显示界面,需要的控件也可以在SkinMagicBuilder中进行设计,工具条和按钮等控件则作为皮肤对象来管理,控件的显示状态可以通过右侧的SkinFrameWindow视图来设计。首先导入设计好的图片素材,通过控件的设计窗口可以将各个状态设计成显示不同的图片。SkinMagic的另一个优点是包含自定义控件功能,用户可以通过SkinMagicBuilderc的custom control功能自定义包含相应属性的控件。每一种属性支持font、string、color、imagerect、imagesection、integer、bool、dword、enum、texteffect等数据类型。当custom control定义好以后,就可以像标准控件一样通过拖拽的方法生成多个类似的控件。

4 通过VC控制皮肤文件

4.1 初始化SkinMagic库

在应用程序中使用皮肤之前要在InitInstance函数中通过添加函数VERIFY(1==InitSkinMagicLib(AfxGetInstance Handle(),NULL,NULL,NULL))初始化SkinMagic库,然后

通过LoadSkinFile函数载入皮肤文件,根据程序是框架型还是对话框型调用SetWindowSkin或者SetSingleDialogSkin函数来设置软件的皮肤。

4.2 皮肤控件的使用

应用程序中,皮肤上定义的控件都有唯一的ID号,通过控件的ID号来区分控件的消息。根据ID号定义该控件的消息响应函数,自定义控件的使用与这些SkinMagic中封装好的控件有些不同,需要首先调用RegisterSkinWindow函数对自定义控件进行注册,这样在皮肤上才会显示它,SkinMagic用WM_SKINDATACHANGED消息通知控件它的皮肤数据发生了变化,用户要编写该消息的响应函数ON_MESSAGE WM_SKINDATACHANGED,OnSkinDataChanged),当程序退出时,用户还要用UnregisterSkinWindow函数释放自定义控件。

4.3 释放SkinMagic资源

应用程序退出时应重载ExitInstance()函数,添加代码

ExitSkinMagicLib()来释放SkinMagic资源。

5 结语

在编写程序中,一个好的应用软件不仅要界面美观,而且软件的模块化、可移植性和维护性要好,利用好这样辅助开发工具,可以避免编写大量的底层代码,不仅在开发时可以减少工作量,也可以方便于以后的软件升级,在应用中软件也不容易出现运行错误。

摘要：阐述了利用现有的界面编辑软件和编程语言开发应用程序的方法,该方法不仅可以使程序界面美观,而且可以使编程工作相对减少,有利于软件的升级和维护。

关键词：界面设计,SkinMagic,VC++

参考文献

[1]SkinMagic用户帮助手册.

[2]谷保山.Visual C++6.0编程与实例[M].北京:科学出版社,1999.

[3]郑阿奇,等.Visual C++实用教程[M].北京:电子工业出版社,2000.

[4]尹立民,王兴东.Visual C++6.0应用编程150例[M].北京:电子工业出版社,2004.

界面交互设计教学设计 篇8

关键词：界面交互；体验设计；服务；大数据

界面交互是将系统计算的行为和状态转换为一种用户能够理解和操作的表达，这里所说的界面交互，主要包括图形用户界面，实体用户界面，以可视化和自然交互为主的虚拟现实，虚拟感触的数字化界面等，是信息交流由被动接受转化为主动交互参与，它是涉及一切交互的界面。

在知识网络时代的创新发展进程中，界面交互视角下的用户体验设计的研究內容充满了不确定性，它是用户在与界面交互过程中建立起来的心理感受，不同的用户体验，带有复杂的主观性因素，很难将通过统一的标准模式进行明确的设定。用户体验随着界面交互使用环境的不同、受众人群不同文化背景等因素也在不断变化，所以说它不是静止的而是动态的。

1 从功能设计转向服务与体验

产品的数字化逐渐占领了消费市场，复杂功能的增加不但不能满足人们的使用需求，更加重了用户对于界面交互流程使用的负担。例如，日常使用的遥控器，其中有一半以上的功能按钮是不经常使用的。而在界面交互过程中，用户的体验需求成为核心的关注点，功能设计逐渐被弱化，所有的界面交互设计都围绕着用户的体验需求而展开。其研究重点在于通过界面交互的服务给用户所带来的体验，而不是单纯的功能使用，用户有什么样的需求服务，就会产生相应的体验设计。这种服务与体验不只是让用户拥有它，而要让用户真正享用。将消费的需求转化为使用的需求，而要实现这种转化，需要分析解决不同个体或群体之间的差异性，用户的主观心理、行为动机、知识技能等综合因素的影响。

从经济学和社会学的角度来分析，杯子作为一件产品来看，它的使用功能是解渴，产品不是本质，本质是解渴。杯子只是载体，这个载体是会变的，服务经济才是本质，也就是说用户更需要提供的是这项服务，而不是产品本身。而在界面交互中的参与者的行为动机从一开始就是用户体验设计研究的一个重要部分，行为动机以理解用户的需求体验开始，这种需求不是功能使用的满足，而是行为体验的满足，行为体验的满足感体现在界面交互中就是为用户提供便捷的服务，而界面交互需要通过各种行为研究进行服务设计。

用户的体验是用户使用界面交互过程中的所有心理感受，用户界面和服务的界限正在迈向融合，界面本身就是用户体验的媒介。随着虚拟现实技术、互联网技术和再生性能源技术的重大创新与融合所导致的工业、产业发生的重大变革，界面交互服务将应用在与文化、商业相关的任何事物上，用户的反馈更加自然，贴合用户的使用行为方式，服务于用户的操作使用，语音交互界面、手势体验交互技术的应用，为用户体验设计提供了技术保证。

2 从视觉化设计视角转向交互与过程

随着科学技术的融合和视觉传播媒介的新发展，在传统的以图形为主的人机交互界面和实体的交互界面的设计发展进程中，视觉设计在用户体验的过程中扮演着重要的角色。界面的视觉化设计强调以大小、颜色和布局等设计为主的视觉化语言，用户容易受到视觉化内容的吸引，忽略注重用户体验为核心的交互与过程。界面交互视角下的用户体验设计注重视觉化设计视角的不断拓展，形成了新的内容和领域，转向注重整个界面交互的框架结构、内容形式、细节处理的交互与过程，引导着用户的交互行为。

人们对视觉的理解在具体设计情景上经常会做出不同的诠释和理解，对于界面交互的设计情景，通常需要设计者进行权衡比对，在冲突中找到合适的平衡点。这就要求界面交互设计的视觉化的设计认知转向强调以用户体验为核心的用户的交互、过程化设计。这种转向是指以用户为中心的整个交互的流程，它包含正确的理解界面的交互信息，正确的传递信息，信息的呈现方式越是结构化和精炼，人们就越能更快和更容易地扫描和理解。

界面交互的视觉化设计不是引发单一的视觉触动，而是需要用户行为的架构形成双向引导，在对用户体验设计的过程进行探究时，要从用户的使用过程、心理、交互行为等进行全面的思考与深入研究。

3 从面向个体的设计转向面向群体的社会化

随着计算机的普适计算、互联网云端的集合、设计大数据化的飞速发展，界面交互视角下的用户体验设计从面向个体的设计转向面向群体的社会化。这里的个体设计是指用户在与界面交互被动地接受过程，对于许多互动的操作，需要计算机的文字语言或图形化介绍，引导用户进行操作使用，这种形式的用户体验设计是有针对性的个体化、被动化的指导，它是受限制的。而面向群体的社会化是指在界面交互过程中，用户的参与性设计所形成的数据，在促进整个用户体验设计的产业链以及平台的整合以及分享。

其中，用户的参与性设计最直接的对接用户的体验设计，信息的传递和资源服务提供了相应的数据，利用多种处理方式，实现数据共享和优秀的设计生态。舍恩伯格在《大数据时代》中指出：大数据是人们获得新的认知，创造新的价值的源泉；大数据还是改变市场、组织机构以及政府与公民关系的方法。界面交互设计利用数据发展的产业链和跨地域文化系统的融合，将促进用户体验设计的发展。用户体验设计在从面向个体的设计转向面向群体的社会化过渡的进程中，同时作为一种方法和技术，其本身也需要不断的设计转变来适应大数据科学的发展。

大数据整合有效的信息，激发用户的参与性，形成更加多元的信息交流和数据流动的处理。例如，Nike，的设计生态系统采用了Nike，ForceSensor科技。鞋垫下装有全脚掌感应器芯片，通过检测运动时脚掌的受力情况，通过计算用户的运动量，传送到互联网云端，形成巨大的社区，为用户提供分享和服务。

同时，丰富的数据资源能够更好地作用于用户体验设计，了解用户的需求，分析信息数据。快速迭代，为用户体验设计系统提供有效的解决方案。利用数据链的分享，可以解决车辆交通拥挤的问题，在车与车之间，车与系统之间，人与人之间，构建一个交互的应用，将改善交通问题。这种数据的群体化应用，亦体现用户体验设计的宗旨，将带动整个设计生态的构建。

4 结语

本文从界面交互视角的以下几个方面，对用户体验设计进行探析：用户体验设计弱化界面交互的功能使用，更关注服务与体验，在注重界面的视觉设计的同时，深入整体的交互与过程；用户体验设计更强调用户的参与性设计，资源数据的分享，形成整个设计的产业链以及平台的整合。界面交互是用户去体验新技术的平台，随着数字信息化进程的革新，以用户体验设计为中心的界面交互研究体系也将不断跨界和融合，触动全新的社会发展，引领新的生活方式。

参考文献：

[1] Alan Cooper（美）.交互设计精髓[M].电子工业出版社，2005.

[2] Jenifer Tidwell（美）.Designing Interfaces[M].电子工业出版社，2008.

[3] Thomas Lockwood（美）.设计思维[M].电子工业出版社，2012.