每一次的改版优化都是一点点进步的累积

最近通过对公司教育云产品的设计进行改版优化,又加深了对用户体验的理解。主要解决了下移动端教学资源模块的一些遗留问题,并在优化迭代中进行深度挖掘,提升产品体验。

为什么说是遗留问题,因为初版效果图出来的时候就发现了页面的一些问题,并立即和负责此模块设计的可爱的妹纸沟通叫其优化了一次。尴尬的觉得还是有些细节需要优化,但是我又一时给不出好的建议,所以就把问题遗留了。存在备忘录中,这几天抽时间就来解决了一下。。{打脸}是谁说的时间就像奶牛,挤一挤总会有的。

在页面设计过程中,总结了一些经验与方法,今天想拿来与大家分享交流一下。

0. 背景简述

此次改版的教学资源是公司教育产品移动应用中主打功能模块之一,是以资源为中心的共享平台。

用户在教学资源中的主要行为包括:

  • 查看和收藏
  • 浏览文件列表
  • 通过关键字快速搜索文件
  • 筛选文件
  • 预览文件等

1. 存在的问题

总体来说就是:默认字体较小,列表显得有些拥挤,操作略显复杂,所以针对此次改版的主要目标就是提高用户的使用效率。

改版前页面

2. 改后的优点

  • 更便捷易用

资源类型这个条件是一个比较常用的选择,放在筛选条件那一列展现会不易看到全部内容。针对这种情况,我决定将它移动到顶部占用搜索栏的位置,类型可左右滑动来选择。并将搜索移到右上角位置。
此处图片,为展示的更为直观,便去掉了多余的文字,用以灰调调来展示。

资源类型固定在顶部

灵感来源:设计离不开思考,也离不开参考。移到顶部并采用横滑的操作方式也是参考了诸多APP才如此设计。所以此处必须给一张页面截图,部分包括优酷、掘金、慧慧、驾考宝典(学驾校的必备神器,用后才发现里面的产品还是做得很不错的,功能还是还很强大的)、手机浏览器百度页等。

参考截图

2.内容更突出

下方左图整个页面顶部bar颜色太重,太抢眼,进入内页首先就会注意到顶部,会干扰到用户快速的查看页面内容。并且列表页的内容过多、上下间距不够显得有些拥挤。

做出的调整有,第一、去掉顶部bar的蓝色渐变换成无公害的惯用白色,有时候品牌色并不一定需要整个应用的顶部都用到,就像QQ在聊天、好友动态、传文件到电脑等的页面都会采用纯色作为大背景,来突出页面内容,。第二、列表高度从之前的200px缩小到188px,上下间距由24px加大到32px。把列表高度由原来的112px调整到132px,标题文字由30px调整到34px,精简文件类型图标等等。

本着“内容为王”的意念,坚定的进行着优化~~

改版后的列表页内容更突出、更聚集内容

3.更简洁

图标优化:改版前的文件图标略显复杂,占用面积过大,图形比较复杂。也因为当时没过多的花时间设计,直接套用的教育云Web端的图形。所以决定对简化图形、强化图标本身的形状。之前是根据文件类型本身的颜色去定义颜色的使用,但是颜色太深,所以整体采用了较亮色值的颜色,更加容易识别。
精简列表内容,隐藏收藏、评论等不常用操作。

精简列表内容

4. 结语

这次的改版让我对产品有了更深入的了解,更好的懂得以用户为中心来设计打磨一款产品。也懂得了根据用户的反馈及自测后的使用分析,来更好的指导设计工作。采用极简的排版,让用户方便快速的阅读内容,提升了用户体验。

设计是一个不断优化的过程,需要设计师们深入到产品之中细细打磨,持续挖掘产品的可优化点,提升产品的使用体验。

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,398评论 25 707
  • Ubuntu的发音 Ubuntu,源于非洲祖鲁人和科萨人的语言,发作 oo-boon-too 的音。了解发音是有意...
    萤火虫de梦阅读 99,119评论 9 467
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,585评论 18 139
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 生活总是充满了意外。 由于路上突然拉肚子,导致没有赶上火车,排了半个小时的队被告知无法改签无法退票,只好重...
    减肥的七星瓢虫阅读 203评论 0 0