iPhone

抖音搜索结果Redesign

背景

此次Redesign针对的是字节跳动22届校招笔试,题目如下:

”针对抖音客户端进行设计Redesign,你可以挑选某个功能、某些场景或某些用户使用流程进行分析和重新设计,最终呈现一套完整的改版设计方案。“

经过考虑,我选择重新设计抖音的搜索结果页面,想要对搜索内容的呈现进行改化,使之融合进已有的设计和交互体系,而不是游离于抖音客户端主流交互程序之外。

Redesign主要宗旨是“用户体验更好”。

时间

8小时

​职责

交互设计,视觉设计

项目类型

笔试

最终成品概略

ezgif-3-588d28569df3.gif
Frame 16.png
Frame 22.png

调查与分析

在此之前,我一直也是抖音客户端的用户,但是我的基本交互过程主要限制在主页浏览。我经常阅览但并不经常制作抖音视频(经调查属于较广泛人群使用习惯)。由于时间限制,我的调查仅限于网上搜索和阅读,并且基于我个人使用抖音的感受。我个人对于抖音交互体验的喜爱有以下几点:

  1. 交互手势使用便利(比如上滑--下一条,双击--喜欢,右滑--关注浏览)。

  2. 页面简洁,视频最大化利用。

  3. ​设计系统优良,主打简约风格。

​借此机会,我想要更加深入的了解抖音客户端,于是尝试了客户端里的其他用户体验。在此过程中,我发现抖音的搜索界面和微博的非常类似,搜索结果类别复杂且数量、形式繁多。另外,搜索结果的页面与抖音主页浏览的设计体系差别较大。具体页面如下:

Research.png

在我将页面简化后不难发现,搜索结果页面的主要问题存在于:

  1. 搜索分类复杂,分类中又有更加细致的分类,信息架构不明确。

  2. 主要内容均以卡片式呈现,但卡片类型过多、排版结构混乱。

  3. ​字体的使用不规范,字体的大小、颜色并不一致,容易混淆。

Detailed.png

粗略看过后发现,搜索内容一共可分为7种不同板块,且每种板块中字体、图片、排版(间距)的运用规律各不相同。这种繁杂、冗重的呈现方式与抖音的简洁、顺滑用户体验大相径庭。于是,我决定将这次redesign的目标定为改善搜索内容界面的呈现,主要针对的用户群体是像我这样经常使用抖音客户端但并不深入了解的用户。

设计与改良

方案1

设计一至二个通用的板块卡片模版

第一步,明确板块优先级别。

 

用户为何会使用搜索功能?在这里,由于时间限制,我根据自己的使用经验与知识判断抖音用户使用搜索功能的主要目的是搜索感兴趣的视频与商品(相对具体)或者搜索人物与话题/音乐(明星/网红/具体用户)。如果有更多时间,我将会通过调查抖音的搜索记录大数据进行判断。

 

​第二步,对现存视频模版进行分析、比对。

vs.png

​经过反复权衡后,我决定使用动态模版(非展开)形式来呈现视频搜索结果。这样,我们可以实现几大目的:

  1. 较多搜索结果展示,尽快达成搜索目的。

  2. 优先展示视频,文字辅助。

  3. ​重新排版搜索结果使之更简洁、美观。

  4. ​视频内容尽可能大、清晰、准确。

​第三步,视频模版详细设计与改进。

Frame 11.png
Frame 13.png
Frame 15.png

方案2

改善搜索结果分类方式

第一步,搜索内容的呈现与优先级别。

 

就目前设计来看,搜索结果一共有7+种分类,其中的一些分类里还有更细致的分类。Redesign前,每个分类的结果展示设计UI都有所差异,方案一通过整合解决了其中的一大分类——视频与商品。经分析发现,还有另一大类别人物与话题/音乐占比较重。在方案二中,我将着手于Redesign这类搜索结果并改善结果的分类方式。

​第二步,话题/人物Redesign。

Frame 14 (1).png

第三步,整合设计与最终UX呈现。

在之前的调查中,我发现抖音受欢迎的一大原因就是其简单易懂的人机交互体验与简洁的UI。其中,主浏览页面的上滑、右滑体验则是最大亮点。搜索结果页面也支持这种交互体验,但是并没有遵循同样的设计系统。

Frame 16.png
Frame 22.png

成果展示

ezgif-3-588d28569df3.gif

Personalized wellbeing reminder app designed for Working From Home. | Passion group project

shadow.png
shadow.png
iPhone X Flying 2.png
iPhone X Flying 1.png

RemindMe

MORE PROJECTS

Google Library

An AR-supported app designed for accessible library reservations. | Google design exercise

shadow.png
main.png

Google AR Internship

Researched, designed, and prototyped AR experiences for immersive wearable products.

google ar.png