洞察力 (看得出自己作品有瑕疵，却不知道哪里有瑕疵）
当设计者突破了第一个瓶颈，“审美”提上去之后就很容易能发现自己作品中的不足，然 而此时会有一个新的问题出现，发现了自己作品中的不足，却不知具体是哪一块的问题。
这就是本篇要讲的“洞察力”的问题，如果“审美篇”要做的是学会如何阅读别人的作 品，那么“洞察力篇”就要学会如何阅读自己的作品。至于具体的处理页面的技法问题， 在第三个板块“技法篇”会详细分析说明。
我们说一个作品好或者不好，不是单指某个元素，而是页面中所有元素组成的一个画面， 通过各个元素之间的对比，融合所形成的视觉与交互。那么当做一个作品时，就要从大的 点分散成为小的点去考虑设计，然后再从小的点聚合为大的点去审核设计的合适与否。
比如我们在做一个运营H5时，从点线面出发，然后再把点线面细分开，装饰元素为点，文字为线，背景或者实物照片元素为面。然后再细化到每个点的装饰元素作出不同效果， 线的文字效果与文字排版的舒适度，面的背景效果与主体物的修饰。
经过从大到小细分之 后的设计会在整体舒适的原则下，更有细节，更生动。当完成一个设计之后再回到点线面 的角度去审核，整体点线面的布局是否合理，背景是否暄宾夺主，点缀是否舒适…那么同 样道理，在界面设计中就要从布局再拆分到各个控件，最后再回归布局的方式去洞察。这就是设计的洞察力。
这个板块我同样从四个点去分析，如何提高洞察力，頁正发现自己作品中的不足，从而可 以有条理有目的性的去优化芫善自己的作品，让设计有矩可循而不是俗话中的“野路子”
整体到局部，局部再到整体
很多设计者经常遇到类似“页面很乱而不清楚乱在哪里”“页面很闷却不知道何原因导 致”的问题，发现这些问题的根源才能通过技法去对症下药。
这里我分享给大家一个可以快速且有逻辑的审核自己作品问题的方法：从整体到局部，局 部再到整体的观察。通过整体的观察发现问题以及违和的感受，然后从局部细节观察导致 这些问题的原因，修改后再回到整体去审核。
下面我以某设计者做的电商支付页面案例来详细说明。
从整体观察发现问题之后，我们开始给页面kit板块拆分并且归类，在每个板块内寻找细节 上的问题。左侧为原图，右侧为发现问题并且修改后。
标题栏
从标题栏来看，返回箭头的视觉层级过高，甚至高过了页面标题字。这里我弱化了返回的 层级，把视觉较为跳跃的橙色改为深灰，并且通过细化减轻icon重呈，标题字加粗处理， 提高阅读层级。
个人信息
个人信息没有主次，并且缺少设计感，右侧箭头过粗，显得不够精致。这里我调整了倌息 的层次，并且增加icon点缀增加亲和力与设计感。同样右侧的icon细化减轻重呈使其更 精致。
商品信息
商品信息显得过于拥挤，并且商品配图比上线版本还要LOW,价格的玫红色与页面的主 色橙色没有任何联系与规律可言。这里我调整了店铺名称与宝贝的文字大小，并且店铺增 加LOGO从而丰s页面，增加亲和力。
数呈的位S更改到右下角，平衡卡片内的布局重 S，价格的颜色改为产品主橙色，避免无理由的加色，让画面更整洁。
支付方式
支付方式的这几个图标虽然能增强识别性，但是各式各样的形状同样造成了页面的杂乱。 并且纵向排列在只有四个标签的情况下浪费页面空间。
这里我把支付方式更改为横向排 列，选中与未选中呈现的更直观可见，统一的圆形让页面减少不规则元素的存在，让页面 更有秩序。
人民币符号与价格作出大小区分，弱化阅读障碍的同时增加细节。
在修改细节之后，我们再回到整体去观察整个页面是否解决上上面发现的问题，同时观察 页面元素之间是否和谐统一。
在没有调整任何信息与主色色相的情况下，仅仅通过拆分元 素局部观察的方法去修改了部分细节，就让界面变的焕然一新。
试图解释每个元素表达的意义
在我们设计页面时，如果能做到理解页面，理解自己的设计元素，那么很轻松就可以找到 设计的不足之处，让设计变的合理起来。刚开始肯定会遇到很多不能理解的地方，我们可 以尝试巷去解释，如果一个元素没有足够的理由去加入色相，那么就不要随窟更改。做有 矩可循的设计，如果讲不出道理，那就是页面问题所在。
下面我以某设计者做的外卖发现页面案例来详细说明，同样先去以上面的方法，整体发现 问题，然后拆分元素。
从整体观察发现问题之后，同样我们把页面的元素分开，去试图理解并且解釋自己的设计 元素，从而发现问题所在。
页面标题栏
状态条为黑色，为何底部的标题文字、地址、搜索却用了白色呢？并且为何地址与搜索下 方用了色块，颜色还各不相同？
标题字两边的小点又是为了表达什么意义？这里我把没理 由的设计砍掉，标题文字与状态条文字统一为黑色。
内容标题栏
标题的五彩滨纷是出于什么目的？背景为何不用纯白？换一批加上底部的黄色色块有必要 吗？作者的使用彩色标题字应该是为了让画面多一些生机，外卖类产品虽不太适用冷淡 风，然而这种多彩的处理就有些解释不通了。
换一批是一个可以点击的选项，不过这个位 罝做一个按钮样式就显得过于沉重了。这里我把标题字选了原图里的粉红色单色显示，并 且加以icon丰莒，换一批去掉按纽样式，弱化视觉层级的情况下加以icon确保识别性不 受影响。
食品信息区
同一个文本区域颜色为什么不一致？文本下的灰色分割线又是为了表达何意义？如此大面 积的红色色块出现在画面中间是为何？图片为何风格各异？
我们把这些讲不通的“过度设 计”逬行修改，同一个文本区域字体颜色保持一致，分割线去掉，保留原图中红色的存 在，而把红色运用到字体的颜色中，图片统一风格处理。
天天特价区
这里的标题栏分析同上，下面食品展示区的白色底是为何？这里我把食品展示区去掉白色 底层，放大展示区域。
在对页面布局以及配色没有任何改动的情况下，仅仅通过拆开页面试巷解釋每个元素的意 义，我们把解释不通的设计进行细微的修改之后，页面就变的比从前整洁清晰的多，当然 我这里讲的都是修改的都是很基础的东西，意在理解方法，界面的细节还有很多可以优 化，在第三个板块我们会从技法的方向，主要去分析页面的细节优化。
了解用户以及产品属性和使用场景
在前面审美部分我简单强调了一下这个问题，设计者在做页面设计时，同样需要不断的考 虑到当前设计所要达到的目的，当前产品面向的用户有何特点，产品属性是什么，以及产 品会在什么样的场景下被使用。
很多设计者落地页面时会迷失在技巧的固里，页面美不美 观暂且不说，没有考虑全面的设计稿上线之后很难让用户有好的体验。
有些时候我们在审核自己的作品时，无论怎么观察都发现不了问题，然而上手使用时却总 感觉哪里不对，其实问题不一定出在页面设计的本身，在面向用户、产品属性以及使用场 景时，可能是一个完美的设计，然而当一个极简的设计风格，出现在一个充满搞怪乐趣的 产品里，巷实会显得很违和。
或者一个五十岁左右的中年大叔，手机屏幕内的界面俏皮而 粉嫩会不会也让用户很不适呢。就像下图的微信与美团外卖，由于微信用户体呈过大，而 且面向的用户没有一个基准，并且产品属性主要为为常规社交，所以页面以保守为主，中 规中矩的设计尽M满足所有类型的用户。
而美团外卖面向的用户较为年轻化，产品属性为 餐饮电商类，产品设计要刺激用户消费，所以页面元素较为丰富，配色偏暖饱和度较高。
其实单考虑视觉方面不考虑其他因素，问题不大，然而当我们考虑用户以及产品属性和使 用场景之后，会发现页面的风格过于冷淡，对于小学生来说学习本来就不是一个有趣的事 情，产品如果做的过于冷淡会让学生更提不起兴趣。我们考虑到这一点，在这个基础上做 一些修改。
首先从配色上由大面积的白色与绿色改为红色与黄色饱和度较高的颜色，标签导航栏四个 图标卡通化处理，文案也更改的更具情感化，“最热课程”更改为“同学们都在学”“搜 索关谜词”更改为“小朋友~今天想学点什么呢？ ”，搜索栏和底部信息卡片统一更改为 圆角，更具亲和力。
考虑用户和产品届性以及使用场景之后再巷手修改之后的页面变的更 符合产品应有的调性。当在自己设计者的角度发现不了问题时，尝试巷以使用者的角度去 审核设计的合理与否。
了解页面在整个交互中的意义
做产品与平面设计最大的不同就在于我们做的是一个流程，一个通过几十上百个页面所组 成的一个完善的交互流程。所以每一个页面在这个流程中都有自己所要表达的意义，有的 页面意在展示列表内容，而有的页面意在展示列表内的评价内容，再有的页面是为了某个 操作前的提醒与操作后的反馈。
根据不同的表达意义去审核页面是否符合当前流程的用户
体验。
在设计者设计一个页面时，如果不考虑页面在这个流程内所处的位M，很容易会造成页面 虽美观但意义表达不明确，体验不人性化。
例如一个填写复杂信息的页面，这整个交互流 程中只是一个功能型而非浏览型页面，这里若配以插图或过多icon点缀会得不偿失，不如 多一些留白去让用户更清晰直观的填写表单。
总结
一个设计作品的好与坏需要从不同的角度去洞察，全局到局部的去洞察页面本身细 节，从用户的角度去洞察页面深层次的价值，再到整个产品流程中某个页面所单独代 表的意义，这几点缺一不可。当頁正学会发现自己的问题时，第二个瓶颈期也会随之 突破。设计师就是一个让自己作品无限接近完美却永远也达不到完美的角色，以上只 是提供的洞察方法，当然頁正的工作中需要经过无数次的调整与尝试。
今天到此讲解完毕，希望对大家有所帮助，如想学习更多UI设计教程，可以加QQ或微信：2877261857
也可以关注微信公众号: UI设计说，关注后回复书籍，便可以获得66本UI设计零基础学习书籍高清PDF版免费赠送！
网友评论