SlideShare a Scribd company logo
1 of 68
 
iOS 平台视觉设计分享交流 黑牛  (Blacksnail) 淘宝 -iTeam  视觉设计师
iOS 视觉基础介绍
什么是 iOS?
2007 . 06 . 29
Apple 为 触屏设备所开发的操作系统 iOS
iPhone iPod touch iPad 硬件设备
iOS 图标设计
一个好的图标可以提升产品的品牌感,和激发用户购买下载的欲望 . iOS 图标设计
工具类 品牌类 游戏类 iOS 图标设计 拟物化 标志化 场景化
拟物化 -增强视觉上的冲击 , 明确表明了其用途 标志化 -简洁大方 , 扩展性强 , 加强品牌感 场景化 -直观快速的体现游戏的内容 iOS 图标设计
iOS 分辨率及屏幕
960X640 480X320 iPhone4 屏幕每英寸的像素点已经达到 326ppi  显示效果媲美印刷品 , 大幅度提升了视觉体验 iOS 分辨率及屏幕
视觉稿 X 2 iOS 分辨率及屏幕
分割线 , 投影 , 内阴影 , 描边 X 2 两 倍的分辨率导致在界面设计的时 , 整体的效果比较难把控 . 需要把设计稿 导入设备中去查看真实效果 iOS 分辨率及屏幕
1024X768 iPhone 与 iPad 界面视觉差异 展示空间扩大,阅读和操作体验大大提升
AirDisplay 通过 wifi 连接使 iPhone&iPad 成为外接屏幕 提高工作效率 , 避免反复的导入操作 更直观的看到设备中显示的真实效果 iDisplay
iPhone 与 iPad 界面视觉差异 iPad 界面视觉新特性
iPad 与 iPhone 特性差异 屏幕分辨率为 1024X768 ,尺寸比例为 4:3 更趋向与拟物化设计 展示空间扩大 ,  结合 iOS 多点触控 , 手势识别等人机交互特性直线提升了视觉和操作体验 . 界面和现实生活越相似 , 用户就越容易理解 , 操作 . 结合着物理动画使其具有强烈的真实感 .
4:3
 
 
 
 
 
iPhone 与 iPad 界面视觉差异
iPhone 与 iPad 界面视觉差异
iPhone 与 iPad 界面视觉差异
iPhone 与 iPad 界面视觉差异
案例分析
Taobao  for iPad
 
 
 
 
 
 
 
书本 地板
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
个人感想
01. 设计应该平和的看待问题
 
02. 设计就像跑马拉松
03.  多看 多想 多做 多说
04. 你不是一个人在战斗
 
Q&A
Thanks.
 
微博 :weibo.com/iteam 邮箱 :iteam@taobao.com

More Related Content

Similar to I os 视觉分享

Ui gathering(視覺設計)
Ui gathering(視覺設計)Ui gathering(視覺設計)
Ui gathering(視覺設計)Winnie Chiang
 
App design process part III
App design process part IIIApp design process part III
App design process part IIINTUST
 
西游塔防
西游塔防西游塔防
西游塔防qq520swd
 
七月份E-paper_產品篇
七月份E-paper_產品篇七月份E-paper_產品篇
七月份E-paper_產品篇rouwei
 
iOS swift & Cloud Vision API 玩圖像辨識
iOS swift & Cloud Vision API 玩圖像辨識iOS swift & Cloud Vision API 玩圖像辨識
iOS swift & Cloud Vision API 玩圖像辨識政斌 楊
 
Kentzhu:玩法变了,移动产品设计新思路
Kentzhu:玩法变了,移动产品设计新思路Kentzhu:玩法变了,移动产品设计新思路
Kentzhu:玩法变了,移动产品设计新思路kent zhu
 
跟我一起 Hold 住 iOS5
跟我一起 Hold 住 iOS5跟我一起 Hold 住 iOS5
跟我一起 Hold 住 iOS5Yang SuJung
 
