交互设计 - 用户体验【摘】

熟记在心：

用户体验的原则

https://www.google.com.hk/search?q=%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E7%9A%84%E5%8E%9F%E5%88%99&oq=%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E7%9A%84%E5%8E%9F%E5%88%99&aqs=chrome..69i57j69i65l3j69i60j69i61.3347j0j7&sourceid=chrome&espv=210&es_sm=122&ie=UTF-8 

 

 

交互设计

又称互动设计，(英文Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。
人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。

交互设计在于定义人造物的行为方式(the "interaction",即人工制品在特定场景下的反应方式)相关的界面。

交互设计师首先进行用户研究相关领域，以及潜在用户，设计人造物的行为，并从有用性，可用性和情感因素（usefulness, usability and emotional）等方面来评估设计质量。

（关键字：有用、可用、易用）

 

交互设计的一般步骤：

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

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

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

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

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

 

交互设计的原则:

认知心理学为交互设计提供基础的设计原则。这些原则包括心智模型（mental model），感知/现实映射原理（mapping），比喻（metaphor）以及可操作暗示（affordance）。

 

应用领域：

交互设计师通常在如下领域活动：软件界面设计、信息系统设计、网络设计、产品设计、环境设计、服务设计以及综合性的系统设计。

 

 

 

 

人机交互norman模式：

Norman的交互模式是人机交互领域最有影响力的一种模式了，通常被区分成七个

①　订立目标

②　组成意图

③　标明行动顺序

④　运行

⑤　观察系统

⑥　诠释系统状态

⑦　评估

其实以电脑而言，电脑交互主要意义是以用户为考量，而不是从设计者的概念模型去切入，如何让用户能控制系统的顺序、速度，怎么注意信息，都是人机交互中所关心的。人机交互的关键在于用户了解了电脑能替我们做些什么，及如何处理信息，我们就可将大部份时间放在“人”的身上，而不是技术领域，所以一个成功的交互系指人们告诉电脑如何去工作，而不是在技术上打转。

电脑界面的设计不光是单向的，而是设计者必须重视用户的回馈，并且进行调整，运用适当的设计，比如美工图案菜单或是简易的操作，让用户可以轻松的满足自己的需求，有效率的运行工作，才能让机器发挥最大的功能。

 

概念模型 

产品的概念模型 === 用户的心智模型

设计者或其他相关工程人员，所共同设计的操作接口称为概念模型。用户并无法直接与设计者进行对话，也鲜少通过说明书准确而有效地了解设计者的概念；通过与接口的交互，进而对该设计产品的功能及操作所形成的了解，则称为用户对于该产品所形成的心智模型。一般而言，用户的心智模型是在使用中自然逐步形成的，同时，借由与系统不断地交互，用户会不断修正其心智模型。如果到了最后，用户的心智模型与设计师的概念模型能一致或相当接近，那么，接口设计就算是相当成功了。

概念模型可分为依据活动所设计或对象所设计的两种导向。想要设计出具有使用性的接口，必须要了解活动的类型，以及人们在目前的工具中发生了什么问题。

 

活动型概念模型

根据活动所设计的概念模型可分为四类:

①　指令型（Instructing） 一个指令一个动作，简单有效率，例如DOS操作系统及word。

②　对话型（Conversing） 系统与用户进行对话，双向交互，但容易发生系统误解用户的状况，或是造成电话语音系统单向交互的问题。

③　操作导航型（Manipulating & Navigating） 让用户用最自然的直觉去操作接口，如苹果开创的图形化操作系统，还有电脑辅助设计系统都属此类型的设计。

④　搜索浏览型（Exploring & Browsing） 用户依此系统搜索信息，如google等搜索引擎及门户网站。

 

对象型概念模型

面向对象的概念模型将重点放在处于某些特定背景情境下使用的特定对象，它往往与其在现实生活中的原型极为类似。

 

 

用户体验（英语：User experience Design简写为UX Design） 是一个测试产品满意度与使用度的词语，可能是基于西方产品设计理论中发展出来的。

此流程完整的包括了有目标用户设定，满意度的范围和主题设定，用户需求的功能，交互研究，系统反馈和最终的报告与成果。

 

 

 

参考维基的关键词条：

交互设计：

http://zh.wikipedia.org/wiki/%E4%BA%A4%E4%BA%92%E8%AE%BE%E8%AE%A1
设计心理学：http://zh.wikipedia.org/wiki/The_Design_of_Everyday_Things

人机交互：

http://zh.wikipedia.org/wiki/%E4%BA%BA%E6%9C%BA%E4%BA%A4%E4%BA%92

 

 

 

 

 

 

 

 

 

 

 

侧边栏：

运用侧边栏导航来辅助浏览页面，方便用户到达想关注的区域。不过使用这些侧边栏，需要注意页面的情况，避免其淹没在繁杂的页面元素之中，成为用户眼中的“牛皮癣”。

图形化导航:
研究导航设计。越来越多的导航采用了图标，代替了原有的文字链，并且扩大了单个标签的点击区域，这是在手机、平板电脑越来越普及的情况下，采取的优化设计。

Hover交互
鼠标移到元素上时，会有流畅的动态效果，而不是仅仅改变颜色。关注细节，为用户打造更流畅的交互动作。

Hover展现更多
它达到了视觉效果美观跟功能实用的微妙平衡，设计师为了视觉效果可以先把内容优先级较低的内容隐藏，等鼠标移入时再将其显示出来。

仿真展示
取材于现实生活，拉近了网络跟现实的距离，流畅的交互、丰富的细节让用户有实物的感觉。

时间指示
在某些按时间切换图片的模块，可采用此方式,给用户心理预期，这样切换的时候用户会比较容易接受，同样的设计可以应用到焦点图切换、页面切换、页面加载等模块。

Loading
对一成不变的loading的样式稍作改进，就能超出用户的预期，从而获得用户的好感，而跟网站主题相关的设计，会提升用户对网站的忠诚度。

信息预览
针对同等级的大批量信息，可以采用这种缩略模式，利用hover状态呈现信息的主要内容，由用户决定下一步操作，达到空间的合理利用。

转场动画

 

错误提示

优势概述：除了给用户提供必要的信息外，用一点小小的幽默帮用户消除一些错误带来的负面情绪

应用环境：网页出现错误时，如：404错误（针对这版设计的特点，比较适合一淘UX网站等类似的设计站点）

我们设计了一个很牛X的网站，但还没牛X到保证不会出现错误，但这并不影响我们的用户体验，即使错了，我们也会尽量保证这是个有趣的错误，看看我们的错误提示吧。

错误提示页面需要提供给用户的必要信息，主要有两点，
一：告诉用户怎么了。
二：告诉用户下一步该怎么做。

参考资料：http://www.uisdc.com/24-kinds-of-new-way-of-interaction

 

2013-08-25更新

交互：
交互真正革命性的意义在于，它把时间这一魔幻般的属性带入静态的产品之中，通过对动作、速度、显现等等的定义，让产品的操作体现出真实感。

真实感：
交互效果做到和生活中的动作相似，用户不需要其他提示就知道这样的动作所代表的含义。（例如手机屏幕上的滑动、拖拽、loading进度提示）如果一个动作在现实生活中不存在，用户就难以理解它所代表的含义。干脆利索而又逻辑性强的动画对于改善用户体验大有裨益。

动作化界面的设计原则：
① 动画干净利落
② 节奏一致、过渡自然
（注意：时间轴、关键帧等动画基础）

参考资料：http://www.36kr.com/p/203418.html