网站前端视觉交互设计流程SOP

网站前端视觉交互设计流程SOP，本文从交互、视觉、前端三个方面进行了设计流程的总结分析，希望对大家有用。

网站前端视觉交互设计流程SOP

• 交互
  • 需求
    • 产品经理 20-40w
  • 交互设计师 16-20w
• 视觉
  • GUI视觉设计师 10000-18000
• 前端
  • 网页制作（美工） 5000-8000 重点：区分每种语言的能力(语法符号)
    • HTML(结构)
      • 符号
        • 尖括号
          • 标签名用尖括号包含
        • 斜杠
          • 标签结束
        • 感叹号
          • 提示性的说明
        • 空格
          • 分隔属性
        • 等号
          • 给属性赋值
        • 引号
          • 包含值
      • 常用标签
        • 页面结构标签
          • 结构分析
            • 总结：父子级 兄弟（同胞）级 parent 父级 children 子级 siblings 同辈
        • <div></div> 容器
    • CSS(修饰)
      • 怎么使用css
        • 用html的style属性来书写CSS 例如:
        • 用<style></style> 例如： <style> CSS语法 </style>
          • 选择器的定义
            • 标签名
              • 例： div{CSS}
            • 类名
              • 例： .man{CSS}
              • 用html标签的class属性来调用类名
            • id名
              • 例： #yemei{CSS}
              • 用html标签的id属性来调用
            • 复合定义
              • 分组定义
                • 用逗号表示"和"
              • 辈份定义
                • 用空格表示"里"
            • 伪类定义
              • :hover
                • 鼠标经过
              • :active
                • 鼠标按下
          • 优先级
            • 标签父子关系
              • 通常子级会继承父级属性（不是所有属性都可以继承）
              • 子级优先
            • CSS选择器定义
              • id>类>标签
              • 同定义级别下后派生的优先级高
      • 符号
        • 冒号
          • 给属性赋值
        • 分号
          • 分隔属性
        • 空格
          • 多个值的分隔
      • 属性
        • 文本颜色
          • color:颜色
        • 文本对齐
          • text-align:水平方向值
        • 文本修饰
          • text-decoration:修饰名称
        • 字体大小
          • font-size:大小
        • 字体系列
          • font-family:字体名称
        • 字体样式
          • font-style:normal;font-style:italic;
        • 字体强调
          • font-weight:normal;font-weight:bold;
        • 边框
          • border:颜色 粗细 类型
        • 背景颜色
          • background-color:颜色
        • 背景图像
          • background-image:url("图片地址")
        • 外边界
          • margin
            • 默认布局级别
              • 兄弟（父子）间上下边界共用
            • 浮动布局级别
              • 兄弟间边界叠加的
        • 显示类型
          • display:inline 内联
          • display:block 块
        • 溢出(处理)
          • overflow:visible 显示
          • overflow:hidden 隐藏
            • 技巧1：处理子级浮动后父级没有高度的问题
            • 技巧2：默认布局级别父子间共用边界的问题
          • overflow:auto 自动
          • overflow:scroll 滚动
        • CSS3属性
          • 盒投影
            • box-shadow
      • 标准布局
        • 布局有三大布局级（排队列）
          • 上下安置
            • 默认级
              • 块，默认情况下有宽度，由直接父级决定
              • 块，默认情况下没有高度，由子级内容决定高度
          • 左右安置
            • 浮动级
              • float:left
              • float:right
              • float:none
              • clear:left
              • clear:right
              • clear:both
          • 层级安置
            • 定位级
              • position:fixed 固定
              • position:absolute 绝对 （可参考父级为定位的对象）
              • position:relative 相对 （既保留原位置又晋升为定位级）
              • z-index 层数
            • 坐标
              • left
              • top
              • right
              • bottom
      • 常见问题
        • 1、给body加最小宽度，可能会影响窗口缩放
          • 解决：删除固定宽度
        • 2、给模块加固定高度，可能会挤走其它的模块
          • 解决：删除固定高度，改为overflow：hidden，让模块内容撑开模块
          • 加浮动float
        • 3、制作隐藏菜单
          • div内部包含着dl，dl为隐藏的菜单列表，dl中包含着dd
        • 4、display和opacity会有冲突，在处理图片表面色块透明度时，必须要统一
        • 5、forwards：让动画停止在结束点
        • 6、网站的兼容问题，百分比在不同的服务器中的理解不一样
          • 改变为具体数字
      • 网页好坏分析
        • 专业角度
          • 版式
            • 条框多会表现太拘谨，不够大气
          • 色彩
            • 中国企业站常用红色、蓝色
          • 细节
            • 字体
              • 网页中必须是LCD和无，做图时不可做其它处理
            • 导航
              • 字不放在同一个图层，避免调整间距及颜色时困难
              • 首位摆好位置后，用对齐与分布
            • 三角形箭头
              • 5×9的比例较合适
        • 客户角度
          • 人类认知
          • 思维习惯
    • JAVASCRIPT(行为)
      • 编程语言
        • 点语法
          • 理解为"的"
        • 使用javascript
        • 编程基础
          • 变量
            • 声明变量
              • var 变量名 = 初始值
            • 数据类型
              • 数值型
              • 字符型
                • 字符被引号包含
              • 布尔值
                • true 是
                • false 否
                • 比较运算
                  • 大于 >
                  • 小于 <
                  • 等于 ==
          • 数组
            • 声明数组
              • var 数组名 = new Array();
          • 语句
            • 条件语句
              • if(){}else{} 如果(条件){ true成立执行 }否则{ false不成立执行 }
          • 函数
            • function 函数名(){}
          • 常用方法
            • prompt("初始提示","新值")
            • 定时方法
              • setInterval(变化,时间)
              • setTimeout(变化,时间)
      • jquery特效类库
        • 安装调用jquery.js文件
        • 独立语法
          • $(). $ 解释为文档 () 里面放的标签对象 . 理解为“的”
        • 常用方法
          • 选择器
            • :first
            • :last
            • :eq(索引)
            • :even
            • :odd
          • 事件
            • 鼠标单击
              • click()
            • 鼠标进入
              • mouseenter()
            • 鼠标离开
              • mouseleave()
            • 窗口改变
              • resize()
            • 滚动
              • scroll()
            • 表单焦点事件
              • focus()
            • 表单焦点离开事件
              • blur()
          • 效果
            • 显示/隐藏
              • show() hide()
            • 淡入/淡出
              • fadeIn() fadeOut()
            • 滑动
              • slideDown() slideUp()
            • 动画
              • animate()
          • 捕获，设置
            • text()
              • 文本
            • html()
            • val()
              • 变量值
            • scrollTop() 竖向滚动条的位置
            • scrollLeft()
              • 横向滚动条
          • 添加元素
            • append() 内部结尾插入内容
            • prepend() 内部开始插入内容
            • after() 外部结尾插入内容
            • before() 外部开始插入内容
          • 删除元素
            • remove()
              • 移除
            • empty()
              • 清空
          • 获取/设置类
            • addClass() 添加类
            • removeClass() 删除类
            • toggleClass() 切换类
            • css() 获得/设置属性
          • 遍历
            • parent()
              • 父集
            • children()
              • 子集
            • siblings()
              • 同胞
            • next()
              • 下一个
            • prev()
              • 之前
            • first()
              • 第一个
            • last()
              • 最后一个
            • eq()
              • 选择器选取带有指定 index 值的元素
            • length 数组个数属性
            • index() 同辈元素中的位置
            • $(元素组).index(元素)
        • 常见的交互（动效）效果
          • 菜单
            • 下拉菜单
            • 收缩菜单
            • 列表菜单
              • li主菜单，dd里面是子菜单
              • 重置标签
                • ul去除padding：0、list-style：none
                • li,dl,dd边界margin：0
          • 选项卡
          • 焦点广告
  • 前端工程师 12000-20000