【复盘】全方位解析搜狗搜索APP设计改版经验

作者:搜狗搜索设计团队(S²DC)

 

搜索的本质是什么?它应该以什么形态出现在用户面前?这是我们一直在思索的问题。当互联网被信息湮灭,寻找真实有效的内容需要付出更多努力的时候,我们站在信息链接的中心,有义务去思考如何缩短人类和真实世界的距离。迎着这些问题出发,我们对搜索APP进行了一次改版升级。

回归搜索本质,使产品更具包容性,多角度兼容未来各专业领域的垂类场景,以迎接新的挑战和机遇。我们经历了问题定义,设计策略制定,团队协作,跨部门资源调配,灰度测试,验证效果等环节,最终以新的姿态和用户见面。而在这次以设计推动为主题的改版中,我们有意识进行了储备和积淀,形成了更高效的协同模式并规范设计流程管理,同步构建体验维度的验证模型,并不断深挖和拓展产品外延,探讨更多可能性。

图例:设计流程

在新版设计中,设计更注重对内容的优先展示。我们通过对默认热词的强调,希望吸引用户注意力并促进他的后续行为;此外,限定了引导色的使用,使内容更为聚焦;压缩空间保证信息流的露出,增加信息的展现密度。同时以数据为依据,对功能进行重新布局设置,用有限的空间展示更无限的可能性。

下图是对搜索核心流程的改版效果:

图例:整体对比图

 

一. 设计目标拆分

提出核心改版目标后,我们在设计内部进行了向下的目标拆分。对app视觉系统的一致性和易用性做了定性分析和调研,以制定后续改版工作的具体框架。首先从商业、用户及自身设计现状这几个角度进行分拆。

商业方面:围绕公司的战略目标和产品的商业现状(品牌认知度低、用户构成分层严重),去圈定我们发力的范围和重点。

用户方面:借助用户研究去采集用户声音,了解用户对于权威搜索引擎的理解,对于关键路径的体验感知并尝试挖掘潜在需求。

设计方面:从三大主要使用场景出发,按照功能粒度去评估我们与竞品的主要体验差距,校正自身的体验问题。

图例:竞品跟踪体验量表

 

二. 制定体验追踪模型

在本次改版中,交互设计师对线上数据和各环节转化进行了分析,在改版中沉淀输出了体验的评估体系,并对设计的增值价值进行重新思考与定位。我们希望拿到的不只是一个‘好’与‘坏’的结论,而是希望得到追踪问题的通路:建立一个可以为项目持续输入用户视角,能对设计起到评估、监测、反馈作用并产生实际价值的用户体验指标体系。从这一目标出发,对原先的数据指标以用户的视角又做了新的整理,以期搭建一个全面、系统、有效的指标模型。

该体系将产品指标隐喻成一颗树,作为树干的主干是商业目标搜索量相关的核心路径,作为枝叶的细分功能层是周期性高频迭代的主要增值功能。设计价值的隐喻就是通过一系列的方法监测滋养,保证这棵产品树不断发展壮大。

图例:用户体验模型

主干层映射任务完成度这一体验维度,关注指标包含核心任务的完成率、核心路径转化率等。目标是版本常规跟进监测产品状况,以及从用户角度切入的需求发掘,对指标产生正向影响。

细分层多涉及一些重要辅助功能的增减及迭代,主要映射参与度、接受度这些体验维度,关注指标包含重要功能点的点击率、停留时间、转化率等。目标是了解这些功能的用户行为数据,提升功能使用体验以及向核心路径分发等效果。

由此整个体系框架可映射留存度、愉悦度这些体验维度,而这两个维度多会通过些定性方法去做评估。留存度我们关注用户使用中的体验水准,既有对我们自身产品一致性及体验细节的纵向改进,也会同竞品以功能点粒度做周期性的体验评估。满意度会采取定期的用户回访、问卷及用户反馈后台分析整理这些方法,持续整理收集用户声音,筛选有价值点扩充到体验需求池中,向用户传达正向反馈。

这个体系除了帮助我们衡量改版的设计成果,也会在后续的设计工作中提供相应依据。接下来我们进行了多轮的讨论,把这些前期整理到的信息继续发散再收敛,拆解成战略目标-目标延伸-行动节点(单级或多级)这样的结构,得到了一些非常具体的可行动的细项。

