多聚APP的几点改进(#重设计 Redesign)

多聚APP是一个发布好玩活动的平台,其高颜值和简洁性在我第一次打开时即吸引了我。使用多聚有段时间了,发现其交互方面有一些值得改进的地方,在此写下自己的想法。


1.首页第一眼页面的改进。

首先是地点切换。地点切换位于首页左上角,点击后会从下至上弹入浮出层,在模态视图内可垂直滚动选取。然而,关闭模态视图的方法为点击模态视图最上方中间的“删除符号”,如图(1)。我认为有两点不可取:1)触发按钮位于左上方,“﹀”转变为“︿”,视图却是从下往上弹进的;2)关闭视图不是再次点击触发按钮或者浮层外任意部分,而是只能点击触发按钮水平右边一段距离的“X”键,视图触发和取消不一致,用户易出错,而且此处操作的容错性低、操作唯一、操作难度大——不管是用左手还是右手,只能去点那一小处地方。保持原弹进弹出效果改进的话,希望退出操作区域与触发区域能够一致,最好扩大到除浮出层外所有区域,让退出更加方便。当然相应的UI也要进行修改,起到引导操作的作用。这处其实可以和类型选择那处联系起来,毕竟它们都有同样的“﹀”符号、点击触发临时视图的弹出、进行同样的选择功能。


图(1)地点切换

类型选择处的动效设计有些混乱。如图(2),可以看到当点击类型标签后,先后经历了:“类型”所在的工具栏跳至内容页面顶部(如原本就在顶部则不变,页面内容也会相应地跳转)——瞬间弹出一个浮出层(工具栏也包含其中,导致工具栏有抖动效果,这应该是交互和UI设计师的疏忽)。这一切都是在瞬间产生的,其间页面内容会产生较为剧烈的移动和抖动,让用户不明所以。相比之下,类似的地点切换的动效就做得不错,从页面外缓慢地弹进和弹出,来有影去有踪,符合逻辑。因此,我的初步想法是:触发类型切换按钮后,页面以合适的速度滚动跳转至“类型”标签栏位于顶部的地方(此处速度要尽量快一点,因其不是主要目的),然后浮出层再以一个合适的速度从“类型”栏下方往下方弹出来;但这有一个问题,“﹀”何时转变为“︿”,在“类型”栏到达顶部的过程中?这样体现了及时反馈的原则,但不易看清楚。在浮出层弹出的过程中呢?这样体现了一致性——“”符号的旋转伴随着浮出层的弹出,但“点击‘类型’按钮——‘类型’栏移动,然后‘’旋转伴随着浮出层的弹出”,一次点击触发的过程太多了,不禁让人觉得繁琐,或许这是产品使用原先快速动作过程的原因,但那样显得更加混乱和无逻辑。所以,我的选择是:点击‘类型’按钮——‘类型’所在工具栏较快地移动至顶部,然后‘﹀’旋转伴随着浮出层的弹出”,两段过程一定要控制好速度,让整个过程有逻辑、流畅。第二个想法就是工具栏不需移动,而是直接弹出一个浮出层覆盖在页面上方,完成选择后或者点击浮出层外任意区域即关闭。这时,“﹀”似乎是多余的,去掉“﹀”则有可能影响“类型”键的点击,因为“﹀”有引起好奇心和注意的作用,如此的话就得在“类型”的颜色等方面下功夫了。


图(2)“类型“选择动效

PS:“类型”里的选择,有:全部,音乐现场,展览等8个选项,如图(3)。鲜亮色彩的图片、高度夸张的图片内容、浅淡的文字说明,使得用户不能快速、准确地辨认出各选项的内容,如果不是对其倒背如流,每次选择都得一个、一个地去看那些不显眼的文字说明,每一次!而且,用户很可能不太清楚现在的选择,因为选择与未选择只有一个区别:浅淡的灰色文字和浅淡的浅色文字,而文字的颜色完全被鲜亮色彩图片遮掩、忽略了。建议:1)突出重要信息——即选项内容,增强文字的体现——增加色块值(增粗或增大或增强颜色对比),图片内容更加有识别性——减少夸张、突出事件内容等,图片与文字达到合理的平衡;2)增强对比,比如选择的选项是正常色彩、而未选择的加上一层蒙版使颜色淡化甚至是灰色的(这样还可以引导用户去点击、试看,然后漂亮的图片让他们更加喜爱这个产品)。


