线框是网站设计过程的重要组成部分。它有点像一个网站或者应用项目的蓝图,可以帮助你及早发现哪些可行,哪些不可行,还可以让你在不受设计干扰的情况下设置内容和重点。
如果做得好,线框可以让你的思路清晰。但如果没有正确完成,可能会导致项目脱轨。基于此,这里有一个方法来提高你的线框技能,以及如何使用一些有用的线框工具。
1. 从草图开始,从你最喜欢的设计工具开始听起来是个好主意,但是用纸和笔画来绘制轮廓图实际上可以得到更好的效果。这个过程不会花很长时间,但是可以帮助你更好的理解整体规划。
2. 跳过颜色线框的目的是显示内容、页面和视图元素,并描述应用程序的功能。添加任何设计元素,比如颜色,都会偏离原来的目标。颜色的问题可以留给视觉稿阶段,拉丝的时候没必要考虑这些。
3. 保持简单,不要把线框复杂化。简单的线框有助于你专注于大局,避免分心。线框应该清楚地描述应用程序的可用性和功能性。在这个阶段,你不需要知道细节或者设计的最终效果。
4. 使用更好的样本数据,样本数据可能会破坏线框。当然,你不需要花太多时间在线框中填充数据,但至少要确保使用的样本数据是相关的。
5. 必要的时候添加注释线框是设计和开发应用程序或网站的指南。如果您希望线框更容易理解,您可以在必要和适当的地方添加注释。
6. 使用网格系统和布局框制作线框的一个有趣技巧是,它可以使用网格系统和布局框简单快速地对不同的组件进行分类和排列。
7. 打造可重复使用的样式与符号,大多数可以用来制作线框的软件都具有创建和重用样式和符号的功能。这不仅可以加快生产过程,还可以保证线框的一致性。
8. 使用正确的工具很多软件都适合做线框,其他的都是专门用来做线框的。这里有一些常用的工具:Sketch是更好的工具之一。与InVision等其他解决方案一起,Sketch可以为设计人员提供完成工作所需的工具。Affinity Designer是一个轻量级的矢量设计工具,它完全满足制作线框的所有要求。Pencil Project是一个免费的开源工具,内置了安卓、iOS和Dojo的形状和模板。也可以应用到线框网站和桌面应用。
9. 了解线框图类型如果你不熟悉“忠实”这个词,它指的是细节层次。在线框图中,可以选择低保真和高保真,这两者都是必须的,各自的功能和用途是不同的。低收入线路图是基础。它没有多余的东西,所以可以很快制作出来。它的主要目的是让你工作。高保真线框可以提供更多细节,但肯定没有视觉草稿那么详细。线框一般为灰色或单色,是一种接近实际设计的显示。
10. 快速获得反馈方块图的优点之一是生产周期短。这样可以在设计过程中尽早与团队分享,尽快得到反馈