2024年4月3日发(作者：奈映秋)
阿里巴巴 ui 设计规范
篇一：ui 设计规范
命名规则
模块_类别_功能_状态.pngnav_button_search_导航_
按钮_搜索_默认.png
search 搜索 bg 背景 selected 按钮状态（选中）
button 按钮 nav 导航栏 disabled 按钮状态（不
可点击）
tab 菜单栏 icon 图标 default 按钮状态（默认）
bg 背景 personal tada 个人资料 presses 按钮状
态（按下）
user 用户 pop 弹出 back 返回
refresh 刷新 delete 删除 eidt 编辑
image 图片 download 下载 content 内容
banner 广告 login 登陆 left right center 左右中
registered 注册 title 标题 msg 提示信息
link 链接 note 注释 logo 标志
icon 制 作 ：
iOS120px：Icon_120@
80px: Icon_small_40@
58px: Icon_small@
114px: Icon@
Android：36*36px：drawable-ldpi
48*48px：drawable-mdpi 72*72px：
drawable-hdpi 96*96px：
drawable-xhdpi
Android 安卓系统 dp/sp/px 换算
名称
rate（640px）
idpi 240*320
mdpi 320*480 1
hdpi 480*800
xhdpi 720*800
xxhdpi1080*1920
Android 的图标尺寸
屏幕尺寸 启动图标 操作栏上下文
320*480px 48*48px 32*32px 16*16px
480*800px
480*854px 72*72px 48*48px 24*24px640*960px
720*1280px 48*48dp 32*32dp 16*16dp
1080*1920 144*144px 96*96px 48*48px
比率 rate（750px） 系统通知 最细笔画
分辨率 比率 rate（320px）比率
24*24px 2px 36*36px 3px 24*24dp 2dp 72*72px 6px
iPhone 图标尺寸
设备 AppStore 程序应用 状态栏 spotlight 搜索标
签栏(工具栏)导航栏
6p 1024*1024px180*180 54px 87*87 146（66）132
（160px）（物理 60px）
6 1024*1024px120*120 54px 58*58 98 （44）98
5 1024*1024px114*114 40px 58*58 98 （44） 98
4 1024*1024px114*114 40px 58*58 98 （44）98
3
（80px）
点击区域
点击区域大于 44pxretain 屏幕大于 88px
字体大小
上的英文字体：HeiveticaNeue 中文：mac 下是 黑
体-简 win 下 华文黑体
Ios 长文本 （可接受）26px（见小值）30px（舒
适值）32px~34px 双数
短文本 （可接受）28px（见小值）30px（舒适值）
515*512px 57*5720px 29*29 49 （44）44
32px
注释
（可接受）24px（见小值）24px（舒适值）
28px
手机上的字体：Droid sans fallback
Android 高分辨率长文本 （可接受）21px（见小值）
24px（舒适值）27px（480*800）
短文本 （可接受）21px（见小值）24px（舒适值）
27px
注释
（可接受）18px（见小值）18px（舒适值）
21px
Android 低分辨率长文本 （可接受）14px（见小值）
16px（舒适值）18~20px（320*480）
短文本 （可接受）14px（见小值）14px（舒适值）
18px
注释
（可接受）12px（见小值）12px（舒适值）
14~16px
篇二：UI 设计规范
界面是软件与用户交互的最直接的层，界面的好坏决
定用户对软件的第一印象。而且设计良好的界面能够引导
用户自己完成相应的操作，起到向导的作用。同时界面如
同人的面孔，具有吸引用户的直接优势。设计合理的界面
能给用户带来轻松愉悦的感受和成功的感觉，相反由于界
面设计的失败，让用户有挫败感，再实用强大的功能都可
能在用户的畏惧与放弃中付诸东流。目前界面的设计引起
软件设计人员的重视的程度还远远不够，直到最近网页制
作的兴起，才受到专家的青睐。而且设计良好的界面由于
需要具有艺术美的天赋而遭拒绝。
目前流行的界面风格有三种方式：多窗体、单窗体以
及资源管理器风格，无论那种风格，以下规则是应该被重
视的。
1：易用性：
按钮名称应该易懂，用词准确，屏弃没楞两可的字眼，
要与同一界面上的按钮易于区分，能望文知意最好。理想
的情况是用户不用查阅帮助就能知道该界面的功能并进行
相关的正确操作。
易用性细则：
1):完成相同或相近功能的按钮用 Frame 框起来，常
用按钮要支持快捷方式。
2):完成同一功能或任务的元素放在集中位置，减少
鼠标移动的距离。
3):按功能将界面划分局域块，用 Frame 框括起来,并
要有功能说明或标题。
4):界面要支持键盘自动浏览按钮功能，即按 Tab 键
的自动切换功能。
5):界面上首先应输入的和重要信息的控件在 Tab 顺
序中应当靠前,位置也应放在窗口上较醒目的位置。
6):同一界面上的控件数最好不要超过 10 个，多于 10
个时可以考虑使用分页界面显示。
7):分页界面要支持在页面间的快捷切换，常用组合
快捷键 Ctrl+Tab
8):默认按钮要支持 Enter 及选操作，即按 Enter 后
自动执行默认按钮对应操作。
9):可写控件检测到非法输入后应给出说明并能自动
获得焦点。
10):Tab 键的顺序与控件排列顺序要一直，目前流行
总体从上到下，同时行间从左到右的方式。
11):复选框和选项框按选择几率的高底而先后排列。
12):复选框和选项框要有默认选项，并支持 Tab 选择。
13):选项数相同时多用选项框而不用下拉列表框。
14):界面空间较小时使用下拉框而不用选项框。
15):选项数叫少时使用选项框，相反使用下拉列表框。
16):专业性强的软件要使用相关的专业术语，通用性
界面则提倡使用通用性词眼。
2： 规范性：
通常界面设计都按 Windows 界面的规范来设计，即包
含“菜单条、工具栏、工具厢、状态栏、滚动条、右键快 捷
菜单”的标准格式，可以说：界面遵循规范化的程度越 高，
则易用性相应的就越好。小型软件一般不提供工具厢。
规范性细则：
1):常用菜单要有命令快捷方式。
2):完成相同或相近功能的菜单用横线隔开放在同一
位置。
3):菜单前的图标能直观的代表要完成的操作。
4):菜单深度一般要求最多控制在三层以内。
5):工具栏要求可以根据用户的要求自己选择定制。
6):相同或相近功能的工具栏放在一起。
7):工具栏中的每一个按钮要有及时提示信息。
8):一条工具栏的长度最长不能超出屏幕宽度。
9): 工具栏的图标能直观的代表要完成的操作。
10):系统常用的工具栏设置默认放置位置。
11):工具栏太多时可以考虑使用工具厢。
12):工具厢要具有可增减性，由用户自己根据需求定
制。
13):工具厢的默认总宽度不要超过屏幕宽度的 1/5。
14): 状态条要能显示用户切实需要的信息，常用的
有：
目前的操作、系统状态、用户位置、用户信息、提示
信息、错误信息等，如果某一操作需要的时间较长，还应
该显示进度条和进程提示。
15)：滚动条的长度要根据显示信息的长度或宽度能
及时变换，以利于用户了解显示信息的位置和百分比。
16)：状态条的高度以放置五好字为宜，滚动条的宽
度比状态条的略窄。
17)：菜单和工具条要有清楚的界限;菜单要求凸出显
示，这样在移走工具条时仍有立体感。
18)：菜单和状态条中通常使用 5 号字体。工具条一
般比菜单要宽，但不要宽的太多，否则看起来很不协调。
19):右键快捷菜单采用与菜单相同的准则。
3：帮助设施：
系统应该提供详尽而可靠的帮助文档，在用户使用产
生迷惑时可以自己寻求解决方法。
帮助设施细则：
1)：帮助文档中的性能介绍与说明要与系统性能配套
一致。(我们的系统帮助文档都是系统的祖先时期的说明，
让人困惑)。
2)：打包新系统时，对作了修改的地方在帮助文档中
要做相应的修改。
3)：操作时要提供及时调用系统帮助的功能。常用
F1。
4)：在界面上调用帮助时应该能够及时定位到与该操
作相对的帮助位置。也就是说帮助要有即时针对性。
5)：最好提供目前流行的联机帮助格式或 HTML 帮助
格式。
6)：用户可以用关键词在帮助索引中搜索所要的帮助，
当然也应该提供帮助主题词。
7)：如果没有提供书面的帮助文档的话，最好有打印
帮助的功能。
8 )：在帮助中应该提供我们的技术支持方式，一旦
用户难以自己解决可以方便的寻求新的帮助方式。
4：合理性：
屏幕对角线相交的位置是用户直视的地方，正上方四
分之一处为易吸引用户注意力的位置，在放置窗体时要注
意利用这两个位置。
合理性细则：
1)：父窗体或主窗体的中心位置应该在对角线焦点附
近。
2)：子窗体位置应该在主窗体的左上角或正中。
3)：多个子窗体弹出时应该依次向右下方偏移，以显
示窗体出标题为宜。
4)：重要的命令按钮与使用较频繁的按钮要放在界面
上注目的位置。
5)：错误使用容易引起界面退出或关闭的按钮不应该
放在易点位置。横排开头或最后与竖排最后为易点位置。
6)：与正在进行的操作无关的按钮应该加以屏蔽
(Windows 中用灰色显示，没法使用该按钮)。
7)：对可能造成数据无法恢复的操作必须提供确认信
息,给用户放弃选择的机会。
8)：非法的输入或操作应有足够的提示说明。
9): 对运行过程中出现问题而引起错误的地方要有提
示，让用户明白错误出处，避免形成无限期的等待。
10):提示、警告、或错误说明应该清楚、明了、恰当。
5：美观与协调性：
界面应该大小适合美学观点，感觉协调舒适，能在有
效的范围内吸引用户的注意力。
美观与协调性细则：
1): 长宽接近黄金点比例，切忌长宽比例失调、或宽
度超过长度。
2): 布局要合理,不宜过于密集，也不能过于空旷，
合理的利用空间。
3): 按钮大小基本相近，忌用太长的名称，免得占用
过多的界面位置。
4): 按钮的大小要与界面的大小和空间要协调。
5): 避免空旷的界面上放置很大的按钮。
6)：放置完控件后界面不应有很大的空缺位置。
7): 字体的大小要与界面的大小比例协调, 通常使用
2024年4月3日发(作者：奈映秋)
阿里巴巴 ui 设计规范
篇一：ui 设计规范
命名规则
模块_类别_功能_状态.pngnav_button_search_导航_
按钮_搜索_默认.png
search 搜索 bg 背景 selected 按钮状态（选中）
button 按钮 nav 导航栏 disabled 按钮状态（不
可点击）
tab 菜单栏 icon 图标 default 按钮状态（默认）
bg 背景 personal tada 个人资料 presses 按钮状
态（按下）
user 用户 pop 弹出 back 返回
refresh 刷新 delete 删除 eidt 编辑
image 图片 download 下载 content 内容
banner 广告 login 登陆 left right center 左右中
registered 注册 title 标题 msg 提示信息
link 链接 note 注释 logo 标志
icon 制 作 ：
iOS120px：Icon_120@
80px: Icon_small_40@
58px: Icon_small@
114px: Icon@
Android：36*36px：drawable-ldpi
48*48px：drawable-mdpi 72*72px：
drawable-hdpi 96*96px：
drawable-xhdpi
Android 安卓系统 dp/sp/px 换算
名称
rate（640px）
idpi 240*320
mdpi 320*480 1
hdpi 480*800
xhdpi 720*800
xxhdpi1080*1920
Android 的图标尺寸
屏幕尺寸 启动图标 操作栏上下文
320*480px 48*48px 32*32px 16*16px
480*800px
480*854px 72*72px 48*48px 24*24px640*960px
720*1280px 48*48dp 32*32dp 16*16dp
1080*1920 144*144px 96*96px 48*48px
比率 rate（750px） 系统通知 最细笔画
分辨率 比率 rate（320px）比率
24*24px 2px 36*36px 3px 24*24dp 2dp 72*72px 6px
iPhone 图标尺寸
设备 AppStore 程序应用 状态栏 spotlight 搜索标
签栏(工具栏)导航栏
6p 1024*1024px180*180 54px 87*87 146（66）132
（160px）（物理 60px）
6 1024*1024px120*120 54px 58*58 98 （44）98
5 1024*1024px114*114 40px 58*58 98 （44） 98
4 1024*1024px114*114 40px 58*58 98 （44）98
3
（80px）
点击区域
点击区域大于 44pxretain 屏幕大于 88px
字体大小
上的英文字体：HeiveticaNeue 中文：mac 下是 黑
体-简 win 下 华文黑体
Ios 长文本 （可接受）26px（见小值）30px（舒
适值）32px~34px 双数
短文本 （可接受）28px（见小值）30px（舒适值）
515*512px 57*5720px 29*29 49 （44）44
32px
注释
（可接受）24px（见小值）24px（舒适值）
28px
手机上的字体：Droid sans fallback
Android 高分辨率长文本 （可接受）21px（见小值）
24px（舒适值）27px（480*800）
短文本 （可接受）21px（见小值）24px（舒适值）
27px
注释
（可接受）18px（见小值）18px（舒适值）
21px
Android 低分辨率长文本 （可接受）14px（见小值）
16px（舒适值）18~20px（320*480）
短文本 （可接受）14px（见小值）14px（舒适值）
18px
注释
（可接受）12px（见小值）12px（舒适值）
14~16px
篇二：UI 设计规范
界面是软件与用户交互的最直接的层，界面的好坏决
定用户对软件的第一印象。而且设计良好的界面能够引导
用户自己完成相应的操作，起到向导的作用。同时界面如
同人的面孔，具有吸引用户的直接优势。设计合理的界面
能给用户带来轻松愉悦的感受和成功的感觉，相反由于界
面设计的失败，让用户有挫败感，再实用强大的功能都可
能在用户的畏惧与放弃中付诸东流。目前界面的设计引起
软件设计人员的重视的程度还远远不够，直到最近网页制
作的兴起，才受到专家的青睐。而且设计良好的界面由于
需要具有艺术美的天赋而遭拒绝。
目前流行的界面风格有三种方式：多窗体、单窗体以
及资源管理器风格，无论那种风格，以下规则是应该被重
视的。
1：易用性：
按钮名称应该易懂，用词准确，屏弃没楞两可的字眼，
要与同一界面上的按钮易于区分，能望文知意最好。理想
的情况是用户不用查阅帮助就能知道该界面的功能并进行
相关的正确操作。
易用性细则：
1):完成相同或相近功能的按钮用 Frame 框起来，常
用按钮要支持快捷方式。
2):完成同一功能或任务的元素放在集中位置，减少
鼠标移动的距离。
3):按功能将界面划分局域块，用 Frame 框括起来,并
要有功能说明或标题。
4):界面要支持键盘自动浏览按钮功能，即按 Tab 键
的自动切换功能。
5):界面上首先应输入的和重要信息的控件在 Tab 顺
序中应当靠前,位置也应放在窗口上较醒目的位置。
6):同一界面上的控件数最好不要超过 10 个，多于 10
个时可以考虑使用分页界面显示。
7):分页界面要支持在页面间的快捷切换，常用组合
快捷键 Ctrl+Tab
8):默认按钮要支持 Enter 及选操作，即按 Enter 后
自动执行默认按钮对应操作。
9):可写控件检测到非法输入后应给出说明并能自动
获得焦点。
10):Tab 键的顺序与控件排列顺序要一直，目前流行
总体从上到下，同时行间从左到右的方式。
11):复选框和选项框按选择几率的高底而先后排列。
12):复选框和选项框要有默认选项，并支持 Tab 选择。
13):选项数相同时多用选项框而不用下拉列表框。
14):界面空间较小时使用下拉框而不用选项框。
15):选项数叫少时使用选项框，相反使用下拉列表框。
16):专业性强的软件要使用相关的专业术语，通用性
界面则提倡使用通用性词眼。
2： 规范性：
通常界面设计都按 Windows 界面的规范来设计，即包
含“菜单条、工具栏、工具厢、状态栏、滚动条、右键快 捷
菜单”的标准格式，可以说：界面遵循规范化的程度越 高，
则易用性相应的就越好。小型软件一般不提供工具厢。
规范性细则：
1):常用菜单要有命令快捷方式。
2):完成相同或相近功能的菜单用横线隔开放在同一
位置。
3):菜单前的图标能直观的代表要完成的操作。
4):菜单深度一般要求最多控制在三层以内。
5):工具栏要求可以根据用户的要求自己选择定制。
6):相同或相近功能的工具栏放在一起。
7):工具栏中的每一个按钮要有及时提示信息。
8):一条工具栏的长度最长不能超出屏幕宽度。
9): 工具栏的图标能直观的代表要完成的操作。
10):系统常用的工具栏设置默认放置位置。
11):工具栏太多时可以考虑使用工具厢。
12):工具厢要具有可增减性，由用户自己根据需求定
制。
13):工具厢的默认总宽度不要超过屏幕宽度的 1/5。
14): 状态条要能显示用户切实需要的信息，常用的
有：
目前的操作、系统状态、用户位置、用户信息、提示
信息、错误信息等，如果某一操作需要的时间较长，还应
该显示进度条和进程提示。
15)：滚动条的长度要根据显示信息的长度或宽度能
及时变换，以利于用户了解显示信息的位置和百分比。
16)：状态条的高度以放置五好字为宜，滚动条的宽
度比状态条的略窄。
17)：菜单和工具条要有清楚的界限;菜单要求凸出显
示，这样在移走工具条时仍有立体感。
18)：菜单和状态条中通常使用 5 号字体。工具条一
般比菜单要宽，但不要宽的太多，否则看起来很不协调。
19):右键快捷菜单采用与菜单相同的准则。
3：帮助设施：
系统应该提供详尽而可靠的帮助文档，在用户使用产
生迷惑时可以自己寻求解决方法。
帮助设施细则：
1)：帮助文档中的性能介绍与说明要与系统性能配套
一致。(我们的系统帮助文档都是系统的祖先时期的说明，
让人困惑)。
2)：打包新系统时，对作了修改的地方在帮助文档中
要做相应的修改。
3)：操作时要提供及时调用系统帮助的功能。常用
F1。
4)：在界面上调用帮助时应该能够及时定位到与该操
作相对的帮助位置。也就是说帮助要有即时针对性。
5)：最好提供目前流行的联机帮助格式或 HTML 帮助
格式。
6)：用户可以用关键词在帮助索引中搜索所要的帮助，
当然也应该提供帮助主题词。
7)：如果没有提供书面的帮助文档的话，最好有打印
帮助的功能。
8 )：在帮助中应该提供我们的技术支持方式，一旦
用户难以自己解决可以方便的寻求新的帮助方式。
4：合理性：
屏幕对角线相交的位置是用户直视的地方，正上方四
分之一处为易吸引用户注意力的位置，在放置窗体时要注
意利用这两个位置。
合理性细则：
1)：父窗体或主窗体的中心位置应该在对角线焦点附
近。
2)：子窗体位置应该在主窗体的左上角或正中。
3)：多个子窗体弹出时应该依次向右下方偏移，以显
示窗体出标题为宜。
4)：重要的命令按钮与使用较频繁的按钮要放在界面
上注目的位置。
5)：错误使用容易引起界面退出或关闭的按钮不应该
放在易点位置。横排开头或最后与竖排最后为易点位置。
6)：与正在进行的操作无关的按钮应该加以屏蔽
(Windows 中用灰色显示，没法使用该按钮)。
7)：对可能造成数据无法恢复的操作必须提供确认信
息,给用户放弃选择的机会。
8)：非法的输入或操作应有足够的提示说明。
9): 对运行过程中出现问题而引起错误的地方要有提
示，让用户明白错误出处，避免形成无限期的等待。
10):提示、警告、或错误说明应该清楚、明了、恰当。
5：美观与协调性：
界面应该大小适合美学观点，感觉协调舒适，能在有
效的范围内吸引用户的注意力。
美观与协调性细则：
1): 长宽接近黄金点比例，切忌长宽比例失调、或宽
度超过长度。
2): 布局要合理,不宜过于密集，也不能过于空旷，
合理的利用空间。
3): 按钮大小基本相近，忌用太长的名称，免得占用
过多的界面位置。
4): 按钮的大小要与界面的大小和空间要协调。
5): 避免空旷的界面上放置很大的按钮。
6)：放置完控件后界面不应有很大的空缺位置。
7): 字体的大小要与界面的大小比例协调, 通常使用