认识达内从这里开始

随着互联网的不断发展，越来越多的人都在学习ui设计等互联网技术知识，而本文我们就通过案例分析来简单了解一下，ui设计师工作中会用到哪些设计工具。

1、线框图

线框图是设计的低保真表示形态，它应该清楚的表示以下3点：

a.核心内容是什么(告诉用户这是什么)

b.清晰的信息结构(告诉用户自己在哪里)

c.描述界面的基本交互操作和可视化的内容(告诉用户如何操作)

线框图是设计的基础，虽然在形式上看起来都是一样的灰色的几何图形，但却代表着终产品的每个重要部分的表示。

“表示(代表性)“在这里是一个关键术语，它能够帮你找到一个合适的保真度。在绘制线框图的时候你不能添加过多的细节，并且不能忽视线框图中任何重要的部分。你正在为整个项目的以及与你合作的人(其中包括开发人员、设计师、文案、项目经理等……)设置行为路径，他们的工作需要你精心打造的线框图。这就好比你在创建一座城市，虽然每条街道都会出现在地图上，但却被大大简化了，你能清晰的感受城市中每一座建筑，但你却无法感知它的美丽。线框图的创建应该是快速的，把节省的时间更多的花在产品思考和团队沟通上。线框图的绘制美观大方的即可，尽量使用黑、白、灰三色，制定链接可以使用蓝色。为了节省时间我们可以简化页面中各模块的表达形式，例如使用占位符。我们倾向于把线框图作为低保真的交付成果。切记–精心设计的线框图以清晰的方式表达信息，为整个团队制定方向。

2、何时使用线框图

线框图作为我们常用项目文档，通常是静态的，所以需要通过书面文档来解释在特定时间点与各个接口的交互。(文档包括：从简短的交互注释到复杂的技术文档)

当然也不用每次都需要撰写需求文档那么正式。线框图形式简单、创建快速，在内部沟通的时候可以通过清晰的草图来沟通需求。例如开发人员项目中某部分存在疑问，你可以通过线框图快速提供答案。

PS：UXPin是一家具有非常快速的开发周期的初创公司(每两天发布一次)。我们使用线框快速可视化任务(甚至很小的任务!)。它消除了误会，而且确实很便宜。

线框图很难用作测试材料，它在项目中能够灵活、快速的收集研究反馈，但无法去做详细的研究分析。

放置在整个设计故事背景下的线框图非常有效，尽管还存在一些缺点，但作为复杂项目的初期阶段，它们有着不可或缺的作用。

3、什么是原型

原型图通常与线框混淆，是终产品的中高保真表示形式，它模拟用户界面交互。它应允许用户：

a.能够体验与界面内容之间的交互

b.接近于终产品的样式来测试页面内主要交互流程

原型可以模拟用户与界面的终急交互，在页面精细程度上远超线框图，接近于设计稿。在建立交互模型的时候要谨慎处理，保证原型与终上线产品在交互上的一致性。此时可以省去技术(接口和后端)开发成本，降低原型制作的时间成本。

4、何时使用原型

原型在用户测试中发挥了巨大的作用，在开发之前可以检查接口的可用性。原型需要用户付出一定的“成本”去理解页面，其次原型与界面在形式有极高的相似性。值得一提的是原型设计相对于线框图成本更高，我建议可以开发一些常用的组件(这意味着你需要编写一些HTML、CSS，可能还有您自己的代码)，它们在一些相对简单的项目能够快速复用。正确的将原型设计与用户测试相结合，产品终的收益将会与投入成正比。

5、什么是模型

模型是高保真、静态的设计，模型可以是草图也可以实际完成的设计。模型符合特点：

a.明确的表示信息结构;可视化的内容;能够以静态的方式演示基本功能

b.鼓励人们查看实际项目的视觉

由于某些软件公司的产品名称，往往导致用户把模型与线框图的概念混淆。

6、何时使用模型

如果你的产品正处于寻找投资的阶段，模型可以帮你更快的获得投资者青睐。由于自身的视觉特性，比低保真模型更具说服力，并且比创建原型更加便捷，并且能够灵活的收集反馈。如果在提案中放入模型设计，让你的提案看起来更加专业。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。