2024年10月19日发(作者：南白山)

竭诚为您提供优质文档/双击可除

ipad,界面设计规范

篇一：界面设计规范

界面总体设计原则

界面设计的中心是用户，我们要做的是提供给用户可操

作性强的界面，而不是由界面来操作用户。界面是系统与用

户交互的媒介，友好的界面设计，不但可以给用户以良好的

视觉感官，而且可以提供给用户简易、规范的交互过程，从

而引导用户逐渐形成良好的操作习惯，提高用户操作系统的

效率。

1、界面规范

界面的规范是指，界面使用的提示性语言，名称，符号

和布局符合行业标准和软件行业标准。相同功能的提示语言，

名称，符号和布局使用相同内容。这样可以使用户对系统形

成统一的操作认识，加快对系统操作的掌握速度，提高工作

效率。

遵循一致的准则，确立标准并遵循。无论是控件使用、

1 21

提示信息措辞，还是颜色、窗口布局风格，都遵循统一的标

准。做到真正的一致。使用户使用起来能够建立起精确的心

里模型，使用熟练一个界面后，切换到另外一个界面能够轻

松推测出各种功能，而且能够降低培训成本。

2、界面操作简易

我们一直遵循“以用户为中心的设计”原则，在此原则

下，界面操作的简易程度已经成为不可或缺的一个衡量指标。

此外，界面操作的简易主要从以下几个方面衡量：

界面布局合理界面一致性鼠标与键盘合理对应快捷键

的使用（支持windows快捷键）尽可能减少在动作间需记忆

的信息数量。合理的界面大小，高效利用显示器。

3、界面交互人性化

人性化的界面交互，让用户使用起来得心应手。我们做

到的良好的人机交互，包括很多方面。我们经过长期的调研

和努力，从适应性、有效性、易学习性、用户满意度几个方

面出发来设计界面，做到更好更方便的人机交互。

窗口弹出位置明显。让用户轻松中转至新的界面。出错

2 21

信息及警告。出错信息是指出现问题时系统给出的提示，用

来提醒用户应该做的正确操作。

执行动作提示。界面作为人机对话的工具，用户做了任

何动作，我们会给您一个视觉或听觉提示，让您更加放心的

使用我们提供的每一个功能。

联机帮助。安装系统的同时，系统自动为您提供帮助文

档，方便您的前期使用和查阅。

4、界面美观

美观大方的界面可以使界面布局和色彩搭配更加合理，

从而消除用户的视觉疲劳，让用户不会因为长时间使用软件

而感觉疲劳，减少长时间操作对眼睛产生的伤害。

某项目具体的界面规范

页面位置导航要摆放在界面的首行左起，要加入当前界

面位置说明按钮

（1）全屏窗口

检索按钮统一放在检索条件的下一行的左起位置。操作

按钮统一放在页面位置导航的下一行左起顺序排放。（2）非

全屏窗口

3 21

功能按钮放在最下面一行，居中对齐。关闭按钮

每个非全屏窗口都有一个关闭按钮，和功能按钮一样放

在最下面一行，最后的位置。

表格

表格内部无边框，外侧边框为浅蓝色（6699cc），表头

背景色（739ae0），奇数行背景色（F8F8FF），偶数行背景色

（e9F2Fb）。

对于不带分页导航条的表格，要增加竖滚条，来使页面

的布局稳定。

分页导航条

和表格配合使用，放在表格下方，有当前页码、总页数、

总记录数、首页、上一页、下一页、末页、跳转到指定页。

4 21

弹出框使用统一的样式，有标题，有边框，有背景色，

居中显示弹出框。日期选择使用统一的日期选择图片按钮，

日期选择控件要求可以快速选择日期。上移、下移、左移、

右移按钮使用统一的按钮样式，操作的逻辑要统一。文件选

择按钮使用统一的文件选择图片按钮。不能编辑的输入框背

