主界面视觉思考

*本次思考基于视觉层面

---第一屏---

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

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

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、减少用户负面情绪

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

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

---全文完---

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,204评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,091评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,548评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,657评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,689评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,554评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,302评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,216评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,661评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,851评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,977评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,697评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,306评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,898评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,019评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,138评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,927评论 2 355

推荐阅读更多精彩内容

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