效果图底图 线框图
线框图是任何屏幕设计过程中的重要一步。 它主要允许您定义设计的信息层次结构，从而使您可以轻松地根据希望用户处理信息的方式来规划布局。 如果您还没有使用线框图，是时候让您的脚湿了。
在开始之前，有一个简单的问题：您需要专业的网站解决方案吗？ 如果是这样，我们有许多设计精美的网站模板可以满足您的需求。 您可以为单个低额的月度订阅下载无限的模板和其他项目。
否则，让我们进入本教程！
就像建筑的蓝图。 您必须先以二维黑白图查看它，然后才能了解如何建造实际的房屋。 同样，对于屏幕设计，您无法在不知道信息去向的情况下，开始在photoshop中构建像素层或编写代码块。
在更深层次上，线框在确定用户如何与界面交互方面也非常有用。 例如，线框可以包含按钮或菜单行为的各种状态。
线框图很重要，因为它使设计人员能够计划界面的布局和交互，而不会因颜色，字体选择甚至复制而分心。 我想向客户解释，如果用户无法确定在黑白线框上的位置，最终使用什么颜色都没有关系。 即使按钮没有光泽或颜色鲜艳，也必须很明显。
就像建筑物的地基一样，在决定是否给它昂贵的油漆之前，它必须从根本上坚固。
步骤1：获得灵感
在深入探讨细节之前，由于一张图片可以绘制成千上万个单词，因此请看一下I♥wirefames 。 您将能够快速概览和直观了解其他设计师如何处理其线框图制作过程。
也许还可以抓住这个漂亮的浏览器书签Wirify ，它使您可以查看任何实时站点的“ wireframe-d”版本。
如果您不断观察其他设计师或站点对其线框所做的工作，那么您将逐渐了解到线框如何帮助组织屏幕信息。
步骤2：设计流程
设计是一个有机过程，因此，不同的设计师会采用不同的方式处理线框图并将其转换为视觉效果或代码。 您必须找到可以发挥自己优势的过程，并且您最适应。 下图显示了几个典型过程：
37signals以提倡使用草图和直接编写代码而闻名，尽管似乎有些设计师确实在其过程中涉及到视觉模型 。
对我来说，我经历了足够的从设计到编码的过程，以使过程略有简化。 这是某些人可能没有想到的步骤，但是我还考虑了我将在项目中使用的任何html / css框架。
例如，我过去在Blueprint中建立了大量站点，因此我会将线框和Blueprint都设置为相同的12列网格。 这大大加快了原型开发和开发时间，因为现在不必将每个元素的宽度写到我CSS样式表中，而是将它们预先定义为一到十二列宽。 现在，我使用cssgrid来提供响应式设计支持，但它仍设置为12列网格，您可以将其下载为photoshop模板。
就像我说过的，您要决定自己喜欢哪个过程，有时您可能要尝试几次才能意识到哪个是最有效的过程。 有些人可能真的很擅长素描，他们可能根本不希望使用线框图工具。 其他设计者可能希望有尽可能多的步骤来最小化偏差，或者允许他们在设计开始采用形式和形状时考虑每一次迭代。
您最终将开发自己的首选过程，但是出于教程的考虑，我将以我的典型过程为例：
我通常将Illustrator用作线框图工具的原因主要有以下三个原因：
- 样式–您可以保存类型和对象样式，并像CSS一样在整个过程中重复使用它们。
- 修改，移动或缩放多个对象很容易。
- 以后可以轻松过渡到Photoshop。
但是，我确实使用其他工具，这取决于项目方案。 在下一节中，我将简要概述一些流行的工具，它们的优点和缺点。
步骤3：选择工具
以下是一些流行的工具，排名不分先后：
巴尔萨米克
由于使用Balsamiq生产的线框类似于草图， Balsamiq变得流行起来，这使得线框不是最终产品而是正在开发的产品，这一点立即显而易见。 Balsamiq还具有庞大的可重复使用组件库，您可以轻松地拖放它们来设计线框。
您还可以在几乎任何平台上使用它，并提供适用于Mac，Windows和Linux的桌面版本，如果您喜欢在云中工作，则可以使用Web版本。 适用于iOS的iMockups等第三方应用程序也支持Balsamiq导出格式。
杂乱无章
Omnigraffle是 Mac上最喜欢的旧版本，它还具有广泛支持的用户提供的可重用组件库。 弱视 。
由于它是作为图表应用程序专门开发的，因此Omnigraffle还具有诸如自动布局，自定义对象样式支持，智能指南和图形工具之类的复杂功能 。 其中一些功能在Adobe CS套件中也可用，但是如果您没有CS套件，Omnigraffle对于生产详细的线框而言是物有所值的（〜$ 100）。
阿克斯雷
几乎像线框图工具的祖父一样， Axure是最早的专业级线框图/原型设计工具之一。 直到最近，它仅在Windows上可用。 我个人没有太多经验，但是众所周知，它是行业专业人员中广泛使用的工具。
Mockplus
莫克 lus是现代的多合一产品设计平台。 它提供了用于原型设计（RP），协作（iDoc）和设计系统（DS）的工具。 免费开始使用，然后使用适合您需求的计划（个人，团队或企业）。
建造者
Flairbuilder是一个新手，对互动非常有力的支持。
它还具有一个巨大的组件库，支持母版页，您可以导出原型以进行在线查看。
在线申请
如果您不喜欢使用台式机软件，那么可以使用诸如嘲笑流程（mockflow） ， hotgloo和模仿 鸟之类的工具。
主题演讲/ PowerPoint
Keynotopia “将您喜欢的演示应用程序转换为用于创建移动，Web和桌面应用程序模型的最佳快速原型制作工具”。 对于非Mac用户，请不要担心，Keynotopia还提供了Powerpoint模板。
如果您需要快速对移动应用程序进行线框设计或原型制作，我个人强烈建议您使用它。 另一个不错的选择是Keynote Kungfu 。
Adobe CS
对于已经熟悉Adobe套件的用户，Fireworks，Illustrator和Indesign都是功能强大的线框图工具，具有各自的优点和缺点。
烟花
您可以在Fireworks中进行整个设计过程，从基本的线框到完整的视觉效果。 Fireworks支持母版页（可以将其视为可重复使用的模板，在其中母版模板上的每个编辑都可以应用到整个子页面中），元素库，并且可以相对较快地使用Fireworks制作交互式原型。
插画家
这是我最喜欢使用的工具之一，因为我对Illustrator已经非常熟悉，并且我相信这里的许多设计师也会对它熟悉。 当我尝试快速但复杂的线框而无需交互时，我使用Illustrator。
是什么使它成为赢家？ 能够导出为具有可编辑图层的PSD，对Photoshop的强大复制和粘贴支持以及具有可以像CSS一样保存，编辑和重用的字体样式的强大版式控件。
设计中
与Illustrator相似的优势包括更强大的印刷样式控件，强大的母版页支持以及最近制作交互式原型的能力。
当我必须制作交互式高保真多页原型时，我选择Indesign。 对我唯一的警告是对Photoshop设计视觉效果的支持不力。
原始共享
“强大的原型制作变得容易。” 最近发布的版本9，带有新的所见即所得调色板。 值得一试 。
步骤4：设置网格
关于网格系统，有很多理论，但在此不作赘述，我将其解释为“一种结构化且简单的元素布局方法”。
我在本教程中使用Illustrator，但是这些步骤可以应用于您的任何工具。
首先，设置文件尺寸。 我使用1280 x 900，因为我将使用cssgrid，这将使我的网站可以轻松在移动分辨率之间缩放至最大1140像素。
将从cssgrid下载的模板放入文档中。
小费：
有许多网格模板可供下载，但是如果您有兴趣自定义自己的模板，请查看responsify.it 。
步骤5：确定带有框的布局
首先在网格上绘制框。 考虑一下您想向访问者提供的信息顺序，从上到下是最容易的，然后从左到右。 以下是线框示例，该线框具有当今软件公司常用的布局：
有时，尽管您仍然牢记信息的层次结构，但根据您的目标和要设计的实体，您可以在布局方面发挥创造力。 这是我从传统技术公司网站布局中脱颖而出的一位客户的真实例子：
这是博客的布局，其中包含精心放置的广告容器和针对客户的特定说明：
步骤6：使用印刷术定义信息层次结构
在对包装盒的布局感到满意之后，请开始滴加内容的零碎内容，以了解信息是否结构合理。 经验法则是相同的：您想要传递给听众的信息必须清晰，即使是在黑白线框中也是如此。
只是简单地使用不同的字体大小是区分不同级别信息的好方法。
不要害怕在这个阶段尝试。 有时，当您填写更多细节时，您可能会意识到原始布局效果不佳。 这就是线框图制作过程的全部要点。 进行尽可能多的迭代，以缩小表示您尝试交流的信息的最佳方式。
在下面的示例中，我决定我希望屏幕截图具有更大的影响力，并且我也开始使用黑框来定义哪些区域对于本网站具有重要的视觉意义：
步骤7：使用灰度进行微调
使用完整的灰度范围可以帮助您确定元素的视觉强度，而不必选择调色板。 实际上，它可能会在以后的视觉设计过程中为您提供帮助。
步骤8：高清线框
这是一个可选步骤，但是如果您想逐步增加内容，可以尝试一下。 制作线框高清晰度意味着尽可能简单地添加更多细节，而不必过于细化视觉细节。 这可能意味着将实际副本填充到线框中并尝试确定理想的字体大小：
它还可能涉及颜色：
通常的想法是，在视觉/代码阶段，您希望处于抛光模式，而不再处于绘图或实验模式。 在您习惯使用的线框图应用程序中，尽可能快地执行迭代周期（反馈<->线框图），而不是在photoshop中移动图层和像素。
话虽如此，在某些情况下，跳过太多细节而不是直接进入交互式原型阶段（ala 37signals）可能更为理想。 这是因为某些交互细节无法在平面图像上完全传达。
如果您与开发人员团队合作，则可能需要在视觉上工作时将批准的线框交给开发人员，以对基本框架进行编码。
步骤9：将线框转换为可视
前面提到，我偏爱使用Illustrator进行线框图绘制的原因是因为我可以将其导出为.psd，并且大多数类型图层都可编辑。 到我进入Photoshop时，我不需要进行太多的编辑（Photoshop具有较差的类型控制工具，尽管在CS6中有很多改进）：
这是将线框转换为视觉效果的示例。 线框的骨架几乎完好无损，尽管在视觉上进行了一些调整。 您也可以实时查看此网站 ：
结论
因此，这里我们结束了本教程。 希望它能启发您开始尝试！ 与任何设计过程一样，不要害怕进行迭代，迭代和迭代。
另外，请花一些时间尝试不同的工具和流程。 找到适合您的直观应用程序后，您将发现值得的时间投入。
请随时在评论中提出任何问题，谢谢阅读！
另外，如果您需要现成的网站组件，则Envato Elements上有大量设计精美的网站模板 。 您可以为单个低额的月度订阅下载无限的模板和其他项目。
如果您想了解有关线框图的更多信息，则可能需要查看这些资源。
翻译自: https://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399
效果图底图 线框图