crossapp设计规范整理

《crossapp设计规范整理》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、CrossApp设计规范整理稿索引1.设备分辨率和显示规格12.StatusBar（状态栏）13.NavigationBar（导航栏）24.TabBar（标签栏）25.TableView（表格视图）36.Button（按钮）47.文字建议规范48.AlertView（提示框）49.Sliders（滑块）510.Switch（开关）611.Stepper（步计器）612.SegmentControls（分段控件）713.Icon（图标）714.Hittarget（点击区域）81.设备分辨率和显示规格设备横排（px）竖排（px）iPhone6+1080x19201920x1080iPhone67

2、50x13341334x750iPhone5640x11361136x640iPhone4640x960960x640iPhone123代320x480480x320iPadAir/RetinaiPad1536x20482048x1536iPadMini21536x20482048x1536iPadMini1768x10241024x7682.StatusBar（状态栏）设备高度（px）iPhone6+60iPhone640iPhone540iPhone440iPhone123代20iPadAir/RetinaiPad40iPadMini240iPadMini1209状态栏中文本内容的显示方

3、式只可以有两张样式：黑色或者白色Default(dark)content默认的黑色Lightcontent白色状态栏：·是透明的·总是在设备屏幕顶部边缘出现·不要创建自定义状态栏·避免在状态栏背后放置干扰性内容·在用户全屏观看多媒体内容时，考虑隐藏状态栏——和其他所有界面元素·选择一个和你的App相协调的状态栏颜色1.NavigationBar（导航栏）设备高度（px）iPhone6+132iPhone688iPhone588iPhone488iPhone123代44iPadAir/RetinaiPad88iPadMini288iPadMini144导航栏：·是半透明的·一般出现在app页面

4、顶部，就在状态栏下面一点·在iPad上，导航栏也可以在视图内部显示而不用贯穿整个屏幕，例如分栏视图控制器的一个窗格。·在iPhone切换设备方向时，可以自动调整导航栏高度·在iPad上，导航栏的高度不随设备方向改变而改变2.TabBar（标签栏）设备高度（px）iPhone6+147iPhone698iPhone598iPhone498iPhone123代499iPadAir/RetinaiPad98iPadMini298iPadMini149标签栏：·是半透明的·通常出现在屏幕底部·在iPhone上，同时显示不超过5个标签（如果有更多标签，标签栏会显示其中4个并增加一个「更多」标签，再将其

5、他的标签以列表形式收纳在其中），iPad可超过5个。·标签栏高度不随设备方向改变而改变·可以用徽标——一个红底白字并显示数字或感叹号的椭圆形——来显示和app有关的特有信息·在某个标签的功能不可用时，不要移除它·在iPad上，避免使用「更多」这一标签。·在iPad上，横屏竖屏都显示一样的标签，以增强app的视觉稳定感。1.TableView（表格视图）据说tableview的高度需要根据内容进行调整==，下图是一个样例的相关数据。Cell建议规格：设备Cell高度（px）图像规格（px）iPhone6+12987*87iPhone68658*58iPhone58658*58iPhone486

6、58*58iPhone123代4329*29iPadAir/RetinaiPad8658*58iPadMini28658*58iPadMini14329*292.Button（按钮）9按钮控件具有高度的自定义性的，允许你自定义文本风格、投影以及颜色，甚至是一个按钮都是可以定制的。假如没有文本标签的话，全自定义背景都行按钮尺寸根据设计需求，高度Retina屏高度不小于88px，普通屏不小于44px。1.文字建议规范2.AlertView（提示框）9设备高度（px）宽度（px）iPhone6+自动810iPhone6自动510iPhone5自动510iPhone4自动510iPhone123代自

7、动270iPadAir/RetinaiPad自动510iPadMini2自动510iPadMini1自动2701.Sliders（滑块）9设备圆钮直径（px）直线宽度（px）图形规格（如果有）iPhone6+84672*72iPhone656448*48iPhone556448*48iPhone456448*48iPhone123代28224*24iPadAir/RetinaiPad56448*48iPadM