Web design glossary: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
 
(57 intermediate revisions by the same user not shown)
Line 3: Line 3:
== UI Components ==
== UI Components ==
使用者介面元件與互動特效、表單 (html form) 相關詞彙
使用者介面元件與互動特效、表單 (html form) 相關詞彙
* accordion 折疊。為了在小的裝置螢幕上，顯示主要的資訊區塊時，會將其他區域折疊。 example: [http://jqueryui.com/accordion/ Accordion | jQuery UI], [http://adobe.github.io/Spry/samples/accordion/AccordionSample2.html Creating an Accordion with Spry Data]
* accordion [繁體] 折疊、摺疊選單 [簡體] 折叠、折叠面板。為了在小的裝置螢幕上，顯示主要的資訊區塊時，會將其他區域折疊。 example: [http://jqueryui.com/accordion/ Accordion | jQuery UI], [http://adobe.github.io/Spry/samples/accordion/AccordionSample2.html Creating an Accordion with Spry Data]
* [https://en.wikipedia.org/wiki/Breadcrumb_(navigation) breadcrumbs], breadcrumb trail [繁體] 麵包屑(導覽) [簡體] 面包屑导航。說明: [http://webusabilitysos.blogspot.tw/2007/04/breadcrumbs.html 資訊結構與網站設計: 導覽路徑標示（Breadcrumbs）] {{access | date = 2017-03-21}}
* [https://en.wikipedia.org/wiki/Breadcrumb_(navigation) breadcrumbs], breadcrumb trail [繁體] 麵包屑(導覽) [簡體] 面包屑导航。說明: [http://webusabilitysos.blogspot.tw/2007/04/breadcrumbs.html 資訊結構與網站設計: 導覽路徑標示（Breadcrumbs）] {{access | date = 2017-03-21}}
* carousel 又稱 cover flow<ref>[http://en.wikipedia.org/wiki/Cover_Flow Cover Flow - Wikipedia, the free encyclopedia]</ref>, touch slider, touch carousel [繁體] 3D封面、幻燈片效果 [簡體] 幻灯效果。 Example: [http://www.tripwiremagazine.com/2012/12/jquery-carousel.html 55 Best jQuery Carousel Plugins]
 
* chained menu 動態選單(動態二階選單、動態多階選單) 或稱 chained select menu, double combo menu, select cascade, dynamic dropdowns, dropdown dependent
* 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]
 
* chained menu 動態選單(動態下拉選單、動態二階選單、動態多階選單) 或稱 chained select menu, double combo menu, select cascade, dynamic dropdowns, dropdown dependent。例如使用動態下拉選單，提供使用者選取地址的縣市、行政區域兩個欄位。當使用者選好縣市下拉選單後，行政區域的下拉選單則依據使用者所在縣市連動，只顯示該縣市的行政區域。好處是減少下拉選單的項目數量，以及避免使用者選擇到矛盾的行政區域資料。
* checkbox [繁體] 複選框、核取方塊 [簡體] 复选框
* 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 [繁] 拖曳、拖移、拖拉 [簡] 拖拽, 拖放
* drag & drop [繁] 拖曳、拖移、拖拉 [簡] 拖拽, 拖放
* dropdown, drop down menus [繁體] 下拉選單 [簡體] 下拉菜單
* dropdown, drop down menus [繁體] 下拉選單 [簡體] 下拉菜單
* [https://en.wikipedia.org/wiki/Hero_image Hero image] [繁] 主頁橫幅 [簡體] 主页横幅
* image map [繁] 影像地圖。網頁內的影像，「該影像具有超鏈接的『熱點』可鏈接到其他資訊」(參考資料：[https://terms.naer.edu.tw/detail/1280001/ 國家教育研究院)
* 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 [繁體] 文字輸入欄位、輸入框 [簡體] 文本输入框
* lightbox [繁體] 光箱 (特效) [簡體] 暗箱 (特效)。透過降低周遭元素對比或變暗，凸顯想要呈現的資訊。sample: [http://lokeshdhakar.com/projects/lightbox2/ Lightbox], [http://fancybox.net/ Fancybox], [http://malsup.com/jquery/block/ jQuery BlockUI Plugin]
 
* 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 (欄位)必填  
* mandatory / required (欄位)必填  
* menu [繁體] 選單 [簡體] 菜单
* menu [繁體] 選單 [簡體] 菜单
Line 19: Line 34:


* pagination [繁體] 分頁、頁碼 [簡體] 分页、页码
* pagination [繁體] 分頁、頁碼 [簡體] 分页、页码
* Parallax scrolling [繁體] (垂直) 視差捲動 [簡體] [https://baike.baidu.com/item/%E8%A7%86%E5%B7%AE%E6%BB%9A%E5%8A%A8 视差滚动]、视差迁移转变。 Example: [https://www.awwwards.com/30-great-websites-with-parallax-scrolling.html 30 Great Websites with Parallax Scrolling]
* Parallax scrolling [繁體] (垂直) 視差捲動 [簡體] [https://baike.baidu.com/item/%E8%A7%86%E5%B7%AE%E6%BB%9A%E5%8A%A8 视差滚动]、视差迁移转变。 Example: [https://www.awwwards.com/30-great-websites-with-parallax-scrolling.html 30 Great Websites with Parallax Scrolling]
* Pinterest-like layout, Pinterest-style layout, [https://www.sitepoint.com/understanding-masonry-layout/ Masonry layout], [https://getuikit.com/v2/docs/grid-js.html Dynamic grid layout] [繁體] 瀑布流、瀑布流排版 [簡體] 瀑布流、瀑布流式布局<ref>[http://blog.lindsayrain.com/2013/02/pinterest-like-web-design.html Lindsay is observing.....: 所謂的 Pinterest 佈局式網站]</ref>
* Pinterest-like layout, Pinterest-style layout, [https://www.sitepoint.com/understanding-masonry-layout/ Masonry layout], [https://getuikit.com/v2/docs/grid-js.html Dynamic grid layout] [繁體] 瀑布流、瀑布流排版 [簡體] 瀑布流、瀑布流式布局<ref>[http://blog.lindsayrain.com/2013/02/pinterest-like-web-design.html Lindsay is observing.....: 所謂的 Pinterest 佈局式網站]</ref>
* placefolder 意思可能有二:  
 
*# 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 [繁體] 佔位符 [簡體] 占位符。意思可能有二:  
*# 版面區塊 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}], [http://placehold.it/ Placehold.it - Quick and simple image placeholders], [http://fakeimg.pl/ Fake images please?]
*# 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]
* progress bars [繁體] 進度條 [簡體] 进度条 example: [https://jqueryui.com/progressbar/ Progressbar | jQuery UI]
Line 30: Line 49:


* scrollbar [繁體] 捲軸、控制捲軸 [簡體] 滚动条。sample: [http://jscrollpane.kelvinluck.com/ jScrollPane - cross browser styleable scrollbars with jQuery and CSS]
* scrollbar [繁體] 捲軸、控制捲軸 [簡體] 滚动条。sample: [http://jscrollpane.kelvinluck.com/ jScrollPane - cross browser styleable scrollbars with jQuery and CSS]
* side drawer, side menu drawer, navigation drawer, side navigation menu [繁體] 側邊滑動選單 [簡體] 抽屉式导航、侧滑的抽屉效果的菜单 example: [https://material.io/guidelines/patterns/navigation-drawer.html Navigation drawer - Patterns - Material Design], [https://www.w3schools.com/howto/howto_js_sidenav.asp How To Create a Side Navigation Menu], [https://github.com/jfeinstein10/SlidingMenu jfeinstein10/SlidingMenu: An Android library that allows you to easily create applications with slide-in menus. You may use it in your Android apps provided that you cite this project and include the license in your app. Thanks!]
* side drawer, side menu drawer, navigation drawer, side navigation menu [繁體] 側邊滑動選單 [簡體] 抽屉式导航、侧滑的抽屉效果的菜单 example: [https://material.io/guidelines/patterns/navigation-drawer.html Navigation drawer - Patterns - Material Design], [https://www.w3schools.com/howto/howto_js_sidenav.asp How To Create a Side Navigation Menu], [https://github.com/jfeinstein10/SlidingMenu jfeinstein10/SlidingMenu: An Android library that allows you to easily create applications with slide-in menus. You may use it in your Android apps provided that you cite this project and include the license in your app. Thanks!]
* slider [繁體] 滑桿、拉桿 [簡體] 滑块、滑动条。例如電腦調整音量的滑桿。 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]
 
* 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  
** [繁體] 下拉框、下拉選單、連動式下拉選單 [簡體] 旋转器。原本下拉選單 (select box) 外，可利用上下鍵調整項目數值。 example: [https://jqueryui.com/spinner/ Spinner | jQuery UI]
** [繁體] 下拉框、下拉選單、連動式下拉選單 [簡體] 旋转器。原本下拉選單 (select box) 外，可利用上下鍵調整項目數值。 example: [https://jqueryui.com/spinner/ Spinner | jQuery UI]
** [繁體] 載入動畫圖示、等待動畫圖示<ref>[http://blog.infographics.tw/2015/05/build-gif-loader-with-loading-io/ 只要十秒鐘，使用 Loading.io 製作 Loading 圖示]</ref>、 [簡體] 旋转加载的动画图标。example: [http://ionicframework.com/docs/api/directive/ionSpinner/ ion-spinner - Directive in module ionic - Ionic Framework]
** [繁體] 載入動畫圖示、等待動畫圖示<ref>[http://blog.infographics.tw/2015/05/build-gif-loader-with-loading-io/ 只要十秒鐘，使用 Loading.io 製作 Loading 圖示]</ref>、 [簡體] 旋转加载的动画图标、旋转特效。example: [http://ionicframework.com/docs/api/directive/ionSpinner/ ion-spinner - Directive in module ionic - Ionic Framework]
 
* sticky bar [繁體] 固定橫欄 [簡體] 固定导航条。固定出現在瀏覽器上方或下方位置的導航區塊。<ref>[https://unbounce.com/product/features/sticky-bars/ Sticky bars: More Conversions, Less Intrusion | Unbounce]</ref>
 
* thumbnails [繁體] 縮圖 [簡體] 缩略图


* thumbnails 縮圖
* tab [繁體] 標籤 [簡體] 标签页、选项卡 sample: [https://jqueryui.com/tabs/ Tabs | jQuery UI]
* tab [繁體] 標籤 [簡體] 标签页、选项卡 sample: [https://jqueryui.com/tabs/ Tabs | jQuery UI]
* tooltip [繁體] 提示文字、彈出式提示框 [簡體] 提示文本。滑鼠游標移到元素或連結上方時，顯示的簡短說明文字。
 
* tooltip [繁體] 提示文字、彈出式提示框 [簡體] 提示文本、提示冒泡。滑鼠游標移到元素或連結上方時，顯示的簡短說明文字。
 
* 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 47: Line 77:
* highlight [繁體] 凸顯 [簡體] 高亮
* highlight [繁體] 凸顯 [簡體] 高亮
** 相關字: syntax highlight [繁體] 凸顯語法、凸顯程式碼語法 [簡體] 代码高亮、源码语法高亮
** 相關字: syntax highlight [繁體] 凸顯語法、凸顯程式碼語法 [簡體] 代码高亮、源码语法高亮
* Landing page (LP) [繁體] 網站到達頁、著陸頁 [簡體] 着陆页、登陆页。意思是點選搜尋引擎結果、促銷活動、促銷 email、線上廣告連結到達的頁面，就稱作「網站到達頁」 (資料來源：[https://en.wikipedia.org/wiki/Landing_page 維基百科])。並非指一頁式網站。網站 example: [https://lp.webdesignclip.com/ Web Design Clip (L)  ランディングページWebデザインクリップ]


* Lorem Ipsum 假文，「讓設計師拿來做為填充版面的內容物」引用自[http://more.handlino.com/ MoreText.js]。假文產生器:  
* Lorem Ipsum 假文，「讓設計師拿來做為填充版面的內容物」引用自[http://more.handlino.com/ MoreText.js]。假文產生器:  
** {{Gd}}[http://more.handlino.com/ MoreText.js],  
** {{Gd}}[http://more.handlino.com/ MoreText.js],  
** {{Gd}} [https://www.lists.design/ Real content for all your designs - Lists] 產生接近真實的假資料 {{access | date = 2018-04-12}}
** {{Gd}} [https://www.lists.design/ Real content for all your designs - Lists] 產生接近真實的假資料 {{access | date = 2018-04-12}}
** [http://www.richyli.com/tool/loremipsum/ 亂數假文產生器],
** more tools on [[Random content generator]]
** [http://www.lipsum.com/ Lipsum generator] 多國語言可以選擇，包含簡體中文 {{access | date = 2018-04-12}}
** [https://uinames.com/ uinames.com: Randomly Generate Fake Names] 隨機產生使用者個資的工具，包含姓名、性別、區域、電話、生日、email、信用卡、相片網址等資料。可使用 API 呼叫資料。教學: [https://free.com.tw/ui-names/ UI Names 隨機產生虛構的使用者個資，設計操作介面或開發者利器]


* progressive disclosure 漸進呈現。說明: [http://chuansong.me/n/1396181 渐进呈现-Progressive Disclosure -- 用户体验那些事 -- 传送门]、[https://www.nngroup.com/articles/progressive-disclosure/ Progressive Disclosure] {{access | date = 2016-03-11}}
* progressive disclosure 漸進呈現。說明: [http://chuansong.me/n/1396181 渐进呈现-Progressive Disclosure -- 用户体验那些事 -- 传送门]、[https://www.nngroup.com/articles/progressive-disclosure/ Progressive Disclosure] {{access | date = 2016-03-11}}
* Rich text [繁體] 富文字 [簡體] 富文本
* Rich text [繁體] 富文字 [簡體] 富文本
* Rich text editor [繁體] 網頁編輯器、所見即所得 (<abbr title="What You See Is What You Get">WYSIWYG</abbr>) 的編輯器 [簡體] 富文本編輯器<ref>[http://baike.baidu.com/item/%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8 富文本编辑器_百度百科]</ref>: 可以設定文字大小、顏色等樣式、插入圖片等素材的線上編輯器。sample: [http://en.wikipedia.org/wiki/TinyMCE TinyMCE], [http://en.wikipedia.org/wiki/CKEditor CKEditor], [https://alex-d.github.io/Trumbowyg/ Trumbowyg]。
* Rich text editor [繁體] 網頁編輯器、所見即所得 (<abbr title="What You See Is What You Get">WYSIWYG</abbr>) 的編輯器 [簡體] 富文本編輯器<ref>[http://baike.baidu.com/item/%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8 富文本编辑器_百度百科]</ref>: 可以設定文字大小、顏色等樣式、插入圖片等素材的線上編輯器。sample: [http://en.wikipedia.org/wiki/TinyMCE TinyMCE], [http://en.wikipedia.org/wiki/CKEditor CKEditor], [https://alex-d.github.io/Trumbowyg/ Trumbowyg]。


== 資料結構 ==
== 資料結構 ==
[https://en.wikipedia.org/wiki/Database_schema Database schema]
[https://en.wikipedia.org/wiki/Database_schema Database schema]
* [[Create database schema document]]
* [[Create database schema document]]
* ER圖 (entity-relationship diagram)
* ER圖、實體關係圖 (entity-relationship diagram)


== 使用研究 / 方法論 ==
== 使用研究 / 方法論 ==
* [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]


* 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]
Line 74: Line 103:
* Design Thinking [https://zh.wikipedia.org/zh-tw/%E8%A8%AD%E8%A8%88%E6%80%9D%E8%80%83 設計思考]，或稱設計思維。
* 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]


Line 85: Line 114:


* POV, Point of View [繁體] 觀點、設計觀點、[簡體] 观点。其他學科領域: [https://en.wikipedia.org/wiki/Point_of_view Point of view - Wikipedia] 相關詞彙: HMW
* POV, Point of View [繁體] 觀點、設計觀點、[簡體] 观点。其他學科領域: [https://en.wikipedia.org/wiki/Point_of_view Point of view - Wikipedia] 相關詞彙: HMW
* 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 使用者經驗]、[簡體] 用户体验。
* 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 97: Line 130:


* [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 以使用者為中心的設計]
* Competitive Analysis：[繁體] 競爭對手分析、競爭分析、競品分析、[簡體] 竞品分析
** 範例：[http://api.woshipm.com/search/list.html?key=%E7%AB%9E%E5%93%81%E5%88%86%E6%9E%90 人人都是产品经理 | 产品经理、产品爱好者学习交流平台]


== 產品規格文件 / 不同階段設計文件 ==
== 產品規格文件 / 不同階段設計文件 ==
Line 107: Line 143:
* 服務建議書或服務企劃書(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 範本]。由接案單位撰寫。
* 服務建議書或服務企劃書(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 範本]。由接案單位撰寫。


[[Functional map | 功能地圖, Functional map]]
* 將使用者需求，轉換成功能地圖


草稿、手繪 (sketching)、產品設計手繪 (product design sketching)
草稿、手繪 (sketching)、產品設計手繪 (product design sketching)
Line 113: Line 151:
Wireframe [繁體] 線框圖、框線稿、線稿; [簡體] 线框图。「線稿又稱頁面示意圖 (page schematic) 或螢幕藍圖 (screen blueprint)。以網站線稿為例，視覺化方式呈現網站的『骨骼圖』。線稿目的是說明如何配置網站元件，以符合特定目的。」(資料來源: [https://en.wikipedia.org/wiki/Website_wireframe Wikipedia])
Wireframe [繁體] 線框圖、框線稿、線稿; [簡體] 线框图。「線稿又稱頁面示意圖 (page schematic) 或螢幕藍圖 (screen blueprint)。以網站線稿為例，視覺化方式呈現網站的『骨骼圖』。線稿目的是說明如何配置網站元件，以符合特定目的。」(資料來源: [https://en.wikipedia.org/wiki/Website_wireframe Wikipedia])
* 功能地圖 (Functional Map): [http://blog.akanelee.me/posts/168560-functional-map/ 初學者的 Functional Map · 嫁給 RD 的 UI Designer]
* 功能地圖 (Functional Map): [http://blog.akanelee.me/posts/168560-functional-map/ 初學者的 Functional Map · 嫁給 RD 的 UI Designer]
* 使用者流程圖、流程圖 (Flow chart):  
* 使用者流程圖 (User Flow Diagram)、[https://zh.wikipedia.org/zh-tw/%E6%B5%81%E7%A8%8B%E5%9B%BE 流程圖] (Flow chart, Logicflow):  
** [https://free.com.tw/flow-chart-symbols-and-usage/ 流程圖（Flow Chart）常用符號說明]
** [https://free.com.tw/flow-chart-symbols-and-usage/ 流程圖（Flow Chart）常用符號說明]
** [http://blog.akanelee.me/posts/276159-flow-chart-and-ui-flow/ Flow Chart 和 UI Flow · 嫁給 RD 的 UI Designer]
** [http://blog.akanelee.me/posts/276159-flow-chart-and-ui-flow/ Flow Chart 和 UI Flow · 嫁給 RD 的 UI Designer]
Line 134: Line 172:
** [http://prototypingtools.design/ Pikatool: Compare Prototyping Tools] 比較 speed, fidelity, user testing, wireframing, collaboration
** [http://prototypingtools.design/ Pikatool: Compare Prototyping Tools] 比較 speed, fidelity, user testing, wireframing, collaboration


設計規範、視覺方針 ([https://en.wikipedia.org/wiki/Style_guide Style guide], Style guideline)、介面模式 (UI Pattern) ex:
設計系統 (Design System)、設計規範、視覺方針 ([https://en.wikipedia.org/wiki/Style_guide Style guide], Style guideline)、介面模式 (UI Pattern) ex:
* 範例: [https://playbook.cio.gov/designstandards/ U.S. Web Design Standards] 其他範例請見 [[I_need_inspiration#Style_guideline_.26_UI_patterns | Style guideline & UI patterns]]
* 範例: [https://playbook.cio.gov/designstandards/ U.S. Web Design Standards] 其他範例請見 [[I_need_inspiration#Style_guideline_.26_UI_patterns | Style guideline & UI patterns]]
* 教學:  
* 教學:  
Line 141: Line 179:
** Abby Chiu (2017). [https://medium.com/as-a-product-designer/design-system-practice-f460a60c5169 Design System Practice – As A Product Designer – Medium] {{access | date =2017-05-23}} "初次設計系統經驗分享"
** Abby Chiu (2017). [https://medium.com/as-a-product-designer/design-system-practice-f460a60c5169 Design System Practice – As A Product Designer – Medium] {{access | date =2017-05-23}} "初次設計系統經驗分享"


使用者驗收測試(User Acceptance Test, UAT)
* [[Software acceptance test plan]]


(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 (空白狀態)
Line 163: Line 207:
== 成長駭客 ==
== 成長駭客 ==
* [http://georgechang.im/startup-metrics-aarrr-model/ AARRR 模式]
* [http://georgechang.im/startup-metrics-aarrr-model/ AARRR 模式]
* App Store Optimization (ASO) 行動應用程式商店、軟體商店優化、應用商店優化<ref>[https://www.books.com.tw/products/0010802905 博客來-流量池：流量稍縱即逝，打造流量水庫，透過儲存、轉化、裂變，讓導購飆高、客源不絕、營運升級的行銷新思維]</ref>：增加「行動應用程式」 (APP) 在行動應用程式商店 (例如: iOS 上的 APP Store、Android 上的 Google Play<ref>[https://en.wikipedia.org/wiki/List_of_mobile_app_distribution_platforms List of mobile app distribution platforms - Wikipedia]</ref>) 可見度的程序<ref>[https://en.wikipedia.org/wiki/App_store_optimization App store optimization - Wikipedia]</ref>。詳: [https://cythilya.github.io/2014/12/22/aso-guideline/ App Store Optimization (ASO) Guideline | Summer。桑莫。夏天]。
** 相關頁面: [[Research_surveys#APP.E3.80.81.E8.A1.8C.E5.8B.95.E5.B8.82.E5.A0.B4.E7.9A.84.E8.AA.BF.E6.9F.A5.E7.A0.94.E7.A9.B6 | APP、行動市場的調查研究]]
* growth hack [繁體] 成長駭客、增長駭客 [簡體] 增长黑客。「新創公司發展的行銷方法，透過創意、分析式思考 (analytical thinking) 、衡量指標 (Performance metric) ，以提升產品銷售和服務曝光。」資料來源: [https://en.wikipedia.org/wiki/Growth_hacking 維基百科]
* growth hack [繁體] 成長駭客、增長駭客 [簡體] 增长黑客。「新創公司發展的行銷方法，透過創意、分析式思考 (analytical thinking) 、衡量指標 (Performance metric) ，以提升產品銷售和服務曝光。」資料來源: [https://en.wikipedia.org/wiki/Growth_hacking 維基百科]
* SEO [https://zh.wikipedia.org/wiki/%E6%90%9C%E5%B0%8B%E5%BC%95%E6%93%8E%E6%9C%80%E4%BD%B3%E5%8C%96 搜尋引擎最佳化] (search engine optimization)
* (user) onboarding: 使用者第一次使用網站服務
* (user) onboarding: 使用者第一次使用網站服務


== 其他 ==
== 其他 ==
* [https://en.wikipedia.org/wiki/Slicing_(interface_design) HTML slicing], PSD to HTML Slicing [繁體] 切版<ref>[https://blog.akanelee.me/posts/241439-design-and-f2e-cut-images/ 設計和 F2E 的切圖與切版 · 嫁給 RD 的 UI Designer]</ref>、[簡體] 切版。
* HTML5 [簡體] H5 页面
* HTML5 [簡體] H5 页面
* 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 分辨率]
Line 180: Line 228:
** 使用者操作後的回饋訊息
** 使用者操作後的回饋訊息
* [https://zh.wikipedia.org/zh-tw/%E6%97%B6%E5%BA%8F%E5%9B%BE 時序圖 - 維基百科，自由的百科全書] (Sequence Diagram，又稱為循序圖)
* [https://zh.wikipedia.org/zh-tw/%E6%97%B6%E5%BA%8F%E5%9B%BE 時序圖 - 維基百科，自由的百科全書] (Sequence Diagram，又稱為循序圖)
** 線上畫圖工具: [https://www.websequencediagrams.com/ WebSequenceDiagrams] software is provided by Hanov Solutions Inc., of Waterloo, Ontario, Canada.
* GUI (Graphic User Interface)
* VUI (Voice User Interface)


== References ==
== References ==
<references/>
<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}}
* {{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]
* [http://en.wikipedia.org/wiki/Category:GUI_widgets Category:GUI widgets - Wikipedia, the free encyclopedia]
Line 194: Line 245:
* [https://medium.com/@mjk65428/transition-7d813e13e28 (Transition) – grace Chi – Medium]
* [https://medium.com/@mjk65428/transition-7d813e13e28 (Transition) – grace Chi – Medium]
* [https://designtongue.me/checkbox-_vs_toggle_switch/ Checkbox 與 開關元件（Toggle Switch）的正確使用情境 | 設計大舌頭] {{access | date = 2018-08-27}}
* [https://designtongue.me/checkbox-_vs_toggle_switch/ Checkbox 與 開關元件（Toggle Switch）的正確使用情境 | 設計大舌頭] {{access | date = 2018-08-27}}
* [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}}
{{Template:Build a website}}


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

Latest revision as of 12:29, 20 March 2024

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

UI Components[edit]

使用者介面元件與互動特效、表單 (html form) 相關詞彙

  • chained menu 動態選單(動態下拉選單、動態二階選單、動態多階選單) 或稱 chained select menu, double combo menu, select cascade, dynamic dropdowns, dropdown dependent。例如使用動態下拉選單，提供使用者選取地址的縣市、行政區域兩個欄位。當使用者選好縣市下拉選單後，行政區域的下拉選單則依據使用者所在縣市連動，只顯示該縣市的行政區域。好處是減少下拉選單的項目數量，以及避免使用者選擇到矛盾的行政區域資料。
  • checkbox [繁體] 複選框、核取方塊 [簡體] 复选框
  • Hero image [繁] 主頁橫幅 [簡體] 主页横幅
  • 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 圖檔。


  • pagination [繁體] 分頁、頁碼 [簡體] 分页、页码
  • placefolder [繁體] 佔位符 [簡體] 占位符。意思可能有二:
    1. placefolder text 輸入欄位 (文字方框) 的提示文字 [5] [簡體] 输入框背景文字提示[6]: 提供使用者輸入值的範例。使用者點擊輸入欄位時，提示文字會自動消失。
    2. 版面區塊 ex: 選定某個版面區塊，可供編輯[7] placefolder 雲端服務用以填充區塊，方便網站正式上線前，測試與確認網頁版面或圖片樣式大小。例如: {placekitten}, more on Random content generator
    3. 內容載入區塊 (Content Loading Placeholder)：「使用頁面或元件的『載入佔位符』，表示某些內容還在載入中。」(資料來源：Bootstrap[8])
  • radio button [繁體] 單選按鈕, 選項紐 [簡體] 单选按钮
  • snackbars [繁體] 簡短通知、[簡體] 简短信息、消息条。在螢幕底部顯示簡短的通知。Example: Snackbars - Material Design
  • sticky bar [繁體] 固定橫欄 [簡體] 固定导航条。固定出現在瀏覽器上方或下方位置的導航區塊。[10]
  • thumbnails [繁體] 縮圖 [簡體] 缩略图
  • tooltip [繁體] 提示文字、彈出式提示框 [簡體] 提示文本、提示冒泡。滑鼠游標移到元素或連結上方時，顯示的簡短說明文字。
  • video slider 影片選單;

內容[edit]

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

資料結構[edit]

Database schema

使用研究 / 方法論[edit]

  • HMW, How Might We [繁體] 我們該如何 ...、[簡體] 我们可以怎样 ... [13] 相關詞彙: POV
  • Heat map, Heatmap [繁體] 熱點圖、熱區圖、[簡體] 热图。相關詞彙: 凝視軌跡圖 (Gaze plot)[14]。
  • POV, Point of View [繁體] 觀點、設計觀點、[簡體] 观点。其他學科領域: Point of view - Wikipedia 相關詞彙: HMW
  • User Story Mapping [繁體] 使用者故事對照、使用者故事地圖、[簡體] 用户故事地图。[15][16]
  • UX, User experience [繁體] 使用者經驗、[簡體] 用户体验。
    • Don Norman 與 Jakob Nielsen 提出「使用者體驗包含使用者與公司的產品或服務互動中的所有層面」[17]

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

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

功能地圖, Functional map

  • 將使用者需求，轉換成功能地圖

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

Wireframe [繁體] 線框圖、框線稿、線稿; [簡體] 线框图。「線稿又稱頁面示意圖 (page schematic) 或螢幕藍圖 (screen blueprint)。以網站線稿為例，視覺化方式呈現網站的『骨骼圖』。線稿目的是說明如何配置網站元件，以符合特定目的。」(資料來源: Wikipedia)

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

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

  • fidelity: [繁體] 保真度、逼真度[19]; [簡體] 保真度[20]。接近實際產品的畫面或互動方式的程度。
  • High-fidelity prototype [繁體] 高逼真原型、高完成度原型; [簡體] 高保真原型。相反詞: Low-fidelity prototype
  • Low-fidelity prototype [繁體] 低逼真原型、低完成度原型; [簡體] 低保真原型。相反詞: High-fidelity prototype
  • 延伸閱讀: wesley (2016). 介面設計Prototyping 淺入淺出 – DESIGNING BY LEARNING [Last visited: 2016-08-25]

設計系統 (Design System)、設計規範、視覺方針 (Style guide, Style guideline)、介面模式 (UI Pattern) ex:

使用者驗收測試(User Acceptance Test, UAT)

(left blank intentionally)

頁面名稱[edit]

  • onboarding page 或 landing page: 登陸頁
  • signin page 或 signup Page: 註冊頁面

頁面狀態[edit]

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

  1. Ideal State (理想狀態)
  2. Empty State (空白狀態)
  3. Error/Failed State (錯誤狀態)
  4. Partial State (局部資料狀態)
  5. Loading State (載入中狀態)

相關資料:

成長駭客[edit]

其他[edit]

  • HTML slicing, PSD to HTML Slicing [繁體] 切版[25]、[簡體] 切版。
  • HTML5 [簡體] H5 页面
  • Image resolution / Display resolution: [繁體] 解析度、[簡體] 分辨率
  • interoperability (跨異質平台)互通性
  • Product Design (PD)
  • Product Design & Development (PD&D)
  • rounded corner 圓角 圆角
    • 步驟式畫面切換
    • Call to Actions
    • 表單欄位與型態 ex: 下拉選單、核取按鈕
    • 按鈕用途...
    • 連結
    • 使用者操作後的回饋訊息
  • 時序圖 - 維基百科，自由的百科全書 (Sequence Diagram，又稱為循序圖)
    • 線上畫圖工具: WebSequenceDiagrams software is provided by Hanov Solutions Inc., of Waterloo, Ontario, Canada.
  • GUI (Graphic User Interface)
  • VUI (Voice User Interface)

References[edit]

  1. ↑ Cover Flow - Wikipedia, the free encyclopedia
  2. ↑ Facebook 輪播廣告的設計規格 | Facebook 廣告使用說明
  3. ↑ Infinite Scrolling is Not for Every Website
  4. ↑ Lindsay is observing.....: 所謂的 Pinterest 佈局式網站
  5. ↑ HTML 5 <input> placeholder 属性
  6. ↑ 使用HTML5的Placeholder属性实现input输入框背景文字提示效果 – WEB骇客
  7. ↑ 6. Placeholders outside the CMS — django cms 3.0 documentation。
  8. ↑ Placeholders · Bootstrap v5.1
  9. ↑ 只要十秒鐘，使用 Loading.io 製作 Loading 圖示
  10. ↑ Sticky bars: More Conversions, Less Intrusion | Unbounce
  11. ↑ 富文本编辑器_百度百科
  12. ↑ 網頁介面A/B Test 筆記 (Google Analytics Experiments) – 花水木：文藝復興人生
  13. ↑ DESIGN SPRINT - HOW MIGHT WE 雜記 @ David Ko的學習之旅 :: 痞客邦 ::
  14. ↑ Working with Heat Maps and Gaze Plots
  15. ↑ 博客來-使用者故事對照：User Story Mapping
  16. ↑ Mapping User Stories in Agile
  17. ↑ The Definition of User Experience (UX)
  18. ↑ 產品經理（PM）一秒理解MRD、PRD、BRD | Cool SEO
  19. ↑ fidelity - 保真(度)，逼真(度)
  20. ↑ 保真度_互动百科
  21. ↑ Scott Hurff (2015). How to fix a bad user interface - Scott Hurff's Blog (網頁備份，原連結已失效)
  22. ↑ 博客來-流量池：流量稍縱即逝，打造流量水庫，透過儲存、轉化、裂變，讓導購飆高、客源不絕、營運升級的行銷新思維
  23. ↑ List of mobile app distribution platforms - Wikipedia
  24. ↑ App store optimization - Wikipedia
  25. ↑ 設計和 F2E 的切圖與切版 · 嫁給 RD 的 UI Designer

Further readings[edit]

介面元素參考


Web site design and development process

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