Web design glossary

網頁設計、介面與互動元件等相關專有名詞

UI Components

使用者介面元件與互動特效、表單 (html form) 相關詞彙

• accordion [繁體] 折疊、摺疊選單 [簡體] 折叠、折叠面板。為了在小的裝置螢幕上，顯示主要的資訊區塊時，會將其他區域折疊。 example: Accordion | jQuery UI, Creating an Accordion with Spry Data
• breadcrumbs, breadcrumb trail [繁體] 麵包屑(導覽) [簡體] 面包屑导航。說明: 資訊結構與網站設計: 導覽路徑標示（Breadcrumbs） [Last visited: 2017-03-21]

• alert box [繁體] 警告視窗、警告對話視窗、警告彈跳視窗、警告彈出視窗 [簡體] 示警框。相關資料：Window.alert() - Web APIs | MDN、SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes

• carousel 又稱 cover flow, touch slider, touch carousel [繁體] 3D封面、幻燈片效果、輪播、首頁輪播、輪播圖卡 [簡體] 幻灯效果、轮播效果。 Example: 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: jQuery Datepicker, Calendar - Vue.js Examples & bootstrap-datepicker
• drag & drop [繁] 拖曳、拖移、拖拉 [簡] 拖拽, 拖放
• dropdown, drop down menus [繁體] 下拉選單 [簡體] 下拉菜單

• Hero image [繁] 主頁橫幅 [簡體] 主页横幅

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

• Infinite scrolling [繁體] 無限滾動 [簡體] 无限滚动。當使用者往下捲動瀏覽器，網頁會自動載入內容。相關資料：你的產品正在無限滾動 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: Lightbox (MIT license), Magnific Popup: Responsive jQuery Lightbox Plugin (MIT license)
• mandatory / required (欄位)必填
• menu [繁體] 選單 [簡體] 菜单
• modal dialog [繁體] 對話視窗 [簡體] 对话框、弹出窗口。點選按鈕，跳出小視窗要求使用者填寫表單內容。 sample: Dialog | jQuery UI, Viewing snipp | Login form in a modal | Bootsnipp.com
• navbar (navigation bar) [繁體] 導覽列 [簡體] 导航条

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

• Parallax scrolling [繁體] (垂直) 視差捲動 [簡體] 视差滚动、视差迁移转变。 Example: 30 Great Websites with Parallax Scrolling

• Pinterest-like layout, Pinterest-style layout, Masonry layout, Dynamic grid layout [繁體] 瀑布流、瀑布流排版 [簡體] 瀑布流、瀑布流式布局

• placefolder [繁體] 佔位符 [簡體] 占位符。意思可能有二:
  1. placefolder text 輸入欄位 (文字方框) 的提示文字 [簡體] 输入框背景文字提示: 提供使用者輸入值的範例。使用者點擊輸入欄位時，提示文字會自動消失。
  2. 版面區塊 ex: 選定某個版面區塊，可供編輯 placefolder 雲端服務用以填充區塊，方便網站正式上線前，測試與確認網頁版面或圖片樣式大小。例如: {placekitten}, more on Random content generator
  3. 內容載入區塊 (Content Loading Placeholder)：「使用頁面或元件的『載入佔位符』，表示某些內容還在載入中。」(資料來源：Bootstrap)

• progress bars [繁體] 進度條 [簡體] 进度条 example: Progressbar | jQuery UI

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

• scrollbar [繁體] 捲軸、控制捲軸 [簡體] 滚动条。sample: jScrollPane - cross browser styleable scrollbars with jQuery and CSS

• side drawer, side menu drawer, navigation drawer, side navigation menu [繁體] 側邊滑動選單 [簡體] 抽屉式导航、侧滑的抽屉效果的菜单 example: Navigation drawer - Patterns - Material Design, How To Create a Side Navigation Menu, 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: Sliders | User Interface Design Inspiration、Slider | jQuery UI, Controls and Dashboards  |  Charts  |  Google Developers, range.css - generate styles for your HTML5 range inputs

• snackbars [繁體] 簡短通知、[簡體] 简短信息、消息条。在螢幕底部顯示簡短的通知。Example: Snackbars - Material Design

• spinner
  • [繁體] 下拉框、下拉選單、連動式下拉選單 [簡體] 旋转器。原本下拉選單 (select box) 外，可利用上下鍵調整項目數值。 example: Spinner | jQuery UI
  • [繁體] 載入動畫圖示、等待動畫圖示、 [簡體] 旋转加载的动画图标、旋转特效。example: ion-spinner - Directive in module ionic - Ionic Framework

