原型图种类
省略, 在这里有: Axure线框图
高保真原型图的要素
- 形状, 尺寸: 严格按照截图比列, 参考线
- 色彩: 使用吸取颜色, 注意渐变色
- 贴图: 寻找参考物, 复制图片, 截取, 覆盖等
- 交互动作: 页面切换, 响应范围, 点击动效
- 演示效果: 手机演示, 原型托管, 屏幕适配
1\~3 静态部分, 4\~5 是动态的.
本节课主要讲静态的.
技巧
技巧1: 会截图
选取合适的参照物进行切割, 不要重新发明轮子.
技巧2: 会使用搜索引擎
阿里巴巴矢量图标库, iconfont.cn.
svg 的图标可以直接复制到 Axure 中使用.
或者在百度图片搜索中: 头像图标, 然后直接粘进来使用.
黄色倒三角就是原圆角.
操作案例: 为微信增加"听一听"功能
"发现"部分增加"听一听"的功能.
尺寸调整到 640 左右.
微信页面, 也就是我们添加听一听的入口:
三个可供参考的图片:
- 电台
- 主播电台
- 歌单广场
用这三个组合出一个.
分隔图片
剪切再粘贴就, 再置于顶层.
圆形的剪裁
可以按照正方形切, 然后再圆角.
结果
好家伙, 我直呼好家伙, 产品就是裁缝了.
作业2: 绘制高保真原型图
文章评论