Tag Archives: 用户体验&UCD

交互设计学习笔记之《如何制作原型》

如何制作原型

所谓原型,是指在某一方面和真正产品比较接近、以使人们能对这一方面的各种技术方案进行不断评估和改进的一种接近于实际产品的模型。原型技术大量应用于传统工程及产品设计领域,用于评估和改进各种技术上的实现方案,尤其是在使用一些新技术或不熟悉的技术时。

1.原型设计的作用和目的

交流设计方案
在面向对象的软件开发中,为了表达和交流设计方案,开发人员会用某种模型或方法来表示种个类是如何设计的,以及它们之间的静态关系和运行时的交互关系。在设计界面时,我们需要用某种方式把设计方案表达出来,以便和其它人,例如其他设计人员、开发人员或用户进行沟通,而不是仅仅保存在自己的头脑中。然而,和面向对象设计不同,界面设计本身涉及的是很具体的元素,是人可以实实在在感知到的,例如各种画面、图像、文字、声音或各种输入输出的方法。因此,为了表达设计方案,最有效的方法就是用具体的可以被人感知的某种模型来展示。

更有效地让用户参与进来

原型是对设计方案进行评估和改进的基础

降低开发成本
原型的本质在于,它是一种在某个方面对产品进行模拟或近似的模型,因此我们只需关注某一方面而忽略其它。同时,由于原型不是真正的产品,我们也不需要按照产品开发时的标准流程和质量来要求它。这些都使得我们可以非常快速和廉价地制作出原型或对原型进行不断的改进。 read more »

交互设计学习笔记之《如何充分利用屏幕空间来显示更多的内容》

交互设计学习笔记之《如何充分利用屏幕空间来显示更多的内容

1.自动分时复用,轮流或滚动显示

网页上的Flash广告页采取了类似的方法。当可用屏幕空间更小时,比如只能显示不足一行的文字或很少几行时,就需要使用文字滚动的显示方法。例如,在一些公共汽车内,只有一个窄条的基于发光二级管的显示屏可以用来显示一些信息,其高度只够显示一个字。因此,它所采用的就是一种从左到右滚动文字的方法,可以逐渐地显示出一行文字或更长的文字。

2.仅在鼠标悬停时的显示窗口

在某些情况下,当我们不是时时刻刻需要使用某个窗口中的内容时,可以先把这个窗口隐藏起来,仅在界面上显示代表这个窗口的很小的一部分。当需要该窗口中的信息时,用户可以把鼠标移动并悬停在这一小部分上,该窗口即可恢复原来的全部显示状态。

3.利用下拉式控件减少对屏幕的占用 read more »

交互设计学习笔记之《如何帮助用户探索和尝试》

对未知世界和事物进行探索是人类得以进步的一种非常重要的行为,而尝试和试验则是人类的一种很重要的学习亲事物的方法。在用户使用软件时,尤其是使用一个他们之前没有用过的新软件时,探索和尝试的行为是非常普遍和常见的。因此,软件设计人员应当在界面中对以上这两种行为进行很好的支持。

1.把所有的功能和操作尽可能列在菜单系统中

在对一个新的软件进行探索时,用户首先需要知道这个软件都提供了哪些功能或操作,这些功能或操作将会是用户随后的各种活动的发出点,而之所以需要把这些信息放在菜单系统中,有两个主要原因:

第一,菜单中对于功能或操作的描述是基于文字的,因此相对于图标而言,用户更有可能正确地理解他们;
第二,用户通过菜单方式来浏览这些功能是安全的,换句话说,仅仅在各个菜单中看看都有哪些内容并不会触发这些动作,这就使得用户可以放心一一仔细端详。实际上,很多用户在使用一个新软件时也是通过浏览菜单中的内容来看软件都有哪些功能的。

2. 让用户在执行某个操作前知道它的效果

某平板电视公司为了打消用户在购买时的顾虑,推出了一种平板电视的折叠宣传手册。这个小册子可以塞进报纸或杂志里面,展开后能变成一幅平板电视机的仿真招贴画,大小与42寸平板电视机一样。在接下来的一个月晨,该公司的平板电视销量神奇般地激增。在这个例子中,把印有电视的纸张贴在墙上的做法就是一种在采取真正行动前让用户可以预先看到其效果的方法,它能够让用户以一种低成本的方法来尝试不同的选择。

在软件设计中,预览功能就是这种原理的应用,这种功能对于用户尝试成本的节省也可能是时间意义上的。

3.让用户可以撤消动作

4.让用户可以把状态恢复到初始值

5.在执行具有破坏性的操作前要求用户确认

在软件界面中,在用户将要执行某个具有潜在的危害操作时,我们应当向用户提醒这个潜在危害性,并要求用户确认或取消操作,这里的危害性指的是对于用户数据或系统数据的破坏。

