游戏名称：连连看-MG 设计分析：计算出内容显示范围像素，再计算页面放置4组单词的模块，蓝绿色为正确状态，灰色为不可点击状态。

01fef15922559db5b3086ed41358bd.png

2017年-UI作品

游戏名称：句型转换-ST 设计分析：选择框宽／高／间距，参考搜狗输入法尺寸，不容易导致用户拖拽错模块，划分虚线更突出可操作区域。

016db75922559da801216a3e17f63c.png

游戏名称：阅读理解-RC 设计分析：阅读时可让字体增大增小适应用户阅读习惯，镶入拖拽页可在未选题的情况下，最大化显示文章。

0102b05922559da801216a3e893fa9.png

游戏名称：还原单词-RS 设计分析：选择框宽／高／间距，参考搜狗输入法尺寸，不容易导致用户拖拽错模块，选择框都处于拇指区域。

017af25922559da801216a3e0c57dd.png

01872c5922559db5b3086ed4c12c56.png

游戏名称：猜词游戏-HM 设计分析：题目内容设在键盘之上，小人图之下，因为输入单词时余光就能看到输入框里的内容，在错误的情况下，小人和键盘保留错误状态，直到进入下一题或失败。

0190005922559da801216a3eb4a10d.png

01a28c5922559db5b3086ed438415c.png

01eeb95922559da801216a3e947718.png

游戏名称：单项选择-SQ 设计分析：因游戏经常以句子形式出现。「下一题」按钮放在右下角悬浮状态，避免用户更多操作。

013a1c5922559db5b3086ed465389c.png

01e54e59c677a3a801218e18b38725.jpg

医疗APP设计

游戏名称：完形填空-CL 设计分析：字符输入超过线条时，左右增加35px留白随着线条增长,看起来更加有空间感。 阅读时字体可大可小适应用户阅读习惯，镶入拖拽页可在未选题的情况下，最大化显示文章。

01a8285922559db5b3086ed4e04ee2.png

01ddc55ce3a362a801208f8b45ddf2.png

任务管理小程序

0192f45861fc6ca801219c772e0954.jpg

一枚个人版本的APP

游戏名称：词汇选择-WQ 游戏模式：单词模式／解释模式／听音模式（新） 设计分析：「下一题」按钮放在选项框下，更加肯定这范围处于按钮区，而且在拇指区域更方便的操作。

01244d5922559da801216a3e6c2ad8.png

01fd135da560c9a80121b7229c5461.jpg

个人作品集

0184405f5aeb9c11013e31872347f4.jpg

2020个人作品集-组件篇

游戏名称：强化炼句-SF 游戏模式：简单模式／复杂模式／默写模式／自定义模式 设计分析：字符输入超过线条时，左右增加35px留白随着线条增长,看起来更加有空间感。默写模式时，为了减少字符占据行数选择了以横线方式输入。

011f225922559da801216a3e859a9c.png

游戏名称：听力练习-FS 设计分析：「播放音频」按钮设在底部，原因是让用户先查看每道小题然后再播放音频才能作答。

018c3a5922559da801216a3ecd4904.png

01cbac59ad51b9a8012028a9e14afd.png

安全类APP设计纬度

01cd7255410d8b000001e71b136c9d.jpg

一个考试系统界面 只做了4P

0121455861fc6ea801219c77b8f0db.jpg

教育产品 手机端app web端 作品集

0175135c84afb9a801217ce6d77791.png

0142b15b1a4bc4a80121bbece15f26.png

还了么app设计

01ecf9575ba0150000018c1bb9e634.png

登录注册页

0151aa6122faec11013f4720fd0c39.png

随记-模块化课程表

017b395bd91e78a80121ab5d0e2b18.png

resume

0156025ed5baf4a801206621eff471.jpg

优教

014edc5af1718fa801219b7f284386.jpg

works

微信端小程序大学生校园APP页面设计