如何使用产品思维设计界面

成都/UI设计师/3年前/318浏览

版权

如何使用产品思维设计界面

2023原创文章输出，02/21篇，归纳总结，沉淀出新，一起努力的大步向前走！

在行业中不停地往前走的过程中，会遇到不同类型的项目，形色各异的同行前辈。越来越发现，小到一个项目，大到整个行业的发展趋势而言，单纯的视觉UI设计已经没有办法满足要求。处在行业的边缘说明你已经落后了，那么用伟人的一句话来说：“小鬼，落后是要挨打的！”

那么就说到今天的主题，既然单纯的视觉UI岗位已经被行业挤到边缘，那么处在这一水平的UI设计师该怎么去走出困境呢？接下来就说一下自己在设计页面时是如何使用到产品思维的。

尝试带着产品化思维去做设计，当你把营销和产品带入到设计时，就不只是单纯的排版、配色、交互……更多的是分析业务流程，明确项目最终目的，以前两项为铺垫，确定了设计方向后带着引导性去做设计。

1、需求文档挖掘式分析

需求文档一般是由需求分析师或者产品经理编写，文档含概项目的各个模块：功能说明、业务流程、项目背景、数据格式、后台数据规则、基础的原型图等。需求文档的内容有很多，如果你遇到非常有经验的BA，那你可以偷着乐了，但是多数的BA，都不能做到把需求文档写到完美没有漏洞的状态，很多需求文档甚至是漏洞百出。

那这个时候你作为UIUE设计师遇到这样的BA怎么办？相信大多数的设计师会说：跟我有什么关系吗？我按照需求文档画图就好了，有漏洞了，锅也不是我背。哈哈哈哈哈哈~其实说的也是没毛病，前提是你就想混在行业边缘！

对需求文档挖掘式的分析就变得很有必要，如果需求文档不够详细，直接导致你原型绘制时出现交互不明确，页面缺失等问题，那么设计出来的高保真页面也一定存在问题，这些问题会直接反映在最后的用户体验中。

要知道，产品和UI在一个项目中起到的是带头作用，如果头带的跑偏了，那开发和测试的整个流程都会出现问题，甚至最后做出来的东西本末倒置都是有可能的。

这里简单的说一下产品研发的完整流程。

2、绘制详细带交互的原型图

这里要吐槽下BA，我经常收到的需求文档中的原型图都是东一张西一张，并且看不到任何的交互痕迹。使用这样的原型图去做下一步的高保真页面，一定会出现很多的问题，看不出业务流也看不出交互整个闭环流程。

这个时候就不要去看BA提供的原型图了，深度去分析整个功能的闭环流程，从哪里进？，最终从哪里出来？抓住重点功能，分析业务流，根据自己的分析去重新绘制原型图，自己绘制的原型图要包含需求文档中的全部功能，甚至文档中没有的功能，只要是合理的就可以加进去。

注意交互，比如卡片内容展示极端情况、弹窗弹出样式展示、操作完成时的提示、报错提示等，每一个交互的动作都要设计出相应的原型图。

所以为什么说深度挖掘需求文档是必要的工作，到这一步如果你对需求文档没有深度思考，那么你对功能的业务流程也必定一知半解，原型图绘制时大概率是会缺少页面。

3、高保真中的UED（用户习惯、情感设计、趣味性）

用户体验（UX）是一个人对使用特定产品，系统或服务的情感和态度。它包括人机交互和产品所有权的实践、体验、情感、有意义和有价值的方面。此外，它还包括人们对系统方面的看法，例如实用性，易用性和效率。

用户体验本质上可以是主观的，其程度是关于产品或系统的个人感知和想法。用户体验会动态变化，由于使用环境的变化，会随着时间的推移不断进行修改。简化的用户体验是关于用户如何与产品交互和体验产品。

以上是用户体验的定义，说的很全面，但归根结底就是给用户一个好的环境，无论是情感上还是使用性上。

我们知道用户体验可以是主观的感受，所以要做到大众都能接受的体验其实很不容易，毕竟众口难调！多看、多用、多感受就变的很重要。去了解用户习惯，把这种习惯加入情感设计和趣味性的设计，也许就会变成了一种新的用户体验之旅。

情感设计案例

网易云音乐APP播放页面的设计中，页面主色调取自唱片的颜色，并且进行毛玻璃风格处理，给用户带来沉浸的音乐体验感受。旋转的唱片带出无序的星球波浪动效，像是星球围绕唱片旋转，又像是水波纹，一圈一圈荡漾消失，这种沉浸式氛围感的萦绕确实非常到位，沉浸又平静。

不知道大家有没有发现一个小细节，唱片的旋转方向和星球波浪的方向是相反的，其实在设计上，这是在找一种平衡，正向反向相互消除。

趣味性设计案例

哔哩哔哩移动端登录界面设计中，当你输入完手机号，光标移动到验证码的输入框里闪烁时，头部banner图中的卡通人物配合的用手遮住了眼睛。

哔哩哔哩的软件定位是卡通和二次元，此处的banner在样式设计上很符合软件的调性。动效banner中手遮挡眼睛的这一下真的很有趣，让你觉得好玩的同时也在向用户传递一些信息，暗示用户重要信息不可泄露。

哔哩哔哩登录页页面

支付宝摇现金页面

页面趣味性的设计方式，往往能激发起用户的参与兴趣，同时摆脱操作软件的枯燥感，从情感上出发，带来更好的体验感！

4、必要的交互动效或交互跳转图

产品研发的人员组成中，每个人的专业能力都是完全不一样的，日常的学习和涉猎的知识结构也是完全不同，所以作为设计师，一定不要以为：这是个很简单的交互，开发不可能不知道吧？所以在页面高保真交付时，可以附上交互文档或者交互的GIF图，明确且直观的告诉开发人员，我需要的动效和跳转样式。消除沟通成本，减少开发人员的疑惑。