在线画平面图(在线绘制平面图)

在线画平面图(在线绘制平面图)、本站经过数据分析整理出在线画平面图(在线绘制平面图)相关信息，仅供参考！

编辑导语高价值的原型可以在一定程度上体现你的专业性，起到锦上添花的作用。那么，如何画出高价值的原型呢？笔者对此进行了分析。让我们看一看。

最近一个朋友想换产品，正在学画样机。怎么说呢？原型图几乎是有趣的。

虽然大部分内容都被抄袭了，但还有很多可以优化的地方，比如对齐、颜色、间距等。

我们需要画一个漂亮的原型吗？

我觉得很有必要！

高价值的样机会在一定程度上体现你的专业性。

如果在采访集里画出好看的原型，给加分；

如果你是一家公司的新人，画出了好看的原型，给加分；

如果给老板和客户看了好看的样机，给加分；

，要说的是好看的原型图纸只是锦上添花。

原型是将需求转化为页面功能，最重要的是表达功能逻辑，让产品经理快速传达自己的想法，团队成员可以知道产品需求的内容。

好看的原型是在此基础上对原型页面进行可视化处理，让看原型的人获得更好的体验。毕竟“颜值即正义”。

画一个好看的原型并不复杂。我们只需要掌握基本的UI设计原则，就能收获一个好看的原型。

我找到了刚学产品时画的原型图，按照下面的规范进行了优化。你可以看一下对比效果

接下来，我们来说说如何快速画出好看的原型。它的内容很多，建议收藏。请给我点个赞~

01原型图保证原理

1.在原型的层次关系中，我们应该明确区分不同模块和元素的重要性。这让原型页面有了节奏感。

当层级关系不突出，对比不明显时，所有的信息就会混杂在一起，显得杂乱无章。

左边的原型层次关系弱，没有视觉焦点，而右边的原型利用颜色、字体大小、分割线、调整间距来实现层次划分。

起来就是突出重要元素，弱化次要元素。

层次可以用颜色、字号、字重、间距、分割线等来划分。对应的层级关系见下图

根据内容的重要性，选择不同的颜色、字体大小、字重和间距。下面我们将详细介绍这些内容。

2.内容相关性对于内容相关性，我分为两类，一类是元素的相关性，一类是填充内容的相关性。

元素的关联性元素是指原型中的组成元素，是指将界面元素的内容进行分组，并将相关内容可视化地合并成一组，最终目的是划分层次关系。填充内容的相关性比如按照真实内容填充文案；这个没必要，你也可以直接用文字说明内容是什么。

3.设计一致性一致性是指原型中组件的一致性，如相同的字体、相同的间距、相同类型的组件、相同位置的弹出按钮等。

一致性使得原型界面非常标准。有了一致性，我们就可以直接重用每一个组件，编制出一个组件库。相同的元素可以直接复用，大大提高了绘制原型的效率。

4.不要过度。不要过度追求像素级标准，不要过度添加装饰性内容，不要过度追求动态效果。

，对自己的设计要求严格是好事，我们需要明确原型的作用。不是UI设计稿，是让你表达想法的可视化界面。

我不建议画像素级的原型。你的意思是用字体10px还是11px，圆角10px还是8px等等。几个像素影响不了你的原型。挑像素是UI做的事情，所以把挑像素的精力用在需求分析上会更有用。

，不要过分追求装饰性的内容。一个长方形能表达的东西，不建议为了更好的效果加入复杂的个性化设计，因为麻烦。

还有，不要过分追求动态效果。添加过多的动态效果费时费力，投入产出低，甚至比上面说的像素拾取还麻烦。

不要陷入动态效果的陷阱，过度追求高大上的动态内容。只需使用原型的基本页面跳转、隐藏/显示和动态面板。

02掌握基本的设计规范每个人对于UI设计都有自己的设计规范，对于原型设计也是如此。

，原型的设计规范不需要像UI设计稿那样严格。让我们来看看规格

1.尺寸1)手机首屏375px宽，667px或812px高。

推荐375667，因为UI设计稿也是按照这个尺寸设计的。

虽然375812的尺寸在iOS机型中占比很大，UI设计稿也是按照这个尺寸设计的，我不推荐。

原因是在这个模型中，状态栏变成了44px，底部有一个安全区域，对我们的原型设计不利。最好继续用375667。

它的尺寸是375667。我就简单说一下，理解一下。

显影时，使用的单位是pt，显示在屏幕上时，使用的单位是px。

用户界面设计为375667磅。导出一倍@1x、二倍@2x、三倍@3x的裁剪图，即从pt单元 1、2、 3得到px单元的图片，提供开发适应不同型号。