• sticky bar [繁體] 固定橫欄 [簡體] 固定导航条。固定出現在瀏覽器上方或下方位置的導航區塊。

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

• tab [繁體] 標籤 [簡體] 标签页、选项卡 sample: Tabs | jQuery UI

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

• tour tip, web tour, web guide: [繁體] 步驟式導引 (app 或網站功能) [簡體] 分步引导。 guided tours through your app or website
  • example: Anno.js Demo 2, Tourist.js, Joyride | Foundation Docs, Intro.js - Step-by-step guide and feature introduction for your website
  • 相關概念：onboarding

• video slider 影片選單;

內容

• highlight [繁體] 凸顯 [簡體] 高亮
  • 相關字: syntax highlight [繁體] 凸顯語法、凸顯程式碼語法 [簡體] 代码高亮、源码语法高亮

• Landing page (LP) [繁體] 網站到達頁、著陸頁 [簡體] 着陆页、登陆页。意思是點選搜尋引擎結果、促銷活動、促銷 email、線上廣告連結到達的頁面，就稱作「網站到達頁」 (資料來源：維基百科)。並非指一頁式網站。網站 example: Web Design Clip (L) ランディングページWebデザインクリップ

• Lorem Ipsum 假文，「讓設計師拿來做為填充版面的內容物」引用自MoreText.js。假文產生器:
  • MoreText.js,
  • Real content for all your designs - Lists 產生接近真實的假資料 [Last visited: 2018-04-12]
  • more tools on Random content generator

• progressive disclosure 漸進呈現。說明: 渐进呈现-Progressive Disclosure -- 用户体验那些事 -- 传送门、Progressive Disclosure [Last visited: 2016-03-11]
• Rich text [繁體] 富文字 [簡體] 富文本
• Rich text editor [繁體] 網頁編輯器、所見即所得 (WYSIWYG) 的編輯器 [簡體] 富文本編輯器: 可以設定文字大小、顏色等樣式、插入圖片等素材的線上編輯器。sample: TinyMCE, CKEditor, Trumbowyg。

資料結構

Database schema

• Create database schema document
• ER圖、實體關係圖 (entity-relationship diagram)

使用研究 / 方法論

• A/B testing A/B 測試: 提供網站使用者兩種版本的網站版面或不同功能進行測試，再透過網站 log檔或使用數據(例如: Google analytics)來評估成效。 相關資料: 超理性使用者介面設計 - Data-driven A/B Testing

• CJM, Customer journey map [繁體] 顧客體驗旅程地圖、[簡體] 客户旅程地图法
  • 教學: How To Create A Customer Journey Map - YouTube
  • 範例: 案例分享：打造線上線下一致的金融服務體驗 - Conversion Lab

• Design Thinking 設計思考，或稱設計思維。

• Heuristics Evaluation, Heuristics usability evaluation[1] [繁體] 經驗法則、啟發式評估、啟發式原則。
  • Jakob Nielsen (1995). 10 Heuristics for User Interface Design

• HMW, How Might We [繁體] 我們該如何 ...、[簡體] 我们可以怎样 ... 相關詞彙: POV
• Heat map, Heatmap [繁體] 熱點圖、熱區圖、[簡體] 热图。相關詞彙: 凝視軌跡圖 (Gaze plot)。

• Persona [繁體] 人物誌、[簡體] 用户画像、目标人群画像。
  • 範例: Persona模版 ｜ TANG
  • 什么是用户画像呢？一般用户画像的作用是什么？ - 用户信息 - 知乎

• POV, Point of View [繁體] 觀點、設計觀點、[簡體] 观点。其他學科領域: Point of view - Wikipedia 相關詞彙: HMW

• User Story [繁體] 使用者故事、[簡體] 用户故事：產品管理流程中，使用者故事（User Story）常見的三種使用情境 | by Anne Hsiao | 3PM LAB 產品三眼怪實驗室 | Medium

• User Story Mapping [繁體] 使用者故事對照、使用者故事地圖、[簡體] 用户故事地图。

• UX, User experience [繁體] 使用者經驗、[簡體] 用户体验。
  • Don Norman 與 Jakob Nielsen 提出「使用者體驗包含使用者與公司的產品或服務互動中的所有層面」

• UX Research 使用者研究 What is UX Research? | Interaction Design Foundation

• Service blueprint [繁體] 服務藍圖、[簡體] 服务蓝图

• SUS, System Usability Scale [繁體] 系統易用性量表、[簡體] 系统可用性量表。
  • Hans Shih — SUS 系統易用性量表

