设计总结｜基于大屏设计的QQiPad主题.docVIP

设计总结｜基于大屏设计的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.设计案例 　　接下来以“幻音派对”主题为例，详细解析该流程的推进过程。 　　（1）风格关键词 　　选择经过调研筛选的关键词之一“酷炫”，作为主题的风格方向。 　　（2）确定题材 　　根据“酷炫”这个关键词脑爆了一些题材方向，最终确定使用EDM（Electronic Dance Music）这个题材，原因有：风格强烈，能够留下深刻印象；元素多，便于设计；同时躁动的音乐风格及视觉感受也是现如今很多年轻人所喜欢的，符合QQiPad的用户年龄层定位。 　　（3）氛围版视觉元素 　　EDM的特点除了律(gui)动(chu)感极强的音乐之外，现场绚丽多彩的灯光效果是其最大的特点。炫光、魅色和几何元素是产生EDM酷炫效果的基础，根据这三个特性进行界面元素的绘制。 　　 　　 　　 　　（4）首页方案设计 　　根据氛围版提取的视觉特征与题材的视觉元素进行结合，对首页进行设计，因为首页的视觉元素最多，能够最好地表现主题的风格，因此以首页为设计重点，首页风格定稿后，再将风格同步到其他的页面上。 　　 　　 　　 　　 　　（5）其他页面同步 　　首页方案确认后，便可以把风格同步到其他的页面了。同步遵循“由主到次”的原则，先走查主要页面如AIO、动态、个人资料等，确认该风格在这些页面也可行之后，便可以把其他更深层级的页面也同步上风格。 　　 　　 　　3.其他方案展示 　　（1）森之颂歌 　　 　　 　　 　　（2）暖暖下午茶 　　 　　 　　 　　（3）简 色 　　 　　 　　 　　（4）QQfamily新年欢乐颂 　　 　　 　　 　　4.主题入口改版 　　上线了全新的主题，作为门面的个性装扮入口也需要 “翻