当B端符合C端时:移动端配置平台设计思路
浏览:421 时间:2020-9-1

移动终端配置平台的设置不仅保证了B端产品的逻辑清晰度和流畅操作,而且还注重C端产品的控制和呈现。

随着移动技术的快速发展和移动产品用户数量的不断增加,移动产品市场的竞争日趋激烈。在如此大的环境下,许多用于配置移动产品的B端工具或内容产品诞生了。 。

在设计此类产品的过程中,不仅B端产品的逻辑必须清晰流畅,而且C端产品的控制和呈现也必须如此。这种B端后端产品将超越普通的B端或C端。产品的刻板印象成为一种相对特殊的存在。

产品功能

配置产品本身是一种相对常见的B端产品,但当配置目标是C端移动产品时,它也使这些产品变得特别。这些产品的用户不是C端普通公众用户,而是提供给B型企业客户的操作或开发。在该平台上,对移动终端进行编辑,配置或管理,以便在一定程度上执行移动终端产品。控制。

正是由于这种“可控性”,两种产品之间的相互关系才更为重要,因此在设计过程中,除了确保B和C两端的业务逻辑成为两个独立的产品。用户体验,还要特别注意两个产品之间的互动。如何增强B端平台操作对移动终端的可控性,让用户的一系列操作成功响应反馈,减少使用过程中的不可预测性,减少“挫败感”,以及如何平衡两者的产品结束。差异造成的差异已成为主要的设计目标。

这种类型的B侧配置产品通常用于内容类型和工具类型。内容类型主要用于在B侧编辑或制作内容,其被呈现给用户以供移动终端阅读和观看,并且B端还管理诸如每个人的内容。非常熟悉微信公众平台。

微信公共平台,内容编辑和操作平台

工具类型一般设置为设置移动产品的一些功能,最后移动终端显示功能,如推送,腾讯鸽子等推送设置平台,其他交互设计人员更熟悉墨刀等原型工具,Marvel等。也可以归类为此类产品。

墨水刀,原型制作工具,网络原型,在手机/平板电脑上查看原型

从以上描述可以看出,由于移动终端产品的控制,移动终端的B侧配置平台更加复杂。在设计此类产品时需要注意哪些要点?是否有可以巡逻的“惯例”?

最近,网易负责智能信息流和流量实现平台,帮助企业用户快速构建自己的信息流产品。材料本身涵盖了B端内容配置平台,移动终端DemoAPP,SDK等多种产品,其中内容配置平台是典型的移动终端配置平台,企业用户实现内容,在平台上实现移动终端的功能甚至风格控制,从而帮助他们完成移动信息产品的开发和实施。结合网易的材料设计实践,我总结了以下设计点进行研究和探索。

1.注意预览

在我们日常工作中使用的各种工具类产品中,经常使用预览功能,这是提供可控性的最简单直接的设计方法。预览允许用户在特定操作后查看目标结果,这不仅提高了操作效率,还为用户提供了非常直接和直观的控制。

预览的设计需要注意几个关键点。首先,预览需要及时。我们提供了一个预览功能,让用户可以直接看到效果,但也是因为这种直观性,用户还会看到预览中看到的所有内容都是最终的渲染效果,也就是说,如果出现问题预览,将导致用户怀疑最终结果。因此,如果预览在操作后不够及时,如预览加载时间过长,或先决条件(如点击保存按钮)将生效,用户会认为真正的功能实现效果甚至表现有问题。

腾讯移动推送平台在填写标题和内容时,右侧的预览视图没有时间差异和时间变化,给用户带来真实直观的控制感

此外,B端Web界面上的C侧手机界面的预览允许用户看到实现效果,但无论模拟如何,移动终端和Web终端毕竟都是不同的终端环境。执行后,无法显示最逼真的效果。因此,最好为用户提供可在手机上预览的条目,允许用户在真实设备和环境下查看最终显示效果。

特别是,它涉及文本内容的显示。以网易为例。用户可以在B端平台上编辑文章并将其分发到APP频道。最终的显示效果是什么?字体大小和行间距是否与手机阅读习惯相匹配,文章地图是否显示清晰等,只能在手机上查看阅读效果并查找相关问题,以便纠正及时纠正。

网易有一个材料,并提供DemoApp,以便用户可以在手机上预览最逼真的显示器

2.所见即所得

预览功能为建立可控感提供了基础,但这还不够。在B和C两端的相互作用过程中,考虑到B侧的操作效率和C侧的视觉显示,WYSIWYG设计方法成为最佳选择。

所见即所得的设计理念在许多产品中很常见,一般有三种。

1.工作台本身涵盖预览功能,拖放组件完成内容布局,调整参数完成配置,还提供更逼真的预览界面查看效果,很多工具型产品使用此模式。该模式中的每个步骤的操作需要由用户手动操作。它在完全控制状态下也很直观,但效率不足。

喷墨原型工具,工作台本身就是一个预览视图。完成界面和原型设计后,您还可以单击右上角的“运行”按钮查看更纯粹的界面预览

2.工作台相对独立于预览视图,一些文本编辑器和配置工具使用此模式。在这种模式下,编辑效率大大提高,直观性也很好。

在Markdown编辑器的列上下,WYSIWYG模式使编辑效率大大提高

推送平台,推送信息的配置和移动信息的预览分别显示,预览视图无法操作