图例:目标拆分行动点

 

三. 制定设计策略

经过前一阶段拆分得到的可行动点离落地还有一定距离,我们还需要进行设计目标的转化,从而得出相应的设计原则。而项目资源的有限性及投入产出比不确定性等问题,要求我们必须制定详实周密的计划,循序渐进的去推动方案落地,发挥出设计的最大价值。这期间我们完成了以下的工作:

图例:工作模型金字塔

首先我们从金字塔最底层的工作开始向上回灌,由于长时间的迭代和功能上新,APP系统内的视觉系统错乱不堪,导致各个模块之间缺少视觉关联,在没有严格规范的约束下,产品视觉复杂度逐渐‘不可控’,不光影响了整个产品的品牌识别,也对我们内部维护和设计开发成本造成了不必要的浪费。我们需要在产品的基底就解决掉这一问题,于是我们对线上的样式进行收缩并产出规范,规范的用意不只是对所有视觉元素进行约束,而是试图优化设计落地的整个链条和流程。例如,我们对产品中所有弹窗状态进行梳理,并配置成开发可随时调配的组件规则,同步节省了设计平铺和开发的时间成本,整体效率提升50%,释放出宝贵的人力资源攻克更困难的任务目标。

图例:弹窗规范

我们借由本次改版,制定了组件规范,动效规范,适配规范,文件管理规范,输出物规范以及流程规范,从基底严格控制样式的复杂度,保证了上层显示的一致性和稳定性,并针对效率优先的工具产品提炼出相应的设计准则,保证用户对内容的聚焦和高效的流程体验。同时根据产品的用户群属性,我们对产品内的品牌符号进行了更替,替换掉了‘低龄感‘的卡通形象,制定新形象并规范使用场景,以提升不同层次用户对产品的品牌认知。

图例:视觉系统

图例:去低龄化

通过对战略目标的拆解,得出设计语义和原则:简洁,易懂,高效。并向下平铺产出。我们从色彩,图形,布局,动效这四个维度进行融合,改版小组进行了目标一致的组内风格稿集体设计,通过快速发散,收敛,总结,明确新方向,再发现,收敛,总结的循环探索模式,确认了最终的v7.0风格指引稿。以此为基础扩展出本次改版的核心思路。

 

3.1 色彩

颜色作为用户接触产品的第一视觉信息,其传递效率最快,决定了用户对于产品第一感受与记忆。搜索APP的产品使命是建立信息和用户之间的快速链接,我们认为内容触达的效率是最重要的,而产品的定位也不是迎合单一群体,在用户构成上更为复杂,所以我们的风格基调需要更强的普适性,对这些问题我们在新的配色方案中做了重新思考:我们选取一对“互补色邻近对”四种颜色组成的配色,两两之间既有邻近色的和谐,也有对比色的色差,两对互补色之间的夹角越大,色彩对比越强烈。40度夹角既保证了明显的色相差异,又避免了过于强烈的视觉冲击而造成的视觉疲劳。以此为色彩原则,团队成员对构成整个产品的各主要操作组件(列表,弹窗,toast,缺省页,按钮,列表,文字等)进行了配色尝试,最终确定新版配色方案:摒弃原有过度娱乐化的多彩配色体系,同时,解决旧版中由于过于强调色彩表现所带来的视觉干扰,回归为内容本身而设计。新版色彩体系,通过在UI主色橙色中引入相对沉稳正式的深蓝色作为主辅色,向用户传递轻松获取专业服务&信息的配色系统。

图例:配色方案

 

3.2 图形

在产品使用过程中,图标是最先触达用户的图形信息,也是最能直观表达产品风格与设计态度的元素。我们把图标设计的要点(如表意,效率,秩序,美等)代入整体风格的要求中进行思考,提出了图标系统应该满足的几大核心:加强识别度,权衡视觉美感与用户基础认知,迁移用户在实体世界的客观认知(固有概念强化,模糊概念具象化,状态传递细节化,切图尺寸规范化)。基于以上理解,对于整体app的绝大部分icon进行了重绘,依据现有产品体量与未来模块扩展计划,重新设计图标尺寸规则,建立底层秩序感框架。

图例:图标识别性

 

3.3 布局

