建材秒知道
登录
建材号 > 设计 > 正文

UI界面设计需要遵循哪些规范

伶俐的小松鼠
舒心的鸭子
2022-12-30 21:40:15

UI界面设计需要遵循哪些规范

最佳答案
雪白的云朵
大气的树叶
2026-03-29 11:48:52

一:遵循一致的准则,确立标准并遵循

无论是控件使用,提示信息措辞,还是颜色、窗口布局风格,遵循统一的标准,做到真正的一致。

这样得到的好处:

1:使用户使用起来能够建立起精确的心里模型,使用熟练了一个界面后,切换到另外一个界面能够很轻松的推测出各种功能,语句理解也不需要费神理解

2:降低培训、支持成本,支持人员不会行费力逐个指导。

3:给用户统一感觉,不觉得混乱,心情愉快,支持度增加

二:(Color)颜色使用恰当,遵循对比原则:

1:统一色调,针对软件类型以及用户工作环境选择恰当色调:

如:安全软件,根据工业标准,可以选取黄色,绿色体现环保,蓝色表现时尚、紫色表现浪漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等

2:如果没有自己的系列界面,采用标准界面则可以少考虑此方面,做到与操作系统统一,读取系统标准色表

3:色盲、色弱用户,即使使用了特殊颜色表示重点或者特别的东西,也应该使用特殊指示符,?quot!,?着重号,以及图标等

4:颜色方案也需要测试,常常由于显示器、显卡的问题,色彩表现每台机器都不一样,应该经过严格测试,不同机器进行颜色测试

5:遵循对比原则:在浅色背景上使用深色文字,深色背景上使用浅色文字,蓝色文字以白色背景容易识别,而在红色背景则不易分辨,原因是红色和蓝色没有足够反差,而蓝色和白色反差很大。除非特殊场合,杜绝使用对比强烈,让人产生憎恶感的颜色。6:整个界面色彩尽量少的使用类别不同的颜色

三:(Resource)资源

一个多姿多彩的人机交互界面,少不了精美的鼠标光标、图标以及指示图片、底图等。

1:也需要遵循统一的规则,包括上述颜色表的建立,图标的建立步骤也应该尽可能的形成标准,参考itop的outlookbar图标设计标准

2:有标准的图标风格设计,有统一的构图布局,有统一的色调、对比度、色阶,以及图片风格

3:底图应该融于底图,使用浅色,低对比,尽量少的使用颜色。

4:图标、图像应该很清晰的表达出意思,遵循常用标准,或者用户机器容易联想的到物件,绝对不允许画出默认奇妙的图案。

5:鼠标光标样式统一,尽量使用系统标准,杜绝出现重复的情况,例如某些软件中一个手的形状就有4钟不同的样子。

四:(Font)字体

使用统一字体,字体标准的选择依据操作系统类型决定。

中文采用标准字体,“宋体”,英文采用标准MicrosoftSansSerif不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常。

字体大小根据系统标准字体来,例如MSS字体8磅,宋体的小五号字(9磅)五号字(10.5磅)。

所有控件尽量使用大小统一的字体属性,除了特殊提示信息、加强显示等例外情况

Windows系统有个桌面设置,设置大字体属性,很多界面设计者常常为这个恼火,如果设计时遵循微软的标准,全部使用相对大小作为控件的大小设置,当切换大小字体的时候,相对不会有什么特殊问题。

但是由于常常方便使用点阵作为窗口设计单位,导致改变大字体后,出现版面混乱的问题。

这个情况下,应该做相应处理:

1:写程序自动调节大小,点阵值乘以一个相应比例

2:全部采用点阵作为单位,不理会系统字体的调节,这样可以减少调节大字体带来的麻烦。BCB/DELPHI中多采用这种方法,但是必然结果是和系统不统一。

五:(Text)文字表达

提示信息、帮助文档文字表达遵循以下准则:

1:口语化、客气、多用您、请,不要用或少用专业术语,杜绝错别字

2:断句逗号句号顿号分号的用法,提示信息比较多的话,应该分段,

3:警告、信息、错误使用对应的表示方法

4:使用统一的语言描述,例如一个关闭功能按钮,可以描述为退出、返回、关闭,则应该统一规定。

5:根据用户不同采用相应的词语语气语调,如专用软件,可以出现很多专业属于,用户为儿童:这可以语气亲切和蔼,老年用户则应该成熟稳重。制定标准遵循之。

