浅谈设计的分解法 原创项目设计过程分享

序言

最近整理作品，翻到以前做的一个内部设计分享，决定重新整理一下分享到站酷。

回想起以前带过的设计小团队，有四个妹子和一个我，其中一个妹子把其他三个收作了姨太，然后每天大姨太、二姨太、三姨太地喊。因为我管她们，顺其自然的我就被叫成了管家。但我想取个霸气的名号，原本想说锦衣卫，然而脑袋一时短路，嘴巴一时卡机，说成了“东厂”，自此相当长的一段时间挂上了东厂公公的黑名。。。我的内心是苦笑不已，俗话说得好，no zuo no die，纯当娱乐了。

 

回归正题，这是一个项目设计过程及方法的分享，可以带你看到一个项目比较完整的设计过程。过程当然是坎坷，最终成果没有特别高大上，但在自我摸索的过程中获取成长对我来说很有价值。

设计的分解法

分解法源于一个励志故事：

一个寺院方丈想举办一场募捐会，期望募得资金一千万元用作寺院慈善经费。但不仅方丈，寺院众人都觉得难度太大，根本不可能实现，而且这么大型的募捐会，前期投入费用也不菲。于是，方丈决定把一场大型募捐会一千万募资计划分解成10场小型募捐会一百万募资计划，并通过目标的逐步分解细化为周边乡镇巡回募捐计划，目标锁定为周边乡镇企业老板，会场人数100人，人均募捐1万元。最终方丈顺利举行巡回募捐会，并募得超过一千万的善款。

分解法的概念：

将目标分解成若干个可以完成的小目标，并逐一去执行完成它，那么你原本的目标也随之达成。

（小贴士：若分解后的小目标仍无法达成，则继续对其使用分解法原则）

将分解法应用到项目设计中，包含三层含义：

1.分析对象：你所遇到的问题都是你的分析对象；

2.解决方法：有理有据才有说服力；

3.分解执行：将目标分解成若干件可实现的部分,并逐件执行完成。

本次分享将以一个移动端砍价项目作为案例，讲述分解法在项目设计中的应用。

SET1 项目分析：

（原型图-截图）

【基础分析】

1.这是一个？

移动端砍价活动；

 

2.需求方的要求是？

大气、天秤动画效果；

 

3.需求方提供的资源有？

基础原型、随时沟通。

【原型分析】

1.整个砍价活动的页面由不同的模块/部件组成：

Banner、商品栏、砍价记录、活动规则、其他商品推荐等。（如图）

2.不同的页面会共用相同的模块。（如图）

【结论】

 

对，你想的没有错！我们只需要：

1.把不同的模块/部件设计出来；

2.根据原型的要求把模块/部件拼成页面；

3.再根据页面调整整体效果。

【问题】

 

对，还有一些问题，比如：

1.需求方需要的天秤动画效果不好；

2.需求方理解的大气是什么？

3.原型演示的流程可优化等。

【教训】

 

因为初稿只当作普通设计需求安排对接，所以初稿我们吃了一些亏…

（初稿失利，他们说想要的并不是这样子，但又说不出想要怎样子，也没有可供参考的案例~）

SET2 解决方案

【方法】

在寻求解决方案时，我们需要理解并遵循以下一些原则，这样有助于改善心态：

1.“改”不是不尊重人的行为；（虽然我不喜欢改稿，但做得不好要承认~）

2.“改”应该建立在有效沟通的基础上；（有目的性地改稿）

3. 遇到问题应该较真地讨究（讨论研究的意思）。（不要太遮遮掩掩，好就是好，不好就是不好~）

哲学家版心理：运营虐我十八遍，我待运营如初恋的想法是不对的，但我们也要尽可能避免陷入改稿漩涡。

碎碎念版心理：我觉得挺好的呀，不喜欢改稿，没办法拒绝，就当安慰一下自己的小内心咯o(︶︿︶)o 

【问题分析】

