Web design glossary: Difference between revisions

(14 intermediate revisions by the same user not shown)

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]

* 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。例如使用動態下拉選單，提供使用者選取地址的縣市、行政區域兩個欄位。當使用者選好縣市下拉選單後，行政區域的下拉選單則依據使用者所在縣市連動，只顯示該縣市的行政區域。好處是減少下拉選單的項目數量，以及避免使用者選擇到矛盾的行政區域資料。

* checkbox [繁體] 複選框、核取方塊 [簡體] 复选框

* date picker, calendar picker 日期選擇器 ex: [http://jqueryui.com/datepicker/ jQuery Datepicker], [https://vuejsexamples.com/tag/calendar/ Calendar - Vue.js Examples]

* date picker, calendar picker 日期選擇器 ex: [http://jqueryui.com/datepicker/ jQuery Datepicker], [https://vuejsexamples.com/tag/calendar/ Calendar - Vue.js Examples] & [https://bootstrap-datepicker.readthedocs.io/en/latest/ bootstrap-datepicker]

* drag & drop [繁] 拖曳、拖移、拖拉 [簡] 拖拽, 拖放

* dropdown, drop down menus [繁體] 下拉選單 [簡體] 下拉菜單

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

Line 21:

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]

* 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)

* mandatory / required (欄位)必填

Line 36:

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>: 提供使用者輸入值的範例。使用者點擊輸入欄位時，提示文字會自動消失。

*# 版面區塊 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]

Line 46:

Line 53:

* 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

Line 61:

Line 70:

* 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]

** 相關概念：onboarding

* video slider 影片選單;

Line 93:

Line 103:

* 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]

* Heuristic evalution [繁體] 經驗法則、啟發式評估、啟發式原則。

* 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

Line 107:

Line 115:

* POV, Point of View [繁體] 觀點、設計觀點、[簡體] 观点。其他學科領域: [https://en.wikipedia.org/wiki/Point_of_view Point of view - Wikipedia] 相關詞彙: HMW

* User Story Mapping [繁體] ~~使用者故事對照、使用者故事地圖，~~[簡體] 用户故事地图。<ref>[https://www.books.com.tw/products/0010712916 博客來-使用者故事對照：User Story Mapping]</ref><ref>[https://www.nngroup.com/articles/user-story-mapping/ Mapping User Stories in Agile]</ref>

* User Story [繁體] 使用者故事、[簡體] 用户故事：[https://medium.com/3pm-lab/3-use-cases-for-writing-effective-user-stories-cd42625fef53 產品管理流程中，使用者故事（User Story）常見的三種使用情境 | by Anne Hsiao | 3PM LAB 產品三眼怪實驗室 | Medium]

* User Story Mapping [繁體] 使用者故事對照、使用者故事地圖、[簡體] 用户故事地图。<ref>[https://www.books.com.tw/products/0010712916 博客來-使用者故事對照：User Story Mapping]</ref><ref>[https://www.nngroup.com/articles/user-story-mapping/ Mapping User Stories in Agile]</ref>

* UX, [https://en.wikipedia.org/wiki/User_experience User experience] [繁體] [https://zh.wikipedia.org/wiki/%E4%BD%BF%E7%94%A8%E8%80%85%E7%B6%93%E9%A9%97 使用者經驗]、[簡體] 用户体验。

Line 173:

Line 183:

(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 (理想狀態)

# Empty State (空白狀態)

Line 221:

Line 235:

~~further reading~~

== Further readings ==

* {{Gd}} [https://thecosignstudio.github.io/process/ 專業人士的設計流程] ([https://github.com/thecosignstudio/process github 專案])。原文: [https://www.netguru.co/design-process Design Process for Pros - Best design practices in one place] ([https://github.com/netguru/design-process github 專案]) {{access | date =2018-11-10}}

* [http://en.wikipedia.org/wiki/Category:GUI_widgets Category:GUI widgets - Wikipedia, the free encyclopedia]

Line 233:

Line 247:

* [https://www.imaginarycloud.com/blog/web-design-and-development/ Web Design and Development: what's the difference?] {{access | date = 2021-05-01}}

* [https://uxdesign.cc/why-do-we-call-it-breadcrumbs-diving-into-the-history-of-ui-components-b35b813733e4 Why do we call it breadcrumbs? Diving into the history of UI components | by Megan Ng | Jun, 2022 | UX Collective]

介面元素參考

* [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://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://mobbin.com/browse/ios/apps Browse iOS Apps | Mobbin] iOS, Android, Web APP

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

@@ 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]
-* 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。例如使用動態下拉選單，提供使用者選取地址的縣市、行政區域兩個欄位。當使用者選好縣市下拉選單後，行政區域的下拉選單則依據使用者所在縣市連動，只顯示該縣市的行政區域。好處是減少下拉選單的項目數量，以及避免使用者選擇到矛盾的行政區域資料。
 * checkbox [繁體] 複選框、核取方塊 [簡體] 复选框
-* date picker, calendar picker 日期選擇器 ex: [http://jqueryui.com/datepicker/ jQuery Datepicker], [https://vuejsexamples.com/tag/calendar/ Calendar - Vue.js Examples]
+* date picker, calendar picker 日期選擇器 ex: [http://jqueryui.com/datepicker/ jQuery Datepicker], [https://vuejsexamples.com/tag/calendar/ Calendar - Vue.js Examples] & [https://bootstrap-datepicker.readthedocs.io/en/latest/ bootstrap-datepicker]
 * drag & drop [繁] 拖曳、拖移、拖拉 [簡] 拖拽, 拖放
 * dropdown, drop down menus [繁體] 下拉選單 [簡體] 下拉菜單
 * [https://en.wikipedia.org/wiki/Hero_image Hero image] [繁] 主頁橫幅 [簡體] 主页横幅
@@ Line 21: / 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]
 * 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)
 * mandatory / required (欄位)必填
@@ Line 36: / 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>: 提供使用者輸入值的範例。使用者點擊輸入欄位時，提示文字會自動消失。
 *# 版面區塊 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]
@@ Line 46: / Line 53: @@
 * 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
@@ Line 61: / Line 70: @@
 * 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]
+** 相關概念：onboarding
 * video slider 影片選單;
@@ Line 93: / Line 103: @@
 * 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]
-* Heuristic evalution [繁體] 經驗法則、啟發式評估、啟發式原則。
 * 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
@@ Line 107: / Line 115: @@
 * POV, Point of View [繁體] 觀點、設計觀點、[簡體] 观点。其他學科領域: [https://en.wikipedia.org/wiki/Point_of_view Point of view - Wikipedia] 相關詞彙: HMW
-* User Story Mapping [繁體] 使用者故事對照、使用者故事地圖，[簡體] 用户故事地图。<ref>[https://www.books.com.tw/products/0010712916 博客來-使用者故事對照：User Story Mapping]</ref><ref>[https://www.nngroup.com/articles/user-story-mapping/ Mapping User Stories in Agile]</ref>
+* User Story [繁體] 使用者故事、[簡體] 用户故事：[https://medium.com/3pm-lab/3-use-cases-for-writing-effective-user-stories-cd42625fef53 產品管理流程中，使用者故事（User Story）常見的三種使用情境 | by Anne Hsiao | 3PM LAB 產品三眼怪實驗室 | Medium]
+* User Story Mapping [繁體] 使用者故事對照、使用者故事地圖、[簡體] 用户故事地图。<ref>[https://www.books.com.tw/products/0010712916 博客來-使用者故事對照：User Story Mapping]</ref><ref>[https://www.nngroup.com/articles/user-story-mapping/ Mapping User Stories in Agile]</ref>
 * UX, [https://en.wikipedia.org/wiki/User_experience User experience] [繁體] [https://zh.wikipedia.org/wiki/%E4%BD%BF%E7%94%A8%E8%80%85%E7%B6%93%E9%A9%97 使用者經驗]、[簡體] 用户体验。
@@ Line 173: / Line 183: @@
 (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 (理想狀態)
 # Empty State (空白狀態)
@@ Line 221: / Line 235: @@
 <references/>
-further reading
+== Further readings ==
 * {{Gd}} [https://thecosignstudio.github.io/process/ 專業人士的設計流程] ([https://github.com/thecosignstudio/process github 專案])。原文: [https://www.netguru.co/design-process Design Process for Pros - Best design practices in one place] ([https://github.com/netguru/design-process github 專案]) {{access | date =2018-11-10}}
 * [http://en.wikipedia.org/wiki/Category:GUI_widgets Category:GUI widgets - Wikipedia, the free encyclopedia]
@@ Line 233: / Line 247: @@
 * [https://www.imaginarycloud.com/blog/web-design-and-development/ Web Design and Development: what's the difference?] {{access | date = 2021-05-01}}
 * [https://uxdesign.cc/why-do-we-call-it-breadcrumbs-diving-into-the-history-of-ui-components-b35b813733e4 Why do we call it breadcrumbs? Diving into the history of UI components | by Megan Ng | Jun, 2022 | UX Collective]
+介面元素參考
+* [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://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://mobbin.com/browse/ios/apps Browse iOS Apps | Mobbin] iOS, Android, Web APP
 {{Template:Build a website}}
 [[Category:Design]] [[Category:Glossary]]