《 网站 》 第二集：页面的雏形 - 线框图

商业网站

线框图（Wireframe）就是抽象化以后的具体的页面。页面的线框图一般没有具体的设计元素，都是用一些图形来表示页面上即将要出现的元素。制作页面的线框图，一般是在确定了想法之后，在具体设计之前。用最简单的东西把你的网站或应用的界面表示出来，主要就是把页面的布局，或者框架先定下来。然后再去设计具体的元素。

《 网站 》第二集，我们用 Sketch 设计工具，为即将要设计与制作的网站首页先做了一张线框图，让你对页面的结构有个大概的印象。在做线框图的时候，你应该已经先确定了想法，就是要做的页面的功能是什么。比如一张产品介绍页面，它的主要功能就是介绍产品本身，你的设计要配合页面的功能来完成目的。

我们要先做一张网站的首页，假设网站属于一家生产汽车的公司。首页是最常用的登陆页（Landing Page）， 你的用户很可能是通过首页认识你的。首页也就经常是用户对你的第一印象。我们可以通过一些常见的元素来传达一些信息，我是谁，我能为你做什么，我提供了什么样的产品与服务，我的用户如何使用我们的产品，我需要你做些什么，比如下载试用版的应用，报名参加体验活动。

根据页面的功能，把页面的线框图先画出来，然后再去设计具体的元素。设计了一些页面，如果网站或应用的交互比较复杂，你还可以做出原型（prototype），原型可以表示出界面之间的交互，它已经非常接近最终的产品了。下一步才是把界面用代码的形式表示出来。

设计，对于网站或应用来说，我认为并不只是做出复杂又精美的图形。当你决定把一块文字放到页面上的某个位置上，这其实已经是在设计了。每个网站的页面，都有很强的功能性，设计要有意义，要服务于页面本身的目标，要准确的传达页面要表示的东西。除了设计师，或者非常在乎设计的人以外的其他的用户来说，页面的设计其实是不存在的，如果他们意识到了你的设计，多数都是由于你的设计惹恼了他们。

这一集我们用了 Sketch 设计工具，它只能用在 macOS 平台上，没安装 Sketch 或者 Windows 用户可以越过这一集，不过我还是推荐可以看一下，说不定有些内容你会受到一点启发。如果你认为 Sketch 是不错的设计工具，视频里有一集专门介绍了怎么买它（Sketch 不是我们的赞助商，我没收钱推荐）。后面我们还会用到一点 Sketch，我们会一边儿设计，一边儿把设计出来的界面用代码的形式表示出来。