02-Axure 线框图

1、什么是线框图？

线框图（Wireframe）是低保真的设计图，当明确表白：

• 内容纲要（什么货色）
• 信息结构（在哪）
• 用户的交互行为形容（怎么操作）

线框图不仅仅是无意义的线和框的汇合；好吧，尽管看上去是的，囧。你能够把线框图了解为设计图的骨干与外围，它承载着最终产品所有重要的局部。

线框图能够帮你均衡保真度与速度。绘图时不必在意细枝末节，但必须表白出设计思维，不能漏掉任何重要的局部。就像给我的项目以及一起合作的团队成员（开发工程师、视觉设计师、文案作者和项目经理），开拓了一条辅助了解设计的通道。说得再明确点，你是在设计城市地图，地图上能展现出每一条街道，只不过绘制上做了简化。看地图能看出城市的框架，但无奈一览城市的美感。

绘制线框图，重点是「快 」。大多数工夫请和团队成员沟通，多做思考。审美上的视觉效果则该当尽可能简化。黑白灰是经典用色，你也能够用蓝色代表超链接。如果你在筹备线框图时花了大把工夫（比方，抉择图标、上传图片），请换个简略的形式（比方，应用占位符：一个画×的图片，再加上适合的形容文字）。咱们习惯把 线框图称为低保真设计图。

切记，好的线框图能像水晶一样，清晰明了地表白设计创意，在成员中无缝传播其思维。

2、何时应用线框图

线框图经常用来作我的项目阐明。鉴于其动态设计，一次只能通过一张界面演示交互，因而，务必附上阐明。（只有有必要，简短形容或附在简单的技术文档里，都成。）

也因为绘制起来疾速、简略，它也常常用于非正式场合，比方团队外部交换。要是开发问起一个货色怎么做，回复时无妨附上一张迅速绘制的线框图。线框图难以充当用户测试的资料；倒也能收集些反馈，如果你更关怀用户意见，而非测试方法。

尽管近些年遭人闲话，但线框图在整个设计过程中施展着惊人的成果，在简单我的项目的初始阶段必不可少。

3、线框图的设计微信朋友圈

在设计之初次要是参考他人的设计产品进行本人的模拟，而后再他人的根底上进行加工欠缺，当初模拟微信朋友圈的成果，应用 Axure 设计出微信朋友圈的效果图

• 导入微信朋友圈到 Axure 中。例如我的手机是 Huawei Mate20 Pro 的，截图之后的大小的宽度是 1080px 的，而 Axure 中最大的文字的大小只有 72px 的，因而须要适当的对截图进行缩放

• 线框图称为低保真设计图，次要是体现出疾速的实现界面的性能，至于页面的 UI 和色彩设计在低保真的设计图中是不须要进行设计实现的。这一阶段次要是页面的摆放的地位和性能。A

❝

想要获取更多精选技术文章举荐的小伙伴们，请长按下图，关注微信公众号「前后端精选」，或者间接在微信上搜寻“「前后端精选」”即可关注！

❞

本文由博客群发一文多发等经营工具平台 OpenWrite 公布