sketch web组件
现在，我们已经考虑了小应用程序的所有元素，包括其不同的状态，我们可以放心地开始为每个元素及其对应的状态创建可视化模型。 如果您在构建时对设计的细节（颜色，字体大小等）感到好奇，请查看GitHub上的原始Sketch文件 。
让我们从“素描”中的画板开始，为它提供浅灰色背景。
标题
由于这只是一个演示，因此我们不会花费大量时间为我们的应用创建整个品牌。 相反，我们只是使用Google字体中的字体来样式化应用程序的名称。 在这种情况下，我选择了Pacifico 。 如果您在计算机上安装了字体，则可以在Sketch中看到它的外观。
输入
现在我们需要一个文本输入和一个提交按钮。 用户可以在此处输入指向要下载其高分辨率图标图稿的应用程序的链接。 遵循线框，将其放置在标题下方并使其全角显示，从而使其从台式机到移动设备均可使用。
输出
现在，让我们添加主要内容区域，在其中显示iTunes API返回的图标图稿。 我们将使用完整尺寸的Twitter App图标进行演示（您可以在此处下载）。
注意：默认情况下，不屏蔽iOS应用程序图标。 图标图稿（在twitter示例中可以看到）是正方形的。 iOS在操作系统级别应用圆角，因此对于我们的应用程序，我们必须为iOS图标创建遮罩。 蒙版不仅是简单的边框半径，还更像是“波浪形”。 我不是自己创建它，而是使用Thibaut Ninove创建的Sketch图标模板。
组成状态
现在，我们将创建一些模型，以帮助我们理解组件状态。 我们将使用主输出区域来指示这些不同的状态。
对于零状态（初始页面加载），我们将添加一个小图标占位符以及一些有关如何使用该应用程序的说明文字：
对于加载状态，我们将在输出区域粘贴白色叠加层以及加载指示器：
对于错误状态，我们将仅显示一些错误文本：
直到下一次！
而已！ 我们为不同的应用程序组件提供了一些不错的可视化模型，现在我们准备开始使用HTML，CSS和JavaScript进行实施！
翻译自: https://webdesign.tutsplus.com/tutorials/designing-an-api-driven-web-app-in-sketch--cms-24574
sketch web组件