六:(STYLE)控件风格,不要使用错误控件,控件功能要专一

有设计好的同一风格的控件,如果没有能力设计出一套控件,则使用标准控件,绝对不能不伦不类,杂乱无章

不要错误使用控件,例如:

使用Button样式做TTable的功能,拿主菜单条显示版权信息,

统一类型的控件操作方式相同,例如一个控件双击可以执行某些动作,而同样控件,双击却没有任何反映

一个控件只做单一功能,不复用

七:(ALIGN)控件布局,窗口不拥挤,按功能组合控件

1:屏幕不能拥挤

拥挤的屏幕让人难以理解,因而难以使用。试验结果(Mayhew,1992年)屏幕总体覆盖度不应该超过40%,而分组钟覆盖度不应该超过62%。

让人看上去,不能太拥挤,也不能太松散。

整个项目,采用统一的控件间距,通过调整窗体大小达到一致,即使在窗体大小不变的情况下,宁可留空部分区域,也不要破坏控件间的行间距。

2:区域排列

一行控件,纵向中对齐,控件间距基本保持一致

行与行之间间距相同,靠窗体Border距离应大于行间间距(间距加边缘留空)。

当屏幕有多个编辑区域,要以视觉效果和效率来组织这些区域。

3:数据对齐要适当

说明文字,中文版应使用中文全角冒号,纵向对齐时,并按冒号右对其,如图。纵向控件宽度尽量保持相通。并左对齐。

4:有效组合

逻辑上相关联的控件应当加以组合,以表示其关联性,反之,任何不想光的项目应当风格开,在项目集合间,用间隔对其进行分组,或者使用方框划分各自区域。

例如:以下界面,选择搜索方式来判断号码范围是表示主叫号码范围还是被叫号码范围,和入帐方式无关,

则应该修改为:搜索方式和入帐方式调换位置。以免用户产生误解。

5:窗口缩放时,控件位置、布局:

为了使界面不出现跑版或者难看的局面,解决方法:

1:固定窗口大小,不允许改变尺寸,

2:改变尺寸的窗口,在Onsize的时候做控件位置、大小的相应改变。

BCB/DELPHI的VCL中,大部分控件有布局属性: 某些控件拥有alignment属性,可以用来做布局调节:TcustomPanel,Tmemo等,考左靠右靠上靠下以及撑满(Client)属性,用来根据版面自动调节。

大部分控件有属性Anchors,里面上下左右akLeft,akTop等如果为true,则表示相对各个边缘的距离是否改变。这个可以进一步设计好排版工作。

八:(TABORDER)TAB顺序

习惯用法,阅读顺序,从从左到右,从上到下

窗体中控件的Tab按键激活顺序,TabOrder,.BCB/DELPHI中使用窗体设计右键菜单选择taborder设置,VC中窗体RES编辑区域使用ctrl+D

九:(ShortcutKey&Accelerator&PopMenu)快捷键、加速键和弹出菜单

快捷键:

1:全局快捷键菜单中加以描述CTRL+XXX并入帮助列表。

2:快捷键写入帮助,特殊说明,并在使用培训时强调使用

十:(ACTION)用户交互

1:disable而不是notvisible

要使一个功能有时允许有时不允许用户使用,则这个控件的不能随便隐藏,应该使用disable属性进行表示,以免用户发现控件失踪后措手无策

2:窗口弹出位置要明显

点击一个控件,弹出窗口或者菜单,应该给人明显提示,最低要求是覆盖刚才点击的位置,让用户轻松跳转到新的界面。

3:执行动作要提示

十一:(HELP)联机帮助:

1:系统默认、行业标准的控件操作不需要逐一描述,只需要对特殊控件加以描述

2:特殊操作、特殊功能界面,在界面上加控件直接连接到对应的HELP文件中

3:特殊设置详细,应该在界面上用简洁明了的语句说明,或者是好用Tiptool,并由第二步帮助

十二:发行时阐明规则

对统一的东西进行逐一阐述,并加以典型描述,放入HELP和用户手册中,同时加有词汇表

附录:

美工何时参与进来:

美工作为界面美化的主要人员,不但拥有艺术设计、包装设计的才能,还应该穿插整个项目,给界面程序设计人员提出系统参考意见。

