​收藏保存

- Web

03-18-2020 Wed (Working in Progress)

故事缘起于一次观影体验:

内容出自视频分享类平台 Vimeo。

质量可谓上陈。

​让看完视频的我,

下意识进行 “收藏” 操作。

然而——

操作过程的劣质交互,却让综合用户体验大打折扣:

​🤔

究其细节,Vimeo 的疏漏,

具体体现在哪些方面呢?

 

2.

​子集多寡未明晰

其次,未考虑多子集呈现效果问题:

如右图所示,

form 中一次性所能呈现的 group(分组)数量,是有上限的:2 个。

当 form 中 group 数量达到上限的 2 个时,

用户若再新建 group,新建的 group 便会覆盖在之前已建立的 group 位置。

这便会导致如下问题:

  • 用户无法确知 group 总数,以及剩余未被展示的 group 名称;

  • 用户无法 uncheck 未展示的已选 group;

  • 单位面积所呈现的信息量极为有限,​即有效信息密度低,版面无用白空间过多,造成视觉浪费。​

新建的 “Test 2” 覆盖了之前的 “Test 1”

group 一次性只能显示 2 个

form height 固定,且 form 内部 list 数量有上限,

因此,form 内部便不会有 list 数量超出 form height 的情况,

​故而 form 内部也不会出现纵向滚动条。

版面无用留白多

form height 固定

list 数量上限为 2

​有效信息密度低

版面无用留白过多

1.

​边界情况欠考虑

首先,组件在不同状态下的呈现效果问题:

如右图所示,

当 “新建 Group ” button 处于 active 状态时,

其 border size 变大,

但容纳该 button 的 form 并未随之变大,

因而,变大的 button 部分,

被挤出了 form 的可视区域,

​最终导致图中 button border 溢出的问题。

​button - hover

​button - active

button border 溢出

作为内容分享类平台,“收藏” 功能的高权重不言而喻,可比肩 “上传” 与 “分享” 。

高权重的功能,自然需重点设计,以保证用户体验的流畅、便捷,与舒适。

​然而,这样的设计疏漏,所营造的第一印象,并不专业,有失体面。

大概率在错失新用户的同时,也不免让老用户粉转路人。

综合的用户体验,若仅依托于内容的优质,却不在操作路径上推敲打磨,

如此败絮其外,即使金玉其内,也无人问津。

第三方平台的粗劣设计​,对得起平台上那些优质的内容生产者吗?

​那么其他平台的 “收藏” 设计,又各有何功过优劣呢?

以下,我们来总结对比关于 “收藏” 功能的交互组件使用情况,以及用户操作路径。

​平台涵盖:

  • 视频分享类平台:YouTube,Netflix,bliblii;

  • 图片分享类平台:Behance, Dribbble,Unsplash;

  • 文章分享类平台:Medium,知乎,简书,少数派,人人都是产品经理;

  • 以及其他垂直内容类平台:下厨房。

 

同为视频分享类平台,

YouTube 的 “收藏” 功能设计,

便在以上两个细节上,优于 Vimeo。

 
 

blibli 同样可圈可点,但仍有些细节待优化。

​与 YouTube 类似,首页便为用户提供 “Save for Later” 的快捷入口,以节省其进入细节页的操作路径。

当用户新建 group 后,其新建的 group 默认状态为 “选中”,节省了用户的操作路径。

Behance,作为 Adobe 旗下的灵感分享类平台,旨在 “展示和发现创意作品”。

其在交互的细节处理上,​有很多值得借鉴的地方。

 
 

Dribbble,同为设计师的灵感分享类平台,除去以上的基础功能外,

还支持 form 内部搜索,微交互动效也对得起以动效著称的平台调性。

 
 

Unsplash,作为摄影分享类平台,其 form 的 UI 设计,干净大气。

​微交互动效,同 Dribbble 部分契合。

Medium,文章分享类平台,作为社交新闻的一个示例,由业余和专业人士出版物混合而成。

​不同于影像类平台,其收藏操作更简洁直观。

 

人人都是产品经理,产品经理、产品爱好者的文章类分享平台。

主要以业界资讯动态、产品的交互设计运营等相关的文章为主。

 

知乎,网络问答社区,以文本类信息为主。

其交互设计较 PM 而言,细节处更为精良。

 

文章创作类平台,然而内容质量参差不齐。

这里仅对交互进行分析,作为劣质设计的典范,简书可谓功不可没。

​👀

反例的教导性意义

让我们有了明辨丑的眼睛

 

少数派,文章分享类平台。

致力于更好地运用数字产品或科学方法,

帮助用户提升工作效率和生活品质。

 

下厨房,侧重于喜爱烹饪的年轻吃货,主打食谱分享、厨艺切磋的功能。

​Web 端使用体验远逊色于 App 移动端,这里仅对 Web 做分析,感兴趣的食友,可自行对比 App。

Netflix LOGO.png

Netflix,影视平台,不支持 UGC。

4k 无广告观影体验对得起 $15.99 月费,交互细节可谓影视界翘楚。

这里仅对其收藏功能做分析,感兴趣的视友可自行体验。

可能 明天 会 继续 写 吧

 
 

🥂

恭喜 见底

1 more

​剧终

© 2020 Rita Lei 

🌝禁转   🌚转究   🌓商合 13880302956

Rita Lei 无生无 LOGO Copy.png

Rita Lei

UX  &  UI