景色统一为灰色。术语使用的术语要统一，不能随便修改。

页面主题风格可实现多类页面主题风格，提供给用户选择。

菜单深度一般不超过3层。复选框多个复选框要带有全选和

全取消功能，方便用户选择。下拉框在选项较少时，使用下

拉框；在选项较多时，使用列表框。输入框

必输项输入框后面要附带红星标志，来说明该输入框必

须输入。

要有长度控制，比如最长5位，输入5位字符后就不能

再输入。

要有合法性验证，比如数字类，日期类等输入要判断输

入数据是否合法，不合法时。快捷键

对于录入等用户经常用到，且要求录入速度高的界面，

要求常用按钮如保存、新增等按钮有快捷键。

tab键

对于录入等用户经常用到，且要求录入速度高的界面，

要求输入项按从左到右，从上到下的顺序使用tab键进行切

换。

5 21

篇二：ios与android界面设计规范整合

ios篇

一、尺寸及分辨率iphone界面尺寸：320*480、640*960、

640*1136

iphone6：4.7英寸(1334×750)，iphone6plus：5.5英

寸(1920×1080)

ipad界面尺寸：1024*768、2048*1536

单位：像素72dpi，在设计的时候并不是每个尺寸都要

做一套，尺寸按自己的手机来设计，比较方便预览效果，一

般用640*960或者640*1136的尺寸来设计。

ps：作图的时候确保都是用形状工具(快捷键：u)画的，

这样更方便后期的切图或者尺寸变更。

(首三个系列的屏幕分辨率为320x480(hVga)，163ppi；

iphone4及iphone4s的屏幕分辨率为640x960，326ppi；

iphone5则是640x1,136，326ppi，而iphone5的屏幕对比

为接近16:9（71:40）。)

二、界面基本组成元素

iphone的app界面一般由四个元素组成，分别是：状态

栏(statusbar)、导航栏(navigation)、主菜单栏(submenu)、

内容区域(content)。

这里取用640*960的尺寸设计，那我们就说说在这个尺

寸下这些元素的尺寸。

6 21

状态栏(statusbar)：就是我们经常说的信号、运营商、

电量等显示手机状态的区域，其高度为：40px导航栏

(navigation)：显示当前界面的名称，包含相应的功能或者

页面间的跳转按钮，其高度为：88px主菜单栏(submenu，tab)：

类似于页面的主菜单，提供整个应用的分类内容的快速跳转，

其高度为：98px内容区域(content)：展示应用提供的相应

内容，整个应用中布局变更最为频繁，其高度为：734px

[下图为了说明我不是瞎掰的：960-40-88-98=734]

至于我们经常说的iphone5/5s

的640*1136的尺寸，其实就是中间的内容区域高度增

加到910px。

ps：在最新的ios7的风格中，苹果已经开始慢慢弱化

状态栏的存在，将状态栏和导航栏合在了一起，但是再怎么

变，尺寸高度也还是没有变的，只不过大家在设计ios7风

格的界面的时候多多注意下~

三、字体大小

iphone上的字体英文为：helveticaneue。至于中文mac

下用的是黑体，win下则为华文黑体(最新字体称为黑体-简)。

下图是百度用户体验做过的一个小调查，可以看出用户

可接受的文字大小。

四，列表栏目间距

ios设计规范中列表的高度为88px

7 21

五，颜色值问题

ios颜色值取Rgb各颜色的值比如给予ios开发的色值

为R:12g:34b:56给出的值就是12,34,56(有时也要根据开发

的习惯，有时也用十六进制)；android开发的色值则使用十

六进制#0c2238

andRoid篇

一、尺寸及分辨率

android界面尺寸：480*800、720*1280、1080*1920。[单

位：像素]

android比iphone的寸尺多了很多套，建议取用

720*1280这个尺寸，这个尺寸720*1280中显示完美，在

1080*1920中看起来比较清晰，切图后的图片文件大小也适

