用户了解一款软件，第一件事便是认识这款产品的 icon。icon 虽小，但是对于 App 来说是不可缺少的重要要素。App Store 中，产品常常以“标题 + icon + 截图预览”的形式展现在用户面前，因此一个足够吸引人的标题、icon 包括 App 截图，必然成为最直接的吸引用户的手段。那么开发者应该如何选取合适的的 icon、截图呢？
今日干货，七麦数据为大家献上：摄影与录像类 App 的 icon、应用截图的选取套路。
icon：“渐变彩虹色”最具冲击力
我们选取了摄影与录像榜 Top200 的产品 icon，发现可以主要归为以下 8 大类：
1、相机
2、字母
3、符号
4、几何图形
5、视频标志
6、卡通/动画/表情
7、其他实物抽象、线条
8、其他/失败反例：无明显特征，不易识别和记忆
从我们选出的大量 icon 素材中，我们总结出他们的普遍特征：
1. 渐变彩虹色
2. 取景器、 相机镜头
3. 扁平化处理，线条明显，易识别
那么，什么样的 icon 更受用户喜爱呢？经过问卷调查及投票，我们发现大家最喜欢的 icon 竟然长的惊人的相似！彩色、渐变、线条是主要特征。
在此基础上，我们可以总结出 icon 的设计原则：
1、选择人们认知里熟悉的事物，易识别，辨识成本低；
2、将产品属性作为 icon 元素。比如拍照类 App 可以将相机为设计元素。
3、App 色调选取应结合受众属性。用户群体的年龄、性别等都需要考虑，开发者可针对自身 App 用户属性，选择合适的产品色调。
4、色彩搭配尽量不超过 3 种颜色，目前在摄影与录像类 App 中，用户较为喜欢“渐变彩虹色”。
5、动感符号、有冲击力的图案易于用户记忆，这类 icon 较容易抓住用户的关注点，下面这些 icon 就是很好的案例。
至此，我们对 icon 的研究告一段落，下面揭秘产品截图方面的使用技巧。
截图：女性 + 生活场景最受欢迎
我们选取了摄影与录像榜 Top60 的产品截图，面对大量的图片素材，我们吐血归纳出以下特征：
一、中心元素
中心元素按使用场景分类，有“自拍美颜场景”、“生活休闲场景”、“风景拍摄场景”以及“功能展示”四大类。
生活休闲场景示例
二、背景风格及颜色
1、生活使用场景；白色/透明
2、人物、多种纯色背景搭配
3、单一颜色背景
三、设计样式
1、原生界面。这种样式因为缺少文案功能说明，不能使用户一眼清晰地了解 App 功能，因为不建议开发者使用该样式。
2、截图+文案说明。这种样式有文字提体现，突出了 App 的功能描述，不过从视觉效果来看，用户最先关注的是图片部分，其次才是文字。
3、截图+手机框+说明。加入手机框，截图各元素处于均衡的状态，用户能一眼清晰地看到文字描述，同时背景图片成为次要元素，视觉效果不够有冲击力。
4、跨屏界面。这种形式如今越来越被大众喜爱，不少产品乐于使用跨屏界面。能够很好地吸引用户的关注,引导用户向右滑动截图（一屏最多展示 3 张图）
四、细节设计原则
接下来，通过一些反例开发者可吸取经验。
1、突出焦点元素: 利用放大元素或者界面焦点来强调视觉主题中心。
没有突出功能卖点，图片较多、复杂，阅读性降低
2、对比原则：文字与截图背景、元素与背景的对比更明显，更加吸引用户。
文字和背景颜色过于统一，可读性难度增大
为进一步研究，我们人工票选得出最受喜爱的 Top4 产品截图。如图：
从这些产品截图中，我们找到了一些共性（仅供参考）：
- 截图风格：自然。贴近日常生活，部分含度假；
- 前两张截图特点：满屏放大/突出重要内容；
- 人物：均为女性角色。
接下来，划重点！通过以上大量产品截图的盘点，我们总结出以下产品截图设计原则：
1、主题选取：贴近用户使用场景
应用截图选取要尽量贴近用户的使用场景。比如购物类 App 可选取街拍；生活类 App 可选取美食等；中心元素要贴近用户的使用场景，这样有利于使用户产生联想，进而提高下载率。
2、背景风格、颜色选取
色彩搭配不宜单一，背景色调成系列，易于用户连贯阅读，不易产生视觉疲劳。
3、设计样式：要有趣味性，具备观赏价值
目前，截图只要存在四种形式：截图 + 说明；截图 + 手机框 + 说明；跨屏界面以及原生界面。这四类中建议开发者采取更新颖的方式，比如跨屏界面，多元素呈现 App 介绍。
4、细节设计：突出焦点元素、加强 App 界面与背景的对比。
开发者可利用放大元素或者界面焦点来强调视觉主题中心，这样更利于突出产品重点元素，用户也一目了然。
综上，关于产品 icon 及截图使用套路总结完毕。 icon 、截图作为一种可视化的表现，他们的基本形状和审美倾向对产品是否有吸引力有着至关重要的作用。这些小元素需要开发者们精细考究，因为他们是鼓励用户使用 App 的第一步。
《干货集锦》第 31 期就到这里啦~ 欢迎留言说出最近困扰哦~
- end -
本文由七麦研究院优化师团队提供，专栏作者【yoyo】编辑整理，转载需联系七麦研究院获取授权，七麦研究院有权向非授权转载追究责任。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
