当我们进行软件或者网站的设计时，通常需要进行原型设计，确定整个界面的布局，这个布局的设计就是layout图。也可以理解为是将视觉设计转化为代码的过程。因为我们在实际开发中无法直接使用视觉设计稿，因此需要将设计稿转化为代码，layout图就是用来指导开发人员实现具体功能和功能布局的。
通俗点说，layout图是将关于网站或者APP上所有元素在界面上的位置关系表示出来的一种所见即所得的设计稿。layout图一般包含多个层次，包括整体页面布局、主要功能模块布局、详细功能模块布局等。
layout图在设计时，需要遵守一些基本的设计原则，以保证布局的美观、简洁、易用。主要有以下几个方面：
1. 明确目标：在设计layout图时，要清晰明确要展现什么内容和实现什么功能。所有的功能模块要有明晰的表达，页面上每个元素也要有对应的位置。
2. 简洁美观：避免使用冗余的视觉元素，在使用色彩的时候要以色调搭配为主，并不断尝试去优化布局，以实现对用户视觉的最大吸引力。
3. 易用性：layout图的重点在于方便开发人员操作，也同样要遵循易用性的原则。设计的内容要被普通用户轻易的理解和使用，主要针对的是终端市场。
在软件开发中，layout图的作用不可忽视，它可以为开发人员提供清晰的开发指导和开发难点分析。它可为开发人员提供方向性，节约了开发时间和成本，并且可以避免出现一些纰漏和错误。
另外，layout图也可以作为后期产品改进的主要依据，它可以通过用户反馈来修正布局的错误。它可以让我们更好的完成整个产品功能要求，并且与视觉设计融合完美，将视觉设计感和技术功能结合起来。这不仅是视觉和技术的融合，同时也是一个产品的优化过程。
在制作layout图的过程中，我们可以使用很多工具，例如Sketch、Axure、Omnigraffle等，根据自己的实际情况选择合适的工具来使用。其中，Sketch是目前比较常用的工具之一，它的界面简洁清晰，支持多种文件格式，可以很好的进行界面设计和动画制作。
Axure可以帮助我们建立动态交互原型，模拟产品运营场景，还可以将原型文件直接转化成可阅读的HTML文件，方便和团队协作交流。Omnigraffle则是一款专注于布局设计的工具，它可以处理各种复杂的布局设计，使我们更好的完成相应的作品。
关注微信