如何为移动应用设计出色的图标

2023-05-29 0 737

​APP产品网络营销的当中很重要组成部分 ,就是工具栏结构设计。它的必要性很显著,即工具栏将影响使用者的印象,这是招揽使用者目光的一类重要方式。特别是许多须要如前所述插件进行创业者的子公司,工具栏结构设计直接关系到您在应用领域程序市场中的名气。

责任编辑将重点介绍Android和iOS插件的结构设计。我将归纳结构设计中许多最重要的方面,比如基本相同和色调优先选择。

01. 色调问题

为工具栏选两个最合适的色调是结构雕塑家面临的两大困难之一。试著A / B试验来检查结构设计效果始终是两个不错的优先选择。这不但适用于于色调计划,而且适用于于整个UI结构设计。

两个好的建议,是在工具栏中采用您的应用领域色调计划。最最合适采用一类注册商标色调做为主要就色调,比如在大背景中。亚历克斯·萨基利托(Nick Saporito)为他们提供了在其工具栏结构设计中采用国际品牌色调的两个较好的范例。让他们看看这种常用作法的其它实例:

如何为移动应用设计出色的图标

Google Play应用领域零售店中的著名工具栏

他们可以从上面显示的工具栏小学到许多杰出事例。如他们所见,所有这些工具栏的大深蓝色调都采用了其主要就的国际品牌色调。当中一半采用该大背景的这种色调蓝紫色或阴霾,最显著的情况是Tinder和Glovo。这使工具栏看上去不平静,甚至可能更有意思。除了主要就色调外,Just Eat和Glovo还在工具栏中采用了其它子公司的色调。但是,请注意,文档和LOGO一般来说为紫色且德博瓦桑县。一般情况下,他们要采用整洁的大深蓝色和许多紫色的举世闻名绘图或文本来创造对照和THF1。

怎样优先选择让使用者过目不忘的色调

这不但是结构雕塑家结构设计工具栏时的优先选择,还是国际品牌和网络营销重大决策。一般来说,您优先选择子公司的子公司色调做为工具栏中的主要就色调,并且该色调须要与您的总体网络营销策略和功能定位相适应。网络上有许多有关常规性插件色调的信息。此外,在优先选择一类或另一类之前,最最合适先了解美感社会学的基本知识。上面他们为不同的色调提炼出了关键字,方便快捷诸位听众参照。

如何为移动应用设计出色的图标

而另两个研究是热门应用领域工具栏的色调在色轮中的分布情况统计。虽然这个研究比较早了,但仍具有不少参照意义。

如何为移动应用设计出色的图标

结果与Android的Play零售店相似。大多数知名插件采用蓝色或红色做为主要就色调,当中许多倾向于采用不同的绿色或黄色阴霾。显著缺少粉红色和紫色,所以,在之后,Instagram就重新结构设计了他们的工具栏。

如何为移动应用设计出色的图标

Instagram采用紫色工具栏引领了趋势。但请注意:Instagram在市场上已经具有足够的力量来引领潮流。不常用的色调会使您的应用领域与众不同,但使用者可能会觉得您的应用领域不是他们想要的。因此,Instagram的重新结构设计仍然遵循许多典型的模式:带有蓝紫色和许多简单且德博瓦桑县的紫色对照形状的一般彩色大背景。

上面他们来归纳一下诀窍:

采用与您的国际品牌色调相对应的大深蓝色。 采用色调蓝紫色和阴霾以避免过于平静。 采用紫色或采用国际品牌调色板为工具栏内的LOGO,文档或形状创建对照度。 阅读有关色调社会学的知识,以使您的色调与您的应用领域目的保持一致。采用A / B试验帮助您检查色调优先选择是否正确。 优先选择不常用的色调(比如紫色或青绿色的阴霾)时要小心:它将区分您的应用领域,无论是好是坏。

02.采用多变的形状结构设计工具栏

在iOS和安卓的结构设计手册中,它们都为他们制定了工具栏结构设计模板。一般情况下,Google希望结构雕塑家以原始的方式采用形状和色调;而苹果更倾向于为应用领域结构设计标准化的工具栏。

如何为移动应用设计出色的图标

Apple Store和Google Play工具栏。

iOS官方工具栏模板

Apple 在其人机界面指南中提供了多种格式的工具栏模板(Adobe Photoshop,Adobe Xd,Sketch,Keynote)做为官方Apple Design资源的一部分。

如何为移动应用设计出色的图标

iOS工具栏形状形式官方模板