中，应用的内存消耗也不会过高。

二、界面基本组成元素android

的app界面和iphone的基本相同：状态栏、导航栏、

主菜单、内容区域。

android中我们取用的720*1280的尺寸设计，那我们就

说说在这个尺寸下这些元素的尺寸。

状态栏高度为：50px

导航栏高度为：96px

主菜单栏高度为：96px

内容区域高度为：1038px(1280-50-96-96=1038)

8 21

android最近出的手机都几乎去掉了实体键，把功能键

移到了屏幕中，当然高度也是和菜单栏一样的：96pxandroid

为了在界面上区别于ios，android4.0开始提出的一套holo

的ui风格一些app的最新版本都采用了这一风格，这一风

格最明显的变化就是将下方的主菜单移到了导航栏下面，这

样的方式解决了现在很多手机去除实

体键后再屏幕中显示而出现的双底栏的尴尬情景。

三、字体大小

android上的字体为：droidsansfallback，是谷歌自己

的字体，与微软雅黑很像。

同样，百度用户体验的调查中，可以看出用户可接受的

文字相应问题。

具体大小，还是那句话，找自己喜欢的app界面，手机

截图后放进ps自己对比调节字体大小，切记，一定是高清

截图

篇三：界面设计规范

界面设计规范前言

界面是软件与用户交互的最直接的层，界面的好坏决定

用户对软件的第一印象。而且设计良好的界面能够引导用户

自己完成相应的操作，起到向导的作用。同时界面如同人的

面孔，具有吸引用户的直接优势。设计合理的界面能给用户

带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失

9 21

败，让用户有挫败感，再实用强大的功能都可能在用户的畏

惧与放弃中付诸东流。目前界面的设计引起软件设计人员的

重视的程度还远远不够，直到最近网页制作的兴起，才受到

专家的青睐。而且设计良好的界面由于需要具有艺术美的天

赋而遭拒绝。目前流行的界面风格有三种方式：多窗体、单

窗体以及资源管理器风格，无论那种风格，以下规则是应该

被重视的。

一、易用性：

按钮名称应该易懂，用词准确，摒弃模棱两可的字眼，

要与同一界面上的其他按钮易于区分，能望文知意最好。理

想的情况是用户不用查阅帮助就能知道该界面的功能并进

行相关的正确操作。

易用性细则：

1、完成相同或相近功能的按钮用Frame框起来，常用

按钮要支持快捷方式。

2、完成同一功能或任务的元素放在集中位置，减少鼠

标移动的距离。

3、按功能将界面划分局域块，用Frame框括起来，并

要有功能说明或标题。

4、界面要支持键盘自动浏览按钮功能，即按tab键的

自动切换功能。

5、界面上首先应输入的和重要信息的控件在tab顺序

10 21

中应当靠前，位置也应放在窗口上较醒目的位置。

6、同一界面上的控件数最好不要超过10个，多于10

个时可以考虑使用分页界面显示。

7、分页界面要支持在页面间的快捷切换，常用组合快

捷键ctrl+tab。

8、默认按钮要支持enter及选操作，即按enter后自

动执行默认按钮对应操作。

9、可写控件检测到非法输入后应给出说明并能自动获

得焦点。

10、tab键的顺序与控件排列顺序要一致，目前流行总

体从上到下，同时行间从左到右的方式。

11、复选框和选项框按选择机率的高底而先后排列。

12、复选框和选项框要有默认选项，并支持tab选择。

13、选项数相同时多用选项框而不用下拉列表框。

14、界面空间较小时使用下拉框而不用选项框。

15、选项数较少时使用选项框，相反使用下拉列表框。

16、专业性强的软件要使用相关的专业术语，通用性界

面则提倡使用通用性词眼。

二、规范性：

通常界面设计都按windows界面的规范来设计，即包含

"菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜

单"的标准格式，可以说：界面遵循规范化的程度越高，则

11 21

