PORTFOLIO 李艺&交互设计
： ： @
目录 Contents
绘心
谷德
北邮爱课堂
Ipad端基于绘本治疗的心理服务平台交互设计
谷德设计网站改APP小屏幕认知最大化设计
北京邮电大学网络教学管理平台可用性测试
绘心 2020 / 05 -2 020 / 07
疫情后基于绘本治疗的心理服务平台 项目入围第十二届UXDA国际用户体验创新大赛复赛
项目背景 Project Background
社会背景
历史背景
政策背景
2020年新春，一场突如其来的新型冠状病毒疫情席卷全球。
SARS疫情、中东呼吸综合征疫情及埃博拉病疫情，给世界
2020年2月3日，习近平总书记主持召开中央政治局常委会
大众面对病毒肆虐、社交减少、长期居家、工作暂停等情
人民的生命和财产造成了重大损失，也给人们的心理带来
会议研究下一步疫情防控工作，会议强调：加强心理干预
况，出现不同程度的焦虑、恐慌甚至抑郁的症状。这种现
了严重的创伤。研究指出，这些生理损害可能在短时间内
和疏导、有针对性做好人文关怀，是打赢这场疫情防控阻
象在心理学上被称为「应激性心理创伤」。
恢复，但对心理的影响会持续很长时间。
击战的重要一环。
问卷调查 Questionnaire
以心理咨询的来访者为调查对象，采取无记名随机抽样，共回收有效答卷95份。
基本信息 女性
青年（14-28岁）
本科及以上学历
心理状态与压力源
对线上咨询的态度 无聊憋闷
疫情的发展与防控
恐惧紧张
课程的学习与测试
焦虑担心
工作的中断与恢复
注意力不集中
家庭的矛盾与冲突
抑郁无助
社交的减少与疏远
用户持积极看法 安全距离，符合当下需求
用户持消极看法
方便快捷，突破空间限制
沟通不便，难以表达自我
匿名保密，便于消除顾虑
环境不同，难达预期效果 网络泄密，担心信息流出
用户访谈 User Interview
在资料整理和问卷调查的基础上，对4位青年和2位咨询师进行非结构性访谈。访谈内容包括现阶段的心理状况以及对线上线下心理咨询的详细看法。
总结分析
上班族 25岁
来访者 17岁
咨询师 30岁
用户的心理问题个性化、多
由于疫情习惯在手机屏幕后用文字交流。各地解
童年曾遭受心理创伤，对别人的看法敏感。与心
目前的线上咨询信息维度较单一，而完整的咨
样化，不同用户心理问题严
封后感到恐慌，似乎忘记摘下口罩该如何打招呼。
理学老师约谈后在人际交往方面有了很大突破。
询流程需要收集更多信息，便于咨询师判断。
重程度差异较大
高三生 18岁
来访者 20岁
咨询师 36岁
来访者和咨询师均认为目前
在家和父母矛盾重生，负面情绪不断积累。怀疑
面对面表达更清晰，倾诉欲望更高。一些阶段性
疫情背景下线上咨询最方便可行，但来访者的
线上咨询形式信息单一、信
自己得了新冠，因为焦虑紧张导致了身体不适。
心理问题可以自我调适解决，无需咨询师介入。
注意力易分散，心理防御更强，更难获得信任。
任度低、难以敞开心扉。
用户构建 User Creation
用户细分
用户画像
基于问卷调查和用户访谈，依据心理问题程度细分用户。
感觉世界快要崩塌，
每天都在查看疫情信息，
身边的一切摇摇欲坠。
每天都在担惊受怕。
心理问题程度较重
吕潇艺准备在今年二战考研，但在家复习效
高晓平是一个刚工作不久的程序员。网络上
需要心理咨询师介入帮助开导
果不理想。去年她辞职全力备考，本想着考
的疫情信息和不断上升的确诊人数，使他草
不上就直接工作，但现在可能工作都找不到。
木皆兵、坐立不安，不断回忆着前阵子都去
主要用户
次要用户 心理问题程度较轻 需要通用且有效的方法调整情绪
吕潇艺 女 / 22岁 / 大学生
本来信心就不太充足，碰上特殊时期，她焦 虑到每天晚上睡不好。想尝试线上心理咨询， 又担心没有效果。
高晓平 男 / 26岁 / 程序员
了哪里、接触过什么人，明明知道要控制自 己，可还是频繁的看各种疫情信息，担心病 毒已经来到了家门口。
市场分析 Market Research
为了深入了解现有的线上心理服务模式，对精神类服务电商进行分析。
竞品分析
SWOT分析
S 简单心理 只提供高质量心理服务
壹心理 世界和我爱着你
前期举办公益，口碑具有优势
W EAKNESSES 收费项目众多，电商模式明显
松果倾诉
行业发展较久，积累较多用户
知识鱼龙混杂， 专业程度不足
放心说心事
尝试多种商业模式，经验丰富
入驻门槛不同，水平参差不齐
战略层：专业、高质量、价格合理
战略层：有趣、有爱、规范、专业
战略层：倾听、交流、高效、隐私
范围层：心理咨询、课程、直播、倾诉
范围层：心理咨询、测试、冥想、社区
范围层：隐私倾诉、咨询、社区
结构层：标签导航、重点功能比较突出
结构层：标签导航、重点功能不够突出
结构层：按问题类型或需求分类导航
表现层：模块划分清晰、颜色简洁明亮
表现层：模块划分清晰、颜色丰富清透
表现层：页面模块过多、颜色较杂乱
T
TRENGTHS
HREATS 线上模式不成熟，持观望态度
O
PPORTUNITIES 消费升级，由物质转精神消费
同质化严重，存在被赶超风险
科技进步，出现新的咨询手段
咨询师质量很大可能影响口碑
疫情居家，促进线上服务使用
痛点洞察 Pain Point Insight
用户痛点
行业痛点
总结分析
个性化：用户的心理问题和严重程度具有个体差异。
同质化：行业模式较相似，缺少差异化竞争优势。
需要一种全新的线上心理咨询方式：不同与现有咨询方式，能够帮助降低来访
心理防御：用户线上交流对陌生人的心理防御较高。
信息单一：线上咨询无法获取表情等多维度信息。
者的心理防御，并帮助咨询师收集用户的多维度信息。
注意力分散：注意力易被周围环境干扰，难以专注。
通用性不足：无法针对轻度心理创伤的大量群体。
私密性：用户的沟通交流内容具有非常强的私密性。
线上转化缺少创新：传统线下咨询模式直接照搬。
需要一种通用的线上心理服务方式：不仅能够满足用户的多元化需求，而且能 够面向大量群众，应用于轻度心理创伤的情绪调节。
理论研究 Theoretical Research
为了挖掘更合适有效的线上心理服务形式，对心理学专业理论进行调研。
心理咨询流派
绘本治疗
治疗流程
由于艺术创作方式的门槛较高，因此心理分析导向的艺术治疗更适合于线上
精神分析
存在主义
了解无意识冲突
行动前自我觉悟
发现成长缺陷
意识到责任逃避
有意识地生活
面对现实生活
人本主义
完形治疗
提供安全氛围
帮助寻找方法
绘本是以图片为主，文字为辅，展现青年视域中审美世界图景的读物，并能
帮助自我探索
作出自我解释
使他们产生积极的、有意义的互动。绘本阅读心理治疗应用投射技术原理，
认识成长障碍
完成未尽事项
充分发挥绘本本身具备的治愈性功能。咨询师以此为媒介，通过共视、共读、
形式，且更具有通用性。其中，绘本治疗作为新兴的细化方向之一，具有其
准备阶段
独特的魅力：创造了来访者自我表达的契机和提供实现自我的契机。
初步心理测试，确定心理状态并判断是否需要心理咨询 若需要咨询师介入，与心理咨询师预约合适咨询时间
共处，进行互动分享式阅读，可以最大限度地减少来访者的防御心理，使他
治疗阶段 与咨询师初步沟通交流，寻找咨询的切入点，建立信任关系 在咨询师指导下填写专业心理量表测试，发现潜在问题 双方共同商定绘本并共读，来访者借助绘本积极表达自我
们愿意和咨询师进行心与心的交流。
艺术治疗
认知行为
非语言沟通媒介
思维、决策、
评估阶段
艺术创作
疑问、行动、再决策
根据自身情况填写相关反馈测试，帮助咨询师调整后续方案
心理分析导向
改变看法和态度
接受咨询师的反馈意见，调整自我的心理状态
总结分析
后续回访
基于线上服务的特点，具有视听刺激的艺
接受定期的咨询师回访，加深双方的信赖关系
术治疗更有助于集中来访者的注意力，并 能为双方传递多维度信息。
日本绘本治疗师协会：开设成人绘本治疗课程
感受心理独立性的增强，渐渐弱化咨询师在生活中的角色
用户旅程图
产品框架
User Journey Map
Product Architecture 推荐内容
准备
评估
治疗
咨询师
交流 发现
行为
绘本 科普
判断
预约
支付
交流
阅读
表达
评估
回访
倾诉
树洞
科普
咨询
交流对话 共读绘本 测试评估 评价治疗
不知道自己是否需要心理咨询
痛点
不知道应该怎样选择治疗方式 对于咨询师的专业资质有质疑 担心个人隐私会通过平台泄露
难以快速放下防备，敞开心扉 无需介入时不知道如何自调节 不知道自己所处治疗流程位置
难以直观地感受治疗的效果
想要分享与倾诉，借鉴他人经验
不知道是否需要后续治疗
缺乏专业知识，担心看到假信息
在读
咨询绘本 自读绘本
评估测试：测试结果帮助判断
功能
智能助手：为用户个性化推荐
绘本治疗：借助绘本表达自我
资质认证：显示咨询师的资料
自读绘本：语音指引自主阅读
用户评价：鼓励用户进行评价
进度显示：显示治疗流程进度
治愈曲线：咨询前后状态可视
树洞倾诉：用户分享倾诉社区
评估测试：测试结果调整方案
官方科普：平台发布专业指导
个人信息
我的
治愈曲线
隐私保护：平台签署相关协议 设置管理
交互流程 Function Flow
登录注册
用户分类
发现
咨询师
绘本
科普
树洞
咨询师详情
预约
评估
沟通交流
阅读绘本
在读
我的
评价
交互创新 Design Innovation
选择平板的原因
使用行为观察
屏幕尺寸
使用场景
平板屏幕尺寸与A4纸大小相近，因此非常
平板多在空闲时间内使用，主要使用场景
适合用于阅读，有助于带来沉浸式感受，
为家中和工作场所，与线上心理咨询所需
而绘心的主要功能就是绘本治疗。
的私密场景类似。
目标用户
竞争差异
平板的消费群体主要集中于18-35岁的青
现有产品大多移植手机端的大屏适配版本。
年群体，且受教育程度较高，与绘心的目
但在实际使用时，手机与平板的交互行为
标群体相对应。
有较大差异。
通过对用户使用习惯的观察，发现用户使用平板时常用的
当用户以双手握持和使用支架时，拇指的触屏热区如
手势为：单手握持、双手握持和使用支架。综合来看用户
图所示。在交互设计时，将需要触屏操作的控件如导
双手握持和使用支架的手势操作，即横屏操作更为频繁。
航栏、按钮等放置于拇指热区图中易操作的位置。
单手握持
双手握持
使用支架
双手握持
使用支架
设计创新点
左侧导航栏设计
信息层级优化
页面重新布局
情感化设计
采用左侧导航，相比于标签式导航和顶部导航更符
充分利用平板的大屏优势，优化信息层级，增加主
通过页面内容重新布局，展示更多的信息。如多层
通过充满亲切与活力的橙色、活泼可爱的插画、温
合用户的使用习惯，帮助高效地进行导航切换。
从页面，减少界面跳转和用户操作次数。
级并列展示、信息流列数增加等。
馨的文字提醒等，拉近平台与用户之间的距离。
界面设计 Interface Design
发现页
咨询页
阅读页
通过用户的心理自测和平台使用行为，为用户推荐合适的心理服务内容。
用户与咨询师进行沟通交流，建立初步联系，并共同商定共读绘本。
用户在咨询师指导下进行阅读，并借助绘本充分表达自己的想法。
推荐内容
金刚区
流程进度
沟通对话
绘本内容
工具栏
屏幕中央难以操作，以信息浏
根据色彩心理学为四个功能
显示当前的咨询流程进
与流程并列展示，充分利用
在电子绘本中加入动效，
与咨询师进行绘本共读。为了最大化平
览为主。卡片式布局使展示更
赋予代表颜色，并使用相同
度，让用户清楚自己当
大屏优势。根据用户的使用
使绘本具有更强的交互
板大屏幕带来的沉浸式感受，将工具栏
加灵活，毛玻璃效果增加层次
形状达成视觉统一。设置于
前所处位置，提升咨询
习惯及心理预期，设计对话
性，增强沉浸感，帮助
调整至界面左右两侧，可以调节界面亮
感和亲和感。
屏幕右侧，便于用户点击。
过程的连续性。
框的布局。
用户代入绘本设定角色。
度、调节背景声音、绘制内容等。
界面展示 Interface Display
谷德 2019 / 12 -2 020 / 01
网站改APP小屏幕认知最大化设计 基于谷德设计网——建筑/景观/设计门户与平台
项目背景 Project Background
网站简介
项目价值
gooood谷德设计网是中国第一影响力与最受欢迎的建筑/景观/设
随着技术的不断发展和新趋势不时涌入市场，相比
计门户与平台。网站排名为建筑类网站全球前四，亚洲第一。网站
于非移动设备用户更频繁地使用移动设备，因此用
月流量突破2220万，坐拥500万用户，至今流量依旧高速增长。
户希望更快、更便捷地访问网站信息。
产品定位
目标用户
主要功能
使用场景
建筑/景观/设计相关从业人员
传播世界设计佳作、提供企业服务
在家或公司利用空闲时间浏览
用户需求
产品特色
社会价值
获取建筑/景观/设计设计灵感
每日推送全球最新设计项目和创意
服务全球创意，推进中国创造
核心功能 Core Functions
设计佳作浏览
设计专题汇总
工作岗位招聘
设计项目对接
网站收录全球优秀建筑/景观/设计项目，每日
将设计师访谈、海外设计经历、项目对接案例、
提供国内建筑/景观/设计相关企业的工作岗位信
设计书籍推荐等汇总并以专辑形式呈现。
搭建设计师与业主沟通的桥梁，业主发布项目详
更新推送并详细分类，带给用户设计灵感。
息，并为相关企业提供招聘广告服务。
细需求后，设计师可付费直接联系业主。
架构分析 Architecture analysis
网站信息架构
首页
Banner
展示网站最新优秀设计项目、专辑或工作，便于用户快速获取信息
Banner
最新专辑
展示网站最新优秀设计专题，如优秀设计师访谈等，更新频率较低
最新专辑
最新项目
展示网站最新优秀设计项目，如景观、建筑设计等，更新频率较高
最新项目
最新工作
展示网站最新设计工作岗位，内地设计工作室为主，更新频率较低
最新工作
项目对接
展示网站最新等待对接项目，只针对设计师会员开放，更新频率低
项目对接
APP信息架构
首页 专辑
分类
工作
项目对接
个人
专辑分类
将网站所有设计专题文章以专辑的形式收集整理，并进行编号更新
专辑分类
所有专辑
展示网站发布的设计专题文章，按照时间顺序从近到远进行排序
所有专辑
项目分类
将网站所有设计项目以景观、建筑、艺术、设计、咨询等进行分类
工作信息
展示网站收录的设计相关岗位信息，以内地设计公司或工作室为主
招聘服务
为部分设计企业或公司提供购买招聘服务，使用场景和用户较局限
复合检索
所有项目
地区分类
找设计师
为部分业主提供设计项目信息发布的服务，使用场景和用户较局限
工作信息
找甲方
为设计师提供待对接设计项目，会员可获得联系方式，场景较局限
项目对接
个人中心
展示用户的个人资料、联系方式、收藏文章、评论内容等个人信息
个人中心
设置
修改账号密码等功能，移动端应增加文字、图片、消息等通用设置
关于我们
展示谷德设计网的网站信息及网站数据，并推荐其相关新媒体矩阵
投稿推广
为部分设计师或公司提供免费发布设计项目的服务，并可付费推广
关键词检索
通过关键词进行全文搜索，搜索结果以文章、工作、公司分类显示
关键词检索
标签检索
通过项目标签分类：类型、地区、材料进行搜索，结果仅显示项目
标签检索
关于投稿
中英切换
专辑 项目分类
项目
工作
设置 中英切换
我的
关于我们
搜索
任务流程 Task flow
浏览专辑与项目
交互流程 启动软件
是否明确 浏览目标
否
是
查看最新设计专辑
查看最新设计项目
否
是否包含 感兴趣内容 是
查看全部项目
否
输入关键词搜索
选择标签搜索
是否找到 目标内容 是
查看全部专辑
首页
项目详情
专辑
项目
浏览图片
图片总览
选择目标内容
浏览文章内容
是否对文章 进行操作 是 否
收藏
分享
浏览结束
评论
工作
搜索
界面信息布局 Interface Information Layout
首页
项目页
在首页页面信息较多的情况下，需要突出主要信息，减弱或隐藏次要信息。由网站布局和信息架构可以发现，
在谷德网站中项目分类作为导航的下拉菜单以文字形式呈现。为了更加清楚、明确地表达含义，在移动端对各个分
突出信息是轮播图、推荐专辑和推荐项目，其次是工作、项目对接和广告内容。因此在移动端页面设计时首要
类添加图片。其次，由于层级跳转会增加用户的操作难度和认知负担，因此减少层级跳转，将分类和内容放于同一
展示轮播图和推荐内容，将广告位设置在轮播图和推荐内容里。
页面。专辑页与项目页信息架构相似，布局保持一致。
概念方案
概念方案
深化方案 左侧个人中心隐藏 突出产品核心功能
轮播图尺寸微调整 在页面显示更突出
深化方案 右侧点击全文搜索 关键词和标签搜索 点击切换项目分类 减小尺寸利用空间
专辑更新频率较低 减少首页所占空间
项目更新频率较高 突出展示项目图片
标签导航快速切换 突出产品核心功能
项目卡片包括图片、 标题、简介和标签
界面信息布局 Interface Information Layout
项目详情页
图片查看页
项目详情页以图文结合为主。为了与网站风格保持一致，并提升用户的阅读体验，在文字排版上选用衬线字体。
在项目详情页中，图片作为信息传达的主体之一，能够带来较强的视觉刺激。用户在浏览文章内容时，经常需要
为了便于用户收集优秀设计项目进行灵感启发、鼓励用户探讨自己的经验和想法，在屏幕底部设置收藏和评论
点击查看图片细节，因此在移动端设计时应充分考用户点击图片后的界面信息布局。在此页面中，图片作为主体，
按钮。专辑详情页与项目详情页信息架构相似，布局保持一致。
注释文字作为辅助内容出现。左右滑动可浏览图片。
项目详情
项目评论 精简页面功能 低频移至右侧
查看图片
图片总览
页面上滑以后 封面背景隐藏
项目封面背景 与上级页呼应
项目所属公司 及其发布时间
文章文字内容 衬线字体排版
评论内容较少 底部浮层形式 文章图片内容 点击查看大图
高频优先展示 快捷收藏评论
显示用户信息 以及评论内容
文字底部蒙层 保证可识别性
下载、总览、 文字显示切换
全文图片 略缩显示
设计规范 Interface Information Layout
字体规范
色彩规范
苹方字体无衬线，简约醒目、干净利落，适用于界面大部分文字。与之相比，衬线字体宋体更易于阅读和换行
品牌色选用网站logo主色调，保持与网站的一致性。文字通过黑白灰颜色层级建立权重，形成视觉层次。
识别，且被用于网站文章内容排版，因此适用于文章正文。
Aa
中文：苹方 / 宋体
数字：DIN
字号：22 / 26 / 30
字号：22 / 26 / 30
#5498D2
#333333
#666666
#999999
品牌色
文字主色
二级文字色
三级文字色
栅格系统 28
最小单位
28
750px
在页面设计时选用4px为最小单位调整页面 元素的间距和尺寸，使页面布局规律有秩 序，达到统一的视觉节奏。
40
选择原因 选择4px作为最小单位，是因为它能够适用 于大多数手机屏幕，且在具体使用时具有 较强的灵活性。 60 20
40
40
组件设计
所有界面 All Interfaces
北邮 爱 课 堂 2019 / 11 -2 019 / 12
北京邮电大学网络教学和管理平台 对爱课堂平台学生端进行可用性测试研究
项目背景 Project Background
网站简介
现存问题
北京邮电大学爱课堂教学平台于2014年引进Blackboard系统建设而成，由校长亲自命
2017年至2019年间，在平台用户总数保持稳定的
名。教学平台将多媒体网络学习资源、网上学习社区以及网络技术结合于一体，形成
情况下（新增新生用户与注销学生用户数量基本持
一种全新的网络学习环境。统计数据显示，截止到2019年12月，北邮爱课堂已开设课
平），年度用户访问总量下降41.3%。可见，北邮
程数4963门，用户总数30687人。
爱课堂平台可能存在可用性问题。
年度用户数 年度访问量
2017
2018
2019
数据来源：北邮爱课堂
平台满意度研究 Satisfaction Research
功能使用频率
预期差距 找不到网站相应的操作功能，体验很差
总结分析 用户高频使用功能为资源功能、信息功能和学习功能。在用户 数量和使用频率上，高频功能数据远大于低频功能。因此，改 进高频功能的可用性能够提升更多用户满意度。
互动比较困难，文字获取信息有效性低 资源功能
学习功能
在问题“您认为爱课堂教学平台上的学习与预期有什么差距” 的回答中，“找不到相应操作功能”的用户和认为“互动困难”
信息功能
的用户数量最多。因此，网站的界面布局和文字设计可能存在 流于形式，老师没有真正利用辅助教学
可用性问题。 基于以上结论，为了获得版本的优化改进方案，针对北邮爱课 堂资源功能、信息功能和学习功能进行网站界面布局和文字设
网上学习占用额外时间，增加学习负担 交流功能
协作功能
计的可用性测试。 数据来源：《Blackboard平台满意度调查与平台建设研究》
可用性测试 Usability Testing
测试准备 测试原则
招募用户
测试条件
尼尔森十大可用性原则
研究方法 可用性测试、眼动仪测试、访谈研究、问卷法、大声思维
北邮本科生
男女比例7:3
18~22岁
测试仪器：aSee Pro 桌面式眼动分析仪
测试载体（硬件）：Hasse神舟战神Z7-KP7EC
测试软件：aSee Studio 数据分析系统
测试载体（软件）： Mozilla Firefox Browser 71.0
测试地点：北京邮电大学工业设计可用性测试实验室
网络环境：北京邮电大学校园网（BUPT-portal）
测试任务
查看大纲
下载课件
提交作业
查看评语
情景描述
情景描述
情景描述
情景描述
小爱想要提前预习课程内容，因此准备在北
小爱想查看课程最近的资料，复习课上学习
小爱完成了某课程作业，因此准备在北邮爱
提交作业后，得知老师已经完成作业批改，
邮爱课堂上查看教学大纲。
的知识点。因此准备在爱课堂上下载课件。
课堂上提交作业。
小爱准备在北邮爱课堂上查看作业评语。
任务流程
任务流程
任务流程
任务流程
①打开“我的机构”页面
①打开“我的机构”页面
①打开“我的机构”页面
①打开“我的机构”页面
②点击导航栏的“课程”按钮
②在我的课程版块点击《课程名称》
②在我的课程版块点击《课程名称》
②点击“工具”版块的“我的成绩”
③在搜索框输入“课程名称”并执行
③在导航中找到并选择“课程课件”
③在导航中找到并选择“作业习题”
③点击“作业具体名称”旁气泡图标
④点击课程ID进入课程
④点击“课程具体课件名称”下载
④找到并选择“课程具体作业名称”
④阅读老师对作业的评语
⑤在导航中找到并点击“教学大纲”
⑤上传作业文件
⑥点击提交
任务过程数据分析 Task Process Data Analysis
操作时长统计——以任务一为例
任务后访谈分析 以任务一的点击“课程ID”操作的访谈结果为例。
用 户
用户1
用户2
用户3
用户4
用户5
熟 悉 度 13.88s
3.50s
3.75s
3.50s
4.75s
点击搜索栏
3.63s
2.63s
4.75s
3.25s
4.63s
点击“课程ID”
6.38s
5.63s
9.00s
14.13s
4.88s
点击“教学大纲”
7.00s
1.75s
1.63s
1.88s
2.50s
点击“课程”
页 面 操 作 时 长
Q “您觉得课程ID是否容易被找到？是否容易被点击？是否符合使用习惯？若答否，为什么？” A1 A2 A3 A4 A5
课程ID所处条目颜色不易找到。难以点击，应增大按钮范围或增加进入课程的直接按钮。 难以找到，上方筛选区域所占面积太大。不符合使用习惯，根据经验应点击课程名字进入。 易于找到，但是上方筛选区域存在一定视觉干扰。易于点击。基本符合平时的使用习惯。 难以找到，上方课程筛选区域所占面积太大。不符合使用习惯，应点击整个条目都可进入。 易于找到。较难点击，可点击区域太小。不符合使用习惯，根据经验应点击课程名字进入。
将任务后访谈与眼动仪数据进行综合分析，能够更加全面地了解用户在操作过程中的认知与思维过 程，如用户4难以定位目标是由于受到界面上方的视线干扰，从而使反映出的可用性问题更加客观。
眼动仪数据分析 注视轨迹图
眼动热力图
以用户4在任务一的点击“课程ID”
以用户4在任务一的点击“课程ID”
操作数据为例。
操作数据为例。
从注视轨迹图见用户总注视次数较
从热力图可见用户在课程目录和教
多，注视轨迹不符合逻辑，存在大
师名称处停留时间较长，说明界面
量反复的注视轨迹。用户无法直接
搜索结果不突出。用户难以在快速
定位目标，搜索绩效低。
提取信息、定位目标位置。
测试后问卷数据分析 Post-test Questionnaire Data Analysis
问卷设计
整体分析
设计原则
用户满意度总值为-0.33，体现出北邮爱课堂教学平台整体体验较差。设定0分为基准分。状态可见原则、环境贴切原则、
根据尼尔森十大可用性原则中的状态可见原则、环境贴切原则、一致性原则、易取原则、灵活高
一致性原则问题下的用户满意度高于基准分，体验较好；易取原则、灵活高效原则、易扫原则、人性化帮助原则问题下的
效原则、易扫原则、人性化帮助原则对北邮爱课堂进行评估，通过用户对原则的评价测试满意度。
用户满意度低于基准分，仍有待提高。
问卷组成
状态可见原则
问卷由15道题组成，采用7等级里克特量表进行问卷设计。问卷总值最高为45，最低为-45。满意 度值为0代表用户对是否满意无偏向性。
1.17
环境贴切原则
一致性原则
1.00
-2
易扫原则
人性化帮助原则
1.00
0.17
0.00
-3
灵活高效原则
0.67 0.33
15×
易取原则
-1
0
1
2
3
-0.33
0.00
0.00
-0.50
-0.67 -1.17
-0.50
-1.83
具体题目分析 易取原则
灵活高效原则
人性化帮助原则
针对分值低于基准分0的问题进行分析。
针对分值低于基准分0的问题进行分析。
针对分值低于基准分0的第一个问题进行分析。
Q “选项是否放置在目光经常停留的地方？”
Q “平台快捷键是否位于显著位置？”
Q “平台是否为晦涩难懂的标签提供阐释？”
A
A
A
平均值：-0.5，中位数：-0.5，众数：-2.0，方差：1.9。
平均值：-1.2，中位数：-1.5，众数：-2.0，方差：2.2。
平均值：-0.5，中位数：-1.0，众数：-1.0，方差：3.1。
分析：用户在这一问题上虽存在一定分歧，但整体满意度偏低。北邮
分析：数据离散程度较大，说明北邮爱课堂设置的快捷键位置对于不
分析：数据离散程度极大，说明北邮爱课堂的标签阐释对于不同用户
爱课堂的选项位置放置没有达到用户的预期，用户不能在第一时间按
同用户存在体验差别，其差别主要在于体验差的程度。结合用户访谈
存在体验差别。结合用户访谈可知，其差别或由于所学专业知识不同，
照自己的预想找到选项。
可知，这种差异或与个人使用习惯有关。
计算机相关专业的用户对于晦涩标签接触更频繁，因此体验较好。
建议：建议将选项放于用户习惯的位置，便于用户快速定位。
建议：快捷键位置结合用户使用习惯改进，满足多数人需求。
建议：改进标签提示和引导，帮助大多数人理解标签，提升用户体验。
结果统计 Result Statistics
问题汇总
文字
色彩
举例分析 高
中
低
合计
大小不适
1
1
2
4
表意不明
1
2
1
4
颜色不当
1
0
0
1
提示不当
0
1
0
1
点击区域过小 位置不当
0 0
0 1
1 0
1 1
版式
图像
功能架构
面积不当
1
1
0
2
版块辨识度低
3
0
1
4
风格不统一
0
1
0
1
条理不清晰
0
0
1
1
表意不明 功能分类错误
合计
0 1 8
1 0 8
0 0 6
1 1 22
版式设计问题
色彩设计问题
界面位置：课程主页页面
界面位置：搜索结果页面
问题描述：不同课程左侧导航栏不同，违反用户使用习惯
问题描述：筛选区域过于醒目，干扰视线
违反原则：一致性原则
违反原则：易扫原则
严重程度：中
严重程度：中
改进建议：统一标准化课程左侧导航栏
改进建议：缩小该区域面积，并将颜色更改为浅色
文字设计问题
文字设计问题
图像设计问题
界面位置：我的作业页面
界面位置：我的成绩页面
问题描述：“给学习者的反馈”表意不明
问题描述：“气泡”图标存在歧义 ，表意不明
违反原则：环境贴切原则
违反原则：环境贴切原则
严重程度：低
严重程度：中
改进建议：将文字更改为“教师评语”等
改进建议： 更换图标，或在图标旁标注含义“评语”
THANKS 李艺&交互设计
： ： @