121229 網路應用使用者經驗的前瞻與挑戰-vf
121229 網路應用使用者經驗的前瞻與挑戰-vf121229 網路應用使用者經驗的前瞻與挑戰-vf
121229 網路應用使用者經驗的前瞻與挑戰-vfscuuserexperience
 
I os tech talk 观后感
I os tech talk 观后感I os tech talk 观后感
I os tech talk 观后感thinkinlamp
 

Similar to I os 视觉分享 (10)

Ui gathering(視覺設計)
Ui gathering(視覺設計)Ui gathering(視覺設計)
Ui gathering(視覺設計)
 
UiGathering Talk - Motion User Interface / by Ivan Wei
UiGathering Talk - Motion User Interface / by Ivan WeiUiGathering Talk - Motion User Interface / by Ivan Wei
UiGathering Talk - Motion User Interface / by Ivan Wei
 
App design process part III
App design process part IIIApp design process part III
App design process part III
 
西游塔防
西游塔防西游塔防
西游塔防
 
七月份E-paper_產品篇
七月份E-paper_產品篇七月份E-paper_產品篇
七月份E-paper_產品篇
 
iOS swift & Cloud Vision API 玩圖像辨識
iOS swift & Cloud Vision API 玩圖像辨識iOS swift & Cloud Vision API 玩圖像辨識
iOS swift & Cloud Vision API 玩圖像辨識
 
Kentzhu:玩法变了,移动产品设计新思路
Kentzhu:玩法变了,移动产品设计新思路Kentzhu:玩法变了,移动产品设计新思路
Kentzhu:玩法变了,移动产品设计新思路
 
跟我一起 Hold 住 iOS5
跟我一起 Hold 住 iOS5跟我一起 Hold 住 iOS5
跟我一起 Hold 住 iOS5
 
121229 網路應用使用者經驗的前瞻與挑戰-vf
121229 網路應用使用者經驗的前瞻與挑戰-vf121229 網路應用使用者經驗的前瞻與挑戰-vf
121229 網路應用使用者經驗的前瞻與挑戰-vf
 
I os tech talk 观后感
I os tech talk 观后感I os tech talk 观后感
I os tech talk 观后感
 

More from 碳酸饮料会

Png还是jpg,这是个问题
Png还是jpg,这是个问题Png还是jpg,这是个问题
Png还是jpg,这是个问题碳酸饮料会
 
设计中的一致性——界面篇
设计中的一致性——界面篇设计中的一致性——界面篇
设计中的一致性——界面篇碳酸饮料会
 
世界杯推广设计分享会
世界杯推广设计分享会世界杯推广设计分享会
世界杯推广设计分享会碳酸饮料会
 
超级旺铺产品体验设计
超级旺铺产品体验设计超级旺铺产品体验设计
超级旺铺产品体验设计碳酸饮料会
 
基于生活形态的用户分群研究
基于生活形态的用户分群研究基于生活形态的用户分群研究
基于生活形态的用户分群研究碳酸饮料会
 
Information visualization
Information visualizationInformation visualization
Information visualization碳酸饮料会
 
商家管理平台后台 后台菜单纸原型测试
商家管理平台后台 后台菜单纸原型测试商家管理平台后台 后台菜单纸原型测试
商家管理平台后台 后台菜单纸原型测试碳酸饮料会
 
卖家后台菜单项分类调研报告
卖家后台菜单项分类调研报告卖家后台菜单项分类调研报告
卖家后台菜单项分类调研报告碳酸饮料会
 
0414 旧城改造 我是卖家改版心得
0414 旧城改造 我是卖家改版心得0414 旧城改造 我是卖家改版心得
0414 旧城改造 我是卖家改版心得碳酸饮料会
 
简洁清晰,自然易懂
简洁清晰,自然易懂简洁清晰,自然易懂
简洁清晰,自然易懂碳酸饮料会
 
如何架构和管理个人的知识体系
如何架构和管理个人的知识体系如何架构和管理个人的知识体系
如何架构和管理个人的知识体系碳酸饮料会
 
如何架构和管理个人的知识体系
如何架构和管理个人的知识体系如何架构和管理个人的知识体系
如何架构和管理个人的知识体系碳酸饮料会
 