2024年10月19日发(作者：南白山)

竭诚为您提供优质文档/双击可除

ipad,界面设计规范

篇一：界面设计规范

界面总体设计原则

界面设计的中心是用户，我们要做的是提供给用户可操

作性强的界面，而不是由界面来操作用户。界面是系统与用

户交互的媒介，友好的界面设计，不但可以给用户以良好的

视觉感官，而且可以提供给用户简易、规范的交互过程，从

而引导用户逐渐形成良好的操作习惯，提高用户操作系统的

效率。

1、界面规范

界面的规范是指，界面使用的提示性语言，名称，符号

和布局符合行业标准和软件行业标准。相同功能的提示语言，

名称，符号和布局使用相同内容。这样可以使用户对系统形

成统一的操作认识，加快对系统操作的掌握速度，提高工作

效率。

遵循一致的准则，确立标准并遵循。无论是控件使用、

1 21

提示信息措辞，还是颜色、窗口布局风格，都遵循统一的标

准。做到真正的一致。使用户使用起来能够建立起精确的心

里模型，使用熟练一个界面后，切换到另外一个界面能够轻

松推测出各种功能，而且能够降低培训成本。

2、界面操作简易

我们一直遵循“以用户为中心的设计”原则，在此原则

下，界面操作的简易程度已经成为不可或缺的一个衡量指标。

此外，界面操作的简易主要从以下几个方面衡量：

界面布局合理界面一致性鼠标与键盘合理对应快捷键

的使用（支持windows快捷键）尽可能减少在动作间需记忆

的信息数量。合理的界面大小，高效利用显示器。

3、界面交互人性化

人性化的界面交互，让用户使用起来得心应手。我们做

到的良好的人机交互，包括很多方面。我们经过长期的调研

和努力，从适应性、有效性、易学习性、用户满意度几个方

面出发来设计界面，做到更好更方便的人机交互。

窗口弹出位置明显。让用户轻松中转至新的界面。出错

2 21

信息及警告。出错信息是指出现问题时系统给出的提示，用

来提醒用户应该做的正确操作。

执行动作提示。界面作为人机对话的工具，用户做了任

何动作，我们会给您一个视觉或听觉提示，让您更加放心的

使用我们提供的每一个功能。

联机帮助。安装系统的同时，系统自动为您提供帮助文

档，方便您的前期使用和查阅。

4、界面美观

美观大方的界面可以使界面布局和色彩搭配更加合理，

从而消除用户的视觉疲劳，让用户不会因为长时间使用软件

而感觉疲劳，减少长时间操作对眼睛产生的伤害。

某项目具体的界面规范

页面位置导航要摆放在界面的首行左起，要加入当前界

面位置说明按钮

（1）全屏窗口

检索按钮统一放在检索条件的下一行的左起位置。操作

按钮统一放在页面位置导航的下一行左起顺序排放。（2）非

全屏窗口

3 21

功能按钮放在最下面一行，居中对齐。关闭按钮

每个非全屏窗口都有一个关闭按钮，和功能按钮一样放

在最下面一行，最后的位置。

表格

表格内部无边框，外侧边框为浅蓝色（6699cc），表头

背景色（739ae0），奇数行背景色（F8F8FF），偶数行背景色

（e9F2Fb）。

对于不带分页导航条的表格，要增加竖滚条，来使页面

的布局稳定。

分页导航条

和表格配合使用，放在表格下方，有当前页码、总页数、

总记录数、首页、上一页、下一页、末页、跳转到指定页。

4 21

弹出框使用统一的样式，有标题，有边框，有背景色，

居中显示弹出框。日期选择使用统一的日期选择图片按钮，

日期选择控件要求可以快速选择日期。上移、下移、左移、

右移按钮使用统一的按钮样式，操作的逻辑要统一。文件选

择按钮使用统一的文件选择图片按钮。不能编辑的输入框背

