最近对于编辑功能做了一个简单的产品调研,然后惊讶地发现,现在市面上流行的编辑功能样式尽然有十几种单纯从数量上来看,造成编辑样式如此多的原因,在于所对应的业务的多样性。但如果跳出业务层面,仅从产品层面来 ...
最近对于编辑功能做了一个简单的产品调研,然后惊讶地发现, 现在市面上流行的编辑功能样式尽然有十几种 单纯从数量上来看,造成编辑样式如此多的原因,在于所对应的业务的多样性。 但如果跳出业务层面,仅从产品层面来看待这些编辑功能 “在这些编辑功能背后,是否存在着共性的设计呢?” 或许我们可以从以下三个方面进行一番探索:
一、如何触发用户在使用某款产品时,最为常见的页面状态为“查看态” 与这一常规状态相比,“编辑态”则是一种非常规状态 而这一非常规状态的触发,则是需要一个前置的交互操作的。 作为编辑功能的一部分,这一交互操作本身与页面内容并没有太多的逻辑关联性 所以在实际使用的过程中,很容易作为干扰项,影响用户当前的阅读进度。 那么为给予用户更好的使用体验,应该如何设计这一前置的交互操作呢? “明确阅读体验与编辑需求的优先级” “查看态”与“编辑态”并不是一对相互对立的状态,相反,这两种状态是可以共存的,而通过需求优先级的排序,可以帮助我们确定触发操作的交互比重,从而保证当前用户阅读需求与编辑需求的平衡。 1. hover态常规状态下,页面只是单纯的文案展示 当鼠标hover到内容上方后,对应的内容尾部就会显示“编辑”按钮,点击后 当前字段就可切换至可编辑状态。 显然,对于hover态的触发方式来说 其最大的优点就在于:“将选择权交还给用户” 用户可以根据自己的需求,主动选择按钮的显隐 这样就可以极大程度的减少前置交互操作,对于用户阅读体验的影响。 hover态的缺点:“触发方式不易发现,导致编辑功能被忽略” hover态轻量级的触发方式,将选择权交还给了用户 但具体的触发过程,则需要用户将鼠标移动到具体内容上 并且对于这一操作,页面上也不会有对应的提示 这样很容易就会导致,编辑功能被完全遗忘。 意见与建议:
2. 外显态常规状态下,编辑按钮直接外显,与页面内容同级,点击按钮后,可进入到编辑状态中,这种外显态的触发方式,其优缺点也十分的明显。 优点:减少用户使用路径 按钮外显,用户不需要进行鼠标hover,直接点击编辑按钮,从而进入到编辑态,这样使用户更容易触达编辑态,整个流程简洁高效。 缺点:干扰阅读进度,增加用户阅读理解成本 编辑按钮与页面内容,本身并不存在多少的逻辑关系,编辑按钮对于用户“阅读”这一行为来说,就是一个干扰信息。 干扰信息的存在,就会徒增用户的阅读理解成本,干扰用户阅读进度。 意见与建议:
二、如何展示在选择了触发方式之后,点击对应按钮就可以切换至编辑状态,而这个编辑状态,应该如何展示呢? 1. 当前页面点击编辑按钮后,当前页面中对应的字段,就会自动切换到编辑状态 而这些可以在“当前页面”被编辑的内容,其自身也具有一些特点:
像知乎所设计的编辑模块,在当前页面进行的编辑,就是简单的文字输入修改 并且在编辑的过程中,不会产生新的级联编辑的可能 在我们日常使用中,最为常见的当前页面的编辑展现形式,就是excel表格的编辑 除非进行表格的新增,否则这个excel表格的编辑,都是在当前页面进行编辑 这种在当前页面进行编辑的形式,其最大的优点: “用户可以很方便地对于整体信息进行查看” 这样就可以保证整体编辑流程的连贯性 但这种页面内的编辑,由于所支持的编辑样式较少 这样就对于可编辑的范围进行了限制,不能给予用户更完善的编辑体验 意见与建议:
2. 弹窗/浮层点击编辑按钮后,编辑态的展现样式以弹窗/浮层的形式呈现,这种展现样式最大的特点,就是跳出了原有页面,以一个“中间态”的形式来展示所要编辑的信息,而这种“中间态”的展示,也造就了该样式的优点与缺点。 优点: 承载更多信息: 弹窗/浮层,相当于是在原有页面的基础上,开辟了一个新的空间,新空间所带来的信息增量,相较于原有页面的信息量,肯定是更多的,所以弹窗/浮层这种形式,可以承载更多的信息。 聚焦用户注意力: 点击按钮后,弹窗/浮层出现。在那一刻,用户所有的目光及注意力,会被强行聚焦在弹窗/浮层上。 支持较复杂的编辑功能: 页面内的编辑形式为了保持统一性,只能支持文本编辑等简单的编辑模式,而弹窗的展现形式,由于其空间的延展性以及内容的相对独立性,可以支持一些较复杂的编辑模式,如:附件上传、图片上传等。 缺点:给用户造成较为严重的割裂感 编辑态作为一种非常规状态,状态之间的切换,很容易就会给用户造成影响,而弹窗/浮层的展现样式,是在原有页面的基础上对于原有页面的跳出,突然出现在用户眼前,并且也不是用户所习惯的内容及状态,必然会与用户现有的使用状态产生矛盾,打破用户当前的状态,从而产生割裂感。 适合场景:
3. 新页面
但与提高的优点相对应的,弹窗/浮层所具有的缺点,也是被同比例的放大,无论是新增页面,还是页面的自刷新,对于用户阅读查看体验的影响,都是成倍增加的。 因为这种展现方式,不仅仅会强制打断用户当前的阅读进度,甚至还会将整个阅读过程切断,切断用户与之前页面的联系。 适用场景:
三、如何保存在编辑完成后,就需要对于所编辑的信息进行保存,现在市面上比较流行的保存方式有两种。 1. 失焦后,自动保存没有保存按钮,用户可以随意点击任何地方,只要当前编辑状态失焦,就会自动退出当前的编辑状态,同时刚才所编辑的内容,也会一并保存下来,这种保存方式的特点就是“轻量”,适合与上文提到的“hover态”配套使用。 适用场景:
2. 点击按钮后保存编辑完成之后,点击保存按钮,退出编辑态,并且保存当前所编辑的所有信息,这种保存方式相较于失焦保存就更为正式,用户需要点击固定的“保存”按钮后才能保存。 这种保存方式最大的特点就是“确定性”,用户可以明确的知道,在哪里可以进行信息的保存,并且这种方式与用户之间的交互感也更强,可以给予用户更好的结果反馈。 适用场景:
|
2022-05-12
2021-10-20
2022-04-28
2022-05-07
2022-05-10
回答
回答
回答
回答
回答
回答
0