Sign in

讲讲UI设计师必不可少的产品思维。

大家一定经常听说 UI 设计师需要具备产品思维,但又不知道产品思维具体是什么,尤其是很多同学只把产品思维当成是产品经理做需求的能力。

所以今天我们的主题就是分享产品思维的具体思考方式和应用,这里我们还是使用昨天分享的改版案例来进行解释。

前文链接:徒步佬怒改两步路UI设计 | 优化思路分享
image

产品思维的基本定义

产品思维一句话总结,就是——通过规划产品形式来解决产品问题的思考模式。

这里我们先明确 “产品问题” 是什么,它是一个非常宽泛的概念,可以说所有产品相关的问题都可以是产品问题,包括但不局限于功能、交互、体验、视觉、技术、服务等领域。

在产品的研发和运营过程中,产品团队总会发现和积累出各式各样的问题,比如功能太简陋不能满足用户需求、交互太复杂用户用不懂、逻辑太复杂技术实现不出来等等。这些问题当然需要被解决,而解决的方式有两种,一种就是直接使用相关领域的 “技术方案” 解决,另一种就是提供新的 “产品方案” 来解决。
image

这里技术方案是泛指,是产品以外的其它类岗位使用自身专业技能来解决问题的方案。比用户觉得页面信息混乱,设计师通过布局、尺寸、间距、色彩的视觉调整,就能解决这个问题。或者某些交互设计需要非常复杂的编程方案,前端自己通过钻研技术,来实现这个效果。

比如下面这些就是纯粹的视觉优化方案:
image
image

产品方案则是指通过制定或调整产品的功能、服务、表现形式,来解决相关的问题。比如上面觉得信息混乱,不再是改设计,而是直接优化和增减字段信息。交互设计开发起来太难,那就直接调整产品功能,分拆交互步骤降低开发难度。

比如下面这个就是对产品的形式做出了一定的调整:
image

两种方案各有优劣,但在真实项目中,产品是先于设计和开发的,好的产品方案不仅能提高产品的实际表现,同时还可以大大降低技术实现的成本。所以在解决问题时,团队必然会倾向先使用产品思维来创建产品方案,然后再去实施。

总结起来,产品方案就是涉及对产品本身的调整方案。原则上,这种方案是由产品经理提供,设计师只要跟着产品的要求去做设计就好了。

但在真实项目中,产品不可能考虑到所有问题,尤其是和体验、交互、视觉高度相关的部分。

每当我们每做界面或功能时,碰到所有和产品有关的问题,都需要反馈给产品经理再等它做决策,那么他必然是处理不过来的,项目肯定也做不下去。所以设计师需要在自己力所能及的范围里,尽量自己去解决这些问题,提高项目整体运转的效率和质量。
image

尤其在一些对视觉要求不是特别严苛的环境中,UI设计的成果往往“能看”就够了,领导或者面试官对设计价值的定义就不会在视觉上,往往会聚焦在产品方案上。就是因为设计师自己有产品思维具备解决产品问题的能力时,可以极大的填补产品经理层面的空缺,还可以提高产品质量和研发效率。

但是,产品方案不是只提供解决方案就行了,还需要合理、有效,所以就要综合各方面的制约与影响,才能输出优质的结果,这就是一个非常综合性的分析过程,我很难用简单的语言进行归纳和总结。

所以,下面就通过前面的案例,来展示产品思维的具体思考过程。

产品思维的应用逻辑

在原有两步路路线详情页中,顶部的大图和信息区域是我重点调整的区域之一。
image

之所以重点关注,不仅仅是因为它 “不好看”,而是这个大图的缺陷很多。作为浏览用户,图片的关注度不是没有但绝对不是重点,往往只是草草快速浏览一遍就够了,但现在的轮播形式就没办法高效看完相关图例,且占据的篇幅又过大挤占下方的其它关键信息点。

当然也有同学可能会觉得看图怎么会不重要,你们看小红书找旅游地不就是被图吸引然后再点击进入做出选择的嘛?
image

不排除这种情况是存在的,但这不是小红书,这是一个比较硬核的徒步社区,不是给用户看大图就有问题,而是在发布用户这一侧,硬核优质的分享者(是去走或跑几十公里不是到打卡点自拍)大多不具备那种拍“美照”的能力,最终呈现的路线图景多数就是随手一拍的质量,浏览用户压根没必要仔细欣赏。

