签到

07月19日
尚未签到

共有回帖数 0 个

    幻梦如戏

    等级：
    设计师必知的UI图标设计知识

    图标是UI设计师必会技能之一，而一个好的icon是怎么设计出来的呢？
    今天我们来给大家一个图标设计的全面知识汇总：
    首先，在制作图标前要考虑以下几点（那张纸默默写下来）： 你的icon主要适用于什么设备？
    需要什么风格的icon？
    有没有其他设计要求？

    接下来我们进入设计过程： 1. 设计从网格开始    针对不同的设计我们会运用不同大小的网格。我们这里以32*32的网格为例。

    网格边缘的2px是我设计中不可触及的，也就是留白边缘。如果没有特殊情况的话，我一定不会让我的设计图形进入这个边缘界限。而留白的目的也是为了让设计看着不会太满给用户一定的呼吸感。
    图标的结构分为形状和方向两部分。如果你的图标有边框，一般会在边界框位置画出像正方形，圆形，三角形，矩形等图形作为边框。
    圆形图标会在网格中成居中状。在圆形图标设计中四个边缘会触及到内容区域的边缘，但不会到留白区域。一些小的图形和边边角角部位会超出圆形，但不用担心，这是一个常见的现象。
    方形图标一般也会在网格中居中，但大多数情况也会触及到内容区域的边缘。我们看下下面这张图：图中分三个方形区域（蓝色、橙色和绿色），图标中的大部分图形在中间橙色区域内。每个区域内的图形占比取决于图标整体的视觉效果，而这个把控需要你不断地练习找一些感觉才能自如的运用。






    但你要记住网格规矩不是所有设计都要遵循的，一个图标的本质远远超过了这种规矩的设定。网格会帮助你提高图标设计的一致性，但是如果在设计一个牛逼图标和遵循规则中选择的话，相信你也会选牛逼设计的。
    2. 从一个简单的几何图形下手    设计图标跟画草图一样：从一个简单而粗糙的圆形、长方形又或是三角形开始。在设计小图标的时候，手绘的表现方式可能会看着不那么精致，所以用AI做设计是个更好的选择。用一些基本的几何图形进行设计会更加准确（尤其在曲线边缘部分），在调整的时候会更快，同时也能更精确的适应网格模式。


    3. 边缘、边角、曲线及角度规范    尽可能在设计时边缘、边角、曲线及角度遵循一些数学规范的同时又不失有趣。换句话说就是不要太相信自己的眼球，在一些细节上需要遵循规范，因为如果这些元素不一致的话会很影响图标的质量。
    角度
    在设计中，大多情况我会使用45度角或者它的倍数。45度角会显得很均匀（在像素下会表现得更强），这种完美的对角线会让人眼很舒服也很清晰。这种模式同时也可以建立一组图标的统一性。如果我要打破这种规则我可能会使用减半角度（22.5或者11.5度）或者15的倍数，当然也会根据情况进行调整。使用45度的好处是即使反角度用也是不打乱规则的。








    像素效果
    图标的像素效果在用户界面中是很重要的一部分，尤其在小尺寸设计中很影响整体视觉。如果像素网格中行间距不对齐，会导致边缘出现锯齿在小图标上会看起来很模糊。要是调整图标的像素网格会使直线变得单薄，角度与曲线的精确度就没那么精确。这也是为什么建议大家用45度角的原因，比较好掌握，更加精准容易对齐。
    线的粗细
    说到线的粗细，2像素应该是最理想的，可3像素是最通用的。我个人更倾向2PX和4px，理想状态下我会用2的倍数比较多。在大多情况下字和扁平的图标是要避免特别细的线条，除非你是为了做出一些期望效果。如果你想定义线条的形状，一般设计师会通过光线和阴影的方法。














    此外，很多图标实际使用是在一定的环境下，大多数包括一行描述性文本在图标下面。设计时，字母的颜色和图标的类型或者网站也要保持一致，这样才能建立品牌的统一性。

    4. 用鲜亮的颜色




    你的品牌会有它的logo，可一旦它变成了图标，更像是一个标志。这个标志可以是一个简单的logo或者图像，它需要表现的更直接更能让客户记住它。而品牌也希望将logo和图标建立一些联系，让自身达成统一。

    6. 图标的用途




    有一个有趣的小窍门设计师们多年用来测试设计的有效性——单色模式。在单色设计中，如果你的设计传达同样的信息，那么它是个有效设计；如果没有颜色它变得很弱甚至影响用户识别，那么请继续修改。也有些设计师会先用黑白色进行设计，建立一个坚实的框架后，然后再添加颜色。

    楼主 2016-02-23 19:20 回复

共有回帖数 0 个
  • 回 帖
  • 表情 图片 视频
  • 发表

登录直线网账号

Copyright © 2010~2015 直线网 版权所有,All Rights Reserved.沪ICP备10039589号 意见反馈 | 关于直线 | 版权声明 | 会员须知