首页改版复盘 | 设计流程的那些坑

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名
6141 36 317 2018-11-05

公司理财APP最近完成了一次首页拉新页的改版,我通过对这次改版的复盘,总结了在设计流程不够完善的公司可能遇到的一些坑,以及应对方式。希望能够帮助到屏幕前的你~


目录


1.中小型公司设计流程存在的不足

2.项目复盘——遇到了哪些坑

3.如何应对这些坑

4.设计思路

5.最终效果



前言


经常能看到各个论坛或者设计交流群,有UI设计师询问自己没有人带该如何提升,或者是项目配置不完善、产品的审美很操蛋、一直返工修改、公司的产品很难看+难用就是不改版、设计师推动力不足等等抱怨。手上正好有一个比较典型的例子,从中遇到的种种坑大家也许也遇到过、或者正在苦恼着,希望能帮助到你。



一、中小型公司的不足主要体现在哪?


1.人员配置较少,经常没有明确的岗位划分。公司不会固定一个固定的岗位给你。这导致的结果是,你必须要全能,但无法专精。就拿很多公司还没有设立的交互岗位来举例,交互这个事,可能是产品做、设计做、还有可能是运营做,所以还有职责分工不明确的问题在。 


2.研发流程不确定因素太多,很多时候根本不按正常流程来,这也是受工作较为密集的原因影响。需求往往不确定,没有一个正常的评审流程。

3.设计师作为产品设计流程上最末尾的一环,经常还背负着背锅的职责。


这其中也有视觉设计师自己不去思考的责任在。设计师不应该完全按照页面原型做一个上色设计,你要记住,你也在审核这份需求,你要审核它的结构是否正确、交互是否易用好懂,符合用户操作习惯......如果不清楚原型或者结构图这么设计的意图,大胆的去做沟通确认,去寻求一个更好的解决办法。 





二、项目复盘


下面,我就以这次首页拉新页的改版设计为例,跟大家说说我遇到的一些坑以及如何改进吧。

        做了这些常规流程之外的努力之后,我顺利的达到了自己的目的(首页结构的设计按照我的想法走,愉快的通过了整个交互评审会,自己关于业务的理解也得到了肯定,整个设计的流程也很顺畅),也希望能帮助到屏幕前被我的标题吸引点击进来的你~


 1.需求坑


这次首页拉新页的需求是由市场部提出,在今年下半年的p2p暴雷潮之后,需要增加针对新手的关于平台安全性、稳定性的展示,避免新手因为信息未及时触达以及页面设计太陈旧而流失。

收到了市场部关于需求的原型,从设计的清晰度以及排版上来说,是一份设计师看到会很开心的原型。看起来,也就做一个入口图,上上颜色,画几个icon就行了嘛。


Image title


然而站在需求层以及对比原先的首页结构去思考,你就会发现,几乎每一块的结构都存在问题。如果不认真思考把关原型的严谨性和合理性,设计师必然会沦为生产末期的上色工具,然后面对的是无限的返工和更改需求。



让我们从头开始分析这份原型:



问题一、拉新页的banner设计成与首页banner内容保持一致,大概8-9张

Image title


我们这次改版目的是增加新手注册转化率,所以我们要做出的方向当然是跟新手需要看到的有关的。新手想看到什么?必然是平台的安全性,以及自己能够通过这个平台获得什么好处。而现在用户登录之后的banner并不是未注册用户关心的和能参与的,比如【邀请好友】的banner,用户自己都还没注册投钱,会去邀请好友吗? 



问题二、注册立享888元红包使用电商常见的入口图形式 

站在需求角度,这个设计是很合理的,可以吸引用户注意,提高注册开户购买新手标的意向。但是从交互和视觉角度,这个结构就有待商榷了。

首先从交互上去考虑,设计这个入口的目的是什么?是吸引用户点击进入新手礼的专题页,那么,第一个banner设计的目的又是什么?想不出来。为什么不把入口图直接转化为拉新banner,而要另行卡一个入口图在这里呢?

