驱动器图标删除_用户驱动的主题图标设计方法

最新推荐文章于 2024-03-16 09:55:04 发布

weixin_26721705

最新推荐文章于 2024-03-16 09:55:04 发布

阅读量233

点赞数

文章标签： python 数据库 java leetcode

原文链接：https://uxdesign.cc/the-user-driven-approach-to-topic-icon-design-286e8f799840

版权

驱动器图标删除

During my time as a UX/UI Designer at Perlego (the world’s online textbook library), I had already created an icon library that was user-driven, brand-focused and utilised a set of guidelines that will allow consistent design for each new icon and iteration to come (you can view the article by clicking here). The platform has hundreds of thousands of books and to retain organisation of these books, they require to be split into multiple relevant categories that are easily accessible by our users. These categories are called — “Topics”. Similarly to a physical library, Mathematics books are grouped together as are History or Geography for example.

在Perlego(世界在线教科书库)担任UX / UI设计师的那段时间，我已经创建了一个图标库，该库由用户驱动，以品牌为中心，并利用了一系列指导原则，可对每个新图标进行一致的设计以及后续的迭代(您可以通过单击此处查看文章)。该平台有成千上万的书籍，并且为了保留这些书籍的组织性，需要将它们分为多个相关类别，以使我们的用户可以轻松访问这些类别。这些类别称为“主题”。与物理图书馆类似，数学书籍也被分组在一起，例如历史或地理。

我的角色 (My Role)

At the time prior to the brief, the company had 16 different Topics, which meant 16 different icons. Each icon meticulously colour coded to allow easier grouping, representation and identifiability. With icon design guidelines in place, the next logical step was to expand the icon library to include new Topic icon designs and so I was given my brief…but with a minor plot twist!

在简报发布之前，该公司有16个不同的主题，这意味着16个不同的图标。每个图标都经过精心的颜色编码，以便于分组，表示和识别。有了图标设计指南之后，下一步的逻辑就是将图标库扩展为包括新的主题图标设计，因此给了我简要的介绍……但情节略有改变！

Due to the change in the structure of the library we were reassigning existing books to new topics. The task therefore was to redesign and replace the the Topic icons for web and mobile. Additionally, this was the prime opportunity to also rethink our colours for categorisation and so part of the task included taking this into consideration.

由于图书馆结构的变化，我们将现有图书重新分配给新主题。因此，任务是重新设计和替换Web和移动设备的主题图标。此外，这是重新思考我们的颜色进行分类的主要机会，因此一部分任务包括考虑这一点。

过程 (The process)

初步研究(Initial research)

Prior to my brief, we utilised a library from thenounproject.com in order to do this. Each icon represents a Topic. A briefcase for Business, a computer chip for Computer Science, an abacus for Mathematics, and so on.

在我做简要介绍之前，我们利用thenounproject.com中的一个库来执行此操作。每个图标代表一个主题。用于商务的公文包，用于计算机科学的计算机芯片，用于数学的算盘等。

I wanted to understand what users thought of when they think of a particular word. I need to ensure the icons designs are easily recognisable by any user at an immediate glance without without additional supporting text. A user should be able to identify the Topic by looking at the icon alone. So my starting point was to send out a quick survey. This survey simply listed all 24 Topics and asked for each Topic name — what image is the first thing to come to mind?

我想了解用户在想到一个特定单词时的想法。我需要确保任何用户都可以一眼就能认出这些图标的设计，而又没有其他支持文字。用户应该能够仅通过查看图标来识别主题。因此，我的出发点是进行快速调查。这项调查仅列出了所有24个主题，并要求每个主题名称-首先想到什么图像？

I received 29 responses and they starting providing clarity to the direction I need to initially move in. A couple of examples of the results of the survey are shown below.

我收到了29份回复，它们开始为我最初的前进方向提供了清晰度。下面显示了一些调查结果示例。

But to ensure I had the strongest starting point I took all the responses and put them in an excel. I grouped each response by colour coding them to how strongly they correlate to other responses and then applied a formula to the results to show my what percentage of users fell into either a strong or weak correlation.

但是为了确保我有最强的出发点，我接受了所有反馈，并将其置于卓越水平。我通过对每个响应进行颜色编码来对它们与其他响应之间的关联程度进行分组，然后对结果应用公式以显示出属于强相关或弱相关的用户百分比。

草绘的想法 (Sketching ideas)

At this point, I had a good idea and a strong starting point to ideate some icons. I decided for each Topic I would sketch out some variations as I came to realise, whilst users will have a visual idea when presented with a word, will they make the same connection when shown an image?

在这一点上，我有了一个好主意，并且是构思一些图标的一个很好的起点。我决定为每个主题勾勒出实现时的一些变化，而当用户看到一个单词时，他们会有一个视觉化的想法，而当显示图像时，他们会产生相同的联系吗？

One thing I realised throughout the sketching process is that some of the ideas I had were too complicated and I had to remember I only have a 32 x 32px grid to work with (examples below). This made me rethink my approach and simplify the icon design even further.

我在整个素描过程中意识到的一件事是，我的某些想法过于复杂，我必须记住，我只有一个32 x 32像素的网格可以使用(下面的示例)。这使我重新思考了我的方法，并进一步简化了图标设计。

