前段时间我在 京东 买到坏芒果了，要申请售后。作为一个 界面设计 师我居然点错了按钮。Excuse me？我眼睛是不是不太行了？
找了几个人问，有的说不会误点，有的说页面确实有迷惑。但他们都是带着我提出的问题去看页面，不是真实场景下用户的反馈。这里的“问题”是基于我这个用户认知下的，实际上有没有问题得看京东这个页面的用户行为数据。
那就以我这个用户的角度，从设计层分析一下到底为什么会点错吧。初步认为，问题主要在于点线面关系，包括字号大小、颜色、视觉层级、组合等。
说到这个想起了几年前的一个项目。当时我们用字号和颜色都很谨慎，但产品说我们字号太多，大小不一显得整个页面很乱。我们核对了之后发现字号也不多呀。后来才明白“字号多”只是他们的感受，即使字号少，颜色、层级和组合多的话，也会造成视觉上的“字号多”。
发现问题：用户出错在哪里 A：我每次都点击横线上“请您描述问题并上传收到商品照片”这句话填内容，然后发现这里不是给我填内容的
B：我不知道退款要填多少东西，什么是一定要填的
C：提交的时候出错了，说是没写描述，又要回头去写
用户只会告诉你遇到的问题和使用感受，毕竟他们也不知道哪里出了错。所以对于用户提出的问题，我们得先发散，再归因。
分析问题：先发散，再归因 1. 发散问题 以问题为中心进行放射性发散，连接相关点，组成问题的图谱。尽可能提出更多的疑问点，从多方面考虑，找出关联性较大的因素。
问题 1：漏填
为什么不给出必填提示呢？
不同的申请原因，注释分别是什么？
全部的申请原因都要写描述吗，存在可以不写的情况吗（比如七天无理由）？
全部的申请原因都要上传凭证吗？
如果申请原因不同，填写描述的提示会不同吗？
说明一下，刚开始出现问题的页面是优鲜赔，我还没截图已经进行完赔付了，所以分析用的是退货界面的选项，内容大致一样，样式也一样。
分析之后发现：
1）必填提示很重要。
除了质量问题外，其他所有原因都需要填写描述文字，不然就无法提交。基于这一点，我认为给予必填提示*号是很重要的，淘宝的退货页面也会有必填提示。
2）选项之间可能有交叉或者重复，分类不明。
比如七天无理由一定要写理由；大小/颜色/型号不合适没写明需要寄回附件赠品；其他问题务必上传有效凭证，但在提交时不约束这个条件。
这些问题其实是产品层面要解决的问题。第一个问题好解决，增加必填条件约束就可以。第二个问题相对麻烦一点，需要对售后原因重新进行分析和归类，重新写规则。由于第二个问题对解决本次问题的价值不大，不用花心思在这上面。
问题 2：误点
为什么横线上更像是可以输入文字呢？跟字号颜色有没有关系？
怎么体现申请原因和描述问题的从属关系呢？
注释的内容可以直接放在描述文字输入框内吗？怎么结合？
页面的框架存在问题吗？卡片和分割线的规范是什么？
这种左右选项结构的组件形式是影响因素吗？
分析之后发现：
1）页面的框架不规范，各卡片之间的距离没有一致，层级也有问题。
一般来说，出现卡片距离不一致有几种情况：设计师特意设计；开发实现页面的代码问题。但从这个页面上来说不太需要设计不一样的卡片间距。如果项目时间允许，在设计走查的时候发现问题一定要提出让开发解决。
2）文字的颜色让人分不清主次从属。
这一点在下面有更详细的分析，先不在这讨论。
2. 收拢归因 经过对页面的观察和分析，我们可以把问题聚焦在以下几个点上。
3. 竞品分析大法 找到原因之后，比较有效快捷的方法就是进行竞品分析，看看别人怎么做。根据上面聚焦到的四个问题点，我们带着目的去做竞品分析。
万字干货！4 大模块帮你完整掌握竞品分析 互联网行业，竞品分析已不仅仅是产品经理的工作内容，对于 UI 设计师来说系统地分析竞品并且做出有理有据地分析已经成为必不可少的技能了。
阅读文章 >
观察淘宝和京东，我们可以发现：
1）淘宝有必填提示，京东没有；
2）淘宝的输入框比背景色浅，京东的输入框和背景色一致；
3）淘宝的描述作为补充项另起一个模块，京东的描述和申请原因在同一模块。
最后一点关于字体的，分析项比较多：
通过上图，我们可以发现，淘宝的颜色层级有 3 级，而京东的颜色层级有 6 级。将两个界面中的组件元素用色块来表示，淘宝有明确的视觉引导，而京东由于标题与注释颜色比较接近、标题与选项对比相差太大、模块缺乏统一性，造成了主次不清晰的问题。
我们再次看看京东的界面。从视觉体现上来说，选项使用了最深的黑色，确实能够吸引用户的目光，让用户知道哪里要选，但却弱化了标题和补充项的视觉。在退货退款页面，用户是带着目的去操作的，他们需要完整走完流程，完成申请，因此需要填什么类型的信息、怎么顺利完成流程就很重要。就像你到银行柜台办理转账的时候，你会希望银行能够按顺序告诉你每一步要做什么吧：取号、去单据区填单、到柜台办理。如果你一进去保安叫你准备好身份证、转账的相关信息，到了柜台发现还要填单，是不是体验感很差呢？
解决问题：低成本有效解决 经过一轮竞品分析后，我们得出了相应的解决方案：
1）统一页面结构
卡片间距保持一致；输入框颜色略浅于背景色。
2）文字视觉关系调整
文字颜色精简到 3 种；标题颜色与选项颜色一致，用字体粗细区分；申请原因的注释与输入框提示语结合。
3）准确引导操作
给予必填提示。
这是调整前后的对比图：
从整体的视觉上来看，设计规范是与原本几乎保持一致的，更多的是细节的调整。但是我们的目的不是把界面做得多好看，而是低成本有效地解决问题，也就是要综合考虑时间成本和开发成本。
文末，想说说我看到的一些现状。遇到问题的时候，有的设计师会无意识改掉原型字段、增删功能、改变运营方案…如果不改，他们就觉得自己做不了或者做不好设计稿。以前我也会有同样的问题，原因有可能是不够理解产品结构、思维受限、没有考虑时间成本和开发成本…现在除非逻辑有误、状态有缺失，我才会跟产品商量原型的问题。一般都尽量从设计层面解决问题。
网上很多改版的作品，会从产品层面、运营层面去分析，这点是挺好的，多思考才有多种方法。但是不代表平时做设计的时候我们要改掉产品和运营的内容（除非有特殊情况），这些需要和相关的同事商量评估。
有时候能用最低成本从设计层面解决问题，也是一种能力。
以电商为例，帮你掌握超全面的产品分析流程 曾经有段时间对竞品分析很困惑，市面上大部分的文章，多数是比较几个产品的功能、交互，总觉得少点什么。
阅读文章 >
欢迎关注作者微信公众号：「牙线y2x」
