App设计流程

第一步、从APP产品需求入手，考虑我们到底要用什么主色调

根据产品定位和目标用户群体选择主色调

定好尺寸：设计尺寸是多大，是以640*1136设计还是750*1136 还是1242 *2208来设计。所有APP设计尺寸大小规范：http://www.25xt.com/appsize 

 

 

第二步、配色和辅助色用什么颜色

在考虑到产品气质和品牌色的同时，我们经常要考虑配合衬托产品主色调的辅助色。在不同的产品中，辅助色运用的策略是不同的，比如我们经常说的：邻近色、对比色等。都是我们选择辅助色的方法。

配色在线网站：http://colourco.de/ 

以及主色调和辅助色的信息图解 APP色彩搭配方案是由主色、辅助色和点缀色构成 

第三步、用什么风格来表达

定好风格：可以根据产品需求，从竞品当中找到几个合适的参考。

现在来说，说到风格一句话，扁平风。但是在扁平中也有区别。比如下图，同样是扁平。但是左图微微带有一些光影，而右图是纯扁平。你能说哪个好或者不好吗？不能。

同样的信息，在UI的表达上也有不同的表达方式。那么只能在具体你的UI设计中去考虑具体你需要用什么风格。这些都是UI的工作内容。

第四步、APP图标化画成什么风格和创意表达

同样是设置、发现、首页，不同的app在基本结构一致的情况下也有很多细微的差别。倒是是要用圆角的icon、还是直角，是用面还是线形，这背后的设计语言逻辑是什么，设计目的是什么。都是需要UI设计来考虑。

比如：同样是腾讯的产品，手Q和微信的icon就完全不一样。其原因是由于产品面面对的人群不同，手Q更偏年轻化。同样，你去看陌陌、来往、易信的聊天icon也是不一样的。这都是需要UI设计师一点点抠细节的去画出来的。

第五步、如何表达情感化设计，特别是app引导页的设计和启动页的设计

总体原则参照博文 www.25xt.com/allcode/2289.html 

1、引导页的设计 参照 https://www.jianshu.com/p/8edd3c1ec51e 

2、引导页的实现 IOS参照 https://www.jianshu.com/p/afde7b6abf68           

    android 参照 https://www.jianshu.com/p/74f9765c2041 

3、启动页的设计 参照 https://www.jianshu.com/p/e39365422616 

 请记住，启动图像并不是为您提供机会进行艺术展示；它完全是为了增强用户对应用程序能够快速启动并立即投入使用的感知度。

4、菜单设计 例如：BoomMenu“会爆炸”的菜单 https://juejin.im/repo/59ed6aedbb941b1e74a5ac59 

 

5、其他功能实现方案 比如视频音频，日历，动画等

https://juejin.im/repos/filtered?tag=Android_%E7%BB%98%E5%9B%BE 

第六步、动效如何做或者说APP交互怎么实现

因为手机交互是动态的。所以我们如果可以用在一些跳转页面引用动效设计，无意是对整个app加分的好方法。

第七步、宣传推广的APP  图标icon 的设计

关于app的图标设计方法，一万个人有一万个答案，那么具体怎么做，还是要考虑用户、场景、需求等细节。产品可以提供方向，但是具体的落地还是需要UI设计师来完成。