交互日思录 | 详细案例之从搭信息架构做到细节优化
（一篇用案例详细讲交互设计思考和设计过程的文章~大约2500字，阅读大约需要8分钟）
之前参与了一款面向海外用户的虚拟银行APP设计，前一阵收到对信用借款功能（类似花呗）的用研结果。
用研显示，75%的用户对现有设计表示满意，但仍存在一些问题，主要是图1-1中“还款日期不明显”、图1-2中“当前选中的日期不太明显”。
但是事情并没有这么简单：
图1-1中，还款日期不明显主要因为信息量太大且没有重点，这其实是信息架构和页面信息的问题。而用户仅提出“还款日期”，说明优先关注这个信息。
图1-2中，选中日期不明显，可能是视觉重点不太对（Amount过强），也可能是期数（3 Months）太轻且没有直观表现滑块和期数的关系，因此这是页面重点和操作交互的不合理。
基于这些分析，我们开始进行设计优化。
一、尝试解决
这个功能之前是一名初级设计师设计的，我是半途接手且时间紧迫。
刚开始，我针对问题对信息做了分层，通过增加新的详情页以降低首页的信息量，如图1-3。
但是，如果用户想查看近期的账单详情，从主页进入均需再点击两次……对于这种常用操作路径也太长了。
这就说明，现有的信息架构不足以承载优化需求，需要做出局部架构的调整。
二、设计分析
因此，我从整合信息架构开始，逐步分析到细节优化。
一方面是整理设计思路，另一方面给初级设计师一个解决方案，以应对下一次接到类似的需求。
1、检查业务逻辑的合理性
了解业务流程后，发现还款的业务逻辑有些奇特，该功能上线时还没有打通线上主动还款，所以依赖自动还款功能与线下还款……（此处略去向产品提意见的几百字）
因此，首页的CTA之前是“了解还款方式”，点击可了解两种方式。但线下毕竟比线上自动还操作成本高，两种方式并不应当同等对待，所以可以将按钮修改为“设置自动还款”，如图1-4，其二级页面直接提供自动还款设置、底部有线下还款说明。通过这样的方式，来突出线上操作。
2、封装最小单位，规划信息架构
因为我们从产品侧拿到的需求，更接近业务说明文档。那么，先从中列出这个模块需要呈现的重要信息元素，并规划信息架构（规划信息架构属于基本功，这里不加赘述），如图1-5
图1-5
根据这个架构，二级及后续页面所包含的信息已经比较明确了，但是主页的设计仍不明晰。
3、根据信息架构和用户流，设计主页
主页需承载所有功能的入口，因此必须包含详情、账单和交易明细功能。
因为这是面向国外的产品，交易明细放在主页下方是原方案中没有争议的设计，那么上部分应当如何承载详情和账单呢？
根据国内相关竞品分析和客户提供的国外用户资料，用户经常查看的已用额度（对应详情功能）和最近账单（对应账单功能），所以可以以这些关键信息作为入口，而不是做成按钮和图标，然后可将其他信息藏在二级页面，如图1-6。
值得注意的是，在深入了解功能和需求后，我们发现由于存在出账日和还款日，在一些特殊时间段内，如已出账且未至还款日，用户可能会关注最近两期的账单信息，即关注已出账的还款金额，关注未出账中近期交易记录。
所以，主页的账单信息会根据时间不同而变化，这个状态变化就需要我们分析用户使用的全流程。
4、梳理全流程状态
可以在纸面上画一个时间轴，梳理出各个时间状态。
用户使用该功能的全流程包括：未开通、已开通未使用、未出账单、已出账单未还清、已出账单已还清、已还清且下一期未出。
其中，特殊状态有：逾期且未到下一账单日、逾期已到下一账单日、本期无账单。
根据这些状态类型，可以根据用户关注点的转移，设计不同状态下的样式，如图1-7提供部分示例。
虽然状态类型很多，但是很多状态的可能比较相似，可以做成同一样式以减少用户的理解成本。比如“已出账单已还清”和“已还清且下一期未出”，而不需要做出差别设计（将“已还清且下一期未出”做成“下一账单日还剩xx天”这种）
5、优化细节
做完这些，我们可以设计出各个页面的基本版了，但是……还没完。
我们还需要对细节做出优化。
初级设计师很容易遇到的两个问题，一个是设计的优化力度不够，另一个是设计的吸引力不足。
（关于增强设计的说服力，可以参考我的另一篇文章：怎么增强设计对用户的说服力-这是一个链接）
针对这两点，基础的解决思路是：
- 先做简单：该页面和操作是否足够简单、重点足够突出（页面跳转、信息量、操作方式和步骤等）？大脑思考、眼睛和手指移动是否足够少？
- 再做复杂：对用户来说，是否能再增加一些东西，减少疑惑、增强信息明晰度？对业务来说，是否需要合适的引流和刺激？
按照这个思路，可以做出以下细节优化
1）先做简单
① 选择期数的操作不够简单：
签账分期的原方案是拖动滑块改变期数，看起来好像没问题……但是
第一，可选范围也太大了吧，这是增加用户的选择成本；
第二，在手机上拖动，其实比较难精准定位到某一期；
第三，用户分期一般习惯3、6、9、12期这种和季、年相关的期数，一定要分7、11这种奇怪的期数，应该没那么常见
所以，我们可以突出关键的几个期数供一般用户选择，有特殊需求的也可以点选，如图1-8。通过这种优化，其实是降低了一般用户的思考成本（选项少了）和操作成本（换滑动为少量点击）。
② 重要操作不够突出：
详情页中包含“查看账单”和“了解还款方式”按钮。
其中，“查看账单”更加重要，“了解还款方式”并不是重要的下一步操作，所以在细节上可进一步做突出，如图1-9。
2）再做复杂
① 增加图表增强信息明晰度
详情页包含已用额度、可用额度和总额度3个数字，可用图表展示其中的关系。
之前画过一个草稿，是对比“已用额度”和“可用额度”，看起来好像没有问题，但是用户真的关心这个比值么？
他们更加关注的，应该是“已用/总额度”或“未用/总额度”，以表达当前的使用情况，如图1-10。
因此，在设计图表的时候，尤其涉及多个数据，要先明确图表要表达什么有价值的信息，然后再进行设计。
② 增加按钮减少操作疑惑
如果可操作，一般需要传达可操作的感觉，如图1-11。
比如，首页顶部虽然是张卡片，但是从Outstanding Balance进入详情页的可点击感会比较弱，因此增加向右的小箭头；
签账分期金额其实可以修改的，这个操作是需要被感知，因为当金额较大时，仅分期一部分不仅减轻经济压力、手续费也更低。但是由于这里有默认值，可能会感知不到这个操作，因此增加“修改”按钮
③ 增加样式对比减少疑惑
从主页点击到账单页，由于展示样式相似，尤其当UI处理不好的时候，可能会给人内容相似的错觉（格式塔原理）。
因此，可以通过更换对齐方式让两者有对比，明显感知到是两组数据，如图1-12。
④ 增加提示为业务引流
用户第一次使用的时候，是怎么知道这笔交易可以分期的？提示可分期的方式有很多，包括大额交易的结果页、大额交易后的短信提示。
考虑分期是这个模块的二级功能，不宜做的过重，所以最终采用标签+气泡的形式去提示。
当然，只是正向告诉用户去用，有时是不足的，在用户要走的时候，可以做出适当的挽留，留住那些有些纠结的用户~
最后
其实这个功能继续往后做，还是能“玩出花”的。
但考虑当下处于1.0版本，还是要以提升可用性作为最终目标。所以按照以上步骤，以检查业务逻辑、规划信息架构、设计主页，优化细节的设计思路，最终呈现、提交设计方案。
这版方案最终也受到了认可。虽然后续有一些业务上的微调，但是整体设计是禁得住考验的。
