2014ÒÕÊõÉè¼Æ×¨Òµ±¾¿Æ APPUI°æÊ½Éè¼Æ
ÖÐÎÄÕªÒª
ÊÖ»ú¡¢µçÄԵȵç×ÓÉ豸ÒѾ³ÉΪÏÖ´úÈËÉú»îµÄ±ØÐèÆ·£¬Éú»îÖеÄÒ»¾ÙÒ»¶¯¶¼¿ÉÄÜÌåÏÖ³öµç×ÓÉ豸µÄÖØÒªÐÔ¡£UI½çÃæ×÷ΪÏÖ´úµç×ÓÉ豸ÖÐÈË»ú½»»¥µÄÖØÒªÊֶΣ¬UI½çÃæµÄÉè¼ÆËæ×ŵç×ÓÉ豸ÔÚÈËÃÇÉú»îÖеØÎ»µÄÌá¸ß,Ò²³ÉΪÊÓ¾õÉè¼ÆÖÐ×îÎªÖØÒªµÄ·ÖÖ§Ö®Ò»ºÍÖØÒªµÄÐÂÐËѧ¿Æ¡£±¨¸æÊ¹ÓÃÁËXmindÊáÀíÐèÇó˼·£¬Ê¹ÓÃAxureÖÆ×÷²úÆ·ÔÐÍ£¬Ö®ºóʹÓÃPhotoshop»æÖƲúÆ·UIÉè¼Æ£¬×îÖÕÊä³ö²úÆ·UIÉè¼Æ¸å¡£Éè¼Æ¸åÖ÷ÒªÄÚÈÝΪAPPUI°æÊ½Éè¼Æ£¬°üº¬Android°æÊ½Éè¼ÆÒÔ¼°IOS°æÊ½Éè¼Æ¡£
Ëü»¹º¸ÇÁ˽çÃæÍâ¹ÛµÄÉè¼Æ£¬»¹ÓÐÓû§ºÍ»úÆ÷µÄ»¥¶¯½»Á÷ºÍ²Ù×÷Âß¼¡£UI µÄÉè¼ÆÈç½ñÒ»Ö±°éËæ×ÅÈËÃǵÄÈÕ³£Éú»î²¢Ãܲ»¿É·Ö¡£ºÃµÄ UI Éè¼Æ¿ÉÒÔʹ²úÆ·¸üʹÓû§¸üÈÝÒ×½ÓÊܺ͸üÊÜÓû§µÄ»¶Ó¡£
¹Ø¼ü´Ê£ºUIÉè¼Æ APPUIÉè¼Æ AndroidUIÉè¼Æ
I
Ŀ ¼
ÖÐÎÄÕªÒª ..................................................................................................................................... I 1 Éè¼Æ¸ÅÂÛ ................................................................................................................................ 1
1.1 UIÉè¼ÆµÄ±³¾° .............................................................................................................. 1 1.2 Ñо¿µÄÄÚÈÝ .................................................................................................................. 1 1.3 Ñо¿µÄÒâÒå .................................................................................................................. 1 1.4 Ñо¿µÄ·½·¨ ................................................................................ ´íÎó£¡Î´¶¨ÒåÊéÇ©¡£ 2 Éè¼ÆÈÎÎñ ................................................................................................................................ 3 3 UIÉè¼ÆµÄÒÀ¾Ý ....................................................................................................................... 4 4 Éè¼ÆË¼Â· ................................................................................................................................ 4
4.1 UIÉè¼ÆµÄ´´Òâ .............................................................................................................. 7 4.2 UIÉè¼ÆµÄ±í´ï .............................................................................................................. 8 5 Éè¼ÆÄÚÈÝ ................................................................................................................................ 9 6 UIÉè¼ÆËµÃ÷ ........................................................................................................................... 9
6.1 Éè¼Æ¹ý³ÌµÄ·ÖÎö ........................................................................ ´íÎó£¡Î´¶¨ÒåÊéÇ©¡£
6.1.1 UIÉè¼ÆÕûÌ幹˼ .............................................................. ´íÎó£¡Î´¶¨ÒåÊéÇ©¡£ 6.1.2 UIÉè¼Æ·ç¸ñµÄÑ¡Ôñ .......................................................... ´íÎó£¡Î´¶¨ÒåÊéÇ©¡£ 6.2ÐÒ¸£»¨Ô·UIÉè¼Æ .................................................................................................. 9 6.2.1 Auto CADµÄÆ½ÃæÊ©¹¤Í¼µÄÉè¼Æ ..................................... ´íÎó£¡Î´¶¨ÒåÊéÇ©¡£ 6.2.2 3D MAXÈýά½¨Ä£Éè¼Æ ................................................ ´íÎó£¡Î´¶¨ÒåÊéÇ©¡£ 6.2.3 PhotoshopºóÆÚ´¦ÀíÉè¼Æ ................................................. ´íÎó£¡Î´¶¨ÒåÊéÇ©¡£
Éè¼Æ×ܽá .................................................................................................................................. 10 ²Î¿¼ÎÄÏ× .................................................................................................................................. 11 ¸½ ¼ .................................................................................................. ´íÎó£¡Î´¶¨ÒåÊéÇ©¡£ Ö л .................................................................................................................................. 12
2014ÒÕÊõÉè¼Æ×¨Òµ±¾¿Æ APPUI°æÊ½Éè¼Æ
1 Éè¼Æ¸ÅÂÛ
UI×÷Ϊ»¥ÁªÍøÊ±´úʱÏÂÁ÷ÐеÄдʻ㣬Ëü»¹º¸ÇÁ˽çÃæÍâ¹ÛµÄÉè¼Æ£¬»¹ÓÐÓû§ºÍ»úÆ÷µÄ»¥¶¯½»Á÷ºÍ²Ù×÷Âß¼¡£UI µÄÉè¼ÆÈç½ñÒ»Ö±°éËæ×ÅÈËÃǵÄÈÕ³£Éú»î²¢Ãܲ»¿É·Ö¡£ºÃµÄ UI Éè¼Æ¿ÉÒÔʹ²úÆ·¸üʹÓû§¸üÈÝÒ×½ÓÊܺ͸üÊÜÓû§µÄ»¶Ó¡£
1.1 UIÉè¼ÆµÄ±³¾°¼°ÏÖ×´
ÔÚ¹ýÈ¥ºÜ³¤µÄÒ»¶Îʱ¼äÀï½çÃæÉè¼ÆÒ»Ö±Ã»Óб»¹úÄÚÐÅÏ¢ÆóÒµÖØÊÓ£¬×ö½çÃæÉè¼ÆµÄÈËÒ»Ö±±»³ÆºôΪÃÀ¹¤£¬ËûÃǵŤ×÷±»ÈÏΪֻÊǵ¥´¿µØ¸ø½çÃæ»òÕßÍøÕ¾½øÐмòµ¥µÄ×°ÊΣ¬ÍêÈ«²»ÐèÒª¶ÀÁ¢µÄ˼ÏëºÍ´´Òâ¡£µ±ÐÅÏ¢²úÒµÆÌÌì¸ÇµØµÄÈÚÈëÎÒÃǵÄÉú»îµÄʱºò£¬Ô½À´Ô½¶àµÄÆóÒµ·¢ÏÖÈí¼þºÍÍøÕ¾²úÆ·½ö½ö¿¿ÏȽøµÄ¼¼ÊõÊDz»×ãÒÔÔÚÊг¡ÉÏÁ¢ÓÚ²»°ÜÖ®µØ£¬¸ßˮƽµÄ½çÃæÓë½»»¥Éè¼Æ³ÉΪÁ˲úÆ·ÔÚÊг¡ÉÏÒ»ÖÖÖØÒªµÄÊֶΣ¬ÎªºÜ¶à³§¼Ò´øÀ´ÁËÏ൱¿É¹ÛµÄ¾¼ÃÐ§Òæ£¬Ò»¸öÃÀ¹ÛµÄ½çÃæ»á¸øÈË´øÀ´ÊæÊʵÄÊÓ¾õÏíÊÜ£¬À½üÈËÓëµçÄԵľàÀ룬ΪÉ̼Ҵ´ÔìÂôµã¡£
½çÃæÉè¼Æ²»Êǵ¥´¿µÄÃÀÊõ»æ»¡£ËüÐèÒª¿¼ÂÇʹÓÃÕß¡¢Ê¹Óû·¾³¡¢Ê¹Ó÷½Ê½£¬²¢ÇÒ×îÖÕʵÏÖΪÓû§¶øÉè¼ÆÊÇ´¿´âµÄ¿ÆÑ§ÐÔµÄÒÕÊõÉè¼Æ¡£¼ìÑéÒ»¸ö½çÃæµÄ±ê×¼¼È²»ÊÇij¸öÏîÄ¿¿ª·¢×éÁìµ¼µÄÒâ¼ûÒ²²»ÊÇÏîÄ¿³ÉԱͶƱµÄ½á¹û£¬¶øÊÇ×îÖÕÓû§µÄ¸ÐÊÜ£¬ËùÒÔ½çÃæÉè¼ÆÒªºÍÓû§Ñо¿½ôÃܽáºÏ£¬×îÖÕΪÓû§Éè¼Æ³öÒ»¸öÂúÒâµÄÊÓ¾õЧ¹û¡£
1.2 UIµÄ¸ÅÄî
UIµÄ±¾À´ÊÇUser Interface(Óû§½çÃæ)µÄ¼ò³Æ,Ö÷ÒªÊÇÖ¸¶ÔÈí¼þµÄÈË»ú½»»¥¡¢²Ù×÷Âß¼¡¢½çÃæÃÀ¹ÛµÄÕûÌåÉè¼Æ¡£
1.3 Ñо¿µÄÒâÒå
UI ÔÚ¹úÄÚÔÚ½ü¼¸Äê²Å¿ªÊ¼Á÷ÐÐÆðÀ´£¬ÊÇÒ»¸öÐÂÐ˵ÄÈÈÃÅÐÐÒµ£¬ËùÒÔÓÐÐíÐí¶à¶àµÄÈËÉæ×ãÓÚ¸ÃÐÐÒµ£»ÓÖÒòΪ UI Éè¼ÆµÄÐÐÒµÔÚ¹úÄÚ¸Õ¸Õ»ðÈÈÆðÀ´£¬¸÷¸ö¹«Ë¾¶Ô¸ÃÐÐÒµµÄÈ˲ÅÒ²·Ç³£ÐèÒª¡£
ÔÚµ±½ñµÄרҵ UI Éè¼ÆÈËÔ±µ±ÖУ¬ÓÐÐí¶à¶¼ÊÇ´ÓÃÀÊõÐÐÒµ¡¢ÍøÒ³Éè¼ÆÐÐҵתÐеÄרÈËÒ²²Å£¬ÆäÖÐÒ²°üÀ¨ÁË×ÔѧµÄÈË¡£È»¶øºÍ¹úÍâµÄ UI Éè¼ÆÊ¦Ïà±È֮ϣ¬¹úÄÚµÄ֪ʶˮƽ¾ÍÏà¶ÔØÑ·¦£¬¾ÑéÒ²½ÏΪ²»×ã¡£ ÎÞÂÛÊÇ IOS¡¢Android »¹ÊÇ WP ϵͳµÄ¸÷ÀàÖÇÄÜÊÖ»ú¼°Æ½°åµçÄÔ£¬¶¼Óи÷ÖÖ¸÷ÑùµÄÓ¦ÓÃÈí¼þ¡£Ó¦ÓÃÈí¼þµÄ½çÃæÊµÓÃÐÔ¡¢ÊÓ¾õÃÀ¹ÛÐÔºÍÓû§ÌåÑéÓÅÁ¼ÐÔ¶¼Àë²»¿ªÊÓ¾õ´«´ïÒÕÊõ¡£ÔÚÈË»ú½»»¥¼¼ÊõÖð½¥³ÉÊìµÄ½ñÌ죬Óû§¿ªÊ¼×¢ÖØ×ÔÉíµÄ¶Ô²úÆ·ÌåÑéµÄÂú×ã¸Ð£¬Õâ¾ÍÒâζ×ÅÓÅÐãµÄÓû§ÌåÑé¼´²úÆ·³É¹¦µÄ¹Ø¼ü¡£
²úÆ·µÄÊÓ¾õÉè¼ÆÔÚ²úÆ·ÖÐÕ¼¾Ý×ÅÖØÒªµÄµØÎ»£¬ÓÅÐãµÄUIÉè¼ÆÒâζ×ÅÄܸøÓû§´øÀ´ÓÅÐãµÄÓû§ÌåÑé¡£ÒòΪ×Ô¼ºÒ»Ö±×ö UI Éè¼Æ£¬ËùÒÔÏëͨ¹ýÏîÄ¿ÖÐµÄ UI Éè¼ÆÀ´Ì½¾¿UIÉè¼ÆÖеİæÊ½Éè¼Æ¶ÔÕûÌåUI±í´ïЧ¹ûµÄµÄÒâÒåÒÔ¼°¼ÛÖµ¡£
1
2 UI°æÊ½Éè¼Æ·ÖÀà
UI½çÃæÉè¼Æ°üÀ¨Ó²¼þ½çÃæÉè¼ÆºÍÈí¼þ½çÃæÉè¼Æ\ÕâÀïÎÒÃÇ̽ÌÖµÄÊÇÈí¼þ½çÃæÉè¼Æ£¬Èí¼þ½çÃæÉè¼ÆÖÐÓÖ°üÀ¨¡°Óû§Ñо¿¡±¡¢¡°½»»¥Éè¼Æ¡±Óë¡°½çÃæÉè¼Æ¡±Èý¸ö²¿·Ö¡£
2.1Óû§Ñо¿
ÔÚ²úÆ·¿ª·¢µÄǰÆÚͨ¹ýµ÷²éÑо¿Á˽âÓû§µÄ¹¤×÷ÐÔÖÊ¡¢¹¤×÷Á÷³Ì¡¢¹¤×÷»·¾³¡¢¹¤×÷ÖеÄʹÓÃϰ¹ß£¬ÍÚ¾ò³öÓû§¶Ô²úÆ·¹¦ÄܵÄÐèÇóºÍÏ£Íû£¬ÎªÎÒÃǵĽçÃæÉè¼ÆÌṩÓÐÁ¦µÄ˼¿¼·½Ïò£¬Éè¼Æ³öÈÃÓû§ÂúÒâµÄ½çÃæÓû§Ñо¿²»ÊÇÉè¼ÆÕßÖ÷¹ÛµÄÐÐΪ£¬¶øÊÇÕ¾ÔÚÓû§µÄ½Ç¶Èȥ̽ÌÖ²úÆ·µÄ¿ª·¢Éè¼ÆËü×îÖÕ´ïµ½µÄÄ¿±êÊÇÌá¸ß²úÆ·µÄ¿ÉÓÃÐÔ£¬Ê¹ÎÒÃÇÉè¼ÆµÄ²úÆ·¸üÈÝÒ×±»È˽ÓÊÜ¡£Ê¹Óò¢¼ÇÒäµ±²úÆ·×îÖÕ±»ÍÆÉÏÊг¡ºó£¬Éè¼ÆÕß»¹Ó¦¸ÃÖ÷¶¯È¥ÊÕ¼¯Êг¡µÄÓû§·´À¡£¬ÒòΪÊг¡·´À¡ÊÇÓû§Ê¹ÓúóµÄÏë·¨ÊǼìÑé½çÃæÓë½»»¥Éè¼ÆÊÇ·ñºÏÀíµÄ±ê×¼£¬Ò²ÊǾÑé»ýÀÛµÄÖØÒªÍ¾¾¶¡£
2.2 ½»»¥Éè¼Æ
Õⲿ·ÖÖ¸ÈËÓë»úÖ®¼äµÄ½»»¥¹¤³ÌÒ»°ã¶¼ÊÇÈí¼þ¹¤³ÌʦÀ´ÖÆ×÷£¬½»»¥Éè¼ÆÊ¦µÄ¹¤×÷ÄÚÈݾÍÊÇÉè¼ÆÈí¼þµÄ²Ù×÷Á÷³Ì¡°Ê÷×´½á¹¹¡±Èí¼þµÄ½á¹¹Óë²Ù×÷¹æ·¶µÈ¡£Ò»¸öÈí¼þ²úÆ·ÔÚ±àÂë֮ǰÐèÒª×÷µÄ¾ÍÊǽ»»¥Éè¼Æ£¬²¢ÇÒÈ·Á¢½»»¥Ä£ÐÍ¡¢½»»¥¹æ·¶¡£ÈË»ú½»»¥Éè¼ÆµÄÄ¿µÄÔÚÓÚ¼ÓÇ¿Èí¼þµÄÒ×Óá¢Ò×ѧ¡¢Ò×Àí½â£¬Ê¹¼ÆËã»úÕæÕý³ÉΪ·½±ãµØÎªÈËÀà·þÎñµÄ¹¤¾ß¡£
2.3 ½çÃæÉè¼Æ
¹úÄÚĿǰ´ó²¿·Ö¹¤×÷Õß¶¼ÊÇ´ÓÊÂÕâÀàÉè¼Æ¹¤×÷£¬Ò²ÓÐÈ˳ÆÖ®ÎªÃÀ¹¤£¬µ«Êµ¼ÊÉϲ»Êǵ¥´¿ÒâÒåÉϵÄÃÀÊõ¹¤×÷Õߣ¬¶øÊÇÈí¼þ²úÆ·µÄÐÅÏ¢½çÃæÉè¼ÆÊ¦´ÓÐÄÀíѧÒâÒåÀ´·Ö£¬½çÃæ¿É·ÖΪ¸Ð¾õ¡¢ÊÓ¾õ¡¢´¥¾õ¡¢Ìý¾õºÍÇé¸ÐÁ½¸ö²ã´Î¡£Óû§½çÃæÉè¼ÆÊÇÆÁÄ»²úÆ·µÄÖØÒª×é³É²¿·Ö½çÃæÉè¼ÆÊÇÒ»¸ö¸´ÔÓµÄÓв»Í¬Ñ§¿Æ²ÎÓëµÄ¹¤³Ì£¬ÈÏÖªÐÄÀíѧ¡¢Éè¼ÆÑ§¡¢ÓïÑÔѧµÈÔڴ˶¼°çÑÝ×ÅÖØÒªµÄ½ÇÉ«£¬Óû§½çÃæÉè¼ÆµÄÈý´óÔÔòÊÇÖýçÃæÓÚÓû§µÄ¿ØÖÆÖ®Ï£¬¼õÉÙÓû§µÄ¼ÇÒ为µ££¬±£³Ö½çÃæµÄÒ»ÖÂÐÔ¡£
2
Ïà¹ØÍÆ¼ö£º