产品说我字号太多了，该怎么调整？

前段时间我在京东买到坏芒果了，要申请售后。作为一个界面设计师我居然点错了按钮。Excuse me？我眼睛是不是不太行了？

找了几个人问，有的说不会误点，有的说页面确实有迷惑。但他们都是带着我提出的问题去看页面，不是真实场景下用户的反馈。这里的“问题”是基于我这个用户认知下的，实际上有没有问题得看京东这个页面的用户行为数据。

那就以我这个用户的角度，从设计层分析一下到底为什么会点错吧。初步认为，问题主要在于点线面关系，包括字号大小、颜色、视觉层级、组合等。

说到这个想起了几年前的一个项目。当时我们用字号和颜色都很谨慎，但产品说我们字号太多，大小不一显得整个页面很乱。我们核对了之后发现字号也不多呀。后来才明白“字号多”只是他们的感受，即使字号少，颜色、层级和组合多的话，也会造成视觉上的“字号多”。

发现问题：用户出错在哪里

A：我每次都点击横线上“请您描述问题并上传收到商品照片”这句话填内容，然后发现这里不是给我填内容的

B：我不知道退款要填多少东西，什么是一定要填的

C：提交的时候出错了，说是没写描述，又要回头去写

用户只会告诉你遇到的问题和使用感受，毕竟他们也不知道哪里出了错。所以对于用户提出的问题，我们得先发散，再归因。

分析问题：先发散，再归因

1. 发散问题

以问题为中心进行放射性发散，连接相关点，组成问题的图谱。尽可能提出更多的疑问点，从多方面考虑，找出关联性较大的因素。

问题 1：漏填

为什么不给出必填提示呢？

不同的申请原因，注释分别是什么？

全部的申请原因都要写描述吗，存在可以不写的情况吗（比如七天无理由）？

全部的申请原因都要上传凭证吗？

如果申请原因不同，填写描述的提示会不同吗？

说明一下，刚开始出现问题的页面是优鲜赔，我还没截图已经进行完赔付了，所以分析用的是退货界面的选项，内容大致一样，样式也一样。

分析之后发现：

1）必填提示很重要。

除了质量问题外，其他所有原因都需要填写描述文字，不然就无法提交。基于这一点，我认为给予必填提示*号是很重要的，淘宝的退货页面也会有必填提示。

2）选项之间可能有交叉或者重复，分类不明。

比如七天无理由一定要写理由；大小/颜色/型号不合适没写明需要寄回附件赠品；其他问题务必上传有效凭证，但在提交时不约束这个条件。

这些问题其实是产品层面要解决的问题。第一个问题好解决，增加必填条件约束就可以。第二个问题相对麻烦一点，需要对售后原因重新进行分析和归类，重新写规则。由于第二个问题对解决本次问题的价值不大，不用花心思在这上面。

问题 2：误点

为什么横线上更像是可以输入文字呢？跟字号颜色有没有关系？

怎么体现申请原因和描述问题的从属关系呢？

注释的内容可以直接放在描述文字输入框内吗？怎么结合？

页面的框架存在问题吗？卡片和分割线的规范是什么？

这种左右选项结构的组件形式是影响因素吗？

分析之后发现：

1）页面的框架不规范，各卡片之间的距离没有一致，层级也有问题。

一般来说，出现卡片距离不一致有几种情况：设计师特意设计；开发实现页面的代码问题。但从这个页面上来说不太需要设计不一样的卡片间距。如果项目时间允许，在设计走查的时候发现问题一定要提出让开发解决。

2）文字的颜色让人分不清主次从属。

这一点在下面有更详细的分析，先不在这讨论。

2. 收拢归因

经过对页面的观察和分析，我们可以把问题聚焦在以下几个点上。

3. 竞品分析大法

找到原因之后，比较有效快捷的方法就是进行竞品分析，看看别人怎么做。根据上面聚焦到的四个问题点，我们带着目的去做竞品分析。

观察淘宝和京东，我们可以发现：

1）淘宝有必填提示，京东没有；

2）淘宝的输入框比背景色浅，京东的输入框和背景色一致；

3）淘宝的描述作为补充项另起一个模块，京东的描述和申请原因在同一模块。

最后一点关于字体的，分析项比较多：

通过上图，我们可以发现，淘宝的颜色层级有 3 级，而京东的颜色层级有 6 级。将两个界面中的组件元素用色块来表示，淘宝有明确的视觉引导，而京东由于标题与注释颜色比较接近、标题与选项对比相差太大、模块缺乏统一性，造成了主次不清晰的问题。

我们再次看看京东的界面。从视觉体现上来说，选项使用了最深的黑色，确实能够吸引用户的目光，让用户知道哪里要选，但却弱化了标题和补充项的视觉。在退货退款页面，用户是带着目的去操作的，他们需要完整走完流程，完成申请，因此需要填什么类型的信息、怎么顺利完成流程就很重要。就像你到银行柜台办理转账的时候，你会希望银行能够按顺序告诉你每一步要做什么吧：取号、去单据区填单、到柜台办理。如果你一进去保安叫你准备好身份证、转账的相关信息，到了柜台发现还要填单，是不是体验感很差呢？

解决问题：低成本有效解决

经过一轮竞品分析后，我们得出了相应的解决方案：

1）统一页面结构

卡片间距保持一致；输入框颜色略浅于背景色。

2）文字视觉关系调整

文字颜色精简到 3 种；标题颜色与选项颜色一致，用字体粗细区分；申请原因的注释与输入框提示语结合。

3）准确引导操作

给予必填提示。

这是调整前后的对比图：

从整体的视觉上来看，设计规范是与原本几乎保持一致的，更多的是细节的调整。但是我们的目的不是把界面做得多好看，而是低成本有效地解决问题，也就是要综合考虑时间成本和开发成本。

文末，想说说我看到的一些现状。遇到问题的时候，有的设计师会无意识改掉原型字段、增删功能、改变运营方案...如果不改，他们就觉得自己做不了或者做不好设计稿。以前我也会有同样的问题，原因有可能是不够理解产品结构、思维受限、没有考虑时间成本和开发成本...现在除非逻辑有误、状态有缺失，我才会跟产品商量原型的问题。一般都尽量从设计层面解决问题。

网上很多改版的作品，会从产品层面、运营层面去分析，这点是挺好的，多思考才有多种方法。但是不代表平时做设计的时候我们要改掉产品和运营的内容（除非有特殊情况），这些需要和相关的同事商量评估。

有时候能用最低成本从设计层面解决问题，也是一种能力。

欢迎关注作者微信公众号：「牙线y2x」