扫码登录 我要学设计网
设计师的职业进阶课堂

微信扫码登录 | 方便安全省心

一文解决应用市场图设计

sHenni 2021年09月07日 发布 / 1053 次阅读

最近在重新优化项目的市场图,借着这文章顺便把之前分析的内容分享一下,同时整理一下市场图设计的规范,以及我当前常用的图片尺寸以及应用图标尺寸。




1. 什么是市场图💦


应用市场图是指我们在在App Store或是安卓市场中看到的应用预览图。


市场图作用:

1. 为用户提供产品的预览,让用户在下载前可以简单了解产品的界面和功能。


2. 对产品来说应用截图可以宣传产品的买点,展现功能,加大产品的曝光率,帮助用户更好的了解产品属性、产品定位和产品的。




2. 市场图设计定位💫


首先,接到市场同学的需求后我们先不着急动手设计,先了解清楚我们的产品定位是怎么样,如果是美图的工具型应用,那么设计的表现手法则不一样。


那我们通过自身产品定位出发,对市场图进行设计,则先想清楚我们的产品定位。通过准确的定位,那么我们的设计就能做到有效设计,不然就会被要求返工了哦。


那么市场图通过产品定位可以得出的表现内容可以分为功能向、内容向、运营向三个方面。




3. 分析目前主流市场图🤔


通过了解我们定位后,随后确定出我们这次需求的设计方向,那么我们如果进行设计呢?先看看市面上是如何表达设计内容的。


在收集了大量的市场图设计后,对于前者已经总结了以下6大原则了,那么我也在大量收集的过程中确实能在其中发现当中使用的设计原则,最终我们也能把这些方法套用到我们市场图设计中。





主流设计分析


1. 亮点原则

当用户通过应用图标,进入应用的详情页时,必然是对我们的应用产生了兴趣。这时候用户找到本应用本质上是为了解决他的某一个需求例如是记账或者美颜等等。那么我们需要要短时间内告诉他们我们是什么,有什么亮眼的功能点可以快速帮他解决。


带着这样的需求到来,那么我们可以用特殊的设计手法来突出界面里主要功能内容,帮助应用内特色功能点进行放大并且能做到快速介绍的效果。




2. 首页原则

首页原则本质是把主要功能特殊化处理,与其他页面不同的是:在排版,色彩,文字,内容等进行特殊化设计,达到求同存异的效果。通过首页的视觉差异化来拉开同品类竞品的差异,让用户感到耳目一新,产生可以尝试使用的新鲜感。





3. 简洁原则

言简意赅的文案和简洁干净的界面是当前的市场图设计趋势,纵观多个大厂输出的市场图设计无一不是用最简单的文字和干净的界面进行设计。做到化繁为简,将复杂而又大体量的应用在市场图上进行了最简单粗暴的介绍,这类风格无一不出自大厂的国民级应用中。




4. 统一原则

在UI设计中统一是我们在UI界面中最基本的原则,那么在市场图中也存在着这样的原则。我们在设计的时候,文案的统一/背景的统一/手机模型的统一都是可以在这体现。这样看起既保证了市场图的良好阅读性,也提高了阅读效率,如抖音。




5. 品牌原则

我们也能在市场图中传递出产品的品牌调性和产品定位,我们可以通过自身的产品特色或者是品牌元素进行辅助性设计,保证市场图与应用界面的的色调统一,加强品牌信任度。




6. 元素原则

对于我们在设计中运用的元素不能喧宾夺主,要把握好尺度,除非我们的产品真的在市面上很非主流,独树一帜,可以做到用最独特的风格来吸引猎奇的用户。以下是个极端的案例,喜欢猎奇的朋友可以去看看,里面的UI也是很新奇哈哈😄



小结:保持原则能满足到需求方的基本需求,在这之前我们需要想为什么要做差异化?怎样做更好。那么下面我找了些做得比较好的差异化设计,思考一下他们是如何做出差异化?这样做的目的是什么?




浅谈差异化



A站:从排版布局就用了平铺展示设计,为的是突出二次元动漫角色仿佛从应用里出来一样,让人耳目。这种破界的设计可以起到拉开竞品之间差异化的作用


快看漫画:快看漫画设计排版比较酷,因为带上了二次元的描边风格,斜向布局突出漫画风格。通过各种元素搭配,整体风格一下子就成形了,直接传递出自身定位。


 B站:排版上设计比较常规,这里主要是根据业务方需求进行输出,目的是提高自身综艺节目的曝光度


小结:所以做出差异化的前提更多是为了服务业务方,帮助他们更好地承接投放市场上的目标人群,提高应用的下载转化率和注册率。




4. 市场图设计尺寸🏝


我目前常用的输出尺寸:

Android-480*800

Android-450*800(华为)

Android-1080*1920

/

iOS-1242*2208

iOS-1242*2688


图标输出:

Icon-512/216/1024直角即可




5. 分享市场图sketch通用组件🍭



本组件适用于早期APP上线,以及迭代的需求。


尺寸已经设置好了,使用:左上角文件-导出即可输出市场里需要的尺寸。里面包含了基础的样机,能够满足常规需求使用。


编组 29.png


@sHenni 授权黑马家族发布,同步更新51学设计网

原文地址