Web design glossary: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
Line 64: Line 64:
== 使用研究 / 方法論 ==
== 使用研究 / 方法論 ==
* [http://en.wikipedia.org/wiki/A/B_testing A/B testing] A/B 測試: 提供網站使用者兩種版本的網站版面或不同功能進行測試，再透過網站 log檔或使用數據(例如: Google analytics<ref>[http://hanamizuki.tw/2013/02/21/ab-test-split-test-using-google-experiments/ 網頁介面A/B Test 筆記 (Google Analytics Experiments) – 花水木：文藝復興人生]</ref>)來評估成效。 相關資料: [http://www.slideshare.net/clayliao/data-driven-ab-testing 超理性使用者介面設計 - Data-driven A/B Testing]
* [http://en.wikipedia.org/wiki/A/B_testing A/B testing] A/B 測試: 提供網站使用者兩種版本的網站版面或不同功能進行測試，再透過網站 log檔或使用數據(例如: Google analytics<ref>[http://hanamizuki.tw/2013/02/21/ab-test-split-test-using-google-experiments/ 網頁介面A/B Test 筆記 (Google Analytics Experiments) – 花水木：文藝復興人生]</ref>)來評估成效。 相關資料: [http://www.slideshare.net/clayliao/data-driven-ab-testing 超理性使用者介面設計 - Data-driven A/B Testing]
* Design Thinking [https://zh.wikipedia.org/zh-tw/%E8%A8%AD%E8%A8%88%E6%80%9D%E8%80%83 設計思考]，或稱設計思維。
 
* Persona [繁體] 人物誌、[簡體] 用户画像、目标人群画像。
** 範例: [http://tangux.com/news/article/id/145.html Persona模版 ｜ TANG]
** [https://www.zhihu.com/question/19853605 什么是用户画像呢？一般用户画像的作用是什么？ - 用户信息 - 知乎]
* [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 以使用者為中心的設計]
* CJM, customer journey map [繁體] 顧客體驗旅程地圖、[簡體] 客户旅程地图法
* CJM, customer journey map [繁體] 顧客體驗旅程地圖、[簡體] 客户旅程地图法
** 教學: [https://www.youtube.com/watch?v=mSxpVRo3BLg&feature=youtu.be How To Create A Customer Journey Map - YouTube]
** 教學: [https://www.youtube.com/watch?v=mSxpVRo3BLg&feature=youtu.be How To Create A Customer Journey Map - YouTube]
** 範例: [http://conversionlab.co/2016/09/25/%E6%A1%88%E4%BE%8B%E5%88%86%E4%BA%AB%EF%BC%9A%E6%89%93%E9%80%A0%E7%B7%9A%E4%B8%8A%E7%B7%9A%E4%B8%8B%E4%B8%80%E8%87%B4%E7%9A%84%E9%87%91%E8%9E%8D%E6%9C%8D%E5%8B%99%E9%AB%94%E9%A9%97/ 案例分享：打造線上線下一致的金融服務體驗 - Conversion Lab]
** 範例: [http://conversionlab.co/2016/09/25/%E6%A1%88%E4%BE%8B%E5%88%86%E4%BA%AB%EF%BC%9A%E6%89%93%E9%80%A0%E7%B7%9A%E4%B8%8A%E7%B7%9A%E4%B8%8B%E4%B8%80%E8%87%B4%E7%9A%84%E9%87%91%E8%9E%8D%E6%9C%8D%E5%8B%99%E9%AB%94%E9%A9%97/ 案例分享：打造線上線下一致的金融服務體驗 - Conversion Lab]
* Design Thinking [https://zh.wikipedia.org/zh-tw/%E8%A8%AD%E8%A8%88%E6%80%9D%E8%80%83 設計思考]，或稱設計思維。
* [http://www.hansshih.com/post/85896161905/%E5%95%9F%E7%99%BC%E5%BC%8F%E8%A9%95%E4%BC%B0-heuristics-evaluation Heuristics Evaluation 啟發式評估], Heuristics usability evaluation[http://www.xxc.idv.tw/dokuwiki/heuristics_usability_evaluation]
* [http://www.hansshih.com/post/85896161905/%E5%95%9F%E7%99%BC%E5%BC%8F%E8%A9%95%E4%BC%B0-heuristics-evaluation Heuristics Evaluation 啟發式評估], Heuristics usability evaluation[http://www.xxc.idv.tw/dokuwiki/heuristics_usability_evaluation]
** Jakob Nielsen (1995). [https://www.nngroup.com/articles/ten-usability-heuristics/ 10 Heuristics for User Interface Design]
** Jakob Nielsen (1995). [https://www.nngroup.com/articles/ten-usability-heuristics/ 10 Heuristics for User Interface Design]
* HMW, How Might We [繁體] 我們該如何 ...、[簡體] 我们可以怎样 ... <ref>[http://kojenchieh.pixnet.net/blog/post/462777434-design-sprint---how-might-we-%E9%9B%9C%E8%A8%98 DESIGN SPRINT - HOW MIGHT WE 雜記 @ David Ko的學習之旅 :: 痞客邦 ::]</ref> 相關詞彙: POV
* Persona [繁體] 人物誌、[簡體] 用户画像、目标人群画像。
** 範例: [http://tangux.com/news/article/id/145.html Persona模版 ｜ TANG]
** [https://www.zhihu.com/question/19853605 什么是用户画像呢？一般用户画像的作用是什么？ - 用户信息 - 知乎]
* POV, Point of View [繁體] 觀點、設計觀點、[簡體] 观点。其他學科領域: [https://en.wikipedia.org/wiki/Point_of_view Point of view - Wikipedia] 相關詞彙: HMW
* [https://en.wikipedia.org/wiki/Service_blueprint Service blueprint] ([http://wiki.mbalib.com/zh-tw/%E6%9C%8D%E5%8A%A1%E8%93%9D%E5%9B%BE 服務藍圖])
* [https://en.wikipedia.org/wiki/Service_blueprint Service blueprint] ([http://wiki.mbalib.com/zh-tw/%E6%9C%8D%E5%8A%A1%E8%93%9D%E5%9B%BE 服務藍圖])


* POV, Point of View [繁體] 觀點、設計觀點、[簡體] 观点。其他學科領域: [https://en.wikipedia.org/wiki/Point_of_view Point of view - Wikipedia]
* SUS, System Usability Scale [繁體] 系統易用性量表、[簡體] 系统可用性量表。[http://www.hansshih.com/post/85896237295/sus-%E7%B3%BB%E7%B5%B1%E6%98%93%E7%94%A8%E6%80%A7%E9%87%8F%E8%A1%A8 Hans Shih — SUS 系統易用性量表]
* HMW, How Might We [繁體] 我們該如何 ...、[簡體] 我们可以怎样 ... <ref>[http://kojenchieh.pixnet.net/blog/post/462777434-design-sprint---how-might-we-%E9%9B%9C%E8%A8%98 DESIGN SPRINT - HOW MIGHT WE 雜記 @ David Ko的學習之旅 :: 痞客邦 ::]</ref>
 
* [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 以使用者為中心的設計]


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

Revision as of 10:07, 22 September 2018

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

UI Components

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

內容

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

表單 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

使用研究 / 方法論

  • HMW, How Might We [繁體] 我們該如何 ...、[簡體] 我们可以怎样 ... [9] 相關詞彙: POV
  • POV, Point of View [繁體] 觀點、設計觀點、[簡體] 观点。其他學科領域: Point of view - Wikipedia 相關詞彙: HMW

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

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


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

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

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

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

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

頁面狀態

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

  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，又稱為循序圖)

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. ↑ DESIGN SPRINT - HOW MIGHT WE 雜記 @ David Ko的學習之旅 :: 痞客邦 ::
  10. ↑ 產品經理（PM）一秒理解MRD、PRD、BRD | Cool SEO
  11. ↑ fidelity - 保真(度)，逼真(度)
  12. ↑ 保真度_互动百科
  13. ↑ Scott Hurff (2015). How to fix a bad user interface - Scott Hurff's Blog

further reading


Web site design and development process

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