产品经理必懂的Web前端知识

产品经理在设计产品原型时，需要结合产品思维与实现思维，通过组件化设计思路，从开发角度思考问题，设计可复用产品模块，同时需要明确技术边界，基于现有技术设计产品原型，因此，产品经理就需要掌握必要的前端技术知识来将其应用到产品设计中

web前端知识学习笔记

• 运行环境
  • 浏览器
    • 浏览器兼容性
      • 常用浏览器
        • 苹果公司
          • safari
            • webkite内核
        • 谷歌公司
          • chrome
            • webkite内核
        • 微软公司
          • ie
            • Trident内核
        • 其他
          • 欧朋opera
            • Presto内核
          • 火狐firefox
            • Gecko内核
          • 360
          • 搜狗
          • ...
      • 兼容方法
        • 自身代码问题？
          • 语法准确性
          • 标签合理性(少用)
          • 布局合理性(三种布局级别)
          • 建议：更换布局思路或换掉不兼容的属性或标签
        • CSShack解决方案(针对不同浏览器写代码)
        • csshack
        • javascript例如事件系统
        • 渐进增强优雅降级
    • 相应式布局
    • web安全
      • 同源策略
      • XSS跨站点攻击
      • CSRF跨站点请求伪造
      • 点击劫持
      • SQL注入
      • ……
    • 性能优化
      • 压缩
      • csssprites
      • 合并减少http请求
      • 缓存
      • CDN
      • 避免重定向
      • ……
  • node
• 编码开发
  • 开发工具
    • 编辑器
      • sublime
        • zencoding
        • 常用插件和快捷键
      • webstorm
    • 效率工具
      • grunt
        • uglify
        • concat
        • cssmin
        • jshint
        • csslint
        • watch
        • ……
      • gulp
        • 相应的插件
  • 模块定义
    • AMDrequirejs
    • CMDseajs
    • commonjs
  • 版本管理
    • gitgithub
    • svn
  • 调试
    • chrome控制台
    • firebug
  • 测试
    • grunt
      • qunit等
    • gulp
      • 相应的插件
• 类库框架
  • 用于浏览器
    • jQuery
      • 常用API
      • 常用插件
      • 自制插件
      • 源码解读设计思路
    • BootStrap
      • 常用样式
      • 常用插件
      • 衍生框架如ProUI
    • fontAwesomeicomoon.io
    • requirejsseajs
    • BackBoneangular等
    • React
  • 用于nodejs
    • 自带模块
      • http
      • url
      • fs
      • ……
    • 其他模块
      • jquery
      • backbone
      • express
      • ……
