UI界面设计-APP界面控件中英文名称汇总

一、界面模式Mobile Design Pattern

1. 启动界面

（智能手机启动时所显示的界面）

• 启动界面/开机界面Splash

b73258072046a84a0e282b937cf8.jpg

• **过场界面Walk though ** 8ede5806dfe3a84a0d304f4c3550.jpg

282558072095a84a0e282b4240eb.jpg

• 教程界面/用户指引Coach Mark/User Guide

3dae58072152a84a0e282b0eef22.jpg

• 空数据提示消息

9beb58072181a84a0d304f87a496.jpg

2. 顶层界面

（用于显示各种各样的信息，并通过导航功能将其他界面关联起来）

• 门户界面

d93d5807236da84a0e282bad0bbe.jpg

• 用户信息界面User Profiles

3ec55807241fa84a0d304f4ace59.jpg

• 电商界面

faff580724b4a84a0e282b6b6ec8.jpg

• 企业界面

a98658072583a84a0d304f54d6d7.jpg

3. 一览界面

（通常包含列表类的UI组件，用于连续显示所有相关内容）

• 搜索结果Search

31ac5807265ca84a0d304fffbb58.jpg

• 时间轴

dee458072717a84a0e282b222e11.jpg

• 图库Image Browse

65b4580727d6a84a0e282b39aee1.jpg

• 通知/活动

2d7258072992a84a0e282b6c05c9.jpg

4. 详细信息界面Detail View

• 阅览器（照片/视频）

b55258072a98a84a0d304fafc3e2.jpg

• 新闻报道Article

5f4458072b2aa84a0d304f8d22fa.jpg

• 地图Map

428058072b9aa84a0e282baf17ea.jpg

• 产品

ec2958072d27a84a0d304fe01859.jpg

5. 插入/操作界面

（执行特定的操作）

• 注册/登陆login & Register

59fe58072e2aa84a0e282be430de.jpg

• 消息发布Comment/Checkin

0d8258072eaca84a0e282b6f58e3.jpg

• 照片拍摄

6d3e58072f50a84a0e282b078202.jpg

• 设定/管理Settings

a1b758072f9ea84a0e282bf5c4df.jpg

二、基本UI组件

1. 导航控件Navigation Bar与控制控件Control

