Editing Web design glossary (section)

== UI Components ==
使用者介面元件與互動特效、表單 (html form) 相關詞彙
* accordion [繁體] 折疊、摺疊選單 [簡體] 折叠、折叠面板。為了在小的裝置螢幕上，顯示主要的資訊區塊時，會將其他區域折疊。 example: [http://jqueryui.com/accordion/ Accordion | jQuery UI], [http://adobe.github.io/Spry/samples/accordion/AccordionSample2.html Creating an Accordion with Spry Data]
* [https://en.wikipedia.org/wiki/Breadcrumb_(navigation) breadcrumbs], breadcrumb trail [繁體] 麵包屑(導覽) [簡體] 面包屑导航。說明: [http://webusabilitysos.blogspot.tw/2007/04/breadcrumbs.html 資訊結構與網站設計: 導覽路徑標示（Breadcrumbs）] {{access | date = 2017-03-21}}

* alert box [繁體] 警告視窗、警告對話視窗、警告彈跳視窗、警告彈出視窗 [簡體] 示警框。相關資料：[https://developer.mozilla.org/en-US/docs/Web/API/Window/alert Window.alert() - Web APIs | MDN]、[https://sweetalert2.github.io/ SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes]

* carousel 又稱 cover flow<ref>[http://en.wikipedia.org/wiki/Cover_Flow Cover Flow - Wikipedia, the free encyclopedia]</ref>, touch slider, touch carousel [繁體] 3D封面、幻燈片效果、輪播、首頁輪播、輪播圖卡<ref>[https://www.facebook.com/business/help/1114358518575630 Facebook 輪播廣告的設計規格 | Facebook 廣告使用說明]</ref> [簡體] 幻灯效果、轮播效果。 Example: [https://www.tripwiremagazine.com/jquery-carousel/ 15+ Best jQuery Carousel Plugins To Impress Your Visitors in 2017 – Tripwire Magazine]

* chained menu 動態選單(動態下拉選單、動態二階選單、動態多階選單) 或稱 chained select menu, double combo menu, select cascade, dynamic dropdowns, dropdown dependent。例如使用動態下拉選單，提供使用者選取地址的縣市、行政區域兩個欄位。當使用者選好縣市下拉選單後，行政區域的下拉選單則依據使用者所在縣市連動，只顯示該縣市的行政區域。好處是減少下拉選單的項目數量，以及避免使用者選擇到矛盾的行政區域資料。
* checkbox [繁體] 複選框、核取方塊 [簡體] 复选框

* date picker, calendar picker 日期選擇器 ex: [http://jqueryui.com/datepicker/ jQuery Datepicker], [https://vuejsexamples.com/tag/calendar/ Calendar - Vue.js Examples] & [https://bootstrap-datepicker.readthedocs.io/en/latest/ bootstrap-datepicker]
* drag & drop [繁] 拖曳、拖移、拖拉 [簡] 拖拽, 拖放
* dropdown, drop down menus [繁體] 下拉選單 [簡體] 下拉菜單

* [https://en.wikipedia.org/wiki/Hero_image Hero image] [繁] 主頁橫幅 [簡體] 主页横幅

* image map [繁] 影像地圖。網頁內的影像，「該影像具有超鏈接的『熱點』可鏈接到其他資訊」(參考資料：[https://terms.naer.edu.tw/detail/1280001/ 國家教育研究院)

* Infinite scrolling [繁體] 無限滾動  [簡體] 无限滚动。當使用者往下捲動瀏覽器，網頁會自動載入內容<ref>[https://www.nngroup.com/articles/infinite-scrolling/ Infinite Scrolling is Not for Every Website]</ref>。相關資料：[https://diaogray.medium.com/%E4%BD%A0%E7%9A%84%E7%94%A2%E5%93%81%E6%AD%A3%E5%9C%A8%E7%84%A1%E9%99%90%E6%BB%BE%E5%8B%95-infinite-scrolling-%E5%97%8E-696cd2279a5d 你的產品正在無限滾動 Infinite scrolling 嗎？. 我先介紹一下我自己，我是Ayden，目前在軟體產業擔任Product… | by Ayden Tiao | Jun, 2021 | Medium]
* input box, text field [繁體] 文字輸入欄位、輸入框 [簡體] 文本输入框

* Landing page animation 進入網頁時的開頭動畫。相關網頁：Top 20 Animated Landing Page Examples You Need To See https://www.svgator.com/blog/animated-landing-pages-examples/ 。相關詞彙：page enter transition animation 不同頁面切換、Animated Entrances 或 Entrance Animation：會夾雜像 loading 的 GIF 圖檔。


* lightbox [繁體] 光箱 (特效) [簡體] 暗箱 (特效)。透過降低周遭元素對比或變暗，凸顯想要呈現的資訊。sample: [http://lokeshdhakar.com/projects/lightbox2/ Lightbox] (MIT license), [https://dimsemenov.com/plugins/magnific-popup/ Magnific Popup: Responsive jQuery Lightbox Plugin] (MIT license)
* mandatory / required (欄位)必填 
* menu [繁體] 選單 [簡體] 菜单
* modal dialog [繁體] 對話視窗 [簡體] 对话框、弹出窗口。點選按鈕，跳出小視窗要求使用者填寫表單內容。 sample: [http://jqueryui.com/dialog/#modal-form Dialog | jQuery UI], [http://bootsnipp.com/snipps/login-form-in-a-modal Viewing snipp | Login form in a modal | Bootsnipp.com] 
* navbar (navigation bar) [繁體] 導覽列 [簡體] 导航条

* pagination [繁體] 分頁、頁碼 [簡體] 分页、页码

* Parallax scrolling [繁體] (垂直) 視差捲動 [簡體] [https://baike.baidu.com/item/%E8%A7%86%E5%B7%AE%E6%BB%9A%E5%8A%A8 视差滚动]、视差迁移转变。 Example: [https://www.awwwards.com/30-great-websites-with-parallax-scrolling.html 30 Great Websites with Parallax Scrolling]

* Pinterest-like layout, Pinterest-style layout, [https://www.sitepoint.com/understanding-masonry-layout/ Masonry layout], [https://getuikit.com/v2/docs/grid-js.html Dynamic grid layout] [繁體] 瀑布流、瀑布流排版 [簡體] 瀑布流、瀑布流式布局<ref>[http://blog.lindsayrain.com/2013/02/pinterest-like-web-design.html Lindsay is observing.....: 所謂的 Pinterest 佈局式網站]</ref>

* placefolder [繁體] 佔位符 [簡體] 占位符。意思可能有二: 
*# placefolder text 輸入欄位 (文字方框) 的提示文字 <ref>[http://www.w3school.com.cn/html5/att_input_placeholder.asp HTML 5 <input> placeholder 属性]</ref> [簡體] 输入框背景文字提示<ref>[http://www.webhek.com/input-placeholder/ 使用HTML5的Placeholder属性实现input输入框背景文字提示效果 – WEB骇客]</ref>: 提供使用者輸入值的範例。使用者點擊輸入欄位時，提示文字會自動消失。
*# 版面區塊 ex: 選定某個版面區塊，可供編輯<ref>[https://django-cms.readthedocs.org/en/3.0/extending_cms/placeholders.html 6. Placeholders outside the CMS — django cms 3.0 documentation]。</ref> placefolder 雲端服務用以填充區塊，方便網站正式上線前，測試與確認網頁版面或圖片樣式大小。例如: [https://placekitten.com/ {placekitten}], more on [[Random content generator]]
*# 內容載入區塊 (Content Loading Placeholder)：「使用頁面或元件的『載入佔位符』，表示某些內容還在載入中。」(資料來源：Bootstrap<ref>[https://getbootstrap.com/docs/5.1/components/placeholders/ Placeholders · Bootstrap v5.1]</ref>)

* progress bars [繁體] 進度條 [簡體] 进度条 example: [https://jqueryui.com/progressbar/ Progressbar | jQuery UI]

* radio button [繁體] 單選按鈕, 選項紐 [簡體] 单选按钮

* scrollbar [繁體] 捲軸、控制捲軸 [簡體] 滚动条。sample: [http://jscrollpane.kelvinluck.com/ jScrollPane - cross browser styleable scrollbars with jQuery and CSS]

* side drawer, side menu drawer, navigation drawer, side navigation menu [繁體] 側邊滑動選單 [簡體] 抽屉式导航、侧滑的抽屉效果的菜单 example: [https://material.io/guidelines/patterns/navigation-drawer.html Navigation drawer - Patterns - Material Design], [https://www.w3schools.com/howto/howto_js_sidenav.asp How To Create a Side Navigation Menu], [https://github.com/jfeinstein10/SlidingMenu jfeinstein10/SlidingMenu: An Android library that allows you to easily create applications with slide-in menus. You may use it in your Android apps provided that you cite this project and include the license in your app. Thanks!]

* slider, range slider, range inputs [繁體] 滑桿、拉桿、滑動桿 [簡體] 滑块、滑动条。例如電腦調整音量的滑桿。 sample: [http://www.uiparade.com/skill-type/sliders/ Sliders | User Interface Design Inspiration]、[https://jqueryui.com/slider/#default Slider | jQuery UI], [https://developers.google.com/chart/interactive/docs/gallery/controls Controls and Dashboards  |  Charts  |  Google Developers], [http://danielstern.ca/range.css/#/ range.css - generate styles for your HTML5 range inputs]

* snackbars [繁體] 簡短通知、[簡體] 简短信息、消息条。在螢幕底部顯示簡短的通知。Example: [https://m2.material.io/components/snackbars Snackbars - Material Design]

* spinner 
** [繁體] 下拉框、下拉選單、連動式下拉選單 [簡體] 旋转器。原本下拉選單 (select box) 外，可利用上下鍵調整項目數值。 example: [https://jqueryui.com/spinner/ Spinner | jQuery UI]
** [繁體] 載入動畫圖示、等待動畫圖示<ref>[http://blog.infographics.tw/2015/05/build-gif-loader-with-loading-io/ 只要十秒鐘，使用 Loading.io 製作 Loading 圖示]</ref>、 [簡體] 旋转加载的动画图标、旋转特效。example: [http://ionicframework.com/docs/api/directive/ionSpinner/ ion-spinner - Directive in module ionic - Ionic Framework]

* sticky bar [繁體] 固定橫欄 [簡體] 固定导航条。固定出現在瀏覽器上方或下方位置的導航區塊。<ref>[https://unbounce.com/product/features/sticky-bars/ Sticky bars: More Conversions, Less Intrusion | Unbounce]</ref>

* thumbnails [繁體] 縮圖 [簡體] 缩略图

* tab [繁體] 標籤 [簡體] 标签页、选项卡 sample: [https://jqueryui.com/tabs/ Tabs | jQuery UI]

* tooltip [繁體] 提示文字、彈出式提示框 [簡體] 提示文本、提示冒泡。滑鼠游標移到元素或連結上方時，顯示的簡短說明文字。

* tour tip, web tour, web guide: [繁體] 步驟式導引 (app 或網站功能) [簡體] 分步引导。 guided tours through your app or website 
** example: [http://iamdanfox.github.io/anno.js/ Anno.js Demo 2], [http://easelinc.github.io/tourist/ Tourist.js], [http://foundation.zurb.com/docs/components/joyride.html Joyride | Foundation Docs], [http://introjs.com/ Intro.js - Step-by-step guide and feature introduction for your website]
** 相關概念：onboarding

* video slider 影片選單;