ui給程序員的規范圖

⑴ UI璁捐″笀涓瀹氳佺煡閬撶殑ICON璁捐¤勮寖涔嬪浘鏍囧昂瀵

鍥炬爣鏄涓縐嶆娊璞℃х殑銆佽法璇璦琛ㄨ揪鐨勬爣璁幫紝鏄疷I璁捐′腑鏈蹇呬笉鍙灝戠殑瑙嗚夋晥鏋滃洜緔狅紝鍦ㄨ捐℃柟妗堜腑鐪嬭搗鏉ュ彧鍗犱竴涓涓嶅ぇ鐨勫尯鍩燂紝鍙鏄瀹冩槸紓ㄧ粌瀹ゅ唴璁捐″笀鍩烘湰鎶鑳界殑鍏抽敭瑙勮寖錛屾帉鎻″浘鏍囨湁鍏崇殑瀹氫箟錛屽強鍏舵伆褰撳埗浣滅殑鏂瑰紡錛屾槸鏂版墜鍏ラ棬UI璁捐＄殑蹇呰佹潯浠躲

灝變粠榪欑瘒鏂囩珷寮濮嬫綔蹇冨浘鏍囪捐＄浉鍏崇殑涓撲笟鐭ヨ瘑錛岄愭ユ惌寤轟竴涓瀹屾暣鐨勫浘鏍囩煡璇嗗簱銆

甯稿父鏈夊悓瀛︿滑闂鍥炬爣璇ヨ捐″氬ぇ錛屼笉涓鏍鋒満鍣ㄨ懼噄con瑙勬牸澶氬皯錛岄偅絎涓綃囧氨浠庡浘鏍囪勬牸璋堣搗鍚с

鍦ㄩ〉闈㈠浘鏍囪捐′腑鏈甯歌佽勬牸鏈夛細12脳12銆16脳16銆24脳24銆32脳32銆48脳48絳夛紝榪欏効鐨勬彁璁鏄浠48px鍋氫負鍩烘湰鍥炬爣鐨勮捐℃柟妗堣勬牸錛岀敱浜巌OS欏甸潰涓鐨勭綉鏍煎浘灝哄告槸4鐨勫嶆暟錛宨Phone鏍囧噯瑙勫畾鏈灝戠偣涓涓嬫婚潰縐涓44pt錛涘畨鍗撶郴緇熺殑緗戞牸鍥炬槸8鐨勫嶆暟錛屾渶灝戝疄闄呮搷浣滃晢鍝佽︽儏欏典負48dp銆

姝ゅ栵紝@2x涓嬪仛鍥捐佺『淇濇槸4鐨勫嶆暟錛岄偅鏍瘋兘澶熸暣闄2錛屽吋瀹笯1x鐨勬樉紺哄睆錛汙3x涓嬪仛鍥懼氨蹇呴』鏄12鐨勫嶆暟浜嗭紝榪欎竴鏍囧艱兘澶熸暣闄2銆3銆4錛屽吋瀹笯1x鍜孈2x鐨勬樉紺哄睆銆

鐭ヨ瘑瑕佺偣

閭PC絝鍛錛熷埌妗岄潰絝鍚庯紝鐢變簬鍒嗚京鐜囩殑涓嶄竴鏍鳳紝_鏈夎佹眰鏈灝忔搷浣滅儹鍖恆備絾鍙楀埌鏂囧瓧钀藉湴鏂瑰紡錛圕hrome嫻忚堝櫒涓闄愬畾鏈灝戠殑瀛椾綋鏍峰紡涓12px錛夌殑闄愬畾錛12px閫愭笎鍙樻垚澶т紮鍎胯ゅ彲鍥炬爣鎿嶄綔鐑鍖虹殑鏋佸皬鍊箋16px銆24px銆32px鍏ㄦ槸PC絝鏅閬嶇殑鍥炬爣瑙勬牸銆

涓鑸澶у跺彧蹇呴』鎸戦変竴涓閫氱敤鎬х殑瑙勬牸鏉ュ埗浣滐紝闅忓悗璁╁紑鍙戣呬緷鎹鍊嶇巼璋冭妭寰堟湁鍙鑳藉繀欏葷殑瑙勬牸灝卞彲浠ワ紝閭ｆ牱灝辨棤闇涓閬嶅張涓閬嶇殑鍘誨埗浣滀笉涓鏍峰昂瀵哥殑鍚屾牱鍥炬爣浜嗐

