图解电影•重设计



图解电影

我是图解电影的粉丝。因为感觉看一部电影有时候太花费时间,就经常用这个APP节约时间。只有看图解感觉好看才会去搜索完整电影来看。不过在使用过程中,感觉APP有很多不妥,于是就在抽空余时间做了一个重设计表达了一些自己的想法。也希望图解电影未来能做得更好,手动比心。(页面比较多,我会尽量用图片展示的。)


产品介绍

名称:图解电影

产品版本:v5.1.1

使用平台:Android 5.02 

产品特色:高清在线电影/电视剧图文解说,几分钟便可看完一部电影,睡前饭后观影神器。

截图来源:

原图:尺寸1080x1920          改版:尺寸720x1280



信息结构图


图解电影功能结构图(部分)

因为功能和展开实在非常的多,梳理了部分主要功能,这次重设计也主要是针对部分所存在的问题做的。


页面重设计和一些想法

1.首页 

存在问题:

1.首页因为很多不同的栏目而变得很长,但是却没有可以达到特定栏目的功能,只能依靠用户的不停滑动来到达用户感兴趣的栏目,太过考验用户耐心。内容区展示采用的网格列表不如卡片来得直接,美观。

2.“换一大波推荐”按钮每次点击获得4个新的推荐影片,效率不高,而且如果看到了想要看的影片,但是因为手抖又多按一下,就得等很久才能再见(别问我为什么知道)。不如滑动刷新来得简便安全。

3.“定制主页”按钮(为主页添加或减少栏目)在最下方。这点,大部分用户都不会有那么多的耐心滑动到7屏去找到这个按钮(我也是最近才发现的),想必点击率应该蛮低的。

原首页部分截图

重设计:

1.增加一个Scroll bar,放入不同栏目标题和原icon。用户可以更容易的在首页找到自己感兴趣的栏目,这样下滑即可在自己感兴趣的栏目浏览更多,左右滑动切换不同栏目。把定制首页按钮用一个加号代替放置在Scroll bar上方。

2.改用卡片的方式来展示内容。(因为增加了在Z轴上的高度,是不是更有点击欲望了)。


首页重设计

2.侧边栏菜单

存在问题:

1.用户等级名称“伸手党”太负面,可能会引起用户不满。(用户大爷用你软件,高兴的时候还能给个好评或者给个红包。怎么就伸手党了。)

2.金币/粉丝/关注所占区域太大,头像位置也极端靠左。整个排版是混乱的,没有规范。

3.“设置”与“开启护眼”两个按钮太不明显。都是可点击区域,但是“设置”和“开启护眼”和其他可点击区域的字号颜色都相差太大。这容易使用户对于是否可以点击产生怀疑。也不知道为什么会那样排版,如果是因为内容太多,底部导航栏会遮住一部分,完全可以将他们固定在底部啊。


侧边栏对比(左原版,右重设计)

重设计:

1.重新设计了侧边栏,减少了“金币/粉丝/关注”所占区域,调整头像居中。并且了去掉原用户等级称号(或者可以更改为更为合适的称号也可以)。

2.将“设置”和“开启护眼”这两个按钮移入侧边栏固定在侧边栏底部,同时将他们的字号和颜色与其他可点击按钮保持一致。

3.分类

存在问题:

1.通过点击出现筛选栏并没有收回按钮,只有通过下滑下方内容才能收回。这样一是容易引起误操作,二是会对想收回的用户造成一定困惑。

2.很难发现筛选栏里的tab可以滚动,没有一点提示。

3.卡片的排版不美观合理。


分类页面对比(左原版,右重设计)

重设计:

1.增加收回按钮,去除不可点击又意义不明的‘排序’。并为每个可滚动tab增加一个三角指示。为筛选栏增加一点阴影与底层分离开。

2.重新排版卡片内信息并增加一个浅色描边

4.搜索

存在问题:

1.搜索流程繁琐,需三次点击跳转才能开始输入。这个是非常难受的。

搜索流程的使用一般分两种:一是当用户带着一定目的性来的时候,很清楚自己想要什么,这个时候搜索流程应该尽量快捷精确的帮助到用户,而不是设置障碍和分散用户注意力。二是浏览了一会没有发现自己想要的东西,如果没有离开就会用到搜索框寻找想要的内容。这个时候应给予用户一定的信息(如热门搜索和历史记录)帮助他。总之要做到快捷和不过分干预。

2.热门搜索排名上升下降难分辨(不要怀疑你的视力,它真的就那么小而不清楚),这样的信息我得眯着眼睛才能看清。

3.存在干扰用户搜索的元素。这些元素完全可以放在首页供用户浏览的,而不是在用户有自己的目的和没有浏览意图后再呈现出来。

搜索流程

重设计:

1.简化搜索流程到在首页一次点击即可开始输入。点击一次后即可弹出小键盘开始输入,以前的搜索框内文字设为背景就好,在用户开始输入的时候立即消失。并且把搜索范围“图解”与其他可点击保持一致(不应该让用户考虑是否可以点击)

2.为排名下降上升增加颜色。用红色和绿色来表示升降关系,用户不用思考也能理解信息。

3.去除部分干扰项。把以前的干扰项用历史记录代替,统一可点击和不可点击字体的颜色和字号并修改不可点击的字体的颜色以便区分。

搜索重设计

6.详情页

存在问题:

