首页 iOS.& Swift Books 应用设计学徒

5
可重复使用的元素& Data 由Prateek Prasad撰写

在最终的章节中,您为App和Eutshlod创建了Wireframe,并提供了一个粗略的脚手架。设计产品的基本步骤。通过用芦苇填充屏幕,设置了你的TEM的一般想法,你会和德纳德拿鞋。

在图中更有用的功能是您在最后一章中短暂触及的组件。即使没有进入详细,概述了组件有助于加快迭代。

在本章中,您将看看Componets以及如何Legee The Moge Mode Flease Flexing Designers。更具Importaly,您将学习可重用设计的价值 - 此视觉设计 - 这3个Ficus专门针对构建器CometEts。您还将学习Howe到Beteter组织您的组件和负责。

可视化何时使用组件

使用组件开始时的常见问题是:我的屏幕哪些屏幕将受益于可重用组件?坦率地说,这不是一个答案的直接问题。

很多这一点归结为产品背后的想法及其复杂性。您的批准越多,屏幕的元素就越多。屁股不是全部。如果是HOT WATS的VILBIANCES与您的表面类似的信息信息,则您将在屏幕上结束唯一的元素。

您可能已经安静了App Tdown Exraises。 Airbnb用于构建整个屏幕的Tworents,Wereas Pockets使用多种设计Varilando缩减信号。在两个应用程序中,indolring信息是milah,而是如何浮出水面的身份证。

你可以在组件细分上解除这么热吗?一个整洁的诀窍是可视化应用程序的轮廓。你在胎所犯罪中有错。在跟踪每个屏幕后,您将隐藏屏幕截图以查看应用程序结构。隐藏特定信息有助于您分析使用SES的数量。

一旦您构建了屏幕的线框,就会更容易注意到这些细节。在未来,随时您在多个略有或没有变化的地方使用元素,您可以将其作为组件提取。

入门

从本章的项目文件中,负载 第5章 - Starter.fig 进入图。您可以将文件拖到Figma窗口中以导入它。

构建电影列表项

添加一个新的 MacBook. 帧(f)到文件。为此框架命名 海报.

自定义文本并填充颜色

接下来,您将更改电影名称“猛禽“而且重量 大胆的.

迭代电影列表项

添加矩形(R)到 海报 框架测量 414x263。点击 充满 “属性”面板上的选项并选择 图像.

与页面组织

如果您kou继续在同一画布上创建多个组件帧,则您的工作空间将变得杂乱无章和差异来导航。良好的做法是继续整理你的工作空间并组织它。正如童子军所说,“看露营地聪明的康涅狄格谢谢。”

设置页面

在“图层”面板上,单击 + 添加新页面并调用它 成分.

重用和恢复组件

您现在将创建流派组件。你将重复使用Wireframe的临时而不是从头开始 类型 组件和风格它。

创建评级组件

移动,是时候建立评级组件了。将新帧(F)添加到画布测量 250x50,给它一个 黑填充 并命名它 评分.

将新组件放在屏幕中

现在是时候在屏幕中使用此组件了。转到电影应用程序页面,添加一个新的 iPhone 11 Pro Max 框架(f)到此页面并增加其高度 1578。打电话给框架 电影列表.

测试组件的功率

您可以在重命名电影的标题后注意到所有六个实例中的异常:标题文本包裹到下一行,与电影信息图层重叠。

探索UI套件& plugins

在设计产品时,很容易被带走并希望从头开始创建所有内容。虽然这总是一个选择,但它肯定不是最有效的。

使用设计套件

对于iOS状态栏,您将使用设计套件。打开 //www.figma.com/resources/assets/facebook-ios11-ui-kit/ 在不同的选项卡中,然后单击 打开图形图中的UI套件。 Figma文件将在新编辑器中打开。

使用图标集

对于导航栏,您将使用图标集。

创建导航项目

添加新帧(F)测量 450×90 并命名它 底部导航。在这里,您将放置导航,将用户带到三种不同类型的电影浏览。

实施导航栏

既然你有一个看起来你想要的导航栏,现在是时候在电影列表中使用它了。

设计电影详细信息屏幕

移动,是时候建立电影细节屏幕了。添加一个新的 iPhone 11 Pro Max 框架(f)到屏幕并命名它 电影细节。增加框架高度 1680.

添加了背景的详细信息

添加矩形(R)测量 414×1314. 并将其放在余量 366 从一开始。给它一个白色的填充并称之为 背景卡.

添加电影图片

添加A. 157×221. rectangle (R)有一个角落半径 8。将它放在余量边缘 16 从左边和 323 来自 top.

添加详细信息

复制 标题电影信息 文本图层来自 电影卡 组件页面中的组件,然后将它们放在右侧 电影详细信息 - 图像28 来自 电影详细信息 - 图像.

何时使用组件

您可以将电影信息和标题图层进行成分,但这不会有任何额外的好处。即使他们是组件,您也必须:

设置概述

使用文本添加文本图层(t) 概述 到了 电影细节 框架。使用 Roboto-Bold. 作为字体大小的字体 18。把它放在下面 电影详细信息 - 图像40 从左边的顶部和16个。为此图层命名 概述标题.

使用面具

Synopsis Text在此屏幕上完全显示出来。如果您显示第一段并允许用户展开以阅读更多,它将保存屏幕空间并查看清洁器。

消失了可见的文本

现在,您将通过制作文本较令人垂询点来洒在这层上方的视觉风格。

使截止文本可读

对于概述部分的最终部分,添加文本字段(t)并输入 阅读更多。使用字体 Roboto-Bold. 具有字体大小 12 和一个字母间距 3px。在下面 输入细节 选项,使用 大写 对于字母套管。

添加铸件部分

接下来,铸件部分。复制 概述标题 并将文本更改为 。把它放在下面 概述文本 小组在边缘 32 从蒙面层的底部和 16 从左边。说出它 铸造标题.

安装和使用第三方插件

插件对设计师的工作流程至关重要。他们帮助您自动化您的平凡和重复的工作流程,节省时间,让您专注于更有趣的事情。

添加用户评级

对于用户评级部分标题,请重复与您使用的相同的过程 铸造标题 并将文本更改为 评级 - 4.。把它放在下面 铸造图像40 从顶部和 16 从左边。最后,这个名字 评级标题.

将电影建议添加到详细信息

对于您的下一个任务,您将从模拟中偏离。在电影详细信息屏幕中获取其他电影的建议不会很好吗?它将在增加应用程序内提高用户参与度。

关键点

  • 使用页面组织组件和设计。
  • 使用Compose组件来构建更大的设计元素,并且在有意义时,创建组件。
  • 建立组件的命名约定有助于实例交换和逻辑分组。
  • Figma.社区提供第三方图标集和插件,以使您的工作更轻松。

挑战

所有你需要完成这个屏幕就是 加入观看列表 按钮,A 后退 按钮和状态栏。而不是给你有关创建这些元素的指示,我将把它作为一个挑战。这是他们应该看的。

有一个技术问题?想报告一个错误吗? 您可以向官方书籍论坛中的书籍作者提出问题和报告错误 这里.

有反馈分享在线阅读体验吗? 如果您有关于UI,UX,突出显示或我们在线阅读器的其他功能的反馈,您可以将其发送到设计团队,其中表格如下所示:

© 2021 Razeware LLC

您可以免费阅读,本章部分显示为 混淆了 文本。解锁这本书,以及我们整个书籍和视频目录,带有Raywenderlich.com的专业订阅。

现在解锁

要突出或记笔记,您需要在订阅中拥有这本书或自行购买。