iOS Vision Design

iOS平台（iPhone&iPad)视觉设计分享和交流 明飒（Mixar）2011.6

iOS视觉基础介绍

？

Apple触屏设备所使用的操作系统设备包括：iPhone, iPod Touch,iPad等

iPhone&iPod Touch iPadiPod Nano !

硬件设备

物理尺寸与屏幕分辨率的区别

设计建议：视觉设计稿放到具体设备环境里看真实效果

• 不同设备，色彩显示效果不同；• 电脑显示器分辨率不同于iPhone屏幕分辨率：电脑上好的视觉效果，iPhone上显示不一定好

屏幕以及分辨率

Retina Display

960X640480X320

iPhone4 达到 326 PPI（326pix per Inch）

精细度超过印刷品，对视觉设计要求更HD

分辨率

or

Mac Dell

制图环境

✓ 字体渲染：OS X渲染系统同iOS

✓ 利于资源交换 ：开发使用的都是Mac系统环境，提供切图和交流；熟悉开发软件Xcode；

✓ 其它诸如：设计师需要等等

推荐使用Mac

制图环境

华文黑体

HelveticaMac系统皆自带这两款字体Windows系统需要另外下载

默认字体

“Arial gets chosen because itʼs cheap, not because itʼs a great typeface.” 對於 Helvetica 命運不忿其實更多的是對設計歷史和設計文化的尊重，對於 Arial 的鄙視和嘲笑更多的是對商業的投機行爲和對設計傳統的踐踏的鄙視和嘲笑。

为什么Arial更为被人熟知

英文字体

主光源方向－垂直90度视觉光源

90

主光源方向－垂直90度视觉光源

高光天光

阴影

主光源对按钮视觉表现的影响

iPad界面视觉新特点

iPhone与iPad界面视觉差异

✓屏幕分辨率为1024X768，4:3的比例

✓对视觉显示质量要求更高；

✓可任意旋转方向，需要提供各方向视觉解决方案；

✓更趋向真实物体体验

iPhone与iPad界面视觉差异

3 : 2 4 : 3屏幕分辨率为1024X768，4:3的比例，更近于方形

2 : 1 左右分页

更趋向真实物体体验真实材料与肌理 物理动画特性

iPhone与iPad界面视觉差异

界面细节：更真实和细致，模拟真实环境

对比iPhone和iPad上日历App

日历 日历本强调本，纸张的视觉概念效率型的应用程序

iPhone iPad

界面设计规范HIG

@iOS开发者手册资源库

http://developer.apple.com/library/ios/navigation/

http://www.apple.com.cn/developer/mac/library/navigation/ios.html

在线阅读版

官方中文版

✓系统提供哪些默认样式✓系统提供哪些默认图标✓设计桌面图标注意哪些地方 等等...

视觉需要重点关注最后几章节

✓增加高清细节✓整体图形放大到200％✓非矢量图像如何放大而少损失 ...

最新版本 高清屏幕处理Tips

iOS视觉基础介绍✓什么是iOS✓屏幕以及分辨率✓设计制图环境✓默认中英文字体✓视觉主光源✓iPad视觉界面特点✓界面设计规范HIG

视觉设计方法

原型

快速原型－草图表达

画草图✓ 工具简单，快速原型✓ 绘制过程产生想法✓ 方便修改✓ 设计师的标配（干哪行设计都需要）

Keynote

✓ 交互原型，展示方案✓ 字体渲染效果完全同iOS✓ 支持动画特效，视频输出✓ 绘制工具齐全

X 不支持复杂的视觉样式

X 不能切图

高保真原型－便捷工具

添加照片

新联系人

姓氏

姓氏拼音或音标

名字

名字拼音或音标

公司

电话移动电话

电子邮件住宅

URL首页

iPod 下午3:08

取消 完成

哪一张是keynote绘制的？

程序截图 keynote绘制

答案

keynote的动画面板

一点感想...

设计这个，从许多方面来说并不是设计一个具体的东西，而是在重塑制作流程。

The design of this，in many ways wasn’t the design of a physical thing,it was figuring out the process.“

”

包层“壳”XDevelop Design

Develop Design

Develop Design

效能

营销

反馈机制

运营

...

需要团队合作的系统工程

Q&A

THANKS。