Web design glossary: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
No edit summary
Line 50: Line 50:
* [https://en.wikipedia.org/wiki/User-centered_design User-centered design] (UCD) [https://zh.wikipedia.org/zh-tw/%E4%BB%A5%E7%94%A8%E6%88%B7%E4%B8%BA%E4%B8%AD%E5%BF%83%E7%9A%84%E8%AE%BE%E8%AE%A1 以使用者為中心的設計]
* [https://en.wikipedia.org/wiki/User-centered_design User-centered design] (UCD) [https://zh.wikipedia.org/zh-tw/%E4%BB%A5%E7%94%A8%E6%88%B7%E4%B8%BA%E4%B8%AD%E5%BF%83%E7%9A%84%E8%AE%BE%E8%AE%A1 以使用者為中心的設計]


== 產品規格文件 ==
== 產品規格文件 / 不同階段設計文件 ==
產品規格文件（BRD, MRD, PRD）撰寫<ref>[http://www.coolseo.org/operation/pm-mrd-prd-brd 產品經理（PM）一秒理解MRD、PRD、BRD | Cool SEO]</ref>
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 需求建議書] / 企劃書，由客戶提供。
* BRD  商業需求文件  Business Requirement Document
* 服務建議書或服務企劃書(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 範本]。由接案單位撰寫。
* MRD 市場需求文件  Market Requirement Document
* PRD 產品需求文件 Product Requirement Document


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 需求建議書]
草稿、手繪 (sketching)、產品設計手繪 (product design sketching)
* (left blank intentionally)
* [https://en.wikipedia.org/wiki/Paper_prototyping Paper prototyping - Wikipedia, the free encyclopedia]


服務建議書或服務企劃書(service suggestions)  
Wireframe [繁體] 線框圖
* [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 範本]
* 功能地圖 (Functional Map): [http://blog.akanelee.me/posts/168560-functional-map/ 初學者的 Functional Map · 嫁給 RD 的 UI Designer]
* 流程圖 (Flow chart): [http://blog.akanelee.me/posts/276159-flow-chart-and-ui-flow/ Flow Chart 和 UI Flow · 嫁給 RD 的 UI Designer]
* UI flow: [http://blog.akanelee.me/posts/168863-the-beginner-ui-flow/ 初學者的 UI Flow · 嫁給 RD 的 UI Designer]
* [https://zh.wikipedia.org/wiki/%E7%B6%B2%E7%AB%99%E5%9C%B0%E5%9C%96 網站地圖] ([https://en.wikipedia.org/wiki/Site_map Site map])
* [[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])


Functional Map
Mockup [繁體] 視覺稿
* (left blank intentionally)


flow chart
Prototype  [繁體]雛形、原型
* High-fidelity prototype [繁體] 高仿真原型、[簡體] 高保真原型。相反詞: Low-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}}


[https://en.wikipedia.org/wiki/Style_guide Style guide] 設計規範、視覺方針 ex:
設計規範、視覺方針 ([https://en.wikipedia.org/wiki/Style_guide Style guide])、介面模式 (UI Pattern) ex:
* [http://brand.uber.com/ Uber Brand Guide]
* [http://brand.uber.com/ Uber Brand Guide]
* [https://playbook.cio.gov/designstandards/ U.S. Web Design Standards]
* [https://playbook.cio.gov/designstandards/ U.S. Web Design Standards]
Line 76: Line 82:
* HOWLIN YANG (2016). [https://www.facebook.com/notes/howlin-yang/%E5%A6%82%E4%BD%95%E8%A8%82%E5%AE%9A%E6%9C%89%E6%95%88%E7%9A%84design-guideline/1359293960750875?hc_ref=NEWSFEED 如何訂定有效的Design Guideline] {{access | date =2016-08-21}}
* HOWLIN YANG (2016). [https://www.facebook.com/notes/howlin-yang/%E5%A6%82%E4%BD%95%E8%A8%82%E5%AE%9A%E6%9C%89%E6%95%88%E7%9A%84design-guideline/1359293960750875?hc_ref=NEWSFEED 如何訂定有效的Design Guideline] {{access | date =2016-08-21}}


產品規格文件（BRD, MRD, PRD）撰寫<ref>[http://www.coolseo.org/operation/pm-mrd-prd-brd 產品經理（PM）一秒理解MRD、PRD、BRD | Cool SEO]</ref>
* BRD  商業需求文件  Business Requirement Document
* MRD 市場需求文件  Market Requirement Document
* PRD 產品需求文件 Product Requirement Document


[https://en.wikipedia.org/wiki/Database_schema Database schema]
[https://en.wikipedia.org/wiki/Database_schema Database schema]
Line 89: Line 99:
* Image resolution / [https://en.wikipedia.org/wiki/Display_resolution Display resolution]: [繁體] [https://zh.wikipedia.org/zh-tw/%E6%98%BE%E7%A4%BA%E5%88%86%E8%BE%A8%E7%8E%87%E5%88%97%E8%A1%A8 解析度]、[簡體] [http://baike.baidu.com/view/7687.htm 分辨率]
* Image resolution / [https://en.wikipedia.org/wiki/Display_resolution Display resolution]: [繁體] [https://zh.wikipedia.org/zh-tw/%E6%98%BE%E7%A4%BA%E5%88%86%E8%BE%A8%E7%8E%87%E5%88%97%E8%A1%A8 解析度]、[簡體] [http://baike.baidu.com/view/7687.htm 分辨率]
* interoperability (跨異質平台)互通性
* interoperability (跨異質平台)互通性
* Mockup [繁體] 視覺稿
* Product Design (PD)
* Product Design (PD)
* Product Design & Development (PD&D)
* Product Design & Development (PD&D)
* rounded corner 圓角 圆角
* rounded corner 圓角 圆角
* Wireframe [繁體] 線框圖
** 步驟式畫面切換
** 步驟式畫面切換
** Call to Actions
** Call to Actions
Line 101: Line 109:
** 使用者操作後的回饋訊息
** 使用者操作後的回饋訊息


* Prototype  [繁體]雛形、原型
** High-fidelity prototype [繁體] 高仿真原型、[簡體] 高保真原型。相反詞: Low-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}}


reference
reference
Line 113: Line 117:
* [http://www.usabilityfirst.com/glossary Glossary | Usability First]
* [http://www.usabilityfirst.com/glossary Glossary | Usability First]
* [http://philsu.tw/index.php/deisgn-treasures/inspiration/web-design/item/wireframing-prototyping-mockuping 飛爾酥創意設計 - 線框圖、原型、視覺稿有何不同呢？]
* [http://philsu.tw/index.php/deisgn-treasures/inspiration/web-design/item/wireframing-prototyping-mockuping 飛爾酥創意設計 - 線框圖、原型、視覺稿有何不同呢？]
* [http://blog.akanelee.me/posts/317035-ui-ux-designer-scope/ UI/UX 設計師的工作範圍 · 嫁給 RD 的 UI Designer]


[[Category:WebDesign]]
[[Category:WebDesign]]

Revision as of 22:23, 25 August 2016

網頁設計相關專有名詞

UI Components

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

  • accordion 折疊。為了在小的螢幕上，顯示主要的資訊區塊時，會將其他區域折疊。 example: Accordion | jQuery UI, Creating an Accordion with Spry Data
  • breadcrumbs [繁體] 麵包屑(導覽) [簡體] 面包屑导航
  • cover flow[1], 又稱 carousel, 3D封面 example: 55 Best jQuery Carousel Plugins
  • drag & drop [繁] 拖曳、拖移、拖拉 [簡] 拖拽, 拖放
  • dropdowns / 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 [繁體] 進度條 [簡體] 进度条 example: Progressbar | jQuery UI
  • slider [繁體] 滑桿、拉桿 [簡體] 滑块、滑动条。例如電腦調整音量的滑桿。 sample: Sliders | User Interface Design Inspiration、Slider | jQuery UI
  • spinner [繁體] 下拉框、下拉選單 [簡體] 旋转器。原本下拉選單 (select box) 外，可利用上下鍵調整項目數值。 example: Spinner | jQuery UI
  • thumbnails 縮圖
  • tab [繁體] 標籤 [簡體] 标签页、选项卡 sample: Tabs | jQuery UI
  • tooltip [繁體] 提示文字、彈出式提示框 [簡體] 提示文本。滑鼠游標移到元素或連結上方時，顯示的簡短文字。
  • tour tip: guided tours through your app or website 步驟式導引 app 或網站功能
  • video slider 影片選單;

內容

表單 html form

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

資料結構

  • ER圖 (entity-relationship diagram)

使用研究 / 方法論

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

RFP (Request For Proposal) 需求建議書 / 企劃書，由客戶提供。

  • 服務建議書或服務企劃書(service suggestions) 範本。由接案單位撰寫。

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

Wireframe [繁體] 線框圖

Mockup [繁體] 視覺稿

  • (left blank intentionally)

Prototype [繁體]雛形、原型

  • 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)、介面模式 (UI Pattern) ex:

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

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

Database schema

成長駭客

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


reference

  1. ↑ Cover Flow - Wikipedia, the free encyclopedia
  2. ↑ HTML 5 <input> placeholder 属性
  3. ↑ 6. Placeholders outside the CMS — django cms 3.0 documentation。
  4. ↑ 網頁介面A/B Test 筆記 (Google Analytics Experiments) – 花水木：文藝復興人生
  5. ↑ 產品經理（PM）一秒理解MRD、PRD、BRD | Cool SEO

further reading

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