您创建网站的指南Wireframe

如果您想创建一个质量网站,您将需要一些关键的东西:规划。规划你所做的内容,为什么,为谁是重要的,就像你要放置功能的那样重要,以及为什么。乐动体育 赞助西班牙人设计早期设计中最强大的工具之一是Wireframe,这就是为什么我们创建本指南以帮助您开始学习交易的技巧。

本指南适用于:

  • 有兴趣学习更多关于UX设计的人,
  • UX设计师刚开始他们的职业生涯,
  • UX设计师努力提供优质的线框,
  • 用户体验设计元老们想要温习基本原理并跟上新趋势。

我们把它分成三个部分:

线框图的概述

什么是线框?

线框代表网站,产品或应用程序的骨架框架。使用可视线,符号和文本,线框描绘了页面内容和功能的结构。

线框图是在开发的早期阶段创建的,用以建立所创建内容的基本结构和目的。一旦获得批准,它们将成为项目视觉设计和开发的基础。

UX&UI设计

创建您的网站线框图的人将使用他们的目的,用户体验和UI设计。

UX(即用户体验)设计是在客户和网站、产品或应用程序之间创造用户满意度的过程。易用性、可访问性和心理效应都是UX设计师考虑的因素。

UI(即用户界面)设计较难定义,但与图形设计更密切相关。它关注页面中每个元素的响应性和交互性,以及外观和感觉,以最大化用户的可用性。

UX和UI设计倾向于重叠,但您可以考虑这种方式的区别:页面的UX就像一个身体的骨架,定义其结构和功能;UI就像是身体的反射,定义了什么互动感觉。

线框图的元素

线框图可以像白板上的草图一样简单,也可以像使用复杂软件创建的工作原型一样复杂。你的线框图有多详细取决于你的设计师和你的设计过程。

但是,大多数线框包括以下元素:

信息架构

信息架构(IA)是网站,应用程序和产品中信息的组织和优先级,以支持可用性和可辨能力。这是根据您如何处理以下四个要素的方式易于访问信息:

  • 组织系统(如层次、顺序、矩阵等)
  • 标签系统(例如,相关信息的分组)
  • 导航系统(即全局、本地、上下文等)和
  • 搜索系统(即搜索引擎,过滤器等)

好的IA在战略上构建与公司目标一致的内容。线框图将结构转换为内容的可视化表示,然后可以从用户的角度进行测试和迭代。

导航

作为Good IA的主要元素之一,导航对于确保用户可以从一个页面移动到下一个页面并以逻辑方式获取所需信息的关键是至关重要的。

用户永远不应该过多地考虑导航元素将把他们带到哪里。这些元素应该是可预测和清楚的。用户应该能够基于视觉线索、互动元素和他们对网上事物如何工作的预先期望有机地在您的网站中移动。

用户界面

正如我们所讨论的,UX和UI通常在线框中重叠。线框的UI部分侧重于接口元素,帮助用户以有效的方式与功能进行交互。乐动体育 赞助西班牙人这些元素可能包括按钮,文本输入字段,滑块,复选框等。

好处

Wireframing通常被认为是当今设计世界的必要步骤。尝试构建没有线框的网站,产品或应用程序就像尝试构建一个没有蓝图的摩天大楼:它可能是一场灾难。

线框图最大的优点之一是,它提供了一个早期的可视化,可以与涉众和用户一起审查。在开发早期阶段提供的有用反馈是无价的。与完全设计和开发的原型相比,修改线框图要容易得多,这可能会花费你的公司宝贵的时间和金钱来修改。

尽早让涉众和用户参与进来,也会鼓励所有参与进来的人对所创建的东西将会很棒有信心。

更实际地,线框确保首先设计,最重要的是业务目标。最具目的和交互式的迷人网站如果它没有实现它所代表的业务的目标是毫无价值的。

随着项目向前移动,线框还可作为所有团队可以返回的整体项目愿景和范围的参考点。

线框澄清您的愿景,节省时间和金钱,并允许在进入下一步之前进行有效的更改。

缺点

没有很多。但如果你的客户或涉众不是以技术为导向的,缺乏视觉效果可能会让人有点失望。

让每个人都认识到线框图的重要性是让线框图在你的设计过程中发挥作用的重要一步。

对线框的另一个批评是,它们可能被视为限制了特别有创意的设计师和文案,他们可能想要跳出规定的布局。

再次,让每个团队成员理解线框的重要性以及他们如何以最佳方式支持公司目标将在船上获取创造性的途径。

