CrossApp设计规范整理.docx

CrossApp设计规范整理稿索引1.设备分辨率和显示规格12.Status Bar（状态栏）13.Navigation Bar（导航栏）24.Tab Bar（标签栏）25.Table View（表格视图）36.Button （按钮）47.文字建议规范48.AlertView（提示框）49.Sliders（滑块）510.Switch（开关）611.Stepper（步计器）612.Segment Controls（分段控件）713.Icon（图标）714.Hit target（点击区域）81. 设备分辨率和显示规格设备横排（px）竖排（px）iPhone 6+1080 x 19201920 x1080iPhone 6750 x 13341334 x 750iPhone 5640 x 11361136 x 640iPhone 4640 x 960960 x 640iPhone 1 2 3代320 x 480480 x 320iPad Air / Retina iPad1536 x 20482048 x 1536iPad Mini 21536 x 20482048 x 1536iPad Mini 1 768 x 10241024 x 7682. Status Bar（状态栏）设备高度（px）iPhone 6+60iPhone 640iPhone 540iPhone 440iPhone 1 2 3代20iPad Air / Retina iPad40iPad Mini 240iPad Mini 120状态栏中文本内容的显示方式只可以有两张样式：黑色或者白色Default (dark) content 默认的黑色Light content 白色状态栏： 是透明的 总是在设备屏幕顶部边缘出现 不要创建自定义状态栏 避免在状态栏背后放置干扰性内容 在用户全屏观看多媒体内容时，考虑隐藏状态栏和其他所有界面元素 选择一个和你的 App 相协调的状态栏颜色3. Navigation Bar（导航栏）设备高度（px）iPhone 6+132iPhone 688iPhone 588iPhone 488iPhone 1 2 3代44iPad Air / Retina iPad88iPad Mini 288iPad Mini 144导航栏： 是半透明的 一般出现在 app 页面顶部，就在状态栏下面一点 在 iPad 上，导航栏也可以在视图内部显示而不用贯穿整个屏幕，例如分栏视图控制器的一个窗格。 在 iPhone 切换设备方向时，可以自动调整导航栏高度 在 iPad 上， 导航栏的高度不随设备方向改变而改变4. Tab Bar（标签栏）设备高度（px）iPhone 6+147iPhone 698iPhone 598iPhone 498iPhone 1 2 3代49iPad Air / Retina iPad98iPad Mini 298iPad Mini 149标签栏： 是半透明的 通常出现在屏幕底部 在 iPhone 上，同时显示不超过 5 个标签（如果有更多标签，标签栏会显示其中 4 个并增加一个更多标签，再将其他的标签以列表形式收纳在其中），iPad可超过5个。 标签栏高度不随设备方向改变而改变 可以用徽标一个红底白字并显示数字或感叹号的椭圆形来显示和 app 有关的特有信息 在某个标签的功能不可用时，不要移除它 在 iPad 上，避免使用更多这一标签。 在 iPad 上，横屏竖屏都显示一样的标签，以增强 app 的视觉稳定感。5. Table View（表格视图）据说table view的高度需要根据内容进行调整= =，下图是一个样例的相关数据。Cell建议规格：设备Cell高度（px）图像规格（px）iPhone 6+12987*87iPhone 68658*58iPhone 58658*58iPhone 48658*58iPhone 1 2 3代4329*29iPad Air / Retina iPad8658*58iPad Mini 28658*58iPad Mini 14329*296. Button （按钮）按钮控件具有高度的自定义性的，允许你自定义文本风格、投影以及颜色，甚至是一个按钮都是可以定制的。假如没有文本标签的话，全自定义背景都行按钮尺寸根据设计需求，高度Retina屏高度不小于88px，普通屏不小于44px。7. 文字建议规范8. AlertView（提示框） 设备高度（px）宽度（px）iPhone 6+自动810iPhone 6自动510iPhone 5自动510iPhone 4自动510iPhone 1 2 3代自动270iPad Air / Retina iPad自动510iPad Mini 2自动510iPad Mini 1自动2709. Sliders（滑块）设备圆钮直径（px）直线宽度（px）图形规格（如果有）iPhone 6+84672*72iPhone 656448*48iPhone 556448*48iPhone 456448*48iPhone 1 2 3代28224*24iPad Air / Retina iPad56448*48iPad Mini 256448*48iPad Mini 128224*2410. Switch（开关）设备圆钮直径（px）区域宽度（px）区域高度（px）iPhone 6+8415393iPhone 65610262iPhone 55610262iPhone 45610262iPhone 1 2 3代285131iPad Air / Retina iPad5610262iPad Mini 25610262iPad Mini 128513111. Stepper（步计器）设备宽度（px）高度（px）圆角（px）iPhone 6+8648712iPhone 6566588iPhone 5566588iPhone 4566588iPhone 1 2 3代283294iPad Air / Retina iPad566588iPad Mini 2566588iPad Mini 128329412. Segment Controls（分段控件）设备高度（px）圆角（px）iPhone 6+8715iPhone 65810iPhone 55810iPhone 45810iPhone 1 2 3代295iPad Air / Retina iPad5810iPad Mini 25810iPad Mini 129513. Icon（图标）14. Hit target（点击区域）设备最小规格（px）iPhone 6+132*132iPhone 688*88iPhone 588*88iPhone 488*88iPhone 1 2 3代44*44iPad Air / Retina iPad88*88iPad Mini 288*88iPad Mini 144*44CrossApp设计规范相关参考资料1. Ivo Mynttinen大神版ios设计规范：（英文原版）2. Apple官方文档：/library/ios/documentation/UserExperience/Conceptual/MobileHIG （英文原版）3. 腾讯isux转译IOS 8人机交互指南：/ios8-human-interface-guidelines.html （翻译版）/ios8-human-interface-guidelines-design-strategies.html （翻译版）4. iPhone分辨率指南（含6、6+）：/cuibo1123/article/details/39405973 （翻译版）http:/www