图解电影•重设计

作者: 丑丑死了 | 来源:发表于2017-01-13 21:33 被阅读487次


    图解电影

    我是图解电影的粉丝。因为感觉看一部电影有时候太花费时间,就经常用这个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混乱。特别是层级越深的界面,越混乱。

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

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


    相关文章

      网友评论

      本文标题:图解电影•重设计

      本文链接:https://www.haomeiwen.com/subject/oihzvttx.html