创建线框

成功的线框图能够在满足用户需求的同时实现业务目标。实现这一结果需要一个有效的设计过程和熟练的UX设计师,谁知道如何在正确的时间用正确的设计元素创建正确类型的线框。

线框的类型

人们用很多术语来描述线框图,但基本上有三种类型:

  • 线框内容,
  • 带注释的线框图,
  • 交互式线框。

线框的内容

内容线程范围是朝向基于内容类型创建布局和组织页面的初始步骤。

它们可以是实物草图,也可以是用数字工具创作的。它们通常由一系列框和标签组成,这些框和标签列出了页面上内容的布局位置。

通过从这些初始线程中删除任何图形设计,UX设计人员可以专注于最重要的事情:以最佳达到业务目标和用户需求的方式铺设内容,同时保持不同页面和设备的元素一致。

带注释的线框图

带注释的线框图通过详细的注释解释事物的外观和行为,为内容线框图增加了清晰度。

大多数注释可以分为以下四种:

  1. 功能
    • 姿态
    • 数据输入和输出
  2. 内容
    • 对副本或最好是实际副本的描述
    • 图形和多媒体
    • 尺寸和分辨率
  3. 行为
    • 动画
    • 的相互作用
    • 链接的目的地
  4. 约束
    • 由于硬件,软件等导致的限制

交互式线框

交互式线框图有时被称为原型,它需要数字设计工具,允许在你的线框图中添加交互性,以便与用户进行测试。

交互式线框图有两种:低保真(low-fi)和高保真(hi-fi)。低保真线框图用于测试导航、布局和可用性,高保真线框图用于测试高级功能和视觉细节。

当你的项目开始编码时,像导航和UI这样的东西需要花费更多的时间来修改。原型和测试旨在通过发现在编码开始之前需要做什么更改来节省您的时间。

根据您的设计过程,您可以使用其中一种、两种,也可以不使用这两种类型的交互线框图。

Wireframes与原型

让我们使用一个类比:如果你要管理一个新的住房开发,你的线框图将是你的建筑蓝图,而你的原型将是你的展示房屋。线框图和原型都能帮助你在创造最终产品前测试你的想法并获得反馈,但它们发生在你的设计工作流程中非常不同的阶段。

线框图通常是低保真度的。它们概述了视觉效果、复制和互动元素最终在没有实际显示它们的情况下将在哪里出现。原型更接近最终产品,尽管在发布前仍需要进行审查和修改。原型还倾向于模拟产品的用户交互,以便进行测试。

许多设计团队还会使用另一个介于两者之间的阶段:模型。原型是线框图的高保真版本,仍然是静态的,缺乏原型的交互性。原型具有最终产品的外观/感觉,但没有任何东西是可以点击或测试的。

理想情况下,您的团队将在设计过程的每个阶段进行投资,以确保不浪费任何努力将未经批准/不可能的想法转化为完全编码的产品。早期原型设计是节省开发成本的好方法,因为用户界面设计可以事先进行彻底审查。这也是在任何繁重的后端工作开始之前获得反馈的好方法。

线框图流程

并不是每个项目都需要每种类型的线框才能成功。您的设计过程将由您的特定项目或项目的一部分所要求的。根据您所设计的内容和为谁设计的内容,您的流程将需要更改以适应情况。

例如,对于一个视觉上和交互上都很复杂的项目,您可能会花更多的时间在线框图上迭代。您不仅可以进行前面讨论的每一种线框图类型,还可以进行多轮用户测试。

另一方面,如果您正在设计类似于后端管理界面的内容,则可能会通过更少的密集流程进行。

下面是一些常见设计过程的例子

  • 内容Wireframe>注释线框>原型>代码
  • 内容线框>注释线框>低保真线框>原型>代码
  • 内容Wireframe>注释Wireframe> Hi-Fi Mockup> Prototype>代码
  • 内容Wireframe>注释Wireframe> Lo-Fi Wireframe> Hi-Fi Mockup>原型>代码
  • 内容线框>代码

线框对象和符号

有许多常见的对象和线框模板中使用的符号。乐动娱乐城在Cacoo,我们提供了各种各样的模板乐动娱乐城以及开始设计的形状。

公司网站线框模板

iOS移动线框模板

Android Wireframe模板

网页样机模板

移动应用线框模板移动应用线框模板

如何制作线框

可以将线框分解为几个基本步骤。

第一步:寻找灵感

