界面布局方法论分享，还有80%设计师都不了解的进阶版

察打一体

大家在设计界面的时候，通常面对着各种“元素”无从下手，大量的字段、图标、图片等如何有理有据地排布在小小的屏幕中，是界面设计的终极问题。也许大家都知道，视觉设计不仅仅是原型上色，还要通过自己对界面功能的了解进行用户体验侧的优化，如果你还不知道如何拆分信息要点，如何科学排布信息，相信看完今天的布局方法论后，会在布局层次优化的角度给你一些理论支撑。简单地说，十字交叉分析就是一种利用坐标系排序从而获取元素优先级依据的设计方法论。虽然一句话说清了他的作用，但这里包含了两层意思：如果你对十字交叉分析已经有过了解，可以跳到文末，我们还准备了方法论的进阶版本哦～知道了方法论的原理，但面对实际案例我们需要更具体的执行步骤，这里总结了四个步骤，方便进行层层分析推进：单看上图可能有些概念化，下面我们一起结合两个实际案例的讲解感受一下十字交叉分析的应用。案例:十字交叉分析在商品卡片中的应用下图是一款B2B商城接单页面feed流内容单元原型图，我们先进行第一步，对需求进行梳理分析、对设计元素进行采集：案例内容为真实需求加工而成，主要配合介绍方法论实践过程；经过对需求的深度理解，我们总结出设计目标：最后的UI输出，根据方法论将一些信息放在二级页面，突出了重点元素，整个界面功能引导意图明显，帮助用户在忙碌场景下更高效地使用；案例回顾：整个设计过程，并不是简单的原型彩色化，虽然是一个小需求，但如何更科学、更好的帮助产品或用户达到目的，十字交叉分析帮助设计师完成了一次有理有据的设计输出。问题：下图是十字交叉分析第三步，归类元素中的场景，当A、B点在同一象限，各有优势且区分不明显，那么如何确定两者在界面中的强弱关系呢？矩形面积决定在坐标系中，两点的xy值相乘所得矩形的面积，可以相对准确的代表AB两点的强弱关系。由进阶点一推导而来，在复杂场景下，评价指标可能不止两项，我们可以建立多维模型，根据体积大小进行分析。进阶点总结两个进阶点的意义不在于实际的应用价值，而是代表设计师使用方法论，进行科学严谨的设计，且对数据进行一定的发掘和利用，这才是它们的意义所在。方法论优点总结：1、十字交叉分析针对复杂UI页面的布局，具有科学的指导意义，让我们在接触到纷繁的信息时能进行有理有据的布局排版设计；2、同时，它的评判标准也是以实用价值为导向的，这对设计实现业务盈利能力的提高和布局用户体验度的提升都是非常有益的。方法论缺点总结：1、评价指标的设定需要设计师充分了解需求背景和使用场景，这一步骤是关键性的，它影响整个论证结论的正确与否；2、理论结果不可以全盘套用，还需要根据实际情况调整，因为xy轴所代表其重要程度的密度有时并不相同。写在最后：关于设计方法论，不能说是起死回生的灵丹妙药，但绝对是画龙点睛的神来一笔。毕竟一个好的方法论不能保证优质的视觉输出，但是对于商业设计来说它们赋予了设计师更多的设计价值。最后，以上观点，如果有不对的地方，欢迎留言指出～