服务热线:400-889-1636
业务联系:021-5230 0317
客户服务:021-5230 0319
在线咨询: 
网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技
网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技
首页 > 客户服务 > 建站知识 > 网站建设

设计项目中使用小图标的技巧

时间: 2017.03.17 来源:本站
分享到:

图标是设计项目中几乎必不可少的一个组成部分,但是在图标的具体使用上,讲究并不少。 如果你曾仔细浏览优设的网站,应该已经看过不少图标设计的实战案例。


图标在Facebook或Instagram的设计应用上并不仅仅只是作为一种微型链接,它们还是一条完全的互动线索,帮助引导用户浏览整个网页设计,并提供额外的视觉体验。图标可以是小或大,黑白或彩色,简单或复杂。无论什么样的风格比较吸引你,有效使用图标可以提高在几乎任何设计项目中提高网页设计的可用性和审美价值。


1.添加可以吸引视觉注意的元素



并不是每一张图像都拥有可以直接吸引用户注意的视觉元素。有时候,更多的图像反而缺少设计师们预期希望它承载的元素。


所以,当在网站建设工作的设计环节出现上面的情况时,通过适当的在图像上添加一些有趣的图标可以帮助这些有点无趣的照片添加更多的兴趣点。使用图标来增强照片的内容,除了能提供额外的信息外,还能加强交互的提示作用。


以上面牙科诊所的网页设计为例(诚然,它并不是最有趣的视觉概念)。它的设计算比较“新鲜”的,明亮的用色以及直观的信息展示。人物脸部旁边的简单图标对“灵光一闪”做了新的“定义”——注意其中微小的牙齿元素。左侧屏幕的亮部和明亮的白色图标之间的平衡也有助于在设计中吸引眼球。网站的其余部分也使用其他小图标进行导航。


2.创建交互



图标不必适应特定的位置,来鼓励用户进行下一步的交互。太多的模板网站设计在滚动中使用三列的图标/文本这种组合。


图标实际上是可以作为驱动网页整体交互的元素。通过实现网页设计的分层视差滚动,使图标的元素能够跨屏幕移动。这样做的好处在于能够创建一个意想不到交互体验。


Boone Selections的网站设计使用图标配合他们的葡萄酒,创建了一个旅行的场景,这种有趣的交互使会使用户感到有趣,并想通过滚动鼠标来反复体验它。飞机图标沿着屏幕上的箭头移动(对滚动做出反应)。当用户滚动到屏幕的这一部分时,每个线条图标组合形成图形。运动简单,经典以及高效。


3.使用动画


没有人说过图标就必须是静态的元素。让他们动起来!


但不要动的过于疯狂。最好的图标动画与图标本身的内容相关。运动不应该太快,太快可能会使浏览的用户感到有点不安。但是运动也不用太过缓慢,因为用户可能会错过它们。在中间一个刚好的点,图标运动一定会给你的网站设计提供一点快乐。


4.创建图标集群


有趣的形状,草图或其他手工绘制的图标集群在网站设计中可以是一个有趣的视觉呈现方式。


当你觉得在你的设计项目缺乏一个好的视觉体验时,你首先可以考虑什么样的图标集群在你的网页设计中能发挥更好的效果。图标可以作为链接或添加在图片上作为一个独立的视觉元素。集群可以只包括两个或三个的图标,如果太少,可以考虑上面数量的三倍。让你的网站设计内容推动决策过程。


使用图标集合的好处在于,你可以真正思考外框,做一些创造性的事情。 另一个能够令你高兴的是,如果你喜欢自定义图标,你甚至可以开始自己设计一个图标包。任意一个选项都可以增加很多的乐趣,给你一种新的方式来尝试完全不同的东西。


5.结合时尚元素



图标应该只是网页设计项目策略的一部分。考虑你的整体内容,并与另一个时尚元素配对使用,创造一个符合现代审美的设计作品。


使用图标的另一个好处是风格的灵活性。图标看起来包含了每一种形状和形式,从线条艺术、基于草图的风格到平面切割设计,他们是精心制作的微型艺术品。一旦你已经确定了项目的设计风格,创建一组符合该视觉风格的图标。


6.给它一个异想天开的改变



对于某些图标,你可能只能使用标准的设计,以便用户确切了解这些元素的作用。这大部分包括社交媒体链接,搜索,购物车和导航箭头的图标。在这些上面,你永远不应该为了新颖性而牺牲图标的的直观可读性。


但你可以在网页设计中把自己异想天开的改变想法添加到这些标准的图标样式中。通过更改颜色,调整形状,甚至重新绘制样式中的图标。诀窍就是做一些感觉独特的东西,同时保持视觉识别,使用户不会质疑图标的含义。


简单的改变有可能造成的影响是深远的。这种调整可以帮助常见的元素成为您的设计和视觉故事的一部分。


Little Puds & Co.通过调整图标的样式,使得网站设计的整体很迷人。顶部角落中的常见图标是可识别的,但显示的是网站的品牌颜色。这些图标看起来比在Facebook和Instagram的调色板中的更柔和,似乎匹配更多的异想天开,天真的风格在整个设计中得到体现。


7.创建自定义草图



图标本身可以视作为一个微缩的图画,虽然图标大多趋向于扁平风,并且其中相当一部分是采用线条勾勒的,但是图标本身还是能玩出很多花样的,尤其是当你想玩出属于自己的风格的时候。


最典型的就是采用自己手绘的图标,这样的图标通常很难划归到常见的分类中,但是他们有明显带有个人风格。手绘图标本身就是一种带有品牌属性的东西。


总结

虽然图标有可能是网站设计项目中最少会被认真考虑的元素之一,但它们可能是最有趣的元素之一。好的图标可以使网页设计项目的整体更加具有关联性。通过一种简单的方式,给整体设计一点视觉体验上的起伏和精细感。


相关文章阅读:

1、无边框按钮的优缺点

2、空心图标和实心图标

3、网页设计中返回顶部按钮

业务咨询

客户服务

我要留言

节假日咨询电话

136-1188-9500

关于我们

上海求创科技有限公司成立于2001年,是一家专注于为客户提供高端网站策划、网站建设、网页设计、品牌网络营销以及相关的基于互联网应用服务的专业公司。

更多

全国客户服务热线

400-889-1636

网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技-微官网 网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技-手机网
域名超市 | 苏州网站优化 | 北京网站建设 | 邯郸网站建设 | h5建站 | 手机网站建设 | 营销型网站建设 | 沈阳seo优化 | 企业网站建设 | 网页设计 |
业务热线:021-52300315 021-52300317 业务部:sales@dn.cn 售后服务:service@dn.cn 投诉邮箱:info@dn.cn 域名和主机服务:021-52300319
地址:上海市静安区镇宁路168号16楼A室 邮政编码:200050
版权所有©上海求创科技有限公司 沪ICP备13005298号-24  网站地图