教程說明分析ccb visual guidelines

ColorGREY4GREYGREY5GREY6 CamCard

Header

"HelveticaNeue",Helvetica,Arial,sans-

CamCard

Header

YaHei’,Arial,sans-CamCardCamCardCamCardCamCardCamCard

HeaderHeaderParagraphParagraphSmall

'MSPGothic',Arial,sans-??,'MalgunGothic',AppleGothic,sans-

NewButtonHover ORANGE2 WHITE,12px,bold 0px2px1pxrgba(0,0,0,0.1)NewButtonDisable ORANGE3 WHITE,12px,bold Button DARKBLUE WHITE,12px, ButtonHover DARKBLUE2 WHITE,12px,bold 0px2px1pxrgba(0,0,0,0.2)ButtonDisable DARKBLUE3 WHITE,12px,bold CancelButton WHIITE~GREY GREY5, GREY2,12px, CancelButtonHover WHIITE~GREY7 GREY4,1px GREY2,12px,bold 0px2px1pxrgba(0,0,0,0.1)CancelButtonDisable WHIITE~GREY7 GREY5,1px GREY4,12px,bold DeleteButton RED WHITE,12px, DeleteButtonHover RED2 WHITE,12px,bold 0px2px1pxrgba(0,0,0,0.2)DeleteButtonDisable RED3 WHITE,12px,bold ButtonswithmorebuttonsbuttonswithmoredividingNewButtonHoverLeftNewButtonHoverLeft三角形 GREY

左右3px左右3px

ORANGE2ORANGEORANGE1ORANGE2ORANGE3WHIITE~GREYWHIITE~GREYWHIITE~GREYWHIITE~GREY

---GREY5,左GREY4,右GREY5右GREY4,左GREY5GREY5,

GREY2,12px,GREY4,12px,

0px2px1pxrgba0000.1，0px2px1pxrgba0000.1，--0px2px1pxrgba0000.1，0px2px1pxrgba0000.1，-

1px,#fee6cfPrimaryPrimaryButtonPrimaryPrimaryButtonPrimaryButtonSecondarySecondaryButtonSecondarySecondaryButtonSecondaryButton-CCCCSigninButtonCCCCSigninButtonCCSigninButton

---

WHIITE~GREYWHIITE~GREYWHIITE~GREY

-----GREY5,GREY4,GREY5,---

GREY2,12px,GREY2,12px,GREY4,12px,

0px2px1pxrgba(0,0,0,0.1--0px2px1pxrgba(0,0,0,0.2--0px2px1pxrgba(0,0,0,0.1--0px2px1pxrgba(0,0,0,0.1-Buttonsbutton120px-用于一般按鈕，文字較短，加padding后按鈕長度仍不超過15thisisabuttonwithlong-用于一般按鈕，文字較長，加padding后按鈕長度超過thisisabuttonwiththisisabuttonwithDownloaddownload--Align-0px2px1pxrgba(0,0,0,0.2AlignDisable--AlignAndroid--AlignAndroid-0px2px1pxrgba(0,0,0,0.1AlignAndroid--AlignWindows--AlignWindows-0px2px1pxrgba(0,0,0,0.2AlignWindows--AlignInput& GREY5, GREY4,

GREY1,

004pxrgba(45,64,81,0.3

CannotbeCannotbe

RED1,YELLOW2,

GREY1,12px(input RED1,12px(error#a67c52,12px, AddSometextinsidetextarea.ThisAddSometextinsidetextarea.Thisisonlyforandline-heightSometextinsidetextarea.Thisisonlyforandline-height

sameasinputsameasinput

ErrorForm(standardForm1:Form1:Form2:Form3:

GREY1,12px,

Confirm

Confirm

Confirm

Bycreatingaccount,youagreetoourTermsofServiceand.

Forgetyour

LIGHTBLUE1,GREY2,LIGHTBLUE1,11px(clickable)line-height:20pxAlign

Don’thaveanaccount?Create AdminGREY2,LIGHTBLUE1,12px(clickable)line-height:20pxAlignFormFormerror1:Formerror2:Youraccountisunderreview,pleasecontact Error RED1,

admintoapproveyour

RED1,AlignLeftConfirmConfirmTitles(beforesigninginTitleTitle1:Title2:contentincontentintheGREY1,contentincontentinthe

contentincontentintheGREY1,GREY2,GREY2,lineheightcontentintheputyoursubtitleDropdowns,checkboxesandradio Dropdown WHIITE~GREY GREY5, GREY1,DropdownDropdownDropdownDropdownDropdown

WHIITE~GREYWHIITE~GREY

GREY4,GREY5,

GREY1,GREY4,

0px2px1pxrgba(0,0,0,0.1-DropdownDropdown ElementElementElementElement

GREY3,

GREY1,

04px10pxrgba(0,0,0,.2 backgroundUncheckedItem GREY4, Itemon GREY3, Itemon GREY4, DisabledItem GREY6, backgroundUncheckedItem GREY4,1px ItemonHover GREY3, Checked DARKBLUE1,1px DisabledItem GREY6,1px NavListItemListItemListItemListItemListItemListItemListItemListItemListItemListItemListItemListItemListItemListItemonListItemListItemListItemListItemwithListItemwithListItemwithListItemwithListItemwithListItemwithListItemwithListItemwithListItemwithIconListItemwithListItemwithIconListItemwithIconListItemwithIconListItemwithIconListItemwithIconListItemwithIconnavnav

210px/ GREY5, 0px2px0pxrgba(0,0,0,0.05 ListItem210px/ GREY1,ListItemListItemon210px/ GREY1,ListItemonListItem210px/ GREY GREY1,12px, 頂部有1px，ListItem左側(cè)有5*39px，DARKBLUE1ListItemwith210px/ GREY1ListItemwithListItemwith210px/270px GREY1,12px ListItemwith 20

Alxexandra )Techonligy Sales

12px,bold,

GREYAlxexandra )Techonligy Sales

Alxexandra )Techonligy Sales12px,GREY 12px,LIGHTBLUE Alxexandra )Techonligy SalesAlxexandra )Techonligy Sales

GREYGREYGREYAlxexandra )Techonligy Sales Alxexandra )Techonligy SalesAlxexandra )Techonligy SalesAlxexandra )Techonligy Sales

DARKBLUE1 Alxexandra )Techonligy SalesAlxexandra )Techonligy SalesAlxexandra )Techonligy Sales

Alxexandra )Techonligy SalesAlxexandra )Techonligy SalesAlxexandra )Techonligy Sales

AlxexandraDropdown

Dropdown Dropdown

Alxexandra

Dropdown Dropdown DropdownAlxexandra

Dropdown Dropdown Dropdown Veryshort240px(min 0px2px5pxrgba(0,0,0,0.3VeryshortAlertthatincludessomeclickablephrasesClick20AlertAlertthatincludessomeclickablephrasesClickVeryshortAlertAlertthatincludessomeclickablephrasesClickAlertAlertthatincludessomeclickablephrasesClick

REDREDREDRED

GREY1,12px,LIGHTBLUE1,bold(staticLIGHTBLUE1,GREY1,12px,#441119,12px,#441119,12px,YELLOW3,12px,

0px2px5pxrgba(0,0,0,0.30px2px5pxrgba(0,0,0,0.30px2px5pxrgba(0,0,0,0.30px2px5pxrgba(0,0,0,0.30px2px5pxrgba(0,0,0,0.30px2px5pxrgba(0,0,0,0.30px2px5pxrgba(0,0,0,0.30px2px5pxrgba(0,0,0,0.3

目的：通 說明為用戶提供良好的交互引導(dǎo)，在鼠標(biāo)指針懸停在目標(biāo)區(qū)域上方時顯示一個 tip（工具提示）。工具提示文本是一句簡短的動詞短語，來告訴用戶怎么操作，例如：“點擊編輯o,I’mao,I’ma

o,I’mao,I’ma

TooltipTooltip1Color:Triangle:Font:

GREY10px*12px,bold,GREY6Aligncenter

o,I’mao,I’ma

矩形框距離整個導(dǎo)航條Padding dely:0rmsAnimation fadeIn("fast")&Tooltip2:針對圖標(biāo) 、文字等較小對象的提出現(xiàn)規(guī)則: 鼠標(biāo)放在提示對象的區(qū)域內(nèi)，就一直保持提Tooltip2:針對圖標(biāo) 、文字等較小對象的提o,I’ma

提示三角形頂部（底部），距離提示對象Help

Stroke:Boxshadow:Font(normal):Font(emphasized):Align:Animation:出現(xiàn)規(guī)則

0px4px10pxrgba(0,0,0,0.212px,GREY鼠標(biāo)一離開幫助圖標(biāo)區(qū)域，就立即讓提示Dialog(extrasmallPleasenote,ifyouconnectto againyou’llhaveduplicatecontactsin Aresureyouwanttodisconnect

ParagraphPleasenote,ifyouconnecttothis you’llhaveduplicatecontactsinthe Areyousureyouwanttodisconnectthe Dialog(smallDialogPleasenote,ifyouconnectto againlater,you’llhaveduplicate

DialogAreyousureyouwanttodisconnect tactsin Areyousureyouwanttodisconnect DialogPleasePleasenote,ifyoudeletetheselectedcards,you’llbeunabletorecoverAreyousureyouwanttodeletetheselected

Dialog

Header

Paragraph

Areyousureyouwanttodel