Apple只是为您提供了两个模板来试验工具栏的不同大小,并为您提供遮罩形状。但是在指南中,他们建议您将工具栏结构设计为完全正方形,因为系统会自动遮盖圆角。建议为Apple Store创建正方形工具栏,因为该工具栏将始终按照蒙版形状显示轮廓。因此,在Apple Store中,只有少数工具栏具有圆形或不规则形式。

谷歌物料结构设计模板

Android为Play零售店工具栏提供了不同的形状。他们的所有准则都包含在“ Material Design”文档中。

如何为移动应用设计出色的图标

具有Material Design推荐形状的自适应蒙版工具栏。

此外,Android 8.0引入了自适应工具栏,如先前的图像所示,该工具栏可以针对不同的设备进行屏蔽。因此,结构设计两个以后可以掩盖的方形工具栏并不是两个坏主意。与Apple为其App Store推荐的内容非常相似。

最佳作法是寻找与您的应用领域匹配的形状。比如,矩形形状适合Gmail工具栏的信封结构设计,圆形形状可能类似于相机插件的目标。探索采用其它类似插件的形状也是个好主意。

请记住,推荐的形状只是帮助结构设计人员的工具,但并非一成不变。您可以自由探索自己喜欢的任何自定义形状,有时将工具栏中的元素直接采用会较好。甚至谷歌也这么做了。

如何为移动应用设计出色的图标

Play零售店中不规则工具栏实例

上面他们来归纳一下诀窍:

遵循Google和Apple的官方指南,并从“人机界面指南”和“物料结构设计文档”中查看其资源。结构设计两个基本的方形工具栏一般来说是第两个优先选择。您可以稍后对其进行掩盖,以使您的结构设计适应不同的市场。原始形状可以帮助您理解应用程序的用途。Google Play的三角形就是两个较好的范例。 您可以自由试著自定义形状和添加现成的元素。CCleaner工具栏或Google地图就是较好的范例。同样,A / B试验将帮助您检查哪种形状是您的最佳优先选择。

03.文档,格式和图像

这些是您工具栏的核心。虽然形状和色调是结构设计的基础,但您的工具栏还须要其它许多东西才能变得独特和可识别。回到责任编辑的第一张图片,他们会注意到每个工具栏都采用简单的LOGO形式或文档来标识其插件。它一般来说是子公司的LOGO或至少是简化版本。

由于可伸缩性问题,将文档用作工具栏的核心可能不是两个好主意:以较小的尺寸显示工具栏时,文档可能不可读。但是,采用单个字母或其它形式一般来说可以避免此问题。对于复杂的表单和绘图,也会发生相同的可伸缩性问题,这就是大多数工具栏结构设计简单的原因。

如果这些表单与特定的LOGO或子公司图片没有关联,至少它们应该与应用领域的功能相关。比如,一般来说具有他们在Instagram工具栏中看到的任何类似相机的形式。Notes插件一般来说包括对笔记本,钢笔或粘性标签的许多引用。语言应用领域可能会采用旗帜,地图和字母。数学插件将显示数字和数学符号。等等。

上面他们来归纳一下诀窍:

尽可能避免在工具栏中采用文本。缩放工具栏时会出现问题。在结构设计中采用简单易识别形式或LOGO。如果不是与您子公司的国际品牌直接相关,那么至少工具栏中的表格,字母或图像应与插件的目的相似。采用纹理和深度,但不要创建非常复杂的图像。简单的蓝紫色和阴霾即可完成工作。

游戏工具栏-例外中的例外

他们在上文所写的,几乎所有内容都不适合游戏工具栏。如果您查看了App Store或Google Play中下载次数最多的游戏,就会发现带有从游戏中提取的许多色调,字符和其它元素的复杂工具栏。这是有原因的。游戏的目的是娱乐,其工具栏应更具侵略性和直截了当,一遍招揽使用者的目光。游戏工具栏采用描述性极强的图像来显示游戏中的关键元素和角色特写图。

如何为移动应用设计出色的图标

Play零售店中的游戏工具栏

从上一张图像来看,只有两个工具栏遵循典型的结构设计模式。那是因为《崛起》是一款极简风格的游戏。但是,其它所有东西都采用醒目的纹理和色调。

归纳

结构设计杰出的工具栏并不是一件简单的事情。

工具栏结构设计的三个核心方面:色调计划,工具栏形状和形状。如果刚开始做工具栏,则应采用带有许多蓝紫色或阴霾的基本彩色大背景,然后放置德博瓦桑县的元素以清楚地显示插件的用途。

但是,如果要为游戏结构设计工具栏,请不要单单考虑简单性。采用游戏元素来招揽观众更加明智。试著许多有意思,引人入胜的事物,并采用深度和纹理。

如何为移动应用设计出色的图标

~此文转载,如有侵权,请联系删除

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务