Iphone用户界面设计

iPhone/iPad开发讲座第二讲 iPhone用户界面设计

盛大创新院郝培强

Blog: http://tiny4.org/blogTwitter: @Tinyfool

Mail/Gtalk: [email protected]

10年7月1日星期四

http://tiny4.org/blog

http://tiny4.org/blog

mailto:[email protected]

mailto:[email protected]

革命性的设备10年7月1日星期四

传统的开发流程10年7月1日星期四

iPhone应用的开发流程10年7月1日星期四

设计流程

• 熟悉设备（iPhone/iPad）

• 理清核心概念和方向• 实现• 最终定稿


设计流程




读HIG，iPhone Human Interface Guidelines10年7月1日星期四

节选iPhone HIG

• 设备特性牢记在心• 屏幕尺寸受限• 内存受限• 用户只有一个窗口• 一次只和一个程序交互• 尽量少用界面帮助



Top level

Detail level




读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


C

M

Y

CM

MY

CY

CMY

K

portrait_mail_orientation.pdf 3/19/10 11:10:44 AM


了解设备

• 交互• 场景• 约束


了解设备














了解设备



了解设备









设计流程




概念设计

• 定义你的解决方案• 精炼你的特性列表• 确定你的构思


概念设计“要不我来做个室内装修iPhone程序吧！！！”在星巴克里突发奇想的程序员


概念设计头脑风暴中……



• 布局规划



• 布局规划• 家具选择



• 布局规划• 家具选择• 瓷砖选择



• 布局规划• 家具选择• 瓷砖选择• 油漆颜色代码



• 布局规划• 家具选择• 瓷砖选择• 油漆颜色代码• 油漆品牌



• 布局规划• 家具选择• 瓷砖选择• 油漆颜色代码• 油漆品牌• 纹理选择



• 布局规划• 家具选择• 瓷砖选择• 油漆颜色代码• 油漆品牌• 纹理选择• 价格比较




• 商店地址




• 商店地址• 地毯配色




• 商店地址• 地毯配色• 柜厨选择




• 商店地址• 地毯配色• 柜厨选择• 颜色比较




• 商店地址• 地毯配色• 柜厨选择• 颜色比较• 枕头选择




• 商店地址• 地毯配色• 柜厨选择• 颜色比较• 枕头选择• 吊扇选择




• 商店地址• 地毯配色• 柜厨选择• 颜色比较• 枕头选择• 吊扇选择• 配色


要不？


概念设计移植桌面程序


概念设计继承的特性们

用事件、人名、关键词、标题、评分、以及日期组织和搜索照片。无损的修剪、调整、缩放、旋转、阴影、高亮、润饰照片。使用iWeb、Mail、Finder、iDVD、以及Photocasting功能与其他用户分享照片。使用Mac电脑创建在线相册，用Mac和PC都可以浏览，下载和添加照片。创建和管理智能相册。评分，标记，隐藏照片。创建照片日历，组织、编辑、打印日历，选择风格。创建照片电子书，组织、编辑、打印照片电子书，选择风格。创建照片明信片，组织、编辑、打印照片明信片，选择风格。用各种风格，方式打印高质量的照片。支持各种流行的相机，流行的文件格式，打印。提供全屏幕预览，润饰，比较功能。使用各种漂亮的切换方式放幻灯片等等，支持背景音乐。







定义一个解决方案，而不是装满各种特性的筐子。


概念设计创建程序定义声明

• ADS:Application Definition Statement

• 定义程序的核心目标• 提出什么样的解决方案• 为什么样的用户提供服务• 用ADS来过滤特性



定义解决方案程序定义声明



为非专业摄影者服务的，方便使用的数码相片编辑，组织，共享工具。









为iPhone用户设计的数字照片共享软件。


精炼你的特性简单就是美

• 选择最少的特性• 使用程序定义声明（ADS）来过滤

• 选择• 少数特性• 最常用的• 满足最主要用户群体的• 适合移动场景的