• User-centered design (UCD) 以使用者為中心的設計

• Competitive Analysis：[繁體] 競爭對手分析、競爭分析、競品分析、[簡體] 竞品分析
  • 範例：人人都是产品经理 | 产品经理、产品爱好者学习交流平台

產品規格文件 / 不同階段設計文件

RFP (Request For Proposal) 需求建議書 / 企劃書，由發案單位提供。 功能規格的文字，需要可以準確作為驗收或交付的項目。例如將模糊的大功能，展開為子項功能。相關頁面: 避免這樣寫 RFP (Request For Proposal) 需求建議書

• 軟體需求說明 (Software requirements specification, SRS) 範本，由發案單位提供。產品規格文件（BRD, MRD, PRD）撰寫:
  • Business Requirement Document (BRD) [繁體] 商業需求文件; [簡體] 商业需求描述
  • Market Requirement Document (MRD) [繁體] 市場需求文件; [簡體] 市场需求文档
  • Product Requirements Document (PRD) [繁體] 產品需求文件、產品需求文稿; [簡體] 产品需求文档、产品需求档案
  • Design Requirements Document (DRD) [繁體] 互動設計文件、互動設計說明文件; [簡體] 交互设计文档、交互设计说明文档、交互设计规范性文档
• 服務建議書或服務企劃書(service suggestions) 範本。由接案單位撰寫。

功能地圖, Functional map

• 將使用者需求，轉換成功能地圖

草稿、手繪 (sketching)、產品設計手繪 (product design sketching)

• Paper prototyping - Wikipedia, the free encyclopedia

Wireframe [繁體] 線框圖、框線稿、線稿; [簡體] 线框图。「線稿又稱頁面示意圖 (page schematic) 或螢幕藍圖 (screen blueprint)。以網站線稿為例，視覺化方式呈現網站的『骨骼圖』。線稿目的是說明如何配置網站元件，以符合特定目的。」(資料來源: Wikipedia)

• 功能地圖 (Functional Map): 初學者的 Functional Map · 嫁給 RD 的 UI Designer
• 使用者流程圖 (User Flow Diagram)、流程圖 (Flow chart, Logicflow):
  • 流程圖（Flow Chart）常用符號說明
  • Flow Chart 和 UI Flow · 嫁給 RD 的 UI Designer
• 操作流程、頁面流程 (UI flow): 初學者的 UI Flow · 嫁給 RD 的 UI Designer
• 網站地圖 (Site map)
• 資訊架構[2] (Information architecture)

Mockup [繁體] 視覺稿; [簡體] 视觉稿

• Mockup - Wikipedia

Prototype [繁體]雛形、原型; [簡體] 原型

• fidelity: [繁體] 保真度、逼真度; [簡體] 保真度。接近實際產品的畫面或互動方式的程度。
• High-fidelity prototype [繁體] 高逼真原型、高完成度原型; [簡體] 高保真原型。相反詞: Low-fidelity prototype
• Low-fidelity prototype [繁體] 低逼真原型、低完成度原型; [簡體] 低保真原型。相反詞: High-fidelity prototype
• 延伸閱讀: wesley (2016). 介面設計Prototyping 淺入淺出 – DESIGNING BY LEARNING [Last visited: 2016-08-25]

• 原型工具比較:
  • Uxtools.co
  • Prototyping Tools | Cooper
  • Pikatool: Compare Prototyping Tools 比較 speed, fidelity, user testing, wireframing, collaboration

設計系統 (Design System)、設計規範、視覺方針 (Style guide, Style guideline)、介面模式 (UI Pattern) ex:

• 範例: U.S. Web Design Standards 其他範例請見 Style guideline & UI patterns
• 教學:
  • 设计规范如何写？这20个精选案例让你大开眼界 | 人人都是产品经理 [Last visited: 2015-11-06]
  • HOWLIN YANG (2016). 如何訂定有效的Design Guideline [Last visited: 2016-08-21]
  • Abby Chiu (2017). Design System Practice – As A Product Designer – Medium [Last visited: 2017-05-23] "初次設計系統經驗分享"

使用者驗收測試(User Acceptance Test, UAT)

• Software acceptance test plan

(left blank intentionally)

頁面名稱

• onboarding page 或 landing page: 登陸頁
• signin page 或 signup Page: 註冊頁面

頁面狀態

UI Stack [繁] UI 堆疊; [簡] 交互界面堆栈。共有 5 種狀態 (Scott Hurff, 2015):

