【摘要】 最近帮小伙伴们批改一些 UI 界面，UI 界面设计不能抛开本质而注重形式，如果没有理解信息和内容的因果，是很难做出合理的设计的。
最近帮小伙伴们批改一些 UI 界面，UI 界面设计不能抛开本质而注重形式，如果没有理解信息和内容的因果，是很难做出合理的设计的。
那么收到小伙伴们的作业，我们一起来看看有没有什么问题，希望可以帮助大家解决一些问题。
从提交的这张 UI 界面来分析，先看一下整体，我们利用模块覆盖法来将页面的内容区分一下：
其次，整个版面白色区域较多，那么中间的开通会员卡片的色彩就过于重了，虽然我们需要引导用户去开通，但是视觉上给人感知太强烈，就感觉有点突兀。
3 层指的是：背景层、内容层、悬浮层 / 叠加层，如果一个界面中出现 4 层，会导致界面的层级过多，信息就较为复杂，所以这个界面中，收藏夹一栏的卡片是不需要加投影的，只需要图标加文字的上下排列即可。
好了，再强调一遍，当你设计完一个 UI 界面的时候，先问一下自己这 4 个问题：
第一次从 pc 端迁移过来的同学会有这几个问题，同样的界面信息和内容如果要完全保留的迁移到移动端应该怎么设计，一个界面放不了那么多内容。比如我们先来看这个这个卡片列表：
那我们看到这个卡片中的信息，从上往下依次浏览好像并没有问题，但就是因为没有问题，这才是问题。类似这样的信息卡片，其实如果按照这样排，那么用户就会浏览完所有信息再做决策，而我们知道的是并不是所有信息都需要让用户去关注到，例如最终要的是标题、状态和查看轨迹，而不重要的是工单和创建时间。
怎么判断重不重要呢？一个是用户查看和操作的频率，另外就是业务侧的侧重点。这边为了隐藏一些敏感信息某些文案就处理了一下，大家可以看一下我们方案的前后对比。
这里没有删减任何信息，因为确实在业务方面需要某些信息，但是像 创建时间 查看轨迹 当前状态 这些是没有必要的文案就可以省略。而卡片的状态一般在移动端上会放在右上角显示，并且在移动端中不需要加图标做修饰。
在原来的卡片中，如果我们要根据创建时间去找的话，因为工单、创建、状态 3 行文字有点类似，所以会导致寻找效率不高，那么我们就讲工单还有时间分开放置，在滚动浏览的时候可以更好的寻找。
再来讲个案例，相信很多同学在 pc 端的 b 端设计中遇到过这样的问题，就是很多表格类的信息在 web 端可以一屏放下，到移动端就放不下了，那该怎么去做。其实如果你们可以去参考阿里云的 app，类似于这样 pc 端 b 端的移植到移动端来说，也只能部分移植。
这是一个比较典型的图文布局案例，需要注意的是很多小的细节，整体来看页面上半部分有效信息太少。什么是有效信息就和上文我们提到的 4 点是一样的，如果你的界面只是为了展示好看的图片和简单的标题来排版，那么这个界面一定是无效的。如下：
应骏，人人都是产品经理专栏作家，公众号：应谋鬼计（shejishiyj）