Web design glossary

From LemonWiki共筆
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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

UI Components

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

  • accordion [繁體] 折疊、摺疊選單 [簡體] 折叠、折叠面板。為了在小的裝置螢幕上,顯示主要的資訊區塊時,會將其他區域折疊。 example: Accordion | jQuery UI, Creating an Accordion with Spry Data
  • breadcrumbs, breadcrumb trail [繁體] 麵包屑(導覽) [簡體] 面包屑导航。說明: 資訊結構與網站設計: 導覽路徑標示(Breadcrumbs) [Last visited: 2017-03-21]
  • carousel 又稱 cover flow[1], touch slider, touch carousel [繁體] 3D封面、幻燈片效果、輪播、輪播圖卡[2] [簡體] 幻灯效果、轮播效果。 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
  • drag & drop [繁] 拖曳、拖移、拖拉 [簡] 拖拽, 拖放
  • dropdown, drop down menus [繁體] 下拉選單 [簡體] 下拉菜單
  • input box, text field [繁體] 文字輸入欄位、輸入框 [簡體] 文本输入框
  • lightbox [繁體] 光箱 (特效) [簡體] 暗箱 (特效)。透過降低周遭元素對比或變暗,凸顯想要呈現的資訊。sample: Lightbox, Fancybox, jQuery BlockUI Plugin
  • mandatory / required (欄位)必填
  • menu [繁體] 選單 [簡體] 菜单
  • modal dialog [繁體] 對話視窗 [簡體] 对话框、弹出窗口。點選按鈕,跳出小視窗要求使用者填寫表單內容。 sample: Dialog | jQuery UI, Viewing snipp | Login form in a modal | Bootsnipp.com
  • navbar (navigation bar) [繁體] 導覽列 [簡體] 导航条
  • pagination [繁體] 分頁、頁碼 [簡體] 分页、页码
  • placefolder [繁體] 佔位符 [簡體] 占位符。意思可能有二:
    1. placefolder text 輸入欄位 (文字方框) 的提示文字 [4] [簡體] 输入框背景文字提示[5]: 提供使用者輸入值的範例。使用者點擊輸入欄位時,提示文字會自動消失。
    2. 版面區塊 ex: 選定某個版面區塊,可供編輯[6] placefolder 雲端服務用以填充區塊,方便網站正式上線前,測試與確認網頁版面或圖片樣式大小。例如: {placekitten}, more on Random content generator
  • radio button [繁體] 單選按鈕, 選項紐 [簡體] 单选按钮
  • video slider 影片選單;

內容

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

資料結構

Database schema

使用研究 / 方法論

  • HMW, How Might We [繁體] 我們該如何 ...、[簡體] 我们可以怎样 ... [10] 相關詞彙: POV
  • Heat map, Heatmap [繁體] 熱點圖、熱區圖、[簡體] 热图。相關詞彙: 凝視軌跡圖 (Gaze plot)[11]
  • POV, Point of View [繁體] 觀點、設計觀點、[簡體] 观点。其他學科領域: Point of view - Wikipedia 相關詞彙: HMW
  • UX, User experience [繁體] 使用者經驗、[簡體] 用户体验。
    • Don Norman 與 Jakob Nielsen 提出「使用者體驗包含使用者與公司的產品或服務互動中的所有層面」[12]

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

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


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

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

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

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

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

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

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

(left blank intentionally)

頁面狀態

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

  1. Ideal State (理想狀態)
  2. Empty State (空白狀態)
  3. Error/Failed State (錯誤狀態)
  4. Partial State (局部資料狀態)
  5. Loading State (載入中狀態)

相關資料:

成長駭客

其他

  • 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.

References

further reading


Web site design and development process