长沙牛耳教育screenshot设计分析与总结

　　学习UI设计就到长沙UI设计培训学校。学校优势1.连锁品牌，无论到哪个连锁学校均可继续学习2.师资力量雄厚，长沙城市指导，小班教课，增加学习质量3.教学实践结合，毕业即拥有半年工作经验，助您赢在起跑线4.就业，与上千家企业合作，毕业即就业，不满意再推荐，满意为止5.学校承诺，学会为止，学不会可0元重修，欢迎到校试听课程 联系电话： 400-888-3854QQ：2294155463

---

　　由于近期工作需要做到有关screenshot的设计，为了提率，先对此工作做一定的分析和整理，在后期工作中能根据此分析做相应的设计调整。应用商店screenshot是APP上线工作前设计的后一步，在网络上几乎没看到对screenshot的分析，所以也趁此机会做一些分析和总结。

　　Sreenshot

　　Sreenshot，中文名为“屏幕快照”，主要展示场景是在各应用商店的应用详情页面，如iOS系统的APP Store和Android的各大应用商店，Google Play，豌豆荚，小米应用商店等(本文章的APP主要来源于Google Play和APP Annie)

　　作用：

　　·展示该应用的界面和功能，方便用户在下载之前，对该应用有大致的了解;

　　·突出功能特点，可以跟其他竞品做出差异化;

　　·可向用户简单示范该应用如何使用或操作指引;

　　设计目的：

　　手机应用的下载推广除了应用的品牌或口碑传播，广告买量等，用户还可以通过看应用商店的介绍来了解这是否合适自己使用的应用，sreenshot就是一个很好的展示途径。

　　screenshot就如面试时给面试官描述的自我介绍，在用户心目中留下的“印象”。设计合理，能突出应用重要功能或符合用户所需的screenshot能提高应用的下载量。

　　screenshot测试：

　　APP发行同事通过对screenshot的多次测试，从而找出能提高下载率设计风格和样式;

　　测试方法：灰度测试;准备两套不同风格的screenshot，各发布总用户的50%，即50%用户能看到版本A，50%用户能看到版本B，一段时间后对比两个版本的下载量，下载率较高的版本可以留着继续使用，留待下一次再测试。

　　可以通过firebase后台对比两组下载数据，如果两组数据相差较少，则可以延长测试时间，或再换其他图测试。

　　下载率的高低跟screenshot的设计风格一般来说没有必然的关系，通过不断的测试才能得出较好的方案，有时候设计精良，充满很多细节的screenshot，下载率不一定更高;有的“土味”十足，亮瞎眼的screenshot反而下载率更高。但我们应该坚持的设计原则是为提高应用的下载率服务，找出更优方案。

　　Sreenshot的设计形式：

　　视频：

　　能更生动地展示应用的特点或功能操作流程;好不超过30s，不然用户会没有耐心看下去;

　　·可使用真人拍摄和动画等形式，设计成本相对较大;

　　·大部分应用采用录制操作过程的方式，展示应用中的重要功能或主要操作路径，时间成本较低;

　　图片：

　　静态图片主要通过文案+颜色+排版的多种组合设计;不同设计风格的screenshot可能会对该应用目标用户人群的初印象、心理影响不一样，从而影响下载率;

　　·不同应用商店的需要上传的图片尺寸会不一样;

　　·有些还需要顶部banner图，如GP的banner图1024x500px;

　　·注意若使用手机外壳，要跟平台所用的手机系统一致，如APP Store只能用苹果手机外壳，安卓的应用商店也只能用安卓手机，不然上交到平台后会不通过审核;

　　·尽量不要出现名人如影视明星、歌星等正脸照片，因为新版本上线前会有平台的专门人员审核screenshot，为避免侵权问题所以有此类图片的screenshot可能会被拒绝，因此我们使用无版权人物肖像或风景图片等作为代替;一些screenshot还会对使用到的明星名字做高斯模糊处理，可以根据实际情况做处理;

　　·在APP Annie上浏览 不同应用的screenshot，发现可以上传各种尺寸的图片都有，横版和竖版，还有正方形的，有的应用还上传了10多张，当然竖版的screenshot是较为常规的，一般应用上传5张左右即可，毕竟人的记忆能力是符合7±2法则，5项以内的内容记忆效果好，超过9项内容会造成记忆负担。

　　以下主要是对screenshot设计构成的一些分析：

　　Screenshot设计构成分析：

　　Screenshoot图片的组成元素主要分为三部分：背景，文案和应用截图。其设计思路其实跟电商banner设计一样，主要 是在限定的尺寸内，如何向用户展示重点内容，吸引到用户的眼球，让用户停留时间较长，并对内容产生兴趣，从而做出下载或购买的决定。更为的设计会让用户产生情感化的反应。

　　1.直接使用应用截图，不做设计处理;

　　任性的设计师不想做screenshot，或因时间问题来不及做，或者是产品足够出名，排名很前，不需要使用screenshot来吸引用户，例如FB，ins等应用，就可以直接使用应用的截图，简单明了，重要是省功夫省时间!但设计师就少了作图的乐趣了。

　　应用：instagram

　　2.1背景：

　　背景作为图片的底层部分，对图片的风格定位有很大的决定作用。可大致分为以下几种：

　　a.浅色调背景：设计较清爽，主要突出文案和应用截图，可加部分几何图形作为辅助，以免过于单调;

　　应用：TikTok

　　b.彩色或深色背景：采用应用内的主题色作为背景颜色，可延续品牌的设计风格;

　　应用：Kakao Talk

　　c.多种彩色：一般采用高纯度颜色，明亮的颜色能吸引眼球，显得更年轻化和活力感，适用于时尚娱乐类应用;若符合应用小清新的风格，也可以采用饱和度较低的颜色;