1. Ideal State (理想狀態)
2. Empty State (空白狀態)
   • 教學: 設計師最常忽略的 UI 頁面狀態: 空白狀態（empty state）
   • 範例: Empty States、Error state, empty states, placeholder, boat | Empty State # Onboarding Graphics | Pinterest
   • 相關概念: onboarding
3. Error/Failed State (錯誤狀態)
4. Partial State (局部資料狀態)
5. Loading State (載入中狀態)

相關資料:

• Zonble (2015). (翻譯) 如何修正壞 UI – zonble – Medium
• Scott Hurff (2015). How to fix a bad user interface - Scott Hurff's Blog
• 有限狀態機 (finite-state machine) 「表示有限個狀態以及在這些狀態之間的轉移和動作等行為的數學模型。」
• Raphael Fleckenstein (2018). The UX Design Checklist – Ryte – Medium

成長駭客

• AARRR 模式
• App Store Optimization (ASO) 行動應用程式商店、軟體商店優化、應用商店優化：增加「行動應用程式」 (APP) 在行動應用程式商店 (例如: iOS 上的 APP Store、Android 上的 Google Play) 可見度的程序。詳: App Store Optimization (ASO) Guideline | Summer。桑莫。夏天。
  • 相關頁面: APP、行動市場的調查研究
• growth hack [繁體] 成長駭客、增長駭客 [簡體] 增长黑客。「新創公司發展的行銷方法，透過創意、分析式思考 (analytical thinking) 、衡量指標 (Performance metric) ，以提升產品銷售和服務曝光。」資料來源: 維基百科
• SEO 搜尋引擎最佳化 (search engine optimization)
• (user) onboarding: 使用者第一次使用網站服務

其他

• HTML slicing, PSD to HTML Slicing [繁體] 切版、[簡體] 切版。
• HTML5 [簡體] H5 页面
• Image resolution / Display resolution: [繁體] 解析度、[簡體] 分辨率
• interoperability (跨異質平台)互通性
• Product Design (PD)
• Product Design & Development (PD&D)
• rounded corner 圓角 圆角
  • 步驟式畫面切換
  • Call to Actions
  • 表單欄位與型態 ex: 下拉選單、核取按鈕
  • 按鈕用途...
  • 連結
  • 使用者操作後的回饋訊息
• 時序圖 - 維基百科，自由的百科全書 (Sequence Diagram，又稱為循序圖)
  • 線上畫圖工具: WebSequenceDiagrams software is provided by Hanov Solutions Inc., of Waterloo, Ontario, Canada.
• GUI (Graphic User Interface)
• VUI (Voice User Interface)

Further readings

• 專業人士的設計流程 (github 專案)。原文: Design Process for Pros - Best design practices in one place (github 專案) [Last visited: 2018-11-10]
• Category:GUI widgets - Wikipedia, the free encyclopedia
• Glossary | Usability First
• 飛爾酥創意設計 - 線框圖、原型、視覺稿有何不同呢？
• UI/UX 設計師的工作範圍 · 嫁給 RD 的 UI Designer
• uxeastmeetswest (2017). 你可能不知道的8個UX專有英文字彙 – uxeastmeetswest – Medium
• BAOZHU (2016). 【概念解析】同为“原型”的wireframe，prototype，mockup，到底有何不同？ – UXRen [Last visited: 2017-08-05]
• (Transition) – grace Chi – Medium
• Checkbox 與 開關元件（Toggle Switch）的正確使用情境 | 設計大舌頭 [Last visited: 2018-08-27]
• Web Design and Development: what's the difference? [Last visited: 2021-05-01]
• Why do we call it breadcrumbs? Diving into the history of UI components | by Megan Ng | Jun, 2022 | UX Collective

介面元素參考

• A collection of popular layouts and patterns made with CSS - CSS Layout
• UI Components | User Interface Application Building Components
• Drag, Drop & Build Faster With Widgets - Appsmith
• UI Patterns & Inspiration - UX Library
• Browse iOS Apps | Mobbin iOS, Android, Web APP

Web site design and development process

• Information gathering: Research surveys
• Planning: Before you start to build a website, Content development strategy | Register domain name, Choose web hosting | Information architecture | Data model: Data type, Data flow | Documentation: Request For Proposal | Licensing
• Design: CSS tools, Free fonts, Free photos, Emoji & icons
• Testing & delivery: Usability test, check browser compatibility | Web testing | Speed up websites: Web Ping, Software acceptance test plan | Promote your web
• Maintenance: Site backup & restore test, Software update (OS patch or CMS security update)
• Need help? Community, I need inspiration, Web design glossary