Mobile design matters - iOS and Android - presentation version in cht

行動裝置介面設計

Mobile
Design
ma.ers!

2012/07/25
by
Light
Lin

主要內容
—  基本介紹

—  圖示

—  字型

—  版面安排

—  圖片輸出

—  延伸性的按鈕或圖片

開始之前，有件事…

需要先說⼀一下…

iOS
–
基本介紹
每年都在更新…

iOS
–
基本介紹

螢幕像素與解析度

—  iPhone

—  3GS
之前:
480x320px,
163

480px
3.5”

320px

iOS
–
基本介紹


—  iPhone

—  3GS
之前:
480x320px,
163ppi

—  4
之後:
960x640px,
326ppi

960px
3.5”

640px

iOS
–
基本介紹


—  iPhone

—  3GS
之前:
480x320px,
163ppi

—  4
之後:
960x640px,
326ppi

—  iPad

—  2
之前:
1024x768px,
132ppi
1024px
9.7”

768px

iOS
–
基本介紹


—  iPhone

—  3GS
之前:
480x320px,
163ppi

—  4
之後:
960x640px,
326ppi

—  iPad

—  2
之前:
1024x768px,
132ppi
2048px
9.7”
—  New
iPad:
2048x1536px,
264ppi

1536px

iOS
–
圖示

RePna很重要，但它是什麼？

我也是RePna，只要你站遠⼀一點

我是RePna

RePna的定義
Apple:
肉眼分辨不出兩個單獨的圖元

iOS
–
圖示

像素沒有小數點

iOS
–
圖示

設計時要注意

—  邊緣清晰

iOS
–
圖示

設計時要注意


—  對稱性

iOS
–
圖示

設計時要注意


—  對稱性

—  偶數尺寸

14x14 7x7

Not
symmetric

13x13 6.5x6.5

iOS
–
圖示

設計時要注意


—  對稱性

26x14,
2px
inner
border

—  線條寬度

26x14,
3px
inner
border

25x13,
3px
inner
border

iOS
–
圖示

設計時要注意


—  對稱性


—  線條寬度

—  細節調整

iOS
–
圖示

用哪些工具

—  使用Photoshop的shape進行設計

—  Illustrator進行輔助

iOS
–
字型
預設字型是HelvePca…

iOS
–
字型

iOS支援很多字型

iOS
–
版面安排
提供效的資訊…

iOS
–
版面安排

座標系統

—  座標系統依然是320x480與1024x768

480point
1024point

320point
768point

iOS
–
版面安排

RePna的作用

—  RePna的實際狀況

手機上看起來⼀一樣大，
實際上不同像素大小

iPhone
3GS
before iPhone
4
aXer

iOS
–
版面安排

版面標示

—  用RePna版面設計，把2像素當做1點

iOS
–
版面安排

文字標示

—  以1/2的值標示大小

iOS
–
版面安排

顏色標示

—  0~255標示顏色，0~1.0表示透明度，1.0表示不透明

iOS
–
版面安排

可用文字屬性

—  大小

—  顏色(以rgb,
0至255方式設定)

—  透明度(以0至1.0方式設定，1.0為不透明)

—  對齊(齊左/置中/齊右)

—  ⼀一般，粗體，斜體
—  陰影顏色(以rgb,
0至255方式設定)

—  陰影位置(x軸位移距離，y軸位移距離)

iOS
–
版面安排

瞭解系統元件

—  瞭解所有系統元件，使用它，不需要定義所有細節

iOS
–
版面安排

開發者網站

—  蘋果開發者網站的iOS介面元件與規範

版面安排

iOS的魔術數字:
44

—  視覺的律動

版面安排

iOS的魔術數字:
44


—  點選範圍的參考大小

版面安排

iOS的魔術數字:
44



—  在iPhone上是6.85mm，在iPad上是8.46mm

版面安排

iOS的魔術數字:
44



