原型设计规范网页规范用户体验规范交互规范

原型设计规范网页规范用户体验规范

交互规范

用户体验产品规范V1.0

目录

1、概述 (4)

1.1规范目的 (4)

1.2规范人群 (5)

1.3规范范围 (5)

2、web架构 (5)

2.1 web社会化框架 (6)

2.1.1AFO方法

6

首要活动 (6)

识别社会化交互对象 (7)

Feature（功能）- 选择核心功能集。 (8)

2.2 web信息架构 (9)

2.2.1 web架构 (10)

2.2.2 信息页面 (11)

2.2.2.1*用户视觉习惯

11

2.2.2.2*页面宽度

15

2.2.2.3*一致性

16

2.2.2.4*简洁性

17

2.2.2.5*清晰

18

2.2.2.6*当前状态

18

2.2.2.7导航

18

2.2.2.8平面版式

18

2.2.2.9栏目布局

24

2.2.2.10 栏目 (25)

2.2.2.11 分页 (25)

2.2.2.12 搜索 (26)

2.2.2.13 文字 (27)

2.2.2.14 图片 (29)

2.2.2.15 页脚信息 (32)

2.2.3界面内部交互

33

2.2.

3.1*用户的操作习惯

33

2.2.

3.2*用户行为自由可控

34

2.2.

3.3*容错性

34

2.2.

3.4*操作的灵活高效性

35

2.2.

3.5*操作提示

35

2.2.

3.6*各类弹框

37

2.2.4页面间交互

39

2.2.5任务交互（工具类）

40

2.3 web业务架构 (40)

2.4 web结构seo (41)

2.4.1逻辑结构

41

2.4.1.1逻辑结构的意义

41

2.4.1.2 逻辑结构规范 (42)

2.4.1.3 逻辑结构两个要点 (43)

2.4.1.4 逻辑结构图 (44)

2.4.2物理结构

46

2.4.2.1物理结构的意义

46

2.4.2.2物理结构的规范-扁平式 (46)

2.4.2.3 物理结构的规范-树形结构 (47)

1、概述

1.1规范目的

·在产品规划时，给部门内部的成员提供统一的规范和指导，有利于保证产品；

·解决公司产品的可用性问题，即使操作更加人性化，减轻用户认知负担，改进产品的用户体验，提升产品的市场竞争力；

·使产品在表现层面上达成界面外观与操作行为的一致。

1.2规范人群

参与产品规划的产品部成员。

1.3规范范围

所有互联网产品。

2、web架构

如果把一个网站比喻成一座建筑，那么这个建筑的结构就是这个网站的架构。建筑的结构决定了人们对它的第一印象，也决定了它最凸出的个性。建筑的结构能够从美的角度、实用的角度、个性的角度等方面分析。

web架构主要能够从四方面分析：社会化框架、信息架构、业务架构、结构SEO。考察这四个方面的都有各自的意义：网站社会化框架，以提高用户粘度为中心；信息架构，以满足用户需求为中心；业务架构，以客户赚钱为中心；为web架构seo，以服务搜索引擎为中心。

其中社会化框架和信息架构二者能够相互促进；web架构seo 相对独立，但它也跟信息架构的页面链接有很大的关系；信息架构和业务架构有时候会有冲突，这时取决于我们优先满足普通用户还是客户，或是当前产品的正处在的阶段决定它们的优先级。

2.1 web社会化框架

什么是社会化框架？社会化设计是对支持社会交往的网站或应用的构思、规划和构建的过程。社会化框架即是社会化网站设计时形成的框架。考察网站社会化框架，主要是以提高用户粘度为中心。

2.1.1 A FO方法

Activity（活动）-专注首要活动。

Object（对象） -辨识交互对象

Feature（功能）- 选择核心功能集。

首要活动

我们首先要解决（并伴随整个设计过程）的问题是——你的用户要用你的产品做什么？

首要活动只有一个

最能吸引人的应用，就是让人出众完成某个特定活动的应用

总结：

当我们在开发一个新产品时，我们要解决的最重要的问题不是“谁要用我的产品”，而是“用户要用我的产品来做什么”！

识别首要活动

用户的什么行为是网站获得成功的关键？

亚马逊回答是付款、淘宝呢？微薄

目标：用户希望达到的最终目标

活动：实现目标的一系列任务的组合

往往会专注于具体的任务，而忽略更宽泛的活动。我们不能盯着付款这个具体操作，忽略购买这个活动

任务：具体的某个功能

识别社会化交互对象

每一个活动都与特定对象相关,确定首要活动后的下一步是，用户进行这些活动时的交互对象。

模拟实物：

Facebook——在哈佛大学，facebook是一个真正的本子

亚马逊的礼物愿望单——原型是人们用纸写下并相互分享的礼物愿望单