35 667的尺寸在所有iOS机型中是中等的，上下都能很好的贴合，所以我选择了它。安卓也是按照这个尺寸设计的。

，按照这样的尺寸设计，我们在预览原型的时候，也可以把所有的内容都显示在屏幕上。

文中提到的字体大小、间距等尺寸均以375667(1倍图)为准。

2)PC端建议宽度1440px，首屏高度900。

PC的原型尺寸可以按照1440px的宽度和900px的首屏高度来设计。侧面导航栏建议200px，顶部导航栏建议60px。

3)平板首屏7681024px。

2.彩色原型尽量用黑白灰。Axure的调色板中的黑、白、灰完全可以满足样机的使用。不建议自己弄一套颜色规格。

在我提取了我常见的黑、白、灰三种颜色之后，我们来看看

从左到右，颜色渐淡，页面表达的层级关系依次递减。

在级别最高、重要性最高的页面中，最左侧使用纯黑色，第二重要的内容为灰色，依次递减。

颜色的选择也受背景色的影响。上面的例子是用白色背景设计的。对于其他背景色，我们可以调整选择不同的颜色进行对比和突出。

对于面膜的颜色，我们可以选择纯黑，调成50%透明度。

有文章说不推荐纯黑，但我觉得纯黑更能体现层次关系，大家可以根据自己的需求进行调整。

用什么颜色，我们不建议严格按照色号来，只要能通过颜色区分等级就行。

除了基本的黑白灰，我觉得还可以在原型上加上颜色，比如基本的语义色。

，按钮、标签页、复选框、单选按钮等组件的选定状态。也可以添加颜色。

但不要用色调较高的颜色，要用色调适中、不刺眼的颜色。

如果你的公司有自己的品牌颜色，可以找UI要，用在自己的原型里。

很多文章说，不要给原型图加颜色，会影响UI设计。高级UI设计器不会受到影响。

3.字体、字号、字重、行距的原型用1个字体就够了。你可以使用Axure的默认Arial字体。

如果想更好看，建议使用方形字体，然后设置为默认字体。

如果你没有安装方形字体，有一种方法可以在文本的末尾得到它。安装字体后，重启Axure，然后将方形字体设置为默认字体。

Axure默认字体设置方法项目-组件样式管理-字体-选择字体。

字号是指字体大小。常用的尺寸有20px、18px、16px、14px、12px、10px。

重是指字体的粗细，即细、中、粗。常用中粗，不用细。

不同的字体大小和不同的字重也被用来区分不同的层次关系。

我们需要重新组合颜色、字体大小和字符，以获得一套完整的单词层次结构。

我建议如下

一级标题20px，加粗，颜色#000000主标题18px，选择性加粗，颜色#00000次标题16px，选择性加粗，颜色# 00000副标题14px，选择性加粗，颜色# 00000正文14px，选择性加粗，颜色# 00000颜色#333333/#555555次文本12px/10px，不加粗，颜色# 55555/。

不需要特意去记。在绘制原型时，根据层次关系和实际效果进行调整。

行距Axure9中使用不同字体和大小时，行距会自动调整。我们可以直接沿用Axure9的自动行距。

如果想更好看，可以按照1.5倍字体大小调整行距，比如文本中14px字体大小对应的行距为21px。

字体较多时，可以适当调整行距。

还有字间距，可以忽略。如果想更好看，可以手动调节看看效果。

3.间隔、对齐、分割和分配一个好看的原型必须是间隔和对齐的。

为了保证内容的可读性，体现留白和层次关系，在绘制原型时必须考虑间距和对齐。

1)安全间距

在绘制原型之前，我们应该在原型的两侧保持安全距离。可以选择10px或者20px。

移动端我一般选择10px，可以通过拉出标尺线或者放10px宽度的热区来限制。

2)特定间距

不同模块间距推荐10px和20px，间距可以10的倍数调整。

各种模块间间距我分为三种，分别是模块间间距、子模块间距和模块间元素间距。

对于模块内部的间距，建议只关注上下左右的间距。左右间距相同，上下间距相同。

移动终端的尺寸建议为10px/15px/20px，但不需要特别的标准。对齐满足后，间距可以区分每组关系。

PC可以有选择地放大到20px和40px。

子模块间距不建议挑像素，可以分层次。

可以直接选择各个子模块，然后保证水平分布和垂直分布的间距相同，要保证间距能够达到分组的效果。

如果要挑像素，可以按5px的倍数调整。

一个子模块内的元素组件间距我一般不在乎不同元素之间的间距，只要间距能达到层次分离的效果就行相关元素相互靠近，无关元素略大。

也可以5px的倍数调整，但不建议。没必要挑像素。如果你真的想仔细挖掘，那么你不是在画原型，你是在做UI。

