shields 徽标_徽标不够用时如何设计应用程序图标

shields 徽标

What’s the first thing that comes to mind when you think about a particular app? Chances are, it’s the icon. And it’s certainly the first thing a user notices when deciding what app to install — similar to studying the supermarket shelves. A good custom app icon design is a sure way to support a brand, promote the app, make it memorable and differentiate it from the variety of other apps, make people relate to the app, and it’s vital for the App Store and Google Play. Seems like too much for such a small element.

w ^帽子是当你想到一个特定的应用程序,想到的第一件事? 很有可能是图标。 当然,这是用户决定安装什么应用程序时会注意到的第一件事-类似于研究超市货架。 良好的自定义应用程序图标设计是支持品牌,推广应用程序,使其令人难忘并将其与其他各种应用程序区分开来,使人们与该应用程序相关的肯定方法,这对于App Store和Google Play至关重要。 对于这么小的元素,似乎太多了。

An icon is a crafted design element users interact with every time they use an app, so it deserves special attention. And there are tips and practices to help you design a good icon for an app.

图标是用户每次使用应用程序时都会与之交互的精心设计元素,因此应特别注意。 并且有一些技巧和实践可帮助您设计应用程序的优质图标。

什么是应用程序图标以及为什么应用程序需要它 (What is an app icon and why apps need it)

An app icon is a small piece of unique graphics acting as a symbol for an app, that you can see in app stores, on home screens and menus, etc. But is it the same as the logo?

应用程序图标是一小段独特的图形,用作应用程序的符号,您可以在应用程序商店,主屏幕和菜单等上看到这些图标但这与徽标相同吗?

Back in the day, creating icons for an application was a separate branch of the design industry. In the era of skeuomorphism, each icon was a work of art and everyone tried to show off as best they could. Then the flat design came along with full-fledged integrated branding for apps including logos, brand books, promotional websites, illustrations, and icons. So the application icon has become part of the branding and ceased to be something unique. However, it doesn’t make the icon identical to the logo, though both of them are parts of the app’s visual identity.

过去,为应用程序创建图标是设计行业的一个独立分支。 在拟人化时代,每个图标都是一件艺术品,每个人都试图尽最大的努力炫耀。 然后,平面设计伴随着功能完善的集成品牌,包括徽标,品牌书,促销网站,插图和图标。 因此,应用程序图标已成为品牌的一部分,并且不再是唯一的东西。 但是,尽管这两个图标都是应用程序视觉标识的一部分,但这并不能使图标与徽标相同。

Last year we’ve made an article on the concept of variable logos and their role in modern branding. Variable design is about the refusal of clinging to one particular style in favor of being relevant to the user and building a stronger connection. The disambiguation between the concepts of the app’s logo and its icon is one of the symptoms of this current trend. Still, an icon is not equated to a logo.

去年,我们就可变徽标的概念及其在现代品牌中的作用发表了一篇文章。 可变设计是指拒绝坚持一种特定的样式,而倾向于与用户相关并建立更牢固的联系。 该应用程序徽标及其图标的概念之间的歧义消除是当前趋势的症状之一。 尽管如此,图标仍不等于徽标。

The thing is, a logo is designed to be present on all marketing materials from the website to flyers, whereas an icon is made for specific purposes and places mentioned above. They are both parts of branding, but different in the way you create them and use afterward, so the reasons for their success are also different. A logo represents the brand. An icon represents a particular app.

事实是,徽标被设计为出现在从网站到传单的所有营销材料上,而图标是专门为上述特定目的和位置而制作的。 它们都是品牌的组成部分,但是创建和使用方式不同,因此成功的原因也不同。 徽标代表品牌。 图标代表特定的应用程序。

The icon design is important because it:

图标设计很重要,因为它:

  • promotes a brand

    提升品牌
  • increases downloads

    增加下载
  • helps retain users.

    帮助留住用户。