I further tested some of these icon sketches by approaching individuals on a one to one basis and creating an open dialogue about their thoughts on the icons, which they gravitated to per Topic and why this was. I used this information to guide a few other sketches and refine the ones that seemed to work well visually.

我通过一对一地与个人接触并就他们对图标的想法进行公开对话，进一步测试了其中一些图标草图，他们倾向于每个主题及其原因。我使用这些信息来指导其他一些草图，并完善那些看起来在视觉上效果很好的草图。

从草图到数字 (Moving from sketches to digital)

My next step was to take the ideas that were received positively and start designing them following the icon guidelines on Sketch. During this process, I still came across the challenge that some of my designs encapsulated too much detail or were too complex for a 32px grid and I had to either find a way to strip back the detail or come up with a whole new idea altogether. An example of this was with the Topic “Architecture”. As it’s a Topic that is quite open to interpretation and subjective visually, I had to go through a couple of iterations until I found one that was not easily recognised but worked well with or without the word “Architecture” being present.

我的下一步是采用受到好评的想法，并按照Sketch上的图标准则开始设计它们。在此过程中，我仍然遇到挑战，即我的一些设计封装了太多的细节，或者对于32px的网格来说过于复杂，因此我不得不找到一种方法来剥离细节或提出一个全新的想法。主题“建筑”就是一个例子。由于该主题非常易于解释和主观视觉，因此我不得不经历几次迭代，直到发现一个不容易识别但无论是否出现“ Architecture”一词都能很好地工作的迭代。

Once I had gone through this process a number of times for different icons, I had 24 pixel-perfect icons, tested and tried. Now I needed to find a colour system that worked to help categorise the books and give these black and white icons a pop of colour.

一旦针对不同的图标完成了多次此过程，我就可以测试并尝试使用24个像素完美的图标。现在，我需要找到一种颜色系统，该系统可以帮助对书籍进行分类，并为这些黑白图标赋予某种色彩。

涂色 (Applying colour)

We predominantly utilised a white background in the mobile app and on the web and aims to retain a minimal look and feel. The previous icon colours worked well, but this was the opportunity to really make these icons stand out.

我们主要在移动应用程序和网络上使用白色背景，旨在保留最小的外观。以前的图标颜色效果很好，但这是使这些图标脱颖而出的机会。

Because I had 24 icons, I had to find 24 individual colours. This part of the project I decided to share with a colleague of mine as colours can be quite subjective and it was beneficial to get someone with a strong UI background involved who can assist in guiding the visual direction. We had a whole spectrum of colours to choose from. So with some advice from the design team we decided to create a level above the Topics named “Subjects”. We split the subjects into 5 areas which each hold it’s own shade of colour from the spectrum:

因为我有24个图标，所以必须找到24种单独的颜色。我决定与我的一位同事分享该项目的这一部分，因为颜色可能非常主观，并且让具有强烈UI背景的人参与进来可以帮助指导视觉方向，这是有益的。我们有多种颜色可供选择。因此，在设计团队的建议下，我们决定在主题上方创建一个名为“主题”的关卡。我们将主题划分为5个区域，每个区域从光谱中保留自己的颜色阴影：

最终产品 (The final product)

Picking colours for each icon was an iterative process in itself where my colleague and I constantly gathered visual feedback from not only my design team but also other individuals both internally and externally. But this process made the end result better than I had initially planned.

为每个图标选择颜色本身就是一个反复的过程，在这个过程中，我和我的同事不断收集视觉反馈，这些反馈不仅来自我的设计团队，还来自内部和外部的其他个人。但是这个过程使最终结果比我最初计划的要好。

By the end, I had created 24 icons which were completely feedback driven throughout the whole process and they not only followed the icon guidelines, but they visually represented the Topics they are meant to represent, all whilst having an overhaul on the colour the defines them. They also continue to add to the platform’s growing personality and they stand out fantastically on both the mobile app and web platform. Below you can see the icons used in situ on the platform.

到最后，我创建了24个图标，这些图标在整个过程中都是完全由反馈驱动的，它们不仅遵循图标的准则，而且还直观地表示了它们要代表的主题，同时对定义它们的颜色进行了全面检查。它们还继续增加了该平台不断增长的个性，并且在移动应用程序和Web平台上都表现出色。在下面，您可以看到平台上原位使用的图标。

I thoroughly enjoyed this project as it brought about some interesting and complex challenges that truly got me thinking about how something as simple as icons and colours can have such a large impact on the platform’s usability and visual appeal. Beyond that, it allowed me to think outside the box and approach iconography with a more structured format.

我非常喜欢这个项目，因为它带来了一些有趣且复杂的挑战，使我真正想到了像图标和颜色这样简单的内容如何对平台的可用性和视觉吸引力产生巨大影响。除此之外，它还使我能够跳出框框思考，以更加结构化的格式来处理图像。

I hope you enjoyed reading this as much as I enjoyed working on this project! Thank you for time. Please feel free to get in touch with me to discuss the project or anything else via the email address below: parin@ashra.co.uk / or on LinkedIn. If you would like to learn more about Perlego and their product you can visit their website www.perlego.com.

希望您喜欢阅读这篇文章，就像我从事这个项目一样愉快！谢谢您的时间。请随时通过以下电子邮件地址与我联系，讨论该项目或其他事宜：parin@ashra.co.uk /或在LinkedIn上。如果您想了解有关Perlego及其产品的更多信息，请访问其网站www.perlego.com 。