1:软件设计前期,美工参与需求了解,分析同类软件界面有缺点,提出主色调、典型界面风格、以及构思整个美术包装等。

2:界面原型设计过程中,与开发人员共同修改、商榷最终表现样式,以及确立UI标准。

3:程序开发过程中,提供标准风格的资源文件(icon,cur,bmp等),并总结出统一风格的资源的设计过程,形成规范文档*.

4:产品化方面,协助制作帮助文件、网站风格以及参与制作,制作附带宣传图片、动画、产品包装、海报等。

最新回答
义气的彩虹
花痴的小猫咪
2026-03-29 11:48:52

一致性原则

坚持以用户体验为中心设计原则,界面直观、简洁,操作方便快捷,用户接触软件后对界面上对应的功能一目了然、不需要太多培训就可以方便使用本应用系统。 字体-保持字体及颜色一致,避免一套主题出现多个字体;-不可修改的字段,统一用灰色文字显示。 对齐-保持页面内元素对齐方式的一致,如无特殊情况应避免同一页面出现多种数据对齐方式。 表单录入-在包含必须与选填的页面中,必须在必填项旁边给出醒目标识(*);-各类型数据输入需限制文本类型,并做格式校验如电话号码输入只允许输入数字、邮箱地址需要包含“@”等,在用户输入有误时给出明确提示。 鼠标手势-可点击的按钮、链接需要切换鼠标手势至手型; 保持功能及内容描述一致-避免同一功能描述使用多个词汇,如编辑和修改,新增和增加,删除和清除混用等。建议在项目开发阶段建立一个产品词典,包括产品中常用术语及描述,设计或开发人员严格按照产品词典中的术语词汇来展示文字信息。 准确性原则

使用一致的标记、标准缩写和颜色,显示信息的含义应该非常明确,用户不必再参考其它信息源。 显示有意义的出错信息,而不是单纯的程序错误代码。 避免使用文本输入框来放置不可编辑的文字内容,不要文本将输入框当成标签使用。 使用缩进和文本来辅助理解。 使用用户语言词汇,而不是单纯的专业计算机术语。 高效地使用显示器的显示空间,但要避免空间过于拥挤。 保持语言的一致性,如“确定”对应“取消”,“是”对应“否”。 布局合理化原则

在进行UI设计时需要充分考虑布局的合理化问题,遵循用户从上而下,自左向右浏览、操作习惯,避免常用业务功能按键排列过于分散,以造成用户鼠标移动距离过长的弊端。多做“减法”运算,将不常用的功能区块隐藏,以保持界面的简洁,使用户专注于主要业务操作流程,有利于提高软件的易用性及可用性。 菜单-保持菜单简洁性及分类的准确性,避免菜单深度超过3层。-菜单中功能是需要打开一个新页面来完成的,需要在菜单名字后面加上“…”。【只适用于C/S架构,B/S请无视】。 按钮确认操作按钮放置左边,取消或关闭按钮放置于右边。 功能-未完成功能必须隐藏处理,不要置于页面内容中,以免引起误会。 排版-所有文字内容排版避免贴边显示(页面边缘),尽量保持10-20像素的间距并在垂直方向上居中对齐;各控件元素间也保持至少10像素以上的间距,并确保控件元素不紧贴于页面边沿。 表格数据列表-字符型数据保持左对齐,数值型右对齐(方便阅读对比),并根据字段要求,统一显示小数位位数。 滚动条-页面布局设计时应避免出现横向滚动条。 页面导航(面包屑导航)-在页面显眼位置应该出现面包屑导航栏,让用户知道当前所在页面的位置,并明确导航结构,如:首页>新闻中心>欧科智能招商服务平台正式发布,其中带下划线部分为可点击链接。 信息提示窗口-信息提示窗口应位于当前页面的居中位置,并适当弱化背景层以减少信息干扰,让用户把注意力集中在当前的信息提示窗口。一般做法是在信息提示窗口的背面加一个半透明颜色填充的遮罩层。 系统操作合理性原则 尽量确保用户在不使用鼠标(只使用键盘)的情况下也可以流畅地完成一些常用的业务操作,各控件间可以通过Tab键进行切换,并将可编辑的文本全选处理。 查询检索类页面,在查询条件输入框内按回车应该自动触发查询操作。 在进行一些不可逆或者删除操作时应该有信息提示用户,并让用户确认是否继续操作,必要时应该把操作造成的后果也告诉用户。 信息提示窗口的“确认”及“取消”按钮需要分别映射键盘按键“Enter”和“ESC”。 避免使用鼠标双击动作,不仅会增加用户操作难度,还可能会引过用户误会,认为功能点击无效。 表单录入页面,需要把输入焦点定位到第一个输入项。用户通过Tab键可以在输入框或操作按钮间切换,并注意Tab的操作应该遵循从左向右、从上而下的顺序。 系统响应时间原则

系统响应时间应该适中,响应时间过长,用户就会感到不安和沮丧,而响应时间过快也会影响到用户的操作节奏,并可能导致错误。因此在系统响应时间上坚持如下原则: 2-5秒窗口显示处理信息提示,避免用户误认为没响应而重复操作; 5秒以上显示处理窗口,或显示进度条; 一个长时间的处理完成时应给予完成警告信息。

机智的冬瓜
活泼的河马
2026-03-29 11:48:52

一、字体

                iOS的字体:

                                  中文字体:苹方 / PingFang SC

                                   CSS:Font-Family:PingFang SC

                                   英文、数字:Helvetial

           

               Andioid的字体:

                                  中文字体:思源黑体 / Noto Sans Han

                                   英文、数字:Roboto

二、规范

       

            1、  iPhone界面尺寸

2、  iPhone图标尺寸

3、  iPad的设计尺寸

4、 iPad的图标尺寸

5、 Andioid的图标尺寸

6、Andioid的dp/sp/px换算表

三:小结

                    iPhone的主流设计尺寸:750x1334 px

                                                          1242x2208 px

                    Andioid的主流设计尺寸:720x1280 px

                                                           1080x1920 px

健壮的小海豚
温柔的蜗牛
2026-03-29 11:48:52
原型设计尺寸

☆ 状态栏(status bar):就是电量条,其高度为:20px;

☆ 导航栏(navigation):就是顶部导航,有线其高度为:45px;没有线高度就是44px;

☆ 主菜单栏(submenu,tab):就是标签栏,底部导航,其高度为:46px;

☆ 信号格:5 * 5

☆ wifi 图片:11 * 9

☆ 锁:11 * 11

☆ 导航:8 * 8

☆ 电量:22 * 9

☆ 闪电:5 * 8

☆ 状态栏中的文字:10px

☆ 顶部导航栏的图标尺寸为16x16px左右,底部标签栏的图标尺寸为23 x 23px左右。

☆ 导航栏的文字大小最大值是14px,底部标签栏的图标下方的文字大小为10px。

☆ 内容区域的文字大小是:10px, 12px,14px,16px。

① 文字黑色:#282828

② 文字深灰色:#656565

③ 文字浅灰色:#989898

④ 边框浅灰色:#C3C3C3

⑤ 背景淡灰色:#f2f2f2

⑥ 按钮背景纯白色:#ffffff

A、疏远距离:比如,所有元素距离手机屏幕最左边的距离。

B、亲密距离:比如,左边图标与右边文字之间的距离。

1、iPhone6手机模型尺寸:429x881px

2、界面尺寸布局:满屏尺寸375x667px

3、高度电量条高度20px,导航栏高度44px,标签栏高度46px;

4、各区域图标大小导航栏图标16px,底部标签栏图标23px;

5、各区域文字大小电量条-文字10px,导航栏-文字14px,标签栏-文字10px;

6、常用的文字大小:16px,14px,12px,10px;

7、常用的颜色:背景浅灰色:#f2f2f2, 文字深黑色: #323232,边框色深灰:#CCCCCC;

8、常用可点击区域的高度(比如搜索区域):28px;

9、单行文字的背景框的高度:44px,双行则为:88px,三行则为:132px;

10、常用间距:亲密距离:10px;疏远距离:15px,其它距离:5px,22px等;

可爱的白开水
不安的奇异果
2026-03-29 11:48:52

用户界面是业务应用流程的实际体现,是系统直接面对用户的窗口。用户界面一般采用汉字功能菜单选择、联机帮助、出错提示等友好的交互方法。在条件允许的情况下,可考虑增加自学习、自适应能力,以提高系统智能化的程度。用户界面设计的原则是。

