如果你是一名 UX 设计师，那么我们想问你几个简单的问题……
> – 你会如何决定网页导航栏中的组件或元素？
> – 你会如何决定在网页上使用四列网格还是三列网格？
> – 你会如何在移动应用中决定是使用可滚动项目还是固定高度的项目？
> – 图片应该放在哪里？视频应该放在哪里？链接应该放在哪里？列表项应该列在哪里？
当你构建一个应用程序时，所有上述问题都需要得到回答。对于一个小型的简单网站，这些事情可能很清楚且容易被忽略，但对于像 Flipkart、Amazon 或 Zomato 这样的大公司来说，这些事情绝不能被忽视。
在本文中，我们将回答所有上述问题，并讨论 这些设计是如何在 Google、Microsoft、Uber、Flipkart 等大公司中被设计和生产出来的。
在 UX 设计中有一个线框图（Wireframing）的概念，大多数在大公司工作或为大型客户服务的设计师都会遵循它。如果你是初学者，或者你在一家小型初创公司工作，这对您来说可能是一个新的技术术语。那么让我们详细讨论这个话题，了解一下它到底是什么，以及为什么设计师应该遵循这个概念。
什么是线框图？
线框图 简单来说就是你希望数据如何在页面上展示的想法。它基本上是网页的蓝图或骨架，代表了你的产品应该是什么样子。一个好的线框图代表了网页的整体结构以及这些页面上的导航流程。想象一下你正在设计一个移动应用程序。当用户在使用线框图时，你需要为用户移动经过的每个屏幕创建一个线框图。
线框图用于定义和规划页面或屏幕上的信息层级。页面上的项目应该如何组织，什么样的内容应该放在哪里，例如导航栏、图片、视频等。空间应该如何分配？有哪些可用的功能？基本上在线框图中，你代表了不同元素的定位，例如按钮、菜单、图片、视频和标题。
线框图的核心在于我们要确定哪些数据是我们希望用户在第一时间就能看到的首要数据，以及哪些数据可以移到第二页，以便用户点击并查看这些数据。如果你看到一个黑白颜色的二维页面界面图，那么它很可能就是一个线框图。在线框图设计中，请记住，你的主要目标不是表现按钮应该是什么样子，或者应该使用什么颜色、图片、视频、段落或标语。下面是一个线框图的例子……
线框图的优势
大公司在实际进入编码阶段之前会创建线框图，但如果你是自由职业者，那么你肯定会面临很多问题。
想象一个场景，你正在开发一个产品，在收集了需求之后你就直接开始构建它。如果你的客户要求你定期更改网页上的东西，你会感觉如何？如果客户每次都嘲笑你把网页上的东西移来移去怎么办？
以上所有情况对于 UX 设计师来说都是非常令人沮丧的。在 UX 设计过程中频繁更改并不是一个好习惯。它增加了成本，并且你在开发阶段投入了更多的资金。
如果你在进入编码阶段之前创建一个线框图，你就可以摆脱这些问题。你的客户也可以为你创建这个线框图，他/她也可以展示网站应该是什么样子。这完全取决于你们双方。
线框图是了解用户如何通过不同元素的定位与用户界面交互的好方法。它让你清楚地知道你的最终产品应该是什么样子。线框图使开发人员和设计人员的编码或开发阶段变得容易得多。
如何创建线框图？
“够了，理论概念讲得够多了，让我们进入正题，看看如何创建一个线框图？如何实际使用它？有哪些不同的创建线框图的方法”
我们读到这么多线框图的概念，现在你的大脑可能很痛，现在你可能想对着上面这些内容大喊大叫……