Web design glossary: Difference between revisions
Tag: wikieditor |
|||
| (3 intermediate revisions by the same user not shown) | |||
| Line 42: | Line 42: | ||
*# placefolder text 輸入欄位 (文字方框) 的提示文字 <ref>[http://www.w3school.com.cn/html5/att_input_placeholder.asp HTML 5 <input> placeholder 属性]</ref> [簡體] 输入框背景文字提示<ref>[http://www.webhek.com/input-placeholder/ 使用HTML5的Placeholder属性实现input输入框背景文字提示效果 – WEB骇客]</ref>: 提供使用者輸入值的範例。使用者點擊輸入欄位時，提示文字會自動消失。 | *# placefolder text 輸入欄位 (文字方框) 的提示文字 <ref>[http://www.w3school.com.cn/html5/att_input_placeholder.asp HTML 5 <input> placeholder 属性]</ref> [簡體] 输入框背景文字提示<ref>[http://www.webhek.com/input-placeholder/ 使用HTML5的Placeholder属性实现input输入框背景文字提示效果 – WEB骇客]</ref>: 提供使用者輸入值的範例。使用者點擊輸入欄位時，提示文字會自動消失。 | ||
*# 版面區塊 ex: 選定某個版面區塊，可供編輯<ref>[https://django-cms.readthedocs.org/en/3.0/extending_cms/placeholders.html 6. Placeholders outside the CMS — django cms 3.0 documentation]。</ref> placefolder 雲端服務用以填充區塊，方便網站正式上線前，測試與確認網頁版面或圖片樣式大小。例如: [https://placekitten.com/ {placekitten}], more on [[Random content generator]] | *# 版面區塊 ex: 選定某個版面區塊，可供編輯<ref>[https://django-cms.readthedocs.org/en/3.0/extending_cms/placeholders.html 6. Placeholders outside the CMS — django cms 3.0 documentation]。</ref> placefolder 雲端服務用以填充區塊，方便網站正式上線前，測試與確認網頁版面或圖片樣式大小。例如: [https://placekitten.com/ {placekitten}], more on [[Random content generator]] | ||
*# 內容載入區塊 (Content Loading Placeholder)：「使用頁面或元件的『載入佔位符』，表示某些內容還在載入中。」(資料來源：Bootstrap<ref>[https://getbootstrap.com/docs/5.1/components/placeholders/ Placeholders · Bootstrap v5.1]</ref>) | |||
* progress bars [繁體] 進度條 [簡體] 进度条 example: [https://jqueryui.com/progressbar/ Progressbar | jQuery UI] | * progress bars [繁體] 進度條 [簡體] 进度条 example: [https://jqueryui.com/progressbar/ Progressbar | jQuery UI] | ||
| Line 69: | Line 70: | ||
* tour tip, web tour, web guide: [繁體] 步驟式導引 (app 或網站功能) [簡體] 分步引导。 guided tours through your app or website | * tour tip, web tour, web guide: [繁體] 步驟式導引 (app 或網站功能) [簡體] 分步引导。 guided tours through your app or website | ||
** example: [http://iamdanfox.github.io/anno.js/ Anno.js Demo 2], [http://easelinc.github.io/tourist/ Tourist.js], [http://foundation.zurb.com/docs/components/joyride.html Joyride | Foundation Docs], [http://introjs.com/ Intro.js - Step-by-step guide and feature introduction for your website] | ** example: [http://iamdanfox.github.io/anno.js/ Anno.js Demo 2], [http://easelinc.github.io/tourist/ Tourist.js], [http://foundation.zurb.com/docs/components/joyride.html Joyride | Foundation Docs], [http://introjs.com/ Intro.js - Step-by-step guide and feature introduction for your website] | ||
** 相關概念：onboarding | |||
* video slider 影片選單; | * video slider 影片選單; | ||
| Line 181: | Line 183: | ||
(left blank intentionally) | (left blank intentionally) | ||
== 頁面名稱 == | |||
* onboarding page 或 landing page: 登陸頁 | |||
* signin page 或 signup Page: 註冊頁面 | |||
== 頁面狀態 == | == 頁面狀態 == | ||
UI Stack [繁] UI 堆疊; [簡] 交互界面堆栈。共有 5 種狀態 (Scott Hurff, 2015<ref>Scott Hurff (2015). [http://scotthurff.com/posts/why-your-user-interface-is-awkward-youre-ignoring-the-ui-stack How to fix a bad user interface - Scott Hurff's Blog]</ref>): | UI Stack [繁] UI 堆疊; [簡] 交互界面堆栈。共有 5 種狀態 (Scott Hurff, 2015<ref>Scott Hurff (2015). [https://web.archive.org/web/20190412122206/http://scotthurff.com/posts/why-your-user-interface-is-awkward-youre-ignoring-the-ui-stack How to fix a bad user interface - Scott Hurff's Blog] (網頁備份，原[http://scotthurff.com/posts/why-your-user-interface-is-awkward-youre-ignoring-the-ui-stack 連結]已失效)</ref>): | ||
# Ideal State (理想狀態) | # Ideal State (理想狀態) | ||
# Empty State (空白狀態) | # Empty State (空白狀態) | ||