图(3)信息辨识度低

首页的导航栏由地点切换、“Duoju”标题、搜索符号组成,但其背景不是像大多数APP一样的单色背景框,而是直接附着在推荐活动的虚化背景上,如图(4)。随着内容的向下滚动,APP主题色的背景框才慢慢显现。这样固然多一点从无到有的乐趣,但也会带来一些不适之处。首先,细字体与符号仅仅是贴在边角处无疑存在感很低(尤其是浅色虚化背景的时候),三个与图片毫无联系的东西排列在图片上边也不会显得很美观(此时显得上面一大片、头重脚轻的感觉)。综上,还是改回常态吧,和其他三个标签页一样,给用户一个实用美观和一致的导航栏。


图(4)



2.活动和活动详情内容的表达问题。

首页的活动为垂直滑动浏览方式、以时间顺序排列。活动简介的组织形式如图(5),一张图片、一句话的标题、时间地点以及显眼的价格标签(这个设计在表达价格内容上挺赞的,明了而又美观),其中使用小图片的活动还会在标题下方多一段活动内容的详细介绍。那些占据内容页面大半的大图片,总体说来,并没有更多地表现活动的内容、特色等,相反还可能因为占幅过大使用户更不容易全面地浏览、了解活动的全部信息——标题内容、时间地点等。因此,在此使用过大的图片是弊大于利的,或许是为了让用户获得更多的沉浸式体验,但内容的不合理组织、不充分表现使得不太成功,需要进行改进。这一点,可以参考顶部左右滚动视图里的活动展示方法,即把文字等信息放置在图片上面,考虑到统一性和简便性,可设计固定模版,之后只需传图、填字就好,岂不美哉。另一点是,图片应该更能和活动内容、宣传点结合,最好是只看图片就能够快速了解活动,图片比文字传达信息速度快、有效、印象深刻(像海报招贴一样),因此图片与内容的相关至关重要,不然为什么花大篇幅呢。另外,文字信息的内容和组织也是非常关键的,把信息组织得简短、易读、全面,从而有效地传达活动内容信息


图(5)两种组织形式(左),无关、大幅的图片传达信息量少(右)

另一方面,每个活动使用大图片或者小图片的原因不明,如图(6)。一开始,我以为每周的第一个活动是大图片,为了突出提醒用户——这是下一周的活动了!但是不是。那么是因为官方想要重点突出以推荐这些活动?似乎也不是,顶部有专门的滚动视图推荐活动,那是官方推荐的没错,而且使用大图片的活动有的似乎不是很精彩。免费与付费活动的差别?也不是。让我专门去想仍旧不得其解这一点不重要,重要的是作为产品的主要内容完全无逻辑的交替排列很可能让用户感到迷惑甚至厌烦,任何产品都会尽量避免这一点,更何况是集美观性、简洁性于一身的多聚呢。所以,be reasonable(给用户个理由)。


图(6)大小图片混杂、无逻辑


进而是活动详情页面内容布置的一些不妥。图(7)是抽象出的内容布置图,可以看到各项内容的排列,有些散乱,用户在查看和进行操作时注意力被分散,视点在跳跃,势必会影响使用心情甚至降低对活动和产品的好感。首先,对活动的基本信息进行整理,名称、图片(清晰图和虚化图)、活动价、活动类型、想去、时间地点;然后,分类、排列。我的一点思路权当抛砖引玉吧。在这里,图片的比例和大小是主要问题,直接影响到整个空间的布局,这种竖长型图片+横长型背景的组合本来就会在视觉上影响信息的传达,再在除竖长型图片外的空间里布置不太相关的多个元素,难上加难。因此,可以的话,改变图片的比例,参考竞品懒人周末APP的活动界面;或者改变元素的布置,参考豆瓣APP的活动界面,如图(8)。