在Axure9中，我们可以设置【刻度、网格和辅助线】来显示组件的网格和对齐方式。

在[组件对齐设置]中，勾选组件对齐和边缘对齐，垂直和水平设置为5像素。

这样，可以显示间距，并且可以实现自动对齐。

5.对齐对齐是原型中最基本的要求。即使你的字体，间距等。都不是标准化的，有了对齐，原型看起来会好很多。

对齐方式分为左对齐、垂直居中对齐、右对齐、上对齐、水平居中对齐和下对齐。

在Axure中，可以直接选择要对齐的组件，点击顶部导航栏自动对齐；对齐基于第一个选定的零部件。

，在Axure9的设置中，检查网格对齐、辅助线和元件对齐，使其自动对齐。

有些对齐原则可以直接参考(以下内容参考Antdesign):

1)表单类对齐

冒号对齐(右对齐)可以将内容锁定在一定范围内，让用户的眼睛跟随冒号的视觉流向，从而找到所有的填充项，提高填充效率。

2)文案类对齐

如果页面的字段或段落短且分散，就需要确定一个统一的视觉起点。

3)数字类对齐

为了快速比较数值，建议所有数值取相同的有效数字，并向右对齐。

6.分布是指垂直分布和水平分布，构件以相同的间距排列。

当有相同内容3条时，可以考虑自动分发，比如多个图标排列，可以直接使用横向分发。

使用自动分配时，建议不要考虑的具体间距。

当实际绘制原型时，对齐通常与分布一起使用。

7.分段法利用分段的功能或突出层次关系，对相同的内容进行可视化分组。

分割方法包括空白分割、线性分割和色块分割(也称为区域分割)。

留白划分就是上面说的“间距”。同组内容间距缩小，不同组内容间距加宽。分割线用水平线或垂直线分割，可用于模块分割和子模块分割。色块分割(areal segmentation):可以理解为粗分割线。经常可以用来划分不同的模块。我们考虑不同模块之间的色块分割。这时候就要考虑不同模块分区大小的一致性了。色块间距可以按10的倍数设计和设置。

色块分割是指一种视觉效果。当我们画一个原型时，我们不需要拖动一个矩形来分割。

我们可以用灰色背景和白色背景。色块分割的效果是通过颜色对比来实现的。

同一模块内的子模块可以考虑大间距或分割线。使用的优先级是空白拆分>分割线。毕竟画一个原型，需要的元素少，所以需要的工作量少。

(有分割线，放大)

线条粗细1px，颜色推荐#F2F2F2。

，分割线样式包括列分割线、嵌入式分割线和中心分割线。给你简单介绍一下，你就能看懂了。我们用哪个对原型影响不大。

列分割线也叫总出血分割线，用来分隔完全独立的模块。内嵌分隔线当同一个模块中有重复的子模块内容时，比如图文列表或联系人列表，使用内嵌分隔线，分隔线从文本部分对齐。中间分隔线分隔线在页面中间对齐。

8.阴影绘制原型时，不建议添加阴影。太费力了。

如果想好看，可以用这个阴影色号#000000，透明度20%，x: 0，y: 1模糊4。

9.圆角在原型中，圆角或直角对原型的影响并不大。

如果想要更好的效果，可以根据圆角和直角的特点来判断

圆角柔和、友好、辨识度高、设计感强、活泼、色调直角正式、严肃、专业、冲突。冷色调推荐圆角，如横幅、按钮、封面、图片、头像等。可以适当添加。

圆角的大小不是特别严格。选择组件后，可以拖动小三角形标记。

也可以按照半径5px的倍数调整，单元面积越大，圆角半径越大。

10.对于图标的使用，我有以下几点建议

在开始画原型的时候，不要用图标，而是用文字、占位符或者圆圈来代替，在最终的原型确定之后再替换图标。图标应该清晰易懂。使用多个图标时，尽量选择风格相同的图标。如果使用线性图标，请使用所有线性图标。推荐Iconfont网站和iconpark网站。iconpark可以调整图标的线条粗细、样式和颜色，图标的种类有限。图标更丰富，还支持根据不同风格过滤。使用SVG矢量图形，不要扭曲图标。复制iconfont或iconpark中的svg代码，粘贴到Axure中，然后将图片转换成SVG形状。通过这种方式，可以修改图标颜色和调整大小，而不会失真。使用icon调整大小时，要同比例放大缩小，不要让iocn变形。

11.文案文案是在画原型的时候直接打出来的。M

