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

《设计总结｜基于大屏设计的QQiPad主题.doc》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、设计总结｜基于大屏设计的QQiPad主题　　主题一直是QQiPad比较薄弱的一块，在用户的强烈呼声下，项目组决定在6.5版本上线新的主题，为此做了大量的尝试和思考。基于大屏设计的QQiPad主题有何特点？应该如何设计？在此分享本次主题设计总结。　　　　需求背景　　主题设计的需求源自三个原因：　　1.从Support上梳理了用户对QQiPad的反馈，在体验方面，用户希望提供更多的主题，高居第一位；　　2.线上主题数量少，风格弱，只是手Q主题的简单搬运，没有为iPad大屏做针对性的设计；　　3.本期开发人力紧缺，从设计侧

2、发起主题设计的需求，能够在占用开发资源较少的前提下实现项目落地。　　准备工作　　在着手设计前，我对三个影响本次主题设计的关键点进行了调研和分析，得到了一些有用的结论：　　1.现存主题数量少、效果弱　　现存4套主题题材少，受众相对局限；主题只对左侧TabBar底图和图标进行替换，效果较弱。　　　　2.活跃用户偏年轻&低龄，审美偏向清新简约的界面　　调研了今年QQiPad活跃用户的分布情况，发现30岁以下用户占据80%以上。同时，14及14岁以下的小／初学生人群及18-22岁的大学生人群在占比上较为突出，说明目前QQiP

3、ad的使用人群主要是30岁以下的青年人，同时低龄人群也占了明显的数量，因此在主题题材挑选上，应优先考虑青年人及低龄人群的喜好。　　　　ISUX北京设计中心在今年年中做了一次关于QQiPad用户审美取向的调研，得到了下面的一组数据：　　　　从这组数据我们可以相对直观地了解到用户对界面的审美倾向，这些关键词将指导接下来的主题设计工作。　　3.QQiPad界面特点显著，需要针对性的设计策略　　QQiPad的界面特点：　　　　这样的页面特点导致了三个难点：视觉样式多，整体视觉统一性难把控；视觉框架弱，只设计元素难出强效果；页

4、面元素多，背景的设计上限制重重。　　针对问题，我将整个界面的元素进行拆分归纳，尝试从中找到对策。如下图所示，将首页分为背景和前景，又将前景元素分为可控视觉元素和不可控视觉元素，基于这个抽象的模型思考解决办法。　　　　第一，视觉上减少前景元素的种类。可控的视觉元素用统一的视觉风格进行处理；不可控的视觉元素，减少其颜色的数量。　　第二，保证背景和前景的层次感，让前景元素跃于背景之上。背景类型有三大类：纯色背景，纹理背景、插画／照片背景，根据他们的特点做合理的限制，就能保证主题的整体氛围及文字的可读性。　　　　设计执行　　

5、1.设计流程　　根据调研得到的用户审美倾向关键词，筛去一些定义比较模糊、与其他关键词有交集的词（如大气、时尚、有爱）等，留下七个可执行度比较高的风格关键词：清新、简约、素雅、酷炫、萌、卡通、梦幻。　　　　根据这些关键词，先后尝试了十多个方案，最后综合各种因素，筛选出5个方案上线。　　　　在这12个主题方案的执行过程中，我总结了一个通用性比较高的设计流程，通过这个流程，能够思路清晰并快速地执行方案的设计。　　　　2.设计案例　　接下来以“幻音派对”主题为例，详细解析该流程的推进过程。　　（1）风格关键词　　选择经过调研

6、筛选的关键词之一“酷炫”，作为主题的风格方向。　　（2）确定题材　　根据“酷炫”这个关键词脑爆了一些题材方向，最终确定使用EDM（ElectronicDanceMusic）这个题材，原因有：风格强烈，能够留下深刻印象；元素多，便于设计；同时躁动的音乐风格及视觉感受也是现如今很多年轻人所喜欢的，符合QQiPad的用户年龄层定位。　　（3）氛围版&视觉元素　　EDM的特点除了律(gui)动(chu)感极强的音乐之外，现场绚丽多彩的灯光效果是其最大的特点。炫光、魅色和几何元素是产生EDM酷炫效果的基础，根据这三个特性进行界

7、面元素的绘制。　　　　　　　　（4）首页方案设计　　根据氛围版提取的视觉特征与题材的视觉元素进行结合，对首页进行设计，因为首页的视觉元素最多，能够最好地表现主题的风格，因此以首页为设计重点，首页风格定稿后，再将风格同步到其他的页面上。　　　　　　　　　　（5）其他页面同步　　首页方案确认后，便可以把风格同步到其他的页面了。同步遵循“由主到次”的原则，先走查主要页面如AIO、动态、个人资料等，确认该风格在这些页面也可行之后，便可以把其他更深层级的页面也同步上风格。　　　　　　3.其他方案展示　　（1）森之颂歌　　　　　

8、　　　（2）暖暖下午茶　　　　　　　　（3）简色　　　　　　　　（4）QQfamily新年欢乐颂　　　　　　　　4.主题入口改版　　上线了全新的主题，作为门面的个性装扮入口也需要“翻新”，搭配本次的主题升级。旧版的个性装扮入口功能非常简陋，只提供主题banner展示，缺失预览功能；上线新主题后，原主题底层调整，需要提示用户手动更新，线上的入口也