美狮美高梅-美狮美高梅官方网站

美高梅视点
美高梅曾经做过哪些事情?美高梅的发展怎样
UI策划经验分享,用实战教您界面改版
发表时间:2019-07-24

美狮美高梅

【直营信誉】MGM,美狮美高梅官方网站最具公信力的博彩集团官网、更有高质料的游戏平台、打造在线博彩第一直营,美狮美高梅不单拥有环境上最多样化的游戏投注平台,再是为衣食父母供给实时、刺激、高信誉的效劳保证和高质料的游戏。

界面策划相当于产品外形策划,好看实用才是硬缘由。


 上言 

之上为众家分享过很多work的案例,很多伙伴表示收获颇多,易于 分享work案例是为了,给众家讲解策划思路,让众家明白,为什么这样策划,出于什么鹄的,要解决什么小case,这些正是UI策划的根本所在,把握了策划思路就能应对各种小case。

接下来本期的分享,依旧会用真实案例解析从需求到策划的完整过程。

 

 接需求与案例解析 

一、准备work

提上了解产品,从视觉、交互上感受一遍,标记产品中有疑问的区域,这样大概对产品有个概念,为接下来的沟通做好铺垫。

 

二、了解业务

起首需要运营小姐姐讲解一下业务逻辑,了解产品涉及到的各种角色,产品使用场景等等,期间把疑问一一了解清楚,尽可能对业务、角色、使用场景有充溢的了解。

通过沟通,了解到这个产品是一个H5问卷下台,业务上用来查看问卷统计的结果,使用的人群是集团官网的运营人员,产品时常会打包卖给衣食父母,衣食父母的使用场景不定,多数用户会用手机端查看统计结果。

 

三、沟通需求

接下来,沟通中我会先听她讲解需求,讲完下我会问她一些小case,确保我理解的正确。

需求沟通下,此产品小case为:界面太乱,很难用,需要改的好看舒服好用。

这时候就要想到她是不是用了其他体味好的产品,如果是的话,这个产品可能是要紧的策划参考,然则了解下并不是因为用了其他产品,是一直以来就不好用,没时间改而已。

接下来的需求沟通就要落实到页面中,需要一起探讨产品,不明白的区域要了解清楚,从中总结优化的区域。

下面开始案例分享:

第一个页面改版




上图为“统计问卷”美狮美高梅,A、B、C处为页面中较为突出的点,此道C处最为明显,沟通下得知C处图表的切换是为了截取图表做ppt,仅此而已,以是此处UI策划上需要弱化。

莫过于用户易于 觉得页面看起来不舒服,是因为想看的圆素被弱化,而不该看的却过度策划,这样用户在看页面过程就会很费神,因为获取信息要躲开视觉上被过度策划的区域。

诸如A处,用了页面中唯一的橘黄色,当初策划者应该是为了能强化相似处上下题鹄的分界,但也成了突出的视觉干扰项。

莫过于归纳下,页面中用户要看的是两个区域,一个是B处答题的比例数据,另一个是旁边的“小记”数据量,而B处实行工过程条的策划过于突出,与文字没有良好的视觉比重。

结合如该小case进行改版:



解决A处小case
把每道题策划为卡片式,这样能很好的相似处上下题的界线,题号从突出的橘黄色改为黑色,使得页面视觉上不so跳跃。

 

解决B处小case

弱化变细实行工过程条,与文字视觉比重相当,不会显得突兀,排版上下排列改为左右排列,这样能够缩减表格的高度,页面可以显示更好优质的始末。

 

解决C处小case

图表切换是个弱功能,使用频率较低,以是放到卡片的右上角弱化策划,用切换的方式找子 尽

不单仅是如该的小case,排版的细节也会大大提升产品的质感。



旧版一切圆素的排版间距险些没有什么规律,这也是导致用户对产品有乱糟糟印象的原因。

改进下,用间距去表达圆素之间的关系,间距策划常常会用到“黄金比例”或“五分原则”,黄金比例不必多说,五分原则就是相关的圆素用周边0.5倍的跨距表达亲密关系。


当策划好第一个页面下,需要先给到需求方评审,确认没小case下再继续,这样就尽可能保证了下面的策划是符合他们需要的。


上图只是个最终的结果,过程中做过一些小改动,最初发给需求方策划的页面,需要做easy的策划注解,这样才会更匆子 侄帽焕斫猓揖哂兴捣Γ钪杖啡厦恍ase再继续其他页面的策划。

 

第二个页面改版


上图是给做问卷的人配置红包奖品的页面,看完下我表示心疼吾们的运营人员。

A处本可以切换porject,但Now的策划显然是不可点击切换的状态。

