Thanh toán trong 2 giây - developers.zalopay.vn fileGroup list 1 Group list 2 12 12 76 16 16 10...
-
Upload
duonghuong -
Category
Documents
-
view
214 -
download
0
Transcript of Thanh toán trong 2 giây - developers.zalopay.vn fileGroup list 1 Group list 2 12 12 76 16 16 10...
Thanh toán trong 2 giây
GUIDELINESAugust 2017
GUIDELINESMERCHANT ZALO PAY
MỤC LỤC
1. Bar
1.1 Navigation Bars1.2 Status Bars
2. Views
2.1 Action Sheets2.2 Alerts2.3 Tables2.4 Web Views
3. Controls
3.1 Buttons3.2 Labels3.3 Pickers3.4 Progress Indicators3.5 Segmented Controls3.6 Switches3.7 Text Fields
4. Visual Specification
4.1 Font Specification4.2 Color
1. BAR
1.1 Navigation Bars
iOS
- Height: 45px- Background color: #008FE5- Color text & icon: #FFFFFF
26x26 26x2618 - Semibold
14 - Regular
12 12
14 - Regular18 - Semibold
12 12
45
Android
- Height: 62px- Background color: #008FE5- Color text & icon: #FFFFFF
24x24 24x2420 - Medium
13 - Regular 13 - Regular20 - Medium
16 16
16 32
62
16
1.2 Status Bars
- Height: 24px- Background color: #008FE5- Text color: #FFFFFF
2. Views
2.1 Action Sheets/Bottom Sheets
- Text main: 16pt - #24272B- Text sub: 13pt - #727F8C- Icon: 30px x 30px- Radius: 13px- Text button align: Center
16 16
56iOS
10 10
- Text main: 15pt - #24272B- Text sub: 13pt - #727F8C- Icon: 30px x 30px- Text button align: Left
Android16 16
56
2.2 Alerts/Dialogs
- Text content: 14pt - #24272B- Text content align: Center- Text button: 16pt - #008FE5- Icon: 60px x 60px- Rule text button: Text button important bold and to the left
Rule text button: Text button importantbold and to the left
iOS
20
30
30
46
340
- Text content: 14pt - #24272B - left- Text button: 16pt - #008FE5- Icon: 60px x 60px
Android
20
20
24
54
340
24
24
2424
24
2.3 Table
- Text main: 16pt - #24272B- Icon: 26px x 26px Default
Text main
Text main valueText main value
Value 1
12
12 12
1260
Default
- Text main value: 16pt - #008FE5
Value 1
- Text main value: 16pt - #C7C7CC
Value 2 (Normal)
- Text main value: 16pt - #24272B
Value 2 (Fill)
Value 2 (Normal) Value 2 (Fill)
Group list 1
Group list 2
12 12
76
16
16
10
Text tile group
Text sub
Text sub
- Text title group: 13pt - #727F8C- Text main: 16pt - #24272B- Text money + Receivemoney: 20pt - #06BE04 - Medium + Money pay: 20pt - #24272B - Medium- Text sub: 13pt - #727F8C
Group list 1
- Icon: 40px x 40px
Group list 2
Text money
Text main
Text main
Loading2.4 Web Views
- Text main: 16pt - #24272B- Text button: 14pt - #008FE5- Loading color: #129D5A
Text main
Text button
3. Controls
3.1 Buttons#008fe5
- Size text button: 18pt- Height: 54px- Margin left: 12px- Margin right: 12px
Có 3 trạng tháiDefault, Press, Disabled
#49BBFF
#008fe5
#49BBFF
#C7CAD3
#04BE04
#21D921
#4ABBFF
#91D6FF
Fill: #E5F5FFStroke: #4ABBFF
Fill: #F5FCFFStroke: #93D8FF
Text main
3.2 Labels
- Text main: 16pt - #ACB3BA- Text sub: 13pt - #ACB3BA
Text sub
Text button
3.3 Pickers
- Text button: 14pt - #008FE5- Text title: 16pt - #24272B- Text picker: 20pt - #24272B
Text title
Text picker
44
36
Progress Bars
Activity Indicators
3.4 Progress Indicators
215
14548
20145
- Size: 145px x 145px- Color: #77777A - Alpha: 90%- Radius: 10px
Activity Indicator
- Size: 2px- Color: #129D5A- Radius: 10px
Progress Bars
3.5 Segmented Controls/Tabs
- Height: 28px- Text size: 13pt- Radius: 3px
iOS
- Height: 54px- Text size: 15pt- Line active color: #CEEBFD
Android
30 30
54
3.6 Switches
iOS Android
3.7 Text Fields
Có 4 trạng thái
60
20x20 - #C7C7CC
12
8
12
- Label: 16pt - #ACB3BA - Regular- Line: 2px - #E3E6E7
Normal
- Title label: 13pt - #008FE5 - Regular- Label: 16pt - #24272B - Regular- Line active: 2px - #008FE5
Active
- Title label: 13pt - #FF0000 - Regular- Label: 16pt - #24272B - Regular
Fill
- Title label: 13pt - #FF0000 - Regular- Label: 16pt - #24272B - Regular- Line error: 2px - #FF0000
Error
Normal
Active
Error
Fill
Multi label
4. Visual Specification
4.1 Font Specification
Font: SF UI Text
Color text
#24272B
Text number money, 48ptText number money, 42ptText number money, 38ptText main, 16pt - #24272B
Text sub, 14pt - #727F8C
TEXT TITLE GROUP, 13pt - #727F8C
Text note, 13pt - #727F8C
Text note, 13pt - #008FE5
Text error, 13pt - #FF0000
iOS
#008FE5#727F8C #ACB3BA #06BE04 #FF0000
Font: Roboto
Color text
#24272B
Text number money, 48ptText number money, 42ptText number money, 38ptText main, 15pt - #24272B
Text sub, 13pt - #727F8C
TEXT TITLE GROUP, 13pt - #727F8C
Text note, 12pt - #727F8C
Text note, 12pt - #008FE5
Text note, 12pt - #FF0000
Android
#008FE5#727F8C #ACB3BA #06BE04 #FF0000
#24272B #008FE5#727F8C #ACB3BA #06BE04 #FF0000
4.1 Color
Color text
#4286F6 #129D5A #F6B501 #DE4438#ACB3BA #C7C7CC
Color icon
Thanh toán trong 2 giây
THANK YOU