—  在iPhone上是6.85mm，在iPad上是8.46mm

—  版面安排的參考

iOS
–
圖片輸出
切得剛剛好不見得好…

iOS
–
圖片輸出

切圖注意事項

—  別把陰影切斷

iOS
–
圖片輸出

切圖注意事項


22x28 44x44
—  讓事情單純⼀一點
35x21 44x44

14x19 44x44

25x25 44x44

26x27 44x44

iOS
–
圖片輸出

切圖注意事項


—  讓事情單純⼀一點

—  讓使用者好點選

26x27 44x44

不好點選

iOS
–
圖片輸出

系統元件樣式

—  如無必要，不要重製系統元件

?

iOS
–
圖片輸出

輸出檔名

—  RePna的圖檔請在主檔名後面加上@2x

favorite.png favorite@2x.png

iOS
–
圖片輸出

App圖示

—  圓角

—  陰影

—  反光效果(只有這個可以關閉)

iOS
–
圖片輸出

發佈iOS
App準備圖片

—  還有⼀一些程式的畫面截圖

Non-‐rePna
iPhone
and
RePna
iPhone
and
iPod
Size
for
high-‐resoluPon

DescripPon
Size
for
iPad
(in
pixels)

iPod
touch
(in
pixels)
touch
(in
pixels)
iPad
(in
pixels)

ApplicaPon
icon(required)
57
x
57
114
x
114
72
x
72
144
x
144

App
icon
for
the
App
Store
1024
x
1024
1024
x
1024

512
x
512
512
x
512

(required)
(recommended)
(recommended)

768
x
1004
(portrait)
1536
x
2008
(portrait)

Launch
image
(required)
320
x
480
640
x
960

1024
x
748
(landscape)
2048
x
1496
(landscape)

Small
icon
for
Spotlight
search
50
x
50
(Spotlight
search
100
x
100
(Spotlight

results
and
Seangs
29
x
29
58
x
58
results)
search
results)

(recommended)
29
x
29
(Seangs)
58
x
58
(Seangs)

Document
icon
(if
necessary
64
x
64
128
x
128

22
x
29
44
x
58

for
custom
document
types)
320
x
320
640
x
640

Web
clip
icon(recommended)
57
x
57
114
x
114
72
x
72
144
x
144

Toolbar
and
navigaPon
bar

Approximately
20
x
20
Approximately
40
x
40
Approximately
20
x
20
Approximately
40
x
40

icon
(opPonal)

Tab
bar
icon
(opPonal)
Approximately
30
x
30
Approximately
60
x
60
Approximately
30
x
30
Approximately
60
x
60

Default
Newsstand
cover
icon

At
least
512
pixels
on
the
At
least
1024
pixels
on
At
least
512
pixels
on
the
At
least
1024
pixels
on

for
the
App
Store
(required
for

longest
edge
the
longest
edge
longest
edge
the
longest
edge

Newsstand
apps)

iOS
–
延伸性的按鈕或圖片
你可以節省⼀一些時間…

iOS
–

定義延伸按鈕

—  左側與上方的非延伸範圍

上邊界 5px

這就是設計
垂直延伸區域 1px
需要提供的

左邊界
5px

水平延伸區域 1px

iOS
–

只有1px在作延伸

上邊界 5px

垂直延伸區域 1px

左邊界
5px

水平延伸區域 1px

iOS
–

圖片的運用

這就是設計
需要提供的

iOS
–

材質圖片

這樣就可以了

40x40

340x340

iOS
–
小結

—  iOS設備

—  iPhone
3GS前:
480x320px;
iPhone
4後:
960x640px

—  iPad1/2:
1024x768px;
new
iPad:
2048x1536px

—  RePna:
肉眼分辨不出兩個獨立的單元

—  設計圖示

—  邊緣清晰、對稱、偶數尺寸、線條寬度、細節調整

—  字型

—  系統字型HelvePca,
58種支援字型

