标签归档:Axure RP

我的画原型原则

#工具

Axure RP 仍然是当前最佳原型设计工具,它在自定义性和便捷性上做到了很好的平衡。早前也尝试过 Balsamiq墨刀,但都没有然后。Balsamiq 的手绘风格非常好,但效率不够。墨刀过于精致,不够原始和粗糙。

#原则

## 内容

1、完整

逻辑严密,不要缺页面,同时每个页面都要有辅助说明,说明显示规则、提示语等需要说明的内容,以便团队其他成员理解产品并完成自己那部分的工作。

2、真实化

字段名称和字段值尽量真实,一方面是保证可看性,另一方面避免影响 UI 设计师设计、研发开发以及测试写测试用例。所见即所得,内容不真实容易导致返工。

3、版本记录

第一页固定为版本说明页,说明修改时间、背景和内容。一方面是备忘,另一方面也是提醒自己考虑完善,减少不必要的修改次数。BTW,重要的版本单独保存一份,以便可能的回滚。

## 形式

1、少交互

刚上班那会儿会做比较多的交互,但现在觉得说清楚就好,只用 “Onclick”,其他交互用文字说明,同时部分子模块的所有页面平铺在一个 page 中,一目了然。

当然掌握条件、变量、函数等高级技巧是有好处的,一方面是能更加理解研发的工作,另一方面演示效果会让人眼前一亮,但请注意两点:一是避免花过多时间在画原型上;二是产品设计前期可能修改频繁,完整交互版可以放在后期完成。

2、黑白灰

控件和文字颜色限定为黑白灰,同时灰色种类等也能少则少,简单一些,原始一些。一方面是保持风格统一,另一方面避免影响 UI 设计师发挥。

操作层面包括:一是基本只用 Axure 自带控件,部分效果使用多个控件组合,比如圆角矩形 + 三角形 = 气泡提示框等;二是用键盘输入 “<” 表示返回、“>” 表示指示图标、“|” 表示光标等;三是用 QQ 输入法输入一些特殊字符,比如①②③,比如 “☆” 表示收藏、“★” 表示已收藏等。

3、规整

虽然不建议原型图画得太高保真,因为那容易让我们陷于细节而忽略流程、交互等更重要的东西,但这不意味着不需要注重美观,建议运用《写给大家看的设计书》中提到的亲密性、对齐、重复和对比原则,保证原型图规整可看。

刚开始画会比较费时间,后面熟练了就快了,同时像我现在基本不会从 0 到 1 开始画,而是将之前做过的模块复制粘贴过来,在其基础上改改。

#P.s.

产品原型图也是一个产品,UI 设计师、研发和测试等是用户,他们说好才是真的好。如果用户就喜欢有完整交互的,对于产品设计者而言,暂时不能改变用户,那就迎合用户,慢慢来。

#扩展阅读

1、原型与你

产品设计五部曲

1、需求
解决哪些用户的什么问题,同时公司如何获利。
产出物:BP
推荐工具:Microsoft PowerPoint

2、功能
设计哪些功能,功能的差异性、可行性和优先级。
产出物:PRD
推荐工具:Microsoft Word

3、流程
基于业务设计产品流程,把简单留给用户,复杂留给自己。
产出物:流程图
推荐工具:Microsoft Visio

4、交互
页面的规划和各种控件的使用。
产出物:原型图(线框图)
推荐工具:Axure RP

5、界面
布局清晰,主次分明,视觉美观。
产出物:UI 图
推荐工具:Sketch、Adobe Photoshop

P.s.
以上源自《用户体验的要素》,这本书非常经典,不仅在于其自抽象至具体的思路,也在于对每一层的分析。之前总记不住书中五个层次的名称,直到看到 @静观然 的书评后,豁然开朗,同样的,我也倾向于将书中的 “结构层” 和 “框架层” 合并到 “交互” 中,同时增加 “流程”,这更符合当下互联网产品设计的实际情况,即相比十几年前,业务更复杂,关联系统更多。