zoukankan      html  css  js  c++  java
  • APP界面控件中英文名称汇总

    原文APP界面控件中英文名称汇总 作者:venus0917

    一、界面模式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

          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

       - 折叠式菜单/手风琴式Accordion   

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

          

          b 气泡模式

          d3ee58082b31a84a0d304f291f7b.jpg   

          - 仪表盘式导航控件

             91e458106bd2a84a0d304f588b46.jpg

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

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

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

             772c58082e59a84a0d304f141910.jpg

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

          a 返回按钮模式

          e07858082f2da84a0e282b89493d.jpg

          b 徽标模式

          6655580830d6a84a0d304f121d93.jpg

          c Home图标模式

          - 向上向下滚动按钮

          a 标准模式

          f60c580832fea84a0e282bed6a84.jpg

          b 向下滚动模式

          c 叠加模式

          d 索引模式

           

       - 分页按钮

       c7cb58083af8a84a0d304f7489f1.jpg

       - 无限分页列表

          a 标准模式

          d7c358086911a84a0d304fb14d16.jpg

          b 按钮模式

          0aa6580873a0a84a0e282bfebd67.jpg

       - 刷新控件Refresh Control

       a45658086a7ea84a0d304f88677d.jpg

       - 侧滑式菜单

       2ea158086b13a84a0d304fa3d1fc.jpg

    2. 列表

     

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

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

          a 标准模式

          bf0858086c6fa84a0d304f7d6e82.jpg

          b 值模式

          2aac58086ca2a84a0d304fbff4ab.jpg

          c 缩略图模式

          6a2058086d05a84a0d304fae2580.jpg

          d 半尺寸模式

          486558086d86a84a0e282bcc71c8.jpg

       - 网格列表/陈列馆式Gallery

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

          a 标准模式

          ba7b58086e20a84a0e282bff363a.jpg

          b 标签叠加模式

          c 块状标签模式

          481a58087038a84a0e282b493255.jpg

          - 轮播面板Cover Flow/Carousel

          a 标准模式

          d34f5808744ba84a0e282b35e60a.jpg

          b 控制模式

          6880580874e0a84a0d304ffb7408.jpg

          c 商标展板模式

          86fd58087524a84a0e282b8cb0c2.jpg

          d 导航模式

          4e2e580875cfa84a0e282b5bc22f.jpg

          - 时间轴

          a 标准模式

          dd695808765ea84a0d304fb197c8.jpg

          b 消息模式

          4625580876c9a84a0e282b48bc71.jpg

          - 日历/日期列表Calendar

          a 月份模式

          713f58087a50a84a0e282b8d39c7.jpg

          b 周模式

          

          c 日模式

          4aec58087bc3a84a0d304f1d6a29.jpg      

    3. 表单

     

          - 文本框/撰写Compose

          a 单行模式

          d26758087d01a84a0d304f7fd33e.jpg

          b 搜索框模式

          dbde58087d35a84a0d304fca992f.jpg

          c 多行模式

          c6a758087d5ea84a0e282b3f8da4.jpg 

       - 开关

          a 复选框模式(复数选择)Checkboxes

          f26658088738a84a0e282bc8aeb7.jpg

          

          b 单选框模式(单项选择)Radio Buttons      

             

          c 开关按钮模式On/Off Switches

          d18f58088769a84a0e282bf972c2.jpg

          - 选择器Picker

          a 标准模式

          7c1f580b08b1a84a0e282bbcaab1.jpg

          b 复数模式

          afef580b08bda84a0d304f48c781.jpg

       - 滑块

       e84f580b0d60a84a0d304f952781.jpg

       - 拖放控件

    4.通知与消息Notifications

     

       - 模态消息

       2b1d580b0de9a84a0e282be08836.jpg

       - 无模态消息

       a 标准模式

       b7cd580b0dfda84a0e282b639de6.jpg

          b 状态栏消息

          e4fc580b0e1ca84a0e282b3a5905.jpg

       - 块消息

       5a03580b0e2ca84a0d304f852d22.jpg

       - 角标

       a 标准模式

       9bff580b0e3aa84a0e282b30e8b6.jpg

       b 通知模式

          f926580b0e54a84a0d304f743f0e.jpg

       - 气泡消息

       ddb4580b0e64a84a0e282b9bc70a.jpg

     

    5. 信息的可视化

     

       - 无限循环指示器

          a 标准模式

       7f9a580b0e87a84a0d304faf0793.jpg

          b 原创模式

          e65a580d780da84a0d304f7bd849.jpg

          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

       b 评分模式

          781d580dc09ea84a0e282bb36cb5.jpg

       - 模拟时钟

       - 大头针

       e08e580dc0ada84a0d304f1785e9.jpg

       - 人像

       a 单人模式

       b 双人模式

          9526580dc0dda84a0e282bfb583f.jpg

       c 三人模式

       - 铅笔

       a 创建新条目模式

          049b580dc410a84a0e282bd95327.jpg  a0ab580dc4e7a84a0e282bb006bd.jpg

       b 编辑模式

          28fe580dc116a84a0e282bd67bea.jpg

       - 回收站/垃圾箱

       a 移至回收站模式

       b 立即删除模式

          3e63580dc13aa84a0e282badf22b.jpg

       - 加号

       e2bd580dc180a84a0e282b22493c.jpg

       - 叉号

          a 清除模式

          ca42580dc1e0a84a0d304ff074bf.jpg  6165580dc25fa84a0e282b3a0238.jpg

          b 终止模式

          

          c 关闭模式

          2095580dc477a84a0d304f8d0a48.jpg

          

       - 照相机

       8e41580dc652a84a0e282ba573b6.jpg

       - 三连圆点

          a 水平排列模式

          b 垂直排列模式

          3f8b580dc6d4a84a0e282bec887d.jpg

       - 相连圆点

       

       - 分享Share

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

      a 菜单开启模式

       66fc580dc92da84a0e282b2f1728.jpg

      b 一览显示模式

          eb3d580dcb82a84a0e282b8fa01f.jpg

      c 列表排序模式

          51175811b0f2a84a0d304fd8385c.jpg

       - 刷新

       

    7. 动画

     

       - 向左向右滑动

       - 叠加展开收起

       - 淡入淡出

       - 翻转

       - 放大缩小

       - 摇动扭动

    三、手势

    1. 轻触Tap

    2. 拨动Flick

    3. 滑动Swipe

    4. 按压Press

    5. 拖动Drag

    6. 多点缩放Pinch in/out

  • 相关阅读:
    报错:Table 'sell.hibernate_sequence' doesn't exist
    “可恶”的mariadb
    日志的使用
    微信小程序开发步骤简述
    我对同步异步阻塞和非阻塞的简单理解
    dubbo+zookeeper搭建时报错java.lang.NoClassDefFoundError: org/apache/curator/RetryPolicy
    在CentOS7中安装zookeeper
    markdown 显示图片的三种方式
    Spring Data JPA 提供的各种Repository接口作用
    windows nginx 搭建文件服务器(通俗易懂)
  • 原文地址:https://www.cnblogs.com/liyonghua/p/7737833.html
Copyright © 2011-2022 走看看