1)简单化。用户界面设计应简单可用。其输入格式应当易于理解,附加的信息少;拥有汉字菜单提示;能直接处理指定媒体上的信息和数据,且自动化程度高,操作简便;能按用户要求的表格或图形输出,或反馈计算结果到用户指定的媒体上。

2)通俗化。窗口的布局、色彩的搭配、字体风格等方面,要符合一般用户的习惯,采用Windows的风格设计各种类型的对话框及图标。

3)标准化。各菜单标准统一,软件技术用语应符合软件工程规范;应用领域的术语应符合农业地质专业的标准;在输入、输出说明里,同一术语的含义应完全一致。

4)人性化。用户界面设计应以用户为中心(罗杰红,2002),考虑用户的特点、能力、知识水平,使用户界面满足不同用户的要求。对不同用户应有不同的界面形式,或者用户可以根据需要制定和修改界面方式,如修改命令、设置动态菜单等。

5)可靠性。用户能自由地对界面上的每一项做出选择,且所有选择都是可逆的。在用户做出危险的选择时有信息提示是减少用户错误的有效方法。界面提供运行指导和联机帮助功能。

善良的蚂蚁
敏感的荷花
2026-03-29 11:48:52
一、网页尺寸

制作网页时,我们选用的分辨率是72像素/英寸,使用的画布尺寸1920px*1080px。

但是并不代表我们可以在整个画布上作图。

网页的布局主要有两种,左右型布局和居中型布局。布局的不一致,使得可设计的空间也不相同。

二、网页字体

字体设计的总原则是:可辨识性和易读性。

网页的文字设计是系统默认的字体:宋体、微软黑体、苹果系统黑体,英文则建议使用arial无衬线字体

常用的字号大小有以下几种:

12px是应用于网页的最小字体,适用于非突出性的日期,版权等注释性内容。

14px 则适用于非突出性的普通正文内容。

16px、18px或者20px 适用于突出性的标题内容。

无限的雪碧
淡淡的大雁
2026-03-29 11:48:52

1、简易性

界面的简洁是要让用户便于使用、便于了解产品,并能减少用户发生错误选择的可能性。

2、用户语言

界面中要使用能反映用户本身的语言,而不是游戏设计者的语言。

3、记忆负担最小化

人脑不是电脑,在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆有限且极不稳定,24小时内存在约25%的遗忘率。所以对用户来说,浏览信息要比记忆更容易。

4、一致性

它是每一个优秀界面都具备的特点。界面的结构必须清晰且一致,风格必须与产品内容相一致。软件中往往存在多个组成部分(组件、元素)。不同组成部分之间的交互设计目标需要一致。交互元素的外观往往影响用户的交互效果。同一个(类)软件采用一致风格的外观,对于保持用户焦点,改进交互效果有很大帮助。

5、清楚

在视觉效果上便于理解和使用。软件要为用户使用,用户必须可以理解软件各元素对应的功能。如果不能为用户理解,那么需要提供一种非破坏性的途径,使得用户可以通过对该元素的操作,理解其对应的功能。

6、用户的熟悉程度

用户可通过已掌握的知识来使用界面,但不应超出一般常识。

7、从用户习惯考虑

想用户所想,做用户所做。用户总是按照他们自己的方法理解和使用。

通过比较两个不同世界(真实与虚拟)的事物,完成更好的设计。如:书籍对比竹简。

8、排列

一个有序的界面能让用户轻松的使用。软件的交互流程,用户可以控制。功能的执行流程,用户可以控制。

9、安全性

用户能自由的作出选择,且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。

10、灵活性

简单来说就是要让用户方便的使用,但不同于上述。即互动多重性,不局限于单一的工具(包括鼠标、键盘或手柄、界面)。

11、人性化

高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统,即用户可依据自己的习惯定制界面,并能保存设置。

结实的睫毛
傲娇的棒棒糖
2026-03-29 11:48:52
UI 设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计,也叫界面设计。UI 设计分为实体 UI 和虚拟UI,互联网说的 UI 设计是虚拟 UI, UI 即User Interface(用户界面)的简称。

UI 设计师的职能大体包括三方面:一是图形设计,软件产品的产品“外形”设计。二是交互设计,主要在于设计软件的操作流程、树状结构、操作规范等。三是用户测试/研究,这里所谓的“测试”,其目标恰在于测试交互设计的合理性及图形设计的美观性,主要通过以目标用户问卷的形式衡量 UI 设计的合理性。