1.在点击“下载”后虽然上方会出现一个已加入下载的提示,但是下载按钮没有任何变化,而用户将视觉焦点放在下载按钮上的时候,上方的提示很容易被忽视,造成用户二次或多次点击,直到发现上方提示。在点击“收藏”过后的变化就很奇怪了, 用了一个明度比较高的黄色,放在白色背景上很容易看不清。而点击“关注”就更无语了,既没有已关注的信息提示,也没有可以取消的按钮(如果是手滑,关注了什么奇怪的作者怎么办...)。

2.下方按钮拥挤混乱,而且部分icon表示的意思不容易理解,极易迷惑用户。界面上元素与元素之间分离感太强(在寸土寸金的手机上还怎么浪费),明明是相互联系的元素也距离很开。

3.红色打赏按钮太抢视觉,而且这样并不会让用户觉得“好显眼可爱的按钮,好想点”。相反还把页面的格调拉低了,矜持一点,让用户大爷高兴了少不了你的。

原详情页

重设计:

1.增加下载中icon变化和文字显示。修改了收藏后的颜色填充和文字显示。增加了关注后提示的“已关注”文字(再次点击即可取消关注)。

2.重新组织原页面下方按钮,把返回会分享放置页面上方。修改“金币打赏”按钮并放置在“红包打赏旁”。因下滑就能到达评论区与原评论按钮略显重复,于是去除了评论按钮。减少分割距离,把相关联的元素以分割线分割。

3.“红包打赏”按钮缩小并把填充改为描边(同理与“金币打赏按钮”)。这样不会和页面抢视觉,又能在用户大爷高兴的时候轻松发现打赏按钮。

详情页重设计

7.排行榜(高能护眼预警)

存在问题:

1.颜色太...大胆...。而且排行榜名称与导航栏高度一样,字号也一样大,打乱了层次感,右边的信息详情icon(介绍每个排行榜含义)太大而且因为在红色背景下更像是警告。

2.粗体的排名数字会感觉页面很笨重,深色的配色让排名“456”甚至比“123”还要突出。

3.爱心与其增加数量不齐,不知道是故意的还是怎么。

4.下方tab上的icon没有识别性(无文字提示),肯定会对用户造成迷惑,除了增加用户记忆负担,其他什么用处都没有。另外颜色也很怪异,如此高明度的配色让我想到了彩虹。

排行榜对比(左原版,右重设计)

重设计:

1.去掉底部标签栏和原排行榜名称和所占区域。设计一个tab左右滑动切换排行榜,用排行榜名称代替其icon(减少认知负担,减少记忆负担),并去除所有标签颜色,还一片干净界面。将信息详情icon缩小并移入导航栏,切换页面时保持不变。

2.用衬线体来表示名次,让页面更加干净。其实前三名更适合用不同的皇冠表示。(与首页的排行榜icon相关联)

3.对齐爱心。

8.排片区

存在问题:

1.整个界面拥挤复杂无吸引力。对于影片,如果没有看过的话,就依靠一个名字就无法获得任何信息的,自然也就谈不上期待或者喜欢。那么这种情况怎么会有人会设置提醒呢。所有的排片都放在一个页面展示,虽然这样展示效率蛮高的,但是如果某一天的影片多,那么用户要找到特定日期的某个影片难度剧增。

2.“电影/番剧”标签存在不合理。首先标签的优先级一定是低于影片名字的,所以绝对不应该放在前面。而且标签如果就是一个简单的“电影”或者“番剧”,简直太多余了。

3.不可点击和可点击的区域无区别。已上线的可以点击进入观看,而其他的明明不可点击,却和可点击的一样。用户分不清就会试着去点,当多次无反应的时候一点会很烦躁(参考你叫一个人,他一直不理你的感受)。

另外,排片区这样的功能怎么想也应该是在首页而不会埋得特别深。而这个却在三级界面里。

排片区对比(左原版,右重设计)

重设计:

1.简化界面,每一页只表示某一天的排片。用左右滑动或者点击日期到达特定时间的方式切换日期。

2.去掉“电影/番剧”标签,增加影片的基本信息(海报/导演名称/主演名称)和已提醒人数来增加影片吸引力。

3.更改了添加提醒的按钮样式。每个影片(不管是否上线)都可以点击,只不过未上线的不能观看。但是评论,打赏都可以有的啊,在影片上线前对于未知影片的讨论也是很精彩的。



以上是改动比较大得界面,后面的改动都比较小,看图即可。


系统设置对比(左原版,右重设计)
下载管理对比(左原版,右重设计)

修改资料对比(左原版,右重设计)

原版私人推荐与卡片视觉路径
重设计私人推荐与卡片视觉路径






总结

整个APP最大的问题就是没有规范,界面布局,卡片设置,配色使用都不统一,感觉像是不同的人做的一样。而且浏览过程比较繁琐,可点击区域与不可点击区域很多时候都没有区别等,这些让用户的学习成本增高也会导致整个APP混乱。特别是层级越深的界面,越混乱。

我的重设计也是主要针对这几个方面去做的。每做一个改变都在询问自己为什么,努力在这过程中寻找答案。另外整个重设计在撰写的过程中我也尽量不去使用好不好看和丑不丑来评价一个界面和里面的各个元素。因为我觉得好看与否太主观了,一千个人眼中有一千个哈姆雷特。作为设计者更应该去思考谈论为什么会好看,为什么会丑以及这样设计的理由(抱一下经常被一句不好看或者多丑啊噎得不知道怎么接的自己)。

如果有不适当的地方,十分感谢批评和建议。多谢。(手动比心)


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

推荐阅读更多精彩内容