清晰的仪表板设计,用于完善的广告管理系统

Appodeal与复杂且快速增长的移动应用货币化市场合作。 因此,我们的设计团队在接口解决方案方面没有太多自由,功能要求非常严格,并且在不断变化。





Appodeal仪表板是用于在应用程序中处理广告的单个工具栏,它提供了方便的分析机制,您可以通过它快速进行直接付款。 在2018年3月,仪表板在新设计中补充了两个重要工具:细分(用于分隔受众的各个部分)和展示位置(用于确定在移动应用程序中显示广告的位置)。 10月,我们启动了需求控制中心(DCC),该中心可让您管理网络并获得对瀑布的控制。 我们决定分享我们在仪表板设计上的经验,并讨论其开发阶段。

为什么我们需要一个新的仪表板?


2015年11月,随着功能的发展,仪表板不断壮大,不再适合原始页面布局。 链接和小节使用户感到困惑,导航变得不舒服,我不得不为新的小节寻找空间。 此外,服务器团队的其他功能也需要引起注意。 因此,旧的设计并不通用,不适合扩展任务。


2015年发生了什么

大约在同一时间,该公司的网站上开始出现类似的问题,但是我们不会深入探讨这个故事的细节。

新的仪表板应该是什么?


我们没有尝试获得另一个漂亮的界面-为我们的长期发展奠定基础很重要。 设计师和设计师对仪表板的各个部分进行了详细的分析,并制定了一些将成为工作起点的任务:
  • 公司风格的明亮设计
  • 未来几年的可扩展性
  • 自适应布局方法
  • 可以转换为复杂元素的简单元素
  • 完全拒绝光栅图形
  • 将典型的UI用于类似的工具
  • 与开发人员轻松互动


在新设计中,旧有的子节菜单过载,并且易于通过子节进行导航的示例:



请注意左侧的巨大页脚,该页脚与公司的着陆页的设计产生了共鸣,并在视觉上使仪表板空间超载。

有什么困难?


开发和引入新设计的过程并非万无一失。 起初,我们觉得几个月后可行的事情扩展到四分之一。

1.无法立即重新布置所有功能。 与产品总监,设计师和开发人员一起工作涉及从头开始创建许多页面。

2.我们需要一种易于识别但又易于使用的设计风格,以便在过渡期间使用两种版本的界面的用户都不会遇到很大的困难。

3.有必要准备一套通用的基本“砖”,以便即使几年后仍可以从中构建接口。 这适用于设计元素和代码。

4.公司的企业形象继续形成,我们不确定其完整性。 因此,对于我们而言,创造一种灵活的设计非常重要,因为该设计可以快速进行并且将来无需花费大量的人工成本。

5.自适应布局以及因此即使在智能手机屏幕上所有功能的可用性也极大地影响了页面的模块化网格以及整个设计。


不同屏幕上的同一页面

团队


在对材料进行可视化展示后,再加上初始分析和设计草图的结果,我们得到了全面的解决方案,可以在要求的框架内实施思想。 同时,我们还不知道还有多少工作要做,因此我们根据现有章节对设计进行了评估。 经常发生的是,今天我计划将站点菜单分为三个部分,明天则在其中每个部分中显示三个部分。 由于专职开发人员非常忙,并且我们需要使用先进技术对新设计进行布局,因此我们迅速找到了一名布局设计师,该设计师成为了设计师与开发人员之间的纽带。 此外,谈论适应性,较小的更改和类型块变得更加容易,因为与使用设计工具的帮助相比,此类元素在代码中更容易,更快且更直观地重新创建。

结果如何?




新设计的仪表板屏幕

在两年多的时间里,我们创建并重新设计了90多种布局和仪表板页面的变体。 在某些时候,决策变得更加容易,因为在设计UI时,我们开始考虑将标准格式,带按钮的块,开关,选项卡的组合,甚至有时整合到整个页面并变成新系统屏幕的整个页面进行思考。
我们正朝着建立一个完整的设计系统的方向发展,因此,整个设计最初是以大量相关html页面列表的形式存在的,且脚本最少。 这样的部分作为参考可供所有开发人员使用,很容易找到并显示其中的必要元素。

因此,例如,在开发标准表格页面时,根本不再需要设计器。 开发人员在git中使用代码,并考虑了自适应布局,从而实现了几乎100%的设计一致性。

现在准备中的是完整的UI仪表板的完整集,形式为Figma中的文件,这将帮助产品主管和开发人员进行初始原型制作-您可以查看对象,符号或组的所有属性而无需提供源代码。


对于上下文菜单和情境图标,我们使用Fontawesome

意见反馈


对于界面设计师来说,最重要的是用户反馈。 部署新的Campaigns界面(这是过时的设计中的倒数第二个怪物),我们实施了一个系统,用于收集新功能的快速评论和评分。 在大多数情况下,我们获得了很高的评价,我们为自己做出了一些主要结论:首先,我们确信所选方向和工作方案的正确性; 其次,几个月后,我们根据反馈结果最终确定了结果接口,并使其更加方便。 第三,他们意识到即使对于如此高度专业的界面,测试和反馈也可以带来许多新想法。

接下来是什么


现在,我们正在按照市场,趋势和竞争对手的发展策略,为公司开发一种新的视觉风格。 在这种情况下,我对仪表板完全保持冷静,因为我们不必手动重新绘制设计中的单个像素。 代码中的所有内容都可以轻松一致地更新,以匹配公司的品牌手册,其中包括新的颜色和字体耳机。

很快,将有一个更新的移动应用程序,该应用程序允许您以更原始的形式为便携式设备执行大多数仪表板任务。 我们的网站和博客正在逐渐变化,转向新的渐进平台Divi Builder和Ghost.io。 我们正在尝试新的开发方法,因此今年我们将改用Figma并在Jira中使用看板来放弃经典的设计过程方法。

结果,我们设法为所有接口的设计创建了一个简单方便的基础,同时保留了Appodeal品牌固有的能量和信心的独特功能。 我希望这种经验可以帮助公司的设计师和开发人员朝正确的方向发展,并为用户带来更多的移动广告收入。

由Appodeal设计团队负责人Pavel Savinsky发布。

Source: https://habr.com/ru/post/zh-CN426865/


All Articles