我在转型做运营前，有两年时间都在设计新产品，常常要和app视觉风格提案打交道，在长期设计反复修改的道路上积累了不少经验，直到一天在工位上被一个“苹果“砸到......

→_→    

于是作者把水果融入自己的思维中，归纳了一套设计概念提案方法论，主要是给希望能做好UI视觉提案的朋友们提供一些思路上的便捷方法，比较适合还在摸索阶段的同学

首先我们看下通常设计概念提案的意思

没错。作者两年的UI设计经历下来，提的最多的还是app类的视觉提案，我在长期的实践中发现，做一个提案，主要是做好如下三个阶段的工作：

1.快速构思  2.设计前提  3.设计执行

快速构思阶段

快速构思一个视觉界面，其实是在思考如下三个部分：

1）主色调   2）造型   3）交互

其次是构思要够快，通常需要哪些积累？有很多角度，多看好的UI界面，摄影，广告和其它领域的作品，后面作者会教大家如何从这些作品中提取自己要的东西

设计前提阶段

通常初级设计师在接到需求后，会进行快速构思，然后觉得自己感觉不错后，直接就着需求方向就开始了设计执行，作者身为一个姿森专业设计师，告诉大家“设计前提“非常重要！

（一 一+ ） 一定要在执行前做好基础工作

了解用户 包括去了解用户的年龄段，性别，分布，经济水平等等一些共通特征和与产片有关联的特征；

发现需求 则是通过数据和调研发现她们真正需要的是哪些功能，然后对比我们要做的，是否符合用户的立场

观察习惯 就是要去观察用户在使用这个产品时，具体都在哪些场合，手指怎么去用，用的时候什么心情等等

在经历设计前提的洗礼后，我们把一个想要做的好设计按下图的水果摆盘来理解～

设计执行阶段

在保证前两个阶段的工作顺利进行之后，我们更重要的设计执行能力就要展现了，这是设计师最本质的能力，这时只要把“快速构思”阶段的三个主要部分表达好就是合格，但我们要做到更多，做出一些“亮点”，以下是一些长期积累下来的“小聪明”办法：

快速切入——就好像切水果一样，用最快最直接的方式，忍者刀咻咻咻！（*>.<*）

独特性——普通苹果和咬了一口的“苹果”

效率性——区分度大而拿取方便的水果摆盘

惊喜——设计一个“橙子”，在用户面前突然倒出橙汁

动效——让一个水果成为大片，只需要一些些小效果

接下来我们详细讲解这套执行法则中的各个步骤技巧，如何把想要的水果部分提取出来，拼凑成我们想要的样子

qq空间下的情侣空间是我过往的一个案例，以下就以情侣空间的视觉风格提案来讲解

快速切入——意思就是快速的把先前构思的主色调，造型和交互的一个整体界面感觉提取出来，如下图左边的灵感来源可以引导设计出右边的一套界面效果，这是作者总结的非常实用的一种思路技巧

UI设计师们可以这样观察这张左边的灵感图，它的整体布局，还有中间瓶子的平面排版，颜色搭配等元素，把它们结合到一个UI界面中去看，就可以得到一个“颜色搭配框架”；

还有这个灵感图中有一个“旗帜”的形挺不错，我们把它拿下来；

那个瓶子上的长字体很有设计感，我们也提取出来。

如下图

然后把提取出来的“框架”和“特色元素“结合到一起，具象化你的界面，然后根据自己的需要调整，就能思路顺畅的得到一个视觉风格界面，如下图

用得好的话，还会上瘾，看到什么图都能“火眼金金”，以下是之前两张稿子的快速切入过程：

接下来是独特性环节

设计icon是UI设计师的一大难题，我们常常觉得icon千奇百怪无奇不有，但又无外乎“点线面”的空间搭配，所以我们在掌握了自由运用“点线面”的搭配能力后，进一步需要加入的就是它的内涵。

保持icon具有自己的独特性，当成一个logo一样来思考，以下举几个简单例子

这两个icon的设计在思考角度上都紧扣情侣的氛围和场景，造型上还能再优化，但是思路定位很准确

icon设计是UI的一个永远在更新换代的主题，但是掌握了这个思路技巧，就能更好的适应时代风格的变更甚至创造新风格，接下来我们看效率性

淘宝的这个个人信息页面是非常经典的案例，设计师在最终要的订单icon上采用的是app的原生色，代表淘宝最重要的功能入口；往下次级的那些，和支付和金钱相关的，用了让人联想到支付宝的蓝色；同理在社交相关的功能入口则使用了微信绿。

它们巧妙的用这些大环境下的用户颜色趋向，区分了不同的功能入口，提高了效率。

这些隐藏在设计师设计表象下的思路技巧都是非常重要和实用的

回到情侣空间的视觉风格上看，利用大字体，颜色搭配，icon造型等视觉元素，达到页面上区分出以上视觉浏览优先级的目的

最后是惊喜感

惊喜感是我们做设计时最好时刻保留的能力，它不仅能提升你做设计稿的愉悦度，还能提升你对用户场景的掌握度，常见的如上图中bilibili的输入密码界面，两个二次元人物会在你点到密码的时候把眼睛遮挡起来，是不是很惊喜，觉得很可爱～(*^‧^*) 

同样的案例还有在百度输入框输入“黑洞”，会出现黑洞特效把内容吸进去；微信聊天输入生日快乐会掉蛋糕——时刻保持着一种“意不意外？惊不惊喜？”的设计精神

下图是情侣空间中某一稿中设计的空白图惊喜，上啦的操作会打开盖子飘出爱心

最后一个环节，动画

动画是展示一个提案最生动的方法，可以将你能想到的好的交互展现出来，也能丰富视觉界面的情感，在做一个视觉提案时，能附上可使用的demo或者动画去展示，可以让看的人更加直观

前面部分我们看到的情侣空间的首页和我们页面，用动画来进行展示，可以将隐藏的一些交互细节和情感表达出来

我们回顾一下设计执行的这一套思路技巧，希望作者自身积累得出的这一套方法可以帮到大家，不妨把它当作一个思路的模板

最后作者在这里表达一下这篇方法论文章的目的：在UI设计领域，道理大家都懂，只是每个人有不同的思考方式，不代表绝对的对错之分，目的都是为了更适合自己做好一个方案，希望大家在吃水果的时候能回想起这个技法，作者就很满足了

现在新的设计同学不断加入这个大家庭，他们充满活力，创新又高效；我们也终归会慢慢老去，所以，能在自己最清醒冷静的时期，将领悟到的方法积累下来，才能保持竞争力

所以作者最后的最后，给大家分享自己很喜欢的这部电影中的一句台词

谢谢大家咯

希望大家成为做出优秀的设计，菠萝头在这里感谢大家的阅读