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

熟记在心：

用户体验的原则

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