对布局的核心要求是信息的传达效率。根据这一目标向下拆解,对内容体系进行归类统一,解决无序性、低效性。为了保证既定的布局思路在整体app改版过程中的延续,我们设计了由数个特定间距组成的软栅格系统。也就是我们所有元素之间的距离尽量设定为8pt的倍数,以此来达到高质量,可编程的,且更为灵活的布局方式,且多平台可适配。让所有尺寸遵循统一规则,界面的节奏会更加统一,且大大降低开发和后期调整的成本。

图例:栅格系统

 

3.4 动效

继续拆解到动效这一环,我们希望产品内体验是顺滑流畅的,因此我们对新开窗口,反馈,效果点击,转场等需要用户等待或过渡的细节进行了分类梳理。将简洁、高效、可靠和亲和的关键词融入至新的动效方案设计当中。不光在细节体验上,我们希望通过动态设计能按照产品的意图正确引导用户的注意力,在产品内起到正向作用。例如首页到信息流的过渡,我们通过tab图标的状态来提示用户暗含的操作,并借以效果过渡来辅助用户加强对这两个状态的理解。

图例:动态引导

同时,在新方案的设计过程中考虑两端的差异(iOS 与 安卓),通过后台用户机型分布数据,为安卓提供了简化版动效设计解决方案,保证流畅的使用体验。在执行环节,为保证新的动效设计原则能够很好的贯穿在v7.0版本以及后续版本的设计中,在进行全新动效设计的同时,输出了搜索app v7.0动效设计指导文档。

图例:动效减配方案

 

四. 团队协作

如何组织协调一组10人左右的设计团队在短时间内完成改版任务?虽然制定设计策略很重要,但是团队内的设计目标管理和执行层的输出把控也同样重要。除此之外,对于搜索APP这种体量的产品,我们提出的任何一个优化建议在上线前都需要经过层层审核和验证,才能最终落地。这需要跨部门的通力协作,我们需要协调请求外部的力量支援,才能打完攻坚战的最后一仗。我们完成了两部分工作:

4.1 对内管理:设计沟通并制定标准

建立组件库并根据改版进度时时更新,除了样式上通过规范收缩,在风格上也要进行严格把控,设计团队在输出系统性页面时,由主设计师先负责产出各模块明确的风格框架,改版小组成员以此为基准,可以快速在统一的设计框架内扩展输出。

4.2 对外协调:申请协调产品、技术、测试资源

在改版过程中,要做到真正的协同业务增值价值,需要各部门间的支撑。例如,在指定设计策略前我们需要了解业务逻辑,商业模式,从而落实到产品框架中去。我们组织了多次产品评审,将业务上的核心诉求逐步进行渗透,进而剥离分拆具体设计目标,同时,为了后期有效的进行体验验证,我们会提一些数据验证侧的需求给产品同学。在开发环节为了对接效率提升,开发组的同学为我们制定了可视化的走查工具。

 

五. 上线验证

根据产品效果评估,V7.0版本相比上线前版本,整体效果正向。

  1. 数据方面:用户核心监测指标上,安卓全渠道新用户次留和7留均有上涨,公开市场和商店渠道7留上涨明显。
  2. 用户行为方面:新用户在产品核心功能上的有效点击行为均有大幅提升。
  3. 用户满意度方面:从改版满意度调查中给出的结论来看,认为新版更优的用户占比58%,用户忠诚度达到73%,整体满意度达到预期。

图例:上线效果

 

写在最后

经过大家的通力协作,本次改版历时两个月,改版小组经历了问题定位,方案探索,跨部门协调,灰度测试,反馈验证,最终才能与大家见面。通过本次改版,我们制定了通用规范,优化了设计协作和落地的流程,以效率为前提引入了新的合作模式,为后续的体验升级铺垫了基础设施。同时我们对用户声音进行了采集和归纳分析,储备了一些APP内新场景的需求痛点以备后续更精彩的探索。说到这里,我们向您发出诚挚的邀请,新版搜索APP诚邀您的体验并提出宝贵意见,我们会为您的每一个细节体验保驾护航,有好的建议别忘了告诉我们哦~~~最后感谢您的阅读。

  • 宝珠

 

联系微信baozhuYan投稿/加入翻译组~

发表评论

电子邮件地址不会被公开。