近段时间身边有些朋友打算进行产品的转手, 而自己正处于学习绘制原型的阶段不过怎么去表述呢, 所绘制出的原形确实在水准方面稍欠那么一些火候。

尽管多数内容被临摹出来了, 然而仍存在诸多能够优化之处, 诸如对齐方面, 颜色方面, 间距方面, 处理得并不理想。

那我们需不需要画出好看的原型？

我认为有必要！

高颜值的原型图在一定程度上会体现出你的专业度。

如果你在面试的作品集中画出好看的原型，加分；

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

如果给老板、客户展示好看的原型，加分；

但是呢，要话说在前：好看的原型图仅是锦上添花。

原型所要达成的是使得需求向页面功能进行转化, 其中最为关键紧要的是要能够将功能逻辑予以清楚呈现, 用以助力产品经理能够便捷高效地把自身想法传递出来, 进而让团队成员得以明晰产品需求所包含的具体内容。

而好看的原型, 是在这个基础之上, 针对原型页面开展视觉处理, 使得看原型的人, 能够获取更好的体验, 毕竟“颜值即正义”。

构想出具有美观成效的原型并不是极为繁杂的事情, 我们仅仅需要把控住基础性的用户界面设计原则, 便能够获取拥有美观特质的原型。

我寻得了我才对产品展开学习之际所绘制的原型图, 且依据下文的规范予以了优化, 大家能够瞧一瞧对比之后呈现出来的效果:

紧接着, 我们要讲一下怎样迅速地绘制出漂亮的原型, 这个内容是比较繁多, 所以在这里建议各位一定要收藏起来, 要是方便顺手也帮忙点下那个赞！

01 原型图要保证的原则

1. 层级关系

于原型之中, 我们需显著分辨出各异模块、不同元素之重要程度, 如此这般, 原型页面方具节奏感。

倘若层级关系并非显著突出, 并且对比也不是十分明显, 这样一来, 便会使得所有的信息相互混杂融合在一起, 进而显得杂乱而无章。

居于左边的原型层阶关联太过薄弱, 不存在视觉方面的重点, 处在右侧的原型借助颜色、字体尺寸、运用分割线以及调节间距大小这般的方式来实现层级区分的成效。

总结来看就是：突出重要元素，弱化次要元素。

颜色, 字号，字重, 间距, 分割线等方式, 能够用于层级关系的划分。与之对应的层级关系, 可查看下图:

依凭内容重要程度存有差异, 去挑选不一样的颜色, 选定不一样的字号, 确定不一样的字重, 设定不一样的间距, 便是如此, 下边我们会把这些内容作详细的介绍。

2. 内容关联性

在内容这种关联性方面, 我作了划分, 有两个类别。其中一个类别呢, 是元素所具备那些关联性。另外还有一个类别, 是填充内容所拥有的关联性。

组件元素在原型里, 是对界面元素内容分组, 从视觉上把关联内容合并成一组, 其最终目的是划分层级关系, 这体现了元素的关联性, 比如文案按真实内容填充算填充内容的关联性, 这并非强制性的, 也能用文字直接说明内容是啥。

3. 设计一致性

一致性有所指, 其为原型里的组件内容维持一致, 像字体呈现相同的状态, 间距保持一致的情形, 各类组件具备相同这般, 弹窗按钮所处位置也是相同的等。

一致性能使原型界面展现出极为规范的状态, 当具备了一致性之后, 我们能够直接对各个组件进行复用, 进而制定出组件库, 对于相同元素而言, 能够直接予以复用, 这会极大地提升画原型的效率。

4. 不要过度

千万不能过度地去追寻到达像素级别的标准模式, 绝对不要过度地塞入增添有着装饰性质的内容成分, 务必不要过度地去追求那种动效表现形式。

对于自身设计要求严格, 这确实是件好事, 然而, 我们必须明确的一点是, 原型所具备的作用, 它并非是那种UI设计稿, 它乃是能够让你将想法予以呈现的可视化界面。

我不建议将原型绘制到像素级别, 这里所说的像素级别, 比如是采用字体10px还是11px, 是选择93而3px圆角还是8px圆角之类的情况。几个像素并不会对你所制作的原型产生影响, 抠像素那是UI所负责干的事情, 可要是把用于抠像素的精力投入到需求分析方面相对而言会更具作用。

