个人作品集

中国矿业大学

李庆辉

作品目录 1

一、交互体验大赛道格护航app

二、贝朗网页设计

三、品啜美食交友app

四、矿大网页设计

交互体验大赛 2

道格护航

此app是对于女性独自外出时进行安全保护和预警的程序，

我主要负责前期需求分析和交互设计

目标用户

以大学生为主的年轻女性

解决了什么问题？痛点原因？

女性独自外出如果遇到危险，可以通过app及时向紧急联系

人求助和报警，并时刻发送出自己的地理位置

近几年年轻女性受侵害事件时有发生，年轻女性对于独自

外出（尤其夜晚独自打车等情景）存在顾虑甚至恐惧

道格护航 3

如何解决需求？ 系统图

1.外出时可以设置自己最熟悉的人为紧急联系人， 安全保 地图系

然后设置受保护时间，当该段时间发生危险可一 证系统 统

键求助

2.若受保护时间结束时未取消app保护，那系统 道 公共交通

将自动求助紧急联系人并发送目标用户的地理位 格 工具

置

3.独自打车时可以进行道路检测，一旦发现路线

偏离将会启动预警机制，并提醒目标用户注意潜

在危险的存在

年轻女性

用户

道格护航 4

案例优化

发现问题：1、开始阶段定位用户位置、手机号注册、完善

个人信息、绑定亲人手机号，获取权限太多影响用户体验

2、对于防误触服务，十秒钟过于漫长，有可能发生新的险

情

3、当用户需求快速求救时，即在几秒内迅速反应，立即求

助范围小

解决问题：1、权限分级获取，即先获取主要权限，其余当

使用时再次获取

2、缩短防误触时间，改为5秒反应时间

3、增大立即求助占比

道格护航 34 5

主要任务 7 点按操作

6 滑动操作

2 界面跳转

1 5 返回同界面

点按操作热区

8

道格卫士任务流

1 选择应急时间

2 一键求助迅速应对突发状况

3 开启时间倒计时，倒计时结束发送危险警报

4 进行五秒防误触，误触可快速返回

5 录音30秒，发送给紧急联系人位置 音频

6 误触后取消报警需要密码确定本人操作

7 忘记密码时，后台会把密码给紧急联系人

8 联系好友，观察好友地理位置

道格护航 6

色彩含义

此程序为安全类app，黄色为预警色，蓝色更加

正式，方便突出主体

想给用户展示的最重要东西？

此款应用程序是在紧急情况下使用的，因此界面

更加简洁，同时实用性也非常重要，以保证信息

的及时发送与接收

贝朗医疗网页 7

贝朗

当扫码录入医疗盒信息后，该网页提醒医疗工作人员定期

对不同种类医疗盒进行消毒，并且存储消毒日期数据，我

主要负责交互设计和部分UI设计

目标用户

医院医疗工作者

解决了什么问题？痛点原因？

通过扫描医疗盒条形码可以快速录入医疗盒消毒信息，并

定期提醒工作人员此医疗盒下次消毒时间，便于及时消毒，

防止医疗盒病菌损坏。

医院医疗盒过多时，数据容易混淆，错过最佳的消毒时间，

导致不必要的经济损失

贝朗医疗网页 8

点选删除 该类型医 如何解决问题？

按钮 疗盒数量

1.扫描医疗盒条形码进入医疗盒录入界面进行信

按录入时 点击查看 息录入

间排列顺 医疗盒数 2.录入后的医疗盒信息将进入医疗盒档案，档案

讯，提示 据类型 显示录入时间，有效期，下次消毒时间等

消毒有效 3.当医疗盒档案中某类型医疗盒应当消毒时，该

当数据变为零 信息将显示在消毒预警页面，并且每次打开网页

期 天，医疗盒仍 会提醒有医疗盒应当进行消毒

未消毒，发生

页面跳转，进

入即将过期页

面

贝朗医疗网页 9

想给用户展示的最重要东西？

此网页是医疗工作人员定期查看的，界面以实用

性为主，获取相关信息必须控制到三次点击以内，

保证信息的快速获取

设计细节？

医疗盒录取时，考虑到医院情景，一个一个分别

录取效率太低，因此决定扫码后的医疗盒统一进

入医疗盒录入界面（如左图），然后再进行录取

档案。

在医疗盒档案中，数据颜色为绿色代表医疗盒有

效，进入最后的预警天数时，显示为红色代表紧

急。

美食交友app 10

品啜

此app是通过美食进行交友的平台，人们可以通过应用进行

