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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM