¶àͼʵÀý·ÖÏíMaterial Design¸´ÔÓÏìӦʽÉè¼Æ
À´Ô´£ºÕ¾¿á ×÷Õߣºchance7
¡¾ÉùÃ÷¡¿±¾ÎÄ×÷ÕßÊÇGekecÍøÕ¾²úÆ·×ܼàChance¡£Chance×î½üÑо¿ÁËGoogle Material Design¹æ·¶£¬²¢½«Ñо¿³É¹ûÓÃÓÚwww.gekec.comµÄÍøÕ¾Éè¼Æ¡£Ä¿Ç°ÍøÉÏ·ÖÏíµÄ¸÷ÖÖ¹¥ÂÔ»ù±¾É϶¼ÊÇMaterial Design¶ÔÓÚappÉè¼ÆµÄÓ¦Óᣲ»Í¬ÓÚÄÇЩAPPÉè¼ÆµÄ·ÖÏí£¬±¾ÎÄͨ¹ýʵÀý½éÉÜÁËMaterial DesignÔÚÏìӦʽÍøÒ³Éè¼ÆµÄʵսӦÓã¬ÄÚº¬ÏìÓ¦Âß¼¡¢×ÖÌåÔ¼ÊøµÈÖî¶à¸É»õ£¬´óÁ¿Éè¼ÆͼƬÊÇ´ÓGekecÍøÕ¾ÕæʵÉè¼Æ¸åÖнÚÑ¡¡£ÎªÁ˱í´ï¶ÔÔ×÷ÕßµÄ×ðÖØ£¬·¢±íºÍת·¢±¾ÎÄÇë±£Áô´ËÉùÃ÷¡£
Material Design
2011Ä꣬GmailÓÊÏäµÄ°´Å¥±äµÃ¸ü¼Ó±âƽ»¯¡£2012Ä꣬GoogleÒýÈë·Ö²ãµÄ¿¨Æ¬Éè¼Æ£¬Ê¹Óøü¶àµÄ¿Õ°×ºÍ¾«ÐÄÉè¼ÆµÄ²ã´ÎÅÅ°æ½á¹¹¡£¾ÀúÁ˼¸ÄêµÄµü´úºÍÌáÁ¶£¬GoogleÑ°ÕÒµ½ÁËÒ»ÖÖ¿ÉÒÔ¹áͨµÄÀíÂÛÌåϵ£¬¼´°ÑϵͳÄڵĸ÷ÖÖÉè¼Æ¶¼¹æ·¶³ÉÒ»ÖÖ±äÐεÄֽƬ£¬²¢Ì×ÓÃÏÖʵÖÐֽīµÄÎïÀíÄ£ÐͽøÐн»»¥£¬Õâ¾ÍÊÇ2014ÄêGoogle I/O´ó»á¡ÖØ·¢²¼µÄMaterial Design¡£
Material DesignÌá³öÁËƽÃæÏñËصÄZÖá¸ÅÄͨ¹ýֽƬÔÚÎïÀíÊÀ½çÖÐÐÎ̬µÄ³éÏóºÍÌáÁ¶£¬¶¨ÒåÁ˸÷ÖÖÐÅÏ¢²ã¼¶ºÍ³£ÓÃ״̬µÄ±í´ï·½Ê½£¬²¢Ïêϸ½²½âÁ˸÷¸öϸ½ÚµÄ´¦Àí·½·¨£¬¾ÍÏñÒ»±¾¿¼ÊÔ´ó¸Ù£¬ÄÒÀ¨Á˲úÆ·Öг£ÓõÄUIϸ½Ú£¬ÉõÖÁһЩUXϸ½Ú¡£ÕâÀï²¢²»×¸Êö£¬Ïë¿´ÏêϸµÄDesign GuideÇëµã»÷ÕâÀҪ°áÌÝ×Ó£©£¬·Òë°æµÄµã»÷ÕâÀï¡£
Èç¹û˵UXºÍUIµÄÕ¹ÏÖ£¬ÊÇÁ¬½Ó²úÆ·ÓëÓû§µÄŦ´ø£¬ÄÇô²úÆ·µÄUXÒÔ¼°UIÓ¦´Ó²úÆ·µÄºËÐÄÂß¼ÑÓÕ¹²¢ÇÒÍÆÑݶøÀ´¡£Èç¹û˵²úÆ·µÄºËÐÄÂß¼»òÕß¼¼ÊõµÄʵÏÖÄÑÒ×»á³ÉΪÉè¼ÆÕ¹ÏÖµÄÏÞÖÆ£¬ÄÇôUXºÍUIÓ¦ÊÇÔÚ¸÷ÖÖÏÞÖÆÏÂËùȨºâ³öµÄ×îÓŽ⡣¶øMaterial DesignÔòÏñÊǼÜÇÅ˵Ã÷»òÕßȨºâ³öµÄͨÓý⣬¶ÔÓÚÖÚ¶à²úÆ·×öÒԲο¼¡£
¼ÈÈ»ÊÇͨÓôó¸Ù£¬ÄÇôÅ׿ª²úÆ·½ö̸Éè¼Æ£¬ÄÑÃâ»áÍ£ÁôÓړͨÓÔ²ãÃ棬¶øÀûÓÃMaterial Design½øÐÐʵսµÄ°¸Àý£¬ÍøÉÏÒ²¶àÊÇappµÄһЩÉè¼Æ³¢ÊÔ¡£Ç¡ºÃÔÚ½üÆڵŤ×÷ѧϰÖУ¬½ÓÊÖÒ»¸öÏìӦʽwebÕ¾µãµÄ¸Ä°æÉè¼Æ£¬±ÊÕ߲ο¼Material Design×ܽáÒÔÏÂÈýµã·ÖÏíÈçºÎʵÏÖ¸´ÔÓÏìӦʽվµãµÄMaterial Design¡£
Ò»¡¢ÇåÎúÇáÁ¿µÄ²úÆ·Âß¼
°Â¿¨Ä·ÌêÐ뵶·¨ÔòͬÑùÔÚ²úÆ·¼Ü¹¹Éè¼ÆÖÐÊÊÓã¬Ô½¼òµ¥µÄ¼Ü¹¹Ô½ÓÐÀûÓÚ²úÆ·µÄÉú³¤¡£ÇåÎúÇáÁ¿µÄ²úÆ·Âß¼£¬»á¼õÉÙÓû§µÄ¸ºµ£¸Ð£¬´Ó¶øÌá¸ß½»»¥ÉϵÄЧÂʺÍÓäÔøС£
·ÖÎöMaterial Design£¬»á·¢ÏÖGoogle¹éÄÉÁËÁ½ÀิÔÓÄÚÈÝÐÅÏ¢µÄ²ã¼¶¹Øϵ£¬·Ö±ðÊÇCardºÍTile£¨List ÒÔ¼°ÆäËûÏàËƶ¨ÒåÊôÓÚͬÀàµÄÄÚÈÝÐÅÏ¢²ã¼¶£©£¬ÆäËû¶¨Òå¶àÓÃÓÚUI½á¹¹¼°Ï¸½Ú¡£ÆäÖУ¬Google¶¨ÒåCardÊÇÒ»Öֶ๦ÄÜÐÅÏ¢µÄ¾ÛºÏÈë¿Ú£¬ÐÅÏ¢²ã¼¶Ó¦½Ï¸ß£¬ÌåÏÖÔÚZÖáÓ¦¸ßÓÚÆäËûÐÅÏ¢£¬ÊÓ¾õÉÏÓÐÒõÓ°±íÏÖ²¢¼ÓÒÔÔ²½Ç´¦Àí¡£¶øtile£¨»òͬÀàÐÅÏ¢ÁÐ±í£©ÔòÊÇ£¨Í¬Àà»òÏà¹Ø£©ÐÅÏ¢µÄÄ£¿éÕ¹ÏÖ£¬ÐÅÏ¢²ã¼¶Ó¦½ÏµÍ£¬ÌåÏÖÔÚZÖáÓ¦ÂÔµÍÓÚÆäËûÐÅÏ¢£¬ÊÓ¾õÉÏÓ¦ÎÞÒõÓ°±íÏÖ²»¼ÓÔ²½Ç´¦Àí¡£Æä½á¹ûÊÇ´ÓÊÓ¾õ²ãÃæÈòúÆ·¶ÔÏó¸ü¸ßЧ¡¢¸ü¼òµ¥£¬Í¬Ê±Ò²¸ü¾ßÎïÀíÊÀ½çµÄ“Õæʵ¸Ð”¡£
×î½ü½ÓÊÖµÄÏîÄ¿ÊÇGekec.comµÄÈ«Õ¾¸Ä°æ¡£Gekec£¨¸ï¿Í£©ÊÇGeekºÍMaker½»¼¯£¬Ï²»¶¸ïУ¬Ï²»¶¼¼Êõ·¶¶ù¡¢Ð³±µÄ¿Æ¼¼Ïû·ÑÆ·£¬Ï²»¶×Ô¼º¶¯ÊÖ´´Ôì²úÆ·£¬Gekec.comÒ²¾ÍÊÇÕâÀàÈ˵ľۼ¯µØ£¬Õû¸ö²úÆ·ÄÒÀ¨µçÉÌ¡¢×ÊѶ£¨»òh5Ðû´«£©¡¢²ð»ú¡¢ÒÔ¼°ÉçÇøÌÖÂ۵ȸ÷ÖÖ¹¦ÄÜ£¬¸Ä°æÇ°Âß¼¸´ÔÓ£¬¹¦ÄÜ·±¶à¡£¸Ä°æ¿ªÊ¼Ö®³õ£¬±ÊÕßÁ˽⵽¸ï¿ÍȺÌåʱ£¬±ãÈÏΪÀíÐÔ¼ÓŨÖØGeekζµÀµÄGoogle·ç¸ñ»òÐíÊÇ×îÊʺÏGekec.comµÄÊÓ¾õÌåϵ£¬È»¶ø¸´ÔӵIJúÆ·Âß¼²»ÄܸøÓû§´øÀ´¸ßЧµÄ½»»¥ÌåÑéºÍÓäÔõÄʹÓøÐÊÜ£¬ÊÓ¾õÉÏÒ²²¢²»ÄܺܺõÄͨ¹ýMaterial DesignÍÆÑݲ¢Çұ仯£¬ËùÒÔÊáÀí³öÇåÎú¡¢ÇáÁ¿ÇÒ·½±ãÊÓ¾õͳһµÄ²úÆ·Âß¼³ÉΪµÚÒ»ÈÎÎñ¡£
Gekec.comµÄ²úÆ·È«¹¦ÄÜÔڴ˲¢²»×¸Êö£¬Product FeatureÈ«²¿Îª´ï³ÉÒ˼ÒʽµÄÌåÑéʽÉè¼Æ£¬¾¹ýÊáÀí¿ÉÒÔ¹éÄɳÉÈý²ã£¬ÊײãΪÌåÑé²ã£¨¶àÈë¿ÚµÄÊ×Ò³·âÃ棩¡¢µÚ¶þ²ãΪ»õ¼Ü²ã£¨°üÀ¨É̳ÇÄ£¿é¡¢²ð»úÄ£¿é¡¢ÌåÑéÄ£¿é£©¡¢µÚÈý²ãΪÏêϸ¡¢²Ù×÷²ã£»
ÈçÉÏͼ£¬ÇáÁ¿µÄ²úÆ·½á¹¹¼´¿É·½±ãÉè¼ÆµÄÍÆÑÝ¡£ÀýÈçÆäÖеÚÒ»²ã¿ÉÒÔͨ¹ýH5Áé»îÅÅ°æ×ö²úÆ·È«·½Î»ÌåÑ飬µÚ¶þ²ãÓëµÚÈý²ãµÄ¹Øϵ¼´¿ÉÀûÓÃMaterial CardºÍTile±íÏÖ¡£Card±í´ïÁËÈ«²¿ÐÅÏ¢µÄ¾ÛºÏºÍÈë¿Ú£¬tileÔò±íÏÖͬÀàÐÅÏ¢µÄÂÞÁС£´ÓcardÌøתµ½×îÖÕÒ³Ó¦ÓÐÒ»ÖÖ¿¨Æ¬Õ¹¿ªµÄÌåÑé¡£
¶þ¡¢ÊÊÒËUIÍÆÑݵÄÏìÓ¦°ì·¨
ÔÚ²úÆ·Âß¼ÇåÎú¼ò½àµÄ»ù´¡ÉÏ£¬Ò»Ì×ÊÊÒËMaterial Design±ä»¯µÄÈ«³ß´çÏìÓ¦°ì·¨¾Í³ÉΪ¸´ÔÓÏìӦʽÍøÒ³Éè¼ÆµÄºËÐÄÄÚÈÝ£¬ÏìÓ¦°ì·¨Äܹ»Ö±½Ó¾ö¶¨¹¦ÄÜÄ£¿éµÄÏìÓ¦Âß¼ÒÔ¼°UIµÄ±ä»¯¡£Êµ¼Ê²Ù×÷ÖУ¬ÏìÓ¦°ì·¨µÄÈ·¶¨Ö÷Òª¾ÍÊÇÈ·¶¨Õ¤¸ñºÍÕ¼±È¡£
1£©Õ¤¸ñ
ÍøÒ³Õ¤¸ñϵͳÊÇ´ÓƽÃæÕ¤¸ñϵͳÖз¢Õ¹¶øÀ´¡£¶ÔÓÚÍøÒ³Éè¼ÆÀ´Ëµ£¬Õ¤¸ñϵͳµÄʹÓ㬲»½ö¿ÉÒÔÈÃÍøÒ³µÄÐÅÏ¢³ÊÏÖ¸ü¼ÓÃÀ¹ÛÒ׶Á£¬¸ü¾ß¿ÉÓÃÐÔ¡£¶øÇÒ£¬¶ÔÓÚÇ°¶Ë¿ª·¢À´Ëµ£¬ÍøÒ³½«¸ü¼ÓµÄÁé»îÓë¹æ·¶¡£Õ¤¸ñϵͳµÄ¾ßÌ庬ÒåÒÔ¼°Ê¹Ó÷½·¨Ôڴ˲»ÔÙ׸Êö£¬¸ÐÐËȤµÄÅóÓÑ¿ÉÒԲο¼ÌÔ±¦UEDµÄһЩÎÄÕ£º
ÍøÒ³Õ¤¸ñϵͳÑо¿£¨1£©£º960µÄÃØÃÜ
ÍøÒ³Õ¤¸ñϵͳÑо¿£¨2£©£ºµ°¸âµÄÇз¨
ÍøÒ³Õ¤¸ñϵͳÑо¿£¨3£©£ºÁ£¶ÈÎÊÌâ
ÍøÒ³Õ¤¸ñϵͳÑо¿£¨4£©£º¼¼ÊõʵÏÖ
ÔÚGekec.comµÄÏîÄ¿ÖУ¬¾Àú²úÆ·¹¦ÄÜÄ£¿éµÄÊáÀí£¬±ÊÕßʹÓÃÁË12Õ¤¸ñϵͳ£¬Ä¿µÄÊÇÄܹ»Âú×ã2¡¢3¡¢4¡¢6µÄÒ³ÃæµÈ·Ö¡£×¢£º¾ßÌåÕ¤¸ñϵͳµÄ½¨Á¢Ó¦Òò²úÆ·ºÍÉè¼ÆËù¾ö¶¨£¬Õ¤¸ñϵͳ²¢²»ÊÇÍòÄܵģ¬¶øÈ·¶¨µÄÕ¤¸ñϵͳ¿ÉÒÔΪÕû¸öÏìӦʽÉè¼Æ×ö¹æ·¶ÐԲο¼¡£
2£©Õ¼±È
A.Õ¼±È
ÈçÉÏÎÄ˵£¬12Õ¤¸ñÔ¼ÊøÍøÒ³µÄÄÚÈÝÇø£¬¶øÍøÒ³µÄÄÚÈÝÍùÍù²¢²»Õ¼¾ÝÆÁÄ»µÄÈ«²¿¿í¶È£¬¶øÊÇÔÚÁ½²àÁôÓмä϶£¬ÓªÔì¿Õ¼ä¸Ð¡£ÓÉÓÚÆÁÄ»µÄÏÞÖÆ£¬ÕâÖÖ¿Õ¼ä¸ÐÔÚÒƶ¯¶ËÉ豸ÏԵøü¼ÓÖØÒª£¬Èçͼ£¬È»¶øÇ¿¼Ó¹Ì¶¨µÄmargin pixel»áʹµÃ12Õ¤¸ñÕ¼±È²»¶¨£¬ÄÑÒÔ¿ØÖÆÉè¼ÆЧ¹û¡£
ËùÒÔÕ¼±ÈÓ¦ÊÇ12Õ¤¸ñ¿í¶È¶ÔÓ¦ÆÁÄ»µÄ±ÈÖµ£¬¼´£º
12Õ¤¸ñ¿í¶ÈXÕ¼±È=ÆÁÄ»¿í£¨ÁÙ½çµã£©
ÓÅÐã¶øÇÉÃîµÄÕ¼±ÈÈ·¶¨¿ÉÒÔÈÃÍøÒ³Éè¼Æ³ÊÏÖÔÚ¸÷¸öÖ÷Á÷ÆÁÄ»ÉϾùÊÇ100%ÏñËØ¡£
ÕâÀï¼òµ¥½âÊÍһϣ¬ÈôÒ»¸ö200px¿íµÄÔªËØÔÚ1200px¿íµÄÆÁÄ»ÉÏ£¬ÆäÕ¼±ÈΪ16.67%£¬Í¬ÑùµÄÂß¼£¬µ½1024pxµÄÆÁÄ»ÉÏÕâ¸öÕ¼±È16.67%µÄÔªËؼ´Õ¼¾ÝÁË170.67px£¬ÕâÑùµÄÇé¿öÏ£¬Ä³Ò»¸öÎïÀíÏñËØÎÞ·¨Õ¼¾Ý100%£¬ÔÚÍêÃÀÖ÷ÒåµÄÉè¼ÆʦÑÛÀÊÇÎÞ·¨½ÓÊܵÄÊÂÇé¡£¶øÇÉÃîµÄÕ¼±È£¬¿ÉÒÔÈÃÔªËØÔÚ¸÷¸öÖ÷Á÷ÆÁĻռ¾Ý100%ÏñËØ£¬ÍêÃÀÕ¹ÏÖÉè¼ÆÒâͼ¡£
B.ÁÙ½çµã
ÁÙ½çµã£¨breakpoint£©ÊÇÖ¸ÏìӦʽÍøÒ³·¢Éú²¼¾Ö±ä»¯µÄ¹Ø¼üµã£¬È瓵±ÆÁÄ»¿í¶ÈСÓÚ480pxʱ¼ÓÔØ...Ñùʽ£¬µ±¿í¶ÈÔÚ480px- 600pxÖ®¼äʱ¼ÓÔØ…Ñùʽ”¡£ÏìӦʽÍøÒ³ÀíÂÛÉÏÓÐÎÞÊýÖֳߴ磬ÎÒÃDz»¿ÉÄÜҲûÓбØҪΪÿ¸ö³ß´ç¶¼È¥×öÉè¼Æ£¬ÐèÒª×öµÄÊÇÑ¡¶¨¼¸¸öÁÙ½çµã×öÉè¼Æ£¬ÔÚÁ½¸öÁÙ½ç µãÖ®¼äÊÇÑÓÐøÉÏÒ»¸öÁÙ½çµãµÄ²¼¾Ö¡£
ÁÙ½çµãÈ·ÈÏ×ÜÌåÄ¿µÄ¾ÍÊÇΪÁ˱£Ö¤Ò³ÃæÔÚÊÖ»ú£¨ÆÁÄ»ºÜС£©¡¢Æ½°å£¨ÆÁÄ»Öеȣ©¡¢PC£¨ÆÁÄ»´ó£©ÉϼÓÔØÏàÓ¦µÄÑùʽ£¬È»¶ø¾Ñé½ÏÉÙµÄÉè¼ÆʦÍùÍù»á¿àÄÕÒ»¸öÎÊÌ⣬ÄǾÍÊǸßÏñËصÄÊÖ»úÆÁÄ»ºÍµÍÏñËصÄƽ°åÆÁĻӦÈçºÎ´¦Àí¡£ÀýÈçÉè¼Æʦ»áµ£ÐÄ1080pµÄÊÖ»ú¼ÓÔØ´óÆÁĻҳÃ棬»òÕß720pµÄƽ°å¼ÓÔØСÆÁĻҳÃæ¡£
µ«ÐèҪעÒâµÄÊÇ£¬ÏìӦʽÍøÒ³²»Í¬ÓÚAPPµÄÆÁÄ»ÊÊÅä¡£ÍøÒ³ÊdzÁ½þÓÚä¯ÀÀÆ÷µÄ²úÆ·£¬ä¯ÀÀÆ÷ËùÆô¶¯µÄÆÁÄ»ÏñËزſÉÒÔ±»ÈÏΪÊÇÁÙ½çµãµÄ²Î¿¼µã£¬Îª´Ë£¬±ÊÕß×öÁËһЩ²âÊÔ£¬ÈçÏÂ±í£¬¿ÉÒÔ¿´³ö²»ÉÙ1080pÊÖ»úÔÚä¯ÀÀÆ÷ÖнöÆô¶¯360px£¬¶øÉñÆæµÄipadÎÞÂÛÊDz»ÊÇretinaÆÁÄ»£¬ÎÞÂÛÊDz»ÊÇmini£¬¾ùÏÔʾ1024x768px ¡£
´ÓÉϱí¿ÉÒÔ¿´³ö£¬Ðí¶àµ£ÐÄÆäʵ²¢²»ÐèÒª¡£×ÛÉÏ£¬ÔÚGekec.comµÄÏîÄ¿ÖУ¬±ÊÕßΪ´ïµ½¶àÊýÖ÷Á÷ÆÁÄ»100%ÏñËصÄ×·Ç󣬼´Ðè´ïµ½ÄÚÈÝÇøÔÚÖ÷Á÷ÆÁÄ»ÁÙ½çµãµÄÕ¼±È¿ÉÒÔ±»12µÈ·Ö£¬½ø¶ø»ñµÃ12Õ¤¸ñ£¬¼´£º
12µÄ¹«±¶ÊýXÕ¼±È=Ö÷Á÷ÆÁÄ»³ß´ç
ÏîÄ¿ÖоÀúÁËһЩ²âÊÔºÍÈ¡Éᣬ×îÖÕÈ·¶¨Õ¼±ÈΪ93.75%£¬ÁÙ½çµãΪ1280px¡¢1024px¡¢768pxºÍ320px¡£
¾ßÌåΪ£º
1280px<=screen£¬Õ¼±È93.75%£¬12Õ¤¸ñÔÚµäÐÍÆÁ£¨1280px£©¿í1200px£»
1024px<=screen<1280px£¬Õ¼±È93.75%£¬12Õ¤¸ñÔÚµäÐÍÆÁ£¨1024px£©¿í960px£»
768px<=screen<1024px£¬Õ¼±È93.75%£¬12Õ¤¸ñÔÚµäÐÍÆÁ£¨768px£©¿í700px£»
320px<=screen<768px£¬Õ¼±È93.75%£¬12Õ¤¸ñÔÚµäÐÍÆÁ£¨320px£©¿í300px£»
ÈçÉÏͼµÄÕ¼±È»®·Ö£¬Ò³ÃæÔªËØ¿ÉÒÔÍê³ÉÁé»î¡¢¹æ·¶µÄÏìÓ¦¡£¿ÉÒÔÒÔ´Ë×÷ΪÕû¸ö²úÆ·µÄÏìÓ¦°ì·¨£¬ÔÚ´Ë»ù´¡Ö®ÉÏ£¬¿ÉÒÔ¶ÔMaterial Design½øÐÐÈ«ÃæµÄÍÆÑÝ¡£
Èý¡¢¾«µñϸ×ÁµÄÒ³Ãæϸ½Ú
Èç¹û˵²úÆ·Âß¼ÊÇÕû¸öÍøÕ¾µÄ¹Ç¼Ü£¬ÄÇô¾«µñϸ×ÁµÄÒ³Ãæϸ½ÚÔò¿ÉÒÔ±ÈÓ÷ΪÍøÕ¾µÄÆøÖÊÁé»ê¡£ÓÐÇáÁ¿¼¶µÄ²úÆ·¹¹¼ÜºÍÃ÷È·Áé»îµÄÏìӦʽ°ì·¨ºó£¬¼´¿Éͨ¹ýMaterial DesignµÄ¹Ù·½ËµÃ÷½øÐÐÈ«ÃæÉè¼Æ¡£ÔÚMaterial DesignµÄ˵Ã÷ÖУ¬ÒѾÏêϸ½âÊÍÁ˸÷¸ö״̬µÄÔ¼ÊøºÍϸ½Ú£¬Ôڴ˲¢²»×¸Êö£¬±ÊÕß½öÌôѡһЩµäÐ͵Äϸ½Ú¡£
1£©css¶¯»
Material DesignÖпªÆªµÚÒ»Õ½ڱ㽲ÊöÁ˶¯»¸øÓû§µÄÖ±¹Û¸ÐÊÜ£¬ËµÃ÷¸ÐÖªÒ»¸öÎïÌåÓÐÐεIJ¿·Ö¿ÉÒÔ°ïÖúÓû§Àí½âÈçºÎÈ¥¿ØÖÆËü¡£Ò»Ð©Ï¸½ÚλÖõĶ¯»ÄܸøÓû§ÌåÑéÉϵľªÏ²¡£È»¶øÔÚweb¶ËʵÏÖ¶¯»Ð§¹û²¢²»ÏñappÀïÄÇÑùµÄÈÝÒ×£¬´óÁ¿JSÒ²»áÓ°ÏìÒ³Ãæ¼ÓÔØËÙ¶ÈÉõÖÁÓ°ÏìÒ³ÃæÆäËû´úÂë¡£ËùÒÔ±ÊÕßÑ¡ÔñÀûÓÃCSS¶ÔÒ³ÃæһЩϸ½Ú¼ÓÒÔ¶¯»Ð§¹û¡£
A.µã»÷°´Å¥
Material Design¸ø³öÁËÒ»ÖÖripple button£¬³éÏóÁËÈËÓÃÊÖ´¥Åö¿¨Æ¬µÄÁ°äôЧ¹û£¬¸øÓû§Ò»ÖÖȫеÄʹÓÃÌåÑ飬»¶ÓÀ´Gekec.comµã»÷³¢ÊÔ¡£
B.ÊäÈë¿ò
¼òµ¥µÄDes criptionºÍÒ»ÌõºáÏߣ¬³éÏóÁËʵÌåÎÄ×Ö¿¨Æ¬µÄÌîд¹ý³Ì£¬¿ÉÒÔ°ïÖúÓû§¶ÔÊäÈëÇøÓòÓÐʵÌ廯µÄÀí½â£¬»¶ÓÀ´Gekec.comµã»÷³¢ÊÔ¡£
2£©ÎÄ×ÖÑùʽ
Material DesignÖÐÇ¿µ÷“ͬʱʹÓùý¶àµÄ×ÖÌå³ß´çºÍÑùʽ£¬¿ÉÒÔÇáÒ׵Ļٵô²¼¾Ö”£¬²¢Ô¼ÊøÁ˳£ÓõĻù±¾Ñùʽ¾ÍÊÇ»ùÓÚ12sp¡¢14sp¡¢16sp¡¢20spµÄ×ÖÌåÅÅ°æ¡£
ÊìϤAndroidµÄÅóÓÑ¿ÉÄܶÔspµÄ¸ÅÄî²¢²»Ä°Éú£¬sp£ºScale-independent pixels£¬ËüÊÇ°²×¿µÄ×ÖÌ嵥룬ÒÔ160PPIÆÁĻΪ±ê×¼£¬µ±×ÖÌå´óСΪ 100%ʱ£¬ 1sp=1px£»È»¶øÏìӦʽµÄÍøÒ³²¢²»ÊÇ°²×¿£¬ÍøÒ³¸üÐèÒªÎïÀíÏñËصijߴçÔ¼Êø£¬ËùÒÔ±ÊÕßÔÚËù»®·ÖµÄÁÙ½çµã¼ÆËãÁËÒ»ÏÂËù²âÊÔÆÁÄ»µÄä¯ÀÀÆ÷PPI£¬ÈçÏ£º
iphone5: 320x568px/4Ó¢´ç/PPI=162.95
ÈÙÒ«6£º360x640px/5Ó¢´ç/PPI=146.86
ipad£º1024x768/7.9Ó¢´ç/PPI=131.96
ipad mini£º1024x768/7.9Ó¢´ç/PPI=162.03
´ÓÉÏÃæµÄÊý¾Ý¿ÉÒÔ¿´³ö£¬´ó¶àä¯ÀÀÆ÷Æô¶¯ÏñËØËù²úÉúµÄPPI´óÔ¼ÔÚ160×óÓÒ£¬ËùÒÔij¶ÎÎÄ×ÖÔÚPC¶ËÔ¼ÊøµÄÎïÀíÏñËسߴ磬ֱ½ÓͬÑù³ß´çÓ¦ÓÃÓÚÒƶ¯¶Ëʱ£¬Ó¦¸ÃÒ²¿ÉÒÔ²úÉú²»´íµÄÌåÑéЧ¹û£¬ËùÒÔÉè¼Æʱ¿ÉÒÔÖ±½Ó½«Material DesignµÄ×ÖÌåsp³ß´çת»¯ÎªpxÀ´Ê¹Óá£Gekec.comµÄÏîÄ¿ÖУ¬±ÊÕßÖ»Ô¼ÊøÒ»Ì××ÖÌåÑùʽ£¬ÔÚ·½±ãÇ°¶Ë¿ª·¢µÄͬʱ£¬Íê³ÉÁ˲»´íµÄÏìӦʽЧ¹û¡£
3£©ÑÕÉ«
Material Design GuideÖиø³öÁËÈô¸ÉÃ÷ÁÁÏÊÑÞµÄÑÕÉ«£¬²¢ÇÒÖ¸¶¨ÁËÑÕÉ«µÄÖ÷ÒªÕ¹ÏֺͲ㼶±ä»¯£¬¿É¹©Éè¼ÆʦѡÔñ¡£
ÔÚʵ¼Ê²Ù×÷ÖУ¬Í¨¹ýÉÌÆ·ÄÚÈݵķÖÀ࣬±ÊÕßÖ±½ÓÑ¡ÔñMaterial DesignÖеÄÑÕÉ«£¬×÷ΪÿÀàÉÌÆ·µÄÖ÷ÒªÑÕÉ«£¬¶øÔÚһЩÖØÒªµÄ²Ù×÷Èë¿Ú£¬ÑÕÉ«Ó¦ÓëÖ÷ÒªÑÕÉ«ÓÐÃ÷ÏÔÇø±ð¡£±ÊÕßÓ¦ÓÃÉ«»·ÔÚMaterial Design Color»ù´¡ÉÏ£¬ÅäºÏÄÚÈݽ¨Á¢Õû¸öÍøÕ¾µÄÑÕÉ«Ìåϵ£º
A.Ö÷ÌåÑÕÉ«ÒÔ¼°²ã´Î¸ù¾ÝÄÚÈÝÈ·¶¨£¬Ö±½Ó²Î¿¼Material Design Color
B.Ó¦ÓÃÉ«»··ÖÎöÕûÌ岹ɫ¼äÉ«
½«ËùÓÐÖ÷ÌåÑÕÉ«²½ÔÚÉ«»·ÉÏ£¬¿ÉÒÔ·ÖÎö³ö²¹É«Î»ÖÃӦΪÉÏ·½ºì¿òλÖã¬Ó¦ÓÃÓÚÓÐÃ÷ÏÔÇø±ðµÄÖØÒªÈë¿Ú£¬È瓼ÓÈ빺Îï³µ”¡¢“ÔÒ£¤1Ôª²ÎÓ딣¬“½áË㔵ȵȣ»¶ø¼äɫλÖÃӦΪÏ·½ºì¿òλÖã¬Ó¦ÓÃÓÚ²»Ã÷ÏÔµÄϸ½Ú±ä»¯£¬ÈçÎÄ×Öhover£¬ÎÄ×ÖÁ´½ÓµÈ£»
4£©¼ä¾à
Material Design GuideÖÐÒѾÑϸñÔ¼ÊøÁ˸÷¸öÔªËØ״̬ϵļä¾à£¬µ«ÎªÁËÂú×ãÈ«Õ¾ÏìӦʽ²¼¾ÖÔÚÖ÷Á÷ÆÁĻչÏÖ£¬±ÊÕßÈÔȻʹÓÃÁË8pxÔÀí¶ÔһЩ¼ä¾à½øÐÐÁ˵÷Õû£»ÔںܶàÉè¼ÆʦÑо¿8pxÔÀí²¢½øÐÐÉè¼ÆµÄͬʱ£¬±ÊÕßÈÔÈ»ÐèҪǿµ÷£¬ÏìӦʽwebµÄÉè¼ÆÓ¦»ùÓÚä¯ÀÀÆ÷µÄÏñËسߴ磬²¢²»ÊÇ»ùÓÚiosºÍandroidµÄÆÁÄ»³ß´ç¡£¾ßÌå¿ÉÒԲο¼ÉÏÃæÒѾ·ÖÏíµÄ±í¸ñ½øÐÐʵÑé¡£
ÕâÀï·ÖÏíһЩ8pxµÄÎÄÕ£¬¸ÐÐËȤµÄͬѧ¿ÉÒÔ¿´Ò»¿´£º
Ò»ÇÐΪÁ˳ÌÐòÔ³£¡ÏêÎöÊÖ»ú¶ËµÄ8PXÔÀí
Ò»ÕÅͼ½âÊÍÊÖ»úÊÊÅä8pxÔÀí(Ô´´)
×ܽ᣺
Material DesignÒѾ¸ø³öÁËÏêϸµÄÉè¼Æϸ½ÚºÍÔÔò£¬µ«²»Ò»¶¨ÊʺÏÿһ¿î²úÆ·£¬Éè¼ÆʦÐèҪŪÇå×ÔÉíµÄ²úÆ·ÊÇweb»¹ÊÇapp£¬Âß¼ÊÇʲôÑù£¬²Å¿ÉÒÔ½øÐÐϸ»¯µÄÉè¼Æ¹¤×÷£»ÉîÈëÁ˽â²úÆ·Âß¼µÄ»ù´¡ÉÏ£¬È·¶¨µÄÒ»Ì×ÏìÓ¦°ì·¨ºÍÒ³Ãæϸ½Ú£¬Äܹ»±£ÕÏÉè¼ÆµÄÕ¹ÏÖ²¢´øÀ´²»´íÉè¼ÆЧ¹û¡£Material Design×÷Ϊ¼´Æ»¹û¡¢Î¢ÈíÖ®ºó×îÐÂÍƳöµÄÉè¼ÆÓïÑÔ£¬³äÂúÁËŨÓôµÄGoogle·çÇ飬Äܹ»¸øÓû§ÌṩÐÂÏʵÄÊÓ¾õÌåÑ飬ϣÍûÓÐÔ½À´Ô½¶àµÄÉè¼Æʦ»á³¢ÊÔÓÃMaterial Design½øÐÐÉè¼Æ¡£
È«½Ì³ÌÍê,ѧÍê¼ÇµÃ½»×÷Òµ¡£Èç¹û±¾½Ì³Ì¶ÔÄúÓÐËù°ïÖú£¬ÇëÍƼö¸øÄãµÄÅóÓÑ¡£
ÍƼö½Ì³Ì
-
ÅÅ°æ½Ì³Ì£¬½²½âÅÅ°æÖеĶԱÈÓë¶ÔÆë
´óèAddict -
É«²Ê֪ʶ£¬½²½âÈýÔÉ«µÄÔÀíºÍµ÷É«¹Øϵ
meitianxinzhi -
É«²Ê֪ʶ£¬É«²ÊµÄ»ù´¡ÖªÊ¶
ÕÔÑ©Àò -
×ÖÌå֪ʶ£¬100¸ö×îÊʺÏÉè¼ÆLOGOµÄÓ¢ÎÄ×ÖÌå
LOGO´óʦ -
Éè¼Æ֪ʶ£¬Ñ§ÐÞͼҪ²»ÒªÑ§Ï°÷¼÷ÃÍ·½á¹¹
ιʽ̷̳ÖÏí -
Photoshop ÅäÉ«¿¨ £¨¸½´øRGBÉ«Öµ£©
admin -
µ÷É«¼¼ÇÉ£¬½éÉÜÈËÏñºóÆÚ¾ÅÖÖ³£Ó÷½·¨
Ëûɽ֮ÑÛ -
Éè¼Æ֪ʶ£¬BannerµÄÉè¼Æ˼άÓë·½·¨
Shiny Rowe -
¸ßµÍƵ£¬¸ßµÍƵÐÞͼÖеÄÔÀíÓë¹Øϵ
ιʰ® -
¹âÓ°µÄÔÀí£¬ÉãÓ°ºóÆÚÔõô²¼¹â£¬ºóÆÚ¸ÃÔõô´¦ÀíÇ°ÆÚ¹âÓ°ÎÊÌâ
ιʰ® -
É«²Ê֪ʶ£¬¶¯Ì¬É«²ÊÉè¼Æʦ±Õ¹ØÐÞÐбر¸
ÐÇÃÂ -
É«»·½Ì³Ì£¬É«»·Óйâ»ì¡¢É«»ì£¬adobeÈÏÖ¤ÀÏʦ¶¼Åª´íÁË£¬Îóµ¼Á˺ܶàÈË
ιʰ® -
³ÂÂþÀÏʦ¸æËßÄãÐÞͼ±ê×¼£¬ÐÞƤ·ô³ß¶ÈÔõôÕÆÎÕ
ιʰ®