APP设计小技巧:如何进行APP按钮设计与排版

发表于 讨论求助 2023-06-05 09:59:46

今天跟大家聊聊APP当中最常见的一个设计元素:按钮。如今在移动app设计当中,图标和按钮已经愈来愈相近了。有些时候,图标也就是一个按钮。

按钮和图标的排版设计也是一门学问,不一样的排版就会有不一样的视觉结果。 如果对设计的细节不重视,有可能让我们原本完美的产品变的平庸,比如像按钮、Tab这些简单的界面元素也是需要排版的,因为用户可能每天都会点击N次。

我们下面就来分析和学习下如何进行好的app按钮设计和排版学习。

先来欣赏一些比较好的app设计按钮以及设计的思路。

第一个案例:社交类APP当中的按钮设计。


以上这个APP界面,最醒目的地方就是 漂亮的按钮。这样的APP按钮是直接吸引用户点击交互的。而且按钮的排版和整个元素的排版都是居中的,属于UI设计当中的中轴式布局。大气稳重。


第二个案例:电商APP当中的按钮设计

这是国外一个非常不错的卖儿童服装的一款APP设计界面。25学堂给大家截图的这2个界面是一个购物车的界面设计。希望大家可以好好的看下。

此款APP的按钮设计非常的丰富。 各个元素基本都是由按钮来组成和布局排版的。

而且设计的非常贴心和易用。 你们觉得的呢?

看到满意的只要打钩就行。最后一个大的按钮键点击添加到购物车。

值得我们学习的指数:☆☆☆☆☆


第三个按钮设计案例:理财app的块元素按钮设计

这样的app按钮布局和排版,应该说我们最常见的,也是我们最常用的一种方式。特别是app的首页按钮设计。

其实这样的宫格式的设计也是属于app按钮设计范畴。相比我们之前2个的按钮,没有那么明显。但是这些其实是按钮的演变。


最后,25学堂也为大家收集了一款APP按钮设计的PSD源文件素材。

来源:25学堂




回音分享会

定期线下论坛,线上设计资讯与优秀内容分享,关注我们,让我们一同成长。

回音官微博:http://weibo.com/echoui @回音分享会

回音官方群:①②③④群均已满员,新群开荒ING~

群 383473375 | ⑥群 102472778 | ⑦群 183169559 | 深圳群 461740193 | 南京群 264878997(标明微信)

发表
26906人 签到看排名