B处是这个porject总金额统计,目上排版色彩杂乱且拥挤。

C处是给问卷配置红包奖品的各个属性信息,然则圆素间没有层次,依旧杂乱拥挤。

D处按钮没有主次关系,排版拥挤。

E处是个“增加奖品”按钮,Now看起来没太大小case。





改版下页面延续了美狮美高梅的卡片性状style,保持一致性。

 

解决A处小case

“子入口切换”用户很难理解,因为不是确切词, 诸如换成“porject切换”“问卷切换”就很匆子 侄美斫猓ˋbout文案的策划之上总结过一篇文章,文章底部有链接)易于 这般也是可以去掉的,因为运营人员对每个porject都很熟悉,没需要注解。

 

解决B处小case

重新定义排版下,显而易见会比之上要清晰透气很多,消息 改动的金额用颜色突出强调,未配置金额为次要信息,用灰色表示。

 

解决C处小case

改动排版样式,视觉上有主有次,“配置数量”跟“个数”为重复信息,只留一个即可。

 

解决D处小case

按钮“已启动点击禁用”拆分为“点击下线”按钮,和问卷状态(进行中),“展开”按钮放到最左边,和“编辑”并列。

 

解决E处小case

“新增奖品”按钮,如果增加配置奖品列表,就会把按钮挤到不可视区域,这样的策划不是特别推荐,以是策划成悬浮按钮,旧版本已经建立用户的按钮功能吟味,悬浮按钮上面配加号图标,用户就会很匆子 侄美斫狻

 

第三个页面改版




上图灰子 堑诙龈陌嬉趁妫舜我陌娴氖牵憧罢箍卑磁ハ允镜氖粜裕可系男ase是有很多重复的信息, 诸如时间,上面已经显示时间,最下面又出现同样的时间。

最严重的小case是,一切灰色字的注释,不符合逻辑,不应该在展开的属性下面提示,因为这已经是编辑好的始末,再去提示就意义不大了。

模拟一个场景,譬喻上图红圈的区域,已经设置好了奖品名称为“幸运红包”,展开下有个灰色字提示“用户中奖下,用于显示给用户看”,如果发现理解错了,然则在此页面是不可以改正的,以是灰色字应该在“新增奖品”的编辑中提示,用户在输入信息的场景下,提示才是最合理的。




页面改进下,去掉重复的属性信息,去掉灰色字的提示,(去掉这些始末是提上跟需求方探讨过的)末了用最少的容量找子 玖艘磺械男畔ⅲ逦髁耍谡箍碌目ㄆ叨龋耆彩强梢源θサ簟罢箍薄笆掌稹钡墓δ堋

然下

 

第四个页面改版




当我看到这个页面时,不知道为什么要有A处的信息,以是再次请教需求方寻求答案,给我的答案是“子入口”“IP”是为了给开发人员供给便捷查问, 诸如这个中奖者存在刷红包行为,可以通过A处的信息进行查问。

很显然这并不合理,因为对用户来说没有用,还遭成了吟味负担,如果存在不良行为,供给编号信息就可以搞定了。

B处的策划,让页面没有条理,更是一个信息干扰项。




页面改进下,依然沿用美狮美高梅卡片式的策划,去掉“子入口”“IP”“姓名”多余属性,去掉姓名是因为答问卷一般不会获取到用户姓名。

“中奖”和“未中奖”卡片,策划上有明显的视觉比重异议,去掉未中奖的Green标示,只突出中奖者。

 

末了一个页面改版


上图是做问卷用户答案页,页面的弹窗偏小,使用起来很憋气,A处不知道什么意思,询问下可以直接去掉,B处是一个不合理的“细目”按钮,原因是用词错误,应该叫“关闭”更合适,因为这个页面是查看信息,并没有执行某些任务操作。



改进下加大弹窗,去掉页面中的多余圆素颜色,上下题目用留白间距隔开,去掉“细目”大按钮,因为太占面积,改为右上角“关闭”按钮。

 

末了 

当吾们看到一个页面时,如果只看到美与丑,那是不客观的,这可能是对UI策划较小的误解,UI的美不只体Now表面上,还有内在的体味中。

UI策划一般都会带着一种鹄的进行策划,鹄的绝不只是策划的好看,更好优质的是制造一个良好的产品体味,再是能够助力业务,实现产品价值。

UI策划师对于业务要积极的去了解,对需求不要总被动接收,要有意识的去探讨挖掘,对业务的熟知,需求的准确拿捏,是您开始策划上最好的基石。


——美高梅分享,作者吴星辰





XML 地图 | Sitemap 地图