灰模原型:这到底是个什么东西_灰模哪里买
灰模原型，是我接触产品的时候老大传递给我的一个概念。在所谓的线框图、低保真高保真的理论里面，显得略显突兀。身边的很多产品同学都没有听说过这个明显好用得多的文件类型。
最开始的时候完全不懂，老大也没有多余的时间给我们解释，只能靠看着之前的原型，一步步摸索其概念和做法。
灰模原型
* 灰模原型是基于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原创授权发布，未经许可禁止转载