新一期的交互案例分享来啦~
详细帮大家罗列交互项目一般要经历哪些设计阶段
今天，小编将为大家分享设计师Vetrick Wilsen的一个项目。他目前在一所私立大学学习商业信息系统研究课程，此外也兼职担任UI/UX设计师。在该案例研究中，Vetrick Wilsen将对Disney+应用程序的用户界面进行探索和重新设计。
设计背景
通过Playstore的评论进行初步研究后，Vet发现了用户在Disney+应用中经常反馈的几个问题，例如：
· 没有选项可以在流媒体时选定屏幕
· 没有设置影片旋转速度的选项
· 没有调整屏幕亮度的选项
· 没有熏香可以跳过介绍
· 没有放大字幕的选项
· 没有选项可以停止自动播放的预告片
......
这些问题大多出现在使用Disney+应用程序流媒体的节目中。
设计目标
· 获取新用户，并留下老用户更新订阅
· 提高用户对Disney+服务的满意度
· 扩大收入/增加应用程序的观众数量
研究目标：
· 了解用户在Disney+应用程序时的感受
· 了解用户订阅APP的动机
· 了解用户在使用Dsiney+时的痛点和预期
设计步骤
在整个案例设计中，Vet使用了以下设计工具：
· Figma
· Figjam
· Miro
· Google Meet
· Google Docs
· Google Spreadsheet用户角色 (Users Persona)
在对参与者进行采访后，下一步是创建一个用户角色。简单地说，用户角色是对用户的总结或分组。因此，通过它，我们可以更多的了解我们的用户。用户角色将包含或涵盖用户的行为、态度和目标，也包括用户的痛点。
User Persona
客户旅程图 (Customer Journey Map)
客户旅程图是用户与产品互动时的感受（用户体验）的旅程。客户旅程图将包含用户与产品进行互动或执行任务时的感受，无论用户是高兴、悲伤、失望还是愤怒。
Customer Journey Map Disney+
优先级矩阵 (Prioritization Matrix)
优先级矩阵或艾森豪威尔矩阵是一个参考或矩阵，包含了首先要执行的任务。艾森豪威尔矩阵由两列和两行组成，包括先做、安排、授权和消除。(模板来自Figma社区)
Prioritization Matrix Disney+
用户流 (User Flow)
用户流是指用户与产品互动时的流程，从用户打开应用的第一个阶段开始，到用户使用产品的最终目的地。在Disney+应用程序中，用户流的一个例子是当用户打开应用程序直到他找到一个合适的电影来观看。
User Flow — Disney+
信息架构 (Information Architecture-IA)
在进入设计阶段之前，有一个信息架构。信息架构是一个结构或组件，它将在以后的设计/屏幕中被填充。例如，在首页视图中，将有一个标题，然后在标题中还有哪些组件（标志、搜索栏和其他）。
Information Architecture — Disney+
线框图 (Wireframe (Lo-fi & Mi-fi))
在线框阶段，Vet通常会把它分成两部分。一般来说，他会为设计做Lo-fi（低保真）或粗略的草图；另一个是Mi-fi（中保真）线框，它比较整洁，并且也已经使用了一些像Miro、Whimsical或Figma之类的工具（但仍然是黑白的）。
通常在设计的时候我会先画草图。因为在Vet看来，如果我们使用纸笔或Ipad/Tablet等数字方式，会有更多的想法出现。至于Mi-fi，Vet通常会为客户设计和演示，进而从客户那里得到反馈，或者向开发者展示，以便开发者对以后要建造的产品或应用有一个大致的概念。
在这个低保真线框图中，他使用Miro作为草图的工具。
Lo-fi
草图完成后，下一步是制作Mi-fi（中保真）。
Mi-fi of Disney+
UI设计
在这次的UI设计中包括了情景板探索，然后着手创建一个设计系统，该系统随后将被用于视觉设计（Hi-fi设计）。
情景板 (Moodboard)
从Moodboard这个名字，大家当然可以猜到，这个Moodboard将包含设计灵感，这些灵感将成为以后的指南，或者成为最终的视觉参考，且将在要设计的应用程序中创建。
在这个阶段，Vet通常会通过专门的设计在线平台如Dribbble或Behance来寻找Moodboard，当然也不会忘记从Real Designs或已经开发的应用设计中寻找灵感。
Mood Board
设计系统 (Design System)
简单地说，设计系统是一个可以重复使用的组件，当主组件被改变时，所有的子组件也会改变，所以我们不必再一个一个地改变它们。在编程中，"设计系统 "类似于 "函数"，是一种可以重复使用的代码，可以方便快捷地进行修改。
创建一个设计系统可能需要一点时间，而且也相当复杂，但这一切都是值得的，因为当它被用在设计中时，我们的设计看起来会更加一致，当有我们想改变的组件时，我们不必再一个一个地去改变它们。另外，当我们想做一个设计的原型时，制作一个设计系统将使我们更容易，因为我们可以使用交互式组件。
Colors Document
Typography Document
Button Component
组件按钮共有四个属性，包括：
类型：图标文本、仅文本、仅图标
尺寸：大、正常、小
变体：主要的、次要的、有轮廓的、危险的、文本
状态：默认、悬停、聚焦、按下、禁用
Hi-fi设计 (Hi-fi Design)
由于我们已经事先创建了一个应用程序的线框，所以设计Hi-fi时就会更容易，只需要进行一些润色，如添加颜色、文字风格、间距或布局。
在这个阶段，Vet在试图保持Disney+原有界面的基础上，进行了重新设计。
登陆页面设计
What's new?
欢迎屏幕的显示：使其看起来不那么无聊，并增加了一个登录按钮，以便用户在已经拥有账户的情况下可以立即进入
增加登陆选项：如使用电子邮件、谷歌或Facebook登录
"Onboarding - 1"：如果用户是新用户，那么当他们成功创建一个账户时，他们将被重定向到一个页面Onboarding - 1
"Onboarding - 2"：在选择了用户喜欢的类别后，那么用户将被引导到选择几个喜欢或被喜欢的电影的阶段
"Onboarding - 3"：最后一个阶段是根据用户选择的类型，将几部电影/影片添加到用户的观看列表中
Onboarding Hi-fi
首页设计
What's new?
增加过滤器：因此用户可以根据他们想看的类别或国家来过滤电影
按钮增加：在Hero Section增加了 "播放 "按钮和 "添加到观看列表 "按钮，这样用户就可以方便快捷地在观看列表中添加他们想看的电影
增加电影名称和电影时长：增加了电影名称和看完电影的剩余时间，使用户知道完成这部电影需要多长时间
剩余剧集时长与情节同步：如果用户正在观看的是一部电视剧，剩余的分钟数将与正在观看的情节一起显示，以完成影片
增加类型板块：这样用户可以根据他们想看的类型方便快捷地选择电影
Homepage Hi-fi
主页面设计
之前设计的导航条包含首页、系列、Disney+、电影和本地。而在重新设计后，Vet将其替换为：主页、分类、Disney+、即将推出和下载。
因为旧导航条的内容只会根据我们选择的类别（系列、迪斯尼+、电影、本地）来显示电影，所以Vet把它改为 "热门电影 "栏目分类页上的一个部分。
What's new?
"Hero Section"及"Weekly Popular"部分的增加
"The Coming Soon"页面：这是Disney+上的一个新屏幕，因为之前Disney+没有这个版块。该页面将包含即将推出的电影/剧集，同时还有一个 "Notify Me "按钮作为提醒用户的通知
下载页面：该页面没有什么变化，只是当用户下载电视剧时，剧集列表将被放入一个“文件夹”中
侧边栏的展开：增加了用户的资料照片，以及一个选项，用户可以选择黑暗模式和光明模式
类别详情页面：在这个页面上，当我们选择一个类别时，电影/戏剧将根据所选类别显示
Main Page Hi-fi
原型设计 (Prototyping)
在所有的屏幕都被设计好之后，下一步是制作设计的原型，这样设计就变得可以点击和播放。这个原型也将被用于用户测试阶段。
在制作原型的过程中，Vet也使用了交互式组件，这样可以使组件之间的交互更容易建立。
可用性测试 (Usability Testing)
而设计或开发一个应用程序的最终目的是为了被用户使用，所以对于设计者来说，对以后使用该应用程序的潜在用户进行可用性测试以获得反馈将是非常重要的。
在这个测试阶段，Vet提供了几个 "设计任务"，这些任务以后将由用户来完成，同时，在参与者完成设计任务后，也会向他们提出一些问题。
用户测试反馈
此外，在设计过程中也可以尝试使用Figma嵌入原型运行用户测试。之后，也可以在用户测试中得到参与者的反馈：
流派部分在主页上有点难找，因为必须先滚动，所以Vet决定将流派部分移到英雄部分下面。
Homepage Before / After
电影列表
电影列表增加标题，以便更加容易识别和搜索。
Movie List Before / After
电影流媒体页面
难以识别的速度图标，且希望将文字从设置改为视频质量。
导航栏
最后一个反馈是在导航条上添加文字，这样用户可以立即从导航条上知道图标的含义，而不会感到困惑。
Navbar Before / After
TAKEAWAYS
在这个案例研究中，Vet对设计系统有了越来越多的了解，如何正确地应用它们并从中创建交互式的组件，并制作原型（我很少做这些），做用户测试以获得反馈。
他也意识到这个案例研究远非完美，由于时间的限制，可能仍然不能涵盖所有的内容。希望在下一个案例研究中，可以做一个比以前更好的案例，并且写得更整齐。
以上就是Disney+的相关研究。更多内容可以复制下方链接了解：
https://medium.com/@VetrickWilsen/english-ui-ux-study-case-redesign-improving-watching-experience-on-disney-f1852828e0ae
更多交互相关申请资讯/干货持续输出中，欢迎大家持续关注哦~