iOS界面设计尺寸和分辨率有哪些 ios手机应用界面应该设计什么样的尺寸
ios app\u754c\u9762\u8bbe\u8ba1\u7528\u4ec0\u4e48\u5c3a\u5bf8\u521a\u5f00\u59cb\u63a5\u89e6UI\u7684\u65f6\u5019\uff0c\u78b0\u5230\u7684\u6700\u591a\u7684\u5c31\u662f\u5c3a\u5bf8\u95ee\u9898\uff0c\u4ec0\u4e48\u753b\u5e03\u8981\u5efa\u591a\u5927\uff0c\u6587\u5b57\u8be5\u7528\u591a\u5927\u624d\u5408\u9002\uff0c\u6211\u8981\u505a\u51e0\u5957\u754c\u9762\u624d\u53ef\u4ee5?\u4ec0\u4e48\u4e03\u4e03\u516b\u516b\u7684\u4e5f\u7740\u5b9e\u8ba9\u4eba\u6709\u4e9b\u5934\u75bc\u3002
\u5e9f\u8bdd\u4e0d\u591a\u8bf4\uff0c\u5e0c\u671b\u5927\u5bb6\u8010\u5fc3\u770b\u5b8c\u540e\uff0c\u4e0d\u8981\u518d\u7ea0\u7ed3\u4e8e\u5c3a\u5bf8\u76f8\u5173\u7684\u4e1c\u897f\u4e86\u3002
\u4e00\u3001\u5c3a\u5bf8\u53ca\u5206\u8fa8\u7387
iPhone\u754c\u9762\u5c3a\u5bf8\uff1a320*480\u3001640*960\u3001640*1136
iPad\u754c\u9762\u5c3a\u5bf8\uff1a1024*768\u30012048*1536
\u5355\u4f4d\uff1a\u50cf\u7d2072dpi\uff0c\u5728\u8bbe\u8ba1\u7684\u65f6\u5019\u5e76\u4e0d\u662f\u6bcf\u4e2a\u5c3a\u5bf8\u90fd\u8981\u505a\u4e00\u5957\uff0c\u5c3a\u5bf8\u6309\u81ea\u5df1\u7684\u624b\u673a\u6765\u8bbe\u8ba1\uff0c\u6bd4\u8f83\u65b9\u4fbf\u9884\u89c8\u6548\u679c\uff0c\u4e00\u822c\u7528640*960\u6216\u8005640*1136\u7684\u5c3a\u5bf8\u6765\u8bbe\u8ba1\u3002
Ps\uff1a\u4f5c\u56fe\u7684\u65f6\u5019\u786e\u4fdd\u90fd\u662f\u7528\u5f62\u72b6\u5de5\u5177(\u5feb\u6377\u952e\uff1aU)\u753b\u7684\uff0c\u8fd9\u6837\u66f4\u65b9\u4fbf\u540e\u671f\u7684\u5207\u56fe\u6216\u8005\u5c3a\u5bf8\u53d8\u66f4\u3002
\u4e8c\u3001\u754c\u9762\u57fa\u672c\u7ec4\u6210\u5143\u7d20
iPhone\u7684app\u754c\u9762\u4e00\u822c\u7531\u56db\u4e2a\u5143\u7d20\u7ec4\u6210\uff0c\u5206\u522b\u662f\uff1a\u72b6\u6001\u680f\u3001\u5bfc\u822a\u680f\u3001\u4e3b\u83dc\u5355\u680f\u3001\u5185\u5bb9\u533a\u57df\u3002
\u8fd9\u91cc\u53d6\u7528640*960\u7684\u5c3a\u5bf8\u8bbe\u8ba1\uff0c\u90a3\u6211\u4eec\u5c31\u8bf4\u8bf4\u5728\u8fd9\u4e2a\u5c3a\u5bf8\u4e0b\u8fd9\u4e9b\u5143\u7d20\u7684\u5c3a\u5bf8\u3002
\u72b6\u6001\u680f\uff1a\u5c31\u662f\u6211\u4eec\u7ecf\u5e38\u8bf4\u7684\u4fe1\u53f7\u3001\u8fd0\u8425\u5546\u3001\u7535\u91cf\u7b49\u663e\u793a\u624b\u673a\u72b6\u6001\u7684\u533a\u57df\uff0c\u5176\u9ad8\u5ea6\u4e3a\uff1a40px
\u5bfc\u822a\u680f\uff1a\u663e\u793a\u5f53\u524d\u754c\u9762\u7684\u540d\u79f0\uff0c\u5305\u542b\u76f8\u5e94\u7684\u529f\u80fd\u6216\u8005\u9875\u9762\u95f4\u7684\u8df3\u8f6c\u6309\u94ae\uff0c\u5176\u9ad8\u5ea6\u4e3a\uff1a88px
\u4e3b\u83dc\u5355\u680f\uff1a\u7c7b\u4f3c\u4e8e\u9875\u9762\u7684\u4e3b\u83dc\u5355\uff0c\u63d0\u4f9b\u6574\u4e2a\u5e94\u7528\u7684\u5206\u7c7b\u5185\u5bb9\u7684\u5feb\u901f\u8df3\u8f6c\uff0c\u5176\u9ad8\u5ea6\u4e3a\uff1a98px
\u5185\u5bb9\u533a\u57df\uff1a\u5c55\u793a\u5e94\u7528\u63d0\u4f9b\u7684\u76f8\u5e94\u5185\u5bb9\uff0c\u6574\u4e2a\u5e94\u7528\u4e2d\u5e03\u5c40\u53d8\u66f4\u6700\u4e3a\u9891\u7e41\uff0c\u5176\u9ad8\u5ea6\u4e3a\uff1a734px
\u7ea0\u6b63\u4e0b\u9519\u8bef\uff0c640*960\u5df2\u7ecf\u662f\u9ad8\u5206\u8fa8\u7387\uff0c\u4e0d\u9700\u8981\u518d\u7ffb\u500d\u8bbe\u8ba1\u4e86\u3002\u4f4e\u5206\u8fa8\u7387\u662f320*480\u3002
\u524d\u7aef\u8bbe\u8ba1\uff0c\u9700\u8981\u533a\u5206\u9ad8\u5206\u8fa8\u7387\u3001\u4f4e\u5206\u8fa8\u7387\u3002
\u5728\u8bbe\u8ba1\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u6309\u7167\u4e00\u79cd\u5c3a\u5bf8\u8bbe\u8ba1\uff0c\uff08\u5982\u6309\u7167\u4f4e\u5206\u8bbe\u8ba1\uff09\u517c\u987e\u8003\u8651\u4e0b5\u53ca5s\u5c3a\u5bf8\u65f6\u4f1a\u662f\u4ec0\u4e48\u60c5\u51b5\u3002\u666e\u901a\u7684\u9ad8\u5206\uff0c\u6bd4\u5217\u4e00\u6837\u4e0d\u9700\u8981\u518d\u8003\u8651\u3002
\u4f46\u662f\u51fa\u56fe\u65f6\u662f\u90fd\u8981\u7684\u3002
\u73b0\u5728\uff0c\u505a\u6cd5\u662f\uff0c
\u9ad8\u5206\u5c3a\u5bf8=\u4f4e\u5206\u5c3a\u5bf8X2\u3002
\u8fd9\u6837\uff0c\u5728\u7a0b\u5e8f\u4e2d\uff0c\u901a\u8fc7\u547d\u540d\uff0c\u7a0b\u5e8f\u53ef\u4ee5\u81ea\u52a8\u9002\u914d\u3002
\u9ad8\u5206\u3001\u4f4e\u5206\u7684\u547d\u540d\u89c4\u8303\uff1a
\u4f4e\u5206\uff1aimg_name.png
\u9ad8\u5206\[email protected]
\u800c5\u53ca5s\u6bd4\u8f83\u7279\u6b8a\uff0c\u4e5f\u662f\u9ad8\u5206\uff0c\u4f46\u662f\u957f\u4e86\u4e00\u622a
\u547d\u540d\u65f6\[email protected]
1、苹果手机iOS界面设计尺寸和分辨率
（1）界面尺寸：3.5英寸（iPhone1/2/3/4/4S）、4英寸（iPhone5/5S/5C）、4.7英寸（iPhone6/6S）、5.5英寸（iPhone6 plus/6S plus）等。
（2）分辨率：320*480像素（iPhone1/2/3）、640*960像素（iPhone4/4S）、640*1136像素（iPhone5/5S/5C）、750*1334像素（iPhone6/6S）、1080*1920像素（iPhone6 plus/6S plus）等。
1、目前苹果手机的尺寸及分辨率
iPhone界面尺寸：320*480、640*960、640*1136、750*1334、1080*1920等。
iPad界面尺寸：1024*768、2048*1536等。
单位：像素72dpi，在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机来设计，比较方便预览效果，一般用640*960或者640*1136的尺寸来设计。
Ps：作图的时候确保都是用形状工具（快捷键：U）画的，这样更方便后期的切图或者尺寸变更。
2、界面基本组成元素
iPhone的app界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏、内容区域。
640*960的尺寸设计下这些元素的尺寸。
· 状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40px
· 导航栏：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其高度为：88px
· 主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98px
· 内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁，其高度为：734px
希望能给你帮助，另外你可以到百度文库搜索相关关键字，相信会有你的资料。
1、iOS界面设计尺寸规范_百度文库:
http://wenku.baidu.com/link?url=M-CNGbPDypdoXgNlBdbpDnDr34fFJ4bOvzRNLuGG0OgqHdw7G307rC1fWRZ6XGoGcxK3_T9LsOXIyXkDPgXJM9O0TjmU6qukolhiWGSiC7K
2、ios用户界面《UI》设计设计规范_百度文库：
http://wenku.baidu.com/view/df999ffbddccda38366baf53.html?from=search
绛旓細1銆佽嫻鏋滄墜鏈篿OS鐣岄潰璁捐灏哄鍜屽垎杈ㄧ巼 锛1锛夌晫闈㈠昂瀵革細3.5鑻卞锛坕Phone1/2/3/4/4S锛夈4鑻卞锛坕Phone5/5S/5C锛夈4.7鑻卞锛坕Phone6/6S锛夈5.5鑻卞锛坕Phone6 plus/6S plus锛夌瓑銆傦紙2锛鍒嗚鲸鐜囷細320*480鍍忕礌锛坕Phone1/2/3锛夈640*960鍍忕礌锛坕Phone4/4S锛夈640*1136鍍忕礌锛坕Phone5/5S/5C锛夈750*...
绛旓細1銆乮Phone6Plus鏄5.5鑻卞灞忓箷锛1242x2208px-@3x鐨勫儚绱犲垎杈ㄧ巼锛岄昏緫鍒嗚鲸鐜囨槸414x981px-@1x銆傜墿鐞嗗昂瀵告槸1080x1920px銆傝繖涓墿鐞嗗昂瀵革紝涔熸槸瀹夊崜鏈虹洰鍓嶆渶娴佽鐨勫ぇ灞忚璁＄灏哄銆2銆乮Phone6鏄4.7鑻卞灞忓箷锛750x1334px-@2x鐨勫儚绱犲垎杈ㄧ巼锛岄昏緫鍒嗚鲸鐜囨槸375x889px-@1x銆3銆乮Phone5鏄4鑻卞灞忓箷锛640x1135px-...
绛旓細涓銆佸昂瀵稿強鍒嗚鲸鐜 iPhone鐣岄潰灏哄锛320*480銆640*960銆640*1136 iPad鐣岄潰灏哄锛1024*768銆2048*1536 鍗曚綅锛氬儚绱72dpi锛屽湪璁捐鐨勬椂鍊欏苟涓嶆槸姣忎釜灏哄閮借鍋氫竴濂楋紝灏哄鎸夎嚜宸辩殑鎵嬫満鏉ヨ璁★紝姣旇緝鏂逛究棰勮鏁堟灉锛屼竴鑸敤640*960鎴栬640*1136鐨勫昂瀵告潵璁捐銆侾s锛氫綔鍥剧殑鏃跺欑‘淇濋兘鏄敤褰㈢姸宸ュ叿(蹇嵎閿細U)鐢荤殑锛...
绛旓細1銆佸昂瀵稿強鍒嗚鲸鐜 iPhone 鐣岄潰灏哄锛320x480銆640x960銆640x1136 iPad 鐣岄潰灏哄锛1024x768銆2048x1536 锛堜互涓婂崟浣嶉兘鏄儚绱犲摝锛岃嚦浜庡垎杈ㄧ巼涓鑸綉椤礥I鍜岀Щ鍔║I鍩烘湰涓婇兘鍙 72 ppi锛夊綋鐒讹紝鍦ㄨ璁＄殑鏃跺欏苟涓嶆槸姣忎釜灏哄閮借鍋氫竴濂楋紝灏哄鎸夎嚜宸辩殑鎵嬫満灏哄鏉ヨ璁★紝姣旇緝鏂逛究棰勮鏁堟灉锛屼竴鑸敤 640x960 鎴栬 640...
绛旓細IOS鐣岄潰璁捐灏哄瑙勮寖锛堜互iPhone6涓轰緥锛変竴銆鐣岄潰灏哄瑙勮寖 1銆佺晫闈㈠昂瀵稿ぇ灏忔槸锛750x1334px銆2銆佺姸鎬佹爮(status bar)锛氬氨鏄數閲忔潯锛屽叾楂樺害涓猴細40px;3銆佸鑸爮(navigation)锛氬氨鏄《閮ㄦ潯锛屽叾楂樺害涓猴細88px;4銆佷富鑿滃崟鏍(submenu锛宼ab)锛氬氨鏄爣绛炬爮锛屽簳閮ㄦ潯锛屽叾楂樺害涓猴細98px;5銆佸唴瀹瑰尯鍩(content)锛氬氨鏄...
绛旓細璁捐灏哄鏄750*1334px锛7瀵搞3銆佷粠璁捐鏂归潰鏉ョ湅锛屽仛鎵嬫満鐣岄潰璁捐鐨勫昂瀵镐竴鑸垎涓篿Phone鍜孉ndroid涓ょ璁惧銆4銆乤ndroidapp鐣岄潰璁捐鏄鎸720*1280鐨勶紝鍒囧浘涓婂彲浠ョ偣9鍒囧浘鍋氬埌鎵鏈夋墜鏈虹殑閫傞厤銆5銆佸鏋滀笉鏄緢缁嗚嚧鐨勮瘽澶ч儴鍒嗘槸鍙互鐨勶紝ip6plus鏄笉琛岀殑銆6銆鍒嗚鲸鐜750*1334锛宨Phone6鐨勫睆骞曟槸杩欎釜灏哄鐨勩
绛旓細鐗╃悊鐗堝氨鏄痠phone 6plus瀹為檯瀹為檯鐨勫睆骞鍍忕礌锛岃璁捐鐗堝氨鏄垜浠埅灞廼phone 6plus鐨鐣岄潰鍦╬s涓幓閲忥紝鍙戠幇鐨灏哄銆傚緢鏄庢樉锛岄噺鍑烘潵鐨鍒嗚鲸鐜涔熷氨鏄璁＄増瑕佹瘮鐗╃悊鐗堢殑鍒嗚鲸鐜囪澶э紝杩欏彲鑳界敱浜鑻规灉閲囩敤浜嗙缉鏀炬樉绀虹殑銆傝嚦浜庢斁澶х増锛屽叾瀹炲氨鏄痠phone 6鐨勫昂瀵哥瓑姣旀斁澶1.5鍊嶅緱鍑虹殑鍒嗚鲸鐜囥俰phone 6锛750*1334 ppi:...
绛旓細涓銆iOS鐣岄潰瑙勮寖棣栧厛鑻规灉鍒嗕负涓ょ灏哄锛屼竴绉嶆槸涓爜姣斿6s銆7銆8绛夛紝杩欑鎴戜滑涓鑸垏鍥惧懡鍚嶄负@2X銆傝繕鏈変竴绉嶅氨鏄疨lus鐗堟湰锛岃繖绉嶄竴鑸垏鍥惧懡鍚嶄负@3X銆傝嫻鏋6s 鐨勫昂瀵750px * 1334px锛6s Plus鐨勫昂瀵稿氨鏄1242px * 2208 px銆備袱鑰呬箣闂寸殑鍏崇郴灏辨槸1.5鍊嶏紝鎬庝箞璇村憿锛屽氨鏄6s涔嬬被鐨勬墜鏈烘兂瑕佸彉鎴怭lus锛屾垜浠璁捐...
绛旓細绾犳涓嬮敊璇紝640*960宸茬粡鏄珮鍒嗚鲸鐜囷紝涓嶉渶瑕佸啀缈诲嶈璁′簡銆備綆鍒嗚鲸鐜囨槸320*480銆傚墠绔璁★紝闇瑕佸尯鍒嗛珮鍒嗚鲸鐜囥佷綆鍒嗚鲸鐜囥傚湪璁捐鐨勬椂鍊欙紝鍙互鎸夌収涓绉灏哄璁捐锛岋紙濡傛寜鐓т綆鍒嗚璁★級鍏奸【鑰冭檻涓5鍙5s灏哄鏃朵細鏄粈涔堟儏鍐点傛櫘閫氱殑楂樺垎锛屾瘮鍒椾竴鏍蜂笉闇瑕佸啀鑰冭檻銆備絾鏄嚭鍥炬椂鏄兘瑕佺殑銆傜幇鍦紝鍋氭硶鏄紝楂樺垎灏哄=浣...
绛旓細瀹冧滑鍒嗗埆瀵瑰簲鐨勫浘鐗囩礌鏉愭槸:@2x,@3x,@3x銆 鎵浠ユ垜寤鸿鎶1242*2208浣滀负璁捐绋灏哄,瀵瑰簲@3x鍥俱 涓轰粈涔坕phone6 plus 鐨勮璁＄鍒嗚鲸鐜囨槸1242*2208鑰屼笉鏄1080*1920鍛? 纭疄iphone6 plus鐨勫疄闄呭睆骞曞垎杈ㄧ巼鏄1080*1920,灞忓箷瀵嗗害鏄401ppi銆傛垜浠煡閬163ppi鏉′欢涓,鑻规灉绯荤粺瑙勫畾1pt=1px,鎵浠401/163=2.46,涔熷氨鏄鏃1pt=...
