极客时间已完结课程限时免费阅读

33 | 产品案例分析:Arts & Culture 的架构之美

33 | 产品案例分析:Arts & Culture 的架构之美-极客时间

33 | 产品案例分析:Arts & Culture 的架构之美

00:00 / 00:00
    1.0x
    • 2.0x
    • 1.5x
    • 1.25x
    • 1.0x
    • 0.75x
    • 0.5x
    网页全屏
    全屏
    00:00
    Arts & Culture 是一个云端的博物馆,链接了世界各地的实体博物馆,我们可以通过这个 App 观赏这些博物馆中的藏品。
    Google 通过自己强大的搜索能力、识别能力,还有知识图谱的构建能力,把这些博物馆艺术品非常工整地串在一起,也提供了与参观传统博物馆完全不同的体验。
    这个 App 中有很多细节点都给了我不少启发,我挑出其中的几个跟你分享。
    首页是 feeds 流,把 App 中各种形式的内容,快速地打到一个逻辑平面上。
    我们先进入浏览作品。在这里,我们能看到的是 Google 如何用知识图谱、用标签,以及整个搜索技术,把这样的内容体系撑起结构来。
    这里有各种各样的分类维度,比如,我们可以从艺术家的维度来看艺术品,或从艺术品材质的角度、艺术运动、历史事件等等。
    再往下,我们可以看到典藏,就是世界各地的博物馆。这个地方是以博物馆为线索来组织所有的内容。最下面是热门主题。这里就是我们熟悉的标签体系,各个维度是有交叉的。
    这几部分还蛮有意思的,上面是比较规整的标签类型,比如说艺术家,中间当然是最规整的,就是博物馆。下面是平铺出来的一堆标签摆在这里,各维度交叉,但同时它又是有意义的。
    它背后的东西是同一套,我们可以理解为是平面、散乱的一堆信息,Google 将它们各个维度的属性抽出来,形成逻辑结构。
    我们点击任何一个标签,进到的这个页面,都是做过抽取和标记的页面,我们可以理解成一个点击就是一次搜索。只不过不是我们平常的那种关键字搜索,而是基于知识图谱的条件搜索。
    在这里,我们也可以看到它背后的知识图谱支撑。比如我们能看到实体有相关的说明,还有实体属性,最重要的还是围绕这个实体的各种关系,当然,在 W3 的标准里,属性也是一种实体到值的关系,我们在这里说的关系主要还是实体之间的关系。
    如果知识图谱中的实体是点,那我们相当于可以在这个页面看到所有从这个点出发的边。比如我们可以看到 Arts & Culture,根据这个主题搜出来的其他的艺术品,那我们可以用这个线索去看这些艺术品。
    接下来我们在艺术家里面找到梵高,在这里面去看梵高的一些作品。这里面有两个筛选,一个是按年份筛选,通过创作时间来把这些内容串起来。这些属性应用很具体,交互和展示方式都具体化了,它并不是一个摆在那可以点的标签,而是说这有一个标签是哪一年,这有一个标签是艺术家。
    我们在做产品和技术设计的时候,有时候喜欢抽象。就是我们想把所有的属性都抽象为交互尽可能统一的东西,比如抽象为标签样式,点击筛选;但这么做会增加用户的理解成本,我们最好是可以用一些特别有指向性的概念标签拿出来做特定的设计。
    这里的年份就是一个例子,不是一堆年份的标签,而是一个时间轴,我们用这个时间轴来看这些画作的时候就会特别有年代感,比如说我们拖到最后这里,这幅麦田上的乌鸦,据说就是梵高在生前创作的最后一幅画,我们大概可以看到他创作风格的演化,以及看到他的创作生涯在哪一年。
    然后另一个筛选的是按色调,对谷歌来说,它需要用算法去了解一个艺术品,将它们加入到知识图谱中,那它需要取得这个艺术品的很多相关信息。
    有一些有可能是结构化的,比如说从某一个表格,或者从某一个网站上,他可以告诉你哪一个字段就代表它的年份,哪一个是代表它的作者等等。另外也会有很多的信息是非结构化的。那么 Google 就需要把非结构化的信息识别和抽取出来。
    这里的按色调筛选,其实就是 Google 集成了自己非常强大的图像识别的能力,从图片里面抽取出来的信息的一种。
    如果你用这个 App 的时间比较久的话,可能会发现,其实在各种图片分类中还是会有小错误,通过这些错误,我们能够更直观地理解背后的算法,另外也可以看到,Google 确实在用大量的算法驱动产品结构,我们目前也在做一些类似的事情,不得不赞叹 Google 真的非常厉害。
    我们再快速看几个有意思的交互细节。
    我们快速地定位到一个主题,这是梵高的一幅画。我们可以看到我们在浏览内容的时候,文字是一个一个卡片,在卡片翻动的同时,背景有缩放的效果,非常像有人在给你讲解,先看哪个局部,然后要关注什么,这是一个非常活泼的交互形式。
    然后我们再去看这个浏览作品里面的几种观赏方式。建议你自己下载了感受一下,有一个是 VR 观看。然后有一个类似 Google 街景,你可以在这个博物馆里面穿梭,有一个身临其境的感觉,还有一个 360 度视频,在观看视频的时候,我们可以看到全景视角,我之前看到过类似的交互,但在这个应用中,跟场景特别契合。
    另外还有一个很小的点,就是它的翻译功能,这个翻译功能做成悬浮的,你可以把他推到边缘。它在结构上是游离于整个信息架构之外的,但同时又可以跟内容结合得很好,这是一个很聪明很有意思的设计。
    分享给需要的人,Ta购买本课程,你将得18
    生成海报并分享

    赞 15

    提建议

    上一篇
    32 | 从受众规模、需求频率和强度出发:排定需求优先级的方法(上)
    下一篇
    34 | 价值曲线分析:排定需求优先级的方法(下)
    unpreview
     写留言

    精选留言(5)

    • 听天由己
      2018-02-03
      运用人工智能技术进行识别与分类,这些内容建立在足够多的数据上,更能发挥 AI 技术的优势。 Google 的信息识别能力令人叹服,最近还进一步降低了学习门槛,未来的人可能真的要学会和机器打交道了。
      共 1 条评论
      6
    • Dylan
      2018-07-19
      老师文章里有提到说要把标签在用一种用户可以接受的方式表达出来,比如做成一个筛选进度条,其实都是为了去方便用户使用。我觉得这是一个非常值得我去学习的思路。 此外,谷歌的ai技术非常牛,他最近出了一个自己画图,然后人工智能去猜图像的小程序,其背后用到的图像识别技术非常牛,你看这背后有多大的一个数据量才能够在前台有这样的好的提示
      4
    • 方薇
      2022-10-19 来自上海
      非常好
    • 方薇
      2022-10-19 来自上海
      非常好
    • 刘洋3
      2022-02-22
      超级棒的课程