Web design glossary: Difference between revisions

Jump to navigation Jump to search
1,127 bytes added ,  25 August 2016
no edit summary
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]]

Navigation menu