其次从视觉上去考虑,banner一般使用的是饱和度较高的颜色,入口图的设计也大致如此,确实有banner跟入口图放置在一起的成熟APP设计,但是在双重视觉压迫之下,用户还能注意到下方的新手标内容吗?方形的banner跟椭圆形的入口图堆在一起,下方还有一个长方形带圆角的引导注册主按钮,整个页面色彩和形状都变得很丰富。


让我们继续跟随视线往下分析



问题三、新手标版块


Image title
排版很好看,帮设计师分摊了一部分工作,但是,我们还是要分析一下结构设计的合理性。

首先,我们业务上其实是有两个新手产品的,服务期长的会比短的收益高一些。所以我们需要考虑到如果平台两个新手标都能购买时的展示形式。如果我们在这个阶段没有注意到这个问题,可能面临着设计之后,发现其实是有两个产品需要展示,那么单纯在原型上添加一个轮播指示器恐怕会让产品的展示效率会变低。 


其次,大按钮上面的文字跟这个版块的关联性不大,虽然目的是引导用户注册,但是在标的版块,还是放“立即投标”这类关联性强的文字好一些。


问题四~六、版块信息层次不够清晰

Image title


接下来是平台信息触达这一块了。所有的关于公司的信息都是用户通过点击一个入口,然后自己去寻觅得知的,重要的平台数据和用户数是通过一个副标题较弱的文字表现,信息层级显得较弱。用户并不能直接感受到平台的稳定性以及用户体量。

所以这一块需要做的研究会很多,过程中经历的争执也会很多,因为每个人有自己的主观看法,我们无法用大公司的办法通过数据、通过用户调研、通过灰度测试去得知我们究竟是否正确。原型设计者也有自己的意图和道理,我们企图用自己的想法说服他,是否其实是自己过于主观?

这一块是我的感受最深的,我需要寻找一个方式,来让大家的想法得到一个统一。 


问题七、版块意义不明

Image title

页面最底部设计了联系客服的功能版块,设计者的意图是,用户浏览页面到最后,如果有什么不懂的疑问的,可以去寻求客服的帮助。我的想法首先是觉得奇怪,因为我使用过市面常规的APP,并没有见过这种将客服放置在首页并且占一个版块的设计,所以提出了质疑,对方也很有道理,竟让我一时之间无言以对。

Image title

这就引出我们题目中的第二个坑——流程坑



2.流程坑

所谓流程坑,具体指什么呢?明显的就是这样一份有修改余地的交互稿,没有经过评审,没有进行相关的数据、用户调研,就这么包装成了灰度稿的模样,试图让设计填个色就上线了。那么正确的产品设计流程是什么呢?

正确的产品设计流程是:

Image title环节缺少其中一步,必然带来其它各个环节上的混乱,最后项目上线,反响不如预期,然后再回头修改,互相丢锅。 


所以我试图用自己的努力,多做一些安排之外的事情,让整个流程回到正轨。





三、如何应对这些坑


首先,我做了一份简略的竞品分析,分析了十几家头部平台的首页拉新页的板块结构以及信息安排。其实在做竞品分析之前,我对拉新页的结构设计已经有自己的想法,我需要一些论据用来一下子就说服对方,而不是通过观点、道理说了半天也达不到想要的效果,毕竟一没数据,二没用户调研,竞品分析是最直接的论证方式。正确的竞品分析是你带着自己的想法,带着自己产品的需求去做,而不是竞品做什么,我们也做吧,不去想这个设计是否真的达到了需求的目的。竞品分析只是个工具。

Image title


因为时间急迫,没有办法做的特别细致,我只能用最直接的方式去打动评审方。我把自己想要放置在拉新页面上的版块(去掉必须放置的)和我选择不放置但是其他平台有此设计的版块都统计在了一张表格上,然后一项一项的打钩。评审必过的我也不会去做,浪费工作精力,还可能分散对方注意力,使我的表格变成一张空乏没有重点的分析。

Image title

因为前期调研的比较充分,我把我对于现在的原型的看法和改动意见结合竞品分析以及设计想法表达了出来,也分析了很多APP拉新页的亮点设计以及这么做的原因,大家都觉得很有道理,评审会进行的很顺利,相信能减少中后期的返工和修改。

