跳到主要内容

您需要了解的有关模型,线框和原型的所有信息

区分设计过程的不同阶段可能会令人困惑,尤其是当术语使用得如此松散时。但这不是设计师不知道差异的借口。

虽然它看起来似乎无辜,但将模型称为线框就像木匠将锤子称为螺丝刀。而不知道如何制作低保真原型就像一个不知道切割位置的外科医生。

Wireframes, mockups and prototypes are the tools of a designer's trade

线框,模型和原型是设计师交易的工具

这些是设计师的交易工具,因此应该从内到外学习。所以,如果你想学习如何创建网站样机,学到最好的线框工具或者掌握快速原型制作,你在正确的地方。

本文将解释基础知识:每个人可以做什么,为什么它们有用,一些常用的方法来构建每个,甚至一些最佳实践。我们将从正确的名字开始。使用上面的下拉菜单导航到所需的页面。

Wireframe => Mockup =>原型

那么这个怪胎的区别是什么?虽然它绝不是设计网站或应用程序的唯一过程,但传统的设计过程遵循这三个步骤。

这是一个粗略的过度简化,没有考虑到它们之间的无数变量,但为了解释基础知识,它是一个很好的基础。一般来说,这与保真度相关,保真度通常随着你前进而上升。

同样,这是一个过于简单化而不是一成不变的规则。例如,有时会跳过模型和早期创建一个低保真原型是你的项目最好的。或者,您可以遵循设计师Steven Bradley所青睐的流程从线框到模型并在代码中完成

知道没有一个“最佳”过程(只有正确的过程),让我们探讨每种类型的设计是什么样的。

01.线框

线框就像您的设计方案的蓝图。您可以在早期创建它们,通常是第一步(或者第二步,如果您更喜欢先绘制草图),并在团队迭代视觉细节之前专门用于回答关键的布局,结构和组织问题。

出于这个原因,线框是低保真度的。所有事情都有时间和地点,在格式和结构固化后,应在稍后决定视觉和技术细节。

Photo of drawings and pens on desk

图片由BenoîtMeunier提供

这并不是说线框根本不应该关注视觉效果 - 您只需要足够的细节来可视化整体布局和元素类别所需的空间(如侧边栏,顶部导航,页脚,主要内容等)。

如我们所述线框图指南,这就是为什么线框通常包含占位符以便以后的图形以正方形形式与Xs或裸图版本的图标稍后出现。

优点

如上所述,线框使得团队能够在深入细节之前专注于“全局”决策。线框的优点与任何媒介的轮廓相同:它们有机会在前进之前进行适当的计划,从而降低因为错过了某些东西而不得不双重回归的风险。

此外,作为可交付成果,线框可以与整个团队共享,以便每个人都在同一页面上。如果您使用专门的线框图或原型制作工具,不同的团队成员可以修改或评论同一文档,从一开始就鼓励协作。

Photo of UI sketch

图片由Shawn Campbell提供

此外,线框可以显示给想要在早期看到结果的利益相关者,并在浪费时间进一步开发之前揭示潜在的编辑。

方法

由于线框的低保真度,与其他阶段相比,有更多的实际操作方法来构建它们。我们来看看几个。

素描

老式的方式。只需在纸上画出你的想法,不要因为细节而陷入困境。这对于像头脑风暴这样的情况下的快速线框来说很好,但是这些草图与整个团队共享可能会有问题,并且很容易被误解。如果您更喜欢有条理且结构化的草图方式,我们强烈推荐分层草图

平面设计软件

如果使用像Photoshop或Sketch这样的软件,就像在纸上画草图一样自然,那就去吧。但是,此选项需要对程序有固有的了解,并且缺乏添加某些人提供的交互的能力Wireframing应用程序

演示软件

如果您专门为演示文稿进行线框图,则可以使用PowerPoint或Keynote等软件构建它。幻灯片结构有助于在页面方面考虑您的设计,但此选项再次缺乏交互性。然而,演示软件非常熟悉,因为我们大多数人在某些时候都使用过Powerpoint或Keynote。

设计软件

今天,软件专门用于线框图及其他,如UXPin,Axure,Omnigraffle和Moqups。这里的优点是线框图的简化功能,如拖放可用性以及通过几次点击添加交互性是多么容易。缺点是有些成本比其他成本高。虽然Balsamiq是免费的,但它缺乏Axure,Omnigraffle和UXPin的互动功能。

只要符合项目的需求和限制,该方法无关紧要。重要的是,在进入更细致的阶段之前,您对整个项目有了可靠的了解。

下一页:关于模型的所有知识



翻译字数超限