zoukankan      html  css  js  c++  java
  • 关于功能图标的绘制方法!

    因为在某公司实习,有空的时候就自己做些相关的练习,画了一周的图标,自己对于功能图标有了些新的认识,借此总结分享一下。

    本文章没有过多的文案修饰,更多的是设计方法的介绍

    1.观察生活,从生活中选取造型

    图标是对事物的精简概括,只有知道事物本身是什么样子,设计师才能进行精简设计,让用户用最少的时间去理解传达的内容

    Image title

    近期在读的一本书,有一点让我印象深刻!

    从实现角度概括图标的话:真实物体/事物(非常复杂)-拟物图标(相对复杂)-扁平图标(简约易识别)

    当然事实都是一步步来,如果没有前面复杂图形的积累,就没有如今的简约图标,即使有也不容易被接受

    Image title

    那什么叫国际化的图标呢?那就是你设计的图标,在全球范围内用户都可以快速识别,比如:天气、房子(当地特色除外)、公共卫生间、方向标示等一系列的图标。Image title

    2.使用基本图形,绘制80%图标的方法

    通过一段时间的实操,发现有80%的图标可以用基础图形(矩形、三角形、圆形)进行制作,这也符合我们画素描一样,先从基本型进行定型,再绘制轮廓和光影,只是在这里,我们通过基本型转曲线进行绘制。

    Image title

    为了更好的进行解释,在这里我做了动画,方便大家查看理解

    Image title

    平面图了解一下

    Image title

    总结:通过以上的简单展示说明,大部分图标都可以用基础形进行概括再进行设计加工

    不过相信有些同学会觉得有些图形就是很复杂,光通过基础图形没办法完成。

    我想说的是,人本身(我们的习惯)就对基础图形理解相对简单,加上复杂图形会增加理解难度,尤其在功能图标上,采用基础图形会相对好一些。

    3.线性与面形的转换

    这个部分相信大家都比较熟悉,实际上就是填充与描边的切换,加上部分反白。

    在这里需要注意的是描边类型,因为切换成填充/描边后外形会发生变化,根据视觉呈现效果进行相应的调整

    Image title

    4.常用金刚区的制作方法

    图标金刚区是app首页中的主要功能入口图标,在保证识别性之外,需要对它稍加修饰让他在首页中凸显出来。

    根据业务属性匹配图标底色

    采用与业务相符合的色彩搭配会让用户在使用的过程中更加舒适、流畅,不会产生不适应的感受

    Image title

    加强图标质感的方法

    这里介绍几个常用的方法,主要用于凸显图标的视觉层级

    Image title

    仅作为展示所用,未考虑产品的整体调性

    注:常见的金刚区一般运用到渐变色即可

           不要为了视觉一味地提高图标层级,视觉层级太高反而弱化了其他板块

    因为全面屏的来临,弥散投影、常规投影应用变的更加的广泛。

    Image title

    因为全面屏屏占比大,由于过窄的边框,设计师在进行app设计的时候会把界面边距加宽,这样对于用户来讲操作会更加的舒适,不然想象一下,自己在手机边缘点击某些内容,是不是很痛苦。

    编辑:千锋UI设计

    来源:UI中国

  • 相关阅读:
    Max History CodeForces
    Buy a Ticket CodeForces
    AC日记——字符串的展开 openjudge 1.7 35
    AC日记——回文子串 openjudge 1.7 34
    AC日记——判断字符串是否为回文 openjudge 1.7 33
    AC日记——行程长度编码 openjudge 1.7 32
    AC日记——字符串P型编码 openjudge 1.7 31
    AC日记——字符环 openjudge 1.7 30
    AC日记——ISBN号码 openjudge 1.7 29
    AC日记——单词倒排 1.7 28
  • 原文地址:https://www.cnblogs.com/leolei/p/9679461.html
Copyright © 2011-2022 走看看