灰模原型：这到底是个什么东西

灰模原型，是我接触产品的时候老大传递给我的一个概念。在所谓的线框图、低保真高保真的理论里面，显得略显突兀。身边的很多产品同学都没有听说过这个明显好用得多的文件类型。

最开始的时候完全不懂，老大也没有多余的时间给我们解释，只能靠看着之前的原型，一步步摸索其概念和做法。

灰模原型

*  灰模原型是基于IA和功能列表的

*  灰模原型一般使用尺寸：320*480（App）

*  制作灰模的时候，一定要所有组件之间的对齐。一般对齐到像素。。

*  所有的元素，除了组件自带的颜色，只用黑白灰

*  只用最基本的矩形、直线表现整个原型，矩形可以变换为圆形、椭圆、星形等多种状态

*  不用设计交互，所有页面分开展示，每个功能的状态都需要表明（需求中详述），比如一个列表功能，需要设计空列表、正常状态的列表和溢出列表。

*  矩形（Rectangle）：取消边框（Line Style选择为None），默认填充一级灰度，如果有多重叠加，则不断添加灰度值，只要能识别不是一体的即可。

*  按钮（Button）：矩形组件，取消边框，填充为二级黑色，按钮内的字体用白色填充。

*  所有字体默认为微软雅黑，可加粗但不用倾斜效果，最小字号为12号，最大不得超过36字号（视具体情况定），一般常用字号为12、14、16、18、20、24。

*  所有跳转均用箭头表示，箭头可用色彩表示（一般默认为橙色、红色）

*  不要用边框，多用矩形，基本上，只要依靠矩形、文字、线条工具，能画出所有复杂的原型；

按钮组件制作

• 新建一个Rectangle（矩形），在Widget Properties and Style面板Style选项卡Base Style中选择“Widget Style Editor”
• 在弹出对话框中选择“Custom”
• 点击Add，新建一个Style（样式）。并重命名为“Button”
• Font Color（字体填充）颜色为纯白色（＃FFFFFF）
• Line Style（线条样式）为“None（无）”
• Fill Color（填充颜色）选择二级黑色（＃333333）
• 点击“OK”创建样式。

之后在每次需要用到按钮的时候，直接拖拽一个Rectangle（矩形）组件，然后样式设置为“Button”即可。

按钮交互设计

滑过效果

App原型设计中可以不用设计滑过效果，仅限Web端设计。

• 在Widget Properties and Style面板Style选项卡Base Style中选择“Widget Style Editor”
• 在弹出对话框中选择“Custom”
• 点击Add（添加），新建一个Style（样式）。并重命名为“Button-MO”
• 勾选“Bold(字体加粗)”，Fill Color（填充颜色）改为三级黑色（＃666666）。
• 点击“OK”创建样式。

点击效果

• 在“Widget Style Editor”中Add（添加）样式，重命名为“Button-MD”表示点击效果。
• Font Color（字体填充）修改为二级黑色（＃333333），Fill Color（填充颜色）修改为纯白色（＃FFFFFF）。
• 点击“OK”创建样式。

交互效果添加

• 选中按钮组件，在“Widget Style Editor”面板中选择Properties，点击MouseOver添加效果。
• MouseOver效果选项中，“Base Style”选项中选中设置好的“Button-MO”样式（添加鼠标滑过效果，App类原型可省略）。
• MouseDown效果选项中，“Base Style”选项中选中设置好的“Button-MD”样式（添加点击效果）。
• 点击“OK”保存设置。预览效果。

Rectangle（矩形）Style（样式）制作：

• 在Widget Properties and Style面板Style选项卡Base Style中选择“Widget Style Editor”
• 在弹出对话框中选择“Custom”
• 点击Add（添加），新建一个Style（样式）。并重命名为“Rectangle”
• Line Style（线框）改为None（无），Fill Color（填充颜色）改为三级白色（＃F2F2F2）。
• 点击“OK”创建样式。

注：

Rectangle（矩形）组件都需要如此处理。

当有多个Rectangle（矩形）组件叠加时，每个组件添加不同的色值。

本文为人人都是产品经理 @Nairo 原创授权发布，未经许可禁止转载