Web design glossary

網頁設計相關專有名詞

UI Components

• breadcrumbs [繁體] 麵包屑(導覽) [簡體] 面包屑导航
• drop down menus 下拉式選單
• menu [繁體] 選單 [簡體] 菜单
• modal dialog [繁體] 對話視窗 [簡體] 对话框、弹出窗口。點選按鈕，跳出小視窗要求使用者填寫表單內容。 sample: Dialog | jQuery UI, Viewing snipp | Login form in a modal | Bootsnipp.com
• navbar (navigation bar) [繁體] 導覽列 [簡體] 导航条
• pagination [繁體] 分頁、頁碼 [簡體] 分页、页码
• progress bars [繁體] 進度條 [簡體] 进度条
• thumbnails 縮圖
• tooltip [繁體] 提示文字、彈出式提示框 [簡體] 提示文本。滑鼠游標移到元素或連結上方時，顯示的簡短文字。
• video slider 影片選單;

內容

• Lorem Ipsum 假文，「讓設計師拿來做為填充版面的內容物」引用自MoreText.js。假文產生器: MoreText.js, 亂數假文產生器, Lipsum generator。
• Rich text [繁體] 富文字 [簡體] 富文本
• Rich text editor 網頁編輯器: 可以設定文字大小、顏色等樣式、插入圖片等素材的編輯器。也可稱WYSIWYG 所見即所得的編輯器 ex: TinyMCE, CKEditor

特效

• accordion 折疊。為了在小的螢幕上，顯示主要的資訊區塊時，會將其他區域折疊。 example: Accordion | jQuery UI, Creating an Accordion with Spry Data
• cover flow, 又稱 carousel, 3D封面 example: 55 Best jQuery Carousel Plugins
• rounded corner 圓角 圆角
• tour tip: guided tours through your app or website 步驟式導引 app 或網站功能
  • example: Anno.js Demo 2, Tourist.js, Joyride | Foundation Docs

平台

• interoperability (跨異質平台)互通性

表單 html form

• chained menu 動態選單(動態二階選單、動態多階選單) 或稱 chained select Menu, double combo menu, select cascade, dynamic dropdowns
• checkbox [繁體] 複選框 [簡體] 复选框
• date picker 日期選擇器 ex: jQuery Datepicker
• dropdown 下拉選單
• mandatory / required (欄位)必填
• radio button [繁體] 單選按鈕, 選項紐 [簡體] 单选按钮
• spinner 連動式下拉選單

資料結構

• ER圖 (entity-relationship diagram)

使用研究 / 方法論

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

產品規格文件

產品規格文件（BRD, MRD, PRD）撰寫

• BRD 商業需求文件 Business Requirement Document
• MRD 市場需求文件 Market Requirement Document
• PRD 產品需求文件 Product Requirement Document

RFP (Request For Proposal) 需求建議書

其他

• High-fidelity prototype [繁體] 高仿真原型、[簡體] 高保真原型。相反詞: Low-fidelity prototype 低仿真度原型
• Image resolution / Display resolution: [繁體] 解析度、[簡體] 分辨率
• Low-fidelity prototype [繁體] 低擬真性原型、低仿真度原型。相反詞: High-fidelity prototype 高仿真原型
• Mockup [繁體] 視覺稿
• Product Design (PD)
• Product Design & Development (PD&D)
• Prototype [繁體]雛形、原型
• Wireframe [繁體] 線框圖
  • 步驟式畫面切換
  • 表單欄位與型態 ex: 下拉選單、核取按鈕
  • 按鈕用途...
  • 連結
  • 使用者操作後的回饋訊息

reference

further reading

• Category:GUI widgets - Wikipedia, the free encyclopedia
• Glossary | Usability First
• 飛爾酥創意設計 - 線框圖、原型、視覺稿有何不同呢？