14,962
edits
Web design glossary: Difference between revisions
Jump to navigation
Jump to search
no edit summary
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] | |||
* breadcrumbs [繁體] 麵包屑(導覽) [簡體] 面包屑导航 | * breadcrumbs [繁體] 麵包屑(導覽) [簡體] 面包屑导航 | ||
* cover flow<ref>[http://en.wikipedia.org/wiki/Cover_Flow Cover Flow - Wikipedia, the free encyclopedia]</ref>, 又稱 carousel, 3D封面 example: [http://www.tripwiremagazine.com/2012/12/jquery-carousel.html 55 Best jQuery Carousel Plugins] | |||
* drag & drop [繁] 拖曳、拖移、拖拉 [簡] 拖拽, 拖放 | |||
* drop down menus 下拉式選單 | * drop down menus 下拉式選單 | ||
* menu [繁體] 選單 [簡體] 菜单 | * menu [繁體] 選單 [簡體] 菜单 | ||
| Line 13: | Line 16: | ||
* spinner [繁體] 下拉框、下拉選單 [簡體] 旋转器。原本下拉選單 (select box) 外，可利用上下鍵調整項目數值。 example: [https://jqueryui.com/spinner/ Spinner | jQuery UI] | * spinner [繁體] 下拉框、下拉選單 [簡體] 旋转器。原本下拉選單 (select box) 外，可利用上下鍵調整項目數值。 example: [https://jqueryui.com/spinner/ Spinner | jQuery UI] | ||
* thumbnails 縮圖 | * thumbnails 縮圖 | ||
* tab [繁體] 標籤 [簡體] 标签页 sample: [https://jqueryui.com/tabs/ Tabs | jQuery UI] | |||
* tooltip [繁體] 提示文字、彈出式提示框 [簡體] 提示文本。滑鼠游標移到元素或連結上方時，顯示的簡短文字。 | * tooltip [繁體] 提示文字、彈出式提示框 [簡體] 提示文本。滑鼠游標移到元素或連結上方時，顯示的簡短文字。 | ||
* tour tip: guided tours through your app or website 步驟式導引 app 或網站功能 | |||
** 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] | |||
* video slider 影片選單; | * video slider 影片選單; | ||
| Line 24: | Line 30: | ||
* Rich text editor 網頁編輯器: 可以設定文字大小、顏色等樣式、插入圖片等素材的編輯器。也可稱<abbr title="What You See Is What You Get">WYSIWYG</abbr> 所見即所得的編輯器 ex: [http://en.wikipedia.org/wiki/TinyMCE TinyMCE], [http://en.wikipedia.org/wiki/CKEditor CKEditor] | * Rich text editor 網頁編輯器: 可以設定文字大小、顏色等樣式、插入圖片等素材的編輯器。也可稱<abbr title="What You See Is What You Get">WYSIWYG</abbr> 所見即所得的編輯器 ex: [http://en.wikipedia.org/wiki/TinyMCE TinyMCE], [http://en.wikipedia.org/wiki/CKEditor CKEditor] | ||
== 表單 html form == | == 表單 html form == | ||
| Line 87: | Line 83: | ||
* High-fidelity prototype [繁體] 高仿真原型、[簡體] 高保真原型。相反詞: Low-fidelity prototype 低仿真度原型 | * High-fidelity prototype [繁體] 高仿真原型、[簡體] 高保真原型。相反詞: Low-fidelity prototype 低仿真度原型 | ||
* 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 分辨率] | ||
* interoperability (跨異質平台)互通性 | |||
* Low-fidelity prototype [繁體] 低擬真性原型、低仿真度原型。相反詞: High-fidelity prototype 高仿真原型 | * Low-fidelity prototype [繁體] 低擬真性原型、低仿真度原型。相反詞: High-fidelity prototype 高仿真原型 | ||
* Mockup [繁體] 視覺稿 | * Mockup [繁體] 視覺稿 | ||
| Line 92: | Line 89: | ||
* Product Design & Development (PD&D) | * Product Design & Development (PD&D) | ||
* Prototype [繁體]雛形、原型 | * Prototype [繁體]雛形、原型 | ||
* rounded corner 圓角 圆角 | |||
* Wireframe [繁體] 線框圖 | * Wireframe [繁體] 線框圖 | ||
** 步驟式畫面切換 | ** 步驟式畫面切換 | ||