个人作品 程 萍（交互设计师）
设计规范制定
控件库构建 ⼯工作机制制定
测试
创新性研究
设计
内 部 论 坛
项 目 管 理 平 台
行 内 系 统 iPad 端
行 内 系 统
对内
对外
交通银⾏行项⺫⽬目简介 网 上 银 行
团队培养 ⽤用户体验理念传播
前瞻性研究
客 户 交 互 屏
网 点 智 能 机 器 人
交通银⾏行项⺫⽬目⾄至今共历时20个⽉月，期间主要完成交⾏行⾏行内系统、项⺫⽬目管理平台、⺴⽹网上银⾏行、⺴⽹网点智能 创 新 终 端
终端、招聘⺴⽹网站等对⾏行内⽤用户及⾏行外客户的⼀一系列产品设计、设计规范制定、可⽤用性测试、研究等⼯工 作。另外，还在⼯工作期间为交⾏行员⼯工开展⽤用户体验设计理论、设计⽅方法、设计规范、设计⼯工具使⽤用等 多⽅方⾯面知识的培训，为交⾏行数据中⼼心培养具有潜⼒力的设计团队。
⼯工作流程及⽅方法 · 全模块设计产出 · 核心模块设计产出 梳理
理解
重构
测试
全面改造 ／设计
设计
理解
· 测试报告 · 产品优化方案
设计
测试上线 业务理解及梳理
调查研究
概念设计
方案确定
业务理解及梳理
流程绘制
改良
准备
核心改造 ／设计
项目理解
分析
流程绘制
交互及视觉设计
交互视觉设计 设计库构建 设计规范制定 设计库开发
测试准备 测试执行
分析优化
状况跟踪
反馈评估
修改优化
项目组UE知识培训 设计库及规范培训 设计工具培训 项目组设计支撑 项目组设计评审
概念设计 ／重建
设计规范 构建 发散
发现 构思
规划
· 概念方案（1-2个）
跟踪维护 敏捷改造 ／设计
实现
统计 总结
制定
· 控件库 · 设计模式库 · 控件规范 · 视觉规范 · 设计理念及原则
优化
跟踪 评估 把关
培训 指导
协助
· 培训材料 · 全系统设计产出 · 设计产出质量跟踪报告
筛选
· 评估报告 · 优化方案
交通银⾏行⾏行内系统改造——通⽤用业务平台设计 Design the General User Interface Portal for Bank of Communications 交通银⾏行⾏行内系统系统，是⾏行内员⼯工进⾏行业务处理的平台。⾏行内系统包括集中营运系统、 信贷服务系统、国际押汇系统、柜员系统等⼏几⼗十个系统⼏几百个业务，为了让⽤用户进⾏行跨系统⼯工作变得更加便捷、 统⼀一权限模型节约开发成本，交⾏行希望能将所有业务系统整合到⼀一个统⼀一的平台，这个平台将承载交通银⾏行⼏几百个业务的⼊入⼝口、 客户端，CS架构。这便开始了交通银⾏行⾏行内系统的改造——531⼯工程项⺫⽬目。 531⼯工程完成了对全业务通⽤用架构平台（GUIP）的设计构建，以及所有接⼊入GUIP的系统的设计改造。
01
研究发现 业务及管理⼈人员访谈
现有产品分析
实地调研
之前各个系统⽐比较独⽴立，⺫⽬目前要做全⾏行
各系统相互独⽴立。同⼀一系统中相似的
访问营业厅，进⾏行访谈和现场观
业务系统，作为所有的系统的⼊入⼝口，所
功能交互⽅方式不统⼀一，部分控件使⽤用
察。⾼高低柜、个贷、贸易服务系
有操作都在这⾥里进⾏行。
不合理。部分专业术语较难理解，内
统⼤大堂经理、授信等不同岗位操
希望完成任务更加流畅，不同使⽤用者，
容布局缺乏条理。菜单内容重复较多，
作不同的系统，由于业务特点、
在展⽰示上能有更加好的效果，更加智
层级⽐比较深。视觉⻛风格过时，⾊色彩过
业务功能、操作场景的不同，导
能，有⼀一定的新鲜感。
于浓艳。
各⾃自在操作习惯上有较⼤大差异。
02
⾏行内系统是为了服务⼯工作⼈人员⽽而最终服务客户
理解及分析 更灵活的框架 更⼤大⼤大操作空间
好看Graceful 好⽤用Usability
适应更多⾓角⾊色
将客户语⾔言转化为系统语⾔言 任务组合 快捷查找 跟踪任务
系统语⾔言＝客户语⾔言
发 起 任 务
⽅方便任务切换及向导
智能Intelligent 操作平台Platform
保留原有快捷习惯 及时错误追踪 接收任务及时提醒 沟通便利 专⼼心处理任务
被提醒 及时知晓 取得沟通 处理任务
客户 经理
⾏行内系统 更灵活的框架 更⼤大的操作空间 适应多⾓角⾊色多场景
各级管 理⼈人员
⾼高低 柜员
功能灵活切换，触⼿手可及 适应发起、接收多情境 按需个性化定制
客户
接 受 任 务 把握⻛风险及规则
成果展⽰示
营运 ⼈人员
信贷系统 …… 监控系统 营运系统 贸易服务系统 多系统集成、智能办公平台 全球⽀支付系统
⾼高效辅助运营
直接服务客户
⺴⽹网点系统 任务为中⼼心
及时通知及时提醒 多任务快速切换
交通银⾏行⾏行内系统改造——⺴⽹网点系统改造 Redesign the business outlets customer service system for Bank of Communications ⺴⽹网点系统是交通银⾏行前台柜员进⾏行⽇日常银⾏行业务处理所使⽤用的系统，柜员和⾼高级柜员可以通过此系统进⾏行所有前台银⾏行业务操作。⺴⽹网点系统最为⾏行内系统 中最庞⼤大、⼗十分重要的系统，本⼈人参与并主要负责了该系统核⼼心业务的深⼊入设计改造⼯工作。
01
柜员操作流程中接触点
前期调研及系统整体了解及分析 通过⺴⽹网点实地观察、柜员访谈、现有产品⾛走查、业务及管理⼈人员访谈， 对⺴⽹网点系统有了系统的了解， 并确⽴立后续整个系统改造的计划及⺫⽬目标
客户
取号
柜员
物件 告诉取号需求 回到柜⾯面办理
请求⾼高柜授权
请求⾼高柜授权
请求⾼高柜授权
返回咨询
柜员/客户
设计⺫⽬目标 现状特征
辅助⼈人员 （⼤大堂经理等）
被告知到⼤大堂经理
柜员打印凭证 客户签字
直接⾯面对客户，承受操作效率压⼒力
⺫⽬目标⽤用户
柜员 ⾼高级柜员
常⻅见业务有10个，占业务总量87% 同⼀一⽤用户常需办多项业务 需要与刷卡机、凭证箱打印机等多设备交互 键盘操作为主 时常需调⽤用其他系统的信息 需要反复验密、授权
提⾼高效率、快捷操作 防⽌止出错 常⻅见业务重点设计 简化流程 习惯延续 全流程优化 提升柜员⾃自我价值
柜员打印凭证 客户签字
柜员打印凭证 客户签字
纸质表单/凭证 填单
打印凭证
办理完成 授权并继续操作
授权并继续操作
授权并继续操作
ABC系统 登录系统
线上操作
线上操作
线上操作
交互屏 密码确认
密码确认
密码确认
02
具体业务设计流程 及⽅方法
情境访谈
需求理解
交易2
⾯面对具体的业务需求，通过情境访 谈、需求理解、交易全景分析、归 纳整合、流程梳理等流程最终完成 设计优化。
交易4
交易12
交易3
交易5 交易8
交易6 交易9 交易14
交易13 交易17
⺴⽹网点系统主要完成了储蓄存款、客 户信息管理、综合签约等核⼼心业务 的设计改造。
交易全景分析
交易1
交易18
交易7 交易10 交易15
交易19
交易11 交易16 交易20
交易…
在⽤用户⼯工作、⽣生活场所进⾏行中观察其进⾏行的⼯工作,并⼀一对⼀一访谈。记
通过整理分析现有业务需求⽂文档，将业务整体的处理流程、业务规
录⽤用户的⾏行为特征，并就发⽣生的部分操作进⾏行讨论。
则、操作逻辑等进⾏行初步分析与梳理，了解业务基本情况。
优化设计
流程梳理
将现有业务需求中包含的交易、功能进⾏行平铺，在不进⾏行整合梳理 的基础上单独排列，整理出交易全景与业务层级
归纳整合
组合1 交易1 交易2
组合3
组合4
交易6
交易3
交易11
交易5
交易12
交易7
交易13
交易8
交易…
组合2 交易4 交易9 交易10 基于前期的分析梳理，开始执⾏行各个⻚页⾯面的优化设计，在设计中做 微创新
根据已经重组后的业务模块框架，针对重点、关键业务进⾏行流程重 新梳理，并从流程中检验体验的流畅性
对整理出的交易全景与业务层级进⾏行功能级别的分类，删除重复部分， 组合交叉部分，重新组合出⼀一个完整的业务模块框架
03
⺴⽹网点系统设计成果
优 化 后
改造后的⺴⽹网点系统设计语⾔言： • 聚合：多笔分散交易聚合于⼀一起，信息重组避免重复操作； • 统⼀一：为相似业务构建统⼀一的设计模式，降低⽤用户学习成本，保证业务间的交互⼀一致性； • 有序：不同类别信息分区域展⽰示，让信息层级更清晰，浏览、操作更便捷；
层级深、交易分散
• 延续习惯：保留⽤用户⻓长期的操作习惯，延续快捷键的使⽤用； • 为键盘操作设计：解决特殊控件键盘操作不便利问题，重新设计全新的业务控件。
前
导航区
优 化 后
特殊控件键盘操作⽆无忧
有序、统⼀一
优化后柜员接触点 全流程优化
优化后柜员接触点
客户
取号
通过加强前期辅助⼈人员及设备的引导、整合同类交易、合并重复操作、改造客户交互屏信息呈现、优化凭证设计等全流程 的设计优化⽅方案，改善柜员扫描各类凭证耗时、系统交易分散不统⼀一、同⼀一业务要反复处理笔交易，影响柜员操作效率多 交易授权验密操作重复、客户难以理解反馈信息等造成的柜员操作体验不流畅、客户体验不佳现象。（前期辅助设备、后 期凭证设计暂未落实）
整体操 作区
内容区
聚合
全流程优化
极端情况控件操作不便利
⻚页⾯面凌乱、多样
柜员
物件 告诉取号需求 回到柜⾯面办理
请求⾼高柜授权
柜员/客户 优化前“串⾏行流程” 交易1 辅助⼈人员 （⼤大堂经理等） 开始
操作A
操作B
结束
开始
操作C
操作B 交易2
结束
… 交易…
完成 柜员打印凭证 客户签字
纸质表单/凭证 填单
优化后“并⾏行流程” 操作A 开始
操作C …
被告知到⼤大堂经理
扫描凭证
办理完成 授权并继续操作
ABC系统 登录系统
操作B
线上操作
完成 交互屏 密码确认
交通银⾏行⾏行内系统设计规范制定 Establish design specifications of GUIP for Bank of Communications 在完成交通银⾏行⾏行内系统系统⼀一定量的典型业务界⾯面后，整理归纳出界⾯面中使⽤用到的控件、界⾯面设计模式，并构建控件库及设计模式库，撰写相关规范，以作为后续设计的指导。本⼈人与 其他项⺫⽬目管理⼈人员参与了系统设计规范（交互规范）制定及维护的⼯工作。
已完成设计⻚页⾯面控件统计及整理
通⽤用控件库构建
业务控件库构建
控件交互规范撰写
控件视觉规范撰写
设计模式归纳
控件交互规范
交通银⾏行⾏行内系统 UE设计规范
⾏行内系统设计规范撰写
规范发布推⼲⼴广及维护
构建设计模式库
控件视觉规范
交互控件库构建
⾏行内系统iPad端移植设计探索 iPad design for GUIP 在交通银⾏行⾏行内系统设计⼯工作基本完成后，为了让⾏行内系统能满⾜足部分特殊⼈人员移动 办公的需求，为⾏行内系统构建跨平台产品体系，本⼈人负责了⾏行内系统iPad端移植的设 计探索⼯工作，并最终完成概念设计交互⽅方案。但由于⾏行内机制等多⽅方⾯面原因，该⼯工作 只进⾏行到概念设计阶段未能继续推进。
⺴⽹网 点 系 统
全 球 ⽀支 付 系 统
账 务 系 统
报 表 系 统
增 值 服 务 系 统
储 蓄 国 债 系 统
其 他 系 统 a
其 他 系 统 b
其 他 系 统 c
其 他 系 统 d
其 他 系 统 e
其 他 系 统 f
其 他 系 统 g
01
其 他 系 统 h
各⼦子系统特征分析 了解各⼦子系统的功能、特征 及⾯面向的⽤用户群
其 他 系 统 i
其 他 系 统 j
其 他 系 统 k
其 他 系 统 l
其 他 系 统 m
其 他 系 统 n
其 他 系 统 o
其 他 系 统 p
其 他 系 统 …
系统数据处理核⼼心
02
特征：集中处理、多重把关、平台安全稳定 ⽤用户：营运⼈人员、数据维护⼈人员等 移植：不适宜移植、移植空间⼩小
各系统可移植性分析 前端直接服务⽤用户的体系
综合各⼦子系统的⽤用户群、承载的功能、特征 等因素判断可移植性
特征：直接服务客户、便捷性要求 ⽤用户：客户经理、⺴⽹网点⾼高低柜员 移植：较⼤大移植需求，移植空间⼤大
前端服务客户的体系具有较⼤大移植空间 收单业务
系统 c
网点系统 系统 …
前端服务客户体系 风险系统
系统 d
账单系统 系统 e
后台数据处理核心
投行系统
客户关系
利⽤用iPad平台实地营销、业务办理
系统 b
的要求，具有较⼤大iPad移植空间。
系统 …
⽽而后台的数据处理系统主要是⽤用来严格执⾏行⻛风险把控、运营协助、数据处理， 以保证各项业务正常运⾏行的，对平台性能、安全性要求较⾼高，⺫⽬目前不适合移 植。
系统 a 利⽤用iPad协助PC优化业务流程
系统 g 系统 f 系统 …
系统 j
前端服务客户的系统主要是客户经理、⺴⽹网点⼯工作⼈人员⽤用来发展客户量、拓展 业务、为客户提供优质服务的，由于部分⽤用户⼯工作场景的特殊性及对便捷性
系统 i
现金系统
数据处理、⻛风险把控，移植空间⼩小
系统 h 业务特殊，不适宜移植
03
构建设计⺫⽬目标及理念
范围
⽤用户
场景
⺫⽬目标
市场条线
客户经理
营业⺴⽹网点
拓展业务
渠道条线
⼤大堂经理
实地业务办理
提升效率
……
移动办公⼈人员
……
发展⽤用户量
……
……
移动办公平台＋移动⼯工具箱 灵 活
敏 捷
精 巧
便 捷
04
功能分析信息架构 特⾊色功能发散
⾓角⾊色划分
从场景出发挖掘特⾊色功能
不同⾓角⾊色做差异化规划
通过筛选、发散、移植，并结合不同 ⽤用户的需求归纳出核⼼心功能，并进⾏行 产品信息架构
功能筛选 筛选适合的功能
适宜移植 适宜地移植部分PC功能
信息架构 最终完成产品信息架构
⽅方案展⽰示
交通银⾏行项⺫⽬目管理平台设计改造 Redesign the project management system for Bank of Communications 交通银⾏行项⺫⽬目管理平台是⽤用以⾏行内项⺫⽬目整个⽣生命周期的管理，包括项⺫⽬目⽴立项、项⺫⽬目计划、项⺫⽬目执⾏行、项⺫⽬目监控及项⺫⽬目结项等。随着⻓长期管 理需求的成熟发展及细化，原有项⺫⽬目管理平台在性能及功能上⽆无法满⾜足⼀一系列新的需求。基于此背景需 对现有平台做新模块的设计开发及旧平台的优化改造。本⼈人负责该产品的交互设计⼯工作
01 启动
计划
项⺫⽬目管理平台业务理解 范围管理 时间管理 成本管理 质量管理
执⾏行
监控
收尾
⼯工作⽇日志
固定报告、绩效
⽂文件归档、经验总结、总结报告
预研项⺫⽬目 进度计划
02
信息可视化阅读更快速
⾸首⻚页设计
项⺫⽬目关键信息⼀一⺫⽬目了然
通过访谈及业务需求的了解，将产品⽤用户划分为普通开发/项⺫⽬目经理⾓角⾊色，及
关键数据、整体概况前置展⽰示 提供详细信息⼊入⼝口
各部⻔门项⺫⽬目快速定位
中⼼心⽼老总⾓角⾊色。分析两类⽤用户的关注点，核⼼心需求，进⽽而罗列并区分功能的 优先级。最终在保持⼀一致性的同时，针对两种⾓角⾊色做差异化设计。 不同⾓角⾊色差异化设计
开发⼈人员/项⺫⽬目经理 普通开发/项⺫⽬目经理
优先级⾼高 重要
⽼老总/部⻔门⾼高经 中⼼心⽼老总
⼯工作⽇日志
项⺫⽬目整体管理
漏填/待确认⽇日志提醒
⼯工作量情况
我的事件
需求情况
我的需求
事件情况 报表
我的项⺫⽬目 优先级中 ⼀一般
部⻔门资源情况
查看/添加项⺫⽬目 部⻔门资源情况
优先级⾼高 不重要
公告
公告
提供便捷出⼝口
交通银⾏行⺴⽹网上银⾏行改版设计探究 Redesign the online bank for Bank of communications 在交通银⾏行⾏行内系统设计⼯工作基本完成后，交通银⾏行电⼦子银⾏行部⻔门将即将上线的⺴⽹网上银⾏行提交到UE设计团 队，要求团队帮助执⾏行⺴⽹网银的可⽤用性测试。在完成相关测试后，UE团队继续完成了⺴⽹网银概念设计探究⼯工作。 本⼈人负责⺴⽹网上银⾏行概念设计——交互设计⼯工作
领导访谈
专家⾛走查
竞品分析
⽤用户访谈
可⽤用性测试
领导访谈
头脑⻛风暴
功能规划
信息设计
仍以业务和功能为中⼼心
信息缺乏层次设计 缺乏引导帮助信息 专业术语不易理解
未针对特定渠道做优化 未考虑跨渠道使⽤用问题
交互设计
视觉设计
导航不清晰 交互流程复杂 ⻚页⾯面交互逻辑混乱 交互层级⽆无优先级
视觉设计⻛风格单⼀一、过时 视觉设计缺乏⼀一致性 细节设计产⽣生错误引导
01
产品现有问题
⺫⽬目前的个⼈人⺴⽹网银产品接近于⼯工作⼈人员使⽤用的⾏行内系统，距离优秀的消费级互联⺴⽹网产品还有较⼤大差距。 ⺫⽬目前⺴⽹网银除了存在⽤用户能看到的问题外，还存在很多⽤用户所看不到的深层问题，如⺴⽹网银战略定位和规划，⻛风险控 制需要所导致的复杂，业务流程的繁复，⽤用户为中⼼心的意识不⾜足，后台数据处理能⼒力较弱等。
02
满意度⾼高
⽤用户需要什么 中低收⼊入
年轻 互联⺴⽹网使⽤用经验丰富 ⾼高学历
?
期望功能
⽤用户功能期望KANO模型
魅⼒力功能
必备功能 账户管理、转账汇款、⺴⽹网上⽀支付、信⽤用卡业务、贷款、⼀一般理财业 务（基⾦金、保险、债券等） 期望功能 跨渠道查询业务（社保、公积⾦金、养⽼老⾦金、医疗⾦金余额查询；他⾏行 账户查询）、评估⼯工具（⻛风险评估、贷款计算器、财务分析软件）、 预约、挂失等
具备程度低
具备程度⾼高 必备功能
魅⼒力功能 ⽣生活服务类缴费、⻔门槛较⾼高的理财业务
满意度低
⽤用户⼼心智模型 ⽤用 户 需 要 什 么
安全 ⽤用户希望在⺴⽹网银上的个⼈人信息是安全的，资⾦金交易是安全的。
品牌 依赖
便捷 浏览器兼容性好，插件少，功能易查找，流程顺畅，操作效率⾼高。 清晰 信息的呈现清晰易懂，操作的引导性强，信息有效，没有⽆无⽤用信息。
品质
⼀一致 各平台内部体验⼀一直以及跨平台的⼀一致体验。 品质 视觉体现出⾼高品质感。 品牌依赖 持续使⽤用交⾏行⺴⽹网银。
清晰
⼀一致
安全
便捷
03 现有产品与⽤用户⼼心智及商业⺫⽬目标均不匹配
设计机会及策略
设计策略 导航架构设计问题
优化后导航架构
“设置中⼼心”内容
内容易于查找
与⽤用户预期不符
重新分组 ⽂文案优化 常⽤用业务前置
安全是⽤用户使⽤用⺴⽹网银的核⼼心诉求之⼀一
安全
⻚页⾯面内容简要
信息架构不明确，功能不易查找 业务和流程复杂
便捷
操作反馈及时
基本策略 交互逻辑混乱，信息层级⽆无优先级 缺乏引导帮助信息
可⽤用性 清晰
⽆无需⽤用户记忆 基础知识普及到位
“⾦金融服务”过概 括难以理解； 部分常⽤用业务过 隐蔽； 部分⽂文案不明确， 较难理解；
产品介绍完善、易懂
专业术语不易理解 未考虑跨渠道使⽤用问题
⼲⼴广⽽而浅的分类
信息层级清晰
产品推荐符合⽤用户需求
⼀一致
提供专业的指导
控件、交互⽅方式及视觉缺乏⼀一致性
给予⽤用户⾜足够的选择
视觉设计⻛风格单⼀一过时
品质 辅助⽤用户决策引导完成交易
设计较粗糙，缺乏细节
特⾊色功能
增加有价值的⽤用户数量
品牌策略 情感体验
难预期“常⽤用设
智能服务
置”中的内容，且 与“设置中⼼心”难
个⼈人定制化
区分
04
概念⽅方案1 ⼁丨财富管理专家 将交⾏行个⼈人⺴⽹网银塑造成⼀一个专业的财富管理专家⾓角⾊色，为细分⽤用户提供个性化的定制服务，引导、帮助⽤用户轻松梳理⾃自⼰己的财富。
卡3 装修 父母养老
压岁钱 卡2
零花钱
卡2
孩子学费
请吃饭 红包
购物
04
概念⽅方案2 ⼁丨个⼈人⾦金融中枢 将交行个人网银打造成个人用户的金融中枢，实现对用户所有金融动态信息的汇聚，多渠道的协同与无缝衔接
ATM
个⼈人⾦金融快捷⼯工作平台
个⼈人⾦金融中枢
个人金融辅助平台’
时时在线 时时提醒、及时反馈
提供全⾯面、完善的业务功能 汇集⽤用户线上线下所有⾦金融动态 ⼀一个账户统⼀一登录 业务办理流程安全、顺畅
在特定场景下，辅助⽤用户完 成简单 的⾦金融交易
提供最常⽤用业务、融合O2O模式 业务办理流程快捷、简便
易迅项⺫⽬目——易迅⺴⽹网⼿手机频道⻚页改版 Redesign the cellphone channel page of Yixun Net 由于易迅⺴⽹网各类产品的频道⻚页⾯面设计简陋，对⽤用户的购买帮助及对⺴⽹网站的转化率影像有限，为了体现频道⻚页的价值，区分其与产品列表⻚页 的差异，部⻔门⾸首先着⼿手家电频道及⼿手机频道⻚页的改版设计⼯工作。 本项⺫⽬目⾃自线下市场调研⾄至最终设计基本完成共历时两个⽉月 本⼈人主要负责⼿手机频道⻚页的设计⼯工作。
01
产品现状
• ⽤用户到⼿手机频道⻚页⼤大部分都从导航跳出，频道⻚页未给⽤用户带来很好的帮助和吸引。（⼿手机频道⻚页左侧导航点击量⾼高，但 楼层产品及右侧热卖区点击量低。） • ⼿手机频道⻚页楼层商品类别单⼀一且⽆无特⾊色，对⽤用户缺乏吸引⼒力。 • 频道⻚页仅是商品的堆砌罗列，未体现出⻚页⾯面的意义，缺乏专业性。
02
研究分析 市场调研
⽤用户分析
竞品分析 VS
？
每区域均有促销、推荐品 按价格⾼高低排列 按品牌排列
部分产品贴促销标签 按品牌排列
特⾊色合约机介绍
配件布局在⼿手机区域附近或作为赠品
⼼心⾥里有⼿手机的属性倾向 纠结于3、4款之间
靠近过道为低价产品
⾼高性价⽐比
⼤大屏、双核 给⻓长辈买 ⼩小⽩白求推荐
xxxx元左右 学⽣生机 领袖⼈人物帮忙推荐
热词快速检索
多维度划分
提供建议及互动
感性因素引导
快速定位查找
借鉴
⽤用户需求
借鉴
按价格纬度将⼿手机划分成不同类别，同等价位排在⼀一起为⽤用户提供参考；
⺫⽬目标明确，对产品较了解的中⾼高级⽤用户→找到⺫⽬目标特征的⼿手机；
提供快速检索出⼝口；
每类⼿手机中为⽤用户推荐若干特⾊色、热卖款；
⺫⽬目标较模糊或对⺫⽬目标不了解，需得到导购信息的初中级⽤用户→缩⼩小⺫⽬目标
提供专业的推荐及多维度的⼿手机类别划分；
为⼿手机贴关键词标签；
范围；
细节上融⼊入感性因素，体现⺴⽹网站的体贴；
⼿手机配件等周边产品搭售／布局在附近，便于交叉营销；
⺫⽬目标较明确，但想获得优惠信息的⽤用户→发现有优惠的商品；
03
第⼀一屏
头部
设计发散
② 巨⽆无霸
④ 品牌 旗舰店
③ 抢购
⑤ ⼿手机充值
① 导航
⽤用户⺫⽬目标 • 找到⺫⽬目标特征的⼿手机数码 • 缩⼩小⺫⽬目标范围 • 发现有优惠的⺫⽬目标商品
⺫⽬目标明确
⑥ 快速筛选
设计⺫⽬目标
各楼层
• 帮助⽤用户快速筛选适合的⺫⽬目标商品 • 引导⽤用户明确⺫⽬目标
① 新品⼲⼴广告 趋势参考
• 帮助⽤用户快速发现相应的优惠信息
② 巅峰PK
③ 顶尖智能橱窗
④ 排⾏行
设计⽅方案 • 快速筛选模块（导航、筛选器）
关注低价
P1
• 楼层引导（趋势/类别引导+单品推荐+排⾏行参考） P1 • 促销优惠模块（巨⽆无霸+抢购+楼层⼲⼴广告） P0
⼈人群细分楼层 （由于运营资源问题，第⼀一期不上线）
⼲⼴广告热⻔门橱窗
千元智能橱窗
排⾏行
选购要点 涵盖参数
⼥女性⼿手机橱窗
排⾏行
选购要点 涵盖参数
⽼老⼈人⼿手机橱窗
排⾏行
合约机介绍
合约机橱窗
⼲⼴广告
配件类别
配件橱窗
筛选
合约机楼层
⼿手机配件楼层
⻚页尾
⺫⽬目标模糊
04
成果展⽰示
上线链接：http://www.yixun.com/mobile_accessories.html?YTAG=1.100000803 （由于改版时距今已有较⻓长时间，⺫⽬目前线上产品与原设计有差异）
Thanks 程萍
chengpingfly@126.com
15216678117
控 UE 专 件 偏 质 控 家 维 差量 件 ⾛走 护 度 规 跟 查 统 … 测 踪 脚 计 范 表 试 本 表 指 模 标 板
交⾏行项⺫⽬目⽤用户体验设计经验总结
⼯工具箱