Web design glossary: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
Line 179: Line 179:
** 使用者操作後的回饋訊息
** 使用者操作後的回饋訊息
* [https://zh.wikipedia.org/zh-tw/%E6%97%B6%E5%BA%8F%E5%9B%BE 時序圖 - 維基百科,自由的百科全書] (Sequence Diagram,又稱為循序圖)
* [https://zh.wikipedia.org/zh-tw/%E6%97%B6%E5%BA%8F%E5%9B%BE 時序圖 - 維基百科,自由的百科全書] (Sequence Diagram,又稱為循序圖)
** 線上畫圖工具: [https://www.websequencediagrams.com/ WebSequenceDiagrams] software is provided by Hanov Solutions Inc., of Waterloo, Ontario, Canada.


== References ==
== References ==

Revision as of 12:07, 15 February 2019

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

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封面、幻燈片效果 [簡體] 幻灯效果。 Example: 55 Best jQuery Carousel Plugins
  • 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) [繁體] 導覽列 [簡體] 导航条
  • radio button [繁體] 單選按鈕, 選項紐 [簡體] 单选按钮
  • video slider 影片選單;

內容

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

資料結構

Database schema

使用研究 / 方法論

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

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

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


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

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

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

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

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

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

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

(left blank intentionally)

頁面狀態

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

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

相關資料:

成長駭客

  • AARRR 模式
  • growth hack [繁體] 成長駭客、增長駭客 [簡體] 增长黑客。「新創公司發展的行銷方法,透過創意、分析式思考 (analytical thinking) 、衡量指標 (Performance metric) ,以提升產品銷售和服務曝光。」資料來源: 維基百科
  • (user) onboarding: 使用者第一次使用網站服務

其他

  • 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