设计总结|基于大屏设计的QQiPad主题

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


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

设计总结|基于大屏设计的QQiPad主题

需求背景

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

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

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

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

准备工作

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

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

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

设计总结|基于大屏设计的QQiPad主题

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

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

设计总结|基于大屏设计的QQiPad主题

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

设计总结|基于大屏设计的QQiPad主题

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

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

QQiPad的界面特点:

设计总结|基于大屏设计的QQiPad主题

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

  1. 视觉样式多,整体视觉统一性难把控;
  2. 视觉框架弱,只设计元素难出强效果;
  3. 页面元素多,背景的设计上限制重重。

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

设计总结|基于大屏设计的QQiPad主题

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

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

设计总结|基于大屏设计的QQiPad主题

设计执行

1. 设计流程

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

设计总结|基于大屏设计的QQiPad主题

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

设计总结|基于大屏设计的QQiPad主题

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

设计总结|基于大屏设计的QQiPad主题

2. 设计案例

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

(1)风格关键词

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

(2)确定题材

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

(3)氛围版&视觉元素

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

设计总结|基于大屏设计的QQiPad主题

设计总结|基于大屏设计的QQiPad主题

设计总结|基于大屏设计的QQiPad主题

(4)首页方案设计

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

设计总结|基于大屏设计的QQiPad主题

设计总结|基于大屏设计的QQiPad主题

设计总结|基于大屏设计的QQiPad主题

设计总结|基于大屏设计的QQiPad主题

(5)其他页面同步

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

设计总结|基于大屏设计的QQiPad主题

设计总结|基于大屏设计的QQiPad主题

3. 其他方案展示

(1)森之颂歌

设计总结|基于大屏设计的QQiPad主题

设计总结|基于大屏设计的QQiPad主题

设计总结|基于大屏设计的QQiPad主题

(2)暖暖下午茶

设计总结|基于大屏设计的QQiPad主题

设计总结|基于大屏设计的QQiPad主题

设计总结|基于大屏设计的QQiPad主题

(3)简 色

设计总结|基于大屏设计的QQiPad主题

设计总结|基于大屏设计的QQiPad主题

设计总结|基于大屏设计的QQiPad主题

(4)QQfamily新年欢乐颂

设计总结|基于大屏设计的QQiPad主题

设计总结|基于大屏设计的QQiPad主题

设计总结|基于大屏设计的QQiPad主题

4. 主题入口改版

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

设计总结|基于大屏设计的QQiPad主题

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

设计总结|基于大屏设计的QQiPad主题

设计总结|基于大屏设计的QQiPad主题

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

  1. 接到设计需求时,思考需求背后相关的要点,进行调研分析,获得合理明确的目标;
  2. 基于目标进行方案的发散,尽可能尝试多的方案,基于方案分析其合理性,进行修改,确定方案,最终落地。

设计总结|基于大屏设计的QQiPad主题

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

鸣谢

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

 

作者:Xhong

来源:腾讯ISUX

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24719/

(0)
CatherineCatherine
上一篇 2017-05-09 12:12
下一篇 2017-05-09 14:13

相关推荐

  • 你天天挂嘴边的「用户体验」,到底是什么?

    用户体验到底是什么?这个每天都挂在嘴边的词,你真的懂吗?

    2017-05-02
  • 新项目丨青岛东海凤凰:宽建筑[UCD]挑战中国第一仿生建筑

    *文章已由原作者授权发布▲凤凰中心效果图作者:王宽方案设计方:宽建筑 [北京城建] KUAN architects [UCD]项目名称:青岛市西海岸新区文化活动中心地址:中国,青岛,金沙滩设计团队:王宽,周媛,李鹏,梁文杰等结构咨询:中冶京诚工程技术有限公司  卢理杰数字模型&BIM咨询:北京华茂云信息科技有限责任公司施工方:北京城建集团(建筑部)、北京城建集团十六公司、城建精工钢构公司面积:31,313平方米状态:主体结构已封顶预计建...

    2018-03-13
  • 画一本满满的Sketch Book,你有这样的执念吗?

    Sketch Book 到底对你意义为何我们收到过,看到过很多位插画师的速写本有随身的不到A5尺寸的也有十分大到A3的像作品集一样也收到过,很多后台询问可以推荐款速写本,可以推荐下用什么笔吗(这个真的,不重要 X3)你会发现,很多ins上国外插画师po出来完稿画作和平日速写本的风格截然不同对,速写本不是一本作品集需要每一页都是完整的,完美的它更像一个瞬时的思考把你的某一点切实地记录下来看看她们的速写本01 Eve尹光芒正在鲸字号 上海实...

    2018-03-26
  • 别逗了,会用Axure就算懂交互了吗?

    举个简单的例子,一个人字写得很好看,但他一定能写好文章吗?一个作家字写得极丑,但人家书写的好啊!所以人家才能成作家。

    2017-06-04
  • Axure制作酷我音乐安卓端高保真原型案例下载

    本案例为原型库网站原创制作,转载请保留出处。这个原型文件,忘记是什么时候练习axure 时做的,做的不好,有bug,部件的层级关系不够明确,仅供参考。拿出来给有兴趣的朋友下载研究吧,关于这个原型的问题就不要找我提问咯,早已忘记了。
    前段时间又重新做了一下安卓端的酷我高保真原型,进步了很多,层级关系十分明确,这个最新的原型等过段时间再给大家分享吧。

    2015-01-04
  • 别被数据骗了——视频搜索页面设计研究总结

    如今的互联网PM都会对产品数据进行追踪,作为自己的KPI指标。但是在实际的设计结果中,令人满意的数据有时却并不一定会说明产品的实际使用效果,数据呈现的结果和用户的实际使用体验有时甚至是背道而驰。某用户:点击之后进去就直接播放了,有时候开着声音吓一大跳,会马上点出去。哦,你说按钮上的文案啊,没有注意呀!

    2017-05-02
  • 蓝鸽集团2018校园招聘,多岗位,提供食宿,年薪8-20万!

    蓝鸽集团是一家专业从事语言教育技术的高科技. 集团化企业。目前拥有5个子公司. 1个研究院. 3个科技园。在全国30多个省. 市. 自治区设立了200多个分支机构,现有员工1000余名,是我国语言教育技术行业的龙头企业和第一品牌。蓝鸽在2006年与广东省电视台合作承办了国家级“英语辅导”电视台。2008年被认定为国家级高新技术企业。2013年经国务院批准设立博士后工作站。2015年第一个研制成功了具有物联网功能的智能化多媒体教室。201...

    2018-04-08
  • AR场景下的交互设计研究——以中文输入为例 - UXPA中国2016行业文集

    增强现实场景下的交互设计研究         ——以中文输入为例1门文,百度时代总部,北京  2胡也畅, 邵颖,国际商业机器(中国)投资有限公司 摘要:随着近些年一系…

    2017-08-01
  • 以文本框为例,了解交互设计师在工作中的逻辑思考方法

    文本框是设计工作中常见的组件之一,无论是PC还是无线,大多仅是样式上的不同,它们的交互行为上是可以相互参照的。本文想从这一简单的组件出发,让大家看到交互设计师在工作中的逻辑思考方法,从而达到见微知著的直观感受。

    2017-05-17
  • 达内UED高薪喜报|4个月拿18W年薪,他是怎么做到的?

    达内UI设计,中国UID课程标准制定者世界上最让人心动的情话,不是我爱你,而是买!买!买!在过去的双11,你买爽了吗?或者给你另一半最真的爱“清空购物车”了吗?但是,如果你的口袋瘪瘪的,每一笔钱花的都要精打细算,你怎么给另一半带去精致的生活呢?一个月挣3000,你怎么节约也只有3000,一个月挣2万,你花掉1万,还有1万,一个月挣30万,你花掉1万,还有29万,所以不要把脑细胞浪费在天天怎么节约,一定要把心思花在,怎么赚钱、怎么开心、怎...

    2018-01-31