景色统一为灰色。术语使用的术语要统一，不能随便修改。

页面主题风格可实现多类页面主题风格，提供给用户选择。

菜单深度一般不超过3层。复选框多个复选框要带有全选和

全取消功能，方便用户选择。下拉框在选项较少时，使用下

拉框；在选项较多时，使用列表框。输入框

必输项输入框后面要附带红星标志，来说明该输入框必

须输入。

要有长度控制，比如最长5位，输入5位字符后就不能

再输入。

要有合法性验证，比如数字类，日期类等输入要判断输

入数据是否合法，不合法时。快捷键

对于录入等用户经常用到，且要求录入速度高的界面，

要求常用按钮如保存、新增等按钮有快捷键。

tab键

对于录入等用户经常用到，且要求录入速度高的界面，

要求输入项按从左到右，从上到下的顺序使用tab键进行切

换。

5 21

篇二：ios与android界面设计规范整合

ios篇

一、尺寸及分辨率iphone界面尺寸：320*480、640*960、

640*1136

iphone6：4.7英寸(1334×750)，iphone6plus：5.5英

寸(1920×1080)

ipad界面尺寸：1024*768、2048*1536

单位：像素72dpi，在设计的时候并不是每个尺寸都要

做一套，尺寸按自己的手机来设计，比较方便预览效果，一

般用640*960或者640*1136的尺寸来设计。

ps：作图的时候确保都是用形状工具(快捷键：u)画的，

这样更方便后期的切图或者尺寸变更。

(首三个系列的屏幕分辨率为320x480(hVga)，163ppi；

iphone4及iphone4s的屏幕分辨率为640x960，326ppi；

iphone5则是640x1,136，326ppi，而iphone5的屏幕对比

为接近16:9（71:40）。)

二、界面基本组成元素

iphone的app界面一般由四个元素组成，分别是：状态

栏(statusbar)、导航栏(navigation)、主菜单栏(submenu)、

内容区域(content)。

这里取用640*960的尺寸设计，那我们就说说在这个尺

寸下这些元素的尺寸。

6 21

状态栏(statusbar)：就是我们经常说的信号、运营商、

电量等显示手机状态的区域，其高度为：40px导航栏

(navigation)：显示当前界面的名称，包含相应的功能或者

页面间的跳转按钮，其高度为：88px主菜单栏(submenu，tab)：

类似于页面的主菜单，提供整个应用的分类内容的快速跳转，

其高度为：98px内容区域(content)：展示应用提供的相应

内容，整个应用中布局变更最为频繁，其高度为：734px

[下图为了说明我不是瞎掰的：960-40-88-98=734]

至于我们经常说的iphone5/5s

的640*1136的尺寸，其实就是中间的内容区域高度增

加到910px。

ps：在最新的ios7的风格中，苹果已经开始慢慢弱化

状态栏的存在，将状态栏和导航栏合在了一起，但是再怎么

变，尺寸高度也还是没有变的，只不过大家在设计ios7风

格的界面的时候多多注意下~

三、字体大小

iphone上的字体英文为：helveticaneue。至于中文mac

下用的是黑体，win下则为华文黑体(最新字体称为黑体-简)。

下图是百度用户体验做过的一个小调查，可以看出用户

可接受的文字大小。

四，列表栏目间距

ios设计规范中列表的高度为88px

7 21

五，颜色值问题

ios颜色值取Rgb各颜色的值比如给予ios开发的色值

为R:12g:34b:56给出的值就是12,34,56(有时也要根据开发

的习惯，有时也用十六进制)；android开发的色值则使用十

六进制#0c2238

andRoid篇

一、尺寸及分辨率

android界面尺寸：480*800、720*1280、1080*1920。[单

位：像素]

android比iphone的寸尺多了很多套，建议取用

720*1280这个尺寸，这个尺寸720*1280中显示完美，在

1080*1920中看起来比较清晰，切图后的图片文件大小也适