iOS
–
小結


—  座標系統沒有變兩倍

—  44的參考


—  注意陰影、單純化、好點選

—  RePna圖檔名要加@2x

—  延伸按鈕與圖片

—  延伸按鈕的實作、1px的延伸範圍，延伸圖片的運用

—  材質圖片的作法

Android
–
基本介紹
每個版本都差很多…

Android
– 基本介紹

螢幕尺寸

—  Small

小於3吋(7.5公分),
最少
426x320dp

—  Normal
(baseline)

3吋
(7.5公分)到4.5吋(11.5公分)之間,
最少470x320dp

—  Large

4.5吋(11.5公分)到10吋(25公分)之間,
最少640x480dp

—  Extra-‐large

大於10吋(25公分),
最少960x720dp

Android
– 基本介紹

螢幕解析度

—  ldpi

120dpi

—  mdpi
160dpi
(baseline)

—  hdpi

240dpi

—  xhdpi
320dpi

ldpi(120ppi) mdpi(160ppi) hdpi(240ppi) xhdpi(320ppi)

Android
–
基本介紹

尺寸與解析度組合
Low
density(120)
Medium
density(160)
High
density(240)
Extra
high
density(320)

ldpi
mdpi
hdpi
xhdpi

Small
screen

QVGA
(240x320)
480x640

WVGA800
(480x800)

WQVGA400
(240x400)

Normal
screen
HVGA
(320x480)
WVGA854
(480x854)

640x960

WQVGA432
(240x432)

600x1024

WVGA800
(480x800)

WVGA800
(480x800)

Large
screen
WVGA854
(480x854)

WVGA854
(480x854)

600x1024

WXGA
(1280x800)
1536x1152
2048x1536

Extra
Large

1024x600
1024x768
1920x1152

2560x1536

screen

1280x768
1920x1200
2560x1600

Android
–
圖示
注意彈性與最佳化…

Android
–
圖示

密度的概念
—  他們看起來都⼀一樣大

ldpi,

mdpi,

hdpi,

xhdpi,

Samsung
Galaxy
Y,

Samsung
Galaxy
Ace,

Samsung
Galaxy
S
Plus,

Samsung
Galaxy
SII
HD
LTE
,
133ppi 165ppi 233ppi 316ppi

Android
–
圖示

四種尺寸的圖片
—  他們只是看起來⼀一樣大

36x36 48x48 72x72 96x96

ldpi mdpi hdpi xhdpi

Android
–
圖示

不要只給大圖
—  不要直接使用大圖讓裝置縮小使用

—  行動裝置的記憶體很有限

Android
–
圖示

不要只給大圖


—  重新取樣的結果會很糟

Android
–
圖示

不要只給大圖


—  重新取樣的結果會很糟

—  細緻化

Android
–
圖示

Android定義了DP

—  DP(Density-‐independent
pixel)

—  PPI/DPI：⼀一英吋中有多少像素/點

—  DP/DIP：⼀一像素在mdpi(160ppi)時的大小

—  1
DP
=
1
pixel
in
mdpi(160ppi)
=
0.15875mm

1dp
=>
0.15875mm

Android
–
圖示

Android定義了DP

pixel)



—  1
DP
=
1
pixel
in
mdpi(160ppi)
=
0.15875mm

—  不同解析度下，1
DP所能包含的像素數目是不同的


Android
–
圖示

Android定義了DP

pixel)



—  1
DP
=
1
pixel
in
mdpi(160ppi)
=
0.15875mm

—  不同解析度下，1
DP所能包含的像素數目是不同的


1dp

=
0.75px 1dp

=
1px 1dp

=
1.5px 1dp

=
2px

Android
–
圖示

讓他們看起來⼀一樣大

—  注意不同解析度的比例

—  從mdpi(保持4的倍數)開始

—  手機跟電腦上看起來不⼀一樣大

48x48dp的圖示 (7.62x7.62mm)