交互设计的利器——Flash Catalyst入门介绍

交互设计的利器——Flash Catalyst入门介绍

Adobe Flash Catalyst是一款专业的交互设计工具,可以在不编写任何代码的情况下快速创建用户界面。它的出现为开发人员和设计人员建立起了沟通的桥梁,程序开发人员可以导入设计师在Photoshop、Illustrator和 Fireworks中设计的用户界面,并将它们转化成UI组件而不改变它们原先的“皮肤”、外观和整体风格。设计师仍然用Adobe的各种产品来完成自己的大部分工作,但是能通过Catalyst来定义UI组件,这就像开发人员通过编程来完成这一工作一样。

2009年6月1日,Adobe公司给大家送来了儿童节的礼物,发布了Flash Catalyst Beta,大家可以到其官方网站免费下载试用。Flash Catalys的安装过程中一些交互设计不是很好,它首先得让用户解压安装文件到一个目录下,可是用户根本不需要从这些解压文件中选择 “setup”进行安装,安装程序自动运行,如此的结果是这些文件占据了几百兆的空间,用户却很容易就把它遗忘。建议Flash Catalyst开发团队在设计时,安装文件不要解压到某个目录下,直接储存在缓存中,等安装完成后就释放出来。接下来的安装非常简单,按步骤很容易就完成了。

启动Flash Catalyst,出现如下界面:

Flash Catalyst启动界面

从此界面上我们可以多种操作:1.打开一个项目;2.从AI文件中创建新项目;3.从PSD文件中创建新项目;4.从FXG文件中创建新项目;5.创建新项目;6.信息和介绍。 read more »

交互设计学习笔记之《如何使软件一学就会》

一个界面容易使用的程度其实是人们在学习该界面的操作方法时有多快,以及学了之后是否不容易忘记。这些方面的数据可以通过实验数据获取,因而是更为客观的和可以观察的。

1.直接操控

通过拖拽操作来移动文件的方法就是一种直接操控的方法,“直接操控”这个术语最早是由Ben Shneiderman 在1983年提出来的。它的基本特征是,用户使用物理性的操作来直接把动作施加于目标之上,而不是间接地通过发出抽象的命令来完成(发出这些命令的具体形式可能是点击按钮、选择菜单或键入文字),同时,目标对象的状态随着用户操作的进行被实时、连续地反馈了出来。

通过拖拽窗口右下角的方式来调整一个窗口的大小是另一种常见的直接操控的方法。在进行这个操作时,我们并没有通过执行菜单或按钮命令,而是直接地通过拖拽窗口对象自身的方法来连续地改变窗口的大小。在这个拖拽过程中,窗口的大小随着鼠标的移动而实时地改变着,窗口中的内容也跟着变化。当我们看到窗口大小调整到了一个满意的尺寸后,我们就可以松开鼠标按钮而结束这个操作了。

直接操控式界面具有以下优点: read more »

应需而变——产品设计流程

应需而变——产品设计流程

整体流程

 

上图是整个产品的设计流程,我们把其分为6个阶段,每个阶段都有关键的内容和要求,各个阶段并不相对独立,而是相互关联,互联互通的关系。产品设计本身就是一个反复迭代的过程,而且我们也要应需而变,进行灵活的产品设计。

基础调研

竞争产品分析

寻找市场上的竞争产品,挑选3-5款进行解剖分析。整理竞争产品的功能规格,并分析规格代表的需求,需求背后的用户和用户目标;分析竞争产品的功能结构和交互设计,从产品设计的角度解释其优点、缺点及其原因,成为我们产品设计的第一手参考资料。

领域调研

结合上述分析基础和资料,纵观领域竞争格局、市场状况,利用网络论坛、关键字搜索等手段获得更多用户反馈、观点、前瞻性需求。

参与者:决策人员、交互设计师、策划、开发人员

产出物:相应的对比分析文档和领域调研报告

产品分析

产品定位

从软件提供者的角度分析产品推出的意义和重点关注的方面,实际考量、丰满决策层的idea,明确列出产品定位,通过讨论修缮取得决策层的认可;

用户分析

结合竞争产品的分析资料,采用定性分析的方法,获得对产品目标用户在概念层面的认识;

产品概述

以软件提供的身份,以最简短的文字,向用户介绍产品,突出产品对用户的价值。避免功能点的简单罗列,而应该在归纳总结的基础上突出重点;

功能需求规格整理

在归纳关键功能的基础上,结合竞争产品规格整理的领域认识,从逻辑上梳理需求规格列表,重在逻辑关系清楚、组织和层级关系清晰。划定项目(设计和研发)范围;

参与人员:策划、交互设计师、开发人员

产出物:用户分析文档和产品概述、功能规格列表

交互设计

交互设计