• 理论知识
  • 硬知识
    • http标准
      • http请求的过程
      • http状态码的意义
      • http头部信息
      • cookie状态管理
      • 方法GetPost
      • https
    • W3C标准
      • htmlhtml5
        • HTML(信息结构)
          • 符号
            • 尖括号
            • 斜杠
            • 感叹号
            • 双引号
            • 等号
            • 空格
              • 分隔属性
              • 分隔属性的多个值
          • 常用标签
            • 区块(块级)block
              • div
              • h1
              • p
              • ul
              • li
              • dl
              • dt
              • dd
            • 内联块inline-block
              • input
              • img
            • 文本(内联)inline
              • a
              • span
        • 语义化
          • HTML语言
            • 标签分类
              • 按照数量
                • 单标签
                • 双标签
              • 按照类型
                • 行内标签
                  • 标签后面的内容不换行
                  • 所有内容都在一行里
                • 块级标签
                  • 自成一行
                  • 标签后面的内容会自动换行
            • 路径书写规范
              • 绝对路径
                • 网址
                • 本地硬盘地址
                • 邮件链接
                • 锚记链接
                  • 作用是跳转到网页的指定位置
                  • 制作方法
                    • 给目标位置命名
                    • 给起始位置添加链接
              • 相对路径
                • 定义
                  • 根据当前编写代码的文档去找其他文件的位置
                  • 所有文件都必须在同一个盘符内
                • 三种情况
                  • 同一级
                    • 直接写文件名小数点扩展名
                  • 下一级
                    • 文件夹名称/文件名小数点扩展名
                  • 上一级
                    • ../文件名小数点扩展名
            • 标签的父子级关系
              • 子级标签会继承父级标签的效果
              • 部分标签子级不继承父级的效果
                • a标签
                  • 颜色
                  • 下划线
              • 子级效果和父级效果有冲突的时候，子级优先级别高
        • DOM
        • 2D3D
        • 本地存储
      • CSS(布局美化)
        • 符号
          • 冒号
            • 分隔属性名和属性值
          • 分号
            • 分隔属性
          • 空格
            • 分隔属性的多个值
        • 选择器
          • 标签名
          • 类名
            • 类名前加点
            • 用class属性
          • id名
            • 加#
          • 复合定义
            • 用逗号表示"和"
              • div,p,a{}
            • 用空格表示"里"
              • diva{}
          • 伪类定义
            • :link
            • :visited
            • :hover
              • 模拟鼠标经过事件
              • 模拟鼠标离开事件
            • :active
              • 模拟鼠标按下事件
              • 模拟鼠标弹起事件
        • 优先级
          • 子级优先
          • 选择器定义的优先
            • id>类>标签
          • 复合定义优先
            • 逐级比较
        • 继承性
        • 常用属性
          • 区块
            • width
              • width:300px;固定值
              • width:50%;百分比
                • 百分比参考直接父级获取父级宽然后加上边框...
              • width:auto;自动
                • 参考直接父级，auto是自动运算出宽度获取父级宽然后减去边框是自己的宽度
            • height
              • height:300px;固定值
              • height:50%;百分比
                • 百分比参考直接父级
              • height:auto;高度自动是“无”，由子级撑开
            • background-color
            • border
              • border-top
              • border-bottom
              • border-left
              • border-right
          • 文本
            • font-family
            • font-size
            • color
            • line-height
            • letter-spacing
            • font-weight
              • font-weight:bold
              • font-weight:normal
            • text-align
          • 布局
            • Y轴布局(默认布局)
              • 注意： margin:0auto只能用于默认布局对象的居中
              • 强调： 默认布局对象的宽度是auto时，按父级宽度为参考
            • X轴布局(浮动布局)
              • float
                • float:left
                • float:right
                • float:none
              • clear
                • clear:left
                • clear:right
                • clear:both
              • 强调： 浮动对象的宽度由子级撑开
            • Z轴布局(定位布局)
              • position
                • position:absolute绝对
                  • 参考文档document，坐标值为固定值时， 没有参考父级时，参考文档的坐标； 有参考父辈时（父辈必须是定位对象），参考父级的坐标；
                  • 坐标值为百分比时，参考父级
                  • 不占位
                • position:relative相对
                  • 参考文档document，坐标值为固定值时，参考自身坐标；
                  • 坐标值为百分比时，参考父级
                  • 占位
                • position:fixed固定
                  • 参考窗口window
                  • 坐标值为百分比时，参考父级
                • position:static不定位
              • 坐标： 可以支持百分比，依然参考父级
                • top
                • right
                • bottom
                • left
              • z-index:层级数
          • 溢出处理
            • overflow
              • overflow:hidden;把溢出的内容隐藏
              • overflow:visible;溢出的内容可见
              • overflow:scroll;用滚动条方式查看溢出内容
              • overflow:auto;自动判断是否需要加滚动条
          • 背景图像
            • background-image:url()
            • background-repeat
              • no-repeat
              • repeat
              • repeat-x
              • repeat-y
            • background-position
              • x
                • leftcenterright
              • y
                • topcenterbottom
      • CSS3
        • 媒体查询规则
          • @media(max-width:800px){ } 注意：一定不能加分号
        • 先复习:hover
          • 能经过自己并控制自己
          • 能经过自己并控制子级
        • 过渡动画(补间动画)
          • transition:属性时间(s秒);
        • CSS3修饰属性
          • 渐变色
          • 投影
          • 变形transform
            • translate(x,y)移动像素值 translateX() translateY()
            • scale(x,y)缩放比例(倍数) scaleX() scaleY()
            • 二维 rotate()旋转(角度deg) 三维 rotateX() rotateY() rotateZ()
            • skew()斜切 skewX() skewY()
          • 变形中心transform-origin
        • CSS动画
          • @keyframes动画名称{ from{从属性的一个值} to{到属性的另一个值} }
          • div{animation:动画名称播放时间;}
            • animation-iteration-count
              • 循环次数infinite无限
            • animation-direction
              • 动画方向alternate交替
            • animation-timing-function
              • 缓动设置linear匀速运动
      • csscss3
        • 作用
          • 美化网页
          • 网页布局
        • 样式表的添加方法
          • 行内样式
            • 在标签中添加“style”属性
            • 在“style”属性里书写样式表的属性
          • 内嵌样式
            • 在head标签之间添加一对style标签
            • 把样式表写在这对style标签之间
          • 链接样式
            • 在head标签之间添加link标签
            • 把所有的样式表代码写到外部的css样式文件中
            • 把这个css样式文件和网页进行关联
          • 多用
        • 样式表的选择器
          • 选择器的类型
            • 标签选择器
              • 选择器就是HTML语言中的某个标签
              • 表示给这个标签添加样式效果
              • 在当前网页中所有相同标签的效果都一样
              • 通配符选择器“*”
                • 代表所有的标签
                • 添加样式表示把所有标签都定义为相同的效果
                • 用来做网页初始化效果设置
            • 自定义选择器
              • 类选择器
                • 定义
                  • 小数点加自定义名称（英文小写有意义）
                • 应用
                  • 在标签中添加“class”属性调用定义好的类样式
                  • 类样式在一个网页中可以反复调用
                  • 一个标签可以调用多类样式
              • ID选择器
                • 定义
                  • #加自定义名称（英文小写有意义）
                • 应用
                  • 在标签中添加“id”属性调用定义好的类样式
                  • id样式在一个网页中只能调用一次
            • 伪类选择器
              • 选择器:link
              • 选择器:visited
              • 选择器:hover
              • 选择器:active
          • 选择器的应用
            • 标签相同，效果相同
            • 标签相同，效果不同
            • 标签不同，效果相同
        • 样式表的优先级别
          • 样式表代码的读取顺序是从上到下，但是优先级别是从下到上
          • 行内样式>内嵌样式>链接样式
          • ID样式>类样式>标签样式
          • 考虑标签的优先级别，子级>父级
        • 网页代码编写步骤
          • 先写HTML标签
          • 确定CSS样式的添加方式
            • 内嵌
            • 链接
          • 分析网页的效果，得到相应的CSS样式属性
          • 确定添加CSS样式的标签
          • 使用什么样的选择器
            • 标签选择器
            • 自定义选择器
            • 伪类选择器
        • 网页中添加图像的方法
          • 插入图片
            • 使用HTML里的img标签
            • 插入图片只显示一张
            • 插入图片会占据网页空间
            • 使用情况
              • 重要的内容图片
              • logo
              • 产品图
              • 广告图
          • 背景图片
            • 使用CSS的background属性
            • 背景图片默认会平铺
            • 背景图片不占据网页空间
            • 使用情况
              • 装饰性图片
              • 纹理、图案
              • 图标
              • 结合伪类的效果
        • CSS中不同标签的区别
          • 行内标签
            • 行内标签无法添加宽高
              • 解决方法1：通过display: block;转换为块级标签
              • 解决方法2：通过float属性浮动后可以添加宽高
              • 解决方法3：添加绝对定位或固定定位
            • 特点
              • 宽度和子级的内容一样宽
              • 高度和子级的内容一样高
          • 块级标签
            • 块级标签可以设置宽高
            • 添加宽度高度
              • 块级标签水平居中（必须有固定宽度）
            • 不写宽度高度
              • 宽度和父级一样宽（100%）
              • 高度和子级的内容一样高
        • padding和margin的简写
          • 一个值
          • 两个值
          • 三个值
          • 四个值
          • margin的特点
            • 上下之间的距离取其最大值
            • 左右之间的距离取其和
            • margin-top可以垂直移动标签
            • margin-left可以水平移动标签
        • 总宽度总高度计算
          • 总宽度=左边外边距+左边框+左边内边距+宽度+右边内边距+右边框+右边外边距
          • 总高度=上边外边距+上边框+上边内边距+高度+下边内边距+下边框+下边外边距
        • 浮动float
          • 作用
            • 把添加浮动的标签自己往左或者分往右排列
            • 浮动不影响上一个标签，只影响下一个标签
            • 制作多列效果时，所有的列必须全部浮动
          • 三列组合
            • 123
            • 132
            • 213
            • 231
            • 312
            • 321
        • 定位position
          • 绝对定位
            • 参考浏览器窗口的范围来定位
            • 绝对定位后的标签浮动于网页内容之上
            • 多个标签之间的叠加顺序由z轴来确定
            • 添加绝对定位的行内标签会转换为块级标签
          • 相对定位
            • 参考标签原来的位置定位
            • 不会脱离文档内容，可以继续浮动
            • 多个标签之间的叠加顺序由z轴来确定
            • 添加相对定位，不能把行内标签转换为块级标签
          • 固定定位
            • 参考浏览器窗口的范围来定位
            • 固定定位的标签始终出现在坐标位置
            • 多个标签之间的叠加顺序由z轴来确定
            • 添加固定定位的行内标签会转换为块级标签
          • 嵌套定位
            • 父级添加相对定位
            • 子级添加绝对定位
            • 子级参考父级的范围定位
        • 概要
          • 层叠规则
          • 选择器
          • 排版
            • position
            • display
            • 盒子模型
            • float
          • 绘制
          • 动画
      • javascript
        • DOMAPI
          • 增、删、改、查、移动
          • 属性操作
          • 样式操作
        • BOMAPI
          • window
          • navigator
          • screen
          • history
          • location
        • 事件
          • event对象
          • 冒泡/捕获
          • 代理
        • ajax
          • XHR兼容性
          • GETPOST
          • 异步
          • 状态监控
          • 跨域
        • JSON
        • XML
        • websocket
        • ……
        • javascript(交互行为)
          • 变量
            • 声明变量： var变量名称
            • 用等号给变量赋值： x=5 注：声明时赋值叫初始值
            • 变量值的类型
              • 数字型
              • 字符型
                • 加引号
              • 布尔型
                • true真(对)
                • false假(错)
            • 变量的运算
              • 数学运算
                • +、-、*、/
              • 比较运算
                • >、<、==等于
          • 语句
            • 条件语句
              • if(布尔值){ true时执行这里 }else{ false时执行这里 }
          • 函数
            • function函数名称(){ } 注意:可理解为过程的打包
          • 数学对象
            • Math
              • Math.random()随机数
              • Math.floor()取整数
          • 日期对象
            • Date
          • 定时器
            • setInterval(过程,时间)设置间隔时间循环定时器 例子： setInterval(function(){},2000)
            • 停止定时
              • clearInterval(定时器名称)
              • 定时器命名： var定时器名=setInterval()
            • setTimeout(过程,时间)定时一次
            • 停止一次定时
              • clearTimeout(定时器名称)
              • 定时器命名： var定时器名=setTimeout()
      • jquery(交互动画)
        • javascript编写的程序，方便设计师制作交互动效
        • 免费下载jquery.js
        • 将jquery.js文件关联在html页面里: <scriptsrc="jquery文件位置"></script>
        • 语法
          • $
            • document文档
          • ()
            • 包含对象名称
            • 命令方法名称后面一定要加小括号
          • ""
            • 包含选择器名称
          • .
            • 调用执行方法
          • ,
            • 分隔参数（参考的属性或值）
          • {}
            • 包含语句片段
          • ;
            • 分隔语句
        • HTML相关操作
          • 删除
            • remove()删除自己
            • empty()删除子级
          • 添加（设置）
            • text(新文本)标签内添加文本
            • html(新标签)标签内添加标签
            • attr(属性名,新值)设置标签属性的值
          • 获得（获取）
            • text()让小括号空着，就是获取
            • html()让小括号空着，就是获取
            • attr(属性名)不写新值就是获取
            • val()获取表单的值
          • 修改
            • after()外部之后
            • before()外部之前
        • CSS相关操作
          • css(属性名,值)设置新值
          • css("属性")没有新值就是获取
          • width()设置或获取角色宽度
          • height()设置或获取角色高度
          • 类的操作 (括号里的类名前不加点)
            • addClass()添加类
            • removeClass()删除类
            • toggleClass()添加与删除切换(同一事件)
        • 动效相关方法
          • 隐藏/显示
            • hide()消失
            • show()
            • toggle()方法切换
          • 淡入/淡出
            • fadeIn()
            • fadeOut()消失
            • fadeToggle()方法切换
          • 上滑/下滑
            • slideUp()消失
            • slideDown()
            • slideToggle()方法切换
          • 动画
            • animate({属性},时间,回调) 语法： $("div").animate({left:500},1000,function(){ }) 回调：动画100%播放之后执行的过程
        • 遍历过滤(查找)方法
          • 选择器伪类方式进行筛选
            • :first
            • :last
            • :eq()注意：从零开始数
            • :even
            • :odd
          • 筛选方法
            • first()
            • last()
            • eq()
          • 选择正在操作的对象
            • $(this) 注意：this不能加引号
          • 利用标签关系查找对象
            • 找父级
              • parent()找直接父级
            • 找子级
              • children()找直接子级
            • 找兄弟
              • prev()上一个
              • next()下一个
          • 查找对象的位置数
            • index() 常用在选项功能中
              • $(this).index()
        • 事件相关操作
          • 语法
            • $(谁).click(function(){ 语句片段 })
            • 注意：有事件方法就一定要加function(){}
          • 鼠标事件
            • 鼠标单击
              • click()
            • 鼠标进入
              • mouseenter()
            • 鼠标离开
              • mouseleave()
    • ECMAScript
      • 语法
      • 宿主对象
      • 原型链继承
      • 上下文环境
      • 作用域闭包
      • 正则表达式
      • 严格模式
  • 软知识
    • 设计模式
      • 5大设计原则
      • 常用设计模式
    • 面向对象
      • 封装
      • 继承
      • 多台
    • 算法
    • 数据结构
    • ……