再进一步考虑,有很多经典线路本身景色就不是特别好,尤其是偏越野跑的线路往往杂乱又逼仄,照片带来的作用更多是一种对路线的概括(功能性),而不是作为吸引人的美照。在这个限制下面,大篇幅展示封面就不会获得常规以图片为导向的应用的结果。
image

这些就是针对问题的分析,而这里面既有体验的问题,也有产品的问题,甚至还有运营得问题,但具体去区分它们没有意义,只要它们不是纯粹的视觉问题我们都可以同意归纳为它们是产品问题。

基于这些问题去思考解决方案时,就可以问自己一个简单的问题,是不是只做视觉调整,如优化布局、更改尺寸、添加投影、增加圆角之类操作就能解决。如果不能,那就要涉及到对产品形式的调整了,也就是涉及功能、信息的改动。

这里我们先看改完之后的结果:
image

为了减少图片的面积和观看效率,我选择缩小图片并做成左右滑动的列表,把发布用户信息做到上面,合理利用空间且突出收藏、分享等操作。但光改这个依旧只是一个简单的视觉调整,缺乏深度和细节,没有什么解释的空间。

所以再往深一点挖掘,一屏只能展示一张图多一点,理由不是图片比例的问题,而是因为用户发布路线最小可以添加的封面图只有一张。如果只有一张,那么右侧留空显然是不能接受的,这样的方案也就做不了。而且只展示图片实在是有点不够看。

我会再想到链家之类看房软件的顶部区域,除了展示摄影图以外,还会添加固定的房型图,应用了多种图片类型。而在两步路中,如果发布路线,除了封面图外,路线图本身肯定也是能直接生成图片的,可以生成类似跑步软件的那种路径图。
image

顶部图片也可以不止有用户自己拍的摄影图,还可以添加路线生成图,同时这张图因为是静态的,就可以在生成过程中添加一些数据信息或标注内容等,和下方可交互的地图路线展示区分开来。并且在下方区域添加一个类似电商中 “商品图/视频” 切换的标签快速选择。

甚至再仔细想想,当我进入路线详情页时其实更关注的是路线本身,第一张图直接放路线图而不是放在最后,可能对相当一部分用户来说也是更实用的做法。但这么做就有点激进,需要给出初步设计以后再套一些真实内容做出页面看效果,这就是内部评审或用户测试要做的事情了。

到这里这个模块基本解释的就差不多了,而我们为了优化它已经做出了一些超出视觉设计外的变更,且需要考虑尽可能多的细节,照顾到方方面面,这就是产品思维应用的过程。

再往下的路线模块改动也同理,我就不多做展开,你们可以自己深入解构一下:
image

设计过程中对产品思维的应用,不是成为产品经理构思新的功能需求,而是维持原先目标的不变的情况下,给出新的、更完整、更合理的产品方案。

而产品方案当然不是你们想怎么输出就怎么输出,这些方案还需要再后续经过团队的评审(我要验牌),也就是说服其他人同意你的设计方案。而光看图肯定不够,所以要进行解释说明,从一开始的问题分析出发,到如何完成这个结果的考虑过程。

在这个场景中只看设计图效果是最没价值的,如果你能说服团队通过,那这套方案就是好方案,如果不行,那不管你想的如何天花乱坠还是视觉做得多花里胡哨都没用。所以方案构建逻辑性是非常重要的,因为没有逻辑就没有说服力。

再用一句话来解释企业长期以来对UI设计岗位的要求,就是:

即不希望UI设计师只做视觉还需要提供一定的产品方案,且出完产品方案还需要有理有据地说服他们!

而这也是你们在做作品集、面试时需要面对的要求。

结尾

产品思维本身就是一种比较抽象的思维,提升这种底层思维能力需要通过自己大量的积累。我们后续还会陆续做一些相关的案例分享(这应该才是最有用的)。

同时,面对真实工作场景里产品思维很多时候会沦为一种过稿的武器,是一种职场“诡辩”的技术,毕竟上线有没有用无所谓,领导、客户觉得好,才是真的好……

记得多点点赞和在看支持一下~

新一期C端新课也在招生中了,这次上课周期刚好是暑假,想学的同学快来找我~

新的课程介绍过两天就发,可以先看之前的课程介绍:2026开拔!C端体验设计解锁新篇章!

我们下篇再贱~