如何优雅的用Axure装逼？高保真原型心得分享.pdf

如何优雅的用Axure装逼 ？高保真原型心得分享 去年一直想写的Axure小技巧分享 ，终于还 动手写了 ，今天主要给大家分享关于axure高保真原型 的一些东东。 本文核心内容点 ： – 啥 高保真原型 ？（附简单说明原型 ） – Axure可以画出什么水准的高保真 ？（给示例 ，开启装逼模式 ） – 高保真原型图技巧 ： – 啥时候上高保真 ？适用场景 and 不适用场景 啥是高保真原型 ？ 啥 原型 ，从事互联网的同学 ，肯定非常熟悉 ，特别 产品岗同学。如果不 ，那如下简单讲原型 和高保真原型的 ： 原型 ：即产品草图。从产品流程来看 ，将想法形成草图原型 ，原型再有设计师形成效果图 ，程序猿 们根据需求和效果图开发 ，出来的软件样子就 和效果图差不多。原型在过程中就 产品最终形态 的骨架。 低/中/高保真 ：根据图的粗糙程度划分 ，以最终效果图为参照。保真程度越高 ，离最终效果图越 接近。 Axure ：工具只 实现想法的工具。在众多的原型软件中 ，最广泛使用的就 Axure了。 Axure可以画出啥水准的高保真 ？ 在这里一图胜过千言 ，以下分享自己画过低/中/高保真原型截图。 低保真 ：最轻松和省时间的原型 ，粗犷的风格让我们只重视结构和流程 ，原型不在乎太多设计细节 。 – 示例1 ：一个A pp官网下载页的低保真原型 ，我们甚至可以成为结果图 ，突出了这个需要哪一些 元素。 – 示例2 ：wap版本下载页 ，同样低保真 ，突出结构和元素。 中保真 ：这类原型最常见 ，低保真不容易描述产品最终样子 ，高保真容易干扰设计师 ，中保真汇集 了各类有点 ，也 比较常用的。 – 示例3 ：本示例图为微信酒店订房下的系列页面 ，中保真对比低保真 ，更能体现了交互细节和产品 流程。 – 示例4 ：这 一个”邀请好友注册获取奖励“的流程 ，采用中保真并强调了多个页面的交互流程。 高保真 ：对比中低保真 ，高保真可以称之为效果图了 ，如果加深细节可以直接对着开发咯 ，换句 话说 ，高保真更强调细节。 – 示例5 ：在校期间做的校园助手小项目 ，和同学的第一个5000+用户的项目 ，简直无以言必的自 豪感。由于组内无设计同学 ，于 要求用Axur直接先画出类似最终效果的高保真 ，最后再开发。图 中除了素材 ，其他都 使用Axure直接绘制出来。 – 示例6 ：在校期间某日看到了多年未更新的老版36Kr ，根据自己兴趣画了新版效果图 ，也 可以 直接通过Axure绘制出来。 – 示例7 ：近期众包某A pp中“我的”页面。 高保真的特殊技巧 高保真原型图技巧 ： – 核心内功 ：目标清晰/理解设计规范 – 画图习惯 ：像素对齐/用浅色/上素材 核心 ： 目 清晰 ：不管采用低中高的原型 ，核心目标 交互稿就 想法的表达 ，产品流程的表达。可以 采用“目标、堆叠、排序”方式来表达。目标指的 页面目的 ，流程目的 ，都 为了实现某些需求。 堆叠指的 为了满足目的 ，一个新闻详情页需要哪些元素 ？一个登录页需哪些元素 ？建议先用思维 导图或者手绘出基本包含的元素 ，先把包含的元素列出来 ，不在乎样式 ，正如HT ML编码里面的” 内容/样式/结构“ ，堆叠考虑的 内容和结构。等列出这个页面的所有元素 ，那就可以开始排列了 ， 这就涉及涉及规范和画图习惯了。 了解设计规范 ：了解不同类型产品的设计规范 很有必要的。比如IO 、A ndro id、Web设计规范 ， 或者某个产品常用页面设计方法。没人会把登录按钮放在账户密码框的上面 ，了解设计规范的目标 调整好页面结构 ，将页面元素合理的摆放。推荐 《UI设计模式》和 《Web信息架构》这两本书 ， 总结了移动端和Web端常用的页面设计知识。 习惯 ： 绘图习惯直接影响到了画出来的效果 ，如果想轻松画出颜值较高的原型 ，那么可以遵守以下细节。 控制组件到素级级别 ：低保真原型比较粗糙 因为不在乎细节 ，啥事细节 ，就 一个页面内元素的 宽高圆角等。所以画高保真原型时候 ，最常用习惯就 计算和定义组件的宽高等属性。 比如A pp基 础背景页面我们可以定义为320×4 80(Ipho ne4s的对半比例)、360×64 0(720P屏幕的对半)等其他 比例 ，然后在此基础上 ，定义状态栏高度20PX像素 ，xxx栏高度44 Px ，几乎就 按照设计规范给 的来画组件了 ，自定义组件一般取10px的倍数 ，如状态栏这类组件尽量复用。 善用对