UI设计师设计方法工作流程总结

UI设计师设计方法工作流程总结，包括图层样式、网址推荐、图标设计、界面设计和软件使用等等。

UI设计师设计方法工作流程总结

• 什么是UI设计？
  • User Interface(用户界面)的简称。
• 图层样式（command+ Q） （不仔细看看不到仔细看存在）
  • 渐变叠加调节
    • 同色调法
      • 1.先选基准色
      • 2.渐变条两端统一的颜色
      • 3.调节一端的明度和饱和度
    • 跨色调法
      • 尽量冷到冷 暖到暖
    • 拉丝效果
      • 渐变色为本体色
    • 高反真金属质感
      • 黑（深灰）-灰-白(浅灰)-灰-环境色（亮）-黑
  • 一面
    • 影
      • 投影
        • 普通
        • 等高线
          • 1.物理特点
          • 2.大小和距离都大于10的时候就用等高线
          • 3.反光投影
        • 反光投影
          • 1.复制主视觉
          • 2.将底部主视觉填充值条为0
          • 3.挖空投影（钩去掉）顶层主视觉85%-90%半透明
          • 4.给顶层主视觉添加亮色投影
      • 内阴影
  • 四周
    • 光
      • 内发光
      • 外发光
  • 两面
    • 斜面浮雕 （为了填补内阴影的不足）
  • 样式顺序
    • 1.复制主视觉
    • 2.调节底层主视觉填充值为0
    • 3.图层挖空投影 等高线 （投影颜色以底色框为主）
    • 4.添加顶层主视觉投影（小投影，亮色）
    • 5.给顶层主视觉添加内阴影
    • 6.给顶层主视觉添加斜面浮雕 （高光不透明度为0，阴影为深色底色）
    • 7.添加图标高光
  • 浮嵌效果
    • 内嵌
      • 1.本体色比环境色暗
      • 内阴影+投影
        • 上暗下亮
    • 外浮
      • 1.本体色比环境色亮
      • 内阴影+投影
        • 上亮下暗
  • 混合模式
    • 减色模式
      • 变暗——深色
        • 滤掉本体色中的白 每个命令阈值不同
    • 加色模式
      • 变亮——浅色
        • 滤掉本体色中的黑 每个命令中的阈值不同
    • 叠柔模式
      • 叠加——实色混合
        • 本体色与底色混合 （最终色介于本体色与底色之间
• 网址推荐
  • WWW.moxiu.com
    • 魔秀
  • 站酷
    • 找素材
    • 建圈子
  • 花瓣
    • 找灵感
      • CS
    • pinterest
  • dribbble
    • 求虐
    • 找方案
    • 找色彩编码
  • SDC
• 图标设计
  • 各种图标
    • 剪影图标（单形图标）
      • 有形单色
    • 扁平化图标
      • 有形多色
    • 2.5D图标
      • 有形多色有样式
    • 拟物化图标
      • 有形有色有样式有质感
    • 3D图标
      • 照片级质感
  • 造型法则
    • 原则
      • 1.标准图形
      • 2.偶数原则
      • 3.做U不做V
      • 4.尽量不引入新的形状和颜色
      • 5.同层运算
      • 6.选区对齐
    • 顺序
      • 1.先造型
      • 2.在填色
      • 3.加样式
    • 方法
      • 切割法
      • 堆叠法
  • 颜色的含义