不要另外过度去追求装饰性的内容, 一个矩形能够表达出来的内容, 不建议为了获取更好的效果而施加复杂的个性化设计, 原因全在于费事。

另外, 不要过度去追求动效, 因为添加过多的动效, 既会耗费时间, 又会消耗精力, 而且投入产出比例低, 甚至比上边提及的抠像素还要耗费更多的事。

万不可深陷动效的圈套之中, 切莫过度执意于高端大气有极致感的动效之内容。基于原型的实践之际, 使用根基性的页面跳转途径、隐匿或展现的方式、动态面板这般便足矣。

02 掌握基本的设计规范

不管是UI这方面的设计搞, 相关是存在自身所具备的设计规范的, 但就原型设计而言, 情况也是如此这般的。

然而, 有关原型的设计规范并非要如 UI 设计稿那般严谨, 我们随后瞧瞧存在哪些规范。

1. 尺寸

1）手机端：宽375px，首屏高667px或者812px。

推荐375乘以667 , 是由于UI设计稿同样依据这个尺寸来做设计的。

尽管375乘以812这个尺寸, 在iOS机型里所占的比例相对较多, 并且UI设计稿也是依据这个尺寸来做的设计, 可是我并不建议去使用。

之所以会这样, 是因为在这个特定机型里, 状态栏转变成为了44px, 并且底部还存在安全区域, 这对于我们的原型设计而言, 没有任何益处, 如此这般, 倒不如继续沿用375×667。

为啥就是375×667这个尺寸，我简单说下，了解即可。

进行开发之际, 所运用的单位为pt, 于屏幕之上予以显示之时, 所运用的单位是px。

UI设计时采用375×667pt来开展设计工作, 之后在导出一倍图@1x、二倍图@2x、三倍图@3x的切图时, 是通过将pt单位分别乘以1、乘以2、乘以3从而得到px单位的图片, 接着把这些图片提供给开发人员, 以此用于适配不同的机型。

有一个尺寸是375乘以667 , 它在iOS的全部机型里处于居中的尺寸状态, 朝着上方与下方去适配都能够达成良好适配效果, 所以就挑选了它, 安卓也是依据这个尺寸来开展设计的。

另外, 依据这个尺寸来进行设计, 当我们去预览原型的时候, 在屏幕之上, 也能够将全部内容给显示出来了。

文章内所提及的字号, 还有间距等方面的大小, 皆是依据375×667（1倍图）去制定的。

2）PC端：建议宽，首屏高度900。

关于PC端的原型尺寸, 可依照宽来设计, 首屏的高度设定为900px就行, 侧边的导航栏建议为200px, 顶部的导航栏建议是60px。

3）平板：首屏768×。

2. 颜色

构建原型之时, 尽量选用黑白灰颜色, 于Axure的颜色色板当中, 黑白灰完全能够满足原型构建的使用需求, 故而不建议自行单独去弄一套颜色规范。

我将我常用的黑白灰颜色提取出来后，我们看下：

颜色从左到右以及变淡，在页面中表达的层级关系也依次降低。

那种于页面里层级处于最高位置、重要程度也是最高级别的, 选用最左边的纯黑色来呈现, 而次一级重要的内容则运用灰色来展示, 并且按照这样的顺序依次递减下去。

颜色的挑选同样会被底色所左右, 上面所举的例子是借助白色底来开展设计工作的, 针对于其他的底色而言, 我们能够予以调整, 进而挑选不一样的颜色去进行对比以突出效果。

对于遮罩的颜色，我们可以选择纯黑，调整为50%透明度。

存在一些文章表明不建议采取使用纯黑, 反倒是我觉得纯黑能够更为出色地展现出层级关系, 各位能够依照自个儿的需求予以调整。

到底具体运用什么样的颜色, 我们并不建议严格依照色号来进行, 只要是能够借助颜色把层级区分出来就行。

在除开基本的黑白灰之外的情况, 我觉得在原型当中是能够去添加颜色的, 就像那种属于基本的语义色一样。

像按钮, tab页选中状态, 复选框, 单选等组件的选中状态, 另外也是能够添加颜色的。

