QQiPad主题带你飞

小编:看看别人的思考、项目步骤,吸取灵感,,你们的最爱。

主题一直是QQiPad比较薄弱的一块,在用户的强烈呼声下,项目组决定在6.5版本上线新的主题,为此做了大量的尝试和思考。基于大屏设计的QQiPad主题有何特点?应该如何设计?在此分享本次主题设计总结。

需求背景

主题设计的需求源自三个原因:

1.从Support上梳理了用户对QQiPad的反馈,在体验方面,用户希望提供更多的主题,高居第一位;

2.线上主题数量少,风格弱,只是手Q主题的简单搬运,没有为iPad大屏做针对性的设计;

3.本期开发人力紧缺,从设计侧发起主题设计的需求,能够在占用开发资源较少的前提下实现项目落地。

准备工作

在着手设计前,我对三个影响本次主题设计的关键点进行了调研和分析,得到了一些有用的结论:

1.现存主题数量少、效果弱

现存4套主题题材少,受众相对局限;主题只对左侧Tab Bar底图和图标进行替换,效果较弱。

2.活跃用户偏年轻&低龄,审美偏向清新简约的界面

调研了今年QQiPad活跃用户的分布情况,发现30岁以下用户占据80%以上。同时,14及14岁以下的小/初学生人群及18-22岁的大学生人群在占比上较为突出,说明目前QQiPad的使用人群主要是30岁以下的青年人,同时低龄人群也占了明显的数量,因此在主题题材挑选上,应优先考虑青年人及低龄人群的喜好。

ISUX北京设计中心在今年年中做了一次关于QQiPad用户审美取向的调研,得到了下面的一组数据:

从这组数据我们可以相对直观地了解到用户对界面的审美倾向,这些关键词将指导接下来的主题设计工作。

3.QQiPad界面特点显著,需要针对性的设计策略

QQiPad的界面特点:

这样的页面特点导致了三个难点:

视觉样式多,整体视觉统一性难把控;

视觉框架弱,只设计元素难出强效果;

页面元素多,背景的设计上限制重重。

针对问题,我将整个界面的元素进行拆分归纳,尝试从中找到对策。如下图所示,将首页分为背景和前景,又将前景元素分为可控视觉元素和不可控视觉元素,基于这个抽象的模型思考解决办法。

第一,视觉上减少前景元素的种类。可控的视觉元素用统一的视觉风格进行处理;不可控的视觉元素,减少其颜色的数量。

第二,保证背景和前景的层次感,让前景元素跃于背景之上。背景类型有三大类:纯色背景,纹理背景、插画/照片背景,根据他们的特点做合理的限制,就能保证主题的整体氛围及文字的可读性。

设计执行

1.设计流程

根据调研得到的用户审美倾向关键词,筛去一些定义比较模糊、与其他关键词有交集的词(如大气、时尚、有爱)等,留下七个可执行度比较高的风格关键词:清新、简约、素雅、酷炫、萌、卡通、梦幻

根据这些关键词,先后尝试了十多个方案,最后综合各种因素,筛选出5个方案上线。

在这12个主题方案的执行过程中,我总结了一个通用性比较高的设计流程,通过这个流程,能够思路清晰并快速地执行方案的设计。

2.设计案例

接下来以“幻音派对”主题为例,详细解析该流程的推进过程。

风格关键词

选择经过调研筛选的关键词之一“酷炫”,作为主题的风格方向。

确定题材

根据“酷炫”这个关键词脑爆了一些题材方向,最终确定使用EDM(Electronic Dance Music)这个题材,原因有:风格强烈,能够留下深刻印象;元素多,便于设计;同时躁动的音乐风格及视觉感受也是现如今很多年轻人所喜欢的,符合QQiPad的用户年龄层定位。

氛围版&视觉元素

EDM的特点除了律(gui)动(chu)感极强的音乐之外,现场绚丽多彩的灯光效果是其最大的特点。炫光、魅色和几何元素是产生EDM酷炫效果的基础,根据这三个特性进行界面元素的绘制。

首页方案设计

根据氛围版提取的视觉特征与题材的视觉元素进行结合,对首页进行设计,因为首页的视觉元素最多,能够最好地表现主题的风格,因此以首页为设计重点,首页风格定稿后,再将风格同步到其他的页面上。

其他页面同步

首页方案确认后,便可以把风格同步到其他的页面了。同步遵循“由主到次”的原则,先走查主要页面如AIO、动态、个人资料等,确认该风格在这些页面也可行之后,便可以把其他更深层级的页面也同步上风格。

3.其他方案展示

森之颂歌

暖暖下午茶

简 色

QQfamily新年欢乐颂

