记录一些之前学的APPUI设计知识

1. PS相关知识

   1. 文字

      • 文字颜色	文字不透明度( opacity )	背景颜色	强调程度
        #FFFFFF( 白色 )	87%	#000000( 黑色 )	强调
        #FFFFFF( 白色 )	60%	#000000( 黑色 )	适中
        #FFFFFF( 白色 )	38%	#000000( 黑色 )	次级

   2. 图像

      • 图像透明度
      • 混合模式
      • 虚化效果
      • 交互动作特性
      • 增加真实感
      • 透析事物关系
      • 展现复杂效果
      • 夸张想象( WIFI测速 → 汽车速度表盘 )

   3. 色彩搭配

      1. 色彩分类

         • 色调色系( 冷、暖、明、暗、软、硬 )
         • 感情表达( 喜、怒、哀、乐 )
         • 呈现状态( 安静( 白 )、活泼( 蓝 )、典雅( 黄 )、清新( 绿 ) )

      2. 色彩搭配方法

         • 参照同类APP案例

         • 配色软件( 在线配色工具 )

           颜色	适合APP类别
           橙色	商业类( 淘宝 )
           蓝色	社交类( QQ、钉钉 )

         • 吸管工具吸面积最大的几块颜色( 不会超过四种颜色 ( 简洁 ) )

           • 颜色	表现特点
             灰黑	科技感、玻璃质感、时尚娱乐
             蓝色	公司官网、严谨形象
             暖色	电子商务
             黑色、咖啡色、紫色、酒红色	一流高端产品
             灰度渐变	统一高雅

         • 颜色渐变

           • 属性	意义
             色相( H )	什么颜色
             饱和度( S )	浓/淡
             亮度( B )	明亮/昏暗

             • 应用类渐变 → H不变 S、B 10 ~ 15内变化

      • 颜色	表现特点
        灰黑	科技感、玻璃质感、时尚娱乐
        蓝色	公司官网、严谨形象
        暖色	电子商务
        黑色、咖啡色、紫色、酒红色	一流高端产品
        灰度渐变	统一高雅

   4. APP布局设计说明

      1. 拒绝陌生感，统一布局风格

2. PS处理图片的一些常用技法

   1. 高亮
   2. 镜面
   3. 倒影
   4. 画中画效果
   5. 移轴模糊
   6. 折角效果
   7. 外边框
   8. APP背景图片的合成

3. APPUI设计相关知识

   1. 企业APP7个设计技巧

      • 用户体验

      • 模糊背景( 配角 ) ( 简单的APP )

      • 滚动设计( ListView控件 )

      • 色调搭配 → 简约

        • 单色调铺垫
        • 采物法延伸
        • 吸色法借用

      • 情景感知( 智能化 )

      • 拟物设计

      • 灵活带入情感元素

   2. 控件设计技巧

      • 按钮设计 → 圆角、蓝色
      • 输入框设计 → 圆角、图标：内容
      • 开关按钮设计 → 打开状态( 彩色：绿、蓝、黄 ) 关闭状态( 灰色 ) 拟物图形按钮
      • 提示框设计 → 圆角卡片框展示

   3. 图标( icon )设计

      • 位图( bitmap )

      • 矢量图( 点、线不会失真 ( 像素点 ))

      • 颜色模式

        • RGB( 三原色( R: Red、G: Green、B: Blue ) )

        • CMYK( C: Cyan( 青色 )、M: Magenta( 洋红色 )、Y: Yellow( 黄色 )、K: Black( 黑色 ) )

        • 灰度模式( 35度灰 )

        • 位图模式( 黑白模式 )

          Tips：先灰度模式转为位图模式

   4. 文件格式

      • PSD/PSB格式 → PS专用
      • JPEG格式 → 高压缩率
      • TIFF格式 → 位图 ( 无损压缩 )
      • AI格式 → 矢量图
      • GIF格式 → 动图
      • PNG格式 → 不失真压缩保存图像

4. APP产品设计设计大体方面

   1. 产品定位

      产品定位	风格
      娱乐	花哨的、华丽、冲动
      工具	清淡
      年轻人	清新、绚丽的
      商务人士	简洁、稳重、大气

   2. 面向人群

   3. 设计风格

   4. 色调

   5. 控件

5. APP产品设计大体流程

   1. 产品定位
   2. 产品风格
   3. 产品控件
   4. 方案制定
   5. 方案提交
   6. 方案选定

6. APP产品设计详细流程及方法

   1. 定位指南图

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yRfyJtGm-1582207749148)(C:\Users\KZF\AppData\Roaming\Typora\typora-user-images\image-20200220212341281.png)]

   2. 核心功能确认( 大丁法( 亲和法 ) )

      • 黄色的标签( 最主要的功能 )

   3. ADS( 应用定义声明 )

      • 它能为( 哪些 )用户( 在哪些情况下 )解决( 什么 )问题？

   4. 画草图

      • 说服力( 流畅 )
      • 草图稳固( 画形状时不要留下空白 )( 线与线之间稍微交叉 )
      • 要有层次感( 投影、影子和背光面 )( 材质( 玻璃、木材和镜面 ) )

   5. 低保真原型与高保真原型

   6. 视觉设计

      • 文本
      • 高光
      • 点触后的背景
      • 点触后的阴影

   7. 交付

      • 切图( PNG格式 )

7. APPUI页面设计步骤

   ① 分解页面: 将所有APP页面罗列出来

   ② 根据页面尺寸规格，划分各区域大小位置并固定成可用PSD模板

   ③ 根据草图或功能描述还原页面，在PSD模板中补充组件元素

   ④ 切图生成PNG可用图片包，并生成整体效果图