浣嗘槸鍦ㄦ垜浠鐨勫浘鏍囨秹鍙婂埌涓浜涚箒鏉傜殑鍏抽敭鐐規椂錛屾垨鏄蹇呴』渚濇嵁瑙勬牸灝哄哥嫭絝嬪埗浣溿備緥濡傚ぇ瀹剁殑緋葷粺鍥炬爣鍙鑳芥槸24px錛屽彲鏄钀ラ攢鎺ㄥ箍鍥炬爣鏄80px錛屼簩鑰呯殑搴旂敤鍖哄埆浼氶潪甯稿ぇ錛岄偅_澶у跺氨蹇呴』涓鴻繖浜涘緢澶х殑瑙勬牸鍔犱笂涓浜涘叧閿鐐廣

鐭ヨ瘑瑕佺偣

榪欏効鎻愯浠庤緝澶х殑瑙勬牸寮濮嬶紝渚濇″埗浣滃皬涓鐐圭殑銆傜敱浜庡垹鎺夊拰綆鍗曞寲鍏抽敭鐐硅佹瘮鍔犱笂闈炲父瀹規槗寰楀氾紝涔熷彲浠ヨ緝澶ф按騫崇殑淇濆瓨鍥炬爣鍒濆嬫儏鍐點

鎺ヤ笅鏉ョ湅鐪嬪悇騫沖彴鑷宸辯殑瑙勬牸鏍囧噯

ios榪愮敤紼嬪簭鍥炬爣

瀹ゅ唴璁捐″笀璁捐℃椂錛屼竴鑸浠呯敤璁捐′竴涓獮ppstore鐨勫浘鏍囷紙1024px1024px錛夛紝鍒鐨勮勬牸鍙浠ョ敤ios鍥炬爣鍒朵綔鍣ㄥ叏鑷鍔╛鍑轟竴濂楋紝灝忚勬牸鍥炬爣鐙絝嬭皟鏁翠笅鍏抽敭鐐瑰氨鍙浠ャ

鍦╥Phone緇欏ぇ瀹剁殑榪欏梍婧愪腑錛屾湁Template-AppIcons-iOS榪欎竴鏂囨。銆傚紑鍚榪欎竴鏂囨。錛岀敤鎴戜滑鑷宸辮捐℃柟妗堢殑鍥炬爣鏇存崲鎺夋櫤鑳藉硅薄閲岀殑_瀹癸紝渚誇細杞鍖栨垚鎴戜滑鑷宸辯殑鍥炬爣錛屾妸鎯呭喌鎺╄棌錛屽垏鍑烘潵榪欑嶅浘鏍囧氨鍙浠ャ

Spotlight錛堟緔㈤〉錛

璁懼畾欏靛浘鏍

娑堟伅閫氱煡

ios緋葷粺鍥炬爣

瀵艱埅鏉″拰鑿滃崟鏍忓浘鏍

榪欏氬勭殑鍥炬爣澶у皬涓鏍峰叏鏄24x24pt錛岃緝澶т笉瓚呰繃28x28pt銆傛敞錛欯2x鍜孈3x鍦ㄩ昏緫鎬у儚緔犲崟浣嶆槸涓鏍風殑錛屽亣濡備綘搴旂敤濡係ketch銆丄dobeXD絳夌煝閲忕礌鏉愬伐鍏瘋捐★紝鍙浠ュ弬鐓ч昏緫鍍忕礌鏁板艱捐″嵆鍙銆

鏍囪瘑鏍忓浘鏍

iOS鏍囧噯涓璗ab鏍忎竴鑸鏈変簲涓銆佸洓涓銆佷笁涓鍥炬爣鐨勬柟寮忥紝鎬誨藉潎鍒嗭紝icon瑙勬牸綰30x30pt錛60px錛夈

iPhone寰楀嚭浜嗗洓縐嶄笉涓鏍風殑鏍囪瘑鏍忓浘鏍囪勬牸渚涘ぇ浼欏効璁捐℃椂鍙傜収銆傚叾瀹為檯鎰忎箟鏄璁╀笉涓鏍峰栬傜殑鍥炬爣鐪嬭搗鏉ユ槸綾諱技錛岀『淇濆浘鏍囩殑鍧囪銆

鎬諱綋鐩鏍囨誨藉拰楂樺芥瘮錛堝渾褰㈠浘鏍囷級

鎬諱綋鐩鏍囨誨藉拰楂樺芥瘮錛堟ｆ柟褰㈠浘鏍囷級

鎬諱綋鐩鏍囨誨斤紙瀹藉浘鏍囷級

鎬諱綋鐩鏍囬珮瀹芥瘮錛堥珮鍥炬爣錛