A large portion of an app’s conversion rate is tied to its UI and UX design. A part of it is an icon ability to make it memorable and recognizable thus increasing conversion rate. An icon helps a user better understand the purpose of an app beforehand and relate to it. Roman Rudnik in his article describes 10 app icon design case studies with amazing results — sometimes a new icon design was able to double the app download rates.

应用程序的转换率很大一部分取决于其UI和UX设计。 它的一部分是图标功能,使其令人难忘和可识别,从而提高了转换率。 图标可以帮助用户事先更好地了解应用程序的用途并与之相关。 罗曼·鲁德尼克(Roman Rudnik)在他的文章中描述了10个应用程序图标设计案例研究,并获得了惊人的结果-有时,新的图标设计能够使应用程序下载率翻倍。

App icon design best practices
An icon for the VITAE project by Shakuro
Shakuro的VITAE项目的图标

The following tips will help you make an amazing and effective app icon for iOS and Android that catches the eye.

以下提示将帮助您制作出引人注目的,适用于iOS和Android的惊人且有效的应用程序图标。

移动应用图标设计最佳做法 (Mobile app icon design best practices)

力求记忆力和独特性,分析您的竞争对手 (Strive for memorability and uniqueness, analyze your competitors)

Designing an app icon, keep in mind that its main objective is to be recognizable and memorable. You probably remember the hilarious mobile gaming trend demonstrating the power of an angry guy yelling at something just out of frame, prevalent in mobile strategy gaming several years ago.

设计应用程序图标时,请记住,其主要目标是易于识别和记忆。 您可能还记得令人兴奋的移动游戏趋势,该趋势表明愤怒的家伙大喊大叫的力量超出了几年前的移动策略游戏中。

Looking at today’s app stores, the screaming dudes are there all right, just not so many of them.

纵观当今的应用程序商店,尖叫的家伙们都没事,只是其中不多。

With virtually millions of apps available for Apple and Android, the hardest thing is to make something unique without overcomplicating it. The good idea is to analyze the icons of your competitors and try to go in a slightly different direction.

几乎有数百万种可用于Apple和Android 的应用程序 ,最难的是制作独特的东西而不会过于复杂。 最好是分析竞争对手的图标,然后尝试朝一个稍微不同的方向前进。

There’s nothing wrong with attempting to understand your competitors’ success, look for inspiration, and maybe copy some of their good decisions, but just as the app is different from all others, so its icon should be different. When you craft an icon, you are immersed in the process and it seems one-of-a-kind. Whereas users get dozens or even hundreds of icons before them. That is why they should be able to quickly identify which one is yours.

试图了解竞争对手的成功,寻找灵感并复制他们的一些好的决定并没有错,但是正如该应用程序与其他所有应用程序不同一样,它的图标也应该有所不同。 制作图标时,您会沉浸在这一过程中,这似乎是独一无二的。 而用户在他们之前会收到数十个甚至数百个图标。 这就是为什么他们应该能够快速确定哪个人是您的人。

Make the competitor analysis but don’t overdo it so your app icon doesn’t look like a carbon copy. Find out what looks attractive to your target audience and build on it.

进行竞争对手分析,但不要过度进行分析,以使您的应用程序图标看起来不像是抄本。 找出对您的目标受众有吸引力的内容并以此为基础。

Mobile app icon design
Valeria VanhelievaValeria Vanhelieva设计的树形壁纸应用程序图标概念

考虑商业价值和品牌 (Take business values and branding into account)

An app should follow the overall branding for users to easily recognize it on all platforms and environments.

应用应遵循整体品牌,以便用户在所有平台和环境上轻松识别它。

When thinking about forms and colors pick those that go along with the general branding and are right in terms of color psychology.

考虑形式和颜色时,选择那些与普通品牌一致的颜色心理学上正确的形式和颜色 。

Designing an app logo
An icon for the Meet Select app designed by Shakuro
Shakuro设计的Meet Select应用程序的图标

坚持简约 (Stick to minimalism)

Follow the rules of design and make your app icon simple and beautiful to the target audience. Remember the point about it being recognizable? The complicated design makes it less so. A design that is too intricate makes an icon and app itself look outdated and in turn, suspicious, low-quality, and not worth attention, so it gets easily ignored. Remove anything that can be removed without sacrificing quality and business goals.

