0.0°

TUTOR DUCK app首页优化

经验类型经验/观点
经验属性原创文章
经验版权署名

YFUX

关注

3246 6 9 2018-10-18

前些时间，一个朋友找我，说帮忙给TUTOR DUCK app界面优化建议，于是收到以下页面。

Image title

这个客户是香港的，据说设计师是代表香港水平比较高的UI设计师，可能香港地区的移动互联网发展较缓慢吧，对app的UI和UX的设计思维和规范和内地还是有很大差距的。由于项目急于上线，朋友希望能给予建议，好让UI设计师修正，不要推翻设计方案。

Image title

Image title

Image title

Image title

香港UI设计师收到建议后，发回UI修改稿件，很多都按修改意见改了，但UI稿件还存再设计规范和交互规范的问题，于是发了些UI设计规范过去，收到第二次的修改稿件，还是存在不少问题：

Image title

设计师很快按修改意见进行修改，经过2轮修改后，app的UI界面更规范，交互逻辑也够清晰，但首页还不是很理想（下图），介于沟通成本较大，我向设计师要了源文件，决定自己调整。

Image title

UI设计师按修改意见调整后的首页

主要问题如下：

1、公开课程板块交互体验不好，模块太琐碎，高度太高

2、页面模块之间间隔太大，模块之间的衔接处理不好

3、“更多补习班”按钮过于独立，按钮上下间隔处理不好

4、table标签当前状态处理不好

5、底部bar没有当前状态交互效果，icon 比例不协调

6、滑动模块交互体验不好，滑动到最后一张没有交互提示

Image title 优化调整后的首页

Image title

全部评论：6条

YFUX
2018-12-11 09:57
@迷路的麋鹿S: 超链接是有颜色规范的，目前基本是沿用微软和苹果规范的超链接蓝色（#0020f2、#0076ff），App的“链接规范”指需要通过颜色、按钮、箭头指引来提示可点击引导，另可通过动效、按压颜色来提升体验效果。
迷路的麋鹿S
2018-11-24 11:44
“链接规范”？链接文字还有颜色规范的吗？符合页面颜色规范就行了。黄白黑的界面用个蓝色的颜色不会很突兀？
YFUX
2018-10-24 10:51
@一线之隔: 有两种，一种按屏幕宽度均分，另一种按tab间隔（相同间隔）分
一线之隔
2018-10-24 08:30
在首页热门老师中，标签有四个字和两个字，那么两个字下面的横线，也要左右齐平？还是按四个字齐平？这种情况应该怎么处理，求教！
YFUX
2018-10-23 15:49
@吱吱不摸鱼: 界面颜色规范分为主色（一种）、强调色、辅助色（多种），对于灰黑色辅助色一般使用容易记忆的颜色，如：#000000、#222222、#333333、#666666、#999999、#eeeeee、#e5e5e5,线条颜色、背景颜色、按钮颜色，交互提示颜色都要规范。
吱吱不摸鱼
2018-10-23 11:55
您好界面中的颜色规范哪里可以看到呢

更多作品

发表评论

取消

每人每天仅限5票，快给你心仪的作品鼓励的一票。

投票