网易交互设计微专业干货提炼

2017-11-13 本文已影响0人 Harmonieee

前言：本文为网易交互设计微专业干货提炼，视频不方便随时查看，所以整理出框架要点方便回顾。一些截图可能不太清晰，敬请谅解。

首先是整个专业课的课程框架：

网易交互设计微专业课程框架

Chapter1 揭开交互神秘面纱

第一章揭开交互神秘面纱

本章以两张图概括：

产品设计开发六大步

产品经理与交互设计师的区别

第二章玩转Axure

本章老师以一个案例简要介绍了Axure的界面、交互，Axure的详细教程可以参考小楼老师Axure RP 7.0从入门到精通视频教程。

第三章平台设计规范与常见的设计模式

（一）ios与Android的设计规范

1、ios端

页眉-导航栏

用于实现在应用不同信息层级结构间的导航，有时候也可用于管理当前屏幕内容。

页脚-工具栏

用于放置操作当前屏幕中各对象的控件。既可以放icon，也可以放文字。

Tips：如果想让工具栏上可以放置更多功能入口，可以选择icon；如果工具没有那么多，又想表达更加清晰，可以选择文字。

页脚-标签栏

让用户在不同的任务、界面和模式中进行切换。

Tips：一般标签放置不超过5个

ios端设计规范

2、Android端 4.0

页眉-操作栏（Action Bar）

操作栏用于实现app内视图的切换和层级间的导航（返回上层），还会放置一些重要控件。

Android端设计规范

3、Android端 5.0

页眉-应用栏（APP Bar）

在旧版本中叫做操作栏，用于显示应用的标识、应用导航、内容搜索以及其他操作。

4、常用控件

5、手势介绍

常用手势介绍

（二）移动产品模式设计之导航栏

1、标签式导航

入口扁平化；导航控件面积大，功能间快速切换；

ios一般布局在底部，安卓一般布局在顶部

当标签过多（＞5个）时，可使用滚动式导航，但要让用户知道这是可滚动的。

2、分段式导航

尺寸较小，能轻松融入界面，不占用空间。

Tips:它只是ios的标准控件；不适合作为一级导航，往往作为二级导航与标签导航嵌套使用

3、舵式导航

多个功能中有某个功能特别重要

4、抽屉式导航

隐藏不重要功能，让用户更关注核心功能，大大减少主界面中的导航控件数量

Tips：不要在抽屉式导航放置太重要的功能

5、下拉菜单式导航

可与滚动式导航结合

导航栏类型

（三）移动产品模式设计之列表

1、垂直列表

阅读习惯：从左往右，从上往下。条目详细程度与条目数量要平衡。

模式：标准模式（纯文字）、图文结合模式、控制模式、时间轴形式、对话形式

应用到导航：简单清晰、冷静高效

适用于二级导航

2、横向列表

banner轮播大图展示型、轮播小图展示型

Tips：需要提示用户屏幕外面还有内容

应用到导航：优点-隐藏其余导航选项，使页面简洁，让用户在同一时间只专注于一个目标

缺点-用户很难跳转到非相邻的导航选项

体验感强，适用于一些功能选项较少，且不频繁跳转的产品，又或者是浏览体验式的产品

3、网格列表

展示以图片为主+文字辅助，可以展示更多内容，更富有感染力 eg：相册

变形：瀑布流

应用到导航：eg：手机主页、支付宝

相比垂直列表在右侧区域有很大空闲，宫格导航可以充分应用整个页面

适用于二级导航，在有限空间罗列大量功能

（四）Web端设计规范与设计模式

主要分为：logo、导航、用户登录、网站推广内容、广告、其他信息

logo：左上角

导航：顶部一级导航、左侧二级导航。当用户下拉网页不在第一屏时，可以将导航固定在顶部

用户登录：右上角

自适应设计：自动识别屏幕宽度、并做出调整的网页设计

常见Web的布局样式

Chapter2 设计需求分析与方案选择

第一章设计方案不能让人满意的原因

业务需求=业务目的+业务目标

用户需求=目标用户（特征、经验）+场景+行为+体验目标

用户体验路径：用户在使用前、使用中、使用后的各个接触点，确保设计方案能够形成闭环

1、为什么要做这个功能？--业务目的

2、产品期望得到怎样的成果？--业务目标

3、谁来使用这个功能？--目标用户

4、他们为什么要使用这个功能？--用户需求