遵循设计规则,使目标用户的应用图标简单美观。 还记得它可识别的意义吗? 复杂的设计使其不那么容易。 过于复杂的设计会使图标和应用本身看起来过时,进而变得可疑,质量低下并且不值得关注,因此很容易被忽略。 在不牺牲质量和业务目标的情况下,删除所有可以删除的内容。

Make several design variations and show them to the target audience to find out what stays with them. Deconstruct the designs of your competitors and the ones done by the big corporation. It will show you the way.

进行几种设计变化,然后将其展示给目标受众,以了解它们的影响。 解构竞争对手和大公司设计的设计。 它将向您显示方式。

As time passes, all companies are moving from the design intricacies that once showed the technical superiority of the product during the technological race to the simple forms that have a calming effect in the growing chaos.

随着时间的流逝,所有公司都从曾经在技术竞赛中展示产品技术优势的设计复杂性转变为在混乱不断加剧中具有镇定作用的简单形式。

Custom app icon design
Ashton SnowAshton Snow

遵循应用商店指南 (Follow the app stores guidelines)

When designing an icon, follow app icon design requirements provided by the app stores. Both the App Store and the Google Play Store have very specific guidelines concerning the icon design down to style specifications.

设计图标时,请遵循应用商店提供的应用图标设计要求。 App Store和Google Play商店都有非常具体的准则,涉及图标设计直至样式规范。

The basic requirement is to follow the guidelines on app icon dimensions, but you’ll benefit from paying attention to all the specs. It’s hard to remember every single point, so here are the links:

基本要求是遵循有关应用程序图标尺寸的准则,但是注意所有规范将使您受益。 很难记住每个点,因此这里是链接:

  • App Store Icon Guidelines

    App Store图标准则

  • Google Play Icon Guidelines

    Google Play图标准则

设计时要考虑可扩展性 (Design with scalability in mind)

You’ll need an icon for different places so its scalability is one more thing to consider. Think about all its sizes and formats. This is to ensure that an icon looks equally good on any device because icons are not only present in app stores and home screens, but also in sub-menus where they are even smaller, and on wearable devices interfaces.

您将需要在不同位置放置一个图标,因此还需要考虑其可伸缩性。 考虑其所有大小和格式。 这是为了确保图标在任何设备上的外观都一样好,因为图标不仅出现在应用程序商店和主屏幕中,而且出现在子菜单中(甚至更小)以及可穿戴设备界面上。

Here’s where minimalism also plays its role. An elaborate design won’t look just as good as the simple one when cramped into a small square. The idea is for it to retain its distinct form in various sizes and remain legible in all environments. Try out your design in various sizes and formats to see whether it meets the requirements.

极简主义也在这里发挥作用。 如果将设计局限在一个小方块中,那么精致的外观将不如简单的外观好。 这样做的目的是要在各种尺寸下保持其独特的形式,并在所有环境中都清晰易读。 尝试各种尺寸和格式的设计,以查看其是否满足要求。

Image for post
Himanshu SharmaHimanshu Sharma的鲸鱼应用程序图标

专注于一致性并传达应用信息 (Focus on consistency and conveying the app’s message)

A perfect icon is not only a part of the branding system, but it’s also the extension of an app itself. It should be seamlessly woven into the user experience and become its starting and finishing points. It’s especially important in the game app icon design where it’s not enough to just make an icon from a logo. A good icon is made in the style and colors of a game and shows what it’s about and speaks the same language. An app and its icon should support each other. Ideally, an icon should display an app’s functions. So it makes sense to make an icon in the same visual style as an app to meet the users’ expectations.

完美的图标不仅是品牌系统的一部分,而且还是应用程序本身的扩展。 它应该无缝地融入用户体验中,并成为其起点和终点。 这在游戏应用程序图标设计中尤其重要,仅凭徽标制作图标是不够的。 一个好的图标以游戏的样式和颜色制成,并显示其含义并使用相同的语言。 应用程序及其图标应相互支持。 理想情况下,图标应显示应用程序的功能。 因此,使图标具有与应用程序相同的视觉样式以符合用户期望是有意义的。