iOS鍦ㄨ繖鍎挎墍鐣屽畾鐨勮勬牸騫朵笉鏄鍥炬爣鏂囦歡鏈緇坃鍑虹殑瑙勬牸錛屽彧鏄緇欏ゅ唴璁捐″笀鍋氬浘鏃訛紝涓嶅悓鐨勫浘鏍囨牱瀛愬弬鐓ц勬牸錛岀洰鍦版槸涓轟簡鏇村ソ鍦拌╁浘鏍囩殑瑙嗚夋晥鏋滃昂瀵哥湅璧鋒潵涓鑷淬

Android榪愮敤紼嬪簭鍥炬爣

鏀懼埌mipmap-*dpi涓嬶紝鏂囦歡澶瑰悕縐頒負ic_launcher.png

LDPI(LowDensityScreen錛120DPI)錛屽叾鍥炬爣澶у皬涓36x36px

MDPI(MediumDensityScreen,160DPI)錛屽叾鍥炬爣澶у皬涓48x48px

HDPI(HighDensityScreen,240DPI)錛屽叾鍥炬爣澶у皬涓72x72px

XHDPI(Extra-highdensityscreen,320DPI)錛屽叾鍥炬爣澶у皬涓96x96px

XXHDPI(xx-highdensityscreen,480DPI)錛屽叾鍥炬爣澶у皬涓144x144px

XXXHDPI(xxx-highdensityscreen,640DPI)錛屽叾鍥炬爣澶у皬涓192x192px

keyline(閲嶈佺嚎)鏍峰瓙錛屼互192x192dp涓轟緥瀛

Android緋葷粺鍥炬爣

瀵規瘮iOS錛孧aterialDesign瀵瑰浘鏍囪勬牸鏈夋洿璇﹀敖鐨勬爣鍑嗐

榛樿よ劇疆緋葷粺鍥炬爣瑙勬牸涓24x24dp錛屽洓鍛ㄦ湁2dp鐨勪富棰樻椿鍔ㄥ湴鍖恆俴eyline(閲嶈佺嚎)鏍峰瓙緇欎簣浜嗗逛簬鐜褰銆佹柟褰銆佺珫鐩寸煩褰㈡嗐佹按鍑嗙煩褰㈡嗙殑瑙勬牸鏍囧噯錛屼互紜淇濅竴鑷寸殑瑙嗚夋晥鏋滃崰姣斻

GooglePlay妗岄潰鍥炬爣

璁捐℃柟妗堣勬牸錛512x512px

鏂囦歡鏍煎紡錛32浣峆NG

棰滆壊絀洪棿錛歴RGB

鍥劇墖澶у皬闄愬埗錛1024KB

鏍峰瓙錛氭柟褰-GooglePlay浼氬姩鎬佹цВ鍐抽伄浣忎竴閮ㄥ垎銆傚崐緇忕瓑鍚屼簬鍥炬爣澶у皬鐨20%銆

榛戝獎錛氭棤-GooglePlay浼氬姩鎬佹цВ鍐抽粦褰便

緗戦〉鍒囧浘鏃舵棤闇甯﹀渾寮у拰闃村獎錛孏ooglePlay浼氫互鍔ㄦ佹ф柟娉曡繍鐢ㄥ渾寮ч伄浣忎竴閮ㄥ垎鍜岄槾褰憋紝淇濊瘉鍏ㄩ儴榪愮敤/娓告垙鍥炬爣鐨勮捐℃柟妗堜繚鎸佷竴鑷淬

鍥炬爣瑙勬牸鐨勬爣鍑嗕富瑕佹槸淇濊瘉濂逛滑鍦ㄧ墿鐞嗗﹁勬牸涓婃槸涓鑷寸殑錛屽逛簬瑙嗚夋晥鏋滀笂濡備綍緇熶竴錛岃繕蹇呴』鑷韜澶氬幓璁緇冦備負鐗規畩鐨勯」鐩鍒嗘瀽鐗規畩鐨勮勬牸錛屽亣濡備綘涓篿OS鎴栬匒ndroid璁捐″浘鏍囷紝鍦ㄥ喅絳栬勬牸浠ュ墠錛屼綘搴旇ユ煡璇㈠浘鏍囨爣鍑嗭紝iPhone鐨凥IG鍜屽畨鍗撶郴緇熺殑MaterialDesign鍏ㄦ槸浣犵殑璁捐℃柟妗堟墜鍐屻

姝ゅ栵紝濡傛灉浣犳槸涓涓鍒氬叆闂ㄧ殑UI璁捐″笀錛屽緩璁寮濮嬩粠杈冨ぇ灝哄哥殑鍥炬爣寮濮嬶紝渚嬪64鎴96px錛屽洜涓哄皬瑙勬牸鐨勫浘鏍囬毦搴︾郴鏁版洿楂橈紙榪欏寘鍚鍍忕礌瀵歸綈錛夈