功能主图设计思考

产品原型

上周开始背单词PK的需求设计，今天提交后复盘主图设计。

原生开发，匹配对手开始PK。以上为首页的原型，包含个人信息、排行榜和底部悬浮开始按钮。

做之前思考到的关键词：pk、两个人、互补色、对比、奖杯、荣耀、书、冲突下的融合。

一、Do it

虽然想了很多，但是并没有去做很复杂的设计。可以理解为画高保真原型，把数据按照设计思维进行布局。

包括卡片大小、圆角大小、姓名大小，先把原型图按照设计要求（亲密性、对齐、重复、对比、亲密性）进行布局。

做到这一步还是很容易的，只需要按照设计规范做即可的。

设计规范包括了用色、字号，再找一下之前的设计元素（例如一些iocn），结合起来基本就完成了最基本的信息展示了（其实可以理解为把产品原型根据设计规范重新画一遍）。

这里面的蓝色是标准色，就直接当背景色用，仅凭个人喜好随便用色是不可取的

二、首屏

首屏即进入到这个功能后看到的内容，这里需要用心设计，毕竟是承载了吸引用户继续操作的地方。如果觉得完成第一步就可以了，那要设计干嘛呢？

不仅是为了解决问题，在完成产品需求的同时也需要考虑通过设计需要达到的效果是什么。

在这里无非就是留住-吸引用户继续完成操作，这时候设计思考如何达到这个目的。

回到最初的想法：pk、两个人、互补色、对比、奖杯、荣耀、书、冲突下的融合。

放个奖杯在中间，给用户一种达成性的目标。树立一个flag，用户潜意识会告诉自己开始答题并赢得奖杯，就像苹果健身达成目标后会发放奖牌吸引用户完成并坚持打卡。

主要元素（奖杯）选择好后，在根据关键词里记录的找一些辅助图案进行丰满画面，简单的头图也算完成了。

根据设计规范调整产品原型，明确设计主图（主要想展示什么，此处为奖杯），再增加一些相关元素设计，便完成了设计。

三、多一点思考

很多初级设计师在上一个阶段就完成了设计，这也是需要成长的地方，思考！

设计完毕后作为产品使用者重新审视当前设计，这是什么功能？能干嘛用？我要干什么？

这是什么功能？无相关文字提示，导致用户迷失方向。该怎么解决？

没有特别强烈的点击开始挑战欲望，蓝色冷静的很。这怎么解决？

优先解决一下用户迷失问题

1、我在哪？

这个问题是需要马上解决的。一方面告知用户另一方面在客服引导用户操作时也会比较方便。

相比顶部导航（右侧）增加单词pk来说，左侧相对更加明显。logo要大！至于单词pk字体如何做暂不提，花瓣不香吗？

增加了很明显的信息后，便解决了第一个设计问题。

2、不想继续？

没有点击欲望，其实是在考验设计基础。推荐大家看《写给大家看的设计书》，能够在这方面给很大的帮助。

我的解决办法很简单，回到关键字看一下还有哪个没有考虑。冲突、互补色等等。那就增加一些冲突！

在原有纯蓝色的背景上，加了红、黄这种色相的对比。增加了画面颜色的跳动感，有活力！

在外形上，只是很简单的波浪图形，增加了色彩维度上更宽的渐变，就能够让画面活跃很多。

波浪生成器：https://getwaves.io/

另外还增加了一些设计效果，为了让图层丰满起来。例如投影、渐变、你还注意到什么

3、气氛一定加

气氛是最简单又最容易出效果的手段，所有设计加上气氛后都会变得有意思，同时画面也会丰满很多。

金光乱舞、金币横飞，觉得万能了。很多活动都可以用，活动必然就会有金币或者其他奖励，放心加上吧。

这便是最后：

这便是我完成主图的设计思考，在反思的同时希望也能够给你带来一些帮助。