　　应用：FirefoxBrowser

　　d.颜色+装饰性图形：只有彩色的背景也难免有点单调，在此基础上可加上几何图形等作为装饰，图形间也可以跨屏幕，使图片间更有连贯性;

　　应用：OperaBrowser

　　e.绚丽亮瞎眼的渐变色：怎么酷炫怎么来，偏电子风，适用于娱乐型、游戏应用，强烈的颜色对比，能眼抓住用户的注意力;

　　应用：FreeMusicforYouTube

　　f.跟使用场景结合：让用户有场景沉浸感，让用户知道可以在什么场景下使用，具有真实感;

　　应用：Google 地图

　　2.2应用界面截图

　　screenshot中重要的部分，重点是突出用应用的功能界面以吸引用户;

　　a.截图外大部分都会加上手机壳模型：注意需要和手机系统一致，Android系统只能使用安卓手机,iOS系统只能使用苹果手机;

　　应用：Facebook

　　b.手机固定在图片的一个位置;

　　应用：MusicPlayer

　　c.手机可变换位置或角度，甚至跨屏幕：画面变得动感有活力;

　　应用：SoundCloud

　　d.多屏幕、多手机叠加：在有限尺寸内尽量多展示屏幕页面或功能，但屏幕尺寸会变小

　　应用：PhoneColorScreen

　　e.加上插图的形式：画面表达更有设计感，可以与文案创意性结合，需要花费较多的设计时间;

　　应用：UCBrowser

　　2.3文案

　　文案作为应用功能的补充说明，可以更清楚地说明应用的功能和特点;

　　a.一般为两行文案：重点文案+辅助说明，通过字体大小、字重、颜色或图形等方式突出重点文案;

　　应用：wechat

　　b.文案可固定在图片的位置，或根据手机位置变化：有动感，打破单一感;

　　应用：The Weather Channel

　　c.文案下加上背景色：当整体背景较为复杂时，文案下的背景能让文案显示更清晰和统一;

　　应用：Candycrush

　　d.文字加上特殊样式：文字与界面的设计风格统一，一般应用于游戏应用;

　　应用：BoomBeach

　　e.使用图标图形作为文案的辅助说明，突出应用的功能特点;

　　应用：Larkpalyer

　　f.突出文案;文字较多的情况可用一整页展示，大标题也具有视觉冲击力，需要注重信息的层级感;

　　应用：FreeMusicMP3

　　以上分析是通过screenshot图片上的设计元素拆解分析的，排版方式和设计风格应用都能通用。

　　收集素材的过程中发现，通用、排名靠前的应用screenshot很多都是采用简单的排版方式，图片上部是文案，通常是两行，其中重点文案信息突出，手机+屏幕截图占图片的三分之二位置，较为保守的排版，但意思能表达清楚重要;

　　由于工作原因，会对日本的screenshot比较关注，其设计风格也跟其他相比有一点差别，日本的平面设计也有其民族特性，在此只做一点分析：

　　a.使用纯度较低的颜色：背景采用简单的几何图形作为设计元素，具有独特的“小清新”风格;

　　b.注重使用文字来传达意思：文案占很大一部分位置，信息层级主次分明，把重要的信息做得显眼;

　　应用： Pass、My docomo

　　c.同时使用简单的几何图形和文字结合：作为图片中突出部分，清晰地表达重要信息;

　　应用：楽天のフリマアフ?リ 、dホ?イントクラフ?

　　总结：

　　本文主要通过screenshot的设计元素作为分析维度，主要有视频和图文形式：

　　视频：设计成本较大;

　　图片：由背景，文案和应用截图组成;

　　1.直接使用应用截图，不做设计处理;

　　2.1背景：

　　a.浅色调背景

　　b.彩色或深色背景

　　c.多种彩色

　　d.颜色+装饰性图形

　　e.绚丽亮瞎眼的渐变色

　　f.跟使用场景结合

　　2.2应用界面截图

　　a.截图外加上手机壳模型

　　b.手机固定在图片的一个位置

　　c.手机可变换位置或角度，甚至跨屏幕

　　d.多屏幕、多手机叠加

　　e.加上插图的形式

　　2.3文案

　　a.一般为两行文案

　　b.文案可固定在图片的位置，或根据手机位置变化

　　c.文案下加上背景色

　　d.文字加上特殊样式

　　e.使用图标图形作为文案的辅助说明，突出应用的功能特点

　　f.突出文案

　　除了通过图片上的元素作为分析维度之外，还可以通过其他维度去分析，如不同行业特性的应用产品，screenshot的设计风格会有一定的规律，其突出的内容可能也会不同。但终的目的都是为了与竞品做出差异化，突出应用的功能特点，提高下载率。

　　作为初级设计师刚入行的时候，只要一接到需求，工作路径可能就是打开花瓣网或其他网站找参考，看了批图片或参考文章之后，以为自己心中有一定了解了，就开始做交付过来的需求，在设计中很容易就加上了参考过图片的影子，或不知道自己这样做的原因，只是别人这样做自己也跟着做罢了。工作到一定阶段后，就明白自己总结出来的经验是有效，印象深刻的，因为在分析的过程中可以整理自己的思路。通过大量的积累，希望能提高自己分析总结能力，并形成更有效的思考方式和总结个人方法论。

---

　　学习UI设计就到长沙UI设计培训学校。学校优势1.连锁品牌，无论到哪个连锁学校均可继续学习2.师资力量雄厚，长沙城市指导，小班教课，增加学习质量3.教学实践结合，毕业即拥有半年工作经验，助您赢在起跑线4.就业，与上千家企业合作，毕业即就业，不满意再推荐，满意为止5.学校承诺，学会为止，学不会可0元重修，欢迎到校试听课程 联系电话： 400-888-3854QQ：2294155463