UI设计目前的前景还是很不错的,很多企业都缺少 UI设计师。而且可以看到的是,现在社会的发展,更多的智能机和智能机器人研发出现,这些都离不开UI 设计师。所以说 UI 设计的是很有前途的,是不会失业的。而且 UI 设计门槛不高,要入门也不难的。

从工作内容来说,UI 设计在当前的互联网领域、科技领域可以说无处不在,

好的 UI 设计能够明显提升用户的使用体验,从而给产品带来更多的附加值,所以UI 设计对于互联网产品是非常重要的。目前 UT 设计通常分为两个大的工作方向,一个是交互设计,另一个是视觉设计。

总的来说,UI 设计相比较于编程而言,还是非常适合大众学的并且就业前景很广阔。学完 UI 设计,能获得一份稳定而又不失乐趣的工作,同时有利于追求更高品质的生活,在艺术领域可以获得更多的启迪。

隐形的便当
壮观的羽毛
2026-03-29 11:48:52

大家都知道手机采用的:一个是苹果的iOS系统,另一个就是谷歌公司的安卓系统。华为的鸿蒙系统虽然早就上线,但是还没有真正运用在手机移动端上,小阿在这里期待着,希望有一天也能写“华为‘鸿蒙系统’的界面尺寸规范。”

这两者之间有一个明显的区别就是iOS系统是非开源的,简单来说就是不能别随意改动的,连图标都是必须带圆角的,对交互设计师很友好的。

而安卓系统就是开源的,界面可以随意改动,尺寸也没有特别的规范,图标、尺寸成千上万种,根据手机品牌不同,形状也不同,对于交互设计稍微有那么些许不友好。

那我们就来看看安卓和iOS的具体有哪些界面规范。

一、iOS界面规范

首先苹果分为两种尺寸,一种是中码比如6s、7、8等,这种我们一般切图命名为@2X。还有一种就是Plus版本,这种一般切图命名为@3X。

苹果6s 的尺寸750px * 1334px,6s Plus的尺寸就是1242px * 2208 px。两者之间的关系就是1.5倍,怎么说呢,就是6s之类的手机想要变成Plus,我们设计师稍微想要偷懒一下设计,只需要整体扩大1.5倍,比如图标。

来分析一下界面的尺寸规范:

首先是状态栏,就是信号电池栏的高度为40px。导航栏部分,就是“设置”栏高度为88px。

而下边的底部栏(导航栏)高度则为98px。

注意这三种尺寸是规定比较死的。我们做开发遇到Plus版把以上尺寸等比例扩大1.5倍就可以了。剩下的中间空白部分,我们就可以任意填充内容,Banner或者图标?

☆ 关于图标部分

苹果的图标极具有美感,完全符合栅格黄金比例,所以看起来十分协调。因为都是使用的网格进行规范化设计,所以一整套图标都保持着高统一性。

整个点击图标最小不能小于44px,一般大小为58px,圆角为12px,但是我们习惯取为整数60px,就会非常的标准。为什么一定有最小的控制呢?因为我们手指有一个触碰面呀~低于上述的宽度,就可能碰不到。一定要非常注意用户的使用感受哦。

☆ 关于分割线部分

注意分割线不是一条线,是一个宽度为1px的矩形,而且颜色多为灰色。

☆ 关于板块与板块之间

板块与板块之间的灰色条间隔是30-70之间,一般来说取整数。iOS系统采取了70 px,有利于减轻用户的阅读负担。列表的高度一般高于88 px,列表与列表之间的距离是10px-30px,太小会有碰撞。作为UI设计师,这一点是要考虑的是吧?

☆ 关于列表中的尺寸规范以及字体要求

☆ 关于左右间隔的安全区域

这个安全区域又称之为留白边距,iOS的原生态页面【设置】页面的边距是30px,根据不同产品有不同的调整,宽度一般在16px--30px浮动,最大的特点就是数值全是偶数。

☆ 关于切换按钮的尺寸

☆ 关于字体

iOS系统的字体是苹方字体,字体的颜色和粗细也大有讲究,标题等文字就是粗体,一些说明文字等就是浅色非加粗体。常常用文字的粗细体来区分重要信息和次要信息,进行信息层级的划分。字体颜色很少采用纯黑色,一般用的是深灰色和浅灰色。