5、如何让他们都来使用这个功能？--将业务目标转化为用户行为

第二章设计需求分析方法简介

业务需求分析方法

详细步骤如下：

第一步、分析业务需求--将业务需求转化为用户行为

第二步、分析用户需求

1、明确目标用户，而不是定义（产品经理的工作）

产出：persona

目标用户是产品或服务的直接接触对象，可以从特征和经验描述目标用户

2、用户需求=目标用户（特征、经验）+场景+行为+体验目标

让目标与设计建立关联（GSM）：目标（Goal）+信号（Signal）+衡量指标（Metric）

eg：快速完成在线表单填写+用户填写申请表单+表单的填写效率高

第三步、分析关键因素

关键因素：动机、担忧、障碍

使用前创造--动机有哪些因素会促使用户产生注册的动机？

排除--担忧

使用中解决--障碍 eg：新手指引

可以通过用户调研

分析表格1

分析表格2

预设计解决方案

第四步、用户体验路径

1、画出用户体验路径 eg：找到申请入口-查看介绍-填写申请表单-等待审核-获得审核结果

2、整理各个接触点的问题和惊喜（用户研究）

3、判断各个点的情绪高低

4、连接情感曲线

用户体验路径与情感曲线

第三章选择合适的解决方案

选择合适的解决方案

如何推销设计方案：

1、将思考过程可视化

2、自己人效应：对自己人说的话往往更加信赖、更加容易接受

3、准备一份PPT

4、讲一个动听的故事

5、掌握必要的演讲技巧和表达能力

Chapter3 规范信息架构与流程设计

第一章信息架构设计

（一）认知产品信息架构

对信息进行结构、组织方式以及归类的设计，好让用户容易使用和理解。

-让用户一眼就明白你的产品能做什么，大概怎么用

-用户能在需要的时候容易的找到某个功能，即容易记忆的

（二）产品信息架构设计的前期工作

1、了解用户、场景、习惯

persona、场景→习惯

尊重用户的习惯：用户通常用你的产品做什么？用户用这类产品最关心什么？用户有哪些思维定式？用户用什么类似的产品？

不要在不必要的地方体现差别

2、了解业务需求

不仅要从产品经理那了解需求，还可以从市场和运营了解，从而让信息架构有更多的兼容性，让产品有更多的可能性

3、调研竞品的信息架构

找3-5个同类竞品分析他们的信息架构,并找出他们的共性和差异，共性是要遵循的用户习惯，差异是设计创新点

工具：Xmind

4、卡片分类法

让用户对功能卡片进行分类、组织，并给相关功能的集合重新定义名称的一种自下而上的整理方法。即让用户来搭建信息架构。

可以在了解竞品后，进一步了解用户的心智模型。

（三）产出产品信息架构设计

1、对信息架构进行重要性分级（≠排序）→Axure 站点地图

2、寻找层和度的平衡

层：信息架构树的深度

层过深：进入某一叶功能时需要非常多层级，操作困难，一般不超过5层

度：某一节点子节点的数量

度过多：在某一层级有太多的内容，用户认知成本增加，容易找不到想找的内容

层和度相互转化，需要找到一个平衡

3、验证核心使用流程

a、尽量保证根据树结构进行层级自上而下前进

b、不连通层级间的跳跃，尽量发生在最后一步骤

4、考虑信息架构和交互构图的关系

tab式导航=第一重要级中多项

Drawer式导航=第一重要级中只有一项，常见于工具型应用

5、为讨论做好准备

（四）评判产品信息架构设计

1、用户测试

a、用户是否在不介绍具体产品的情况下，通过短时间的使用，说出产品可以用来做什么；

b、让用户进行核心流程任务，检查完成任务是否顺利；

c、给用户一个找寻一个层级较深的功能的任务，检测用户能否通过信息架构名称找到功能。

2、产品说明书

你需要多复杂的说明书才能教会用户使用核心功能？

（五）用信息架构思路设计页面

确定页面所需呈现的信息-绘制信息架构树状图-重要性分级-绘制页面

在单一页面设计时要刻意练习！

第二章打造漂亮的流程设计

（一）流程设计的重要性

你的app有几个按钮？你的app有几个页面？用户会用你的app做哪些事情？--我们设计的是用户完成任务的方式

流程设计是根据用户使用流程进行页面设计的方法

*企业有商务目标，因此需要在用户使用流程和业务需求中寻找平衡，以不干扰用户使用流程的方式完成需求