当然,您希望在您的竞争对手浏览您喜欢的竞争对手,也是您喜欢的其他网站,产品和应用程序。灵感可以来自任何地方和任何行业。虽然为您的用户提供他们想要的东西很重要,但它也很突出至关重要。

步骤2:规划你的设计过程

列出您的设计过程将如何工作,并与您的团队和所有涉众进行沟通,这样每个人都知道要期望什么。

对交付产品的内容、时间和方式设定准确的期望将有助于团队在正确的时间给出正确的反馈。

第三步:选择工具

根据您的设计过程,您可能只需要一个或多个工具来完成所有阶段。

首字母草图可以在纸上或白板上完成,但许多UX设计师更喜欢直接使用数字。

在本指南中,我们将使用自己的绘图工具cacoo.

第4步:选择模板。

当您在Cacoo中创建一个新图表时,您将被要求做的第一件事是选择一个模板。

您可以从我们的选项库中进行选择,这些选项是完全可定制的,或者您可以选择一个空白模板从头开始。

第5步:设置网格和大纲。

在编辑器的右下角,你可以从几个网格选项中进行选择:

  • 如果你去网格视图>,您的画布背景将转换为网格。
  • 如果你去查看>捕捉到网格当您移动或放置对象时,所有图表元素都将自动捕捉到网格系统。
  • 如果您不想设计这些功能,可以随时取消这些选项。乐动体育 赞助西班牙人

决定线框的宽度和高度取决于您正在创建的内容以及您设计的设备。

希望您已经理解了涉众提出的需求,所以如果有什么特别的需要考虑,您应该知道。

从主菜单开始设计形状、线条和图像。

第6步:用框确定您的布局。

首先为导航、正文和页脚绘制框。然后开始根据您的信息层次结构和您希望页面讲述的故事添加其他内容框。

你应该想象你页面的故事从上到下,从左到右,就像英语读者浏览信息的方式一样。信息越重要,页面上的位置就应该越高。

当您设计时,请考虑标题,文本,图标,滑块和多媒体,始终考虑每个部件如何服务于页面的更大目的。

另外,考虑你的故事最终会如何链接到其他页面并继续到其他页面。

步骤7:定义文本层次结构。

随着您的布局开始播放,您将想要开始拉动真实的文本和信息(如果它是可用的)。

最理想的情况是,你要避免积存积存。虽然作为一个占位符很好,但是您的实际副本可能并不完全适合于您的虚拟文本。使用真实的复制将有助于使你的线框更具体,所以你不需要在以后做很多大的改变。

当你输入copy,确定你的文本层次结构-哪行是H1, H3, H4,等等。调整文本的大小可以让你更好地了解页面上最受关注的信息是什么。

步骤8:详细设计。

一旦您完成了设计的大纲,就可以添加交互细节了。仅仅有框和文本是不够的;对于你的网站的每一个元素,一个交互需要完全设计。

这将包括:

互动反馈,即告诉用户发生了什么或接下来会发生什么信息,例如:

  • 表单的验证响应
  • 中介消息和模数

互动状态,即所有UI组件的潜在状态,例如:

  • 下拉列表
  • 标题、标签和名称
  • 动态内容
  • 图标和数字
  • 表单字段
  • 文件上传

姿态,即,您的用户将在给定设备上与UI物理交互的方式,例如:

  • 点击
  • 双击
  • 右键单击
  • 滑动或轻弹
  • 夹链和传播
  • 徘徊
  • 拖拽
  • 键盘输入
  • 键盘快捷键

跨设备交互,即可能无法转换为不同设备的手势:

  • 徘徊
  • 拖放
  • 上传文件

用户类型,即不同用户根据他们之前与页面的交互看到的内容,例如:

  • 新用户
  • 客人
  • 首次访客
  • 回到访客
  • 现有或登录用户
  • 管理员和得到

正如我们在本指南之前所说的那样,UX和UI经常重叠。这部分电线设计可能要求您与UI设计师协作,或者可能会落在您身上。这将取决于您的公司,您的专业水平和您的设计过程。

第9步:注释您的图表。

注释帮助您的开发人员了解您的设计意图和最终产品的愿景。注释图表时有几件事要记住。

  • 为开发人员编写代码。尽管涉众可能更喜欢故事驱动的注释,让他们能够想象他们梦想的未来产品,但您并不是为他们编写。您是在为开发人员编写代码,这样他们就可以尽可能快速和清楚地理解每个元素应该做什么。具体化和技术性。
  • 不要让注释压倒设计。当放置你的注释时,把它们放在你的设计的一边,这样线框仍然可以看到它的整体。他们不应该打断你的观众的体验。
  • 简洁。你的团队希望尽快看完你的注解,不要有任何多余的信息。
  • 保持注释的格式一致。对于每个注释,要包含以一致格式编写的所有手势和状态的列表,这样更容易快速理解。

