主界面视觉思考

*本次思考基于视觉层面

---第一屏---

选课页-设计思考⬇️(红色色块标注)

选课页-优化建议⬇️(红色虚线标注)

1、把icon整体调小一些,并调整视觉比例,使所有icon在视觉一样大;

2、banner切换的动效仅保留左右位置的切换即可,去掉大小的变化;

3、金刚区icon可以更加品牌化,参考案例:QQ音乐、网易云音乐、虾米音乐;(见下图)

QQ音乐

网易云音乐

虾米音乐

案例共性:采用品牌色进行创意设计,植入品牌基因

4、模块与模块之间的间距可以加大,标题与模块之间的间距可以缩小,一个模块就是一个视觉单元。参考案例:QQ音乐;(见下图)

QQ音乐

5、常规图片比例为3 : 2、4 : 3、1 : 1、16 : 9。我们的图片比例约为2 : 1。是否可以优化留待讨论;

6、课程封面属于一类内容,可以制定视觉规范,进行样式上的统一管理。参考案例:网易云音乐;(见下图)

网易云音乐,同类内容保持相同样式

---第二屏---

学习页-设计思考⬇️(红色色块标注)

学习页-优化建议⬇️(红色虚线标注)

模块之间可以通过分区来加强层级,参考案例:网易云课堂;(见下图)

通过卡片式设计,界面层级更加清晰明了。

---第三屏---

题库页-设计思考⬇️(红色色块标注)

题库页-优化建议⬇️(红色虚线标注)

1、icon可以植入品牌基因,与首页的icon一脉相承。参考案例:网易云音乐、马蜂窝;(见下图)

网易云音乐

马蜂窝

2、加大题目字号,题目和进度条之间间距调整,使界面结构紧凑,简单明了;

3、建议一个按钮对应一个功能(答题),另,答题icon可以简约化处理,界面保持干净简单。

---第四屏---

发现页-暂未发现可优化的点

---第五屏---

我的-设计思考⬇️(红色色块标注)

我的-优化建议⬇️

1、去繁从简,依据业务和产品层面的架构,从视觉上分出优先级,加强界面的层级。参考案例:网易云音乐、airbnb;(见下图)

网易云音乐-我的

airbnb-我的

2、确定一种样式即可。

【对整体设计风格和方向的思考】

1、风格化/品牌化设计

设计建议:通过一些特有的元素或者风格,打造品牌特有的视觉符号,加强用户对品牌的认知,占领用户心智。

参考案例:有道精品课

同样的版式,相同元素的反复出现,品牌感很强。不用出现品牌 logo,用户就能识别到这是精品课的视觉。

2、情感化设计

设计建议:

1、贴心的功能

了解人,了解用户,深挖用户在使用过程中的痛点,给出相应的解决方案;(产品+视觉)

2、减少用户负面情绪

在加载界面、需要用户等待的界面,可以加入一些动画效果,缓解用户等待的焦虑。

在缺省页面可设计一些情感化的插画,提升用户体验,加强用户对品牌的好感。

---全文完---

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、重要性 说到视觉信息层级的重要性,就不得不说结合我们的工作重要性来说。 我们的工作担任整个产品构成到上线(由抽...
    yi只烤乳鸽哦阅读 4,230评论 0 20
  • 当我们接到需求文档或是原型设计稿后,结合之前对自身产品的分析与理解,同时完成与多款竞品视觉上的详细比对,我们可以率...
    FLYXMF阅读 5,260评论 2 59
  • 一款 App 或 Web 产品,从用户体验的角度包含了战略层、范围层、结构层、框架层、表现层。而作为 UI 设计师...
    Neil彭彭阅读 6,045评论 1 63
  • 原创:微信公众号:「彭彭设计笔记」转载:https://www.uisdc.com/interface-visio...
    源子拒绝香菜阅读 841评论 0 2
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,782评论 16 22

友情链接更多精彩内容