1.需求方为什么想用天秤效果？

①想用天秤上下摆动来表现价格变化；

②想用天秤右侧价格下降了表示砍价程度；

③暂时未想到其他方法。

2.需求方理解的大气是什么？

①第一眼感觉要炫目多彩；

②内容要细腻工整；

③因为是活动，页面不希望是白底。

（以上结论通过和需求方进一步的沟通后，总结得到。）

（说好的随时沟通，设计师费脑尽筋想方案，为啥不去烦烦需求方？）

3.原型演示的流程可优化。（举例）

①好友接收页砍价前后的内容应该不同；

②页面模块位置的调整可减少设计和开发的工作量；

③发起多个砍价时，查看砍价结果需要一个列表页提供选择查看结果等。

【结论】

我们否定了天秤动画效果：

移动端显示屏小，天秤效果让界面内容成“T”型分割，当天秤上下摆动，“T”型两侧的内容区会变成三角形，商品主图和商品信息会拥挤不清，不利排版并且构图不美。（如图）

【解决方案】（有否定，就要找到代替的解决方案）

我们参考了游戏的做法：

1.设定被砍价的对象是掌柜角色形象，

2.利用把人绑起来“砍”表现砍价的互动；

3.利用血量的减少来表现砍价程度。

（我们还增加了一些趣味，比如：血量在不同的程度，掌柜会有不同的表情，说不同的话）

 

创意背景：

市场上许多“砍价”活动大多是手滑滑动或者点击，较枯燥无味，仅为了得到商品优惠。我们转移“砍价”概念为“跟老板砍价”，设计一个创意活动场景让人戏谑“老板”，享受游戏的趣味性，还能得到商品优惠！

活动主题：

绑架老板给你砍（约好友，最低砍至0元！ ）

活动场景：

用户挑选心仪商品发起砍价后，我们将掌柜（老板）绑至郊外让用户邀请好友去砍价。价格每被砍到一定程度，结果页面掌柜的表情会有不同变化，共有6个状态：奸诈（价格很高）、嚣张（价格较高）、求饶（半价了）、晕竭（价格很低）、魂飞（超低价）、完成（砍价结束）。

SET3 分解执行

【目标分解】

砍价活动需求按照性质可分为两大部分：

1.界面UI设计；

2.角色形象及场景原画绘制。

【UI界面设计细分】

1.Banner；

2.活动商品栏、商品列表、活动规则；

3.倒计时、砍价记录、活动之外；

4.弹框、结果提示等。

【UI界面设计执行】

逐一对每个模块进行设计，设计过程中注意保持风格的统一性。（如图）

【角色形象及场景细分】

1.掌柜角色原型绘制；

2.六个砍价程度的表情绘制；

3.两个活动场景（店内、郊外）及表情动作绘制；

4.引导页海报。

【角色形象及场景设计执行】

我搜集了一些原画绘制方向的参考图：

（原画基础太差，团队没有配备原画师，只好找了个妹子帮忙画了手稿，如图）

（手稿还不错，初期的电脑稿，我那不是24K钛金眼的近视眼也亮瞎了...图片奉上↓）

（好吧，别笑，忍住！）

（最终完成的6个表情状态↓）

将部件&原画组合成最终页面，并调整部分信息，项目终于完成了~过稿  \(^o^)/ 

 （下面是部分终稿页面展示）

项目展示点击链接：https://www.zcool.com.cn/work/ZMTc3NzYyMTI=.html

--------------------------------------------------------------------------------------------------------------

等等！

【观众老爷有话说】

结束了？说好的番外呢？说好的彩蛋呢？还有你还没说清楚那个掌柜是怎么变样的！

--------------------------------------------------------------------------------------------------------------

（接上）

【番外篇——绘画技巧小谈】

（本文为原创文章，禁止商业性转载，非商业性转载请标明原作者及出处）

— END —

    

THANKS

(文章篇幅很长，感谢你的阅读！喜欢请点赞吧↓)