大多数注释可以分为以下字段:

  • 功能。手势、弹出窗口、数据输入和输出、缩放问题等等。
  • 内容。文本、字体、大小、链接、图形、多媒体(包括尺寸、分辨率等)
  • 行为。动画(风格、速度和定位)、交互、链接目的地等。
  • 约束。硬件、软件、浏览器、数据等的限制。

第10步:迭代直到满意。

当您填写最终详细信息时,您将弄清楚哪些元素正在运行,哪些元素不是。在选择最能服务于您的页面目的之前,不要害怕尝试一些想法。
这就是线框图的伟大之处:它们很容易使用和操作。

在Cacoo中,你可以用版本历史保存同一图表的不同版本,或者你可以为你的图表创建新的选项卡来创建替代选项。

当你准备好了,寻求反馈。如果你不能在布局之间做出选择,有时候最好是使用几个不同的视角。新鲜的眼光会帮助你确切地看到每种布局的最佳效果。

您可能需要在您在电线罩上的最终批准之前经历几轮批评和迭代。一旦批准,是时候去设计了,您的设计骨架将获得全面的品牌颜色,排版,最终图像等。

自定义模板和形乐动娱乐城状

虽然用Cacoo从头开始创建线框图很容易,但使用模板可以大大加快您的绘图过程。乐动娱乐城

有许多不同类型的Wireframe图模板可以在Cac乐动娱乐城oo中选择.只需打开编辑器,选择一个模板开始,然后根据自己的喜好进行自定义。

如果你创建了一个想要复制的图表,将其保存为新模板或模板.使用自定义模板和模板,您乐动娱乐城可以重新创建您的最佳工作。

高级提示和技巧

最佳实践

不管你设计的是哪种线框图,还是你正在创造的产品,都有一些指导原则适用于所有的线框图。

开始宽阔

如果您在概述了您的基本结构之前陷入了创建的各个部分的细节,您将最终找到一些非常好的细节和功能不佳的产品。

你的线框元素应该以框和文本开始。在开始考虑交互性或视觉治疗之前,确保你考虑的是导航、信息层次结构和讲故事。

优化导航

如果线框图有一个主要的目标,那就是定义你的导航。引导用户从A点到B点,再到任何你希望他们去的地方,这是一款成功产品的支柱。

您的用户必须思考去哪里,他们就越有可能脱落你试图为他们建立的道路。

考虑您的用户通过每个页面和整个产品的旅程,询问自己何时以及它们可能需要或期望某些信息可用。

最小化或排除颜色

线框图的重点是看结构。颜色会分散观众的注意力,只会鼓励团队或客户提出不必要的反馈和问题。

至少为您的第一次迭代,避免颜色。

使用真实副本

盒子对于视觉占位符来说是很好的,但是你应该尽可能使用真正的复制(并避免冗长的输入)。

视觉效果很容易设置粗糙的尺寸,但文本有点不同。如果您在Lorem Ipsum周围创建设计,则您的最终副本可能会符合您的设计。因此,您必须浪费时间大幅更改您的布局以满足您最终需要显示的所有信息。

您的副本仍然是一个粗略的草案,但您应该了解您将与您将与之合作的文本的性质和金额。

真正的副本也使用户测试更加有用。

始终如一

仅仅因为你的线框图看起来简单,并不意味着它们必须看起来草率。

使用一致的排版、间距、行宽、按钮等,这样就不会分散你试图传达的结构和功能。

实验

说到实验,线框是风险最小的设计阶段。现在是您尝试不同的导航选项、布局和文本的机会,而不会对项目的其他部分产生巨大影响。

尝试新的想法或迭代旧的想法,你在过去找到了成功。在让您的创造力充分探索所有潜力之前,请勿附加到任何一个想法。

考虑代码成本

在你让自己的创造力肆意驰骋之后,你需要重新审视现实世界。事实上,线框中的每个元素最终都需要编码。

问自己:您的设计是否可行,鉴于您的时间和预算限制?

您可能需要缩减一些设计以适应项目的参数。

不要连接

用户测试是线框图绘制过程中不可或缺的一部分,它将导致快速的设计更改。