但不要选用那种色调偏高的颜色, 而是要采用那种色调处于适中状态, 且不会让人眼睛感到刺眼的颜色。

假设你们公司存在自身的品牌颜色, 你能够去寻觅UI索要, 将其运用至自身的原型以内。

不少文章讲, 在原型图里头别去增添颜色, 要是增添了将会对UI设计造成影响, 然而那些具备高级水平的UI设计师是不会受到这种影响的。

3. 字体、字号、字重、行间距

在原型里, 仅使用一种字体便足矣, 你能够采用Axure默认的Arial字体。

若你期望能有更美观的视觉呈现, 建议选用苹方字体, 接着把苹方字体设定成默认字体。

倘若你并未进行苹方字体的安装操作, 那么在文章末尾处存在获取途径, 当把字体安装妥当之后, 重新启动Axure便可, 接着将苹方案字体设定为默认字体。

Axure的默认字体设置办法是, 先进入项目, 接着找到元件样式管理, 再点击字体, 最后从中选择苹方。

字号所描述的是字体的大小情况, 而其经常被使用的大小数值分别是20px, 还有18px, 以及16px, 再加上14px, 另外还有12px, 甚至于还有10px。

通常所说字重, 指的是字体呈现出来的重量状态, 具体涵盖细体、中等以及加粗这几种式样, 平常经常会被运用的是中等与加粗这两种样式, 而细体则未曾被使用过。

不同字号、不同字重也是用来区分不同层级关系的。

需将颜色, 与字号, 还有字重进行组合, 如此方可得到一整套完整的文字层级关系。

我建议如下：

示例如下：

没必要专门去记, 于绘制原型之际, 依据层级关联以及实际成效进而予以调整。

行间距, 于其中运用不一样的字体、字号之际, 会自行去调整行间距, 我们能够径直依照自动的行间距大小就行。

要是你期望更好看一点, 可以依据字号大小的1.5倍来去调整行间距, 就像正文14px字号所对应的行间距是21px一样。

当字体内容较多时，可适当调大行间距。

再有字间距, 可不需理会, 要是你期望显得更美观, 亲自手动去调整瞧瞧效果就行。

3. 间距、对齐、分割、分布

一个好看的原型一定是要有间距、对齐的。

在为确保内容具备良好的可读性, 以展现出那种独特的留白效果, 以及清晰呈现各自层级关系的情况下, 当我们着手绘制原型之时, 必须要将间距以及对齐这两个方面全面且同时地加以考虑进去。

1）安全间距

进行画原型之前, 我们要首先在原型的两侧留存安全距离。这安全距离能够选择10px,也能选择20px。

我在移动端通常会选10px, 这时能够借助拉出标尺线, 或者放置宽度是10px的热区来加以限制。

2）具体间距

各个不同模块相互之间的间距, 建议采用10px以及20px, 此间距能够依据10的倍数予以调节。

模块里各种的间距, 我设为三个部分罗, 它们分别是模块内的间距, 子模块的不同间距, 还有子模块里面各个元素的间距。

模块内部的间距方面, 建议仅仅留意上下以及左右的间距, 左右的间距是一样的, 上下的间距也是一样的。

移动端大小给出的推荐是10px, 还有15px, 以及20px, 不过并不需要特别的标准去遵循, 只是在使之达成对齐状况之后, 其间距得能够区分出来每组之间的关系才作数 的。

PC端可选择性放大到20px、40px。

子模块间距：不建议抠像素，能分出层级即可。

能够直接去选中每一个子模块, 接着进行水平分布或者垂直分布, 以此来确保间距是相同的, 然而要确保这样的间距能够达成分组的那种效果。

如果你想抠像素，可按照5px的倍数调整。

子模块里的元素组件之间在间距上: 也就是不同元素相互之间具体的间距情况, 我通常是不太去留意关注的, 只要这种间距能够达成实现区分出层级的这种效果就行: 即那些具有相关性的元素彼此靠近, 而处在不相关状态底下的元素它们之间的间距稍微大些。

依照5px的倍数予以调控, 你是能够操作的, 然而这般去做并不被推荐, 细致地揪像素是毫无必要的。要是切实要精细核计起像素来的 , 那么你已决然不是在绘制原型之举动了, 而是投身于UI设计的工作范畴之中在了。

在其中, 我们能够进行设置, 设置的内容为【标尺·网格·辅助线】, 可以将显示网格勾上, 还能让元件达到对齐的状态。

在【元件对齐设置】里, 勾上元件对齐, 再勾上边缘对齐, 将垂直方向设置为5像素, 把水平方向也设置为5像素。

这样就可以显示出间距大小，并能自动吸附对齐。

5. 对齐

要知道, 对齐可是作为一个原型来讲最为根本的要求, 就哪怕你的字体啦, 间距之类的都不符合规范, 然而只要有了对齐这一情况, 那么原型就必然会显得好看许多了。

对齐存在多种方式, 有居左对齐这种方式, 有垂直居中对齐这种方式, 有居右对齐这种方式, 有顶部对齐这种方式, 有水平居中对齐这种方式, 有底部对齐这种方式。

于Axure里, 能够直接将需对齐的组件选中, 点击顶部的导航栏, 便可达到自动对齐。呈现对齐状态时, 是以首个被选中的组件当作标准由此展开对齐的。

与此同时, 于设置里面, 将网格对齐选项勾选, 把辅助线选项勾选, 把元件对齐选项勾选, 如此这般便能够实现自动对其对齐。

有些对齐原则可以直接参考（以下内容引用）：

1）表单类对齐

（右对齐）的冒号要保持对齐状态, 如此这番, 方可使内容稳固于特定范畴之内, 引导用户眼睛顺着冒号所形成的视觉流向, 进而得以找到了全部的填写项, 照此做法, 能够提升填写的效率。

2）文案类对齐

要是页面之中的字段或者段落呈较短状态、分布又较为分散之际，那就得去确定下一个具有统一特性的视觉方面的起点了。

3）数字类对齐

为了能够迅速地对比数值之间的大小, 给出建议, 所有的数值都要选取相同的有效位数, 而且要进行右对齐。

6. 分布

分布是指在垂直分布、水平分布sketch视觉设计教程，将组件内容按照相同间距排列。

当当存在着那种相同的内容的值大于或者等于3之时能够去考虑采用自动分布这种方式, 举例来说, 在许许多多的icon进行排列的情形之下, 是能够直接运用水平分布这种做法的。

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

在实际画原型时，经常会将对齐与分布一起使用。

7. 分割方式

使用分割的作用还是突出层级关系，将相同内容在视觉上分组。

分割的方法有留白分割、线性、色块分割（也叫面性分割）。

于不同模块之间, 我们思索采用色块予以分割, 此时, 需考量不同模块分割时大小的一致性问题, 而色块之间的间距, 则能够按照 10 的倍数来设计并加以设置。

一种视觉效果被称作色块分割, 在画原型, 我们并非一定非要拖取个矩形来进行分割。

可以借助灰色底加上白色底而达成, 借助颜色对比达成色块分割的那种效果。

在同一模块之内的子模块, 能够去考虑采用大间距留白这种方式, 又或者是采用分割线, 其使用的优先级状况是留白被分割的情况要高于分割线的情况, 毕竟在进行画原型这个行为的时候, 少一个元素, 就会少一些工作量。

（有分割线，放大看）

分割线粗细为1px，颜色建议使用#。

除此之外, 分割线样式包括通栏分割线, 还有内嵌分割线, 以及居中分割线。咱们暂且做个简要介绍, 只需让大家知晓就行, 至于具体选用哪一种, 对于原型而言影响不算太大。

8. 阴影

画原型时，不建议添加阴影，太费劲。

倘若你期望呈现出好看的视觉效果, 那么能够运用这个具备特定参数的阴影, 其色号为#, 透明度设定为20%, X坐标是0, Y坐标为1, 模糊值为4。

9. 圆角

在原型中，具体用圆角还是直角对原型的冲击不大。

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

把圆角推荐加上去, 按钮、封面这一些, 图画、头像这类的都能够合适地添加上圆角。

具体涉及到圆角的尺寸大小, 并非要达到特别严谨苛刻的程度, 在挑选出元件之后, 借助拖动那个小小的三角标识便能够完成。

依照半径5px的倍数, 能够依据元素面积越大, 圆角半径越大的情况来加以调整。

