UI产品分析思维与技巧（一线设计师都在用）

UI产品分析思维与技巧（一线设计师都在用）

前言

在设计中，很多设计师，只思考：做得漂不漂亮；

我们这里有一些进阶问题，大家可以先思考一下：

1、元素、版块的重要程度如何判断？完全依靠产品？

2、怎样对产品给出的原型进行优化？平时纯做原型彩色化？

美团前资深视觉设计、站酷300+万推荐设计师总结了UI产品设计中布局层级梳理的相关知识，包括常见的设计误区、梳理常见的设计瓶颈期、瓶颈期突破及大厂的招聘准则、设计师梳理需求的三大维度、设计处理排版需求：十字交叉分析、产品功能目标的认识等关键点，希望能够帮助设计师完成初级到中高级思维的转变及必备设计技法的掌握。本次分享100%纯干货，从实际案例出发剖析关键点，实战性强，满足中高阶设计师的职业发展需求。

请注意：文章末尾高能！！！

案例一：设计优化角度

如在教育类产品的个人中心页面中，如何让用户更快速找到功能，应该从哪些角度入手？

可从业务目标、使用频次、用户目标三个维度，对个人中心的功能进行划分，从而确定设计重点。

作为一款在线教育产品，在业务目标中，与盈利相关的功能有“我的余额、优惠券”，业务主功能有“笔记、班级收藏、课程资料”；

在用户目标中，用户快速查找的功能有“笔记、班级收藏、课程资料”

在使用频次中，使用频次较高的功能有“笔记、班级收藏、课程资料”

通过三个维度分析后，可对功能进行层级梳理，从而确定设计重点功能

经过这么多的分析，怎么确定布局层级？

这里我们采用的方法是分析同类竞品。

在竞品一中，一级功能实用彩色面性图标方便功能的快速查找。

在竞品二三中，分别采用彩色、灰色面性图标表现不同的视觉层级

通过视觉手法梳理功能的层级关系，页面精细度的提升，不仅仅只考虑视觉，更多的是从功能目的出发，帮助用户更好的实现使用目的。

在图标设计中，使用了2个小工具：

一、是图标盒子对图标视觉大小进行统一；

二、是使用Adobe color cc进行多色系配色。

案例二：布局优先级

在首页设计中，如何确定布局优先级？是否有一些科学的方法？这里介绍两个方法论：十字交叉分析、界面浏览测试。

十字交叉分析的两个维度：对用户的重要程度、对公司紧急程度

通过Kano模型对用户重要程度进行分析，banner和列表流为必备因素，不提供满意度大幅下降；金刚区为期望因素，方便用户快速进入二级页面，提升满意度。

对公司紧急程度，通过UV*历史转化率进行排序。

最后通过XY轴坐标系，对三个版块进行定位，banner（3，3），金刚区（2，2）列表流（1，1），从而确定布局的优先级。

为了达到设计的闭环，设计方案必须得到用户理解，如何验证首页布局优先级得到用户的理解？这里介绍方法论：界面浏览测试。

通过三个问题的形式对目标用户进行调研，以保证设计方案达到设计目的。