中，应用的内存消耗也不会过高。

二、界面基本组成元素android

的app界面和iphone的基本相同：状态栏、导航栏、

主菜单、内容区域。

android中我们取用的720*1280的尺寸设计，那我们就

说说在这个尺寸下这些元素的尺寸。

状态栏高度为：50px

导航栏高度为：96px

主菜单栏高度为：96px

内容区域高度为：1038px(1280-50-96-96=1038)

8 21

android最近出的手机都几乎去掉了实体键，把功能键

移到了屏幕中，当然高度也是和菜单栏一样的：96pxandroid

为了在界面上区别于ios，android4.0开始提出的一套holo

的ui风格一些app的最新版本都采用了这一风格，这一风

格最明显的变化就是将下方的主菜单移到了导航栏下面，这

样的方式解决了现在很多手机去除实

体键后再屏幕中显示而出现的双底栏的尴尬情景。

三、字体大小

android上的字体为：droidsansfallback，是谷歌自己

的字体，与微软雅黑很像。

同样，百度用户体验的调查中，可以看出用户可接受的

文字相应问题。

具体大小，还是那句话，找自己喜欢的app界面，手机

截图后放进ps自己对比调节字体大小，切记，一定是高清

截图

篇三：界面设计规范

界面设计规范前言

界面是软件与用户交互的最直接的层，界面的好坏决定

用户对软件的第一印象。而且设计良好的界面能够引导用户

自己完成相应的操作，起到向导的作用。同时界面如同人的

面孔，具有吸引用户的直接优势。设计合理的界面能给用户

带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失

9 21

败，让用户有挫败感，再实用强大的功能都可能在用户的畏

惧与放弃中付诸东流。目前界面的设计引起软件设计人员的

重视的程度还远远不够，直到最近网页制作的兴起，才受到

专家的青睐。而且设计良好的界面由于需要具有艺术美的天

赋而遭拒绝。目前流行的界面风格有三种方式：多窗体、单

窗体以及资源管理器风格，无论那种风格，以下规则是应该

被重视的。

一、易用性：

按钮名称应该易懂，用词准确，摒弃模棱两可的字眼，

要与同一界面上的其他按钮易于区分，能望文知意最好。理

想的情况是用户不用查阅帮助就能知道该界面的功能并进

行相关的正确操作。

易用性细则：

1、完成相同或相近功能的按钮用Frame框起来，常用

按钮要支持快捷方式。

2、完成同一功能或任务的元素放在集中位置，减少鼠

标移动的距离。

3、按功能将界面划分局域块，用Frame框括起来，并

要有功能说明或标题。

4、界面要支持键盘自动浏览按钮功能，即按tab键的

自动切换功能。

5、界面上首先应输入的和重要信息的控件在tab顺序

10 21

中应当靠前，位置也应放在窗口上较醒目的位置。

6、同一界面上的控件数最好不要超过10个，多于10

个时可以考虑使用分页界面显示。

7、分页界面要支持在页面间的快捷切换，常用组合快

捷键ctrl+tab。

8、默认按钮要支持enter及选操作，即按enter后自

动执行默认按钮对应操作。

9、可写控件检测到非法输入后应给出说明并能自动获

得焦点。

10、tab键的顺序与控件排列顺序要一致，目前流行总

体从上到下，同时行间从左到右的方式。

11、复选框和选项框按选择机率的高底而先后排列。

12、复选框和选项框要有默认选项，并支持tab选择。

13、选项数相同时多用选项框而不用下拉列表框。

14、界面空间较小时使用下拉框而不用选项框。

15、选项数较少时使用选项框，相反使用下拉列表框。

16、专业性强的软件要使用相关的专业术语，通用性界

面则提倡使用通用性词眼。

二、规范性：

通常界面设计都按windows界面的规范来设计，即包含

"菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜

单"的标准格式，可以说：界面遵循规范化的程度越高，则

11 21