When conveying the app’s purpose, avoid using words on icons. “Show, don’t tell”. An icon is a visual representation of an app, it doesn’t need words, they will only overload it and act as white noise. What’s more, text elements look awful and harder to read in small-size icons. The exception might be one or two letters of a brand’s name, like in the case of “in” of the LinkedIn app icon.

传达应用程序的用途时,请避免在图标上使用文字 。 “显示,不要告诉”。 图标是应用程序的直观表示,它不需要文字,它们只会使应用程序超载并产生白噪声。 而且,文本元素看起来很糟糕,在小尺寸图标中很难阅读。 例外情况可能是品牌名称的一个或两个字母,例如LinkedIn应用程序图标中的“ in”。

How to design an app icon
murat kalkavanmurat kalkavan

奖励:应用程序图标设计趋势 (Bonus: Trends in app icon design)

Several years ago, people were posing questions about why there are so many apps with white icons. Today the recent trends seem to try to add some depth to the flat design.

几年前,人们提出了关于为什么有这么多带有白色图标的应用程序的疑问。 今天,最近的趋势似乎试图为平面设计增加一些深度。

带有动态的平面图标 (Flat icons with some dynamic)

Flat design is about sophistication and aesthetics of minimalism and the use of simple forms. Adding dynamic motives brings in some depth and makes the illustration feel more energetic.

平面设计是关于简约主义的精致和美学以及简单形式的使用。 添加动态动机会带来一些深度,并使插图更具活力。

App icon design trends — TikTok
The TikTok app icon doesn’t approach the effect of movement head-on but achieves it nonetheless.
TikTok应用程序图标并没有达到正面运动的效果,但是仍然可以实现。

渐变色 (Gradients)

With the help of gradients, you are able to create completely new color schemes and add volume to objects, which creates a sort of 3D effect.

借助渐变,您可以创建全新的配色方案并为对象添加体积,从而创建一种3D效果。

Image for post
Nikita SharmaNikita Sharma

凸版设计 (Letterpressed design)

The decision to give depth to any element may be justified, but you need to use embossing and letterpress techniques in the app icon design with caution so that it doesn’t look outdated.

确定任何元素深度的决定可能是合理的,但是您需要在应用程序图标设计中谨慎使用压纹和凸版技术,以免显得过时。

Image for post
Alex Tass.Alex Tass的字母Y。
The letterpressed effect can be achieved not only by using the neomorphic techniques that aren’t considered practical by many designers but simply with the help of colors.
凸版印刷效果不仅可以通过许多设计师认为不可行的新变形技术来实现,而且还可以借助色彩来实现。

Originally published at https://shakuro.com.

最初发布在 https://shakuro.com

翻译自: https://uxplanet.org/how-to-design-an-app-icon-when-the-logos-not-enough-3bbd726da841

shields 徽标

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274473.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Sentry高效治理前端异常

大家好,我是若川。我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…

zoom 用户被锁定_重新考虑Zoom的用户体验

zoom 用户被锁定Zoom is a household name now. It’s weird, but a new reality for 2020. I’ve been able to reliably stay in touch with so many people and even throw surprise birthday parties! It has been one of the products that has kept me busy through this…

或许是我们学错了方向?

大家好,我是若川。最近来了一些新朋友,感谢大家关注~相比于原生 JS 等源码。我们或许更应该学习正在使用的组件库的源码(如:element、antd、vant、semi、arco、tdesign 等),先从简单的看起,Butt…

Android 默认Tab标签大小及间距修改

一般来说,我都是用Android默认的Tab,但此时Android会根据你增加的Tab页面平均分配Tab标签,假如你只有两个Tab,那么长度将会很长,并且其高度略微过高,并不好看,网上解决这个问题有些是自定义Tab。…

ui设计看的书_5本关于UI设计的书