体验设计引导产品创新
体验设计引导产品创新体验设计引导产品创新
体验设计引导产品创新碳酸饮料会
 

More from 碳酸饮料会 (20)

2011亚美利加
2011亚美利加2011亚美利加
2011亚美利加
 
2011亚美利加
2011亚美利加2011亚美利加
2011亚美利加
 
Png还是jpg,这是个问题
Png还是jpg,这是个问题Png还是jpg,这是个问题
Png还是jpg,这是个问题
 
错位的体验
错位的体验错位的体验
错位的体验
 
设计中的一致性——界面篇
设计中的一致性——界面篇设计中的一致性——界面篇
设计中的一致性——界面篇
 
Accessibility jane zhou
Accessibility jane zhouAccessibility jane zhou
Accessibility jane zhou
 
知识管理交流
知识管理交流知识管理交流
知识管理交流
 
插画设计分享
插画设计分享插画设计分享
插画设计分享
 
世界杯推广设计分享会
世界杯推广设计分享会世界杯推广设计分享会
世界杯推广设计分享会
 
超级旺铺产品体验设计
超级旺铺产品体验设计超级旺铺产品体验设计
超级旺铺产品体验设计
 
适时帮助Ppt
适时帮助Ppt适时帮助Ppt
适时帮助Ppt
 
基于生活形态的用户分群研究
基于生活形态的用户分群研究基于生活形态的用户分群研究
基于生活形态的用户分群研究
 
Information visualization
Information visualizationInformation visualization
Information visualization
 
商家管理平台后台 后台菜单纸原型测试
商家管理平台后台 后台菜单纸原型测试商家管理平台后台 后台菜单纸原型测试
商家管理平台后台 后台菜单纸原型测试
 
卖家后台菜单项分类调研报告
卖家后台菜单项分类调研报告卖家后台菜单项分类调研报告
卖家后台菜单项分类调研报告
 
0414 旧城改造 我是卖家改版心得
0414 旧城改造 我是卖家改版心得0414 旧城改造 我是卖家改版心得
0414 旧城改造 我是卖家改版心得
 
简洁清晰,自然易懂
简洁清晰,自然易懂简洁清晰,自然易懂
简洁清晰,自然易懂
 
如何架构和管理个人的知识体系
如何架构和管理个人的知识体系如何架构和管理个人的知识体系
如何架构和管理个人的知识体系
 
如何架构和管理个人的知识体系
如何架构和管理个人的知识体系如何架构和管理个人的知识体系
如何架构和管理个人的知识体系
 
体验设计引导产品创新
体验设计引导产品创新体验设计引导产品创新
体验设计引导产品创新
 

I os 视觉分享

Editor's Notes

  1. 化工科技还感慨好几个
  2. 设备包含 iPhone iPod touch iPad
  3. 这时你需要设计 2 种分辨率的 视觉稿
  4. iPad 这样的一个改动 所带来的优势是什么 因为在 iPhone 上 屏幕过小 导致这些人机交互特性 不能很好的去发挥 , 展现 然而现在因为 iPad 扩大的展示空间 所以使得这些特性 能够更多的利用和发挥
  5. 在我们看来 4:3 这样一个比例 更接近与 1 本书的尺寸
  6. 以下是一些 模拟书本材质的 iPad APP 案例
  7. 在此刻我们可以看到 这里运用了 一些材质的肌理效果 装帧线 还有书签 这些都是拟物化设计的细节
  8. 下面来看下 如何结合做成 iPad 应用
  9. 下面我来介绍一下 我们刚完成的项目 Taobao for iPad 在刚产生想法时候我们首先会设想 我们的受众群体会在如何的场景下长时间使用 iPad. 而这些场景的特性是如何的 . 在这里我们简单例举了 以下几个场景
  10. 客厅的沙发上
  11. 卧室
  12. 卧室
  13. 咖啡厅
  14. 阳光洒进的地板上
  15. 从而我们提取了以上场景中的两个元素 , 本书和地板,
  16. 从而构成了 iPad 淘宝的主基调