（二）如何进行流程设计

1、充分理解业务需求

a、业务需要达成的商业目标

b、业务受到哪些技术和商务限制

c、了解业务合作方的需求

2、找到用户完成任务的所有接触点

接触点来自用户场景，而用户场景基于用户模型、经验、用户调研的体验故事

一个简单的用户场景，具体的还可能包括人物背景和人物心理

*学会在设计之前写这样的故事，可以在设计页面时更有逻辑。

Tip1.为了完成流程设计，需要构思的用户场景有多个，并且要学会合并同类项

Tip2.要顾及头尾，他们是最容易被遗漏的接触点

（三）流程设计与交互工作

1、流程设计与信息架构设计的关系

信息架构设计→核心流程设计→信息架构调整→完成所有流程设计

2、流程设计与用户场景的关系

目标用户、业务目标、用户体验目标--用户场景scenario→相应流程设计→一个结合页面的用户场景故事

Chapter4 让页面更优雅

第一章你需要懂的视觉心理学

你需要的懂的视觉心理学

第二章五步熟练掌握页面排版布局

1、确定页面的任务目标

明确当前页面用户的任务和目的，以及产品的需求。

衡量页面的标准：满足用户需求，减少用户的理解和操作成本，还能深深的吸引用户，让这个产品捕获用户的芳心。

有用-最重要的衡量标准，用户和产品需求的满足

易用-架构清晰、流程清晰、不需思考

好用-友好和充满情感化

*在评价同一功能不同竞品的好坏时，要从每个竞品的产品目标和定位出发，而不是仅仅评价外观

2、信息元素的组织分类

卡片分类法“可能是”信息组织分类最好的方法，应用场景有信息架构、导航设计、页面设计。

3、对组块进行排版布局

设计原则

4、权衡平台规范

*Native APP 指的是原生程序，一般依托于操作系统，有很强的交互，是一个完整的App，可拓展性强。很稳定。需要用户下载安装使用。

语言：Object C （ios）、Java（Android）

页面：存放在本地

Web（H5）跨平台跨终端，开发成本低，方便部署，无需下载，用户无须手动更新。生存在浏览器中的应用，基本上可以说是触屏版的网页应用。但是会不稳定，数据可能会有延迟。

语言：Html

页面：存放于服务器

Hybrid混合设计：页面框架由本地native构成，确保稳定性；

页面内容由H5构成，保证迭代的灵活性。

Hybrid App 设计的注意事项：

1、简化。简化不重要的动画/动效，简化复杂的图形文字样式

2、少用。少用手势、少用弹窗

3、减少。减少页面内容，减少控件数量，减少页面跳转次数、尽量在当前页面展示

4、增强。增强加载时的趣味性，增强页面主次关系，增强控件复用性。

Tips：平台规范是基础，用户的使用习惯是核心，一起规范终究要给用户习惯让步。

是否区分平台设计：

1、是否区分平台设计，需要看当前项目的阶段和项目重点

2、如果不区分设计，在大框架一致的前提下，尊重平台控件的使用规范

3、如果采取分别的设计，发挥各自平台最大的潜力，做到极致

4、Hybrid混合设计也许能够从另外一个层面解决跨平台兼容问题

5、页面排版的设计验证

邀请交互专家-系统评估-系统交互/可用性问题-整理结果-修改及排期

第三章撰写漂亮的交互设计文档

产品经理：具象产品需求，以可视化的页面形式，谈论需求满足情况

视觉设计：根据交互稿设计出视觉效果图，关注页面的布局结构，顺序位置，主次及交互方式等，还有页面的情感需求。

产品开发：通过交互文档，交互设计师与各端开发确定方案的可实现性。开发人员依据交互文档的实现方式进行开发。

产品测试：严格测试设计方案最终的实现效果，确保产品的质量。

1、封面

名称、版本、负责人员

封面

2、目录

即站点地图

3、修订记录

功能变动、时间、超链接

修订记录

4、需求分析+业务流程图

产品需求文档中也会有业务流程图，但是为了方便开发和测试在一份交互稿里理解业务需求，可以放上

5、信息架构

6、流程图

7、交互方案

a、流程

一个页面一个任务；每个任务都要有起点；

同一个页面的不同状态，最好在一个页面展示（不要忽视极端情况）

b、页面内容

页面布局规范，准确传递设计方案

尽量黑白灰，避免视觉干扰

c、交互说明

交互说明

