金融产品H5设计的13条设计原则

文/李蓓

关键词：交互设计，视觉设计，设计原则

微信支付与QQ钱包里的支付产品已经融入亿万用户的日常生活，各种基于公众号开发的H5产品或服务也逐渐被广大用户所认可。有趣、简单、实用的产品体验越来越多，这里沉淀了诸多设计师犯过的体验错误案例，同时提供了相应的解决方案，供大家参考，以便使严谨活泼的金融产品变得有理有据。

1．使用弹层控件，减少交互层级

在一个页面里能够交互完成的内容，应尽量减少页面的切换，因为新页面会切断用户使用的流畅感并且需要用户重新接受并认识新的页面，也就是说用户的思维需要进行切换。过多的层级会使用户失去耐心而放弃对产品的使用，因此，应尽量减少信息层级，减少页面之间的跳转次数。例如，在财付通酒店应用中，用户筛选酒店时，图1-74（a）所示页面需要跳转切换到新的页面才能完成，中断了用户使用产品的流畅感，而在图1-74（b）页面中，则让用户的整个操作在一个页面中完成。

2．L型视觉纵线

用户在浏览信息时，如果没有足够多的强调元素，会按从上至下，从左至右的顺序浏览。在Web端其浏览视线是一个“F”型视线，而在移动端其浏览视线是“L”型视线（导航和重要操作往往在下边），那么如果你的表单的视觉浏览顺序，符合这个“L”型规律，那么基本上就符合了用户的心理预期，用户不需要进行任何的寻找和思考，就可以简单高效地执行完表单项的填写和提交。例如，在财付通机票的应用中，图1-75（a）所示页面要求用户完成填写“姓名”“手机号码”，确认是否“保存为常用联系人”，然后提交时需要将视线平移到右上角去寻找“完成”按钮，而在图1-75（b）所示页面中，用户按顺序操作后，直接在底下点击“完成”按钮完成操作，用户的视线从上到下，最后自然而然地发现“完成”按钮，符合用户的心理预期，不需要进行任何寻找和思考。又如，在“选择乘机人”时，图1-76（a）中的“编辑乘机人”图标按钮放在了页面右边，根据“L”型视线规律，用户在选择乘机人时会误点击进入编辑页面，而在图1-76（b）中，则把重点的选择操作放在了右边，将编辑操作放在了左边。

3．导航明确，避免双层“返回”

现在所做的产品需求大多基于微信、手机QQ、手机端浏览器，因此，APP客户端、导航和返回应尽量使用微信、手机QQ、手机端浏览器，避免页面出现双层导航和两个“返回”按钮。例如，在财付通机票应用中，用户选择入住酒店页面，如图1-77（a）所示，页面出现了双层导航，“当前位置”和“返回”两个导航会给用户带来困扰，而在图1-77（b）所示页面中利用了微信导航和“返回”，则“当前位置”和“返回”导航比较明确。

4．保持视觉焦点

在设计页面时，可以干脆地砍掉那些不需要的信息，以确保页面中的内容始终处于核心位置，让最重要的内容和功能更加清晰，易于交互，如图1-78所示。在图1-78（a）所示页面中，过多的元素干扰了用户对核心内容的关注，而在图1-78（b）所示页面中，尽量减少了视觉修饰，整体看起来更加聚焦和高效。

5．隐藏二级信息

当处理界面的信息层次多且功能过多时，为了提升用户的使用效率，在界面设计中，可以隐藏二级信息，这里的隐藏不是为了和用户“躲猫猫”，而是为了让用户更好地聚焦在重要内容上，提升信息传达的效率。例如，在图1-79（a）所示页面中，该信息展示无主次，层级不清晰，而在图1-79（b）所示页面中，它隐藏了次要的信息，并把它放在了一个固定的位置，当用户需要的时候可以点击进入查看。

6．利用选择代替输入

移动应用的输入成本非常高，尤其是触屏，输入效率和输入准确率都有很大的提升空间。要尽量减少需要输入的内容，可以利用选择代替输入。如果必须要让用户输入，则可以尽量多地给出参考，如图1-80所示。

7．自动或模糊填充

适当的默认值和预先填充好的表单字段可以大量减少用户的工作量。记录用户上一次的操作，通过用户的历史操作行为判断出用户的喜好，或者根据用户的当前位置，推荐符合运营目标等来给用户较贴切并符合预期的默认信息，以减少用户的操作，快速完成任务，如图1-81所示。

8．表单信息一定要分组

表单项并不是从上边一直罗列到下边就可以了，而是要将信息进行组织，使信息展示有节奏感，并且控制每一步的成本及用户情绪。同一类的表单可以放在一起，当表单太长时，可以将它拆分成不同的组，这样用户在填写的时候，类似于一种任务拆解，可以一组一组地完成填写，如图1-82所示。

9．表单信息分步校验

表单信息的验证可以分为及时提交验证和填写完所有的信息后提交时验证两种。对于PC，其网速连接顺畅，及时提交验证能够获得反馈；而在手机端，其网速受到限制，及时提交验证的体验并不连贯。因此，建议将信息进行分步，输入2～3个信息进行一次校验，对于错误的信息可以及时地给予反馈，如图1-83所示。

10．连续化数据展示

现在的信息都讲究可视化，要求对数据进行选择、变形、代替等操作，寻找一种匹配，以让用户容易理解的形式展示。除了在数据上可以运用这种方式，还可以在页面信息展示上采取这种自然的交互方式来帮助人们获取有效的信息和方便操作，如图1-84所示。

11．三种提示方式

（1）何时提供非阻断式的提示。不要打断任务流，也不要用对话框来报告常态内容，比如提示操作成功或流程成功，警示已经发生或可能会在未来发生的问题。提供相关的信息或建议时为了不打断主要的任务流给用户提供非阻断式的提示，如图1-85所示。

（2）何时出现对话框的阻断式提示。只有当用户进行错误操作时或者是重要任务流程中断时才去打断用户的操作。系统应能及时地给予反馈，并提供相应的解决方案。对话框是一种阻断式提示，它会中止用户当前的操作，提示用户需要重点关注的信息，如图1-86所示。

（3）正确布局操作按钮。布局操作按钮的原则是，重要的操作或是用户最有可能会选择的操作，那么它应该放在右边，而取消/返回按钮应该放在左边，如图1-87所示。

12．保证体验，用好假反馈

技术不是万能的，运用的技术太多会使响应速度变慢，而且程序响应的速度很多时候不仅受技术的影响，与网络环境也有很大的关系。当响应时间过长时，可以在响应中间给用户二次反馈，反馈的形式要和之前的有所区分。最好能给用户一个明确的等待时间值，用户也不会觉得自己是在傻等，如图1-88所示。

13．口语命令式的文案

表述的信息应尽量口语化，不用或少用专业术语；可以采用简洁、清楚的语句表达，文字较多时要适当断句，尽量避免左右滚屏、折行等现象，如图1-89所示。

案例启发

在H5端产品设计中，尤其是在微信等社交平台上，技术限制尤其明显，使用过程中用户的耐心也变得更少，对体验的容忍度更低，所以这13条设计原则不仅仅适用于金融产品设计，还适用于更多注重效率与转化的产品设计。