4.主题入口改版

上线了全新的主题,作为门面的个性装扮入口也需要 “翻新”,搭配本次的主题升级。旧版的个性装扮入口功能非常简陋,只提供主题banner展示,缺失预览功能;上线新主题后,原主题底层调整,需要提示用户手动更新,线上的入口也无法满足这种需求。

因此,借助本次主题升级的机会,对个性装扮页也进行了界面升级,由原来的横向banner的形式变为“封面+操作区”上下结构的形式,增加了预览主题的功能;同时,对主题的状态进行了扩充和明确的定义,以按钮文案的形式进行展现,相比之前的形式,展示更清晰,对不同情况的兼容性更强。

总结整个项目的推进思路:

1.接到设计需求时,思考需求背后相关的要点,进行调研分析,获得合理明确的目标;

2.基于目标进行方案的发散,尽可能尝试多的方案,基于方案分析其合理性,进行修改,确定方案,最终落地。

每一个设计,其实都是一次又一次“发散”和“收敛”后的结晶,发散是为了突破创新、收敛是为了合理落地,两者缺一不可,因此,既要严谨思考,又要大胆想象,才能够获得更好的设计结果。

鸣谢

在本次项目中,感谢放放、婷婷还有我的导师靓靓的悉心指导,感谢老大和标叔指点迷津,感谢多多的切图支持,同时也感谢在项目过程中给我提宝贵意见的同事们,你们的支持给了我很大的动力!

再次感谢大家支持!

isux

作者:Xhong

(0)

相关推荐

  • QQ年费绿钻带你飞 绿钻现金券成长值任性送

    QQ年费绿钻带你飞,豪享音乐世界全能VIP特权~活动期间,仅需90元即可瞬间开通年费绿钻!开通成功以后可获得200点成长值、直达LV5特权、理财通红包、游戏礼包等奖品,感兴趣的朋友们千万不要错过了哦! ...

  • PVE阵容推荐 全民超神带你飞

    操作方法 01 PVE阵容推荐 全民超神带你飞 | 2015-10-12 10:57 在<全民超神>中,闯关模式和挑战模式可以说是大家获取经验.装备.英雄的最佳途径.在不同的模式.关卡中遇 ...

  • 滴滴专车怎么成为五星认证司机 让老司机带你飞

    滴滴专车是一款十分方便的租车软件,在这里你可以找到很多很多的关于用车的功能,滴滴专车怎么成为五星认证司机?近日滴滴专车上线了五星认证死机,而且服务也逆天,那么怎么认证呢?下面绿茶小豆子为大家分享滴滴专 ...

  • 老司机带你飞不用怎么找百度云资源分享你懂

    老司机教你云资源分享你懂的,简单易学 操作方法 01 百度搜索一下    百度云    进入官网 02 直接用QQ 快速安全登陆 03 登陆后点击网盘中的资源创建分享链接 04 复制分享链接,就可以分 ...

  • 王者荣耀带你飞头像框怎么获得

    一起看看王者荣耀会闪的带你飞头像框怎么获得. 操作方法 01 充值指定点券: 带你飞是属于只要充值就能拿到的,获得方式其实不困难,而且也不需要你充值多少,1元就足以. 02 需要先进行购买: 它不能先 ...

  • 广州5大游乐场玩转享透透

    忘记年龄,抛弃压力,玩闹不只是年青人的专利,只要有激情外加那么一点点勇气,生活就会格外精彩.就算烈日当头又能怎样?该玩照样玩,该闹照样闹.这绝对不能轻易放过,唤醒沉睡的细胞,在游乐场找到HIGH翻的快 ...

  • 手机抢票软件有哪些?手机抢票软件合集(附软件下载地址)

    春节回家买火车票相当难,特别是现在火车票可提前60天购买了,不少需要买火车票回家的快来看看小编为大家推荐的几款手机抢票软件,希望能帮到春节坐火车的小伙伴们~ 推荐软件:网易火车票 推荐理由:火车票退票 ...

  • 微信会员怎么开通?微信会员多少钱?

    QQ会员玩腻了?不流行了?没事!微信会员带你飞!微信已经推出会员制度,具体开通方法以及详细费用请看本文介绍。 微信会员想必是马化腾的又一杰作!这样不仅可以让微商们更加依赖微信,也让微信变成了消费群体所 ...

  • 皮皮时光机怎么用

    喜欢玩微博的人都会发现,微博来源往往会有来自皮皮时光机,这个是怎么做到的呢?今天小编就和大家分享一下自身的经验. 起初,小编一直以为皮皮时光机是一款手机应用,看到别人的微博来自皮皮时光机,感觉很炫,很 ...