填充文案的内容要尽可能贴合实际场景，考虑用实际内容填充文案。我们可以只打出日期、时间和数字，但不要写“2月31日”或“17点77分88秒”。提示要简明扼要，字数不能太多。使用符合语法的动词名词，如“添加用户”和“编辑信息”，并保持词序一致，而不是“添加用户”和“编辑信息”。使用阿拉伯数字，如“3天后开启活动”。而不是“三天后开始活动”。不要用负面的话，比如“你没有资格参加活动”，而是签到后就可以参加活动，马上签到。文案传达的是积极的暗示，比如“剩下的70%没学过”被改成“30%学完了”。当出现错误提示时，让用户知道为什么错误，如何解决。不要弹出“错误”。使用技术术语时，需要确定术语的准确性，还要考虑术语的大小写规范。是ios，不是iOS。没有错别字，比如“登录”，不是“登录”；“请稍后再试”而不是“请稍后再试”；“请稍等，马上回来”而不是“请稍等，马上回来”。内容句末不要加标点符号“今天预约满了，可以预约明天”而不是“今天预约满了，可以预约明天。”，可以加上委婉的符号，比如“~”。第二人称可以用“你”代替“你”。文案的语气可以根据场景、人群、产品调性选择不同的语气。如果是年轻化的产品，可以用活泼的语气；如果你为老年人生产产品，你的语气会很正式和严肃。

12.画原型图的时候，不需要添加具体的图片。相反，您可以使用占位符或矩形图片。如果觉得表达不清楚，可以加文字补充。

当使用占位符/矩形代替图片时，我们可以直接调整类似的大小。如果想变得更好，可以按照一定的比例进行调整。

常见的比例是

16:9，常用于视频封面和照片封面。3:2或4:3，常用于图片封面、图片列表封面、横幅等。绘制原型时，建议使用3:2。在同样的宽度下，小于4:3的高度，可以留出更多的面积给我们画原型。1:1，常用于用户头像、商品主图等。

13.动态效果无非是过度追求动态效果。关于使用动态效果，我有以下建议

看原型是给谁用的，选择性添加动态效果。

您可以添加简单的效果，如链接跳转、隐藏/显示、切换动态面板、垂直和水平滚动。

对于页面切换，PC产品建议单独绘制每个页面，添加链接跳转到新的页面，有利于编写集成的需求文档。

App页面少的时候可以直接平铺在Axure canvas中，跳转关系可以用箭头表示。

建议动态面板只用于交互显示。不要将需求文档描述添加到动态面板的页面中。没有人喜欢点击你的原型去寻找你的需求。

使用动态面板时，建议先把动态面板的所有页面都画出来，再放到动态面板里。

尽量不要在动态面板中添加动态面板。大家修改的时候很难找到动态面板。

在动态面板中切换页面时，可以有选择地添加Axure自带的切换动画和动态效果。效果建议选择“慢进慢出”。

使用隐藏显示时最好选择放在顶层，避免被遮挡。您可以选择性地添加显示和隐藏的动态效果。效果可以逐步选择，时间300ms。

对于选择日期，选择日期等。如果没有好的组件，可以直接用axure自带的文本框修改不同的类型。

对于中继器、函数等高级交互，不建议在绘制原型时使用。其他高级动画效果不建议在绘制原型时使用，可以自己学着玩。

03分享一个几年前做的会员登陆页项目的原型图，和UI图对比。

(最左边的是我当时领导画的，中间的是我改的，右边的是UI设计稿)

否则，绘制原型的首要前提是完整的需求分析、清晰的功能结构划分和清晰的流程

，不用担心原型工具。

原型工具有很多Axure，sketch，copycat，墨刀，xd，instant design，pre-code，MasterGo等。，PPT和Excel也可以绘图。

你在工作中使用的工具和工具版本不是你一个人能决定的，而是取决于公司的要求或者其他同事使用的工具。

现在主流是Axure。你可以看看我之前写的关于Axure的技巧的文章

《产品必会的30个Axure使用技巧》

《产品必会的Axure使用技巧-第二弹》

《产品必会的Axure使用技巧-第三弹》

还有一点就是要用组件库，那就是页面里所有的组件都是翻来覆去的。每次使用时只需拖拽组件库，而不是每次都要绘制。

我建议每个要画原型的产品都要有自己的组件库。我还整理了Axure组件库，并在文末提供了收集方法。

也是为了了解什么是交互组件，以及交互设计的原理。

你可以阅读这篇文章《产品经理必会的30个组件（汇总）》 http://www.woshipm.com/pd/5423893.html什么样的互动组件，你需要在原型中使用。

本文由@王大陆原创发布。每个人都是产品经理。未经许可，禁止复制。

来自Unsplash的图像，基于CC0协议。

更多关于在线画平面图(在线绘制平面图)的请关注本站。