Thanh toán trong 2 giây - developers.zalopay.vn fileGroup list 1 Group list 2 12 12 76 16 16 10...

24
Thanh toán trong 2 giây GUIDELINES August 2017

Transcript of Thanh toán trong 2 giây - developers.zalopay.vn fileGroup list 1 Group list 2 12 12 76 16 16 10...

Page 1: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

Thanh toán trong 2 giây

GUIDELINESAugust 2017

Page 2: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

GUIDELINESMERCHANT ZALO PAY

Page 3: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

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

Page 4: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

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

Page 5: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

Android

- Height: 62px- Background color: #008FE5- Color text & icon: #FFFFFF

24x24 24x2420 - Medium

13 - Regular 13 - Regular20 - Medium

16 16

16 32

62

16

Page 6: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

1.2 Status Bars

- Height: 24px- Background color: #008FE5- Text color: #FFFFFF

Page 7: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

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

Page 8: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

- Text main: 15pt - #24272B- Text sub: 13pt - #727F8C- Icon: 30px x 30px- Text button align: Left

Android16 16

56

Page 9: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

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

Page 10: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

- Text content: 14pt - #24272B - left- Text button: 16pt - #008FE5- Icon: 60px x 60px

Android

20

20

24

54

340

24

24

2424

24

Page 11: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

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)

Page 12: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

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

Page 13: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

Text main

Loading2.4 Web Views

- Text main: 16pt - #24272B- Text button: 14pt - #008FE5- Loading color: #129D5A

Text main

Text button

Page 14: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

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

Page 15: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

Text main

3.2 Labels

- Text main: 16pt - #ACB3BA- Text sub: 13pt - #ACB3BA

Text sub

Page 16: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

Text button

3.3 Pickers

- Text button: 14pt - #008FE5- Text title: 16pt - #24272B- Text picker: 20pt - #24272B

Text title

Text picker

44

36

Page 17: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

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

Page 18: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

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

Page 19: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

3.6 Switches

iOS Android

Page 20: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

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

Page 21: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

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

Page 22: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

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

Page 23: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

#24272B #008FE5#727F8C #ACB3BA #06BE04 #FF0000

4.1 Color

Color text

#4286F6 #129D5A #F6B501 #DE4438#ACB3BA #C7C7CC

Color icon

Page 24: Thanh toán trong 2 giây - developers.zalopay.vn fileGroup 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:

Thanh toán trong 2 giây

THANK YOU