图标UI设计的设计技法要点

  在网上看过很多设计师的图标制作过程，基本都是偏向技法的介绍，其实在图标设计过程中除了技法之外 较重要的就是图标创意了，但这方面的系统介绍网上倒是很少。借这次实际的界面设计项目，长沙天琥设计培训学校来分享下一下图标制作创意阶段的方法的理解，并以丰富的图例来阐释自己的想法！以此作为图形界面设计师交流的引子，欢迎大家进来交流。

  1）关键节点绘制法

  拟物化设计就是尽可能的绘制繁琐细节，追求丰富和相似度。而剪影图标则是相反，以简练为绘制手段。但是细节就没有吗，不是的，而是更加谨慎认真的注重每一笔，且越来越优雅。

  这里举例剪影图标绘制方法技巧，3步骤可以搞定，看似又简单又难，简单的是只是绘制参照物轮廓，保留基础识别性，步骤很少；难的是这调整的过程与产品环境的融合性，易用性，还有你自己的创意想法。

  说简单点就是去繁择简并经过思考改造过的设计过程。而较基本的较需要犀利眼神抓准的是造型的关键节点，雏形出来后再根据想法调整。

  提炼精华勾勒轮廓

  通常在绘制已有参照物的基础上去设计一个图标，可以根据你喜欢的造型参照物去进行分析，先抓取到参照物的关键节点，几何绘制出来一个相似的基本图形。

  调整线锋优雅得体

  基础雏形出来后就开始加入自己的想法调整线锋，线条走向决定造型。这个时候就得要调多几个版本了。设计师的处女座精细和纠结情结就在这里洒汗了，不断调整对比，挑选出一个较优再进行下一步。

  增特有细节出风格

  较后一步的塑形，就是画龙点睛！造型的特点就在这一步去完成。

  对于新老设计师来说，这样的方法都是比较可取好用的，交互设计师也可以这样快速入门哦亲！尤其是头等步骤，能否非常快速的出雏形。下面是其他案例的设计方法欣赏，跟我上面总结的一样道理。

  2）精致的基础要素

  精致即精细极致。看似简单的图标其实并不是随便了事，但知道了这些基本要素你就可以完成一个合格的图标了。好的图标是谨慎认真的注重每一笔每一像素每一矢量锚点的，尽可能的往精美优雅的方向努力吧骚年~

  犀利清晰

  需要锻炼厉害的眼睛，使出你的火眼金星捕捉每个像素之差，像素满格才能清晰的呈现，细分出来通常会遇到以下3种情况，这也是较影响图标基本质量的问题点。

  ·轮廓发虚

  图标一定要用矢量绘制，但是新手很容易犯的头等个错误就是图标模糊的问题，也不清楚为何会这样。其实就是矢量边缘模糊产生的问题，也是个人绘制的不良习惯造成。

  避免这个问题，必须在100%画布上绘制图形，而且不能直接推动图标放大缩小，即使这样改变大小了也要放大画布调整路径的锚点，反复查看及校正是否对齐1px网格，而不是0.1~0.9px，正是不满1px格才会生产虚线。而圆形的绘制保证十字架4个边缘点对准就可以了。

  ·斜形发虚

  斜线也是会有模糊与精致之分的，不仔细对比其实是比较难看到问题，可能很多人都会碰到图形进行倾斜效果时是有锯齿的，那就是角度的处理问题了，自己进行多角度对比下试试，会发现哪一个角度较清晰。也可以将图层进行双层叠加，会非常犀利哦~

  ·像素不够或多余

  看下来都是像素发虚与清晰的原因都是一样的，下面这个例子是箭头在小尺寸情况下可点阵矢量像素绘制，如果是大尺寸（如上面较大的箭头示例）可以直接钢笔绘制。

  总结一下上面的处理方法，坚持较少发虚原则：

  比例协调

  图形内部结构要注意元素构成之间的比例，有黄金比例分割也有感性的平衡方法。严谨的图标比例可参照苹果IOS图标规范案例，打好内部统一结构线进行图形绘制和比例分配。

  如果头眼昏花嫌麻烦，也可靠经验感觉快速完成一个具有平衡感的图标。

  视差平衡

  同一个尺寸规格，但根据不同形状的图标，会导致面积占比引起的视差大小不同，但要在参考尺寸范围内绘制进行调整。以下图标示例都是撑满方框边缘绘制，按道理这好像是准确的，但由于人的肉眼会有视差问题，所以做的设计就要暂时抛开科学，以人的真实情况去判断再调整。

  更多设计资讯，培训课程，开班时间，学校地址等学校信息，请进入长沙天琥设计培训学校：http://cstianhu.5zix.com/网站详细了解，咨询电话：18670081751，咨询QQ：1434119060

尊重原创文章，转载请注明出处与链接：http://cstianhu.5zix.com/news/45327/ 违者必究！ 以上就是长沙天琥设计培训学校 小编为您整理图标UI设计的设计技法要点的全部内容。

---

• ← 标志设计者常犯的10个愚蠢错误
• 海报设计中需要避免的误区 →