首页UI风格确定

2018-09-20  本文已影响0人  宁采臣go

APP首页作为我们本次改进的重点项目,以下分成几个部分讲解:

1、改版背景;

2、UI风格研讨会议记录;

...................................................................................................................................................

1、改版的背景如下:

改版目的:整站风格统一,打造属于公司的APP调性;用“五个定”来规范和统一网站风格调性;

       1)定方向[战略层];

            公司层面:

            1>从爆款式、货架陈列式向商品、内容推荐式转变;

            2>简单粗暴的营销模式向智能营销+智能内容推荐转变;

            因此首页需要一定的丰富度,不能像目前版本单纯堆砌营销活动,无逛点;

            用户层面:

            1>为目标用户:爱逛用户打造全新首页,本来APP的用户70%为女性用户,爱逛的用户根据28原则占14%女性,6%男性,服务于这批爱逛用户将让首页相对有逛头,需要一定的丰富度;

        2)定内容模块[范围层];

             1>从我们已有的专业产品、专业内容、专业用户中抽出适合放在首页的内容模块;

        3)定框架[框架层结构层];

            1>搜索栏—分类tab—banner—重要功能入口—重点主题模块—分类主题模块一视频区—商品推荐

             2>首页第一屏价格驱动用户:突出营销氛围,包括:品牌日、上新日、会员日、新人专区、E宠团、每日疯抢、品牌特卖、清仓特价;

             首页第一屏以下以内容为导向:知识精选+重要栏目入口+分类栏目入口+视频区域+猜你喜欢;

        4)定模板标准;

            1>首页各个模块的模板固定,不能随意选择不同模板,模板分为:商品模板、营销模板、内容模板;

        5)定UI标准[表现层];   

             1>整体视觉风格;

             2>广告页面元素内容;比如:图片+主标题+副标题+字体颜色范围+字体大小;

             3>广告页面整体色系选择范围;

             4>广告图高度;

                ......冉哥产出

总结起来就好比我们造一台机器人:

定战略方向对应“造一台服务于家庭的机器人”;

定内容模块对应“确定该机器人的组成要素,需要头部、两只手、两只脚、上半身...”;

定框架对应“我们需要为该机器人选择一套骨骼框架,不能用狗的骨骼、大象的骨骼,需要一个1米8的人对应的骨骼,骨骼的选择跟内容模块有关,比如内容模块我们没有让这个机器人人有尾巴,那么选择骨骼的时候不要有尾巴的骨骼”;

定模板标准对应“模板标准是为定内容模块服务,我们需要头部模具、手的模具、脚的模具来确定手脚头部的比例、长度、具体尺寸,这样组装出来的机器人才符合审美,才能统一风格调性,否则可能的结果是左手是女性的手,右手是男性的手,我们需要制定模具来约束”;

定UI标准对应“我们的机器人的皮肤表层、穿衣风格,不能是杀马特风格机器人、不能选用面积势均力敌的大红配大绿等等”;

2、UI风格研讨会议记录;

目前新版首页我们设计了两个版本,一个版本的风格是ios11的大字报风格,一个版本是偏可爱风(因为女性用户居多);为把控会议节奏制定了一个粗糙的会议节奏:

pet天团的成员全都是养宠目标用户,人物分群为:

喜欢逛首页成员:4人;

狗儿逛首页成员:3人;

从不逛首页成员:0人;

用户以第一直觉对A/B方案进行投票,A方案(ios11大字报风格)获得:2+1.5+2+2+2+1.5=11分;B方案获得:1.5分;

对A方案第一直觉的词语:简洁、有购买欲望、清爽、舒服、柔和、惊艳、新颖;

对B方案第一直觉的词语:大众化、淘宝化、耐看、暖色调有点疲劳、活泼、明亮;

在后面给出的建议和意见的环节,相对比较凌乱,进一步印证了:用户无法像专业产品经理那样分层次有条理说出他们的体验,他们能展现的就是用户情绪;“XX国际看上去好有质感(满足),怎么感觉都没促销活动(不爽)”;

我们总结pet天团建议的点:就是首屏的营销模块不够突出,甚至都有人不知道品牌特卖在哪里;为此我们后面对首屏的营销感的设计进行相应优化;

后续,我们优化一版之后又扩大了调研范围,最终调研了61个真实养宠用户,凭直觉选方案,A方案47人投票;B方案14人投票,最终我们选择A方案作为首页风格,后续将以首页ios11的大字报风格为中心,将APP整站风格统一起来;

上一篇下一篇

猜你喜欢

热点阅读