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