ui设计看的书Want to develop a better eye and vocabulary for judging layouts, type choices and imagery?是否想开发一种更好的眼神和词汇来判断布局,类型选择和图像? According to performance experts, the best way to learn is to gain lots o…

GitHub 这8大超实用小技巧,99.9%的人都不知道!

大家好,我是若川。我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…

案例研究设计与方法-罗伯_旭进口重新设计-用户体验案例研究

案例研究设计与方法-罗伯Asahi Imports is a Japanese grocery store located in central Austin, Texas. It has a passionate following, over fifty years’ history, and strong business growth. But its website is showing its age, and not hitting its full potential…

Taro v3.6 代号为「Reach」,已发布 canary 版本

大家好,我是若川。我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 lxchuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…

axure rp 创建弹框_如何在Axure RP 9中创建交换机

axure rp 创建弹框Axure is a well-known prototyping tool with a lot of history, it has been around for years. You can create almost any kind of prototypes from simple ones to more complex ones with variables and logic without writing a single line of code (…

用 Vue3 手撕了个企业级项目,真香!

最近几年,随着短视频、小程序、直播带货的火爆,前端开发工程师越来越热门,薪资待遇也快接近后端开发工程师了,前端领域进化为内卷重灾区。然而伴随着 Vue 3.0 的发布,前端技术也迎来了一次大革新,像是字节跳…

界面设计语言_使用任何语言设计界面的提示

界面设计语言Designing for international audiences is challenging. I spent most of my career in Australia designing exclusively in English. Australian English is ‘unique’ in the sense that we are really into slang, puns, idioms.为国际观众设计是具有挑战性的…

托管代码和非托管代码

托管代码和非托管代码有什么区别呢?从字面上理解,只是一个是被托管的,另一个是没有被托管的。但是,被托管的托管代码是被谁管着呢?让我们先来看看它们的定义。 托管代码:由公共语言运行库环境(而…

如何实现前端新手引导功能?

大家好,我是若川。我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 lxchuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…

hp-ux锁定用户密码_UX设计101:提出正确的问题-规划和促进用户访谈

hp-ux锁定用户密码这是什么? (What is this?) This session is part of a learning curriculum that I designed to incrementally skill up and empower a team of Designers and Researchers whose skillset and ways of working needed to evolve to keep up wi…

我与掘金合作出了源码共读第一期,首发超400人报名,快来参与~

大家好,我是若川。最近有不少新朋友关注我。对我不是很了解的,或许可以读我的2021年度总结。诚邀各位新老读者朋友参加源码共读活动。同时我和掘金合作,共同出了源码共读第一期,11月25日——12月25日,奖品丰厚。我是前…

mac基本操作技巧_6个基本设计技巧

mac基本操作技巧“In everything you do, refine your skills and knowledge about fundamental concepts and simple cases. Once is never enough. As you revisit fundamentals, you will find new insights. It may appear that returning to basics is a step backward an…

如何突破技术瓶颈(适合P6以下)

大家好,我是若川。我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 lxchuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…

stack smash_扶手椅VGUX:Super Smash Bros.Ultimate

stack smashEasily far the most exciting news out of Super Smash Bros. Ultimate’s announcement was that every single character would be returning to the game.asily迄今为止最令人兴奋的消息了任天堂明星大乱斗最终宣布的是, 每一个字符会被返回到游戏中…

《Two Dozen Short Lessons in Haskell》学习(十)- Private Definitions — the where-clause

《Two Dozen Short Lessons in Haskell》(Copyright © 1995, 1996, 1997 by Rex Page,有人翻译为Haskell二十四学时教程,该书如果不用于赢利,可以任意发布,但需要保留他们的copyright)这本书是学习 Ha…

我和掘金合作的源码共读小册报名快1000人了~

众所周知,我和掘金合作出了源码共读第一期。我是前端领读员。现在报名快1000人了~奖品丰厚。也有一些小伙伴已经写了好几期笔记了~但相对1000人写的还是太少。什么?你不知道?那也很正常,毕竟我的公众号常读人数比较少。大部分人都…