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

用户体验产品规范V1.0

目录

1、概述 ............................................................................................................................................ 3

1.1规范目的............................................................................................................................. 3 1.2规范人群............................................................................................................................. 3 1.3规范范围............................................................................................................................. 3 2、web架构 ..................................................................................................................................... 3

2.1 web社会化框架 ................................................................................................................. 4

2.1.1 AFO方法 ................................................................................................................. 4

首要活动 ................................................................................................................... 4 识别社会化交互对象 ............................................................................................... 5 Feature（功能）- 选择核心功能集。 ................................................................... 6

2.2 web信息架构 ..................................................................................................................... 7

2.2.1 web架构 .................................................................................................................. 7 2.2.2 信息页面 ................................................................................................................. 7

2.2.2.1 *用户视觉习惯 ........................................................................................... 7 2.2.2.2 *页面宽度 ................................................................................................. 10 2.2.2.3 *一致性 ..................................................................................................... 11 2.2.2.4 *简洁性 ..................................................................................................... 13 2.2.2.5 *清晰 ......................................................................................................... 13 2.2.2.6 *当前状态 ................................................................................................. 13 2.2.2.7 导航 ........................................................................................................... 13 2.2.2.8 平面版式 ................................................................................................... 13 2.2.2.9 栏目布局 ................................................................................................... 18 2.2.2.10 栏目 ........................................................................................................... 19 2.2.2.11 分页 ........................................................................................................... 19 2.2.2.12 搜索 ........................................................................................................... 20 2.2.2.13 文字 ........................................................................................................... 21 2.2.2.14 图片 ........................................................................................................... 22 2.2.2.15 页脚信息 ................................................................................................... 24 2.2.3 界面内部交互 ....................................................................................................... 24

2.2.3.1 *用户的操作习惯 ..................................................................................... 25 2.2.3.2 *用户行为自由可控 ................................................................................. 25 2.2.3.3 *容错性 ..................................................................................................... 25 2.2.3.4 *操作的灵活高效性 ................................................................................. 26 2.2.3.5 *操作提示 ................................................................................................. 26 2.2.3.6 *各类弹框 ................................................................................................. 27 2.2.4 页面间交互 ........................................................................................................... 29 2.2.5 任务交互（工具类） ........................................................................................... 29 2.3 web业务架构 ................................................................................................................... 30 2.4 web结构seo .................................................................................................................... 30

2.4.1 逻辑结构 ............................................................................................................... 30

2.4.1.1 逻辑结构的意义 ....................................................................................... 30 2.4.1.2 逻辑结构规范 ............................................................................................ 31 2.4.1.3 逻辑结构两个要点 .................................................................................... 31 2.4.1.4 逻辑结构图 ................................................................................................ 32 2.4.2 物理结构 ............................................................................................................... 34

2.4.2.1 物理结构的意义 ....................................................................................... 34 2.4.2.2物理结构的规范-扁平式............................................................................ 34 2.4.2.3 物理结构的规范-树形结构....................................................................... 34

1、概述

1.1规范目的

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

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

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

1.2规范人群

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

1.3规范范围

所有互联网产品。

2、web架构

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

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

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

2.1 web社会化框架

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

2.1.1 AFO方法

Activity（活动）-专注首要活动。 Object（对象） -辨识交互对象 Feature（功能）- 选择核心功能集。

首要活动

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

首要活动只有一个

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

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

识别首要活动

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

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

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

我们平台的首要活动呢？ 购买日用品 娱乐 赚钱 享受美食 与家人保持联系……..

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

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

任务：具体的某个功能

识别社会化交互对象

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

模拟实物：

Facebook——在哈佛大学，facebook是一个真正的本子 亚马逊的礼物愿望单——原型是人们用纸写下并相互分享的礼物愿望单

Web应用中社交对象不一定要表现真实物品（视频、音乐、电子狗），他们有时候也是可以抽象的

社交对象设计成功的案例

照片 书签 博客 商品 职位 电影 视频 新鲜事 消息 演示文档…..

为社会化对象分配URL地址： 对象有了URL地址就可以被分享出去 对象有了URL地址就更容易被查找和寻回 URL让人可以直接链接对象