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锛屽洜涓哄皬瑙勬牸鐨勫浘鏍囬毦搴︾郴鏁版洿楂橈紙杩欏寘鍚鍍忕礌瀵归綈锛夈