那么,我们会议上具体确定了什么?

1.跟上文问题1和2对应的,取消同步线上banner,改为主展示新手红包banner(入口图去掉),可能会增加展示热门活动,先保留入口。

2.跟上文的问题3对应,同时展示两个新手标供用户选择

3.跟上文的问题4、5、6形式对应,平台数据通过更直观的形式表达,同时增加【一分钟了解石投金融】文字链以及对应专题页设计,更明显更直观,之前的原型稿更像一个活动页或者是PC页设计

4.去除客服版块设计,移入到专题页中




四、设计思路


接下来的工作就比较顺畅了,主要面临的是两块问题


1.对于一个上线四年的APP来说,它的视觉改版尺度把握

由于平台设计偏老,而我们暂时只能改动这一个页面,那么设计的风格变化肯定不能跟其他页面的设计太过出入,然而平台的风格又太过时,不改不行,如何既让用户接受,又兼顾时尚和美观,是我接下来研究的方向。


2.视觉改版方向 

我们给这次视觉改版定了三个主要方向:

Image title


清晰: 用户进入页面,能够直观获取所有信息

简洁: 没有多余设计,符合金融产品干净果断的感觉

特别: 不能做的跟别家同质化严重,这里需要增加关于品牌感的露出,要让用户加深对品牌的印象,只看一个页面,也能说出这是哪家的APP。




五、最终页面展示:


页面向下浏览效果:

Image title



设计思路:

Image title



谢谢观看~比心~

