网易交互设计师微专业C3 规范信息架构与流程设计

article/2025/11/5 3:08:00

如果有需要视频资源的可以关注"AI产品经理人",回复关键字“网易交互设计微专业”获取下载链接~  

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

第一章  信息架构设计

(一)认知产品信息架构

定义:

  • 信息架构设计是对信息进行结构、组织方式以及归类的设计,好让使用者与用户容易使用和理解的一项艺术与科学。(如:饭店装修)

目的:

  • 让用户一眼就明白你的产品能做什么,大概怎么用。(如:底部导航)
  • 用户能在需要的时候容易的找到某个功能,即容易记忆的。

为何需要设计:

  • 信息架构不是功能的简单堆叠,需要区分主要功能和次要功能;
  • 迭代升级不会给用户造成额外的困扰;

(二)产品信息架构设计的前期工作

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

Persona(用户角色模型)、场景(用户如何使用你的产品)→习惯

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

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

  • 2、了解业务需求

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

  • 3、调研竞品的信息架构

找3-5个同类竞品分析他们的信息架构,并找出他们的共性和差异;

共性是要遵循的用户习惯(eg:消息&联系人、关注的人、购物车);

差异是设计创新点(eg:社交产品的发现页、购物网站的首页、打车应用的侧边栏);

工具:思维导图工具(树状图)

改版:找竞品 + 找迭代版本;

  • 4、卡片分类法:了解用户的心智模型;

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

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

准备

  • 目标用户
  • 功能/消息卡片;
  • 2纸笔;
  • 空白的卡片;
  • 笔记本;

流程:

 注意:

     

 

(三)产出产品信息架构设计

  • 1、利用思维导图和Axure整合信息

对信息架构进行重要性分级(≠排序)→Axure 站点地图

  • 2、寻找层和度的平衡

层:信息架构树的深度               

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

:某一节点子节点的数量                       

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

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

  • 3、验证核心使用流程

(1) 尽量保证根据树结构进行层级自上而下前进

(2)不连通层级间的跳跃,尽量发生在最后一步骤

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

移动端(利用重要性分级)

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

(2)抽屉式导航 = 第一重要级中只有一项,不需要经常使用,常见于工具型应用

(3)竞品与用户习惯(不要在信息架构构图层面,为了不一样而不一样)

Web端

(1)利用不同结构,体现重要级;

(2)利用布局,体现逻辑关系;

  • 5、为讨论做好准备

你的过程就是你的底气!增加睡服力!

(四)评判产品信息架构设计

  • 1、用户测试

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

b. 让用户进行核心流程任务,检查完成任务是否顺利;

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

  • 2、撰写产品说明书

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

验证自己产品信息架构的合理性;

让团队其他成员更加清楚信息架构;

(五)信息架构推广:用信息架构思路设计页面

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

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

(一)流程设计的重要性

1. 用户和产品的交互到底是什么?

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

案例:用户怎么打电话?

场景有

 因此设计为:

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

企业中流程设计还需要考虑什么?

  • 企业有商务目标,因此需要在用户使用流程和业务需求中寻找平衡,以不干扰用户使用流程的方式完成需求
  • 案例:微信红包春晚合作

 2. 优秀的流程设计有什么好处?

  • 增加任务的完成率 ;
  • 让用户更方便地完成任务;
  • 对错误的充分思考;
  • 取得夸张的业务完成度;

(二)如何进行流程设计

1、充分理解业务需求

  • a、业务需要达成的商业目标(eg:易信-利用免费电话这样的刚需功能点,吸引更多的用户,完成社交关系的沉淀)
  • b、业务受到哪些技术和商务限制(eg:易信-免费电话要消耗公司本身资源,实际技术原理为公司支付了用户通话费用,因此无法大量送给所有用户)
  • c、了解业务合作方的需求(eg:某某合作支持了活动,所以希望得到曝光)

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

接触点:和产品或某一渠道发生交互的关键点。(用户看到什么,用户做了什么)

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

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

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

  • Tip1.为了完成流程设计,需要构思的用户场景有多个,并且要学会合并同类项;
  • Tip2.要顾及头尾,他们是最容易被遗漏的接触点;

3. 梳理接触点

4. 根据流程设计交互稿

5. 处理异常流程

(三)流程设计与交互工作

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

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

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

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


http://chatgpt.dhexx.cn/article/cXyExvfc.shtml

相关文章

【人机交互技术】Web界面设计

一、实验目的和要求 1)熟悉 Web 站点的信息交互模型和结构 2)熟悉 Web 界面设计的基本思想和原则 3)掌握 Web 界面设计的工具和技术 二、实验内容与步骤 1)实验内容: 要求根据 Web 界面设计的原则(简洁、一致性、对比度)&#…

尼尔森十大交互设计原则

前言 Jakob Nielsen(雅各布尼尔森)的十大交互设计原则。它们被称为“启发式”,因为它们是广泛的经验法则,而不是特定的可用性指导原则。因此,我们不能把它上升为一种标准,而是应该当做一种经验来学习&#…

人机交互-任务4:图形交互界面的设计(web)

文章目录 一、 题目二、 实验内容三、 方案设计四、 实验步骤与过程五、 实验结果与分析完整项目成品下载 一、 题目 目的 (1) 使用掌握的计算机语言完成图形界面的设计,熟悉图形用户界面设计的原则并运用到设计中。 (2) 通过用户友好界面的设计,使学生…

web交互设计模型

