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

01a8285922559db5b3086ed4e04ee2.png

2017年-UI作品

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

013a1c5922559db5b3086ed465389c.png

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

017af25922559da801216a3e0c57dd.png

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

01afa15922559db5b3086ed415a8e6.png

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

0102b05922559da801216a3e893fa9.png

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

016db75922559da801216a3e17f63c.png

游戏名称：选词填空-TB 设计分析：字符输入超过线条时，左右增加35px留白随着线条增长,看起来更加有空间感。 阅读时字体可大可小适应用户阅读习惯。

01f69c5922559db5b3086ed41a3e40.png

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

018c3a5922559da801216a3ecd4904.png

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

01244d5922559da801216a3e6c2ad8.png

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

01fef15922559db5b3086ed41358bd.png

0106855922559db5b3086ed4e919bf.png

游戏名称：单词拼写-GF 游戏模式：随机模式／默写模式 设计分析：默写模式下为了减少字符占据行数选择了以横线方式输入。

0106fe5922559da801216a3ebbf7ad.png

01a28c5922559db5b3086ed438415c.png

游戏名称：单词听写-TD（新） 设计分析：为了减少字符占据行数选择了以横线方式输入，「重现发音」与发音icon融合,控件平衡与增加了大范围的点击范围。拇指法则，所以键盘底部多留白1倍。

0122105922559db5b3086ed4f9e090.png

019d695cae2bd3a801208f8b247ce6.jpg

UI设计

01872c5922559db5b3086ed4c12c56.png

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

011f225922559da801216a3e859a9c.png

01d64d5a39de32a80121db80d2e9a8.jpg

UI界面设计

0185795703380232f875a94475e549.png

Baidu Security Master

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

0190005922559da801216a3eb4a10d.png

那个是编辑还是添加啊？看不明白啊！是哦，看不明白，而且你放的这个位置完全就不方便操作 “图标识别性不高，这个需要再改一下，那您觉得放在什么位置合适？” “我觉得系统原生的那种就挺好的，图标点进去，某一个模块，然后切换退出来，点击进入下一功能” “你这个操作很多冗余啊，四个功能放在下部，这是大部分APP的做法，方便功能切换，这个比你返回点选要方便的多！” “没有啊，我觉得挺好的啊” “。。。”

0167c25735a3b06ac72580edfba10e.jpg

游戏后台管理APP

01eeb95922559da801216a3e947718.png

0151aa6122faec11013f4720fd0c39.png

随记-模块化课程表

015fc9593a56dca8012193a3b705bd.jpg

心连心原型图

0134bb5b90cc61a8012017ee507a71.png

一起口语APP

014f215801ed82a84a0d304f960fbb.jpg

UI临摹（4）

0181475b4d5526a8012036be553014.png

mock up 展示

014604554c89f40000009e3205c875.jpg

学习工具

0101545c80d7c5a801217ce6d15da6.png

 （交互原型）桩小密app

选择城市——城市列表、搜索城市、滑动右侧字母快速寻找城市