在网页设计之前，客户如果提出相应的需求，想看看网站的设计稿，大多数网络公司，还是可以理解，那么，公司出设计稿，需要做哪些方面的内容，有哪些点需要注意呢？针对这部分的需求，小编想和大家具体的讲一下。

线框图（Wireframe），原型（Prototype）和视觉稿（Mockup）这三者之间相互关联，有相似性，但是截然不同，但是对于许多人而言，它们依然令人感到迷惑。想要明白它们之间的差异和关联，较好的办法是通过具体的设计流程和实际运用来了解。

从构思到开发，中间通常会经历三到四个不同的设计阶段。

-通过绘制UI草图，从诸多想法中筛选出较有潜力的方案

-绘制线框图，规划信息的层次结构，将内容分组，突出核心功能

-绘制包含细节的视觉稿

-将真实的交互和视觉汇集到一起构建成原型

这样的几个阶段构成使得设计师可以低成本、快速地测试和迭代它们的想法，设计产品框架。这不仅仅适用于全新的产品搭建，而且适宜于界面的新版本更新。

接下来，我们不妨专注于视觉稿的设计环节。线框图是低保真的，而视觉稿则是增加了细节，但是并未加入交互，和高保真的原型相比，它算得上是中等保真度。视觉稿是静态的，细节丰富高还原度的，所以你可以通过这一特征来区分它。

将线框图视作为骨架，在此基础上加入配色，搭配好字体，注入品牌相关的素材，对内容布局进行适度调整，加入样式合适的导航，视觉稿就出来了。

那么为什么要加入视觉稿的设计环节呢？因为视觉稿是清晰传达视觉要求的较有效方法之一，对于甲方、开发等利益相关者而言尤其重要，如果没有视觉稿，而是转而借助早期的低保真线框图来展现产品进度，无疑是会让人觉得不舒服的。虽然视觉稿不具备交互性，但是对于经验丰富的开发者或者其他参与者，是可以从中获得大量的有效信息的。

“视觉稿在线框图的基础上发展而来，更具有组织性也更符合团队的愿景，它额外的优势在于，通过优秀的视觉，向利益相关者呈现出更为有效的信息。”——Marcello Graciolli

基本上，视觉稿是线框图和原型之间的粘合剂。