2021年内容为王。我们通过内容学习,我们用内容娱乐自己,我们甚至用内容拖延自己。其中大部分内容是视频,在视频内容方面,YouTube 自 2005 年成立以来一直是无可争议的王者。

除了精彩的视频内容,我们在 YouTube 上发现,YouTube 受欢迎的一个重要因素是其黄油般流畅的用户体验。作为一名有抱负的用户体验设计师,我认为从头开始重新创建 YouTube 将是一次很棒的学习体验。

我将旅程分为 4 个部分,因此您可以准确地理解我重新创建 YouTube 的方法。

1. 拍摄快照

2.分析并创建组件库

3. 创建样式表

4.遵循前端框架Vue JS

拍摄快照

第一步是拍摄界面快照。不同的屏幕分辨率从 360 像素到 2160 像素,但您应该选择哪一个。最好的选择是在 1440 像素处拍摄快照,这是桌面的标准断点。

之后,在 Figma 中创建一个分辨率为 1440 X 1024 像素的桌面框架。将图像文件从您的目录拖到选定的 Figma 框架中。成功放置图像后,将其对齐到顶部和左侧到框架。从布局层次结构中选择图像并将不透明度降低到 60% 并将其锁定到框架,这样您就可以在其上设计其他组件。

分析创建元件库

每当您要设计一个大型应用程序时,您都需要构建一个组件库,因为相同的组件将在界面的其他部分重用。

就我而言,我分析了 4 个主要组件及其基础组件并设计了整个界面。为了完美,我切换到 Firefox 并截取 div 屏幕截图并将其粘贴到 Figma。此外,我检查了 div 部分的计算布局,以测量组件对象之间的边距和填充,以使设计相同。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--4FS_rk3S--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/uj05bmfuhhqllp666jfj.png)

显卡:从用户体验的角度来看,您需要具备识别首先吸引用户注意力的组件的技能。就我而言,当我每次访问 YouTube 时,最能引起我注意的是视频卡组件。有几个基本组件,例如频道头像、视频缩略图、视频标题和频道详细信息。

相关芯片/标签:在视频卡之上,有由您的观看历史生成的相关视频芯片,并根据您的兴趣建议相关标签。作为一个 UI 设计师,你需要先设计小组件,这样你才能构建复杂的组件,使布局完整。

应用栏:我构建的下一个组件是应用栏组件。在这些组件中,有几个基本组件,例如搜索、用户头像和上传视频图标。我将所有内容组合在一起创建了一个 App Bar。这是我从所有组件中设计的最简单的组件。

导航抽屉:最后,我构建了导航抽屉,它是用户的重要组件之一,它将用户重定向到 YouTube 的不同页面。在这个组件中,也有多个基础组件,但它们的类型相似。这就是为什么我为他们创建了一个变体,以便在整个界面中巧妙地使用它。一种变体仅显示导航选项,另一种变体显示具有新视频状态的订阅频道。作为一名 UI 设计师,你必须专注于那些有助于你提高设计思维能力的小细节。

创建样式表

样式表由颜色、排版、图标、插图、间距、立面等设计资产组合而成。作为 UI 设计师,您必须与开发人员协作,他们需要样式表中的设计资产。如果您为设计资产创建一个单独的 Figma 页面并根据团队的编码约定命名它们,这将减少开发人员朋友的时间。例如,如果您有一个具有多个灰色阴影的调色板,则命名为 Gray 90、Gray 80、Gray 70 等。

对于排版,我使用 Roboto,因为这是 Google 产品遵循材料设计的默认字体。我使用材质工具根据材质指南生成类型比例。这将帮助您为您的设计创建一个健壮且响应迅速的类型系统。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--62KNHy-i--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// miro.medium.com/max/700/1%2Awh0SoQBIo8rFZtiO1R_XLw.png)

对于颜色,我使用 Figma 的 Material Kit 资源,在那里我得到了每一种灰色和其他状态颜色,如错误、成功、警告等。在颜色框中,你可以看到我已经采用了多种色调主要和次要颜色,以便我可以在设计暗模式的变体中进行选择,并使设计易于使用。

此外,我需要具有多种状态的图标,例如轮廓或填充。在素材图标中,我发现了 5 种状态的图标与 YouTube 产品设计使用的图标相同,因为它们必然遵循 Material Design 作为他们的设计体系。

最后,我需要使用一些高程来设计多种交互状态,例如悬停、启用、聚焦、拖动等。

关注前端框架库:Vuetify JS

成功设计界面后,是时候将设计交给开发人员的同事了。我需要按照 Vuetify JS 的指导记录我的设计系统,Vuetify JS 是 Vue JS 前端框架的组件库。

这将帮助我的开发者朋友快速识别组件并快速构建界面。例如,对于视频,我的开发人员将使用卡片组件并根据我的设计对其进行配置,并将其声明为组件类并在应用程序的其他页面上重用它。

就我而言,我使用了 Vue,但这取决于您的开发人员团队,因为他们选择框架是可信的。在您的情况下,它可能是 React JS、Bootstrap、Angular 等。

最终结果

学习成果

由于许多 Figma 设计师都在努力使用 Auto-Layout 设计复杂的组件,我也不例外。我在 Auto-Layout 的帮助下设计了每个基本组件和主组件,因此它可以帮助我在多个断点中设计响应式界面。如果您想要单独的自动布局教程,请在评论部分告诉我。

正如我之前所说,构建大型应用程序是一个复杂的过程,如果您遵循构建组件库的过程,那么它将为您的团队和项目节省大量时间。

作为一名 UX 设计师,我一直想设计完全遵循材料指南的界面。遵循他们的方法是设计应用程序的行业标准方法。我必须在设计期间阅读材料设计指南,这有助于我更深入地了解他们的设计模式。

结束语

我重新创建了 YouTube,因此像我们这样的设计师遵循行业标准方法,因为许多设计师都感受到设计复杂应用程序的痛苦。按照我上面讨论的步骤,您可以重新创建任何复杂的应用程序并将它们添加到您的投资组合中,这更有意义。

环顾设计方法,如果您认为它适合您的用例,请将这些步骤用作模板。如果你认为有什么可以改进的,请告诉我,或者你可以直接贡献。这就是用户体验设计的美妙之处,不是吗?

再见,谢谢😀