该项目为麦风科技的iMyFone品牌主站点与相应主要产品界面的一次重构改版设计。此次迭代升级从设计上提升了品牌的整体形象，使该品牌更科技化、年轻化直接与竞品拉开差距。

        期间共同制定设计规范化标准、制定设计策略、研究风格走向、重构界面布局、信息架构，不断与运营、开发同事研究界面最佳展示方式并产出结果。

设计师全局视角

        深入理解业务后，建立完整的视角，建立官网全局性的升级意识，帮助品牌在本次重构后获得新的提升。

所以我先从不同的维度入手，站在上下游各角色的角度审视和推动，用小成本实现大价值。在具体方法上能拆解目标整合和深耕。要有系统化思路，从上至下全盘分析，洞察再逐一拆解实现。

挖掘设计机会

现状与问题点

        首先官网平台的使命和作用是为iMyFone品牌官方入口,为用户的iOS和Android设备，Windows PC和Mac提供解决方案、优质服务。主站点、产品页臃肿无序，处处点击按钮，深怕光标与其擦肩而过。一篇小作文介绍一个功能，一篇大论文介绍一个产品。

设计机会：

1. 模块臃肿杂乱；栏目太多，内容长篇文案太多，页面眼花缭乱，需要内容去肿。

2. 用户体验不佳；每一页视觉焦点全在按钮上，小屏幕浏览更难阅读，进来就是大按钮全文字，需要良好的体验路径做导向。

3. 视觉设计陈旧；产品站视觉从17年的灰白商务风至今多年；部分竞品与我们产品视觉层面已不对等了。整体品牌不统一、随意跳脱，显得廉价，急需提升视觉。

设计导向

        我们希望以一个全新的姿态面向用户，所以本次改版明确为以下内容：内容框架上，从高效分发，内容吸引，认知减三个方向进行提升；品牌视觉上，从色彩定义、图形、文字三个方向进行提升，由此达到这次主站改版的目标，其关设计关键词既内容升维去肿、设计体验导向、塑造品牌视觉。

升维去肿：信息清晰高效传达

        产品页面一味的写明产品功能，更像是一本详细解释的说明书。且每每版本迭代总会按照原有内容加现有迭代内容进行文案平铺，堆叠后往往一个产品页就会很繁琐无从看起。所以规范一个清晰的框架结构就显得尤为重要。我们需要对框架内内容进行排序、精简、合并从而减少页面堆叠臃肿，

体验设计导向：更具产品特点优化展示框架

        优先展示产品解决用户痛点内容，这样更有利于页面在第一时间进行信息的传达，用户更易了解产品内容，从而更有益于下单转化。

