5个工作阶段中,UI设计师对应的工作方法
今天跟大家聊一下UI设计师在日常工作中如何理性地思考,如何将理性思考结果应用到工作中的一个方法,文章会针对UI设计师在接到产品需求时,我们应该如何支持需求?如何让我们的方案更好地满足需求?以便更好地解决问题,最大化地提升设计师的个人价值。
首先提个问,如果大家在接到产品经理发过来一个需求时,例如:增加一个A功能、或优化B功能等等,诸如此类需求,面对产品需求我们应该怎么做?接下来就分享一下我在日常工作中是如何支持产品需求的。
首先我把设计师的工作周期分为5个阶段:
一、需求池
需求池主要是产品经理前期整理需求的阶段,可以根据战略目标、用户反馈、线上问题等整理需求的过程,最终产出我们设计师看到的需求(也就是我们经常看到的原型图)。
其实,设计师可以提前与需求方多聊聊需求与想法,如果有机会多参与一些需求评审阶段的事情,相信我,这会让你受益匪浅。
通常有的产品经理会直接告诉设计师,按照我的原型图美化一下就好,如果我们只是按照产品经理的需求进行美化,如下图:
那只能说你是一个合格的美工(当然也不要为了改而改,任何一个元素在页面中出现都是有原因的),文章主要讨论如何利用理性思维去判断,利用多个维度思考不同的解决思路,最终产出更好的设计方案,让我们成为一个具备全局观的设计师。
二、需求分析阶段
需求分析阶段是对于设计师,以及整个项目的重要部分,关乎着方向是否跑偏、是否合理,这也是很多设计师容易忽略的部分。
这部分主要目的是让我们最终设计的方案能够更具理性思维,让我们方案可以更经得起推敲,还能让设计师在设计评审阶段有理有据的阐述设计方案(有很多设计师的设计方案都经不住3层的追问)。
1. 现状是什么(背景)
首先设计师在接到需求后,第一件事情就是要了解背景是什么?
也就是我们常说的现状——目前产品遇到了什么问题?是否需要现在解决?以及线上数据是什么样的?(确认优化或改版前的线上点击率或转化率等)一定要把这些基础数据了解清楚。
2. 为什么要做(价值)
了解需求的价值,也就是需求方为什么要做这个事情?需求解决什么问题?是满足用户需求?还是实现商业目的?又或是提升用户体验?
设计师只有充分了解需求价值后才能明确我们的设计目标及方向,当然设计师要判断并决策需求是否真的能够实现目标,是否还有更好的解决方法(例如:可以从策略、交互形式、展现形式等多个维度去思考解决方案)在需求分析阶段只有不断层层追问,最终明确目标,才能使我们的设计走上正确的方向。
如果方向都错了,再炫酷的设计也是无效的,设计师应把70%以上的时间来分析需求和导出解决思路,千万不要过早的把大部分时间放在设计方案上。
3. 确认解决方案(目标)
这个阶段主要是设计师对需求进行整体梳理,根据需求方目标,在结合设计师对需求的深挖后给出的建议,综合推导出达成目标的关键因素(解决思路),如下图:
也就是说做哪几个方面的事情可以满足目标,结合一些现实情况(如外部渠道合作问题及内部开发实现成本等各类因素)再筛选出当下最优的关键因素(前提是确认对应的关键因素能够满足大目标)再依次推导出设计目标,设计目标就是具备可执行落地的设计任务。 如果上图没有太理解的话可以看下图,下图我拿减肥为例:
获得的具体任务还可以进行细化,如:一小时要锻炼核心、腹部、腿部等,尽可能让你的想法转化成可操作执行的任务。
- 用户是谁 这个用户并不是说产品的用户是谁,而是针对这个需求的目标用户,产品全部用户中的哪一类(如新用户、老用户、付款用户、免费用户等)细分的用户也会影响后面方案结果。
- 预期效果(验证目标) 设计目标明确后,要与需求方确认本次需求的预期效果,最好能有具体的数字指标或其他可衡量的方式,如提升点击率多少?提升转化多少?收入带来多少?因为需要验证本次设计的效果如何,最终是否能达成目标(还要确认埋点是否可以验证最终的效果)。
三、设计阶段
只有前期设计师了解并确认了背景、价值、目标、用户、预期效果,设计师才能在设计阶紧紧围绕大目标去执行设计方案。
1. 信息结构优先级排序
根据前期关键因素拆解的设计目标,确认设计目标信息的优先级,对应的设计目标会有对应信息,确认页面信息展示优先级,如下图:
上图展示的A、B表示信息展示优先级(优先级要结合用户需求和商业需求来排序)。
2. 信息结构分析与提炼
主要对需求方提供的文案进行再优化,因为有的产品经理写的文案过于产品化,没有站在一个用户的角度去理解文案,本来产品想表达的是“前门楼子”,用户却理解成了“胯骨轴子”,一个合适的文案在传达信息上至关重要,所以设计师需要在文案上在做一些优化,然后再与需求方确认。
3. 方案设计
这个时候可以根据确认的信息优先级进行设计工作,这是设计师最熟悉不过的阶段了,可以先是调研一下竞品是如何做的,当然如果只是看一下怎么做的,就按照人家的去做,就缺少了一些思考。还应分析竞品的特点,了解他们是为何这样做?为何不那样做?他们有什么优势?以及他们有什么限制条件?哪些地方做的好?哪些地方做得不好?
最终结合竞品的分析结果在结合自身产品的特点,输出符合自身品牌性格的方案,前期都可以先发散的去想各种设计方案,这个阶段如果产品已有设计规范,则在设计方案时还要考虑到自身的规范组件是否能够满足设计目标,最后输出不同的设计方案,下图为举例示意:
在多个方案中选择最终最适合的方案,方案确认后还要与开发确认方案可实现性、时间成本及风险等,以便保证后面设计评审的顺利。
4. 设计输出
整理最终设计方案,输出完整视觉交互稿,并附上:背景、价值、目标、用户、预期效果等,如下图:
主要是为评审阶段让其他同学快速了解需求,然后在对设计成果进行走查,可以做一个Checklist,如下图:
从多个维度去检查方案是否存在问题或疏漏,完成以上部分整个项目中最重要的部分就完成了,在确保以上部分全部完成后进入方案交付阶段。
四、方案交付阶段
1. 与需求方确认方案
这个时候,设计师要把最终的设计方案与需求方确认,确认设计方案是否能够满足需求方目标。
2. 评审及排期
一般在需求复杂或大版本迭代的时候都会走视觉评审流程(其他小需求可跳过)评审会上,评审前做一个大纲,梳理会上要讲的内容,主要围绕设计方案是如何满足需求目标的方向去讲,然后把各种交互状态描述清晰,尽可能讲的细一些,讲的越细,后期沟通成本就越低。
还有就是提前想好其他同学会提怎样的问题,提前做一些准备,考虑到评审中可能会出现的状况,应该如何对应等等,总之就是从不同角度多考虑一些。
五、方案验收阶段
1. 成果验收
排期结束后,就需要设计师与开发确认方案验收时间,可以不定期询问开发同学开发进度,剩下的就是后面的验收工作。
很多设计师在验收环节就松懈了,导致上线后效果惨不忍睹,我给我自己的标准是开发同学要还原交互效果及设计稿样式的95%以上,之前在做规范组件的时都是100%还原的,开发同学都说我太吹(shi)毛(le)求(ba)疵(ji)。
验收工作到这里还没有完,这时设计师还需要在日常环境下进行测试,虽然设计师不是专业测试,但可以从几个简单的方面进行测试:流程是否走通、交互状态是否完整、是否存在卡顿情况、是否存在BUG、交互及样式在不同手机机型下显示是否正常,总之就是尽量让你的设计方案上线后能够很好的展示给用户。
2. 上线与数据验收
这一步也是很多设计师容易忽略的,就是你的设计方案上线后就觉得结束了,上线效果也不管不问,回想一下前面所讲的:“预期效果”,就是要验证一下设计方案最终能否完成前期定的预期目标,一般情况都是产品经理在上线一段时间后,让数据同学或BI同学帮忙跑一下数据,最终根据数据结果验证需求是否达成目标。
如未达成,则需要设计师与需求方在进一步讨论,看是需求分析阶段的方向错了,还是设计阶段的形式错了,根据偏差点去在进行新一轮的思考。
如果达成了,说明这个设计方案完成了最初的既定目标。
最后上传一张我总结的流程图如下图:
六、总结
1. 需求池
- 多和产品聊聊需求,多参与一下需求评审的阶段;
- 多用全局观视角去看需求;
- 多问几个为什么;
- 多体验产品和竞品,可以自发推动改善视觉或流程体验;
2.需求分析阶段
- 搞清楚背景是什么;
- 搞清楚价值是什么;
- 搞清楚目标是什么;
- 预期达成怎样效果;
- 搞清楚需求面对的用户是谁;
- 思考需求方的需求是否合理,并提出你更好的解决方案;
3. 设计阶段
- 信息结构优先级排序,以及优化提炼文案;
- 多体验竞品流程,了解竞品设计思路和限制条件;
- 多探索不同的设计方案;
- 完成设计方案并做好最后的走查;
4. 方案交付阶段
- 与需求方确认方案;
- 评审前做好充足准备;
- 整理切图发给开发;
5. 方案验收阶段
- 验收开发成果,还原设计方案95%以上;
- 日常环境测试;
- 验收上线后跟踪数据表现并做后续计划;
写在最后
想要成为优秀的设计师,除了日常满足需求方的需求外,不断探索产品内可优化的点(包含但不限于:策略、流程、交互、视觉、文案),只要是能完善产品的地方都可以自主推动去做,不要把自己定位一个只会支持需求的设计师,善于发现机会点,推动执行,这样可以让设计师从一个支持方成为一个项目的推动者,改善其他人对设计师的刻板认知。
本文由 @Tanruy 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于 CC0 协议
作者暂无likerid, 赞赏暂由本网站代持,当作者有likerid后会全部转账给作者(我们会尽力而为)。Tips: Until now, everytime you want to store your article, we will help you store it in Filecoin network. In the future, you can store it in Filecoin network using your own filecoin.
Support author:
Author's Filecoin address:
Or you can use Likecoin to support author: