手把手教你三步搞定APP的效果图设计!

原创 admin  2023-02-23 18:00  阅读 512 views 次

任何一款成功的APP都需要以坚实的产品概念作为基础,因为概念决定了产品最终完成的潜力。

一般产品原型图已经解决了如何做或者说APP交互怎么实现的问题,因为手机交互是动态的。好的app交互设计体现出一个app设计师的水平,同时也提升这个app设计的档次。也能让客户端的程序员更明白设计师的心思。

一般情况下,交到app设计师手里的都是移动app产品原型图。当然这个是在移动产品经理反复斟酌,并且与大家开会讨论需求定下来的一个产品交互原型。下面我们分三步来讨论一下APP的效果图设计。本文主要讲解交互设计之后的效果图的设计,也就是UI设计

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

从APP产品需求入手,考虑我们到底要用什么主色调

定好主色调:比如同样是团购,糯米用的是桃红色,而美团是翠绿色。那么我们在UI设计的时候首先就要考虑主色调的问题。

定好尺寸:设计尺寸是多大,是以640*1136设计还是750*1136 还是1242 *2208来设计。

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

第二步、APP图标和界面风格的创意表达

用什么风格来表达?定好风格:可以根据产品需求,从竞品当中找到几个合适的参考。

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

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

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

第三步、切图适配问题

最后,在设计app界面的过程当中,也要把APP切图、适配的因素放在心上。避免后期切图和程序员适配出现不合理的设计之处。

还有一点不容忽视的很重要的一个步骤,就是学会一边设计一边用真机测试预览。

以上就是UI设计的大致三步,具体的细节当然是很多专业的设计的东西,比如配色选色,补光虚影等要求有一定的美术功底。

在UI设计之前一般会对APP进行用户体验设计。比如如何表达人性化设计,特别是app引导页的设计和启动页的设计。在一些细节页面我们常常要考虑人性化设计,以此来提升app的品质,降低用户在异常情况下 的挫败感。同时好的设计师还会考虑到如何引导用户去解决,从而满足产品诉求。这些人性化的帮助始终要贯穿到整个APP界面设计当中去。特别是一些细小的交互设计上面。

最终才能设计出一个相对较好的APP或PC端的产品。

本文地址:https://www.moonpm.com/1116.html
关注我们:请关注一下我们的微信:扫描二维码产品设计研究与产品经理交流中心 (鼠标移入红色字)
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

发表评论


表情