美文网首页Coolsite360响应式网站建设
网页设计 在设计项目中有效使用图标的7个技巧

网页设计 在设计项目中有效使用图标的7个技巧

作者: c9ad3e5022b1 | 来源:发表于2018-07-13 14:52 被阅读0次

    设计图标可以很有趣。但是一旦你有一套好的图标,你会怎么做?

    图标不仅仅是微博或TB之类的的微型链接 - 它们可以是完全互动的线索,有助于引导用户完成设计并提供额外的视觉效果。图标可以是小型或大型,黑色或白色或彩色,平面或复杂。无论您喜欢什么样的风格,有效使用图标都可以提高几乎所有设计项目的可用性和美学价值。

    1.添加视觉兴趣

    并非每张图像都是令人叹为观止的景观。有时图像不足。

    有趣的图标可以帮助增加这些有点无趣的照片的兴趣。使用图标来增强照片的内容,提供额外的信息并提供交互提示。

    以上面的例子为牙科诊所(诚然,这不是最有趣的视觉概念。)设计清新,明亮,诱人。脸部旁边的简单图标是对“灯泡想法”的一种新看法 - 请注意细小的牙齿。左侧屏幕的浅色部分与亮白色图标之间的平衡也有助于在整个设计中吸引眼球。该网站的其余部分也使用其他小图标进行导航。

    2.创建互动

    图标不必适合特定的展示位置以鼓励用户互动。(太多模板使用滚动中的三列图标/文本组合。

    图标实际上可以是驱动交互性的元素。配对图标和视差滚动,以便项目在屏幕上移动。带有图像或其他背景的图标图标,以创建一个有点意外的元素。

    Boone Selections使用图标以一种让您想要滚动的方式为其葡萄酒创建旅行场景。飞机图标沿着屏幕上的箭头(对滚动作出反应)在飞机上行进。当用户滚动到屏幕的该部分时,每个艺术线条图标都呈现为图形。这些动作简单,经典,高效。

    3.使用动画

    没有人说过图标必须是静态元素。动画他们!

    但不要太疯狂。最佳图标动画与图标本身的内容相关。移动不应该太快,因为它可能有点令人不安。移动不应该太慢,因为用户可能会错过它们。在中间有一个甜蜜的地方,图标运动提供了一些喜悦。

    Sweet Punk非常出色。图标是随处可见的“同样旧的灯泡”,但带有个性化印记。注意灯泡的内部 - 这是一个火焰。然后有一个有趣的悬停动作,因为灯泡以一个想法漩涡反弹。此外,灯泡周围的圆形图案轻轻移动并且似乎响应鼠标悬停模式。

    4.创建图标群集

    有趣的形状,草图或其他手工制作的图标集群可以形成有趣的视觉效果。该概念通常在分发图标包(例如上面的图标包)的网站上显示,但它具有更广泛的应用。

    考虑一系列图标 - 当你缺乏良好的视觉效果时,玩具使用不足或超大的玩具以获得更大的影响力。图标可以作为链接或只是自己的图像。集群可以只包含两个或三个图标,也可以包含三个图标。让您的内容推动决策过程。

    使用群集图标的好处是你可以在盒子外面思考并做一些有创意的事情。另一个奖金?如果您愿意,您甚至可以从图标包开始,并自定义图标以使其成为您自己的图标包。任何一个选项都可以带来很多乐趣,并为您提供一种尝试完全不同的方法。

    5.与时尚元素相结合

    图标应该只是项目设计策略的一部分。想想你的内容和配对图像与另一个时尚元素,以创造一个现代美学。

    使用图标的好处是风格灵活性。图标看似各种形状和形式,从线条艺术,草图风格到平面切割设计,再到精致的微型艺术品。一旦确定了项目的设计风格,就可以创建一组与该视觉色调相匹配的图标。

    图标历史的网站做得很漂亮。该网站展示了多年来图标样式的演变过程 - 如果您正在寻找更多灵感,这本身就是一个很酷的案例研究 - 但每个图标都放置在一个材料设计风格图案的容器元素内,具有相当平坦的层次,触觉动作,干净的排版和鲜艳的色彩。

    6.在上面放一个异想天开的扭曲

    对于某些图标,您需要使用标准设计,以便用户确切知道这些元素的作用。这可以包括社交媒体链接,搜索,购物车和导航箭头的图标。你永远不应该牺牲新设计的可用性。

    但是你可以对这些标准图标样式进行异想天开的转折。更改颜色,调整形状甚至重绘您的样式中的图标。诀窍是在保持视觉识别的同时做一些独特的事情,这样用户就不会质疑图标的含义。

    简单的改变可以有很长的路要走。这种调整可以帮助共同元素成为您的设计和视觉故事的一部分。

    Little Puds&Co。以一种绝对迷人的方式做到这一点。顶角的常见图标是可识别的,但采用网站的品牌颜色。这些图标看起来比普通的Facebook和Instagram调色板更柔和,似乎与整个设计中使用的更加异想天开,儿童般的风格相匹配。

    7.创建自定义草图

    图标可以是微型艺术画布本身。虽然图像学趋势更倾向于超平,线条艺术效果图,但详细的草图绘制可以提供一个很好的自定义选项。

    每一手勾画的都会有所不同。除了找到你可以拥有的东西之外,没有真正的方法对它们进行分类。草绘图标通常是使用它们的品牌标识的一部分。

    Infinity Foods在整个设计中使用了这种风格。(您应该去点击查看完整的图标集。)草图样式以徽标开头,并且相同的详细铅笔样式用于设计中的每个图标元素。

    结论

    虽然图标可能是设计项目中最少考虑的元素之一,但它们可能是最有趣的元素之一。良好的图像可以将项目整合在一起,使其具有一定的润色和精细度。

    意派Coolsite360交互式线网页编辑系统

    “创意不该受技术束缚,交互可以变得简单有趣”

    相关文章

      网友评论

        本文标题:网页设计 在设计项目中有效使用图标的7个技巧

        本文链接:https://www.haomeiwen.com/subject/fkojpftx.html