• 网站建设流程
  • 获得需求
    • 需求来源
      • 客户
        • 威客任务网站
      • 领导
      • 同事
    • 需求类型
      • 文档
      • 图像素材
      • 语言沟通
  • 分析需求
    • 目标
      • 了解客户真实的想法
      • 做给谁看？他想看什么？
      • 学会总结别人的话，多聊对方感兴趣的话题
    • 形成需求分析文档
      • 网站建设目标
      • 网站的站点构成
      • 网站的功能模块构成
      • 网站技术解决方案
      • 网站的建设周期
      • 网站整体报价
        • 按模块报价
        • 日薪X项目制作天数X（2-5倍）
        • 提前了解对方的底价
      • 网站运营与维护
  • 域名注册
    • 域名后缀的选择
      • .com
      • .com.cn
      • .cn
      • .cc
      • 适用于商业公司
      • .net
      • .net.cn
      • 适用于服务机构或个人
      • .org
      • .gov
      • .edu
    • 域名名称的选择
      • 中文汉语拼音
        • 单拼
        • 双拼
        • 三拼
        • 四拼
        • 汉语拼音结合数字
      • 英文
        • 英文字母的组合
        • 英文单词的组合
        • 英文结合数字
    • 域名注册流程
      • 先访问www.adobeedu.com
      • 点击购买虚拟主机的广告，在打开的页面注册
      • 在网站中选择域名注册的栏目
      • 先选择一种域名后缀，优先选择.com
      • 搜索域名名称是否已经被别人注册
      • 如果没有被别人注册，就可以购买
      • 域名是按年付费
      • 域名名称选择的标准
        • 简短
        • 好记
        • 符合网站内容
  • 虚拟主机（服务器）
    • 主机参数
      • 空间容量
        • 主机存储容量
        • 容量越高，价格越高
      • 操作系统
        • window
        • Linux
    • 虚拟主机购买流程
      • 先访问www.adobeedu.com
      • 点击购买虚拟主机的广告，在打开的页面注册
      • 在网站中选择虚拟主机的栏目
      • 选择0元或1元主机购买
      • 国内虚拟主机需要备案，备案时间为一个月左右
  • 网站类型
    • 企业网站
      • 风格
        • 传统风格
        • 流行风格
      • 特点
        • 以企业的形象宣传和产品展示为主
        • 网站的内容较少
        • 流行采用响应式或H5技术来实现
    • 电子商务网站
      • 类型
        • 大型电商网站
        • 淘宝天猫网站
      • 特点
        • 以产品销售为主要目的
        • 网站的内容较多，产品多以图片进行展示
    • 门户网站
      • 代表网站
        • 网易
        • 新浪
        • 腾讯
        • 阿里巴巴
      • 特点
        • 每个行业都会有其代表性的行业门户网站
        • 搭建平台，吸引企业入驻
        • 网站的内容多，字多图少，以传递信息为主
  • WEB界面设计规范
    • 基本概念
      • 网页的内容宽度和高度
        • 像素（px）
          • 大型网站，数据量多
        • 百分比（%）
          • 小型网站、个人网站、宣传网站
      • 屏幕分辨率
      • 浏览器垂直滚动条的宽度
    • 三种情况
      • 网页的内容宽度“小于”屏幕分辨率的宽度
      • 网页的内容宽度“等于”屏幕分辨率的宽度
      • 允许
      • 网页的内容宽度“大于”屏幕分辨率的宽度
        • 不允许
    • 常用网页尺寸
      • 宽度
        • 网页安全宽度计算公式
          • 屏幕分辨率的宽度-浏览器垂直滚动条的宽度（20px）
        • 常用宽度值
          • 1024X768
            • 1000px
            • ...以10px为单位递减...
            • 950px
          • 1366X768
            • 1300px
            • 1200px
            • ...以100px为单位递减...
            • 1000px
            • ...以10px为单位递减...
            • 950px
          • 1440X900
            • 1400px
            • ...以100px为单位递减...
            • 1000px
            • ...以10px为单位递减...
            • 950px
          • 1920X1080
            • 1900px
            • ...以100px为单位递减...
            • 1000px
            • ...以10px为单位递减...
            • 950px
      • 高度
        • 根据网页的内容多少自动取值
    • 网页文字规范
      • 常用字体
        • 宋体
        • 微软雅黑
        • 多用于正文
        • 特殊字体
          • logo
          • 按钮
          • 广告
      • 常用字号
        • 12px
        • 14px
        • 16px
        • 18px
      • 文字边缘设置
        • 宋体
          • 12px
          • 14px
          • 16px
          • 边缘设置为“无”
          • 大于16px
        • 微软雅黑及其他字体
      • 行高设置
        • 在ps里，用行高的数值减去字号，就等于段落的行高
        • 段落中的每一行的行高是在文字的上下两边
  • WEB界面设计流程
    • 分析
      • 网格构成
      • 色彩构成
        • 主色调
          • logo
          • 按钮
          • 导航
          • 重要文字
        • 灰度
          • 正文
          • 背景
          • 描边
        • 简单配色
        • 辅助色
        • 对比色
        • 计算H值的差
      • 功能模块构成
      • 行业背景
        • 竞品搜索及分析
          • 在搜索引擎中搜索“行业名称”空格“公司（企业）”空格“地区”
          • 改版网站的类型
            • 不知名的小公司
            • 设计效果不好的公司
        • 行业背景的选择
          • 跟自己所学专业相关的行业
          • 跟自己工作经验相关的行业
          • 搜索自己最熟悉最了解的行业
          • 查找当前最火最热门的行业
          • 抓住当前的热点新闻、事件
    • 制作
      • 新建画布
        • 测量原图的内容宽度
        • 网页的内容宽度+留白
        • 留白不小于100px
        • 高度先给一个大概数值，后续可以调整
      • 确定网页内容宽度
        • 矢量矩形工具
        • 参考线
      • 搭建页面结构
        • 矢量的矩形工具
        • 根据网页的模块来依次搭建结构
        • 每一个模块在PS中是一个图层组
        • 图层组一定要命名，并且有意义
      • 添加效果
        • 渐变
        • 高光
        • 描边
        • 渐隐
      • 添加内容
        • 文字
        • 图像
    • 导出
      • 切片
        • 把网页中所有需要用到的图片素材单独保存下来
        • 代码实现不了的部分
      • 优化
        • 目的
          • 选择恰当的图像格式
            • JPG
            • gif
            • PNG
          • 针对图像格式进行优化设置
          • 图像即清晰同时文件量小
        • 方法
          • 使用“存储为web所用格式”命令
          • GIF
            • 特点
              • 最大颜色数量只有256种
              • 支持背景透明
              • 支持动画
            • 适用场合
              • 矢量图、线框图
              • logo、图标、按钮
              • 一切颜色较少的图片
            • 优化方法
              • 设置图像最大颜色数量（2-256）
              • 颜色越多，文件量越大
              • 颜色越少，文件量越小
          • JPG
            • 特点
              • 支持真彩色2的24次方
              • 不支持背景透明，不支持动画
            • 适用场合
              • 照片、渐变色、广告、产品图
              • 一切颜色较多的情况
            • 优化方法
              • 设置“品质”值（0-100）
              • 品质越高，图像越清晰，文件量越大
              • 品质越低，图像越模糊，文件量越小
          • PNG
            • 特点
              • 支持真彩色2的24次方
              • 支持背景透明
              • 支持动画
            • 适用场合
              • 图标、产品图
              • 移动端
            • 优化方法
              • png-8
              • png-24
          • 图像优化工具
            • 图像优化软件
            • 图像优化网站
      • 导出
  • WEB前端设计
    • UI设计
      • Photoshop
        • 矢量图形绘制
          • 基本形状
            • 矩形
            • 圆角矩形
            • 椭圆形
            • 多边形
            • 星形
          • 复杂形状
            • 使用基本图形进行组合、排列、运算
            • 编辑路径上的锚点
              • 添加锚点
              • 删除锚点
              • 移动锚点
              • 转换锚点的状态
              • 调节曲线点的控制手柄
            • 钢笔工具
          • 比例关系
            • 百分比（%）
            • 宽高比
              • 使用矩形选框工具测量
              • 用宽度/高度或者是高度/宽度
              • 比例关系确定后，像素可以任意取值
            • 常用比例关系
              • 黄金分割
                • 1：1：2：3：5：8：13
              • 根号2
          • 路径运算
            • 先运算
              • 选中需要运算的路径
              • 选择矢量图形绘制工具
              • 选择一个路径运算命令
                • 合并
                • 减去
                • 交叉
                • 排除
              • 绘制路径
            • 后运算
              • 绘制路径
              • 合并多个路径图层
              • 选择一个路径运算命令
                • 合并
                • 减去
                • 交叉
                • 排除
        • 基本操作
          • 视图操作
            • 按住Alt键旋转鼠标滚轮
            • Ctrl+1
            • Ctrl+0
          • 对齐操作
            • 移动工具（V）
              • 对齐到画布
                • 在图层面板中选中需要对齐的图层
                • Ctrl+A
                • 在移动工具（V）的属性栏中选择相应的对齐按钮
              • 固定（选区）对齐
                • 获得固定对象的选区
                • 在移动工具（V）的属性栏中选择相应的对齐按钮
            • 路径选择工具（A）
              • 对齐到画布
                • 在画布中选中需要对齐的路径
                • 在路径选择工具（A）的属性中选择“对齐到画布”
                • 对齐
          • 复制操作
            • 拖拽图层到新建图层按钮上
              • 复制所有的路径
            • Ctrl+J
              • 针对矢量图形，只复制选中的路径
            • Ctrl+Shift+J
            • 使用移动工具（V），按住Alt键拖拽
            • 复制到新的图层
              • 颜色、效果、滤镜都不同
              • 不能进行路径运算
            • 使用路径选择工具（A），按住Alt键拖拽
            • 使用路径选择工具（A），Ctrl+C复制；Ctrl+V粘贴
            • 复制到相同图层
              • 颜色、效果、滤镜都一样
              • 可以进行路径运算
          • 变换操作
            • 数值变换
              • XY坐标
              • 宽度高度
              • 旋转角度
              • 倾斜角度
            • 高级变换
              • Ctrl+Shift+T
              • Ctrl+Shift+Alt+T
                • 对多个图层及图层组无效
                • 解决方法
                  • Ctrl+J
                  • Ctrl+Shift+T
        • 设计技巧
          • 网页标题栏小图标
            • 网页标题栏小图标最好是正方形的
            • 使用iconworkshop软件转换为ico格式
            • 网页标题栏小图标只支持16px的尺寸
            • 在网页的head标签中添加
          • 直角变圆角
            • 圆角是两个锚点，直角只有一个锚点
            • 在直角点的两边，等距离添加两个新的锚点
            • 把原来的直角点删除
            • 调节新的锚点的控制手柄，缩到原来距离的一半
          • 图像渐隐效果
            • 图像由不透明过渡到透明的效果
            • 多用于制作光影效果
            • 制作技巧
              • 单一矢量图形使用渐变色填充，调整渐变色的透明度色标
              • 图层蒙版
                • 给蒙版添加黑白色渐变来实现渐隐效果
                • 适用于任何情况
          • 调整图像的颜色
            • 图像菜单下的调整命令
            • 图层面板里的调整图层
            • 混合模式
              • 正片叠底
              • 滤色
          • 描边效果
            • 图层样式
              • 描边
              • 内发光
              • 外发光
              • 同时制作四个边
              • 内阴影
              • 投影
              • 制作一个或者是相邻的两个边
            • 矢量图形的描边设置
            • 双描边
              • 添加两个描边
              • 低版本软件
                • 描边+内发光
                • 描边+外发光
          • 色彩搭配技巧
            • 色彩原理
              • 色彩分类
                • 有彩色
                  • 色相
                  • 饱和度
                  • 亮度
                • 无彩色
                  • 亮度
              • 色彩模式
                • RGB
                  • R：红色
                  • G：绿色
                  • B：蓝色
                  • R+G：黄色
                  • R+B：洋红色
                  • G+B：青色
                  • R+G+B
                    • 黑色
                    • 白色
                • CMYK
                  • C：青色
                  • M：洋红色
                  • Y：黄色
                  • K：黑色
                  • C+M：蓝色
                  • C+Y：绿色
                  • M+Y：红色
                  • C+M+Y+K
                  • K给最大值为黑色
                • HSB
                  • H：色相
                    • 红色
                    • 橙色
                    • 黄色
                    • 绿色
                    • 青色
                    • 蓝色
                    • 紫色
                    • 洋红色
                  • S：饱和度
                  • B：亮度
                  • 色调
                    • 高亮高饱
                    • 高亮中饱
                    • 高亮低饱
                    • 中亮高饱
                    • 中亮中饱
                    • 中亮低饱
                    • 低亮高饱
                    • 低亮中饱
                    • 低亮低饱
                    • 黑色
                    • 白色
                • 灰度
                • 索引
            • 配色技巧
              • 同色相搭配
                • 色相相同，色调不同
                • 计算S值和B值的差
              • 同色调搭配
                • 色调相同，色相不同
                • 计算H值的差
                  • 大的H值减小的H值
                  • 360减去大的H值加上小的H值
              • 从图像中获得颜色搭配方案
              • 灰度的色彩倾向
                • 给灰度添加色相（H）和较低的饱和度（S）
                • 灰度会具有某种颜色的色彩倾向
            • 更改位图的颜色
              • 单色变单色
                • 方法1
                  • 使用“色相饱和度明度”命令调整颜色
                  • 计算当前颜色和目标颜色H值的差
                  • 根据得到的差值，在窗口的色相对话框里输入相应的数值
                  • 当前颜色H值大于目标颜色H值
                  • 当前颜色H小于目标颜色H值
                  • 黑色白色不变色
                • 方法2
                  • 使用“色相饱和度明度”命令调整颜色
                  • 在窗口中选择“着色”命令
                  • 在色相中输入目标颜色色相值即可
                  • 调整饱和度和亮度
                • 方法3
                  • 首先去色
                  • 调整亮度对比度命令
                  • 把图像变为白底黑色或者黑底白色
                  • 添加“颜色叠加”的图层样式
                  • 白底黑色
                  • 黑底白色
              • 渐变色变单色
                • 方法2
                • 方法3
            • 亮度值与透明度值的关系
              • 白底黑色
                • 亮度值=100-透明度值
                • 透明度值=100-亮度值
              • 黑底白色
                • 亮度值=透明度值
          • GIF动画制作
            • 动画原理
              • 在短时间内播放内容连续的图像
            • 动画类型
              • GIF动画
              • Flash动画
              • 视频
              • H5动画
            • 动画制作软件
              • Photoshop
              • fireworks
              • 手机端GIF动画制作APP
            • 动画制作技巧
              • 打开为动画
                • 事先准备好动画素材
                • 在fw软件中打开，并选择“打开为动画”命令
                • 所有的图片素材要按照动画的顺序进行编号
              • 逐状态（帧frame）动画
                • 根据动画效果，一个状态一个状态制作
                • 每个状态里的内容有区别
          • 户外大屏幕设计尺寸
            • 根据屏幕的分辨率来创建画布
            • 如果希望图像更清晰，画布的尺寸可以为分辨率宽高X2
          • 网格布局
            • 网格的构成
              • 每一个网格都是一个矩形
              • 画布可以由多个面积相等的网格来构成
              • 每个网格有自己的宽高比
              • 网格属性
                • 宽度和高度
                • 边框粗细
                • 背景颜色
                • 背景图片
                • 内边距
                • 外边距
                  • 行高
                  • 列宽
            • 网格分析方法
              • 从上到下
              • 从左到右
              • 从外到内
          • WEB界面设计风格
            • 传统风格
              • 大量使用效果
                • 渐变色
                • 高光、阴影
                • 立体效果
              • 页面高度在一屏左右
              • 字多图少，设计性不强
              • 网格结构明显
              • 页面结构紧凑，留白较少
              • 宋体使用较多
            • 流行风格
              • 页面高度2-3屏
              • 图多字少，体现设计性
              • 页面结构多采用大留白，空间感强
              • 不使用任何效果，以纯色为主，采用扁平化的设计风格
              • 微软雅黑使用较多
          • 图像素材的选择
            • 一定要选择尺寸大的高清素材
            • 学会找到隐藏在素材中的“箭头”（根据方向来排版）
            • 注重图像的“叙事（故事）”性
          • 网页贴图
            • 统一模特或产品的比例
              • 模特全身照片
              • 模特半身照片
            • 图片一定要等比例缩放
            • 位图只能缩小不能放大
            • 把位图转换为智能对象，可以在100%以内多次缩放
            • 所有图片的光影方向应该一致
            • 所有图片的色调要一致
            • 所有图片的背景要一致
              • 抠图的纯色背景
              • 带场景的背景
            • 所有的产品都有特定的展示方式及展示角度
          • 网页改版
            • 可以改
              • 辅助色、对比色、灰度
              • 版式结构
              • 图像素材
            • 不能改
              • logo
              • 主色调
              • 内容
                • 文字
                • 图片
    • 创建WEB站点
      • WEB站点定义
        • WEB站点就是本地硬盘的一个文件夹
        • 在这个文件夹中保存当前网站中所有的文档
      • 建立WEB站点的方法
        • 文件夹不能建立在桌面或C盘
        • 文件夹及文件命名必须为英文小写有意义
        • 网站的首页命名必须为“index”
          • 出现在站点根目录
          • 输入域名后打开的第一个页面
        • 根据网站的导航来建立二级、三级甚至四级栏目
          • 每一个栏目就是一个文件夹
          • 每一个栏目页有自己的首页
        • 根据文件的类型来建立相应的文件夹
          • 图片
          • 脚本
          • 多媒体
          • 下载
      • 创建站点地图
        • 把网站结构以图像的方式展示出来
        • 可以插入到网站策划方案里
    • WEB标准化布局
      • HTML
      • CSS样式
    • WEB前端交互
      • JavaScript
      • jQuery
  • WEB后台开发
    • ASP
      • 小
    • PHP
      • 中
    • JSP
      • 大