同样,这也是不要过快地过于注重细节的原因,因为您可能会在立即被废弃的元素上浪费大量时间。

你的目标是创建一个“最小可行设计”来测试用户。细节稍后会公布。

给你的设计背景

因为线框图在视觉上过于简单,呈现它们有时会让你的观众感到乏味。记住,工作的重要性不在于它的外观,而在于它讲述的故事和它讲述的效果。

当向利益相关者展示时,确保你解释了你的设计决策,讲述了它为用户创造的体验,并展示了你的工作。保留你的早期草图、用户流程笔记和其他实验,这样你就有了每个设计决策所涉及的所有工作的证据。

准备

在开始设计过程之前,有许多事情需要考虑,以确保您的线框图适合您的业务或客户的需求。

与利益相关者交谈

无论您如何创造,了解您的设计的要求都必须取得成功。没有人会在乎你的创造是多么令人敬畏,如果它不满足利益相关者的需求和目标。

与所有涉众举行正式会议,确定项目的目标和他们对功能的任何期望,他们希望用户做什么,特定的特性,等等。乐动体育 赞助西班牙人

您了解其成功条款越多,您的结果项目将越好。

您可能想要与利益相关者讨论的其他一些内容包括:

  • 设备支持(桌面、手机、平板电脑等)
  • 操作系统支持(Android、iOS、Windows等)
  • 乐动体育 赞助西班牙人按设备划分的功能(跨设备的功能是一致的还是成对的?)
  • 设计缩放(固定、流动、自适应或响应式)
  • 任何需要在页面上的重要元素(登录区域,搜索框,标志,支付框等)

请记住:响应性和自适应布局需要多组屏幕。让您的项目经理知道它需要额外的时间,具体取决于您需要创建的设置数量。

得到团队的共识

一旦您理解了涉众的需求,您将需要咨询您的开发人员团队和视觉设计师如何处理项目。

你可能想和你的团队讨论的事情包括:
默认屏幕尺寸(您设计的设备是哪些设备,以及您的用户实际使用的屏幕尺寸?)
断点(你的设计或功能集在什么尺寸或方向上发生了改变?)

早期从您的团队中获得共识将防止在他们上班时以后的分歧。

得到频繁的反馈

不要害怕反馈。在这个过程中,你从团队中获得的反馈越多,你的设计就会越好,让涉众可以审查,让用户可以尝试。

团队的反馈不仅会帮助您发现您可能遗漏的内容,而且还会挑战您清楚地表达您的设计决策。你会成为一名更好的用户体验设计师,因为你会理解更多的人的观点,并有充分的证据证明你为什么要创造这样的方式。

关于反馈最重要的一点是,它从来不是私人的。每一个反馈都应该是受欢迎的,无论你是否决定使用它来适应你的设计。学习倾听反馈并积极地使用它是任何创造性领域的一项重要技能。

鼓励更多定期反馈的一种方法是使用在线工具,让你与他人分享你的工作,并允许你的团队进行评论和编辑。同时,跟踪修改的过程也可以帮助你展示自己的作品。

为什么选择Cacoo ?

Cacoo使用简单,易于学习,并且在构建时考虑到协作。

使用我们的基于云的编辑器,您的团队可以在图表上实时协作。通过在图表和我们的演示模式上的应用程序内评论,你可以得到简单的反馈来改进你的工作。共享文件夹使您的团队能够访问他们需要的所有图表。并且与重要的涉众共享图表只需要几秒钟(对于他们来说不需要下载或创建帐户)。

您可以创建各种专业图表;不仅仅是线框,而是流程图,站点地图,网络图,思维映射,以及乐动体育-南安普顿合作伙伴更多的

我们的团队计划给你:

  • 高级导出选项(PNG, PDF, PPT, PostScript,或SVG)
  • 修订历史(看看做了什么变化,什么时候)
  • 完全访问一体化(包括谷歌Drive、Dropbox、Adobe Creative Cloud等)
  • 团队管理(邀请人员加入您的组织、创建组并分配角色)
  • 高级安全性(管理对图表的访问,以便您确切地知道谁在看它们)

用我们的自己尝试一下LDSports乐动体育.不需要信用卡。

我们还提供了一个职业计划对于那些不需要我们更高级的协作功能,但仍然有兴趣加入依赖Cacoo的250万用户的图表需求的用户。乐动体育 赞助西班牙人

今天尝试我们的14天免费试用!

加入选择Cacoo的250万用户吧

LDSports乐动体育