从而帮助我们提高在设计中的效率

图标设计 急速飞驰 浏览

小编:本文主要对于图标设计的 类型、风格 进行了整理,以及自己对于每种图标类型的思考观点。 本文主要对于图标设计的 类型、风格 进行了整理,以及自己对于每种图标类型的思考观点

  本文主要对于图标设计的 “类型、风格” 进行了整理,以及自己对于每种图标类型的思考观点。

  本文主要对于图标设计的 “类型、风格” 进行了整理,以及自己对于每种图标类型的思考观点。

  图标是UI设计中极为重要的一个环节,我们在设计每个界面几乎都会设计到图标的表达,出色的图标设计可以让界面表达更加经常、精致、有趣。

  图标的设计往往也体现着设计师的基本功,因此除了日常多画之外(多画可以提升对图标造型的把控力),我们也更需要了解和学习图标设计的趋势类型,从而帮助我们提高在设计中的效率。

  基于自我学习的目的,平时在浏览一些设计网站时也会做相对应的收集。因此本文主要对于图标设计的 “类型、风格” 进行了整理,以及自己对于每种图标类型的思考观点。

  设计网站上的图标可以说是多种多样,不同类型的图标都有着独特的魅力。例如:线形图标-简洁轻量、面形图标-厚重直接,当然同一种类型的图标也具有很多不同的表现形式。

  因此基于本人对图标的理解,大致划分为三类:线性、面形、线面结合。结合三种基础类型的表达方式可以创造出各式各样的表现形式。

  使用轻量的线条勾勒的图标,整体感受也趋向于精致、细致而具有锐度感。不同的线条表现具有不同的视觉感受,细线轻量、直线硬朗、曲线. 线型图标基础分析及想法

  但在设计时需要依据 “整体的UI风格”来决定线的粗细,而并非单纯的考虑图标的关注度,反而更需要考虑图标与界面整体的平衡感。

  当内形为外形的1:2时(下图2),图标的整体视觉效果较为平衡;当大于1:2并接近4:3时,图标内部结构会显得过于饱满;而小于1:2并接近4:1时(下图3)则会产生稀疏不紧凑的效果。(这里的比例只是案例需要,实际设计以最终的视觉感知为准)

  基础的理论,结合延展的应用,可以迸发出更多的创意想法。线形图标也并非只有一种设计形态。通过以下案例,可以看看线型图标设计的类型的多样性。

  极简的风格图标在于对形的把控,多一笔可能显得复杂,少一笔可能影响识别程度。以上图为例,图标的组合元素保持在2个左右,整体较为干净。

  实际应用-Instagram、Airbnb、Facebook、Twitter

  同色系:同为冷色系、暖色系或某种颜色系统的表达形式。太阳城娱乐城如下图案例,以暗色主色-亮色点缀提亮,使得图标具有一种高光提亮的感觉。

  另一组案例是 亮色主色结合暗色,整体图标效果还算可以,但较亮的颜色没有应用在图标的关键特征上,使得图标第一眼的感知稍有减弱。

  对比互补色:颜色跨度更大,层次更加分明。如下图案例,红色与蓝色的撞色之后相比单色的图标更加出彩和具有记忆点。

  面形图标比线型图标更能表达出图标的力量感和重量感,比线型图标会更加容易吸引视觉目光。在识别度上,面形图标更加依赖于外轮廓的清晰度,因此在设计时对于外形的打磨是重中之重,清晰的外轮廓可以帮助提高识别度。

  面形图标在设计时也可以结合各种不同的表达方式,来提升图标的质感和创意,而非只是简单的填充颜色而已。

  透明叠加的图标+渐变的背景此类图标常常被应用在UI界面中的列表或者顶部入口的位置。

  结合了线形和面形的优点,既保持了面形的重量感,同时具有线形的精致、细腻。因此在设计时可以根据图标具体想要表达的感觉对线面比例进行把控,不同比例可以呈现出不同的视觉感知。

  线面比例的差异,图形呈现出来的张力也会又不同的感受。基于中间填充的图标形态尝试了三种不同的比例,从下图中可以看出,当填充与外形窄边比为1:3时(左图)图标呈现往内收的感觉,填充与外形窄边比为1:2时(中间)图标整体较为平衡,当填充与外形窄边比为2:3(大于1:2)时(右图)整体具有外扩趋势。

  线面结合的图标集合了线型和面形的优点,在设计方式上也继承了两者的优点。因此设计方式也是基于以上两种的结合,因此可以结合出更多设计的可能性。

  基于三种基础的类型表达,可以拓展出多种多样的设计形式。除了以上的案例之外,还收集了一些其他的设计,如下:

  除了以上这些之外,我们在实际场景中也会发现一些较为特别的图标设计,如下:

  整体为具象化扁平风格的设计表达,图标的颜色还原最基本的现实感知的识别。

  本文的重点在于透过这些设计类型或者技法的了解,帮助我们在于日常设计中的提升输出效率。图标虽然作为UI设计的基础,但却有很深的学问,精致的图标更是可以起到点睛的作用,提升界面的质感和氛围。

  声明:该文观点仅代表作者本人,搜狐号系信息发布平台,搜狐仅提供信息存储空间服务。

当前网址:http://www.builder.org.cn/linggan/icon/3619.html

 
你可能喜欢的: