Web design glossary - Revision history

Planetoid: /* UI Components */

2024-03-20T04:29:15Z

UI Components

← Older revision		Revision as of 12:29, 20 March 2024
Line 70:		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 影片選單;

Unknown user: /* 頁面狀態 */

2024-01-02T04:34:14Z

頁面狀態

← Older revision		Revision as of 12:34, 2 January 2024
Line 188:		Line 188:

	== 頁面狀態 ==		== 頁面狀態 ==
	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 (空白狀態)

Unknown user: /* 頁面狀態 */

2023-12-21T09:19:29Z

頁面狀態

← Older revision		Revision as of 17:19, 21 December 2023
Line 182:		Line 182:

	(left blank intentionally)		(left blank intentionally)

			== 頁面名稱 ==
			* onboarding page 或 landing page: 登陸頁
			* signin page 或 signup Page: 註冊頁面

	== 頁面狀態 ==		== 頁面狀態 ==

Unknown user: /* UI Components */

2023-12-20T02:28:52Z

UI Components

← Older revision		Revision as of 10:28, 20 December 2023
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]

Unknown user: /* UI Components */

2023-12-15T02:09:26Z

UI Components

← Older revision		Revision as of 10:09, 15 December 2023
Line 16:		Line 16:
	* drag & drop [繁] 拖曳、拖移、拖拉 [簡] 拖拽, 拖放		* drag & drop [繁] 拖曳、拖移、拖拉 [簡] 拖拽, 拖放
	* dropdown, drop down menus [繁體] 下拉選單 [簡體] 下拉菜單		* dropdown, drop down menus [繁體] 下拉選單 [簡體] 下拉菜單

	* [https://en.wikipedia.org/wiki/Hero_image Hero image] [繁] 主頁橫幅 [簡體] 主页横幅		* [https://en.wikipedia.org/wiki/Hero_image Hero image] [繁] 主頁橫幅 [簡體] 主页横幅

Line 22:		Line 23:
	* Infinite scrolling [繁體] 無限滾動 [簡體] 无限滚动。當使用者往下捲動瀏覽器，網頁會自動載入內容<ref>[https://www.nngroup.com/articles/infinite-scrolling/ Infinite Scrolling is Not for Every Website]</ref>。相關資料：[https://diaogray.medium.com/%E4%BD%A0%E7%9A%84%E7%94%A2%E5%93%81%E6%AD%A3%E5%9C%A8%E7%84%A1%E9%99%90%E6%BB%BE%E5%8B%95-infinite-scrolling-%E5%97%8E-696cd2279a5d 你的產品正在無限滾動 Infinite scrolling 嗎？. 我先介紹一下我自己，我是Ayden，目前在軟體產業擔任Product… \| by Ayden Tiao \| Jun, 2021 \| Medium]		* Infinite scrolling [繁體] 無限滾動 [簡體] 无限滚动。當使用者往下捲動瀏覽器，網頁會自動載入內容<ref>[https://www.nngroup.com/articles/infinite-scrolling/ Infinite Scrolling is Not for Every Website]</ref>。相關資料：[https://diaogray.medium.com/%E4%BD%A0%E7%9A%84%E7%94%A2%E5%93%81%E6%AD%A3%E5%9C%A8%E7%84%A1%E9%99%90%E6%BB%BE%E5%8B%95-infinite-scrolling-%E5%97%8E-696cd2279a5d 你的產品正在無限滾動 Infinite scrolling 嗎？. 我先介紹一下我自己，我是Ayden，目前在軟體產業擔任Product… \| by Ayden Tiao \| Jun, 2021 \| Medium]
	* input box, text field [繁體] 文字輸入欄位、輸入框 [簡體] 文本输入框		* input box, text field [繁體] 文字輸入欄位、輸入框 [簡體] 文本输入框

			* Landing page animation 進入網頁時的開頭動畫。相關網頁：Top 20 Animated Landing Page Examples You Need To See https://www.svgator.com/blog/animated-landing-pages-examples/ 。相關詞彙：page enter transition animation 不同頁面切換、Animated Entrances 或 Entrance Animation：會夾雜像 loading 的 GIF 圖檔。


	* lightbox [繁體] 光箱 (特效) [簡體] 暗箱 (特效)。透過降低周遭元素對比或變暗，凸顯想要呈現的資訊。sample: [http://lokeshdhakar.com/projects/lightbox2/ Lightbox] (MIT license), [https://dimsemenov.com/plugins/magnific-popup/ Magnific Popup: Responsive jQuery Lightbox Plugin] (MIT license)		* lightbox [繁體] 光箱 (特效) [簡體] 暗箱 (特效)。透過降低周遭元素對比或變暗，凸顯想要呈現的資訊。sample: [http://lokeshdhakar.com/projects/lightbox2/ Lightbox] (MIT license), [https://dimsemenov.com/plugins/magnific-popup/ Magnific Popup: Responsive jQuery Lightbox Plugin] (MIT license)
	* mandatory / required (欄位)必填		* mandatory / required (欄位)必填

Unknown user: /* UI Components */

2023-08-18T07:33:01Z

UI Components

← Older revision		Revision as of 15:33, 18 August 2023
Line 8:		Line 8:
	* alert box [繁體] 警告視窗、警告對話視窗、警告彈跳視窗、警告彈出視窗 [簡體] 示警框。相關資料：[https://developer.mozilla.org/en-US/docs/Web/API/Window/alert Window.alert() - Web APIs \| MDN]、[https://sweetalert2.github.io/ SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes]		* alert box [繁體] 警告視窗、警告對話視窗、警告彈跳視窗、警告彈出視窗 [簡體] 示警框。相關資料：[https://developer.mozilla.org/en-US/docs/Web/API/Window/alert Window.alert() - Web APIs \| MDN]、[https://sweetalert2.github.io/ SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes]

	* carousel 又稱 cover flow<ref>[http://en.wikipedia.org/wiki/Cover_Flow Cover Flow - Wikipedia, the free encyclopedia]</ref>, touch slider, touch carousel [繁體] ~~3D封面、幻燈片效果、輪播、輪播圖卡~~<ref>[https://www.facebook.com/business/help/1114358518575630 Facebook 輪播廣告的設計規格 \| Facebook 廣告使用說明]</ref> [簡體] 幻灯效果、轮播效果。 Example: [https://www.tripwiremagazine.com/jquery-carousel/ 15+ Best jQuery Carousel Plugins To Impress Your Visitors in 2017 – Tripwire Magazine]		* carousel 又稱 cover flow<ref>[http://en.wikipedia.org/wiki/Cover_Flow Cover Flow - Wikipedia, the free encyclopedia]</ref>, touch slider, touch carousel [繁體] 3D封面、幻燈片效果、輪播、首頁輪播、輪播圖卡<ref>[https://www.facebook.com/business/help/1114358518575630 Facebook 輪播廣告的設計規格 \| Facebook 廣告使用說明]</ref> [簡體] 幻灯效果、轮播效果。 Example: [https://www.tripwiremagazine.com/jquery-carousel/ 15+ Best jQuery Carousel Plugins To Impress Your Visitors in 2017 – Tripwire Magazine]

	* chained menu 動態選單(動態下拉選單、動態二階選單、動態多階選單) 或稱 chained select menu, double combo menu, select cascade, dynamic dropdowns, dropdown dependent。例如使用動態下拉選單，提供使用者選取地址的縣市、行政區域兩個欄位。當使用者選好縣市下拉選單後，行政區域的下拉選單則依據使用者所在縣市連動，只顯示該縣市的行政區域。好處是減少下拉選單的項目數量，以及避免使用者選擇到矛盾的行政區域資料。		* chained menu 動態選單(動態下拉選單、動態二階選單、動態多階選單) 或稱 chained select menu, double combo menu, select cascade, dynamic dropdowns, dropdown dependent。例如使用動態下拉選單，提供使用者選取地址的縣市、行政區域兩個欄位。當使用者選好縣市下拉選單後，行政區域的下拉選單則依據使用者所在縣市連動，只顯示該縣市的行政區域。好處是減少下拉選單的項目數量，以及避免使用者選擇到矛盾的行政區域資料。

Unknown user: /* Further readings */

2023-05-08T08:21:39Z

Unknown user: /* UI Components */

2023-05-08T08:20:58Z

UI Components

← Older revision		Revision as of 16:20, 8 May 2023
Line 47:		Line 47:

	* slider, range slider, range inputs [繁體] 滑桿、拉桿、滑動桿 [簡體] 滑块、滑动条。例如電腦調整音量的滑桿。 sample: [http://www.uiparade.com/skill-type/sliders/ Sliders \| User Interface Design Inspiration]、[https://jqueryui.com/slider/#default Slider \| jQuery UI], [https://developers.google.com/chart/interactive/docs/gallery/controls Controls and Dashboards \| Charts \| Google Developers], [http://danielstern.ca/range.css/#/ range.css - generate styles for your HTML5 range inputs]		* slider, range slider, range inputs [繁體] 滑桿、拉桿、滑動桿 [簡體] 滑块、滑动条。例如電腦調整音量的滑桿。 sample: [http://www.uiparade.com/skill-type/sliders/ Sliders \| User Interface Design Inspiration]、[https://jqueryui.com/slider/#default Slider \| jQuery UI], [https://developers.google.com/chart/interactive/docs/gallery/controls Controls and Dashboards \| Charts \| Google Developers], [http://danielstern.ca/range.css/#/ range.css - generate styles for your HTML5 range inputs]

			* snackbars [繁體] 簡短通知、[簡體] 简短信息、消息条。在螢幕底部顯示簡短的通知。Example: [https://m2.material.io/components/snackbars Snackbars - Material Design]

	* spinner		* spinner

Unknown user: /* Further readings */

2023-05-04T15:51:02Z

Unknown user: /* Further readings */

2023-05-03T02:18:05Z

← Older revision		Revision as of 16:21, 8 May 2023
Line 242:		Line 242:
	* [https://www.appsmith.com/widgets Drag, Drop & Build Faster With Widgets - Appsmith]		* [https://www.appsmith.com/widgets Drag, Drop & Build Faster With Widgets - Appsmith]
	* [https://www.uxlibrary.org/explore/ui-design/ui-patterns-and-inspiration UI Patterns & Inspiration - UX Library]		* [https://www.uxlibrary.org/explore/ui-design/ui-patterns-and-inspiration UI Patterns & Inspiration - UX Library]
			* [https://mobbin.com/browse/ios/apps Browse iOS Apps \| Mobbin] iOS, Android, Web APP

	{{Template:Build a website}}		{{Template:Build a website}}

	[[Category:Design]] [[Category:Glossary]]		[[Category:Design]] [[Category:Glossary]]

← Older revision		Revision as of 23:51, 4 May 2023
Line 239:		Line 239:
	* [https://ionicframework.com/docs/components UI Components \| User Interface Application Building Components]		* [https://ionicframework.com/docs/components UI Components \| User Interface Application Building Components]
	* [https://www.appsmith.com/widgets Drag, Drop & Build Faster With Widgets - Appsmith]		* [https://www.appsmith.com/widgets Drag, Drop & Build Faster With Widgets - Appsmith]
			* [https://www.uxlibrary.org/explore/ui-design/ui-patterns-and-inspiration UI Patterns & Inspiration - UX Library]


	{{Template:Build a website}}		{{Template:Build a website}}

	[[Category:Design]] [[Category:Glossary]]		[[Category:Design]] [[Category:Glossary]]

← Older revision		Revision as of 10:18, 3 May 2023
Line 238:		Line 238:
	* [https://csslayout.io/ A collection of popular layouts and patterns made with CSS - CSS Layout]		* [https://csslayout.io/ A collection of popular layouts and patterns made with CSS - CSS Layout]
	* [https://ionicframework.com/docs/components UI Components \| User Interface Application Building Components]		* [https://ionicframework.com/docs/components UI Components \| User Interface Application Building Components]
			* [https://www.appsmith.com/widgets Drag, Drop & Build Faster With Widgets - Appsmith]

	{{Template:Build a website}}		{{Template:Build a website}}

	[[Category:Design]] [[Category:Glossary]]		[[Category:Design]] [[Category:Glossary]]