3.工作台和预览视图相对独立,但可以操作预览视图以协助部分编辑工作。这种模式更多的是替代,但可能会影响操作的一致性。

微信公众平台,在预览视图中完成添加菜单的操作,其余配置以正确的形式完成

这三种模型各有优缺点,但当它们被实施到产品中时,必须结合具体的业务场景仔细选择。例如,当网易在B端内容管理平台上进行资料管理操作时,移动终端产品是根据自己的业务需求和移动端规格设计的,不允许导航栏和标签栏组件用户编辑;此外,B侧只能配置通道选项卡的名称和类型,状态和其他参数,并且没有用户需要添加的组件或元素。因此,虽然第一种模式是可控的,但它不符合产品的实际情况。

后两种模式在移动终端配置产品设计中更为常见。经过多次尝试,我们在设计开始时采用了第三种模式,这样用户不仅可以完成新频道,还可以在预览视图中切换频道顺序。该操作也可以在随后的表格填写部分中完成,以实现易操作性和预览直观性的组合。

必须在预览视图中完成初始交互计划,新渠道和渠道排序

然而,在随后的经验和测试中,发现虽然在移动电话的预览视图中几乎没有操作,但这种所谓的参与感仍然会破坏用户管理频道的连续性,并且用户甚至预览。在视图操作中,控制感不超过独立预览。相反,切换频道的操作只能在面积有限的预览视图中进行,这给用户带来了不便(用户无法快速定位)转到目标频道。所以最后,我们仍然使用第二种模式,所有管理操作,如创建,配置和调整通道的位置都是通过复杂的形式完成的。预览视图仅提供预览功能,然后通过增强反馈来增强所见即所得。现实主义和可控性。

最终的互动计划,所有频道管理都是通过复杂的形式完成的,预览视图仅供预览使用

3.加强反馈

系统对操作的反馈和响应是产品设计的基本要求。在B端配置产品中,除了产品自身业务功能的操作反馈外,配置交互中的反馈更为重要。 。让用户清楚地认识到我在B端平台上执行的每个配置操作在影响移动界面和内容方面都非常有效。

继续以材料为例。在完成每个信道的配置之后,确定移动终端接口有效。可以在APP上查看最新的频道内容(编辑过程中的预览视图可以看到更改但不生效)。 “发布”是一个重要的操作节点。发布成功。配置平台和移动终端之间的交互是成功的。因此,页面顶部采用了较重的状态栏样式。状态栏在发布之前和之后显着变化。用户反馈释放操作成功,同时,通过一些文本描述,提醒用户B侧操作已经结束,移动终端可以查看配置效果。

发布前后状态栏发生重大变化,允许用户在此时更清晰地定义场景状态,避免混淆

再举一个例子,当用户在B端平台上切换表格进行编辑时,移动预览界面中的频道将自动切换而不点击和点击;此外,单击移动预览界面中的频道也是相同的。可以控制表格中频道的切换。这开辟了配置形式和预览视图之间反馈的设计,不仅提高了用户在编辑频道过程中的效率,而且还改善了B端平台与移动终端之间的连接。增强控制感。

网易在配置表格和预览视图中改进了频道的联系和反馈

4.平衡内容差异

作为内容产品,除了移动终端的配置管理之外,还有一部分重要功能是内容的呈现。由于各种平台,操作系统,交互方法等,在PC侧和移动侧查看相同的内容是两种完全不同的场景和体验。如何平衡内容B的制作和移动端的阅读,减少跨平台对手机阅读体验的影响问题,还需要特别注意产品设计。

有许多方法可以平衡内容的差异。在微信公众平台的素材库页面上,旧版本由于其自身文本编辑器的各种问题而导致各种第三方公共号码布局工具和插件受欢迎。在最新版本中,您可以看到To WeChat不断优化编辑器,不仅提供缩进,分段前置距离,分段后退距离,字间距,模板等功能,以满足移动终端文章布局的需要,一些功能如字间距只提供更适合手机。候选值的结束,通过这些方法为用户提供了更适合移动阅读的B端文本编辑器。

微信公共平台,适合移动阅读的文本编辑器

在材料中,B面作为内容配置平台,内容主要来自两部分。其中一部分是材料提供的内容库(例如每个产品提供的高质量内容,如网易和云课堂),其他用户也可以编辑原始内容发布到您自己的应用程序。其中,内容库有不同的来源,不同的源文本样式不同。即使有些人在移动显示器上进行了优化,优化方案也不尽相同。因此,为了控制移动终端的渲染效果,增强产品的整体视觉均匀性和阅读体验,我们对不同来源的内容采用统一规范的排版规则,并通过连续测试,不影响基本段落风格的原文,保证您在手机上阅读的品质体验。

写在最后

以上是我在项目实践中进行的一些问题和方法研究。实际上,很多时候,移动终端的B侧配置平台没有单独出现,还提供了C端和移动端产品。当产品范围涵盖产品的两端时,除了上述要点之外,还有许多其他细节需要注意(例如在两端保持产品的视觉统一)。虽然这类产品B和C的两端相互独立但相互依赖,但设计也需要综合考虑,两种产品作为一个整体,以避免自卑。

作者:网易科学数据中心互动设计师刘渊。

本文来自大家都是产品经理合作媒体@网易UEDC,作者@刘媛

该地图来自Unsplash,基于CC0协议