36x36px 48x48px 72x72px 96x96px

Android
–
圖示

3:4:6:8的比例
—  圖示設計注意3:4:6:8的比例

—  以向量的方式製作

—  縮放後進行針對性微調

48x48dp的圖示 (7.62x7.62mm)


36x36px 48x48px 72x72px 96x96px

3 : 4 : 6 : 8

Android
–
圖示

Android
vs.
iOS

—  可將iOS的視覺元件共用於xhdpi與mdpi

—  目前的android
tablet幾乎都是mdpi

Motorola
XOOM
Google
Tablet
Nexus
7
Google
Nexus
S
Google
Galaxy
Nexus

149ppi
(1280x800)

216ppi
(1280x800) 233ppi
(480x800) 316ppi
(1280x720)


iPad
1/2
3GS
before
The
new
iPad
4/4S
aXer

132ppi 163ppi 264ppi 326ppi

Android
–
字型
3.0之前是Droid
Sans,
4.0用Roboto…

Android
–
字型

只有系統字型

—  可嵌入其他字型資料

3.0
before 4.0
aXer

Android
–
版面安排
從mdpi開始…

Android
–
版面安排

密度！尺寸！

—  密度指螢幕解析度，如120dpi,
160dpi…

—  尺寸指螢幕實際物理大小，以dp單位表示

—  版面規劃必須具有「彈性」

Android
–
版面安排

尺寸用dp，文字用sp
—  尺寸單位為dp，文字大小則用sp，兩者定義相同

—  sp會根據使用者設定偏好而有所調整

—  xhdpi(320ppi)中
1dp
=
1sp
=
2px

—  hdpi(240ppi)中
1dp
=
1sp
=
1.5px

—  mdpi(160ppi)中
1dp
=
1sp
=
1px

—  ldpi(120ppi)中
1dp
=
1sp
=
0.75px

—  dp
=
px
*
(160
/
ppi)

Android
–
版面安排

四種螢幕尺寸
—  Google定義了四種尺寸

—  Extra-‐large

最少960dp
x
720dp

—  Large

最少640dp
x
480dp

—  Normal

最少470dp
x
320dp

—  Small

最少426dp
x
320dp

Android
–
版面安排

兼容性的考量

—  Android設備的市場分佈：

ldpi
mdpi
hdpi
xhdpi

small
2.3%
2.4%

normal
0.7%
26.2%
57.8%
0.9%

large
0.3%
2%

xlarge
7.4%

Note:
This
data
is
based
on
the
number
of
Android
devices
that
have
accessed
Google
Play
within
a
7-‐day
period
ending
on
May
1,
2012.

Android
–
版面安排

手機與平板考量

—  手機與平板的尺寸考量

Google
Nexus
S
Google
Galaxy
Nexus
Motorola
XOOM
Google
Tablet
Nexus
7

233ppi(800x480)
316ppi
(1280x720)
149ppi
(1280x800)

216ppi
(1280x800)

=>
549x329dp =>
648x364dp =>
1374x635dp =>
948x592dp

—  在mdpi完成與標示版面編排

—  針對手機以480x320dp為主，必要時提供640x360dp

—  針對平板以1024x600dp(7吋)以及1280x800dp(10吋)為主

Android
–
版面安排

Android的版面標示
—  顏色用ARGB的表示方式，a的數值為0-‐255(255為不透明)

—  Android在顏色指定有更多選擇

Android
–
版面安排

Android的48dp理論

—  48dp約為7.62mm

—  蘋果的44
point在iPhone上為6.85mm，在iPad上為8.46mm

—  8dp的間隔距離

Android
–
版面安排

佈景主題的設定

—  Holo
Dark

—  Holo
Light

—  Holo
Light
with
dark
acPon
bars

Seangs
in
Holo
Dark.
Gmail
in
Holo
Light.
Talk
in
Holo
Light
with
dark
acPon
bar.

