草绘基于网格的线框的最佳资源
那么，您实际上应该如何在新项目中执行线框图工作？
这个早期的想法阶段对于理解您打算构建的布局和用户体验至关重要。
这包括可视化，研究其他站点以及快速制作原型 。
设计界面的过程总是从产生想法开始。
在本文中，我想分享这两种技术的最佳资源，以帮助您创建自己的基于网格的UI线框 。
但是数字线框图也很大，对于现代设计师来说，这是一个可行的选择。
我是传统纸张和铅笔的爱好者，并根据需要使用其他工具 。
早期的UI / UX概念化
这两个词经常互换使用，因为它们涉及同一过程。
但是线框只是各个页面的草稿 。
它可能具有说明按钮文本，边距，元素大小甚至动画的标注。
线框是网页或应用程序的UI的单个静态草图 。
因此，原型连接线框以演示不同的按钮或链接应如何指向其他页面。
类似地， 原型就像流程图，显示了不同页面如何链接在一起 。
但这就是我通常看到的描述方式，也是许多设计师最了解这些术语的方式。
这些定义并非一成不变，有些设计师可能有自己的术语，可能与我的确切表述不一致。
我想说原型并非总是必要的，但这是一个很好的主意，尤其是对于设计具有复杂交互作用的应用程序而言。
他们真的有必要吗？
那么您应该如何处理这些早期的概念作品呢？
您可以了解整个页面的布局方式，这在设计具体布局时非常宝贵。
它可以帮助您专注于全局，而不必担心细节。
但是对于每个新项目，线框图始终是一个好主意 。
线框图的目标
许多站点甚至有多个目标，其中一些目标比其他目标更重要。
每个站点在构建时都考虑了特定的目标。
每次启动新项目时，都应考虑要解决的问题 。
在第一个线框上可能不会发生这种情况，因此请准备草绘许多不同的想法 。
使用线框图作为指南，以帮助您找到捕获网站目标的最佳策略。
分析内容的组织方式以及在每个页面中的移动方式。
查找其他类似的网站，并写下其最佳功能。
它们是数字接口的表示，因此您要牢记这一点。
这些不仅仅是漂亮的图片。
从交互角度考虑线框。
现在，让我们看看创建线框的最佳资源。
无论是纸制还是数字式的基于网格的资源，都可以帮助您快速绘制草图。
网格画板
就个人而言，我通常会开始处理打印机纸，因为这样一来，我就不再关注网格，而更多地关注生成想法 。
您总是可以从打印机纸上的基本缩略图草图开始，只是为了勾勒出粗略的想法 。
网格可帮助您估计页面上项目之间的距离 ，并在线框中创建一种对称性 。
如果您想清理一个主意 ，并为其提供更多结构，则点栅格画板是最好的方法。
它只有80页，但这在大多数网格素描本中是相当典型的。
如果您想在纸上开始线框图制作 ，那么这里有很多很棒的产品，例如Rhodia Dot Pad具有各种尺寸，可以日常使用。
Dotgrid的所有商品都比Rhodia的书贵，但它们带有更多的材料和定制的封面设计。
另一个非常酷且可自定义的产品是Dotgrid 。
每本书只有不到100张纸，因此包括正面和背面在内，您可以获得约200页的网格草图。
Dotgrid甚至接受定制订单 ，让您设计自己的自定义画板 。
我想提及的其他一些点网格速写本包括精装和螺旋装订的Behance点网格 ，尽管它仅包含50张纸。
没有其他产品设计师需要响应式设计速写本，但是Web设计师可以从网格布局之上以不同的设备宽度生成想法的*中受益匪浅。
响应式设计速写本是网页设计师的最佳资源之一。
这些响应式设计板也有50页，共100页，但是每页都有四个不同的响应式网格，它们代表了响应式设计中的不同断点：台式机，笔记本电脑，平板电脑和智能手机。
如果您喜欢这种东西，那么值得订购一个试驾车。
尽管与Dotgrid书籍相比，该设计平淡无奇，但没有其他人考虑过针对网页设计师的自适应素描本。
这个免费的站点提供了可以打印的各种网格模板 ，这些模板可用于手绘线框。
如果您真的很喜欢手工制作，并且不想花任何钱，也可以使用Interface Sketch 打印自己的网格页面 。
您可以从许多选项中进行选择，例如用于全长Web浏览器的模板或不同的iPhone屏幕。
网格采用A4和US字母大小，适用于不同样式的打印纸。
纸张是快速获取新想法的最简单媒介之一，因此，即使是UI设计师，它通常也是首选。
所有这些选项都很不错，如果您喜欢铅笔素描 ，则非常值得探索。
数字工具和网络应用
那里有很多很棒的线框图程序 ，以至于它们几乎没有风险就不会陷入分析瘫痪，所以现在让我们集中讨论基于网格的线框图的一些最佳选择。
但是，如果您已经使用Adobe Creative Cloud，那么它可能是一个不错的起点。
这不是每个人工作流程的一部分，Illustrator当然不是免费的。
首先，我想提一下，您可以使用Adobe工具（例如Illustrator）来创建自己的线框 。
1.
您可以使用可视化编辑器和资产库在整个页面上进行拖放。
Moqups是用于线框图的最佳在线工具之一。
这是一个很棒的网络工具，使使用网格进行设计变得非常容易。
每个新的Moqups项目都有一个预定义的网格 ，并使用明亮的紫色线条帮助您将元素对齐。
该网站确实有高级选项，但每月支付的费用可能比仅使用Adobe工具或一次性购买Sketch更为烦人。
默认情况下，该站点按免费计划运行，该计划将用户限制为300个页面对象。
2.
您为项目创建一个名称，并为线框获取自己的唯一URL，您可以在任何计算机上进行编辑。
Grid Papr Web应用程序是完全免费的，并为您的线框提供公共帐户和私人帐户。
只需将所需的任何内容拖到页面上，然后按照网格创建一个星形线框。
这些功能很简单，但足以在数分钟内创建一个低保真线框 。
每个新的线框都带有一个网格 ，可让您在所有元素上执行网格对齐。
3.
您还可以保存和共享您的工作。
您只需单击并拖动即可在画布上创建新元素。
它具有一个整洁的界面 ，一个预先构建的网格和井井有条的工具栏 。
Wireframe.cc是可用于线框设计的最简单，最少的工具之一。
无需帐户即可在任何计算机上使用免费工具。
每个计划都是按月计费的，因此在价格结构上与Moqups非常相似。
这是带有可选高级计划免费提供的另一种工具。
4.
这可能会使某些用户感到烦恼，但是该工具确实令人难以置信，并且可以在所有浏览器中运行。
您可以免费开始使用，但试用期为7天。
模仿鸟是另一个不错的选择，它比大多数线框图工具提供了更多功能。
默认网格使用960gs网格系统 ，但是您可以从12、16和24列中选择 。
Mockingbird具有无休止的UI元素库，例如标签，手风琴，下拉菜单，视频播放器和简单的文本链接 。
最后的话
进行此类工作时需要学习很多东西，因此请找到最适合您的工具。
无论您选择传统的还是数字式的线框图，始终都取决于输出的质量 。
本文中的资源应为您提供足够的资源，以开始对自己的数字接口进行线框图设计。
随心所欲，无论是喜欢自己喜欢的东西（纸质还是数码产品），都可以自己制作。
向前迈进最好的事情就是开始做线框图 。
翻译自: https://www.hongkiat.com/blog/sketching-resources-grid-wireframes/