首页UI风格确定
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整站风格统一起来;