ui图标设计规范有哪些?看完这篇干货少走弯路!

今天来跟大家伙儿聊聊我是咋设计UI图标的,整个过程还挺有意思的。摸索阶段我也不太懂,就觉得UI设计嘛不就是画几个小图标,能有多难?结果一上手,发现根本不是那么回事!我画出来的东西,要么就是跟别人家的长得差不多,要么就是我自己都看不懂这是个啥玩意儿。学习过程后来我就琢磨着,这不行,得学!我就到处找资料,看人家大神们是怎么设计的。发现人家设计图标都讲究个“规矩”。是可识别性。 人家说这是最重要的,你得

今天来跟大家伙儿聊聊我是咋设计UI图标的,整个过程还挺有意思的。

摸索阶段

我也不太懂,就觉得UI设计嘛不就是画几个小图标,能有多难?结果一上手,发现根本不是那么回事!我画出来的东西,要么就是跟别人家的长得差不多,要么就是我自己都看不懂这是个啥玩意儿。

学习过程

后来我就琢磨着,这不行,得学!我就到处找资料,看人家大神们是怎么设计的。发现人家设计图标都讲究个“规矩”。

是可识别性。 人家说这是最重要的,你得让人一眼就看明白你这图标是干啥的,不能让人猜谜语似的。这就像你看到一个叉叉就知道是关闭,看到一个放大镜就知道是搜索,对?

然后是差异性。 我得让我的图标跟别人家的不一样,得有自己的特色,要不然用户记不住!这就跟咱们平时买东西一样,总得挑个自己喜欢的、特别点的,对?

再就是用栅格线。 这个我一开始也不太明白,后来才知道,这是为让图标看起来更整齐、更协调。就像咱们写字一样,用田字格写出来的字就比随便乱写的要好看,是一个道理。

实践出真知

学这么多,我就开始动手画。我先定一个主题,比如说,我要设计一套购物App的图标。

  • 我先画一个购物车,这个得让人一眼就看出来是能买东西的。
  • 然后我又画一个搜索框,这个得让人知道是能搜东西的。
  • 我还画一个“我的”图标,这个得让人明白是能看到自己信息的。

画完之后,我还得不断地修改,看看哪里不协调,哪里不够突出,哪里容易让人误解。这过程挺磨人的,有时候一个图标我得改个十几遍,但改完之后,看着自己设计的图标,心里还是挺有成就感的。

功能型图标

除上面说的那些应用型图标,我还设计一些功能型图标。这些图标主要是为指示、提醒、概括和表述一些信息。比如说:

  • 我设计一个向右的箭头,表示“下一步”。
  • 我还设计一个打勾的圆圈,表示“已完成”。
  • 我又设计一个感叹号,表示“警告”。

设计这些图标,最重要的一点就是要表意准确,绝对不能让人产生误解。要不然,用户点错按钮,那可就麻烦大!

设计UI图标可不是个简单的事儿,得用心学,用心琢磨,还得不断地练习。不过当你看到自己设计的图标被大家认可的时候,那种感觉,真是太棒!