对于设计改版大并陌生，每个项目的改版中都会有同的方法或者流程，本重点在于分析我们在「手机QQ游戏中心」改版中使用到的流程或者设计方法，并且通文总结出一经验、方法或内容，希望以在续其他的项目设计中得以应用。
次手机QQ游戏中心为大型的设计改版项目，我们需要从整去看每个阶段中的设计需要输出的内容，更加系统地思考整的设计，而且也需要为完善的流程。因此针对次的改版设计，总结了一个较为完整的计流程导航，主要为 「前期—中期—中后期—后续展望」 ，并根据计导航在计中对各个关键点的产出内容进行梳理总结，并从中进行复盘学习。
基于以上完整的流程导航，下面对每个阶段进行细化深入的析，以及在每个阶段中对于计输出的把控程度及计的思考。
计前期属于析的阶段，需要尽可能大范围地去收集对后续计中起辅助作用的内容，并且需要对各个内容进行体析和得出结论。本次 「机QQ游戏中心」 改版中主要着重在 「项目背景、用户析、竞品析、头脑风暴」 四个部
1. 项目背景
什么改版？
改版之我们需了解到真的改版目的什么，不纯粹追求变化行设优化。并且希望通过改版后给用户传达一怎样的感受？这些都需去深入了解的内。
产品侧
重新思考 「手机QQ游戏中」 的策略及，整体的方向相比之所改变。因此产品侧同学希望通过改版优化升级，满足新的产品策略方向。当然除了底层平台的基础架构优化之外，需一全新的 「交互体验」 「视觉UI风格」 刷新用户对于旧版游戏中的感知及感受。
设侧
- 基用户，通用户研分析得到的反馈：旧版游戏中心无论在 「内容的展示」 或 「功能的引导」 上是处混乱的状态下，用户进游戏中心无法定位界面的一视焦点，关键信息及内容获取难。
- 基于设计，在产大方向调整的情况，旧版的游戏中心的设计很难满足产侧的功需要。除此之外 「手机QQ游戏中心」 从上线至今较有大的设计改版优，长期的固印象并满足现在日月异的户变。
基以上内容，对整的品牌印象和设计语言进行重新设计，刷新用户对手机QQ游戏中心的固有印象，提升用户的信任感，给用户传递我们一直求变的精神。主要从以下两点着手：
- 重新搭建游戏中心的界观，让整体的计更加符年轻用户（别是男性用户）的审美；
- 进行模块重组，提升视焦点，从整到模块到细节的设计，突出重点信息内容，弱化辅助内容。
2. 用户分析
了解用户
我们希望通过的用户分析，加深入的了解我的用户一怎样的结构状态，并且可以其中找到可以通过设发力帮到用户的点。
明确用户主体及性格
从用户调研得出，手机QQ游戏中的主用户初高中的男性玩家，玩类型主以竞技、体育、益智类游戏主，用户的主性格轻、好奇、探索、性。
分析户诉求
- 用户对于游戏中心的依托主要在于拓展虚拟关系链，希望通过游戏来扩展的社交圈。
- 希望通游戏中心以提升自己的游戏技术，让自己取得进步。
- 增强游戏中心与游戏直接的联，例如在游戏中心可看到一些游戏角色IP，升代入感。
- 对于平台的依赖性主于礼包福利玩法攻略。
用户对于机QQ游戏中心的法
用户对于旧版游戏中心的主要关注点在于：
- 信息呈现过于杂乱，找不到自己关注内容或者礼；
- 希望在操作上更加简智能，提升操作的效率。
3. 竞品分析及设计趋势
从别人的身上学习优点
竞品及趋势的分析也是非常重要的一，通分析和收集，以帮助我们更加准确地判断续设计中应用的一设计方式及手法，到取长补短的用。次的竞品并不只局同类型的游戏平台，还包括趣味类APP、动漫类、视频类等等。更的寻找不同方向的思考点，并结合2019年的设计趋势总结。最终得出以下几点结论：
- 卡片式的计有利于每个模块划；
- 统一的图形设计语言贯穿整个APP，更具品牌；
- 丰富的效，设计表达更年轻；
- 浅色背景+渐变色的运用，扁平化的基础提升页面的细节。
4. 头脑风暴
激发更多想法
脑暴主要目是在于激发更多思考可能性，并过多脑暴进可性内容梳理，最终帮助设计与品学成致结论。
由计侧主导发起，产品同学及UI开发同学一起进行了脑暴。总体脑暴长大约为2.5，脑暴围绕关键点：
- 「手QQ游戏心」 于用户来说是个怎么样感知？
- 「机QQ游戏中心」 可以帮助用户得什的提升？
从这脑暴，我们出了不少关键信息及可发力，体划分为四个关键路径： 「专业内容」 「帮助变强」 「游戏社交」 「消费娱乐」 ，并从选出与前用户分析报告相匹配关键词，进下步梳理。
5. 内容梳理及关键点标记
结合上面分析及脑暴的容，我们进一步梳整体的 「设计目标」及 「牌性格」 ，并对目标和性格做具体的定义，设计目标从 「代入感、社交、成就感」 方面打；牌性格从 「年轻、个性、探索、好奇」个维进行详细的设计承载。
6. 阶段小结
在前期的通 「项目背、用户研、竞品分析、头脑风暴」 等方式帮助我们清晰整的项目结构，从中我们得到一比关键的内容结论。除对设计方面的帮助之外，更的是与产品同学达成一致的想法，方便续的设计落地到指导的意义。
中期属初步设计内容输出及确定大方向阶段，明确产品世界观、情绪版输出及基情绪版的设计初稿。
1. 世界观搭建
思考设计大
世界观除了刷新用户视觉感知，过世界观搭，指导后续体改版设计运用 「设计语言」，让体设计更加 「系统性」 并具有较强延展性。
搭世界观主轴
基于游戏底层概念，根据 「代入感、社交化、成感」 三个大，围绕 「年轻、个性、好奇、热血」 四大性格进了脑暴。
小组快速脑暴并梳理关键词，最后起确定 「元空」 「游戏广场」 「宝典秘籍」 三个不世界观进情绪版输出。
2. 情绪版输出
深世界观概念及情绪版输
情绪版的作在于探索设计方向和达成共识，因此在后续的设计中可根据实际情况调整变。情绪版要从几个容展现：视觉影像、色彩、字体、界面效果、图标图形、插图格、背景、画效果等。考虑到受众是产侧同，因此需要尽量地具体细节，产侧同得到真实的视觉感受。
方案A-次元空间
基游戏的虚拟场出，手机QQ游戏中心主要到连接（用户）和虚拟（游戏）的用，我们把手机QQ游戏中心想象成三空间中转站——次元空间，玩家通里进游戏的虚拟世界。
基于次元空间的脑暴及键词探索，确定键词的表现：炫光感、空间感、速感、未来感
方案B-游戏场
来源富彩的游戏主概念，关键词：富、霓虹、热闹
方案C-宝典秘籍
结合攻略内容打造成玩家的晋级秘籍的概念，关键词：神秘、探索、增强
基情绪版，与产品同学（有产品老大参与）当面确认初稿的输出方向：基 「次元空间」 及 「游戏场」 的概念进行初稿设计。其中还得到的具反馈：
- 不建议深色调：游戏的展示内容本身较为丰，担心深色调容易造成视觉疲劳。
- 不需要度业：希望视表达上有特，但不需要度的强个，以满不同的游戏类型展现。
3. 初稿输出
确认设落方案
方案A：次元空间整体设比较偏男性向（基于QQ用户的数据分析）硬朗风格，图标搭配多彩的渐变叠色设突出轻化，整体结构使用小圆角的卡片；
案B：游戏广场体偏可爱风格，在颜色使用上也会比较偏粉，体结构大圆卡片。
最终与品侧起确定案A继续深化延展设计。主要考虑：
- 游戏中的用户以男性主，方案A相比的设整体感受会加贴近男性用户审；
- 从品侧考虑案A设计相更加性，可以更好地满足不游戏融入。
4. 阶段小结
初稿只是纯粹地方向探索，作为设计师应该做更多的容辅助说明设计的意图及想法，本次设计在设计次元空间的初稿时，考虑到产侧对于整体设计的脑补解及代入感，从系统的角进行输（包括：图形、颜色、效、转场）等几个维进行了初步探索，求帮助设计方案更有效地传达及产侧同进行决策。
基于核心思考设计法论
法论可以是套流程或是设计执法，除了表论述表，关键在于帮助我们更加系统性、全局性地思考体设计规则，并具有较高可应用性和复制性。
思考逻辑
以 「核心」 作为起始，过 「核心定调—性格拓展—表现延伸」 三层内容逻辑思考，从抽象具象进转化，最终过设计语言表出来设计。「核心」 定义为体设计内核或世界观——抽象概念；「性格」 是基于核心概念关联拓展出来具象设计形态；「表现」是实执时设计语言表。
设模型（思考菱形图）
基于设核，由内向外一层层的扩散联，并推导出每一层的内。每一层的内都互相具关联性，从内向外越越具象表达出设终落的形态。终得到的一结论应该一具体可执行的设方法。
结合项目
基于世界观 「次元空间」为设计核心，结合设计核心及情绪版输的键词，最终确定设计的性格为 「炫光感」 「空间感」 「速感」 「未来感」 ，通过这个方面来呈现 「次元空间」 的视觉感知。结合性格进行二延伸思考，推导表现层的容，从而定调 「手机QQ游戏中心」 整体的设计语言。
整理表现
定细节围绕核心及，表现整分为 「图形、颜、形式、氛围」 四个基础形态来执行整的设计，定初步的设计规则，帮助续更加深和准确地把控整对设计。
如何落地到最终输出？
导出具体设计细项后，最终以 「图形、颜色、形、氛围」 四个维度去思考实设计，过这些设计串联形成最终完设计语言。
图形设
基于游戏中的用户形态及设性格的表，整体的图形设会加偏向硬朗，使用 「斜线、多形之类的形体结构，表整体的视觉感知。
视觉化提取
基于性格四感的化映射，从中提取关键元素表达「次元空间」的概念，并且符合实活中的视觉感知。从提升用户对于「手机QQ游戏中」的图形设入感。
定义元素
基于上物的图样，并结合表现层的定义，确定整体的图形格为 「线性+半透明填充」 的科技感格，最终确定图形的设计语言为 「斜线、多边形、异形卡片、信息图谱」 等表达 「个性」 的性格，具象的图形感知为 「火箭、太空人、游戏手柄、探索器」 等元素来表达年轻户好奇、探索的一面。
图标设计
图标为整UI的点睛之笔，是除 「颜」 之外串联整个UI风的品牌元素现，因此在设计执行中必须紧扣整的风大方向。
设定图标规则
- 结合游戏心用户主要以男性为主，此体图标造型偏硬朗，收处使用小圆进和，避免过于生硬。
- 图标视角统一规范为正面和正侧面的计规则，从规则上保证图标的基础识别性。
- 结构上采用组合叠加的方式，提升图标的空间次感，避免单。
- 使多彩的大跨渐变满足炫光感的表现，且符合户年轻的特性。
优化打磨
多案尝试，过不度找出更加适合游戏心图标设计。第版图标设计单独来看大感觉是基本上是可以，我们深入去研究时候会发现论从形体或风格致性上其实存在着很大优化空。
优化主要从2个思考：
- 图标的形体优化；
- 图标细节体风格致性优化。
形体优化，简化图标的细节，增强图标的辨识度，优化图标的外轮廓让图标加流畅，增强图标的表意及普性。
风格一致性优化，从两方面考虑图标的一致性问题：
- 图形统一：游戏中心整体的图形格都是线面为，但初稿的格要使了面形设计，在整体格的吻合上值得优。
- 颜色降噪：多彩的图标单独具不错的视觉表，但整体缺乏关联性，且作 「基础图标」 以及从 「品牌性」 「一致性」方面考虑 也存挑战，对于品牌色的透出不够完善，因此需行整体的 「颜色降噪」，增强品牌色调的感知。
颜色运用
颜色作为另外一个维度的视觉知，相比于图形更能提升用户对于品牌的受。理确的品牌色调可以帮助用户加深对于产品的认知。
色调延续
主色调的计主要考虑个方面：
- 游戏心本身存在于手QQ，用户于手QQ具有强烈品色调感知，此于游戏心本身，希望可以起到个延伸和承接；
- 基于次空间-科本身的颜色的知，然后再拓展应用。最终确定游戏中心的主色调为蓝色调，并且使用大跨度的渐变效果，让颜色更有炫光的觉。
颜色拓展及分类
手机QQ游戏中心作为一个多元的游戏平台，很难使单一的颜色来表达整的容层次。因此基于同的颜色性格，蓝色为调，拓展 「红绿」种颜色作为辅助使的颜色，来表达同的容感知。依据功调性、冷暖、及户的规普识性感知，结合上种色调的调性划分，对同类的功进行赋予同的点缀色彩。
形式结构
一套完整的UI界面需有一个具的形式感，并且以通形式的设计给用户传达具的视设计模式。
在户调研的时候，我们获得一个较键的信息：目前的信息流阅读较为混乱，到想要的容。因此在版的设计时，我们需要深入打两个键点：
- 优化内容的形感，提升用户对游戏中心的视忆点；
- 优容模设计，升同容的归属感。
形体感知
基于内容，设计统形体感知，提升用户视觉记忆。
- 从内呈角度考虑，卡片式的设利于差异性较的内的独立呈；
- 基于设计形，卡片设计更有利于内容与背景空、层表现。最终选择了卡片设计。
加强形式感
在部分页面的首个卡使用异形的设计，增强页面的形式感，提升界面设计的表现次。并且延续到对框、上滑浮等模块的设计，增强方位的透出。
内容差异化的视觉表现
游戏中心首页整体会承载三种类型的大卡片，别是：最近在玩、新游款推、新游榜推。主要计目标：
- 让用户感知到三块内容异化，
- 造视觉的差异化让用户在长内容滑动的是不会觉过于调。
「最近在玩」模块设计上更多是考虑用户代入感，在视觉表现上融入游戏IP及游戏相关背景；新游荐主要以内容展现为主，此体设计偏简洁白色卡片+异形装饰；新游榜单主要体现榜单序列感，在配色上制定三个维度「银铜、热到冷、深到浅」来表现。
内归属感
内归属感提升能够帮用户速的筛选并获取关键信息。除了交互逻辑的内归类之外还需处理好内与内之间的划分、区隔，通过视觉化的处理手法（排版），让内的分配加合理。
游戏心首页体主要分为三块内容：「最近在玩、新游荐、游戏榜单」 。「最近在玩」则会承载更多其他内容，例如 「视频、播、攻略、活动、礼、社区、组队」 等等。
模块化设计
模块化设计具有较强 「模块相独立性、内容互换性、样用性」，而游戏心作为个平台需要承载众多具有异化游戏和游戏内容，此在内容多变情况下更需要个简洁设计模来承载完内容设计，而模块化设计则更契合这多内容设计。
从以下个方向进行优化：
优化视动，增强视引导和进行视降噪。重新设计出两种方案，从内容的展现、设计变化及整的模块在首屏中的占比，最终确认方案B，为继续优化的方向。
优化模块展现，小模块的设计存在几个问题：
- 一行展现内容透出不够，行显得拥挤；
- 图形装饰干扰内容展示，且设计质感差；
- 在一致性上更深入打磨，删减必要的容，统一展示区域。
氛围造
恰氛围造可以帮助提升视觉代入感、沉浸感，既需要满足平台品展现，也需要合适透出游戏内容。
从整体上确划为 「向氛围」 和 「游戏向氛围」 。向氛围主要是足制定的界观——次空间的表达，通过图形及色彩的计产生关性；游戏向氛围主要是对于IP形象的展现及游戏色调、背景、颜色等内容的透出。氛围营造关键位置：版本刷新启动画面、最近在玩默认状、首页及个人主页默认背景、游戏专默认状、榜模块等。
动画仪式
版本刷新动画调版本前后的一种刷新仪式。从进入游戏中心给用户展现探索的受；着提升用户的参，让用户开启新版游戏中心；最后通过动画的衔让用户直观的受版本的变化。
最近在玩切换动画
「最近在玩」作为游戏心较为要模块，此希望除了与竞品具有视觉上异，希望可以过切换动效设计更进步打造异化。我们尝试了几不动画案。从这些案，虽然都满足了模块及功能表现，却仍然存在着不问题。
以上案始终不够有特色和具有记忆，此继续从「游戏及趣味性以及契合度」上进思考，不难发现掌玩家在玩游戏时都会有更换游戏卡场景（例如Switch），此我们开始设想是否最近在玩切换游戏也可以被设计成更换游戏卡形？
最终设计出新游戏切换动画，既满足功能时具有游戏趣味性。
结合与拓展
主元素使用游戏手柄的元素，结合科技化的图形表表达。融入探索及未的概念拓展出火箭太空人的元素，完善整体的内表达。通过三角度的表，让用户对于游戏中的风格产关联度入感。
基于 「近玩」 模块的特性，设了三种不同色调以满足不同的状态下展示。
深感知
基于太空的概念结合图形物映射的容，继续深游戏中心的视觉感知，要体现在首页及个人页的顶背景上。
基于氛围的打，强首页及个人页的氛围营。
代感与沉浸感
根据用研报告，用户除关注游戏礼包之外，另一个更关注的点是游戏的 「代感」。因此在游戏代感方面的视表现也是次改版优化的一个关键点。而游戏中最能让玩家产生视 「代感」 及共鸣的内容无疑就是 「游戏角IP（英雄）、游戏场、游戏玩法、游戏/质感、UI美术风」等等 ，结合内容以打造出更加贴近用户玩游戏时的视沉浸感。
在手机QQ游戏中心改版的过程中，「最在玩和游戏专区」 作为户玩过游戏的要触达点，因此在这两个模的视觉呈现够最直观户产生游戏的代入感和沉浸感。从实际设计的角思考2个方面：
- 「最近在玩」 最终在首页呈现，因此我们的设计必须符合整UI的大框架；
- 最在玩与专区的联性。
结以上息，最终筛选出以「游戏角色IP（英雄）+游戏景（背景）」 的方式来营造 「最近在玩」模块的氛围。专作为「最近在玩」的入承载，除了纯的代入、沉浸之外，更多的是需要考虑前后的关度，通过关才能形成更加深入的代入。
除了普通的专，还针对者等头部游戏计了高定制的游戏专。无论从角色IP、游戏色调/质、UI美术风格等视觉表现上或是游戏内容、战绩数据等方面都更加深度地造代入和沉浸的氛围。
后期设计执是个具体输出内容流程。为了避免设计过程出现偏，此尝试引用设计法来把控体设计系统性，结合「菱形图」应用，帮助从内步步剖析更加具体晰地执内容。
一阶段性的改版，往往不能覆盖到所的方面，因此改版完了基本的内之后，我们行了设复盘，找出一些设可发力但未得到落的点。
动效设计有待优化，目前动效设计不多，而在体系统性上也较为缺乏，后续仍然需要在这进更加深入地探索并动优化。
转计有待优化，包括弹框、上滑浮层、底部复层、顶部浮层等等，由计先出demo，再结产品侧的计划及优先进行推动优化。
品牌系统有待优化，初期主要以内容和UI设计输出为主，但游戏中心整的品牌内容仍需要进行系统地梳理，包括品牌图形、字应用、品牌彩、延展使用等。
在设计前期，设计做大量的用户分析和竞品分析，主要是为满两个重要关键点：用户和打造差异点，希望从新的角度去呈现不一样的设计审美。
设计中期，在于世界观的打，通过情绪版的构建，最大程地升产侧对于设计概念的感知，帮助快速确定设计方向。
初稿的设输出，尽保证输出的完整度，图形/图标/颜色/界面几维度尽可能让产品侧同学感知到设对于整体设的把控，从提升产品侧同学对于设思考的接受程度。
从初期-期-后期，体设计输出流程上是较为畅，除了依赖品侧及项目侧学项目计划把控，设计侧也保证了高效高质设计输出。
欢迎关注「腾讯ISUX」公众号：
浙公网安备33011002017549号