阿里巴巴ui设计规范

阿里巴巴 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):分页界面要支持在页面间的快捷切换，常用组合