图(7)活动页面元素布置的探讨


图(8)懒人周末和豆瓣的活动页面布置

活动详情页右上角是分享按钮。点击后,屏幕最下方从左到右依次向上弹出一排四个分享平台,图(9)。右上方>左下方>右下方,视点跨度有点大,更的是,要想继续进行分享操作,手指得从右上方移动到最下方,手指移动速度比视点的转变还要慢得多,极大地影响了分享操作。而且撤去的时候,第一个先撤去(先来先去,符合逻辑),后三个是一起撤去的(是实现动效的工作者疏忽了?),影响一致性。建议:四个分享平台图标排列在右上方、分享按钮之下,依次弹出,依次撤去,这样方便操作、符合逻辑。


图(9)分享动效

接着下方是左右滑动的两个版块:活动介绍/活动须知。默认当然是重要的活动介绍,但把完全相同的活动须知(包括购票说明、活动说明、活动解释权等)与之并列,会让部分用户以为每个活动的都不一样,总是不禁点击查看,然后又失望而回。这个完全可以放在报名页面下方的空白处,如图(10),这样每次报名时都能够看见,没有其他干扰。


图(10)"活动须知“放到报名页

一些活动不能在平台里报名,需要跳转至其他页面。然而其流程如图(11):点击“查看报名咨询”>展开弹出一个没什么实际内容的模态视图>点击“点击报名”>报名页面。完全没有必要,本来加载至其他页面就比较慢,多余、无用的流程使之更严重,完全可以直接跳转至报名页面嘛,有必要的话,可以加个需要确认的临时视图,以简洁明了的文字说明需要跳转、有风险等必要信息。


图(11)报名咨询的不美好体验

3.搜索流程的改进。

用了很长一段时间,我才初次使用搜索功能,发现在第一搜索页面的左上边有个按照日期查看活动的按钮——“日历选择”,如图(12)且不论名称的不确切,我觉得它更应该放置在首页里时间导航——“今周/下周/两周”——的旁边:1)它是筛选而不是导航,可能它相比之下没那么常用,但会有不少用户需要,比如,我想在这个周末参加活动,需要限定周末那两天的时间然后查看活动——原本的日历选择只能选择一天,最好可以选择“不连续多日”,不然这个功能不能很好地满足用户的需求,显得鸡肋,日期选择的更多问题就不展开讨论了;2)搜索功能是针对用户名和活动名的搜索,由于产品社交的不展开和活动名的不规范等原因,使用搜索的用户应该是比较少的,所以发现这个功能的人会较少;3)在第一搜索页面里使用此功能,流程会很冗杂,弹出新页面、键盘等元件的干扰都是不必要的。我的想法是,弹出一个浮出层选择日期,甚至可以和“类型“选择一样,毕竟都是类似于筛选的功能。


图(12)“日历选择”,选定某一天来查看活动

然后是搜索流程的简化。原搜索流程如图(13)所示,如果想在大范围内搜索一个用户的话,需要进入4个新页面,而想要返回到首页也需要点4下左上角的返回按钮(按返回键的话是5次,多一次用于撤销第一搜索页面的键盘),极其繁琐。我参考知乎、网易云音乐等APP的搜索流程对其进行了改进,使搜索流程和返回流程都流畅缩短了,并且使搜索的内容更好地呈现出来,如图(14)。是否需要即时进行关键词的反馈还需考虑开发等多方面因素,暂不讨论。


图(13)搜索与返回



图(14)改进后的搜索流程


以上即是我使用多聚的体会和想法,有的可能过于主观,初学乍练,还请多多指教。希望大家能够多交流,希望多聚越做越好,希望我也能通过参加多聚的活动认识很多妹子。:)

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

推荐阅读更多精彩内容