Web design glossary: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
Line 72: Line 72:
RFP (Request For Proposal) [http://wiki.mbalib.com/zh-tw/%E9%9C%80%E6%B1%82%E5%BB%BA%E8%AE%AE%E4%B9%A6 需求建議書] / 企劃書，由發案單位提供。 {{exclaim}} 功能規格的文字，需要可以準確作為驗收或交付的項目。例如將模糊的大功能，展開為子項功能。
RFP (Request For Proposal) [http://wiki.mbalib.com/zh-tw/%E9%9C%80%E6%B1%82%E5%BB%BA%E8%AE%AE%E4%B9%A6 需求建議書] / 企劃書，由發案單位提供。 {{exclaim}} 功能規格的文字，需要可以準確作為驗收或交付的項目。例如將模糊的大功能，展開為子項功能。
* 軟體需求說明 ([https://en.wikipedia.org/wiki/Software_requirements_specification Software requirements specification], SRS) [http://templates.openoffice.org/zh-hant/node/5693 範本]，由發案單位提供。產品規格文件（BRD, MRD, PRD）撰寫<ref>[http://www.coolseo.org/operation/pm-mrd-prd-brd 產品經理（PM）一秒理解MRD、PRD、BRD | Cool SEO]</ref>:
* 軟體需求說明 ([https://en.wikipedia.org/wiki/Software_requirements_specification Software requirements specification], SRS) [http://templates.openoffice.org/zh-hant/node/5693 範本]，由發案單位提供。產品規格文件（BRD, MRD, PRD）撰寫<ref>[http://www.coolseo.org/operation/pm-mrd-prd-brd 產品經理（PM）一秒理解MRD、PRD、BRD | Cool SEO]</ref>:
** [https://en.wikipedia.org/wiki/Business_requirements Business Requirement Document] (BRD) [繁體] 商業需求文件 [簡體] 商业需求描述
** [https://en.wikipedia.org/wiki/Business_requirements Business Requirement Document] (BRD) [繁體] 商業需求文件; [簡體] 商业需求描述
** [https://en.wikipedia.org/wiki/Market_requirements_document Market Requirement Document] (MRD) [繁體] 市場需求文件 [簡體] 市场需求文档
** [https://en.wikipedia.org/wiki/Market_requirements_document Market Requirement Document] (MRD) [繁體] 市場需求文件; [簡體] 市场需求文档
** [https://en.wikipedia.org/wiki/Product_requirements_document Product Requirements Document] (PRD) [繁體] 產品需求文件、產品需求文稿 [簡體] [http://www.woshipm.com/pmd/561615.html 产品需求文档]、产品需求档案
** [https://en.wikipedia.org/wiki/Product_requirements_document Product Requirements Document] (PRD) [繁體] 產品需求文件、產品需求文稿; [簡體] [http://www.woshipm.com/pmd/561615.html 产品需求文档]、产品需求档案
** Design Requirements Document (DRD)
** Design Requirements Document (DRD) [繁體] 互動設計文件、互動設計說明文件; [簡體] 交互设计文档、交互设计说明文档、交互设计规范性文档
* 服務建議書或服務企劃書(service suggestions) [http://lmgtfy.com/?q=%E6%9C%8D%E5%8B%99%E5%BB%BA%E8%AD%B0%E6%9B%B8%20%E7%AF%84%E6%9C%AC 範本]。由接案單位撰寫。
* 服務建議書或服務企劃書(service suggestions) [http://lmgtfy.com/?q=%E6%9C%8D%E5%8B%99%E5%BB%BA%E8%AD%B0%E6%9B%B8%20%E7%AF%84%E6%9C%AC 範本]。由接案單位撰寫。


Line 82: Line 82:
* [https://en.wikipedia.org/wiki/Paper_prototyping Paper prototyping - Wikipedia, the free encyclopedia]
* [https://en.wikipedia.org/wiki/Paper_prototyping Paper prototyping - Wikipedia, the free encyclopedia]


Wireframe [繁體] 線框圖、框線稿、線稿、[簡體] 线框图
Wireframe [繁體] 線框圖、框線稿、線稿; [簡體] 线框图
* 功能地圖 (Functional Map): [http://blog.akanelee.me/posts/168560-functional-map/ 初學者的 Functional Map · 嫁給 RD 的 UI Designer]
* 功能地圖 (Functional Map): [http://blog.akanelee.me/posts/168560-functional-map/ 初學者的 Functional Map · 嫁給 RD 的 UI Designer]
* 流程圖 (Flow chart):  
* 流程圖 (Flow chart):  
Line 91: Line 91:
* [[Information Architecture | 資訊架構]][https://zh.wikipedia.org/wiki/%E8%B3%87%E8%A8%8A%E6%9E%B6%E6%A7%8B] ([https://en.wikipedia.org/wiki/Information_architecture Information architecture])
* [[Information Architecture | 資訊架構]][https://zh.wikipedia.org/wiki/%E8%B3%87%E8%A8%8A%E6%9E%B6%E6%A7%8B] ([https://en.wikipedia.org/wiki/Information_architecture Information architecture])


Mockup [繁體] 視覺稿、[簡體] 视觉稿
Mockup [繁體] 視覺稿; [簡體] 视觉稿
* [https://en.wikipedia.org/wiki/Mockup Mockup - Wikipedia]
* [https://en.wikipedia.org/wiki/Mockup Mockup - Wikipedia]


Prototype  [繁體]雛形、原型
Prototype  [繁體]雛形、原型; [簡體] 原型
* fidelity: [繁體] 保真度、逼真度<ref>[http://terms.naer.edu.tw/detail/473018/ fidelity - 保真(度)，逼真(度)]</ref>、[簡體] 保真度<ref>[http://www.baike.com/wiki/%E4%BF%9D%E7%9C%9F%E5%BA%A6 保真度_互动百科]</ref>。接近實際產品的畫面或互動方式的程度。
* fidelity: [繁體] 保真度、逼真度<ref>[http://terms.naer.edu.tw/detail/473018/ fidelity - 保真(度)，逼真(度)]</ref>; [簡體] 保真度<ref>[http://www.baike.com/wiki/%E4%BF%9D%E7%9C%9F%E5%BA%A6 保真度_互动百科]</ref>。接近實際產品的畫面或互動方式的程度。
* High-fidelity prototype [繁體] 高逼真原型、高完成度原型、[簡體] 高保真原型。相反詞: Low-fidelity prototype
* High-fidelity prototype [繁體] 高逼真原型、高完成度原型; [簡體] 高保真原型。相反詞: Low-fidelity prototype
* Low-fidelity prototype [繁體] 低逼真原型、低完成度原型、[簡體] 低保真原型。相反詞: High-fidelity prototype
* Low-fidelity prototype [繁體] 低逼真原型、低完成度原型; [簡體] 低保真原型。相反詞: High-fidelity prototype
* 延伸閱讀: wesley (2016). [https://heywesley.wordpress.com/2016/08/25/prototyping-easy-in-easy-out/ 介面設計Prototyping 淺入淺出 – DESIGNING BY LEARNING] {{access | date = 2016-08-25}}
* 延伸閱讀: wesley (2016). [https://heywesley.wordpress.com/2016/08/25/prototyping-easy-in-easy-out/ 介面設計Prototyping 淺入淺出 – DESIGNING BY LEARNING] {{access | date = 2016-08-25}}


Revision as of 12:42, 20 February 2018

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

UI Components

使用者介面元件與互動特效相關

內容

表單 html form

  • chained menu 動態選單(動態二階選單、動態多階選單) 或稱 chained select menu, double combo menu, select cascade, dynamic dropdowns, dropdown dependent
  • checkbox [繁體] 複選框、核取方塊 [簡體] 复选框
  • date picker 日期選擇器 ex: jQuery Datepicker
  • dropdown [繁體] 下拉選單 [簡體] 下拉菜單
  • input box, text field [繁體] 文字輸入欄位、輸入框 [簡體] 文本输入框
  • mandatory / required (欄位)必填
  • placefolder 意思可能有二:
    1. placefolder text [繁體] 輸入欄位 (文字方框) 的提示文字 [5] [簡體] 输入框背景文字提示[6]: 提供使用者輸入值的範例。使用者點擊輸入欄位時，提示文字會自動消失。
    2. 版面區塊 ex: 選定某個版面區塊，可供編輯[7] placefolder 雲端服務用以填充區塊，方便網站正式上線前，測試與確認網頁版面或圖片樣式大小。例如: {placekitten}, Placehold.it - Quick and simple image placeholders, Fake images please?
  • radio button [繁體] 單選按鈕, 選項紐 [簡體] 单选按钮
  • spinner 連動式下拉選單

資料結構

Database schema

使用研究 / 方法論

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

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


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

Wireframe [繁體] 線框圖、框線稿、線稿; [簡體] 线框图

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

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

  • fidelity: [繁體] 保真度、逼真度[10]; [簡體] 保真度[11]。接近實際產品的畫面或互動方式的程度。
  • 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:


(left blank intentionally)

頁面狀態

資料來源:

成長駭客

  • 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: 下拉選單、核取按鈕
    • 按鈕用途...
    • 連結
    • 使用者操作後的回饋訊息


References

  1. ↑ Cover Flow - Wikipedia, the free encyclopedia
  2. ↑ Lindsay is observing.....: 所謂的 Pinterest 佈局式網站
  3. ↑ 只要十秒鐘，使用 Loading.io 製作 Loading 圖示
  4. ↑ 富文本编辑器_百度百科
  5. ↑ HTML 5 <input> placeholder 属性
  6. ↑ 使用HTML5的Placeholder属性实现input输入框背景文字提示效果 – WEB骇客
  7. ↑ 6. Placeholders outside the CMS — django cms 3.0 documentation。
  8. ↑ 網頁介面A/B Test 筆記 (Google Analytics Experiments) – 花水木：文藝復興人生
  9. ↑ 產品經理（PM）一秒理解MRD、PRD、BRD | Cool SEO
  10. ↑ fidelity - 保真(度)，逼真(度)
  11. ↑ 保真度_互动百科

further reading


Web site design and development process

Retrieved from "https://wiki.planetoid.info/index.php?title=Web_design_glossary&oldid=19063"