主标题的字体大小设置一般是32-36左右,加粗居中。列表中的文字就要小一些,字体大小为30,不会加粗。辅助性字体大小一般24-26。说明文字一般不会小于22,最小设置为20,再小就看不到啦。另外需要注意的一点是所有的字号设置都必须为偶数,上下级内容字号极差关系为2-4号。

关于苹果界面的小部分尺寸规范就介绍到这里,下期再做安卓界面的尺寸介绍。

作为UI设计师,一定要具体掌握界面的大小尺寸来适应美学观点,让人感觉协调舒适,能在有效的范围内极快吸引用户的注意力。

二、安卓界面规范

众所周知,安卓系统是开源的,国内又有超多的手机厂商,小米、魅族、华为、oppo、三星等,每一个品牌有属于自己的UI设计规范,但是我们主要分析UI界面尺寸规范。

1、字体

安卓系统中文采用的是思源黑体,英文字体为robot字体。

只使用偶数单位 24 pt,28 pt,36 pt等字体大小

2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思?

讲图标之前先来分析一下一排英文的意思:

mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小,依次数值越大,其分辨率越高。常用的是xxhdpi和xxxhdpi。

dp是安卓系统专用的长度单位,设备独立像素的意思。不同设备有不同的显示效果,这个和设备硬件有关。多为图标使用,文字则用sp(放大像素),主要用于字体显示best for textsize。

px是像素的意思, 不同设备显示效果相同。

安卓各屏幕密度关系如下:

3、图标

不同手机品牌的图标的标志是不一样的,对应不同大小屏幕的尺寸如下:

系统图标的尺寸:

快捷图标的尺寸:

应用图标的尺寸:

4、应用栏的尺寸

从左到右依次是:① 应用栏高度:56dp;应用栏左右内边距为16dp;应用栏图标上下左内边距为16dp;应用栏标题左内边距为72dp;应用栏标题下边距:20dp;

②应用栏高度为128dp;

③操作栏高度为56dp;标题栏高度:80dp;标题栏底部内边距:8dp;描述区域高度:72dp;描述区底部内边距:16dp。

5、列表高度

垂直边框、水平外边距、边框左右外边距各16dp;带有图标或者头像的内容有72dp的左边距。

垂直边距

①状态栏:24dp;②工具栏:56dp;③子标题:48dp;④列表项:72dp

垂直边框、水平外边距、边框左右外边距各16dp;带有图标或者头像的内容有72dp的左边距。

垂直边距

①状态栏:24dp;②工具栏:56dp;③标题和列表项:48dp;④子标题:48dp;⑤内容区域间距离为8dp

6、切图

上周我们讲到iPhone 6与iPhone 6 Plus约是1.5的关系,而xhdpi的Android手机屏幕与xxdpi的屏幕刚好是1.5倍的关系,所以iPhone 6 Plus和xxhdip也可以共用一套切图,掌握好尺寸关系,能让工作变得简单很多。

7、界面适配

安卓多屏幕支持的基础是它能够管理应用程序的布局和位图可绘制对象的渲染以适当的方式对当前屏幕配置的能力。该系统处理的大部分工作由布局缩放以适合屏幕尺寸/密度和缩放位图可绘制在屏幕密度正确呈现您的应用程序在每个屏幕的配置,来优化用户界面设计,带来更良好的用户体验。

如何做到安卓界面适配呢?大家一定要很清楚的了解分辨率、屏幕大小、密度的关系;明白实际密度和系统密度的关系,dp、sp、px的区别;明白dp与px的转换。这里不做过多阐述,后期写一篇具体的~

安卓的界面规范就讲到这里,要明白设计界面规范的意义是确保设计的统一性与合理性,规范维护的是项目的统一,为了项目利益最大化,高效化。所以作为UI设计师的我们,如果一点设计规范不遵守,全靠自己想当然,那就别发给前端人员啦,他也看不懂。

所以作为UI设计,必须要要遵守设计规范,这样才能做到设计有道可寻,希望以上回答对你了解手机界面设计规范有所帮助。

虚心的大山
瘦瘦的往事
2026-03-29 11:48:52
01.界面设计尺寸及栏高度

02.边距和间距

03.内容布局

04.界面图片设计比例

05.建立统一风格的图标

06.APP版式设计规范

07.界面文字设计规范

08.设计适配

09.切图规范

10.设计稿标注