Android
–
版面安排

熟悉系統元件

Android
–
版面安排

設計規劃與實踐
—  要設計人員將版面實作出來很難

Android
–
版面安排

設計資訊的提供
—  設計所提供的資訊愈充足，程式製作也愈有效率

Android
–
圖片輸出
⼀一張圖片要做四次…

Android
–
圖片輸出

四組密度的圖檔
—  提供四種解析度使用的圖檔，以資料夾分開儲存

drawable-‐xhdpi/

awesomeimage.png

drawable-‐hdpi/

awesomeimage.png

drawable-‐mdpi/

awesomeimage.png

drawable-‐ldpi/

awesomeimage.png

Android
–
圖片輸出

Normal為尺寸基準點

—  針對手機可用320x480dp(px)

—  針對平板可用1024x600dp(px)與1280x800dp(px)

Android
–
圖片輸出

發布Android
app準備圖片

—  ApplicaPon
icon(required)

512x512
PNG
with
alpha;
Max
size
of
1024KB,
could
be
464
x
464
pixel

shape
with
48
pixels
on
each
side
for
padding

—  2
–
8
screenshots(required)

320w
x
480h,
480w
x
800h,
or
480w
x
854h;
PNG
or
JPEG
(no
alpha)
Full

bleed,
no
border
in
art.

—  PromoPonal
Graphic
(opPonal)

180w
x
120h,
PNG
or
JPEG
(no
alpha),
Full
bleed,
no
border
in
art.

—  Feature
Graphic
(opPonal)

1024w
x
500h,
PNG
or
JPEG
(no
alpha)
with
no
transparency.
Use
a
safe

frame
of
924x400
(50
pixel
of
safe
padding
on
each
side).

Android
–
聰明人做聰明事…

Android
–

9-‐patch圖片

—  在圖片的四周畫黑線，以定義延伸範圍

—  9-‐patch不做縮小處理

這就是設計
需要提供的

Android
–

Scalable
area
與
Fill
area

—  Scalable
area

—  上方與左側的黑線定義延伸範圍

—  Fill
area

—  下方與右側的黑線定義內容放置範圍

準備好圖片在四周增加1px並畫上黑線內容受到下方與右側黑線所影響

黑線本身在實際運用時並不會顯示出來
水平延伸範圍
垂直內容
範圍

垂直延伸
範圍

水平內容範圍

Android
–

延伸性圖片的運作
定義9-‐patch 實際上發生的事最後獲得的東西

Android
–
小結

—  Android設備

—  四種密度:
ldpi,
mdpi,
hdpi,
xhdpi

—  四種尺寸:
small,
normal,
large,
extra-‐large

—  設計圖示

—  讓他們看起來⼀一樣大

—  3:4:6:8的比例

—  字型

—  只有系統字型

—  可以內嵌字型

Android
–
小結


—  版面彈性的考量

—  手機以480x320dp為主；平板以1024x600與1280x800為主

—  佈景主題與系統元件的熟悉


—  四種解析度使用的圖檔

—  延伸按鈕與圖片

—  9-‐patch圖片的應用

結論與建議
總算到了這⼀一步…

系統的操作習慣與規範

螢幕呈現的限制
與操作便利性

系統之間風格
的差異性

結論與建議

—  設計細節的微調

—  系統的操作習慣與規範

—  螢幕呈現的限制與操作便利性

—  系統之間風格的差異性

—  版面彈性與容許值

附錄
—  iOS
Human
Interface
Guidelines

—  Android
User
Interface
Guidelines

—  phone-‐size.com

—  HelvePca的由來

Mobile design matters - iOS and Android - presentation version in cht

Recommended

Recommended

More Related Content

Similar to Mobile design matters - iOS and Android - presentation version in cht

Similar to Mobile design matters - iOS and Android - presentation version in cht (8)

Mobile design matters - iOS and Android - presentation version in cht