塑造品牌视觉：一致的设计语言与规范

        改头换面不是每次改版的必须，设计不以大刀阔斧来证明自己的存在感，更重要的是能去找到用户感知和实现成本的平衡点。基于“合适”的原则，从色彩（活泼高饱和的色彩空间），质感(高亮度卡片明亮风格）、图形(多维有趣，从点到面及3D表现）从这三个方面提炼品牌基因，去定义了iMyFone主站新的视觉语言。

前期调研定义

        以往公司团队人员少，为持续造血必须小步快跑快速上线产品售卖，设计、开发、运营都各自为营，以一个产品项目为单位进行设计开发，每个产品页面尺寸、主题、字体、规格...都不一样。初期这样做也是迫不得已，现在企业壮大，产品越来越多，页面越来越多，所以制定统一的规则是必要的。统一现有网页尺寸、模块距离、颜色、字体、字号、移动端适配规则、pad端适配规则等规则。

01 风格探索

        改版时不但把所有基础元素规范化，还是同时优化我们的主视觉，我们一共挑选了最近最流行的一些风格与经典黑白极简风格，如3D风格、几何图形、插画风格、磨砂质感、2.5D、新拟态等风格。综合分析后设计、运营、产品、开发决定使用3D风格作为本次改版风格。

02 尺寸定义

        主站原版心尺寸是1400尺寸。站点内产品页的版心尺寸有1380、1200、1170、1140等多种尺寸。导致从主站进入的各个站点大小都一致。最终我们通过访问我们站点机型最多的前5名进行了分析，pc端居多（公司以pc端产品为主）移动端第三、四名紧跟其后，所以我们的侧重点改为为1366尺寸用户完美展示（最初求完美都偏向最求4K分辨率）。重点是配1366移动端机型。同时也调研了各个我们的同行们的网页尺寸，惊人的发现他们大多都是1200尺寸，都很好的在1366尺寸屏幕内展示。通过会议一致同意后续站点都使用1200尺寸版心。

03 间距定义

        由于改版设计界面较多，每个界面里有很多模块，模块之间需要有固定的间距，其中分为有背景色与无背景的模块间距区分，还有PC端与移动端适配间距的不同。规范好间距后后续所有产品设计都可沿用此规范。

04 颜色定义

        原有的品牌蓝并无过错，但是在二十一世纪的今天，越来越多企业的标志与主体色变的更加简约、明亮、更加清爽，反观我们的主色与现一线成熟大企业相比显得老气沉闷一些。我们查阅了大量大企业标志改版案例，学习总结归纳后通过，多个会议决定我们在蓝色基调上进行提纯，让其充满活力，增加明度使其更加生动振奋人心，通过多种调配方案后得出最终色值#207CFB。

05 颜色规范

主色确定后进行了整个品牌规范色定义，我们规范了主色、辅助色、文本色以及一些背景色等，颜色规范有利于品牌形象的统一。

06 字体定义

字体这一块原站点也是比较混乱的,使用的字体有上十种(各产品页风格不同所以原设计师使用了个性字体等),现需要统一出一款通用的字体,让用户在多页面跳转中无感文字阅读。我们一共收集了10款市面上一线大企业使用的免费、好看、好用的字体，通过与运营探讨后筛选后剩下五款字体。再把这五款字体做了大量视觉对比，考虑到美观性、可阅读性（长时间文章阅读、快速识别）、适配性（多语言）后我们最终选择了“open sans”字体去统一全站字体。H1、H2、H3标签可使用“Poppins”规范字体做为标题用字。

07 字号定义

规范文字字号规范，正确使用H1、H2、H3、H4标签与P标签，我们一共定义了标签字号大小、行高大小与REM值（rem这个单位可以根据屏幕尺寸等比缩放，使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的有点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。）。定义PC端的也同时要适配到移动端，移动端显示区域有限，所以我们定义了一套移动端专属的字号规范。

站点字体字号定义完了还需要定义一个特殊界面的规范，就是文章页，文章页作为SEO重点区域这地方埋下的标签关键词重中之中，字体字号要考虑到用户的阅读体验，所以文章页另有一套标准。

中期设计执行

01 imyfone主站重构

产品站视觉从17年的灰白商务风至今多年；这次基于多方调研结果，在新版视觉风格上采用了明快的蓝白调替代多年的灰白商务风格，在商务的基础上增加品牌的产品感、科技感。使得新版更具活力。同时结合麦风品牌新蓝色对内容予突出和装饰，让主站、产品页页面看起来更专业、更未来、更吸引。

02 主站banner设计规范化

由于每个月都会有新活动、新品发布等宣传，这里的主入口banner规范显得尤为重要。以往的banner除了尺寸要求其他没做任何要求，三张banner按钮、文字、视觉完全不一致，显得格外混乱。这次规范化banner制图要求，在安全区域范围内设计，配图太大的不重要部分可向右侧超出版心，但是不可超出左侧安全区域。文案区域内统一文案字号、颜色、字体、按钮使用以及按钮大小、颜色以及交互规范。且现主站banner当大于两张及两张情况，背景色需区分开，尽量不用相近色做背景。

03 全新信任背书

原有的品牌介绍模块比较平淡商务且朴素，“客官”在阅读总快速跳过此模块。在本次改版中特意对此模块进行多次方案比较，综合了运营策略、视觉焦点分析、内容必要性展示分析后，最终决定使用方案三作为背书模块。

04 站点产品页设计

产品站视觉从17年的灰白商务风至今多年；这次基于多方调研结果，在新版视觉风格上采用了明快的蓝白浅色调以替代多年的灰色风格，保留并加强科技感。结合3D风格，通过对光影、形状、材质的打磨，增加了产品的亲和力。
同时结合麦风品牌新蓝色对内容予突出和装饰，让主站、产品页页面看起来更科技、更专业、更未来、更吸引。

05 产品页头图（banner）组件化

        本次设计优化的产品都是工具类产品，且与运营达成一致，我们决定头部banner区保持视觉统一，不需要针对产品特性做个性化设计。我们将一套统一的模版运用到各个产品页中，所有布局、色调、文字都一致，且设计、研发效率大大提高。

06 配图比例规范化

        新的3D配图用于补充释义适用场景及解决方案，以更高效、容易让用户理解产品实际应用场景的功能及属性。3D制图中我们进行了统一文件预设，使其渲染场景、灯光、HDR、材质都一致，这样团队最终输出风格就能保持统一。产品页配图方面根据产品属性统一界面3D、2.5D、插画形式进行释义展示。

07 十个产品主界面优化

        本次改版优化一共对主站、D-back、Umate Pro、iTransor for Whatapp、TunesFix、AnyTo、Fixppo、LockWiper、store页、Download Center等界面PC端以及移动端规范重构。通过基础的规范制定，设计师们在短时期内就作出统一的风格效果。

总结

引发工作方面的一些思考

1. 每个部门都有自己的立场和目标，运营部门有明确的KPI，风控安全有自己的安全原则，而我们设计部门为用户体验负责。大家都需要多站在对方的立场上考虑，互相沟通、妥协，寻找平衡。

2. 多关注和分析数据，并根据相关反馈来优化方案，而不能仅盯着视觉好看、体验舒适，并不是好看舒适转化就一定高。本次优化方案中Umate Pro改版中AB测试就出现了新版本数据不佳情况。通过不断的优化框架、内容、视觉、体验后再次AB测试成功反超。

3. 最后，这次主站改版的项目记录，仅用此来记录当时的方案、周旋的过程、协调的结果、产出的方案。

最终总结

        iMyFone主站改版设计至此完成了，通过前期的分析，再到后面对官网的架构、视觉风格的重构优化，都达到了预期。 在整体内容方面，通过对信息的优先级的优化与重新排列，让用户更好的阅读网页信息。 在视觉设计方面，新构建了品牌调性以及大面积的简约轻质感，以达到本次视觉升维、体验导向、内容去肿的主要目的。重构后页面视觉、可读性、网站整体性能、都有所提高。

设计：罗才文、刘康、杨芮
运营/产品：赵沛、黄娟娟、陈阳阳、李梦晨、刘青、陈潸、吴诗涛

前端：徐鹏、张慧、江泽欣、柯静丽

后端：李伟

测试：岑玉峰、欧阳展玮

项目管理：曾艳艳

时间:2021/2-2021/3