icon设计

1. 类型

（1）应用、网站的标识
（2）具有明确含义的功能标识

2. 样式

（1）线性图标 ---- 纯色描边、多色描边、渐变叠加描边
（2）填充图标 ---- 纯色填充、渐变叠加填充、轻拟物
（3）混合型图标

3. 流程

（1）想好表现风格和设计内容（具体），并罗列出来
（2）设置网格（PS/AI中设置对齐网格，键盘增量等）
（3）设置画布尺寸 ---- 设计前需要定义这组icon的统一画布尺寸，以4的倍数设置icon画布尺寸的长宽
（4）定义图形的长和宽 ---- 定义好画布大小后再在画布内绘制图形（不一定要撑满画布）

4.实际操作

（1）对照设计图罗列出要设计的全部icon，此时进行大致的分类，如菜单栏图标（fit with all pages）、快速入口图标（catchy）、辅助性图标（plain but specific）。并根据现有界面大致确定风格（catchy or plain? cute or shape? ... ）

• pending：
  微信
  QQ

• table bar
  首页
  目的地
  酒店
  旅游商城
  我的

• functional
  关闭
  下拉显示（首页）
  消息
  点赞
  评论
  更多
  客服
  分类列表
  菜单
  返回
  分享
  历史
  地图（附近)
  收藏
  购物车
  地标
  pin
  导航
  搜索
  筛选
  娱乐
  景点
  购物
  工具
  二维码
  相机

• subsidiary
  （1）出行信息卡片
  出发时间
  人均费用
  人物
  出行天数
  （2）订房卡片
  入住时间
  退房时间
  成人
  儿童
  （3）租车卡片
  取车时间
  取车区域
  当地取车时间
  当地还车时间
  （4）租车按钮
  租车证件查询
  租车指南
  （5）我的主页
  我的收藏
  我的下载
  我的订单
  我的游记
  我的问答
  我的点评
  我的活动
  优惠券

• quick access
  攻略
  酒店
  游记
  问答
  路线
  地图

（2）设置网格、画布尺寸（以课上32*32的画布做参考）、定义图形的长和宽 ---- got confused actually

image.png

（3）大致确定风格，根据上面步骤得出的大致印象，有针对性的找素材，并且适当对素材进行分类和排序（根据难易程度、颜色种类等标准），此时通常会得出几种不同的类型（方案），罗列出来结合原图再进行选择。

• 形式 - 线性图标
• 颜色 - 双色图标 - 沿用主色（黄）+ 辅助色（带色相的灰）
• 样式 - 背景填充/断点 （无渐变/叠加/阴影）
• 状态 - default（不同的灰组合表达）、click（可配合主色创造有趣的样式 it could be anything）

• 主参考图：

  
  
  

  image.png
  
  

  （4）根据（1）中罗列的图标，找到对应的具体参考，这时应给出多种方案再选最优。
  （5）试着去画！别空想。