Upload
hao-peiqiang
View
20.966
Download
3
Embed Size (px)
DESCRIPTION
Citation preview
iPhone/iPad开发讲座第二讲 iPhone用户界面设计
盛大创新院郝培强
Blog: http://tiny4.org/blogTwitter: @Tinyfool
Mail/Gtalk: [email protected]
10年7月1日星期四
革命性的设备10年7月1日星期四
传统的开发流程10年7月1日星期四
iPhone应用的开发流程10年7月1日星期四
设计流程
• 熟悉设备(iPhone/iPad)
• 理清核心概念和方向• 实现• 最终定稿
10年7月1日星期四
设计流程
• 熟悉设备(iPhone/iPad)
• 理清核心概念和方向• 实现• 最终定稿
10年7月1日星期四
读HIG,iPhone Human Interface Guidelines10年7月1日星期四
节选iPhone HIG
• 设备特性牢记在心• 屏幕尺寸受限• 内存受限• 用户只有一个窗口• 一次只和一个程序交互• 尽量少用界面帮助
10年7月1日星期四
10年7月1日星期四
Top level
Detail level
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
读HIG,iPad Human Interface Guidelines10年7月1日星期四
C
M
Y
CM
MY
CY
CMY
K
land_mail_orientation.pdf 3/19/10 11:08:54 AM
10年7月1日星期四
C
M
Y
CM
MY
CY
CMY
K
portrait_mail_orientation.pdf 3/19/10 11:10:44 AM
10年7月1日星期四
了解设备
• 交互• 场景• 约束
10年7月1日星期四
了解设备
• 交互• 场景• 约束
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
了解设备
• 交互• 场景• 约束
10年7月1日星期四
了解设备
• 交互• 场景• 约束
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
设计流程
• 熟悉设备(iPhone/iPad)
• 理清核心概念和方向• 实现• 最终定稿
10年7月1日星期四
概念设计
• 定义你的解决方案• 精炼你的特性列表• 确定你的构思
10年7月1日星期四
概念设计“要不我来做个室内装修iPhone程序吧!!!”在星巴克里突发奇想的程序员
10年7月1日星期四
概念设计头脑风暴中……
10年7月1日星期四
概念设计头脑风暴中……
• 布局规划
10年7月1日星期四
概念设计头脑风暴中……
• 布局规划• 家具选择
10年7月1日星期四
概念设计头脑风暴中……
• 布局规划• 家具选择• 瓷砖选择
10年7月1日星期四
概念设计头脑风暴中……
• 布局规划• 家具选择• 瓷砖选择• 油漆颜色代码
10年7月1日星期四
概念设计头脑风暴中……
• 布局规划• 家具选择• 瓷砖选择• 油漆颜色代码• 油漆品牌
10年7月1日星期四
概念设计头脑风暴中……
• 布局规划• 家具选择• 瓷砖选择• 油漆颜色代码• 油漆品牌• 纹理选择
10年7月1日星期四
概念设计头脑风暴中……
• 布局规划• 家具选择• 瓷砖选择• 油漆颜色代码• 油漆品牌• 纹理选择• 价格比较
10年7月1日星期四
概念设计头脑风暴中……
• 布局规划• 家具选择• 瓷砖选择• 油漆颜色代码• 油漆品牌• 纹理选择• 价格比较
• 商店地址
10年7月1日星期四
概念设计头脑风暴中……
• 布局规划• 家具选择• 瓷砖选择• 油漆颜色代码• 油漆品牌• 纹理选择• 价格比较
• 商店地址• 地毯配色
10年7月1日星期四
概念设计头脑风暴中……
• 布局规划• 家具选择• 瓷砖选择• 油漆颜色代码• 油漆品牌• 纹理选择• 价格比较
• 商店地址• 地毯配色• 柜厨选择
10年7月1日星期四
概念设计头脑风暴中……
• 布局规划• 家具选择• 瓷砖选择• 油漆颜色代码• 油漆品牌• 纹理选择• 价格比较
• 商店地址• 地毯配色• 柜厨选择• 颜色比较
10年7月1日星期四
概念设计头脑风暴中……
• 布局规划• 家具选择• 瓷砖选择• 油漆颜色代码• 油漆品牌• 纹理选择• 价格比较
• 商店地址• 地毯配色• 柜厨选择• 颜色比较• 枕头选择
10年7月1日星期四
概念设计头脑风暴中……
• 布局规划• 家具选择• 瓷砖选择• 油漆颜色代码• 油漆品牌• 纹理选择• 价格比较
• 商店地址• 地毯配色• 柜厨选择• 颜色比较• 枕头选择• 吊扇选择
10年7月1日星期四
概念设计头脑风暴中……
• 布局规划• 家具选择• 瓷砖选择• 油漆颜色代码• 油漆品牌• 纹理选择• 价格比较
• 商店地址• 地毯配色• 柜厨选择• 颜色比较• 枕头选择• 吊扇选择• 配色
10年7月1日星期四
要不?
10年7月1日星期四
概念设计移植桌面程序
10年7月1日星期四
概念设计继承的特性们
用事件、人名、关键词、标题、评分、以及日期组织和搜索照片。无损的修剪、调整、缩放、旋转、阴影、高亮、润饰照片。使用iWeb、Mail、Finder、iDVD、以及Photocasting功能与其他用户分享照片。使用Mac电脑创建在线相册,用Mac和PC都可以浏览,下载和添加照片。创建和管理智能相册。评分,标记,隐藏照片。创建照片日历,组织、编辑、打印日历, 选择风格。 创建照片电子书,组织、编辑、打印照片电子书,选择风格。 创建照片明信片,组织、编辑、打印照片明信片,选择风格。用各种风格,方式打印高质量的照片。支持各种流行的相机,流行的文件格式,打印。提供全屏幕预览,润饰,比较功能。使用各种漂亮的切换方式放幻灯片等等,支持背景音乐。
10年7月1日星期四
概念设计继承的特性们
用事件、人名、关键词、标题、评分、以及日期组织和搜索照片。无损的修剪、调整、缩放、旋转、阴影、高亮、润饰照片。使用iWeb、Mail、Finder、iDVD、以及Photocasting功能与其他用户分享照片。使用Mac电脑创建在线相册,用Mac和PC都可以浏览,下载和添加照片。创建和管理智能相册。评分,标记,隐藏照片。创建照片日历,组织、编辑、打印日历, 选择风格。 创建照片电子书,组织、编辑、打印照片电子书,选择风格。 创建照片明信片,组织、编辑、打印照片明信片,选择风格。用各种风格,方式打印高质量的照片。支持各种流行的相机,流行的文件格式,打印。提供全屏幕预览,润饰,比较功能。使用各种漂亮的切换方式放幻灯片等等,支持背景音乐。
10年7月1日星期四
概念设计继承的特性们
用事件、人名、关键词、标题、评分、以及日期组织和搜索照片。无损的修剪、调整、缩放、旋转、阴影、高亮、润饰照片。使用iWeb、Mail、Finder、iDVD、以及Photocasting功能与其他用户分享照片。使用Mac电脑创建在线相册,用Mac和PC都可以浏览,下载和添加照片。创建和管理智能相册。评分,标记,隐藏照片。创建照片日历,组织、编辑、打印日历, 选择风格。 创建照片电子书,组织、编辑、打印照片电子书,选择风格。 创建照片明信片,组织、编辑、打印照片明信片,选择风格。用各种风格,方式打印高质量的照片。支持各种流行的相机,流行的文件格式,打印。提供全屏幕预览,润饰,比较功能。使用各种漂亮的切换方式放幻灯片等等,支持背景音乐。
定义一个解决方案,而不是装满各种特性的筐子。
10年7月1日星期四
概念设计创建程序定义声明
• ADS:Application Definition Statement
• 定义程序的核心目标• 提出什么样的解决方案• 为什么样的用户提供服务• 用ADS来过滤特性
10年7月1日星期四
10年7月1日星期四
定义解决方案程序定义声明
10年7月1日星期四
定义解决方案程序定义声明
为非专业摄影者服务的,方便使用的数码相片编辑,组织,共享工具。
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
定义解决方案程序定义声明
10年7月1日星期四
定义解决方案程序定义声明
10年7月1日星期四
定义解决方案程序定义声明
为iPhone用户设计的数字照片共享软件。
10年7月1日星期四
精炼你的特性简单就是美
• 选择最少的特性• 使用程序定义声明(ADS)来过滤
• 选择• 少数特性• 最常用的• 满足最主要用户群体的• 适合移动场景的
10年7月1日星期四
精炼你的特性使用程序定义声明(ADS)来过滤
10年7月1日星期四
精炼你的特性使用程序定义声明(ADS)来过滤
10年7月1日星期四
精炼你的特性使用程序定义声明(ADS)来过滤
用事件、人名、关键词、标题、评分、以及日期组织和搜索照片。无损的修剪、调整、缩放、旋转、阴影、高亮、润饰照片。使用iWeb、Mail、Finder、iDVD、以及Photocasting功能与其他用户分享照片。使用Mac电脑创建在线相册,用Mac和PC都可以浏览,下载和添加照片。创建和管理智能相册。评分,标记,隐藏照片。创建照片日历,组织、编辑、打印日历, 选择风格。 创建照片电子书,组织、编辑、打印照片电子书,选择风格。 创建照片明信片,组织、编辑、打印照片明信片,选择风格。用各种风格,方式打印高质量的照片。支持各种流行的相机,流行的文件格式,打印。提供全屏幕预览,润饰,比较功能。使用各种漂亮的切换方式放幻灯片等等,支持背景音乐。
10年7月1日星期四
精炼你的特性使用程序定义声明(ADS)来过滤
用事件、人名、关键词、标题、评分、以及日期组织和搜索照片。无损的修剪、调整、缩放、旋转、阴影、高亮、润饰照片。使用iWeb、Mail、Finder、iDVD、以及Photocasting功能与其他用户分享照片。使用Mac电脑创建在线相册,用Mac和PC都可以浏览,下载和添加照片。创建和管理智能相册。评分,标记,隐藏照片。创建照片日历,组织、编辑、打印日历, 选择风格。 创建照片电子书,组织、编辑、打印照片电子书,选择风格。 创建照片明信片,组织、编辑、打印照片明信片,选择风格。用各种风格,方式打印高质量的照片。支持各种流行的相机,流行的文件格式,打印。提供全屏幕预览,润饰,比较功能。使用各种漂亮的切换方式放幻灯片等等,支持背景音乐。
10年7月1日星期四
确定你的构思从用户角度去看
• 审核• 程序定义声明• 特性列表• 确定• 对象• 任务• 脚色• 关系
10年7月1日星期四
概念设计室内装修程序
• 布局规划
• 家具选择
• 瓷砖选择
• 油漆颜色代码
• 油漆品牌
• 纹理选择
• 价格比较
• 商店地址
• 地毯配色
• 柜厨选择
• 颜色比较
• 枕头选择
• 吊扇选择
• 配色
10年7月1日星期四
概念设计室内装修程序
• 布局规划
• 家具选择
• 瓷砖选择
• 油漆颜色代码
• 油漆品牌
• 纹理选择
• 价格比较
• 商店地址
• 地毯配色
• 柜厨选择
• 颜色比较
• 枕头选择
• 吊扇选择
• 配色
方便iPhone用户使用的颜色选择程序。10年7月1日星期四
概念设计和颜色有关的任务
方便iPhone用户使用的颜色选择程序。10年7月1日星期四
概念设计和颜色有关的任务
• 获取
方便iPhone用户使用的颜色选择程序。10年7月1日星期四
概念设计和颜色有关的任务
• 获取• 浏览
方便iPhone用户使用的颜色选择程序。10年7月1日星期四
概念设计和颜色有关的任务
• 获取• 浏览• 建议
方便iPhone用户使用的颜色选择程序。10年7月1日星期四
概念设计和颜色有关的任务
• 获取• 浏览• 建议• 评注
方便iPhone用户使用的颜色选择程序。10年7月1日星期四
概念设计和颜色有关的任务
• 获取• 浏览• 建议• 评注• 色调
方便iPhone用户使用的颜色选择程序。10年7月1日星期四
概念设计和颜色有关的任务
• 获取• 浏览• 建议• 评注• 色调
• 混色
方便iPhone用户使用的颜色选择程序。10年7月1日星期四
概念设计和颜色有关的任务
• 获取• 浏览• 建议• 评注• 色调
• 混色• 比较
方便iPhone用户使用的颜色选择程序。10年7月1日星期四
概念设计和颜色有关的任务
• 获取• 浏览• 建议• 评注• 色调
• 混色• 比较• 评分
方便iPhone用户使用的颜色选择程序。10年7月1日星期四
概念设计和颜色有关的任务
• 获取• 浏览• 建议• 评注• 色调
• 混色• 比较• 评分• 分享
方便iPhone用户使用的颜色选择程序。10年7月1日星期四
概念设计和颜色有关的任务
• 获取• 浏览• 建议• 评注• 色调
• 混色• 比较• 评分• 分享• 描述
方便iPhone用户使用的颜色选择程序。10年7月1日星期四
设计流程
• 熟悉设备(iPhone/iPad)
• 理清核心概念和方向• 实现• 最终定稿
10年7月1日星期四
实现
• 程序类型• 了解基础• 用纸上原型交互
10年7月1日星期四
程序分类严肃
有趣
工具娱乐
10年7月1日星期四
严肃工具
• 功能驱动• 使用会改变数据• 层级多窗口结构• 最小化图形
严肃
有趣
工具娱乐
10年7月1日星期四
有趣工具
• 有用,且有意思• 一些丰富的图形• 信息结构简单
严肃
有趣
工具娱乐
10年7月1日星期四
严肃娱乐
• 严肃的界面展现娱乐内容• 教育性的娱乐• 数据驱动• 可能是层级的• 适度图形
严肃
有趣
工具娱乐
10年7月1日星期四
有趣的娱乐
• 纯粹娱乐• 交互驱动• 很少结构• 丰富的图形
严肃
有趣
工具娱乐
10年7月1日星期四
小工具 严肃
有趣
工具娱乐• 图形丰富• 单屏幕• 单一功能• 聚焦• 面向消费者• 轻量级数据
10年7月1日星期四
实现
• 程序类型• 了解基础(略)• 用纸上原型交互
10年7月1日星期四
实现
• 程序类型• 了解基础• 用纸上原型交互
10年7月1日星期四
纸上原型
10年7月1日星期四
纸上原型
10年7月1日星期四
纸上原型
10年7月1日星期四
纸上原型
10年7月1日星期四
纸上原型
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
定义解决方案程序定义声明
针对中小团队,单个用户,方便使用的个人任务管理软件,可支持多种不同的工作流。
10年7月1日星期四
继承特性
10年7月1日星期四
纸上草图
10年7月1日星期四
根据草图设计
10年7月1日星期四
纠结TAB-Bar
10年7月1日星期四
继续纠结
10年7月1日星期四
纠结啊
10年7月1日星期四
Toolbar胜利
10年7月1日星期四
图标演化
10年7月1日星期四
图标演化
10年7月1日星期四
快速录入
10年7月1日星期四
快速录入
10年7月1日星期四
快速录入
10年7月1日星期四
快速录入
10年7月1日星期四
快速录入
10年7月1日星期四
快速录入
10年7月1日星期四
最后版本
10年7月1日星期四
最后版本
10年7月1日星期四
经验教训
• 拥抱iPhone的新UI范式
• 考虑用户的意外点击• 设计的时候考虑外界光源环境• 减少给定时间给用户的信息量
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
设计流程
• 熟悉设备(iPhone/iPad)
• 理清核心概念和方向• 实现纸上原型• 最终定稿
10年7月1日星期四
最终定稿
• 用照片和图片增强效果• 加入令人兴奋的动画• 打磨程序,构建差别
10年7月1日星期四
用照片和图片增强效果
• 通讯录照片• 专辑封面
10年7月1日星期四
用照片和图片增强效果
• 通讯录照片• 专辑封面
10年7月1日星期四
加入令人兴奋的动画
• 更真实、有趣、适当• 加入物理感和真实感• 直观操作• 让流程和概念更清晰• 展示一个动作的结果
10年7月1日星期四
加入令人兴奋的动画• 删除邮件• 删除备忘录• 移动邮件到别的目录• 购买音乐• 显示更多地图特性• 切换照片• 选择网页• 自定义图标位置
10年7月1日星期四
更重要:不要用动画的情况
• 创建动画的条件
• 增强任务,强化概念
• 提供有价值的反馈
• 让流程和概念更清晰
• 避免
• 任何东西都动
• 无故乱动
• 干扰主线流程
• 标准行为
10年7月1日星期四
持续打磨Case Study
• Where to?
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
10年7月1日星期四
要点
• 设计程序的程序定义声明• 用纸上原型交互,越早越好• 重复打磨循环,直到发布
10年7月1日星期四