交互规则总结，这些在金融软件行业里的同学是不是深有体会！

今天聊聊前端的话题。比较有代表的是苹果官 (https://www.apple.com.cn/ ).那种干净绚丽而有规整的页面布局、清晰流畅的页面格调、图文镶嵌相得益彰还有流畅的交互体验都是苹果产品打动消费者(江湖中我们称为看客)的重要理由。国产的一些互联 大厂也是很不错，譬如小米

(
http://www.mi.com/index.html?f=xiaomi),锤子(https:// www.smartisan. com/ )他们都有佷多重要的特点，总结譬如主题鲜明、格调统一、交互流畅。也体现产品传递给大家的美感。

相比较电商 站的绚丽,金融行业内的前端会怎么设计比较贴合用户的使用习惯呢，今天敲脑袋给大家做了一下设计规则总结，相信能够给前端工程师或者全栈开发者带来一点启示。大家也可对 入座而非强求照搬。

一、页面设计

1.主题风格统一一致。一个好的主题传递的是产品重要的理念，这些也要灌输在每一个交互的页面中。

2.页面展示数据元素整体也要与系统风格一致，提示信息准确避免产生歧义，是否弹窗和query渲染要一致。

3.数据字典要按照数据code排序(顺序或倒序)展示,界面展示不要展示代码code, 下拉框是否支持全量查询要具体并结合当前是否录入条件来设置。

4.格式准确，如金额、日期且对齐统一方便比较。

总体来说，细致要求有：

展示的内容（结果区）

条件区

界面功能、操作、展示（显示内容）要一致，且习惯尽量贴合业务人员原来系统的操作。

二、交互设计

1.检验是否弹窗、浮动、断言等都要基于用户使用习惯或业务校验需要，杜绝恶意弹窗和不明觉历的提示。对于检查有先后和因果的逻辑，如检查开始日期结束日期时一定要先检查开始日期再处理结束日期的校验，避免给用户带来认识的歧义。

2.及时关闭打扰当前交易的操作。比如查调交易后做调整，要在查询完成后开调整并在调整时将查询的条件置灰或隐藏。

3.提交表单对于后台耗时的交易要弹出等待遮遮罩或者滚动条，对于提交操作要弹窗或者页面渲染提示用户确定。

4.查询操作，条件的输入、初始化重量等都要重新渲染数据。每次执行查询都要清理历史数据。对于输入非法或者条件不满足也要及时更新查询条数和清理非法操作数，提示用户聚焦在非法输入项中。

5.为方便业务使用，擦除不适应，操作尽量简单，根据操作时间进行排序简化用户点击和操作次数，尽量支持键盘操作。

这些设计结合业务系统的处理要求，也是跟金融行业本身的特点如严谨，简洁流畅、严肃的风格不谋而合。

[技匠志java架构]。留下脚印，我都喜欢！