• 界面设计
  • 交互
    • Axure RP
    • 腾讯马化腾：“假如微信不是腾讯的，当然我是说假如那么腾讯也抵挡不住”
    • 移动互联网的产品
      • 自由人的自由联合
      • 九大互联网
        • 安全性
        • 隐私性
        • 快捷性
        • 拓展性
    • 区别
      • QQ
      • 微信
        • 摇一摇
          • 情人杀手
          • 声音
        • 扫一扫
          • 二维码
          • 翻译
          • 书名
          • 街景
        • 附近的人
          • 陌生人交友
    • 如何使用软件
      • 使用前（5-10）
        • 1.这个软件你是如何得知的？
          • 朋友推荐
            • 功能好
            • 设计漂亮
            • 名人
            • 女神
            • 等等
          • 某处阅读
            • 书籍杂志
            • 某个网站
              • 为什么当初没下载但是现在下载了？
        • 2.通过它的图标思考它具备的功能？
        • 3.给软件一个初级的评价，并抱有一定的预期
      • 使用中
        • 1.软件的引导页和LOADING是否友好，是否能概括如那件的分类
        • 2.软件的注册登录是否快捷
          • 不快捷
        • 3.软件的功能位置是否合适，是否便于单手操作
          • 不便于
        • 4.软件图标使用，是否恰当，是否满足你对软件的审美要求
          • 没满足
        • 5.软件中是否有让你眼前一亮的效果，此款软件与你之前所见，有何相似之处，摘抄记录
      • 使用后
        • 第二次想起使用的时间
          • 粘性持久度
        • 思考，软件给你的生活带来了什么
          • 好处
          • 坏处
        • 给软件一个最终的评价，与你最初的评价相对比，思考是什么影响了你的判断
        • 看看网评，思考你们之间的异同
      • AXURE
        • 原型图分类
          • 低保真原型图
            • 只有框架和链接
              • 1.供团队讨论的初级框架
              • 2.给设计师添加效果
              • 3.给客户做初级展示
          • 中保真原型图
            • 有框架有动效
              • 1.给设计师
              • 2.给工程师
          • 高保真原型图
            • 有效果有动效
              • 1.面试
              • 2.竞标
              • 3.向上展示
        • 动态效果
          • 动态面板的使用
            • 1.拖放一个面板
            • 2.命名
            • 3.选择状态进入编辑面板
          • 移动效果
            • 相对
              • 始终移动固定的距离
            • 绝对
              • 面板的左上角移动到固定坐标即停止
          • 切屏效果
            • 1.想移动先选择
            • 2.选择后，找用例
            • 3.选择 移动面板 动效
          • 显示隐藏
            • 1.先转面板
            • 2.设置隐藏
          • banner切换
            • 1.先添加状态
            • 2.选择用例
            • 3.选择 设置面板状态为指定状态
          • 扇形展开
            • 1.移动效果
            • 2.面板状态
  • 产品
    • iOS
      • iOS8
        • iPhone5/5S
          • 640*1136PX
            • 三大要件
              • 电池电量条
                • 高度40px
              • 顶部操作条 （导航条）
                • 高度88px
                • 顶部大标题
                  • 36-40px
                • 顶部按钮
                  • 高度60px以内
              • 底部操作栏 （功能条）
                • 98px
                • 底部图标
                  • 60*60以内
                • 最小中文字号
                  • 20px
              • 输入框容器
                • 1.放置次要功能按钮
                • 2.包含输入框、地址栏、评论框、搜索框等
                • 3.高度88px
              • 细节把握
                • 安全距离
                  • 20px
                • 行间距
                  • 字号的1.2-1.5倍
                • 最小点击的区域
                  • 66-88px（Retina）
                  • 44*44px
                • 图片的比例关系
                  • 2：1
                    • iPhone 4s
                  • 4：3
                    • PAL
                    • 1024：768
                    • iPad
                  • 16：9/16：10
                    • 人体工程比例
                  • 1:1:2:3:5:8...
                    • 0.618
              • 字号
                • 最小字号18px（英文或数字）
                • 正文字号
                  • 24-28px
                • 正文摘要
                  • 22-26px
                • 正文标题
                  • 32-38px
                • 446
                • 不大于所在要件高度的一半 （有呼吸感）
              • 字体
                • 方正黑体简
                  • 所有字体
                • 方正中等线
                  • 小字部分
                • Helvetica
                • 推荐颜色
                  • 正文大标题（#323232）
                  • 正文字（#646464）
                  • 大背景
                    • #fafafa
                    • #f0f0f0
              • 最小点击的区域
                • 66-88px（retina）
                • 44*44px
    • Android
    • WindowsPhone
• 软件使用
  • PS的使用
    • 新建画布
      • command+N
    • 后退一步
      • command+Z
    • 混合选项
      • command+Q
    • 拷贝图层样式
      • command+Shift+C
    • 粘贴图层样式
      • command+Shift+V
    • 删除图层样式
      • command+Shift+X
    • 剪贴蒙版
      • Alt+鼠标左键 单击图层分割线（单独）
      • command/win+alt+g(集体)
    • 画笔调整
      • command+control+鼠标左键不松手（颜色）
      • Alt+control+鼠标左键不松手
        • 横滑直径
        • 竖滑软硬
  • MAC（麦金塔）
    • 盘符
      • NTFS
      • FAT32
        • 苹果
        • Windows
    • 空格预览
      • png,jpg,psd,PPT,PDF,doc,MP3,MP4,MOV...
    • 中英文切换
      • command/win+空格
    • 软件的使用
      • .dmg
      • XX for mac
    • 截图
      • 全屏截图
        • command+Shift+3
      • 区域截图
        • command+Shift+4
    • 删除
      • command+Delete
    • 恢复
      • command+Z
    • 新建文件夹
      • 鼠标右键
    • 复制
      • command+C
    • 粘贴
      • command+V
    • 应用列表
      • F4
    • 强制退出
      • command+Alt+Esc