Loading...
墨滴

三二

2021/06/23  阅读:47  主题:默认主题

产品设计线框新手教程

产品设计线框新手教程

摘要:不会画画的新手,也可以学会画线框

关键词:设计过程,构思,产品设计

线框可视化用户路径或流程,以及页面布局、信息层次结构,甚至交互。根据它们的目的,它们的保真度会有所不同——从快速草图到最终设计的详细表示。

结论

任何人,无论他们的绘画能力如何,都可以绘制线框图来探索产品设计可能的解决方案。循序渐进,使用通用组件来创建快速、凌乱但有用的线框图。

线框指南

有一些常见的组件在线框中一次又一次地使用。如果您知道如何绘制这些组建,就可以专注于使您的想法正确,而不是如何绘制。

第1步:确定您的浏览器窗口或设备纵横比

这个比例不必很精确,特别是手绘草图。对于更高保真度的线框,以下是一些起始尺寸:

  • 对于web线框,一些常见的大小是1024x768像素和1920x1080像素。
  • 对于移动设备,尺寸范围将基于特定设备(例如平板电脑、各种尺寸的手机)。首先找出您应该针对哪种设备进行优化。
image
image

第2步:绘制导航和搜索

导航和搜索为线框添加上下文。如果您遵循现有的设计或模板,请绘制已经存在的框架 - 例如,如果您知道所有页面都有导航栏,则在页面顶部放置一个导航栏。

image
image

搜索功能可以通过搜索图标和关联的搜索框来表示,如下例所示。如果需要,您可以在搜索框下方的矩形中显示搜索建议。

image
image

第 3 步:识别并绘制设计中最大的元素

接下来,专注于绘制您想法的主要部分——例如,标题、大横幅和图像,甚至是正文的大部分内容。以下是一些常见的线框图约定:

  • 标题使用较粗的线条表示。
  • 正文使用细线勾画。
  • 图像表示为带有 x 的矩形。
image
image

第 4 步:填写其余详细信息

这些细节是与选择相关的小组件,如按钮、下拉菜单、复选框或比例按钮,但也可以包括文本字段或正文副本的任何剩余单行。

  • 下拉菜单由一个矩形和一个插入符号组成。
  • 复选框和单选按钮分别有一个正方形或圆形,还有一条线来表示文本。要显示选择,复选框应该有一个检查和单选按钮将被填写。
  • 按钮可以用多种不同的方式表示。通常,最好使用带有线条或箭头的基本矩形来表示它将用户带到其他地方。但是,对于号召性用语,还应包括一个文本标签,以便向查看您的线框的其他人提供关键详细信息。
image
image
  • 横幅有一行或两行文本,带有可选的相关按钮或取消图标。
  • 对话框包含一个标题、1-2 行文本、1-2 个按钮和一个取消图标。
  • 进度指示器是部分填充的圆角矩形,以说明剩余的等待时间。
  • 图标可以以与图像相同的方式表示(带有 X)或粗线艺术(就像我们在这里展示的搜索图标)。尽管我们建议在最终 UI 中为图标使用文本标签,但可以跳过线框中图标占位符的标签。
image
image

示例:绘制产品详细信息页面

第 1 步:由于我们的设计是为桌面网页设计的,因此我们从一个大小与普通浏览器窗口相对应的空白画布开始。

image 第 2 步:我们添加一个顶部导航栏并搜索到我们的线框。

image 第 3 步:绘制设计中最大的元素。由于线框代表产品页面,因此在此阶段我们专注于显示与产品相关的信息,例如名称、描述和图像。

image 第 4 步:添加其他详细信息,例如选择选项的下拉框和将产品添加到购物车的按钮。

image
image

三二

2021/06/23  阅读:47  主题:默认主题

作者介绍

三二

微信公众号《教你画像素画》创始人