精炼你的特性使用程序定义声明（ADS）来过滤










确定你的构思从用户角度去看

• 审核• 程序定义声明• 特性列表• 确定• 对象• 任务• 脚色• 关系


概念设计室内装修程序

• 布局规划

• 家具选择

• 瓷砖选择

• 油漆颜色代码

• 油漆品牌

• 纹理选择

• 价格比较

• 商店地址

• 地毯配色

• 柜厨选择

• 颜色比较

• 枕头选择

• 吊扇选择

• 配色


概念设计室内装修程序

• 布局规划

• 家具选择

• 瓷砖选择

• 油漆颜色代码

• 油漆品牌

• 纹理选择

• 价格比较

• 商店地址

• 地毯配色

• 柜厨选择

• 颜色比较

• 枕头选择

• 吊扇选择

• 配色

方便iPhone用户使用的颜色选择程序。10年7月1日星期四

概念设计和颜色有关的任务



• 获取



• 获取• 浏览



• 获取• 浏览• 建议



• 获取• 浏览• 建议• 评注



• 获取• 浏览• 建议• 评注• 色调




• 混色




• 混色• 比较




• 混色• 比较• 评分




• 混色• 比较• 评分• 分享




• 混色• 比较• 评分• 分享• 描述


设计流程




实现

• 程序类型• 了解基础• 用纸上原型交互


程序分类严肃

有趣

工具娱乐


严肃工具

• 功能驱动• 使用会改变数据• 层级多窗口结构• 最小化图形

严肃

有趣

工具娱乐


有趣工具

• 有用，且有意思• 一些丰富的图形• 信息结构简单

严肃

有趣

工具娱乐


严肃娱乐

• 严肃的界面展现娱乐内容• 教育性的娱乐• 数据驱动• 可能是层级的• 适度图形

严肃

有趣

工具娱乐


有趣的娱乐

• 纯粹娱乐• 交互驱动• 很少结构• 丰富的图形

严肃

有趣

工具娱乐


小工具严肃

有趣

工具娱乐• 图形丰富• 单屏幕• 单一功能• 聚焦• 面向消费者• 轻量级数据


实现

• 程序类型• 了解基础（略）• 用纸上原型交互


实现

• 程序类型• 了解基础• 用纸上原型交互


纸上原型


纸上原型


纸上原型


纸上原型


纸上原型





针对中小团队，单个用户，方便使用的个人任务管理软件，可支持多种不同的工作流。


继承特性


纸上草图


根据草图设计


纠结TAB-Bar


继续纠结


纠结啊


Toolbar胜利


图标演化


图标演化


快速录入


快速录入


快速录入


快速录入


快速录入


快速录入


最后版本


最后版本


经验教训

• 拥抱iPhone的新UI范式

• 考虑用户的意外点击• 设计的时候考虑外界光源环境• 减少给定时间给用户的信息量






设计流程


• 理清核心概念和方向• 实现纸上原型• 最终定稿


最终定稿

• 用照片和图片增强效果• 加入令人兴奋的动画• 打磨程序，构建差别


用照片和图片增强效果

• 通讯录照片• 专辑封面


用照片和图片增强效果

• 通讯录照片• 专辑封面


加入令人兴奋的动画

• 更真实、有趣、适当• 加入物理感和真实感• 直观操作• 让流程和概念更清晰• 展示一个动作的结果


加入令人兴奋的动画• 删除邮件• 删除备忘录• 移动邮件到别的目录• 购买音乐• 显示更多地图特性• 切换照片• 选择网页• 自定义图标位置


更重要：不要用动画的情况

• 创建动画的条件

• 增强任务，强化概念

• 提供有价值的反馈

• 让流程和概念更清晰

• 避免

• 任何东西都动

• 无故乱动

• 干扰主线流程

• 标准行为


持续打磨Case Study

• Where to?










要点

• 设计程序的程序定义声明• 用纸上原型交互，越早越好• 重复打磨循环，直到发布


Education

Iphone用户界面设计