专注产品UI设计:移动界面设计原则和设计工具(2)

二、Flow大局观

在移动设计中，我们需要完善的功能flow，对它认知的价值使得flow在整个设计开发过程中始终走在前面。完善的flow不仅令功能产品更加易用，带来良好的用户体验，与此同时，也有助于提升开发效率，不到位的flow将带来设计与开发的反复，使团队蒙受损失。

良好的移动产品flow标准有三

1.end to end

2.清晰

3.整合

所谓end to end是指功能根据需求设计需要符合所在平台的特性，完整的考虑到用户如何在任何场景下使用操作及完成任务，提供因为有效或无效操作而带来的反馈帮助信息。

清晰是指整个设计中不会造成用户的疑惑，符合平台特性易于理解的设计。通常但凡清晰的功能，即使需要付出更多次的操作，value还是高于稍显混乱的设计，虽然后者简化了用户的操作。

整合，在叙述减少空间占用时提到，受限于移动产品的诸多条件，合理的归纳使得产品使用更为流畅。这与清晰并不矛盾，重在调和。

下面以前些时间已经release的一个功能模块作为示例，展示如何设计一个良好的flow。

案例简析

功能目标：通过列表快速定位城市。

该功能从属于Map视图，图标以形象的道路指向标示。

在mockup中的功能主UI，显示支持的国家；

点击任意国家进入以首字母排列的城市列表；

点击任意城市，自动切入到Map视图并转向相应的可视地区。

主UI左上角提供Back键，预留回退。

在此，还有另一种设计思路：使用IPhone自带的Pickers控件，将国家列表横向置于上方，城市列表纵向置于UI下方。

它的优势在于可以在一屏中解决所有的问题。但为了更好的使用Pickers，你需要加入更多的诸如Supported City等提示信息以区分两个Pickers，以及顶部的Done Cancel按钮，以完善flow。

这使得用户需要更多的时间来熟悉操作，这不是我们想要看到的。

站在用户的高度，你将更理解设计。

三、工欲善其事，必先利其器-移动端的交互设计工具

经常有朋友问起，用什么工具做移动端的交互设计？

这是通常在接触交互设计都会碰到的问题，分享几点应用的经验。

1、Fireworks

从N年前做web开始就一直用Fireworks，这是一个非常高效的屏幕图像处理软件。

提供了基本的图形、钢笔工具，并可以快速的完成颜色的定制设置，布局便捷。

Fireworks是最佳的整合平台。

忘记全能的PS吧，这里你不需要瑞士军刀。

2、PowerPoint

对的，就是幻灯片演示。永远不要忽略工具的潜力。

PowerPoint 提供了大量的预设工具与样式，以满足基本场景的绘制，并创建不受工具限制的演示修改环境（当然PowerPoint是必备的^^）。

同样这是最优体积的解决方案。

忘记臃肿的位图工具吧，这里只有KB级别的wireframe。

3、Axure RP

这是真正称为专业意义上的交互设计工具。复杂到抓狂，当然我们并不是需要搞懂所有的功能。

RP即是Rapid Prototyping，快速原型。

充分利用它的自带组件，整合到Fireworks与PowerPoint里去吧。