线上学习或者线下实际社交

目标用户

乐于分享喜欢社交的人群

解决了什么问题？痛点原因？

市场美食app众多，但大多强调线上学习，品啜在用户线上

学习基础上，也可满足用户线下美食社交，扩大用户的交

际圈

快节奏的生活导致人们失去了某种联系，有些年轻人社交

能力有所欠缺，甚至整个环境都更加浮躁。我们希望喜欢

交流、喜欢社交、想要社交的人通过此应用联系起来

美食交友app 11

品啜使用场景描述 目标

通过品啜实现交友聚餐，拒绝孤独

孤单找不到人一起吃饭 品食。

拿出手机 用手机邀请其他

朋友和我一起去

可是独 参加聚食活动

自一人

晚上想去吃饭 看看周围的商家 去感兴趣的地方 愉快的

有没有感兴趣的店 结束

家的活动

一起吃饭，认识

和朋友到达活动地 更多的朋友

点

美食交友app 13

需求分析？

1.社交需求，有时稍显无聊，牵朋引伴也不知做些什么

2.安全需求，食材以及处理工具的安全性

3.美食学习与评价

需求转化？

1.社交方面，可以寻找私厨，进行定制服务。可

举办或参加线下聚会，不同场合聚集相同兴趣爱

好的人以食会友

2.安全方面，可进行地点考核，确保地点安全，

若参加活动需进行身份认证，线下活动时保证人

身安全

3.美食方面，线上学习做不同食物时能找到大神

指导。线下厨艺可得到及时反馈，得到激励，促

进厨艺进步，培养业余爱好

美食交友app 14

品啜主要环节低保真原型

点击设置名称， 点击添加标

出现闪烁光标， 签，出现标

同时从下方弹 签窗口

出输入键盘

点击发布 点击评论

按钮，向 发布按钮， 点击制作

上弹出发 跳转至评 过程，向

布弹窗 论发布页 下弹出制

作过程填

点击添加 若相应信 写操作窗

图片按钮， 息未全部 口

跳转至相 填写，点

机照片选 击发布按 相应信息

择页 钮则弹出 全部填写

提示弹窗 完成，点

击发布按

钮，导航

栏显示发

布成功，

页面跳转

至评尝页

美食交友app 15

视觉分析依据微交互及交互创新 点击变换交互，视觉更集中

品啜 地图确认位置 个性占座系统

尝鲜绿（健康、生动）

目标用户为外向的喜欢美食的爱好者，

视觉上给人健康的生活方式

扁平化（清爽 无负担）

参加线下活动代表着信任，代表着无

负担

美食交友app 15

视觉分析依据微交互及交互创新 点击变换交互，视觉更集中

品啜 地图确认位置 个性占座系统

尝鲜绿（健康、生动）

目标用户为外向的喜欢美食的爱好者，

视觉上给人健康的生活方式

扁平化（清爽 无负担）

参加线下活动代表着信任，代表着无

负担

矿大网页设计 17

小煤

希望此网页能给每一个学子提供一个更好的平台，无论是

在校生活还是创业方面，能够大自我的交际圈，发现一个

更大的世界。

目标用户

中国矿业大学学生

解决了什么问题？痛点原因？

提供作品展示心得体会板块、二手交易板块和学校周边，

闲置也可带来利润。作品展示可以为低年级的学生带来一

定的借鉴，好的设计作品也可以带来一份收入。

毕业季有很多尚可使用的二手物品进入了垃圾站，即使设

立跳蚤市场，交易量甚少。很多低年级学生缺少指路人，

在迷茫中摸石头过河。很多优秀学生的设计作品被埋没，

好的作品与投入精力资金呈正相关。

矿大网页设计 18

如何解决问题？

1.将功能分布到具体板块，如二手交易分布到校

园板块，在主页也设置了常用功能导航，如作品

展示

2.将主要功能设立到分级页面中，避免首页内容

过多，影响用户体验

3.在周边环节，希望与商家能够合作，可在线预

订位置，可解决聚会时负责人总是花费精力去预

订班级位置的问题

4.探索环节由我们进行日常维护，发布一些学校

新闻或者比赛信息等

矿大网页设计 19

想展现最重要的东西？

希望改掉同学们对于学校网站的固有印象，

通过此网页能够获取更多的信息，看看别人

在做什么，让自己的生活更加丰富一点

界面的含义？

界面要简单，有足够的可视性。色彩选用清

新文艺，给人舒适的感觉，以便愿意去停留

更多

THE END

Thank you for reading.