Web design glossary: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
No edit summary
Line 2: Line 2:


== UI Components ==
== UI Components ==
使用者介面元件與互動特效相關
使用者介面元件與互動特效、表單相關詞彙
* 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]
* 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
* checkbox [繁體] 複選框、核取方塊 [簡體] 复选框
* date picker, calendar picker 日期選擇器 ex: [http://jqueryui.com/datepicker/ jQuery Datepicker], [https://vuejsexamples.com/tag/calendar/ Calendar - Vue.js Examples]
* drag & drop [繁] 拖曳、拖移、拖拉 [簡] 拖拽, 拖放
* drag & drop [繁] 拖曳、拖移、拖拉 [簡] 拖拽, 拖放
* dropdowns / drop down menus [繁體] 下拉選單 [簡體] 下拉菜單
* dropdown, drop down menus [繁體] 下拉選單 [簡體] 下拉菜單
* input box, text field [繁體] 文字輸入欄位、輸入框 [簡體] 文本输入框
* lightbox [繁體] 光箱 (特效) [簡體] 暗箱 (特效)。透過降低周遭元素對比或變暗，凸顯想要呈現的資訊。sample: [http://lokeshdhakar.com/projects/lightbox2/ Lightbox], [http://fancybox.net/ Fancybox], [http://malsup.com/jquery/block/ jQuery BlockUI Plugin]
* lightbox [繁體] 光箱 (特效) [簡體] 暗箱 (特效)。透過降低周遭元素對比或變暗，凸顯想要呈現的資訊。sample: [http://lokeshdhakar.com/projects/lightbox2/ Lightbox], [http://fancybox.net/ Fancybox], [http://malsup.com/jquery/block/ jQuery BlockUI Plugin]
* mandatory / required (欄位)必填
* menu [繁體] 選單 [簡體] 菜单
* menu [繁體] 選單 [簡體] 菜单
* modal dialog [繁體] 對話視窗 [簡體] 对话框、弹出窗口。點選按鈕，跳出小視窗要求使用者填寫表單內容。 sample: [http://jqueryui.com/dialog/#modal-form Dialog | jQuery UI], [http://bootsnipp.com/snipps/login-form-in-a-modal Viewing snipp | Login form in a modal | Bootsnipp.com]  
* modal dialog [繁體] 對話視窗 [簡體] 对话框、弹出窗口。點選按鈕，跳出小視窗要求使用者填寫表單內容。 sample: [http://jqueryui.com/dialog/#modal-form Dialog | jQuery UI], [http://bootsnipp.com/snipps/login-form-in-a-modal Viewing snipp | Login form in a modal | Bootsnipp.com]  
* navbar (navigation bar) [繁體] 導覽列 [簡體] 导航条
* navbar (navigation bar) [繁體] 導覽列 [簡體] 导航条
* 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>: 提供使用者輸入值的範例。使用者點擊輸入欄位時，提示文字會自動消失。
*# 版面區塊 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?]
* progress bars [繁體] 進度條 [簡體] 进度条 example: [https://jqueryui.com/progressbar/ Progressbar | jQuery UI]
* progress bars [繁體] 進度條 [簡體] 进度条 example: [https://jqueryui.com/progressbar/ Progressbar | jQuery UI]
* radio button [繁體] 單選按鈕, 選項紐 [簡體] 单选按钮
* 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 [繁體] 滑桿、拉桿 [簡體] 滑块、滑动条。例如電腦調整音量的滑桿。 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]
* 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]
* thumbnails 縮圖
* thumbnails 縮圖
* tab [繁體] 標籤 [簡體] 标签页、选项卡 sample: [https://jqueryui.com/tabs/ Tabs | jQuery UI]
* tab [繁體] 標籤 [簡體] 标签页、选项卡 sample: [https://jqueryui.com/tabs/ Tabs | jQuery UI]
Line 27: Line 41:
* 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]
* video slider 影片選單;
* video slider 影片選單;


Line 44: Line 59:
* 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]。


== 表單 html form ==
* 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]
* dropdown [繁體] 下拉選單 [簡體] 下拉菜單
* input box, text field [繁體] 文字輸入欄位、輸入框 [簡體] 文本输入框
* mandatory / required (欄位)必填
* 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>: 提供使用者輸入值的範例。使用者點擊輸入欄位時，提示文字會自動消失。
*# 版面區塊 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?]
* radio button [繁體] 單選按鈕, 選項紐 [簡體] 单选按钮
* spinner 連動式下拉選單


== 資料結構 ==
== 資料結構 ==

Revision as of 10:36, 10 November 2018

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

UI Components

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

  • accordion 折疊。為了在小的裝置螢幕上，顯示主要的資訊區塊時，會將其他區域折疊。 example: Accordion | jQuery UI, Creating an Accordion with Spry Data
  • breadcrumbs, breadcrumb trail [繁體] 麵包屑(導覽) [簡體] 面包屑导航。說明: 資訊結構與網站設計: 導覽路徑標示（Breadcrumbs） [Last visited: 2017-03-21]
  • carousel 又稱 cover flow[1], touch slider, touch carousel [繁體] 3D封面、幻燈片效果 [簡體] 幻灯效果。 Example: 55 Best jQuery Carousel Plugins
  • chained menu 動態選單(動態二階選單、動態多階選單) 或稱 chained select menu, double combo menu, select cascade, dynamic dropdowns, dropdown dependent
  • checkbox [繁體] 複選框、核取方塊 [簡體] 复选框
  • date picker, calendar picker 日期選擇器 ex: jQuery Datepicker, Calendar - Vue.js Examples
  • drag & drop [繁] 拖曳、拖移、拖拉 [簡] 拖拽, 拖放
  • dropdown, drop down menus [繁體] 下拉選單 [簡體] 下拉菜單
  • input box, text field [繁體] 文字輸入欄位、輸入框 [簡體] 文本输入框
  • lightbox [繁體] 光箱 (特效) [簡體] 暗箱 (特效)。透過降低周遭元素對比或變暗，凸顯想要呈現的資訊。sample: Lightbox, Fancybox, jQuery BlockUI Plugin
  • mandatory / required (欄位)必填
  • menu [繁體] 選單 [簡體] 菜单
  • modal dialog [繁體] 對話視窗 [簡體] 对话框、弹出窗口。點選按鈕，跳出小視窗要求使用者填寫表單內容。 sample: Dialog | jQuery UI, Viewing snipp | Login form in a modal | Bootsnipp.com
  • navbar (navigation bar) [繁體] 導覽列 [簡體] 导航条
  • radio button [繁體] 單選按鈕, 選項紐 [簡體] 单选按钮
  • video slider 影片選單;

內容

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


資料結構

Database schema

使用研究 / 方法論

  • HMW, How Might We [繁體] 我們該如何 ...、[簡體] 我们可以怎样 ... [9] 相關詞彙: POV
  • POV, Point of View [繁體] 觀點、設計觀點、[簡體] 观点。其他學科領域: Point of view - Wikipedia 相關詞彙: HMW
  • UX, User experience [繁體] 使用者經驗、[簡體] 用户体验。
    • Don Norman 與 Jakob Nielsen 提出「使用者體驗包含使用者與公司的產品或服務互動中的所有層面」[10]

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

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


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

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

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

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

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

  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. ↑ HTML 5 <input> placeholder 属性
  4. ↑ 使用HTML5的Placeholder属性实现input输入框背景文字提示效果 – WEB骇客
  5. ↑ 6. Placeholders outside the CMS — django cms 3.0 documentation。
  6. ↑ 只要十秒鐘，使用 Loading.io 製作 Loading 圖示
  7. ↑ 富文本编辑器_百度百科
  8. ↑ 網頁介面A/B Test 筆記 (Google Analytics Experiments) – 花水木：文藝復興人生
  9. ↑ DESIGN SPRINT - HOW MIGHT WE 雜記 @ David Ko的學習之旅 :: 痞客邦 ::
  10. ↑ The Definition of User Experience (UX)
  11. ↑ 產品經理（PM）一秒理解MRD、PRD、BRD | Cool SEO
  12. ↑ fidelity - 保真(度)，逼真(度)
  13. ↑ 保真度_互动百科
  14. ↑ 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=20144"