10. 图标

对于icon的使用，我有以下建议：

11. 文案

文案是在画原型之际就进行敲打而后呈现出来的, 好多时候原型里的文案会被运用到线上当中, 我们画原型的时候, 能够直接敲打出较为出色的文案。

具体建议如下：

12. 图片

当进行画原型这一行为时, 并非需要去添加包含具体内容的图片, 可以运用占位符, 或者用矩形图来予以代替倘若感觉表达方面存在不清楚之处, 那么能够添加文字用于补充。

当运用占位符或者矩形去替代图片之际, 我们能够直接对一个大致相近的尺寸进行调整, 要是期望达到更好的效果, 能够依照一定的比例予以调整。

常见的比例有：

13. 动效

不过过度追求动效。关于使用动效我有以下小建议：

看原型的使用对象是谁，选择性的添加动效。

能够增添简易的效果, 像是链接跳转, 进行隐藏或者显示, 实现切换动态面板, 达成垂直的滚动、水平滚动这样的操作。

就页面切换而言, 针对PC端产品的这种情况, 建议把每个页面都单独绘制出来, 然后添加链接以便能够跳转到新的页面。因为这样做对于撰写一体化需求文档来说是十分有利的。

当App端页面数量较少之际, 能够直接平放在Axure画布当中, 借由箭头来展现跳转的关系。

提议动态面板专门用于交互呈现, 别朝着动态面板的页面当中添加需求文件说明, 任何人都未曾喜好去点击你的原型进而找寻你的需求。

要是使用动态面板, 那么建议先将动态面板的全部页面绘制完成, 之后再放置到动态面板里面。

竭力避免在动态面板里再增添动态面板, 因为对其整改时, 让每个人都去寻觅动态面板会极为费劲。

在要对动态面板里的页面予以切换之际, 能够有选择性地去添加Axure自身带有的那种切换动画, 还有动效方面的效果。关于效果, 建议选“缓进缓出”。

于运用隐藏显示之际, 最优之选乃是选中, 将其置于顶层, 以此来防止被遮挡。能够进行可选择性地添加显示以及隐藏的动效, 其效果能够选择为“逐渐”, 而时间则选择为300ms。

对于进行日期选择, 要是没有优良的组件, 那就能够直接利用axure本身附带的文本框, 去施行动作修改, 使其变为不同的类型。

至于中继器、函数这般的高级交互, 在画原型之际是不建议采用的。其他的高级动效, 于画原型之时同样不建议运用, 当然啦, 你能够自行学着去玩。

03 总结

再分享一张几年前做的会员落地页项目的原型图与UI图对比照。

处在最左边位置的, 是我当时领导所绘制的, 位于中间那部分的, 属于我进行修改之后的, 处于右边地方的, 则是UI设计稿。

再者, 关于画原型而言, 首要的前提条件是, 需求分析要做到完整无缺, 功能架构划分得清晰明了, 流程确定得务必清晰无误。这些内容, 我们不在此处谈论, 后续再进行细致的交流探讨。

另外不要纠结原型工具。

有不少原型工具, 比如Axure, 摹客, 墨刀, xd, 即时设计, 码前等, 此外, PPT以及Excel也能够用于绘制, 其。

你来瞧瞧, 你在工作期间所运用的工具, 以及工具的版本, 可不是你独自一人能够决定得了的, 而是得去瞅公司的要求如何, 又或者是得看其他同事使用的究竟是什么样的工具。

当下占据主流地位的仍旧是Axure, 关于Axure的运用技巧, 你能够去查看我先前撰写的文章:

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

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

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

再一个要点, 便是运用组件库, 页面里的组件反反复复也就那些, 每回使用之时直接拖拉组件库就行, 无需每次都去绘制。

对于每一个需要进行原型绘制的产品而言, 我提议都应当拥有属于自身的组件库, 且我还整理了Axure 组件库, 领取方式在文末被提供了。

还有就是了解交互组件有哪些sketch视觉设计教程，以及交互设计原则。

有关在原型里要运用怎样样式的交互组件, 各位能够瞧瞧这篇名为《产品经理必会的30个组件（汇总）》的文章。

http://www..com/pd/.html。

如有侵权请联系删除！