• 产品经理如何提高设计修为
  • 开篇介绍
    • 产品开 发流程 （外包）
      • 1.签订合同
        • 商务代表
      • 2.项目启动
        • 项目经理
      • 3.产品原型
        • 产品经理
          • 有的公司项目 经理与产品经理 兼任
          • 需求分析
            • 甲方需求
            • 甲方产品
            • 甲方业务
          • 需求分析形成需求文档 与甲方沟通修改
        • 产品经理 过渡岗位
          • 交互设计师
          • UE/UX 用户体验设计师
          • UI设计师
      • 4.视觉设计
        • UI设计师
          • 规范制定
          • 标注切图
        • 做好1-3个页面 需要评估修改
      • 5.开发设计
        • Web前端工程师
        • iOS工程师
        • Android工程师
        • 后端工程师
      • 6.验收上线
    • 我们需要学习 到的技能包括
      • 沟通能力
        • 公司老板
        • 部门领导
        • 客户访谈
          • 个人品位
          • 真实需求
          • 提出 问题
        • 开发人员
      • 分析能力
        • 业务层面
        • 用户层面
      • 原型图 制作能 力包括 交互
        • 围绕需求文档 PRD
        • Axure
        • MockingBot 墨刀
        • 主要
        • 苹果系统
          • flinto Sketch插件
          • Principle
        • 交互软件太多了...
      • 设计能力
        • PS
          • 最多
        • AI
        • Sketch
        • XD
          • Adobe
          • 抄袭Sketch与Flinto
          • 没有更新
        • 标注
          • PXcook 像素大厨
            • 最新版本 加了能够 显示代码
          • Mark Man
            • 淘汰了
        • 切图
          • Cutter Man
          • PXcook
  • 图标设计
    • 功能图标
      • 规范
        • 不允许出现小数点
        • 不允许出现奇数
        • 需要使用偶数
      • 偶数2 4 6 8 10...
      • 手机端具有 1倍2倍3倍 关系
      • 1倍
        • 2的倍数
      • 2倍
        • 4的倍数
      • 3倍
        • 6的倍数
      • PS软件
        • 运算
          • 加、减、交集
          • 选择形状后可以运算 形状工具下 cmd(ctrl)+鼠标单击为 选择形状或黑A
          • 加法运算
            • 快捷键为shift 为正形相加
            • 松开shift 为自由形
          • 减法运算
            • 快捷键为alt 为自由形相减
            • 加shift为 正形相减
          • 与形状相交 （交集）
            • 快捷键为alt+shift 为正形交集
            • 松开alt与shift为 自由形交集
        • 形状复制
          • 黑A选择形状 alt拖动
            • 位置不同
          • 黑A选择形状 ctrl+c，ctrl+v
            • 位置相同
          • 形状工具下 选择形状（ctrl） 按住ctrl+alt为 拖动为复制
            • 位置不同
        • 对齐
          • 形状与形状 对齐（形状工具 属性栏）
          • 基于选取对齐 通过移动工具（v） 属性栏对齐
          • 智能参考线
        • 圆角
          • 圆角矩形
            • 最大化圆角
            • 每个角度都可以 单独修改数值 建议圆角矩形单击 新建尺寸
          • 手动圆角
            • 先斩后补 斩补法
            • 为了能够路径 与路径对齐请 通过首选项里 工具-将矢量工具 与变化和像素 网格对齐复选框 去除
          • 圆角插件
            • 脚本文件 开篇介绍-软件 221
            • 针对直角边 可行曲线不 可行 单独一个圆 角需要添加 ,号（英文状态）
          • AI里2015版本 以上有圆角功能
        • 路径
          • 闭合
            • 填充
          • 开放
            • 不能够与填充 合并图层
            • 白A可以删除 锚点或路径
            • 属性栏具有 描边属性 向内向外居中 还可以修改 端点为圆头
            • 可以通过钢笔 工具添加锚点 （该锚点为平滑 点按alt单击锚点 可以将平滑点 转拐角点） 注：需要通过 白A移动锚点 到网格点上避免 虚边出现
        • 当面对一个图标 可以运用填充与 描边混合使用提 高工作效率
      • AI软件
        • 绘制图标 设置方法
          • 1.面板组合
            • 路径查找器
            • 对齐
            • 变换
          • 2.首选项
            • 单位px
            • 参考线与网格 10 10px
            • 键盘增量 1px
          • 3.视图菜单
            • 像素预览
            • 对齐点
            • 对齐网格
            • 对齐像素
            • 智能参考线
        • 与PS交融
          • 通过AI绘制 图标需要将 描边转为填 充（扩展） 全选ctrl+c ctrl+v到PS 里，选择形状 图层，当遇见 半像素通过 工具复选框 白A选择锚点 小键盘位移
        • 优点
          • 圆角
          • 运算
          • SVG
            • 文件导出为
            • 字体文件工程师 可以在代码里控制 图标的大小颜色 描边粗细，减少 产品(APP)上传到 商店的文件大小
      • 阿里巴巴 矢量图标库
        • SVG
          • 可以形成代码把 图标变成字体 不用切图但根据 公司工程师要求 来
    • 主题图标 针对安卓
      • 1.造型
        • 形状工具
      • 2.色彩
        • 拾色器
        • 观察颜色
          • 色相H
          • 饱和度S （纯度）
          • 明度B
          • 色彩三要素
          • 方法
            • 1.确定色相
              • 参考 红黄蓝 橙绿紫
              • 根据生活 物品命名 如紫罗兰 柠檬黄 玫瑰红...
              • 黄绿色 黄橙色=橘色
            • 2.确定饱和度
              • 观察物体颜色 是否含有白色 生活中称为粉色
            • 3.确定明度
              • 观察物体颜色 是否很有黑色 生活中称为深色
            • 4.确定透明度
              • 图层的透明度
        • 配色
          • 明暗关系
            • 颜色同色相
              • 好比绘画 初学者 色彩不够 丰富
            • 颜色用色系
              • 建议使用 色彩比较 丰富
          • 色彩对比
            • 任何颜色可以 与白色黑色对比
            • 对比比较强 （打架颜色）
              • 互补色 色相环距离 180度
              • 原色与间色
              • 红与绿
              • 黄与紫
              • 橙与蓝
              • 色相换超过 90度都为对比色
            • 面积有关
          • 颜色通过对比手法 解决剩下考虑页面 当中的明暗
      • 3.明暗
        • 图层样式
          • 渐变
            • 三大面
            • 暗面 灰面 亮面
            • 方法：同色系 如绿色上为黄绿色 下为蓝绿色
          • 内阴影
            • 高光
            • 反光
            • 在对比不是 特别强烈的 情况下高光 比反光强
          • 投影
            • 暗面颜色 多为蓝紫色 设计中黑夜的 感觉
            • 第一种：黑色柔光 不透明度
            • 第二种：吸管吸背景色 改变明度与纯度
      • 4.质感
        • 图层样式 滤镜菜单
      • 图层样式
        • 作用于一边
          • 影
            • 投影
              • 普通投影
                • 不够自然
              • 等高线
                • 比较柔和
              • 多层投影
                • 可以做反光
              • 颜色
                • 1.选择底色 加重 注意不要出 现脏色
                • 2.黑色使用 叠加的混合 模式
            • 内阴影
              • 多用于变现 高光与反光
                • 高光
                  • 90
                • 反光
                  • -90
                • 一般物体高光 比反光亮玻璃 材质除外
                • 多用于表现 除原型物体 之外
            • 外浮
              • 渐变叠加+双内阴影+投影
              • 渐变：上亮下暗
              • 投影：自然的效果
            • 内嵌
              • 渐变叠加+内阴影+投影
              • 渐变：上暗下亮
              • 内阴影：长短与深度 相关，颜色比上面渐变 深
              • 投影比较短 表现为高光
        • 作用于两边
          • 斜面浮雕
            • 浮雕效果
        • 作用于四周
          • 描边
            • 渐变 可以表现出 渐变的内嵌
            • 描渐变的效果 转智能对象后 可以再次加内嵌 效果
          • 光
            • 内发光
              • 可以表现面 光明暗关系 内阴影也可 以，需要只 修改大小方可
              • 暗
                • 物体的面光
              • 亮
                • 凹陷的视觉表现
            • 外发光
              • 模拟物体的 自发光
              • 可以表现出 面光的投影 但不要给的 特别大
        • 作用于全局
          • 渐变叠加
            • 物体的明暗 关系
            • 其他物体：可以运用 三色或四色来变现 物体的高光与反光
            • 球体：三色渐变 可以添加高光
          • 图案叠加
          • 颜色叠加
    • 启动图标 （APP）
  • 产品设计
    • 将来职场中 能够遇见的 设计种类
      • 物料设计
        • 平面印刷
      • 网页设计
        • 专题页
        • H5页面
          • 做图方法跟 网页一样但 需要结合APP 的用户体验 好比自适应 网页
          • 单独一张图
          • 易企秀好比PPT
          • H5游戏
      • APP
        • 小程序
          • web
        • 普通基于 安卓苹果
        • 规范一样
    • 开发流程
      • 产品经理
        • 需求文档 PRD
        • 框架图
          • 整体观察该 款APP主要 功能
      • 交互设计师
        • 原型图 （草图）
          • 功能划分
          • 功能摆放
          • 逻辑关系
          • 用户体验
          • 做全了
          • 不需要按照尺寸 进行设计
      • UI/UE设计师 重点
        • 效果图
        • 只做不同版式
        • 尺寸规范一定做好 提供给工程师规范 为了以后再次优化 和PK有话语权
      • 开发工程师
        • 还原度超过90% 已经不错了
    • 产品设计 考虑什么 设计角度？
      • Who 战略层 目标用户 是谁？
        • 年龄/爱好/收入
        • 年龄层次 划分
          • 童年0-6岁
          • 少年7-17岁
          • 青年18-40岁
          • 中年41-65岁
          • 老年60岁以上
        • 例微信APP
          • 用户分析
            • 用户年龄
              • 18-25岁45.4%
              • 26-36岁40.8%
              • 36-50岁9.5%
              • 其他
                • 18岁以下
                • 60以上
                • 两者4.3%
              • 50岁以下占97%
              • 主要用户群体18-35岁 86.2%
              • 男女比例
                • 1.8：1
                  • 男性约占64.3%
                  • 女性约占35.7%
            • 赢利点
              • 表情
                • 38.3%用户 使用免费表情
                • 5.2%用户为 表情付费
                • 56.5%用户 不使用微信表情
              • 平台
                • 转账
                • 公众号
                • 手机充值
                • 理财通
                • Q币
                • 生活缴费
                • 城市服务
                • 信用卡还款
                • 腾讯公益
                • 游戏
                • ...
              • 第三方
                • 摩拜单车
                • 滴滴出行
                • 京东优选
                • 美团外卖
                • 58到家
                • 酒店（艺龙）
                • 火车票机票
                • 电影演出赛事
                • 吃喝玩乐
                • 美丽说
                • 彩票
              • 发现
                • 游戏
                • 京东购物
                • 小程序
              • 朋友圈
                • 广告
              • 以上所有 支出流水
                • 110亿元
                • 娱乐占53.6%
                • 公众号占20%
                • 购物13.2%
                • 出行占11.2%
                • 餐饮占2%
      • Why 范围层 确定做什么？
        • 制定软件的 三大功能
          • 核心功能
            • 例微信
              • 即时聊天 -主页
              • 找谁聊天 -通讯录
              • 主页
          • 扩展功能
            • 例微信
              • 朋友圈
              • ...
          • 增值功能
            • 赢利点
        • 熟知用户弱点 解决用户痛点
          • 产品 功能
      • Whe 结构层 框架层 确定怎么做?
        • 1.交互方式-逻辑明确
          • 清晰的标签结构
          • 寓意明确的图标
          • 简单高效工作流
          • 友好语言产共鸣
          • 流程闭环要做好
        • 2.调研参考-能够实现
          • 竞品分析
        • 3.修改参考-符合需求
          • 模仿竞品
        • 4.完成逻辑-绘制原型
        • 产品最开始不需要 绘制交互动效 在提案需要制作交互 动效
        • 交互不等同与动效 动效仅为交互方式
      • How 表面层 如何完成
        • 产品效果图 PS
          • 1.启动图标
          • 2.启动页 loading 闪屏 引导页
          • 第三步
          • 3.主页
            • 第一步
          • 4.二级页面
          • 5登录注册
          • 第二步
        • 标注切图
          • 交付工程师
    • iPhone尺寸 规范
      • 手机分 辨率
        • 1倍 @1x
          • 1-3GS
          • 工程师
            • 320x480pt
          • 1:1 1pt=1px
          • 设计师
            • 320x480px
        • 2倍 @2x
          • 4/4s/5/5s/6/6s 7/8
          • 4/4s
            • 工程师
              • 320x480pt
            • 1:2 1pt=2px
            • 设计师
              • 640x960px
          • 5/5s
            • 工程师
              • 320x568pt
            • 1:2 1pt=2px
            • 设计师
              • 640x1136px
          • 6/6s 7/8
            • 工程师
              • 375x667pt
            • 1:2 1pt=2px
            • 设计师
              • 750x1334px
            • 放大版尺寸 就是5系列
        • 3倍 @3x
          • 6p/6sp/7p/8p
          • 标准版 设计版
            • 工程师
              • 414x736pt
            • 1:3 1pt=3x
            • 设计师
              • 1242x2208px
          • 放大版 工程师的 的尺寸与 6系列相同
            • 工程师
              • 375x667pt
            • 1:3 1pt=3x
            • 设计师
              • 1125x2001px
          • 对外宣传版 与安卓3倍 关系相同
            • 1125x2001px 换算乘0.96
              • 1080x1920px
            • 1242x2208px 换算除1.15 乘0.87
              • 1080x1920px
      • 工作当中制作 效果图会出现 的尺寸？
        • Sketch XD
          • iPhone
            • 375x667pt
              • 最多
            • 320x568pt
              • 其次
            • 414x736pt
              • 最少
        • PS
          • iPhone
            • 750x1334px
              • 最多
            • 640x1136px
              • 其次
            • 1242x2208px
              • 其次
            • 1080x1920px
              • 最少
              • 注：有些公司会 用1080x1920做图 为了能够适应苹果 与安卓两个系统， 但是需要功能能力 比较强
      • 2倍手机尺寸 详细规范
        • 使用原则： 工程师尺寸请除2 3倍关系请乘1.5
        • 状态栏 电池电量条
          • H40px
        • 导航栏 顶部操作栏
          • H88px
          • 导航文字
            • 40px
              • 使用少
            • 36px
              • 最多
            • 不要超过列表 高度的一半 例：列表为88px 一半44px
          • 导航图标
            • 不要超过 标题大小
            • 36px
              • 其次
            • 32px
              • 最多
          • 搜索栏
            • H56px
            • H60px
            • H64px
            • 最多
        • 标签栏 底部操作栏
          • H98px
          • 标签图标
            • 44x44px
              • 最多
            • 48x48px
              • 其次
          • 标签文字
            • 20px
              • 最多
            • 24px
              • 其次
          • 间距
            • 大多数都是以上面 为起点往下过度尺寸
            • 最小间距为12 依次往上增加 按4的倍数为 基准
            • 如微信：距分割线 12px 图标文字间距 16px
        • 页面所有 文本大小
          • 最大——最小 20 24 28 32 36
        • 页面
          • 文字
            • 可以与导航栏的 文本大小相同也 可以比导航栏文 本小一些
            • 标题
              • 36
                • 最少
              • 32
                • 最多
              • 28
                • 其次
            • 正文
              • 32
                • 最少
              • 28
                • 最多
              • 24
                • 其次
          • 列表
            • 不需要记住多行 文本列表高度， 可以根据内容计 算列表高度
            • 单行文本形成 列表高度保证 为最小点击范 围苹果里的88 px方可
            • 单行列表有时 为了美观可以 缩小一些
          • 分割线
            • 分割线在1倍 2倍3倍手机内 都为1px
            • 建议不占用 列表高度 PS表现用来两个投影 不建议用内阴影
        • 颜色
          • 主色
            • 状态栏与导航栏 为主色
          • 列表
            • 大多数为白色 可以降低一些 如B值为98 或偏其它色相
          • 背景色
            • 背景可以比 列表色深可 以为蓝灰或 黑白的灰
          • 分割线
            • 可以与背景色 相同，也可以 比背景色深
          • 标签栏
            • 可以为蓝灰 可以与背景 色相同，可 以比背景色 浅一些
          • 标签栏 图标颜色
            • 交互前
              • 灰色居多
            • 交互后
              • 一种为主色
              • 其他颜色
          • 文字颜色
            • 分出层次
            • 标题颜色基本为黑色 或调出带有蓝色相的 灰色
            • 正文有的用黑色 大部分为深灰色
          • 点缀色 辅助色
            • 同色系调色
            • 不同色系 对比色（冷暖对比）
            • 以上两种同色系 为丰富画面颜色 对比色为了让画面 产生和谐，以上 两种调色方法都 不会影响整体风格 因为面积小
          • 终极法则：找一个你认为 调色最好的页面进行临摹 颜色
        • 最小点击范围
          • 88px
          • 约为7-9mm
    • 色彩
      • 行业颜色仅仅是作为 参考，有些主色是依 照文案，产品属性来 进行颜色定位
      • 红色
        • 新闻类
        • 政府类
      • 橘红 橘黄 黄色
        • 美食类
        • 购物类
      • 玫红
        • 购物类
        • 自拍类
      • 蓝色
        • 社交类
        • 科技类
      • 绿色
        • 环保类
        • 安全类
        • 效率类
        • 健康类
        • 食品类
      • 紫色
        • 神秘类
        • 奢华类
      • APP灰色 使用方法
        • 背景色
          • B80以上
          • 蓝灰
        • 列表色
          • 白色
          • B98
        • 分割线
          • 比背景色深 一点
          • H60-70
        • 文本色
          • 标题
            • 黑色
            • H8-20
          • 正文
            • H40-60
    • 交互
      • Axure
        • 动态面板
          • 设置面板状态
        • 显示与隐藏
          • 显示
          • 右击形状设为 隐藏
        • 移动
          • 相对运动
            • 经过
              • A-B-C...
              • 不限制
            • 与单轴相关
              • x
                • 向右
                  • 正数
                • 向左
                  • 负数
              • y
                • 向上
                  • 负数
                • 向下
                  • 正数
            • 如果两个轴都添加 数值形状将斜向移动
          • 绝对运动
            • 到达
              • A-B
              • 一次
            • 与双轴相关
              • 基于坐标点
              • 如果只填充一个数值 将出现斜向移动
        • 旋转
        • 触发事件
          • 鼠标单击时
          • 鼠标移入移出时
          • 拖动时
          • 向左拖动结束时
          • 向右拖动结束时
        • 导出HTML文件
        • 发布到官网
          • 注册账号
          • 形成网址
          • 手机访问 保存桌面
          • 生成设置
            • 常规修改保存 路径建立文件 夹
            • 针对移动端 设备设置方法
              • 包含视口标签 宽度与高度 可以设置像素 device（设备） 保持设备的宽度 device-width device-height 初始1.0 允许用户缩放no 勾选禁止页面 垂直滚动 填写图标 iOS状态栏样式black
      • 墨刀
        • 官方视频观看
        • 可以裁切效果图 PNG图上传制作 交互效果，录制 屏幕放到PPT里
        • 刚刚注册可以 导出HTML文件
        • 生成二维码 扫描二维码 安装用浏览器 打开保存到 桌面
      • 其他
        • Principle
          • 苹果
        • Flinto
          • 苹果
        • AE
          • 不能点击 只能做动 画效果展示
      • 常用的交互 效果
        • 标签栏切换
        • 菜单
        • 轮播
        • 启动页与引导页 左右滑动屏幕
        • 侧滑
        • 上滑下滑
        • 跳转
    • APP开发 制作效果图 出现方式
      • 1.有些公司制作 iOS一套效果图 安卓工程师自己 适配
      • 2.有些公司iOS 制作完成后标注 成iOS工程师的pt 再标注一套安卓 工程师的DP SP 方可
      • 3.有些公司iOS 制作完成一套 效果图后，安卓 需要将iOS效果图 重新改成安卓尺寸
    • Android Phone
      • Ldpi 120ppi
        • 0.75x
        • 代表分辨率 240x320px
      • Mdpi 160ppi
        • 1x
        • 代表分辨率 320x480px
        • 1dp(sp)=1px
        • 启动图标48x48px
      • 淘汰
      • Hdpi 240ppi
        • 1.5x
        • 代表分辨率 480x800px
        • 1dp(sp)=1.5px
        • 启动图标72x72px
      • XHdpi 320ppi
        • 2x
        • 代表分辨率 720x1280px
        • 1dp(sp)=2px
        • 启动图标96px
        • 状态栏
          • 50px
        • 导航栏
          • 96px
          • 还可以就跟 iOS相同
        • 标签栏
          • 96px
            • 官方
          • 其他出现 频率比较 高
            • 88px
            • 98px
            • 100px
            • 108px
            • 建议使用
        • 图标字号与iOS相同
        • 字体
          • 中文
            • 谷歌思源
              • 谷歌
                • 各自版本
              • Adobe
                • 各自版本
            • 其他
              • 方正兰亭黑
              • 方正黑体简
              • 方正中等线
              • 冬青黑简体
          • 英文
            • Roboto
      • XXHdpi 480ppi
        • 3x
        • 启动图标
          • 144x144px
        • 代表分辨率 1080x1920px
      • XXXHdpi 640ppi
        • 4x
        • 启动图标
          • 192x192px
        • 代表分辨率 1440x2560px
    • 运用灰度模式 抠图
      • 1 图像大小 修改尺寸 720x50
      • 2 图像菜单 模式灰度
      • 3 解锁图层
      • 4 曲线修改 黑白对比
      • 5 选择菜单 载入选区
      • 6 反选选区 DEL两次
      • 7 拖动图层 到画布
    • 设计师交付 工程师文件
      • 1.原型图（全部）
        • 1）具有交互效果 的原型图开发方便
        • 2）具有逻辑关系 页面做简单的调转
        • 3）普通具有站点 地图的原型图
        • 注：建议选择Axure 或墨刀
        • 有特别的交互 效果可以选用 其他的交互软件 如AE、flinto、Principle
      • 2.效果图（不同不版式）
        • 页面效果图
        • 启动图标
          • 苹果
            • 个数比较多 通过图像大小 导出不同尺寸 现在有一个智能 对象的源文件 可以导出
            • 课件里的位置 为4211
          • 安卓
            • 一键导出所有 工程师需要的 图标位置为491
          • 制作方法
            • 基于位图
              • 1024x1024px
            • 基于矢量图
              • 建议100px以上
              • 方法：
                • 注：无论是苹果还是 安卓提供给工程师 的图标都为方形； 1.将100px以上 图标通过图像大小 非画布大小放大到 1024x1024px(勾选缩放 样式)，删除背景建立图层 组； 2.打开4211关闭图层 蒙版，打开1024图标的 智能对象，进入PSB文件 将图标连同文件组拖动过去 保存； 3.选择切片工具右击切片 可以修改命名，文件菜单 导出存储Web所用格式桌面 建立文件夹保存。
        • 启动页引导页
          • 苹果
            • 640x960px
            • 640x1136px
            • 750x1334px
            • 1242x2208px
            • 1125x2001px
          • 安卓
            • 480x800px
            • 720x1280px
            • 1080x1920px
            • 1440x2560px
          • 方法： 制作750x1334px为模板 750x1334px直接保存为 png
            • 750x1334
              • 图像大小等比例修改 640x1138px 通过画布大小 缩减高度为1136px
              • 结果640x1136px
            • 750x1334
              • 图像大小等比例修改 1125x2201px
            • 640x1136
              • 通过画布大小 缩减高度为960px 重新对版式进行 调节
              • 结果640x960px
            • 750x1334
              • 图像大小等比例修改 1242x2209px 画布大小去掉1px
            • 750x1334
              • 图像大小等比例修改 720x1281px 画布大小去掉1px
            • 720x1280
              • 图像大小等比例修改 1080x1920px
            • 720x1280
              • 图像大小等比例修改 1440x2560px
            • 720x1280
              • 图像大小等比例修改 480x853px 画布大小去掉53px
      • 3.标注
        • PX
        • PT
        • DP SP
        • MarkMan(PX) PXcook(标注切 图为一体)
          • 单位 可以 转换
        • 标注方法
          • 请使用pxcook最新 里面有智能标注与 代码提示
          • 智能标注可以 识别PSD Sketch 源文件，但是隐藏 图层不被显示， 在标注前请将 图标规范的那个 红颜色的矩形显示
          • 宽度比
          • 间距
            • 头像距 上下左右
            • 文字 标题与正文
            • 图片与图片
            • 安全距离
          • 文字
            • 字体
            • 字重
            • 大小
            • 颜色
            • 对齐
          • 颜色
            • 主色
            • 分割线
            • 列表
            • 辅助色点缀色
        • 标注颜色 上可以做 区分
          • 文字一种颜色
          • 宽高比一种颜色
          • 色彩为统一颜色
      • 4.切图
        • Cutterman
        • 注意事项：
          • 1 相同大小图标 可以一起切图 切红颜色的规 范大小，不是 视觉大小
          • 2 交互前与交互 后的图标需要 切两套
          • 3 询问工程师 图标需要PNG 还是SVG 大多数公司 需要提供PNG
        • 切图方法
          • 自动切
            • 相同图标可以 一键导出，需要 填写固定大小 勾选1倍2倍3倍 选择保存路径 点击导出图层
            • 优点： 速度比较快
            • 缺点： 有部分没有按照 2的倍数或4的倍数 制作图标将会出现 半像素
          • 手动切
            • 优点： 可以规避半像素
            • 缺点： 速度慢
            • 第一种方法： 图层右击导出为 2017版可以切图 但低版本没有此功能 左上角有倍数关系 需要修改画布大小为 规范尺寸
            • 第二种方法： 1.新建画布 为规范大小 尺寸； 2.通过图像 大小修改百分比 150%为3倍描边为3px 在百分百的情况下 修改图像大小为50%为1倍 描边为1px 如果以上出现半像素 请通过首选项工具 将矢量工具与变化和像素网格对齐 去除用白A位移路径方可
        • .9切图（安卓工程师）
          • 目的：安卓工程 在对带有圆角矩形 的形状进行拉伸的 情况下可以不失真的 处理方法
          • 自动
            • Cutterman
          • 手动
            • 1.将需要切图形状 在新建一个画布大小 与形状相同； 2.画布大小修改 画布尺寸上下左右 各留取1px； 3.绘制两个1px的矩形 放在上边居中对齐 左边垂直对齐； 在绘制两条矩形放到 下端与右端分别左右 上下各留取1px空隙
        • 命名
          • 471
          • 请加下横线
      • 制作效果图图标 红颜色的图标规范 大小矩形，在标注 效果图尺寸的情况 下请显示出来为了 能够在pxcook能够 被智能工具识别。 在切图时候可以 知道图标大小，辅助 切图（填充固定大小） 当图标为运算制作 请合并形状组件， 有用运算和描边制作 的开放路径请合成 组进行切图
    • flinto
      • fade in
        • 淡入
      • Push left
        • 向左推动
      • Pop Right
        • 从右向左弹出
      • Slide Up
        • 从下往上推出
      • Slide Down
        • 从上往下推出
      • Flip Left
        • 向左翻转
      • Flip Right
        • 向右翻转
    • Sketch
      • Sketch | 18N
        • 中文插件
      • 下载flinto需要 安装一个从sketch 发送到flinto的插件
      • Sketch Measure
        • 标注
      • Sketch size
        • 更改尺寸 页面需要去除小数点 启动页引导页比较实用
      • 针对墨刀
      • 针对pxcook
      • sketch与flinto破解版 需要更新mac系统 建议购买正版
      • sketch里做效果图 大多数以工程师 尺寸，也可以改为 设计师尺寸
    • principle
      • 中文破解版
      • 最新系统的 苹果电脑需要 系统偏好设置 安全性与隐私里的 任何来源勾选 再次安装就不会出现 软件坏死
      • 优点
        • 识别sketch 源文件没有pc版本
        • 能够很细微的 调节坐标 将来如果使用sketch 制作效果图致力做 交互设计师请研究 使用
      • flinto与principle都是 基于效果图制作交互 演示在手机端都有 对应的APP做演示效果图 都可以录制gif文件
  • 国内外站
    • UE-DESIGNS
      • 中心班级姓名
    • Hello MUI
    • ArtStation
    • 创意设计
    • 爱原型
    • 颜面
    • 品牌通
    • 优阁
    • 单向历
    • 威锋
    • Behance
    • Dribbbler
    • Pinterest
    • Axure Share
    • Mirror
    • Flinto
    • MockingBot
    • Principle
    • Student
      • 苹果手机与MAC 无线连接
    • 衣二三
    • 最美有物
  • 就业思考
    • 准备2年的作品量
    • 有工作经验
      • 做之前公司的 业务
      • 1年
        • 1个网站 5-8页面 布局书写
          • 2-3个版本
          • BANNER
          • 专题页
          • H5
        • 根据网页 去处理平面作品 物料
          • 3折页
          • 海报
          • DM
          • 易拉宝
          • 标志（字体）
          • VI
    • 无工作经验
      • 多做比赛
      • 多做威客网
    • 面对工作当中复杂问题简单化 面对面试题简单问题复杂化
    • 面试题
      • 给予你原型图1-2 让你制作效果图
      • 做6-10的PPT
      • PPT1 封面 xxxx项目方案展示 logo APP图标
      • PPT2 项目介绍(分析) 用户场景 用户画像 竞品分析
        • 软装
      • PPT3 图标创意
      • PPT4 原型图（一） 原型图（二） 原型图（三）
        • 更换版式
      • PPT5 效果图规范
      • PPT6——7 文字规范 色彩规范
      • PPT8 功能图标
      • PPT9 效果图（一） 效果图（二） 效果图（三）
      • PPT10 标注
      • PPT11 交互（AXURE 墨刀）
      • PPT12 总结
      • PPT13 谢谢
    • 面试三部曲
      • 面试前
        • 了解招聘 公司情况
          • 做什么的
          • 有什么产品
          • 竞争对收是谁
      • 面试中
        • 携带纸质版 建立，携带 作品集
          • 纸质版需要 与招聘网页 上的相同
          • 做到简历与 作品相同
        • 你所工作过的 公司情况
          • 公司在什么地方
          • 公司周边情况
          • 你之前公司的产品都 有哪些
          • 你之前公司的竞争 对手是谁
          • 公司主要靠什么赚钱
          • 公司有多少人
          • 你们部门有多少人
          • 你们老板或部门经理 叫什么名字
          • 你的工作重心
        • 工作流程
          • 你这个产品开发了 多长时间
            • 差不多4个月
          • 大公司
            • 产品经理 做交互
              • 需求文档
            • UI设计师
              • 原型图
              • 效果图
              • 标注
              • 切图
            • 开发
              • 单独一个部门
          • 小公司
            • 原型图
            • 效果图
            • 标注切图
            • 工程师
        • 设计方法
          • 设计规范
            • 适配原则
              • 所有手机尺寸
            • 尺寸规范
              • 基于几倍手机 制作效果图
            • 做图原则
              • 2
              • 4
              • 6
          • 设计修养
            • 你是如何看待设计
              • 产品角度
                • 好用
                  • 功能定位准确
                  • 流程比较简约
                • 好看
                  • 通过用户画像
                  • 年龄层次定位
                  • 确定产品风格
                • 爱用
                  • 作为设计师需要 追去的终极目标
              • 人固然是视觉动物 但只有一方面绝对不够
              • 好的设计都有目共睹
              • 在日常生活中不断 培养客户的品味
              • 面对用户多从 用户体验角度思考问题
            • 你是如何学习的
            • 工作之余你都做什么
            • 公司项目不是很紧张的 时候空余时间比较多 你多做什么
            • 针对公司的产品方向 做调研，不断提高自己 做设计的定位 不断的关注行业发展 有时间常去优秀的设计 网站学习其他设计师的 作品 业余时间关注好多线下 活动
            • 说说你的优点 与缺点
              • 先说缺点 在说优点
                • 面对设计项目 有时候不能够很好 把握设计风格
                • 在视觉表现上 还有待于提高
                • 针对产品在用研 方面把握的不是 很恰当
                • 优点
                  • 自认为学习能力 比较突出
                  • 能够在最短的时间 内融入团队
                  • 科班出身绘画 方面一直在坚持 能够很好的辅助设计
            • 你为什么会离职
              • 我很坦诚说任何人 都希望赚更多的钱 和在优秀的公司任职
              • 但是公司是部分大小的 主要是团队是否有凝聚力 团队的领导能够带领团队 人员积极努力发展，这样 对个人的发展是很有帮助的
            • 你对加班的看法
              • 首先我对加班是不认同的
              • 但是加班首先是团队 效率不高导致的 我们作为团队中的一员 要努力提高自己的业务水平 和团队协作能力 当项目周期比较紧张 我对加班义无反顾
            • 你期望的薪资
            • 你喜欢什么样的设计
              • 能够给客户带来 价值的都是好设计 但也不是一味的对 客户妥协，要不断的 培养客户的审美 才能够做出意想不到 的设计
            • 你认为设计软件重要 还是创意重要
              • 都重要
              • 创意
                • 符合客户要求
                • 站在客户角度 思考问题
                • 能够促进企业发展 为企业视觉2而服务
                • 需要善于观察生活 坚信设计源于生活 高于生活
                • 创意要从生活的 点滴积累
              • 软件
                • 好的软件能够 使得工作效率不断提高
                • 好的软件也有利于行业 发展，需要不断关注 行业发展，做行业的 践行者
            • 当你的设计想法 与你的同事或领导 起冲突的时候 你如何处理解决
              • 当团队已经统一思想 在给客户或领导汇报的 时候，出现不同的意见 我们需要私下沟通 所有团队人员共同承担 风向
              • 在项目脑暴阶段 可以疯狂的撕... 各抒己见，我认为 这时候很重要
            • 你对用户体验的理解
              • 好用 好看 爱用
              • 轻交互
              • 情感化
            • 网页端与APP端的区别
              • 交互方式不同
              • 页面版式不同
              • 开发方式不同
            • 交互设计师与视觉 设计师的区别
              • 交互设计师
                • 产品经理的助理
                • 详解了解产品需求
                • 以用户体验为中心 从完成需求为出发点
                • 能够很好的完成 交互原型图
              • 视觉视觉师
                • 从行业属性 行业风格 产品需求 竞品分析
                • 能够根据交互 原型图完成视觉 规范，制定视觉规范
                • 切图标注交付 工程师
              • 用户 体验
      • 面试后
        • 同意入职
          • 调研公司
          • 搜索竞品
          • 寻找素材
          • 为了工作 当中不被 KO 能够 活着
        • 杳无音讯
          • 继续努力
          • 好的工作还在后面
• 产品经理如何学习技术
  • 产品经理要不要学习技术
  • 产品经理学习技术的好处
  • 技术要学习到啥程度
  • 产品经理需要学习的技术有哪些
    • 前端
      • html
      • CSS
      • Javascript
    • 后端
      • PHP
      • JAVA
      • python
    • 数据库
      • MySQL
      • oracle
      • MongoDB
    • 常用的一些技术语言
      • cookie
      • session
      • 能够辨别用户是谁
      • API接口
      • SDK
      • AJAX
      • sql
        • 便于你读取数据
    • 移动开发
      • nativeapp
        • 周期为4-6周
      • webapp
        • 周期为1-2周
      • HybridAPP
        • 周期为3-4周
      • RN
        • 热更新，不需要发版
  • 如何学习技术
    • 先看培训视频
      • 照着自己敲一遍代码
    • 然后再看书