《信息架构中的常见模型》是整个“web交互设计方法”中的一部分: 本期的内容目的是分享和总结信息架构中一部分基本的交互模型。信息架构需要考虑内容和功能的建构,首先需要考虑怎样组织内容和功能的关系,也就是切 分内容,如何把一些动作和对…

交互设计文档示例_Web交互的重要性:提示和示例

网站创建涉及许多要素。 网站是与来自世界各地的用户进行交流的最佳媒介。 因此,至关重要的是,其设计方式应吸引用户并吸引其参与。 这是网站可以有效地覆盖其用户的时间。 设计师经常想知道使网站吸引人的秘密成分 。 设计和功能的结合是每个设计师都希…

计算机教改论文发在那家核心期刊,教改论文可以发表在哪些刊物上合适?

原标题:教改论文可以发表在哪些刊物上合适? 教师发表教改论文在考虑发表要求之余,都是希望自己的文章尽快见刊的,如果教师面临的是发表核心刊物的要求,那就做好一定的心理准备了,核心期刊没有容易发表的&am…

刊物论文级别

公开发表的论文分为六个级别是什么 ? (2014-04-18 15:35:20) 转载▼ 第一级-T类 特种刊物论文,指在《SCIENCE》和《NATURE》两本期刊上发表的论文。 第二级-A类:权威核心刊物论文,指被国际通用的SCIE、EI…

计算机专业发论文的等级有哪些,计算机专业发表职称论文多少字

计算机专业发表职称论文多少字?文章的字数关系着作者的发表费用多少,字数越多,作者的费用负担就要越重,所以,广大作者一定充分把握字数的要求,以免写得字数过多或是过短,这样都是不容易发表的,…

计算机论文刊物发表,计算机论文发表流程

一、计算机论文发表流程: 1、根据当地评审需求选定刊物,确定出刊时间及费用。 2、您将论文发给我们, 看看是否符合杂志社要求。 3、将定金40%付到支付宝担保交易,安排给杂志社审稿 4、审稿通过后您将收到杂志社出的用刊通知书。打…

Python散点图拟合

散点图拟合 import matplotlib.pyplot as plt import numpy as npx [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24] y np.array([5760, 3600, 1620, 1260, 1080, 900, 1080, 1800, 3060, 4680, 2880, 5040, 4140, 5580, 5040, 4…

用python绘制二维数据的散点图

用python绘制二维数据的散点图 一 绘制散点图脚本 import matplotlib.pyplot as plt #需要安装该 matplotlib库 import pandas as pd #需要安装pandas库#读入文件 file_path "data.txt"#存放二维数据的txt文件,换成自己的路径下 df pd.read_table(fil…

【matplotlib】散点图详解

目录 引用s 点的大小c 点的颜色 & cmap 配色方案marker 标号 & s 点的大小alpha 标号透明度linewidths 标号边缘的宽度edgecolors 标号边缘的颜色散点图大概长这样: 引用 调用方式:matplotlib.pyplot.scatter(x, y, s=None, c=None, marker=None, cmap=None, norm…

图文并茂的Python散点图教程

看完本教程,就可以应付大多数情况下的柱状图绘制了。 声明: 需要读者了解一点Python列表的知识教程借助于matplotlib库 散点图基础 必要的库 # 需导入要用到的库文件 import numpy as np # 数组相关的库 import matplotlib.pyplot as plt # 绘图库…

Python实现散点图和散点图矩阵的绘制

说明:代码运行环境为 Win10Python3jupyter notebook 散点图和趋势线的简单介绍: 散点图一般用于描述两个数量型变量之间的相关关系,而趋势线是显示相关性近似程度的一条直线。 绘制散点图的主要方法: 方法1:通过pa…

python绘制曲线、散点图

数据可视化matplotlib 1、折线图。 某商品进价49元,售价75元,现在商场新品上架搞促销活动,顾客每多买一件就给优惠1%,但是每人最多可以购买30件。对于商场而言,活动越火爆商品单价越低,但总收入和盈利越多。…

【Python】数据可视化-散点图绘制

Python在数据科学中拥有十分重要的地位,numpy, scipy, pandas, scikit-learn这些高效易用、接口统一的科学计算包使其在数据分析处理过程更加方便快捷,其强大的数据可视化工具也是重要组成部分。在Python中,使用的最多的数据可视化工具是matp…

python中的散点图还可以这么画

大家平时为了直观地显示数据的分布情况,在画散点图的时候,简单地把数据点用圆点标出来,像这样: 这样: 还有这样: 然而今天我想给大家展示的散点图,或许没有那么直观地反映数据的分布情况&#x…

【Python_绘图】折线图与散点图

接续博文 “【Python_绘图】折线图” CSDN 功能 数据:读取表格(可指定Sheet表……也可指定Sheet表中的特定列)绘图样式:多条折线图散点图 → 标记点折线图设置参数:设置轴标题、添加分界线等 代码 import matplotlib…

Matplotlib之散点图绘制

文章目录 1. 散点图简介2. 散点图的应用场景:3. 绘制散点图4. 回归分析 1. 散点图简介 散点图也叫 X-Y 图,它将所有的数据以点的形式展现在直角坐标系上,以显示变量之间的相互影响程度,点的位置由变量的数值决定。 通过观察散点…

Python数据可视化——散点图

PS: 翻了翻草稿箱, 发现居然存了一篇去年2月的文章。。。虽然naive,还是发出来吧。。。 本文记录了python中的数据可视化——散点图scatter, 令x作为数据(50个点,每个30维),我们仅可视化前两维…