• 标签式导航控件/选项卡菜单式Tab Menu/Navigation

  a 标准模式/固定选项卡Fixed Tabs

  269458073e97a84a0d304fc8a2ce.jpg

  b 底部布局模式

  （如果应用的主要类别超过5个，可以把“更多”放在最右侧的第五个选项卡上）
  

  aab858073f74a84a0e282b1d3512.jpg

  c 下划线模式/顶边栏

   ![6d9e58073335a84a0e282ba29451.jpg](http:https://img.haomeiwen.com/i4316111/8874444e801d4a51.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  

  d 滚动模式/滚动选项卡式

  （滚动选项卡一般比标准的标签栏要窄，因为它们没有必要作为触摸对象）

  62e3580740a1a84a0d304fbd3bd0.jpg

  e 垂直模式/导航抽屉/侧边式抽屉Navigation Drawers

  （只在首次启动时弹出抽屉，可以拥有多个层级）

  cacf58082647a84a0d304f96d3f0.jpg 97bf58106fada84a0e282b2676f8.jpg
  • 分段控件Segmented Control/Scope Bar

  a 标准模式

  c25a58074335a84a0d304f82bad8.jpg

  b 内联文本模式

  f7da580744efa84a0e282b746367.jpg
  • 滑动导航控件

  a 标准模式

  4e4158081d8ea84a0e282b37942a.jpg

  b 页面指示器组模式

  49e758081dbda84a0e282b2b7037.jpg

  c 标签式导航控件组模式

  d58b58081e23a84a0e282b3854e0.jpg
  • 下拉式菜单Spinners

  a 标准模式/悬浮式操作控件Action Overflow

  f0be58081f8ba84a0d304f8f6180.jpg

  b 控制模式

  c 气泡模式/弹出窗口Popover

  40b4580821d2a84a0d304fe5bd85.jpg

  - **深入式菜单**

  a 标准模式   

    ![a07f58082438a84a0d304f6b86fb.jpg](http:https://img.haomeiwen.com/i4316111/956905667be0d975.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• **折叠式菜单/手风琴式Accordion **

  （这种模式比跳转到另一页面再跳回去更高效）

image image

  b **气泡模式**

  ![d3ee58082b31a84a0d304f291f7b.jpg](http:https://img.haomeiwen.com/i4316111/5f8c28f2bafd3db0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  - **仪表盘式导航控件**

91e458106bd2a84a0d304f588b46.jpg

  - **跳板式菜单/启动面板Dashboard/Springboard/Launchpad ** 

   （一个带有菜单选项的登陆界面，而菜单选项就是进入各个应用的起点。

      优点是跨平台，可放置很多选项。缺点是全部选项扁平化，没有任何优先级）

     ![772c58082e59a84a0d304f141910.jpg](http:https://img.haomeiwen.com/i4316111/039f34d65fc8da9f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  - **返回按钮Back button/Up button/Home**

  a 返回按钮模式

  ![e07858082f2da84a0e282b89493d.jpg](http:https://img.haomeiwen.com/i4316111/0af4b13bf4ad6359.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  b 徽标模式

  ![6655580830d6a84a0d304f121d93.jpg](http:https://img.haomeiwen.com/i4316111/3bd93717a8706bae.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  c Home图标模式

  - **向上向下滚动按钮**

  a 标准模式

  ![f60c580832fea84a0e282bed6a84.jpg](http:https://img.haomeiwen.com/i4316111/e8b9dfe0c19bc1df.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


b 向下滚动模式

  c 叠加模式

  d 索引模式

  ![image](http:https://img.haomeiwen.com/i4316111/ba92c6b1f0fa009d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

image

• 分页按钮

c7cb58083af8a84a0d304f7489f1.jpg

• 无限分页列表

  a 标准模式

  d7c358086911a84a0d304fb14d16.jpg

  b 按钮模式

  0aa6580873a0a84a0e282bfebd67.jpg

• 刷新控件Refresh Control

a45658086a7ea84a0d304f88677d.jpg

• 侧滑式菜单

2ea158086b13a84a0d304fa3d1fc.jpg

2. 列表

  - **垂直列表/列表菜单List Menu/Table/hierarchal navigation**

（每一个列表项都是进入该应用各项功能的入口，并且模块之间的切换需要返回到列表主页）

  a 标准模式

  ![bf0858086c6fa84a0d304f7d6e82.jpg](http:https://img.haomeiwen.com/i4316111/6958049c42e0f7f7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  b 值模式

  ![2aac58086ca2a84a0d304fbff4ab.jpg](http:https://img.haomeiwen.com/i4316111/b264b557a440a154.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  c 缩略图模式

  ![6a2058086d05a84a0d304fae2580.jpg](http:https://img.haomeiwen.com/i4316111/578b55811dfa2536.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  d 半尺寸模式

  ![486558086d86a84a0e282bcc71c8.jpg](http:https://img.haomeiwen.com/i4316111/7333b8c1d198cbda.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 网格列表/陈列馆式Gallery

（最适合呈现经常更新的视觉效果直观的无层级内容，可采用网格布局或轮盘布局）

  a 标准模式

  ![ba7b58086e20a84a0e282bff363a.jpg](http:https://img.haomeiwen.com/i4316111/f23f0c1d7a2ede2f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  b 标签叠加模式

  c 块状标签模式

  ![481a58087038a84a0e282b493255.jpg](http:https://img.haomeiwen.com/i4316111/42e242db8618c326.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  - **轮播面板Cover Flow/Carousel**

  a 标准模式

  ![d34f5808744ba84a0e282b35e60a.jpg](http:https://img.haomeiwen.com/i4316111/31ee9809f58ad71d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  b 控制模式

  ![6880580874e0a84a0d304ffb7408.jpg](http:https://img.haomeiwen.com/i4316111/5f5499e7985f69cb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  c 商标展板模式

  ![86fd58087524a84a0e282b8cb0c2.jpg](http:https://img.haomeiwen.com/i4316111/fdfe84468bf9cbc5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  d 导航模式

  ![4e2e580875cfa84a0e282b5bc22f.jpg](http:https://img.haomeiwen.com/i4316111/5b9f3c85dc65f7dc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 时间轴

  a 标准模式

  dd695808765ea84a0d304fb197c8.jpg

  b 消息模式

  4625580876c9a84a0e282b48bc71.jpg
  • 日历/日期列表Calendar

  a 月份模式

  713f58087a50a84a0e282b8d39c7.jpg

  b 周模式

  c 日模式

  4aec58087bc3a84a0d304f1d6a29.jpg

3. 表单

  - **文本框/撰写Compose**

  a 单行模式

  ![d26758087d01a84a0d304f7fd33e.jpg](http:https://img.haomeiwen.com/i4316111/3a73c0f746c2b49b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  b 搜索框模式

  ![dbde58087d35a84a0d304fca992f.jpg](http:https://img.haomeiwen.com/i4316111/d55231feb4e3dee2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  c 多行模式

  ![c6a758087d5ea84a0e282b3f8da4.jpg](http:https://img.haomeiwen.com/i4316111/52aca8f5788f65bc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 开关

  a 复选框模式（复数选择）Checkboxes

  f26658088738a84a0e282bc8aeb7.jpg

  b 单选框模式（单项选择）Radio Buttons

  image

image

  c 开关按钮模式On/Off Switches

  ![d18f58088769a84a0e282bf972c2.jpg](http:https://img.haomeiwen.com/i4316111/a4b6fcdd9003ecaa.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  - **选择器Picker**

  a 标准模式

  ![7c1f580b08b1a84a0e282bbcaab1.jpg](http:https://img.haomeiwen.com/i4316111/6083de7bc06698a2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  b 复数模式

  ![afef580b08bda84a0d304f48c781.jpg](http:https://img.haomeiwen.com/i4316111/0af4b68bccd17acc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 滑块

e84f580b0d60a84a0d304f952781.jpg

• 拖放控件

4.通知与消息Notifications

• 模态消息

2b1d580b0de9a84a0e282be08836.jpg

• 无模态消息

a 标准模式

b7cd580b0dfda84a0e282b639de6.jpg

  b 状态栏消息

  ![e4fc580b0e1ca84a0e282b3a5905.jpg](http:https://img.haomeiwen.com/i4316111/9a5d1c486cd81660.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 块消息

5a03580b0e2ca84a0d304f852d22.jpg

• 角标

a 标准模式

9bff580b0e3aa84a0e282b30e8b6.jpg

b 通知模式

  ![f926580b0e54a84a0d304f743f0e.jpg](http:https://img.haomeiwen.com/i4316111/5d81c89230681e1d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 气泡消息

ddb4580b0e64a84a0e282b9bc70a.jpg

5. 信息的可视化

• 无限循环指示器

  a 标准模式

7f9a580b0e87a84a0d304faf0793.jpg

  b 原创模式

  ![e65a580d780da84a0d304f7bd849.jpg](http:https://img.haomeiwen.com/i4316111/e2ea5975ab91e0bf.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  c 条状模式

• 进度条Progress

5b6b580d79a7a84a0d304fcbfb88.jpg

• 页面指示器Page Indicator

  a 标准模式

  c94f580d7daca84a0e282b3e8561.jpg

  b 页面模式

  c 步骤模式

• 图表

a 柱状图模式

b 折线图模式

c 饼图模式

• 评分控件

a 标准模式

b 表情模式

c 好评差评模式

d 等级模式

6. 图标

• 房屋

• 放大镜

9a36580dc060a84a0d304fa1b6e4.jpg

• 齿轮

1309580dc077a84a0d304f06cdcb.jpg

• 星形

a** 收藏夹**模式

  ![02bc580dc08ca84a0d304f5056dd.jpg](http:https://img.haomeiwen.com/i4316111/61769ee78329e170.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

b 评分模式

  ![781d580dc09ea84a0e282bb36cb5.jpg](http:https://img.haomeiwen.com/i4316111/e2301c00c9ae044c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 模拟时钟

• 大头针

e08e580dc0ada84a0d304f1785e9.jpg

• 人像

a 单人模式

b 双人模式

  ![9526580dc0dda84a0e282bfb583f.jpg](http:https://img.haomeiwen.com/i4316111/8b447781e0a88630.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

c 三人模式

• 铅笔

a 创建新条目模式

  ![049b580dc410a84a0e282bd95327.jpg](http:https://img.haomeiwen.com/i4316111/985b05133128e9ef.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

a0ab580dc4e7a84a0e282bb006bd.jpg

b 编辑模式

  ![28fe580dc116a84a0e282bd67bea.jpg](http:https://img.haomeiwen.com/i4316111/af06cafe1e6cb58b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 回收站/垃圾箱

a 移至回收站模式

b 立即删除模式

  ![3e63580dc13aa84a0e282badf22b.jpg](http:https://img.haomeiwen.com/i4316111/b5c6fbebdd70bbe7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 加号

e2bd580dc180a84a0e282b22493c.jpg

• 叉号

  a 清除模式

  ca42580dc1e0a84a0d304ff074bf.jpg

6165580dc25fa84a0e282b3a0238.jpg

  b 终止模式

  c 关闭模式

  ![2095580dc477a84a0d304f8d0a48.jpg](http:https://img.haomeiwen.com/i4316111/71b533cdc37a60fa.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 照相机

8e41580dc652a84a0e282ba573b6.jpg

• 三连圆点

  a 水平排列模式

  b 垂直排列模式

  3f8b580dc6d4a84a0e282bec887d.jpg

• 相连圆点

• 分享Share

• 三连短线/导航图标/汉堡包图标

a 菜单开启模式

66fc580dc92da84a0e282b2f1728.jpg

b 一览显示模式

  ![eb3d580dcb82a84a0e282b8fa01f.jpg](http:https://img.haomeiwen.com/i4316111/3eb01db952773ffd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

c 列表排序模式

  ![51175811b0f2a84a0d304fd8385c.jpg](http:https://img.haomeiwen.com/i4316111/ba5365a4ed7ed42d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "undefined")

• 刷新

7. 动画

   • 向左向右滑动

   • 叠加展开收起

   • 淡入淡出

   • 翻转

   • 放大缩小

   • 摇动扭动

三、手势

1. 轻触Tap

2. 拨动Flick

3. 滑动Swipe

4. 按压Press

5. 拖动Drag

6. 多点缩放Pinch in/out