移动设计

  1. 概述
    1. 专注于用户能获取的核心价值
    2. 提供用户需要的功能
    3. 考虑如何为用户减少付出
    4. 最后思考如何吸引眼球，为用户创建良好的使用体验。
  2. 特征
    1. 使用场景：光线、噪音、使用姿态
    2. 网速特殊：分步加载、懒加载、智能加载、离线访问；
    3. 设备特征：屏幕尺寸、功能按键、传感器
    4. 触摸手势交互：点击、拖拽、滑动
  3. 原则
    1. 内容优先
    2. 为触摸而设计
    3. 转换输入方式
    4. 多通道设计
    5. 为中断而设计
    6. 流畅性
    7. 易学性
    8. 智能有爱
  4. 框架
    1. 框架目标：浅而窄
      1. 路径扁平化
      2. 层级信息合并
      3. 隐藏
    2. 导航
      1. 标签式
      2. 辐射式
      3. 列表式
      4. 平铺式
      5. 点聚式
      6. 抽屉式
      7. 扩展屏幕之外的导航：上下（左右）
  5. 细节
    1. 交互更多样
      1. 点击
      2. 拖拽和拨动
      3. 多指手势
      4. 摇晃
      5. 麦克风
      6. 摄像头
      7. 虚拟现实的界面（例如地图）
    2. 界面可视化
      1. 可视化的信息架构
      2. 内容信息的图形化
      3. 可感知的操作线索
      4. 看得见的反馈
    3. 用隐喻引导用户
      1. 拟物化降低用户认识
      2. 线索搭建隐喻系统
      3. 营造环境的隐喻
    4. 声音的互动
      1. 降低用户注意力
      2. 制造产品的使用氛围
      3. 树立品牌认识
      4. 机器间的交流
  6. 动效
    1. 作用
      1. 告诉用户应该做什么:引导页面
      2. 提醒用户将要去到哪里：页面切换
      3. 帮忙用户减少焦虑：页面加载
      4. 引领用户经历故事：情感体验
      5. 吸引用户触碰感知：感觉有趣
      6. 营造应用独有的气质：传达品牌特性
    2. 适合动效的应用场景
      1. 转场：形变、运动、无技巧转场（通过共同的元素线索）
      2. 引导：
        1. 对隐藏内容、操作的提示；
        2. 新手帮助（适时出现和离开、突出主要功能、增加新手帮助亮点）
      3. 反馈：过程反馈、结果反馈（轻量的、连续的，融入了情感的动效）
      4. 加载：最好可以结合品牌形象，给人留下更深刻的印象
    3. 如何描述一段动态效果
      1. 运动动效的基本规范
      2. 形变动效的基本规范
    4. 动效设计方法
      1. 运动形变万变不离其宗
      2. 节奏速度，掌控曲线时长
      3. 情感故事，拟物、隐喻、品牌
      4. 结合操作，关联轻量自然
      5. 点到为上，切记过犹不及
      6. 尊重习惯，谨慎进行创新
      7. 快速原型，多方沟通权衡
  7. 适配
    1. 各种屏幕尺寸的界面适配
      1. 整体缩放：首页
      2. 间距增加：九宫格导航
      3. 单向拉伸：列表
      4. 智能调整：栅格列表
      5. 延展性：启动界面
    2. 响应式布局模式
      1. 左右三列布局模式
      2. 综合布局模式
      3. 封面式布局模式
      4. 标题布局模式
    3. 导航的响应式组织
      1. 基于设备属性来组织导航
      2. 导航响应设计的几个典型架构
    4. 图片的响应式变化
    5. 文字的响应式展现
    6. 理性看待响应式
      1. 优势：开发维护运营成本优势、兼容性优势、改动灵活
      2. 缺陷：不一定很好满足移动端的用户需求、开发时间较长、加载速度加长
  8. 创新
    1. 创新技法详解
    2. 逆反法：钨丝灯泡抽气与充气
    3. 离散法：活版印刷
    4. 移植法：碰一碰，换名片（将一个对象的概念原理方法移植到另外一个对象）
    5. 还原法：以光影变化还原时间流逝的概念
    6. 强化法：Google地图的矢量图到卫星图到造影街景图，强化显示属性达到真实的效果
    7. 组合法：GPS与跑鞋产生Nike+应用
    8. 对应法：iBook的翻页效果
  9. 工具
    1. Axure
    2. JustinMind（比Axure更适合设计移动应用，比Axure提供更为全面的手势支持和widgets控件）
    3. iPhone Mockup
    4. POP
    5. Skala Preview（Mac+iOS）：适时在手机预览电脑的设计图片效果
    6. Android Design Preview：功能同上，用于Android平台
  10. 一份好的移动交互原型
    1. 项目概要
    2. 流程图
    3. 交互原型
    4. 交互说明
    5. 可以触摸的交互文档
  11. 流
    1. 把握用户的视觉焦点
    2. 手指的触点区域
    3. 梳理界面中的视线流
    4. 提供自然连续的操作流
    5. 视觉焦点到触点的引导流
    6. 触点到视觉焦点的反馈流
计算机
#设计
移动设计
https://ccw1078.github.io/2014/10/14/移动设计/
作者
ccw
发布于
2014年10月14日
许可协议