全部评论:36

  • 丶Kaho

    2022-03-11 11:53

    学到了学到了,思路清晰。

  • 小汤圆和糖糖

    2018-11-22 15:15

    跟我现在的工作处境简直一模一样。工作流程混乱,产品需求不完整,总是会导致设计师在进行到一半时修改需求。而且我们的需求很少是整体的,基本上都是根据单个功能去做。要保证开发成本最低的情况下去增加功能,又要保证交互流畅,页面美观...

  • 甄真珍

    2018-11-22 09:59

    @DearTaya: 原来如此,刚才我也没看懂,现在明白了,谢谢

  • 甄真珍

    2018-11-22 09:53

    感同身受!

  • A王小二A

    2018-11-19 09:34

    我觉得很多都是仁者见仁智者见智,也不能说谁对谁错,一切还是需要数据验证,比如,如果数据结果显示将客服放在首屏为用户带来了巨大的方便,为产品带来了比较好的效益,那么这个设计我觉得就是合理的。

  • DearTaya

    2018-11-14 09:32

    @小米Z7: 我们是使用钉钉在一个三人群里面沟通的,成员是我、产品、运营,这样比较及时,需求是通过邮件发的。我们这边设计很少用邮件的形式去沟通,可能不太效率吧,很多反馈还可能是当面给的

  • 小米Z7

    2018-11-14 05:36

    想问楼主的点是:这些沟通最开始是通过邮件说明你这边的分析点,随后当面细节沟通,还是直接就私下当面沟通了。我觉得前一个会比较好,但如果市场方没有发需求邮件或者发了需求文件但框架图是童工IM工具发送的,然后我又特意发个邮件出来会觉得有点太冷情?——来自一个情商低的纠结设计师

  • _青红造了个白

    2018-11-13 18:39

    和我现在的处境如此相似,哈哈。感同身受

  • 2018-11-13 15:31

    为陶女神打call

  • 原野辰

    2018-11-12 16:58

    我觉得貌似是一次为了设计而设计的改版,设计有点过,配色问题不大,但场景中色彩运用还需再斟酌

  • DearTaya

    2018-11-10 17:36

    @wall eye knee: 。。。。。。。。所以拉新页要怎么以冷色为主色调嘛,给用户感觉太过冰冷。= =你不要看整个长页面啊,我们首屏是没有蓝色的,第二屏才是(我觉得我给你回复的内容你没认真看)

  • wall eye knee

    2018-11-10 16:55

    @DearTaya: 主要是在一个页面里看的像两个app,冷色跟暖色一个一半,如果是蓝色为主题色的话建议页面主色调为冷色,暖色可以作为辅助色,不要太多,只是给个建议,哈哈

  • wttzzz

    2018-11-09 11:43

    @Big_God: 异形屏因为有刘海的原因 沉浸式banner图的高度是不一样的 需要出两种banner图 ,这个还是第一次知道,涨知识了、谢啦

  • Big_God

    2018-11-09 09:17

    @wttzzz: 16:9的普通屏幕和18:9的异形屏头部高度是不一样的 异形屏因为有刘海的原因 沉浸式banner图的高度是不一样的 需要出两种banner图 上传至后台的两个接口 如果是作者这种卡片式的banner 维护成本当然降低

  • DearTaya

    2018-11-09 09:17

    @wttzzz: 原界面banner是顶到头的,如果要适配iPhone X就必须做另外的工作,线上版本iPhone X上的banner经常被刘海挡住,下挪banner比例不变可以降低设计和开发的工作量,保证线上效果

  • wttzzz

    2018-11-08 19:59

    请教一下增加iphonex适配,降低banner维护成本是什么意思呢?

  • 不爱吃甜食

    2018-11-08 15:47

    充分说明一件事,设计不是一门艺术,而是一门学问。

  • DearTaya

    2018-11-08 15:29

    @wall eye knee: 配色没有问题,也是各方协调的结果。首先,产品品牌色为蓝色,辅助色为红色。而新手标banner肯定会以红色系为主,而金融数字也主流使用橙红色系等热情的数字,所以首屏与红色统一,给用户一种“收益”的回馈。后续为了不放弃加深用户对品牌色的印象,在第二屏转用品牌色及相近色。我贴了长图分析设计思路,但是用户点击进来看到的首屏只有红色。

  • wall eye knee

    2018-11-08 15:22

    分析的可以,但是配色有点问题,大面积的红配绿,颜色不统一。

  • 维大大丶

    2018-11-08 13:09

    你这么漂亮你家里人知道吗?

  • DearTaya

    2018-11-08 09:51

    @Johnna: 谢谢解答~~学到了~~~

  • Johnna

    2018-11-08 09:28

    楼主你好,我也碰到过,要在首页tab bar上放客服入口的甲方。 我用两点反驳了甲方的这个设计 1:用户在各个tab bar第一屏的时候,有疑问随时找客服,这是一个很好的选择,但是第一屏对于用户来说是更多内容的入口,所以用户有疑问的地方大多数是在内页,若内页太深,就会导致用户需一个一个页面退到首页,再去找客服。 2:根据用户行为操作以及常用应用给用户养成的用户习惯,就是用户有疑问的时候,下意识会去我的右上角,或我的页面中的列表寻找客服一项。这是用户已经养成的行为习惯。 所以,不否认首页放客服这种设计不可取,只是不符合用户行为习惯,而且效果并不是最好。

  • DearTaya

    2018-11-08 09:13

    @佐木扉页:

  • DearTaya

    2018-11-08 09:12

    @cyting95: 额,下了一个看了下确实有一点啊哈哈,不过人家设计风格可真高级呀,谢谢推荐

  • 佐木扉页

    2018-11-07 18:07

    优秀

  • cyting95

    2018-11-07 17:42

    您好,你的页面设计跟度小满金融公司(百度金融)的【有钱花】app很雷同哟

  • 一笔勾销

    2018-11-07 16:47

    卡片上文字的开始和标题是对不齐的,我一般都会在标题前面加个东西,让标题和卡片文字对齐,本人才工作一年,不知道这样可不可以?

  • Adrianna

    2018-11-07 16:39

    说实话 这篇文章有点看不懂

  • 春天里UI没有花

    2018-11-07 14:59

    我现在就是视觉背锅的公司.....唉

  • DearTaya

    2018-11-07 14:33

    @惨淡的猫: 对,不过有时间可以做个复盘检查自己在紧急项目中还有哪些可以进步的地方

  • 更多

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票