交互说明1：交互规则及逻辑关系

交互说明2：交互迭代要有标识

交互说明3：点击后的交互反馈

交互说明4：动效说明

交互说明5：需要视觉注意的要特别标明

8、控件库

Chapter5 交互设计测试与评估

第一章为什么要开展测试与评估

用户测试：请目标用户使用产品来完成任务，观察并记录用户使用产品的整个过程

用户测试的定义，有时也被称为产品可用性测试，指特定的用户在特定的使用场景中，为了达到特定的目标而使用某产品时，从而找出产品可用性问题，并解决这些问题，目的是为了改善这些产品，让产品更容易使用。

用户测试的测试目标：有效性-用户能够达成自己的目标；

效率-用户能以最短路径达成目的；

满意度-用户没有产品不愉快的体验；

用户测试基本流程：1、设计测试。设计参与者在测试中需要完成的任务；

2、招募用户。筛选符合测试要求的目标用户进行测试；

3、进行测试。观察并记录参与者完成任务过程中的情况。

Tips：以抛出问题为主，少做建议。

4、分析报告。列出问题并进行分析，判定问题的严重性及特殊性。

用户测试的意义：1、挖掘用户的潜在需求

2、发现并解决产品存在的问题

3、降低产品周期成本

4、增强设计的说服力

测试与评估的形式及方法

评估形式：

1、评估主体，主要有用户评估和专家评估

用户评估就是用户测试，主要靠收集用户使用数据，它相对客观，但时间和费用花费较多，评估范围较宽

专家评估，是让工程师及设计师等专家基于自身的专业知识和经验进行评估的一种方式。它相对主观，但时间和费用花费少，评估的范围较窄

2、评估性质，主要有定性评估和定量评估

定量评估是指对可以计量的部分进行评价，如点击量、使用率等

定性评估是指对非计量性的部分进行评价，如流畅度、舒适性、创造性等

3、评估过程，主要有理性评估和感性评估

理性评估相对客观，从客观角度出来判断客观事物，例如对比的是价格，我们一定会选择便宜的

感性评估更为主观，评估结果并没有客观规律

以上评估方式各有优缺，需要结合起来使用。

四种常见评估方法

1、原型评估方法

2、简易测试评估方法

摄像机、实验室、记录员

3、眼动评估方法

4、脑电评估方法

第二章启发式评估

定义：是专家评估法的一种，也被称为经验性评估。是一种简易的可用性评估方法，使用一套相对简单、通用、有启发性的可用性原则，让几个评审人员根据专业知识和经验来进行评估，发现产品潜在的可用性问题。

两大要素：

1、评估者

人数：推荐3~5人，有时也会简化

岗位：设计师、用户研究员

身份：最好非设计师本人

知识：同时具有可用性知识及设计知识更佳

2、评估原则

Nielsen启发式10原则、Nielsen拓展原则、Nielsen首页可用性指南、iSO9241、八项黄金法则、HHS网页设计与可用性指南

以下为Nielsen启发式10原则：

一、状态可见原则

用户在网页上的任何操作，不论是单击、滚动还是按下键盘，页面应即时给出反馈。“即时”是指，页面响应时间小于用户能忍受的等待时间。

二、环境贴切原则

网页的一切表现和表述，应该尽可能贴近用户所在的环境（年龄、学历、文化、时代背景），而不要使用第二世界的语言。《iPhone人机交互指南》里提到的隐喻与拟物化是很好的实践。此外，还应该使用易懂和约定俗成的表达。

三、撤销重做原则

为了避免用户的误用和误击，网页应提供撤销和重做功能。

四、一致性原则

同一用语、功能、操作保持一致。

五、防错原则

通过网页的设计、重组或特别安排，防止用户出错。

六、易取原则

好记性不如烂笔头。尽可能减少用户回忆负担，把需要记忆的内容摆上台面。

七、灵活高效原则

中级用户的数量远高于初级和高级用户数。为大多数用户设计，不要低估，也不可轻视，保持灵活高效。

八、易扫原则

互联网用户浏览网页的动作不是读，不是看，而是扫。易扫，意味着突出重点，弱化和剔除无关信息。

九、容错原则

帮助用户从错误中恢复，将损失降到最低。如果无法自动挽回，则提供详尽的说明文字和指导方向，而非代码，比如404。

十、人性化帮助原则

帮助性提示最好的方式是：1、无需提示；2、一次性提示；3、常驻提示；4；帮助文档。