阿里巴巴 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（320px）比率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）系统通知最细笔画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 515*512px 57*5720px 29*29 49 （44）4
4 （80px）
点击区域
点击区域大于 44pxretain 屏幕大于 88px
字体大小
上的英文字体：HeiveticaNeue 中文：mac 下是黑体-简win 下华文黑体
Ios 长文本（可接受）26px（见小值）30px（舒适值）32px~34px 双数
短文本（可接受）28px（见小值）30px（舒适值）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 界面的规范来设计，即包
含“菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷
菜单”的标准格式，可以说：界面遵循规范化的程度越高，
则易用性相应的就越好。小型软件一般不提供工具厢。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。