一般而言,交互设计师都遵循类似的步骤进行设计,为特定的设计问题提供某个解决方案(注意,没有绝对正确的方案)。设计流程的关键是快速迭代,换言之,建立快速原型,通过用户测试改进设计方案。

其一般步骤如下:

用户调研

通过用户调研的手段(介入观察、非介入观察、采访等),交互设计师调查了解用户及其相关使用的场景,以便对其有深刻的认识(主要包括用户使用时候的心理模式和行为模式),从而为后继设计提供良好的基础。

概念设计

通过综合考虑用户调研的结果、技术可行性、以及商业机会,交互设计师为设计的目标创建概念(目标可能是新的软件、产品、服务或者系统)。整个过程可能来回迭代进行多次,每个过程可能包含头脑风暴、交谈(无保留的交谈)、细化概念模型等活动。

创建用户模型 Scenarios/Personas/Profiles

基于用户调用得到的用户行为模式,设计师创建场景或者用户故事或者storyboard来描绘设计中产品将来可能的形态。通常,设计师设计用户模型(persona)来作为创建场景的基础。

创建界面流程

通常,交互设计师采用wireframe来描述设计对象的功能和行为。在wireframe中,采用分页或者分屏的方式(夹带相关部分的注解),来描述系统的细节。界面流图主要用于描述系统的操作流程。

开发原型以及用户测试

交互设计师通过设计原型来测试设计方案。原型大致可分三类:功能测试的原型,感官测试原型以及实现测试原型;总之,这些原型用于测试用户和设计系统交互的质量。原型的可以是实物的,也可以是计算机模拟的;可以是高度仿真的,也可以是大致相似的。

实现

交互式设计师需要参与方案的实现,以确保方案实现是严格忠于原来的设计的;同时,也要准备进行必要的方案修改,以确保修改不伤害原有设计的完整概念。

系统测试

系统实现完毕的测试阶段,可能通过用户测试发现设计的缺陷;设计师需要根据情况对方案进行合理的修改。

参考者:交互设计师、策划、视觉设计师、开发人员

产出物:产品设计文档的交互设计部分
 

产出物

说明:这些文档是在整个产品开发过程中慢慢产出的,贯穿于产品开发过程的始终,并需要不断完善。

产品调研报告:这份报告有别于项目经理所做的产品报告,它是交互设计师及用户研究员根据自己的专业知识,从用户体验的角度进行分析,从而指导自己的设计,为概念模型做准备。

概念模型文档:此文档在调研、讨论的基础上,针对需求,把头脑中的概念形成模型,可以通过讲故事的方式进行情景设定,模拟用户使用场景,从而更容易地发现问题,及时进行相应的改进。

界面原型文档:当一切都成型后,我们可以进行具体的设计,进行界面布局,把功能进行合理的安排,形成文档,有利于评审,也有利于后续设计。

交互流程文档:这是一个非常详细的文档,把产品的操作流程形成规范,考虑了所有可能出现的问题,并给出相应的提示信息。此文档有利于指导设计,无论是程序开发还是UI设计,都做到有据可循。

补充:文档只是为了更好地完成产品设计,它可以起到解释性作用,一定程度上节省了沟通的时间成本,同时它也形成了一定的规范,让大家去遵守,有利于产品开发的执行,但是不要为了写文档而写文档,应付业绩考核,还自以为很有成就感。一切都要落实到行动上,没有强大的执行力,文档中描述得再好的产品形态也会被改得面目全非。

原型设计

信息架构和界面原型设计

交互设计师设计产品界面中应该包含的控件数量和类型、控件之间的逻辑和组织关系,以支持用户对控件或控件组所代表的功能的理解,对用户操作的明确引导,进行易用性评估,所有界面设计成为一套完整的可模拟的产品原型;

视觉设计师进行整体风格的设计,对主体界面进行风格设定,出设计方案。

参考者:交互设计师、视觉设计师、策划、决策者、开发人员

产出物:产品设计文档的原型设计部分

详细设计

交互设计师完善设计细节、交互文本和信息设计(Message box),视觉设计师在风格确定后进行具体页面的设计,进行可用性测试,易用性评估;

参考者:交互设计师、视觉设计师、策划、决策者、开发人员

产出物:详细的产品设计文档

设计维护

在产品设计的过程中,对出现的问题进行相应的调整,特别是在测试评估时出现的可用、易用问题。在产品上线后持续跟踪,针对用户反馈进行相应的改进。

参与者:交互设计师、开发人员、视觉设计师、策划

产出物:完整的产品设计文档、问题报告

——————————————

整理文档参考了许多资料,自己也理清了头绪,在设计的过程中并没有固定的技法,黑猫白猫,能抓老鼠的猫就是好猫。

大智交互设计
维基百科
总之阅读了非常多的资料,关键是指导自己的设计过程,还是要活学学用,应需而变