Web design glossary: Difference between revisions
Jump to navigation
Jump to search
m (→UI Components: range inputs) |
|||
(47 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
== UI Components == | == UI Components == | ||
使用者介面元件與互動特效、表單 (html form) 相關詞彙 | |||
* accordion | * 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 [繁體] | * 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] | |||
* drag & drop [繁] 拖曳、拖移、拖拉 [簡] 拖拽, 拖放 | * drag & drop [繁] 拖曳、拖移、拖拉 [簡] 拖拽, 拖放 | ||
* | * dropdown, drop down menus [繁體] 下拉選單 [簡體] 下拉菜單 | ||
* lightbox [繁體] 光箱 (特效) [簡體] 暗箱 (特效)。透過降低周遭元素對比或變暗,凸顯想要呈現的資訊。sample: [http://lokeshdhakar.com/projects/lightbox2/ Lightbox], [ | * input box, text field [繁體] 文字輸入欄位、輸入框 [簡體] 文本输入框 | ||
* 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 (欄位)必填 | |||
* 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}], more on [[Random content generator]] | |||
* 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 [繁體] | |||
* 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] | |||
* spinner | * spinner | ||
** [繁體] | ** [繁體] 下拉框、下拉選單、連動式下拉選單 [簡體] 旋转器。原本下拉選單 (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>、 [簡體] | ** [繁體] 載入動畫圖示、等待動畫圖示<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] | ||
* 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] | ||
* video slider 影片選單; | * video slider 影片選單; | ||
Line 32: | Line 56: | ||
* highlight [繁體] 凸顯 [簡體] 高亮 | * highlight [繁體] 凸顯 [簡體] 高亮 | ||
** 相關字: syntax highlight [繁體] 凸顯語法、凸顯程式碼語法 [簡體] 代码高亮、源码语法高亮 | ** 相關字: syntax highlight [繁體] 凸顯語法、凸顯程式碼語法 [簡體] 代码高亮、源码语法高亮 | ||
* Landing page (LP) [繁體] 著陸頁 [簡體] 着陆页、登陆页。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}} | ||
** [ | ** more tools on [[Random content generator]] | ||
* 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) | ||
== 使用研究 / 方法論 == | == 使用研究 / 方法論 == | ||
Line 75: | Line 86: | ||
* 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 | * 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 | ||
* [https://en.wikipedia.org/wiki/Heat_map Heat map], Heatmap [繁體] 熱點圖、熱區圖、[簡體] 热图。相關詞彙: 凝視軌跡圖 (Gaze plot)<ref>[https://www.tobiipro.com/learn-and-support/learn/steps-in-an-eye-tracking-study/interpret/working-with-heat-maps-and-gaze-plots/ Working with Heat Maps and Gaze Plots]</ref>。 | |||
* Persona [繁體] 人物誌、[簡體] 用户画像、目标人群画像。 | * Persona [繁體] 人物誌、[簡體] 用户画像、目标人群画像。 | ||
Line 82: | Line 94: | ||
* 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 | ||
* [https://en.wikipedia.org/wiki/ | * 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 使用者經驗]、[簡體] 用户体验。 | ||
** Don Norman 與 Jakob Nielsen 提出「使用者體驗包含使用者與公司的產品或服務互動中的所有層面」<ref>[https://www.nngroup.com/articles/definition-user-experience/ The Definition of User Experience (UX)]</ref> | |||
* SUS, System Usability Scale [繁體] 系統易用性量表、[簡體] 系统可用性量表。[http://www.hansshih.com/post/85896237295/sus-%E7%B3%BB%E7%B5%B1%E6%98%93%E7%94%A8%E6%80%A7%E9%87%8F%E8%A1%A8 Hans Shih — SUS 系統易用性量表] | * UX Research 使用者研究 [https://www.interaction-design.org/literature/topics/ux-research What is UX Research? | Interaction Design Foundation] | ||
* [https://en.wikipedia.org/wiki/Service_blueprint Service blueprint] [繁體] [http://wiki.mbalib.com/zh-tw/%E6%9C%8D%E5%8A%A1%E8%93%9D%E5%9B%BE 服務藍圖]、[簡體] 服务蓝图 | |||
* SUS, System Usability Scale [繁體] 系統易用性量表、[簡體] 系统可用性量表。 | |||
** [http://www.hansshih.com/post/85896237295/sus-%E7%B3%BB%E7%B5%B1%E6%98%93%E7%94%A8%E6%80%A7%E9%87%8F%E8%A1%A8 Hans Shih — SUS 系統易用性量表] | |||
* [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 以使用者為中心的設計] | ||
Line 101: | Line 119: | ||
* [https://en.wikipedia.org/wiki/Paper_prototyping Paper prototyping - Wikipedia, the free encyclopedia] | * [https://en.wikipedia.org/wiki/Paper_prototyping Paper prototyping - Wikipedia, the free encyclopedia] | ||
Wireframe [繁體] 線框圖、框線稿、線稿; [簡體] | 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): | ||
** [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 124: | Line 142: | ||
** [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 | ||
設計系統 (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 131: | Line 149: | ||
** 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) | ||
Line 150: | Line 169: | ||
* 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] | * 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] | ||
* [https://zh.wikipedia.org/zh-tw/%E6%9C%89%E9%99%90%E7%8A%B6%E6%80%81%E6%9C%BA 有限狀態機] (finite-state machine) 「表示有限個狀態以及在這些狀態之間的轉移和動作等行為的數學模型。」 | * [https://zh.wikipedia.org/zh-tw/%E6%9C%89%E9%99%90%E7%8A%B6%E6%80%81%E6%9C%BA 有限狀態機] (finite-state machine) 「表示有限個狀態以及在這些狀態之間的轉移和動作等行為的數學模型。」 | ||
* Raphael Fleckenstein (2018). [https://medium.com/ryte/the-ux-design-checklist-caead126b125?fbclid=IwAR1w2KeS_-HDxBOxBVKx5FnOWRiiKRbOgvSqgiDf_R55lBNk9uRlQtFgJYU The UX Design Checklist – Ryte – Medium] | |||
== 成長駭客 == | == 成長駭客 == | ||
* [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 170: | Line 194: | ||
** 使用者操作後的回饋訊息 | ** 使用者操作後的回饋訊息 | ||
* [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 == | ||
Line 175: | Line 202: | ||
further reading | further reading | ||
* {{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] | ||
* [http://www.usabilityfirst.com/glossary Glossary | Usability First] | * [http://www.usabilityfirst.com/glossary Glossary | Usability First] |
Revision as of 12:22, 13 October 2020
網頁設計、介面與互動元件等相關專有名詞
UI Components
使用者介面元件與互動特效、表單 (html form) 相關詞彙
- 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封面、幻燈片效果、輪播、輪播圖卡[2] [簡體] 幻灯效果、轮播效果。 Example: 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: jQuery Datepicker, Calendar - Vue.js Examples
- drag & drop [繁] 拖曳、拖移、拖拉 [簡] 拖拽, 拖放
- dropdown, drop down menus [繁體] 下拉選單 [簡體] 下拉菜單
- input box, text field [繁體] 文字輸入欄位、輸入框 [簡體] 文本输入框
- lightbox [繁體] 光箱 (特效) [簡體] 暗箱 (特效)。透過降低周遭元素對比或變暗,凸顯想要呈現的資訊。sample: Lightbox (MIT license), Magnific Popup: Responsive jQuery Lightbox Plugin (MIT license)
- mandatory / required (欄位)必填
- menu [繁體] 選單 [簡體] 菜单
- modal dialog [繁體] 對話視窗 [簡體] 对话框、弹出窗口。點選按鈕,跳出小視窗要求使用者填寫表單內容。 sample: Dialog | jQuery UI, Viewing snipp | Login form in a modal | Bootsnipp.com
- navbar (navigation bar) [繁體] 導覽列 [簡體] 导航条
- pagination [繁體] 分頁、頁碼 [簡體] 分页、页码
- Parallax scrolling [繁體] (垂直) 視差捲動 [簡體] 视差滚动、视差迁移转变。 Example: 30 Great Websites with Parallax Scrolling
- Pinterest-like layout, Pinterest-style layout, Masonry layout, Dynamic grid layout [繁體] 瀑布流、瀑布流排版 [簡體] 瀑布流、瀑布流式布局[3]
- placefolder [繁體] 佔位符 [簡體] 占位符。意思可能有二:
- placefolder text 輸入欄位 (文字方框) 的提示文字 [4] [簡體] 输入框背景文字提示[5]: 提供使用者輸入值的範例。使用者點擊輸入欄位時,提示文字會自動消失。
- 版面區塊 ex: 選定某個版面區塊,可供編輯[6] placefolder 雲端服務用以填充區塊,方便網站正式上線前,測試與確認網頁版面或圖片樣式大小。例如: {placekitten}, more on Random content generator
- progress bars [繁體] 進度條 [簡體] 进度条 example: Progressbar | jQuery UI
- radio button [繁體] 單選按鈕, 選項紐 [簡體] 单选按钮
- scrollbar [繁體] 捲軸、控制捲軸 [簡體] 滚动条。sample: jScrollPane - cross browser styleable scrollbars with jQuery and CSS
- side drawer, side menu drawer, navigation drawer, side navigation menu [繁體] 側邊滑動選單 [簡體] 抽屉式导航、侧滑的抽屉效果的菜单 example: Navigation drawer - Patterns - Material Design, How To Create a Side Navigation Menu, 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, range slider, range inputs [繁體] 滑桿、拉桿、滑動桿 [簡體] 滑块、滑动条。例如電腦調整音量的滑桿。 sample: Sliders | User Interface Design Inspiration、Slider | jQuery UI, Controls and Dashboards | Charts | Google Developers, range.css - generate styles for your HTML5 range inputs
- spinner
- [繁體] 下拉框、下拉選單、連動式下拉選單 [簡體] 旋转器。原本下拉選單 (select box) 外,可利用上下鍵調整項目數值。 example: Spinner | jQuery UI
- [繁體] 載入動畫圖示、等待動畫圖示[7]、 [簡體] 旋转加载的动画图标、旋转特效。example: ion-spinner - Directive in module ionic - Ionic Framework
- thumbnails [繁體] 縮圖 [簡體] 缩略图
- tab [繁體] 標籤 [簡體] 标签页、选项卡 sample: Tabs | jQuery UI
- tooltip [繁體] 提示文字、彈出式提示框 [簡體] 提示文本、提示冒泡。滑鼠游標移到元素或連結上方時,顯示的簡短說明文字。
- tour tip, web tour, web guide: [繁體] 步驟式導引 (app 或網站功能) [簡體] 分步引导。 guided tours through your app or website
- video slider 影片選單;
內容
- highlight [繁體] 凸顯 [簡體] 高亮
- 相關字: syntax highlight [繁體] 凸顯語法、凸顯程式碼語法 [簡體] 代码高亮、源码语法高亮
- Landing page (LP) [繁體] 著陸頁 [簡體] 着陆页、登陆页。example: Web Design Clip (L) ランディングページWebデザインクリップ
- Lorem Ipsum 假文,「讓設計師拿來做為填充版面的內容物」引用自MoreText.js。假文產生器:
- MoreText.js,
- Real content for all your designs - Lists 產生接近真實的假資料 [Last visited: 2018-04-12]
- more tools on Random content generator
- progressive disclosure 漸進呈現。說明: 渐进呈现-Progressive Disclosure -- 用户体验那些事 -- 传送门、Progressive Disclosure [Last visited: 2016-03-11]
- Rich text [繁體] 富文字 [簡體] 富文本
- Rich text editor [繁體] 網頁編輯器、所見即所得 (WYSIWYG) 的編輯器 [簡體] 富文本編輯器[8]: 可以設定文字大小、顏色等樣式、插入圖片等素材的線上編輯器。sample: TinyMCE, CKEditor, Trumbowyg。
資料結構
- Create database schema document
- ER圖、實體關係圖 (entity-relationship diagram)
使用研究 / 方法論
- A/B testing A/B 測試: 提供網站使用者兩種版本的網站版面或不同功能進行測試,再透過網站 log檔或使用數據(例如: Google analytics[9])來評估成效。 相關資料: 超理性使用者介面設計 - Data-driven A/B Testing
- CJM, customer journey map [繁體] 顧客體驗旅程地圖、[簡體] 客户旅程地图法
- Design Thinking 設計思考,或稱設計思維。
- Heuristics Evaluation 啟發式評估, Heuristics usability evaluation[1]
- Jakob Nielsen (1995). 10 Heuristics for User Interface Design
- HMW, How Might We [繁體] 我們該如何 ...、[簡體] 我们可以怎样 ... [10] 相關詞彙: POV
- Heat map, Heatmap [繁體] 熱點圖、熱區圖、[簡體] 热图。相關詞彙: 凝視軌跡圖 (Gaze plot)[11]。
- Persona [繁體] 人物誌、[簡體] 用户画像、目标人群画像。
- POV, Point of View [繁體] 觀點、設計觀點、[簡體] 观点。其他學科領域: Point of view - Wikipedia 相關詞彙: HMW
- UX, User experience [繁體] 使用者經驗、[簡體] 用户体验。
- Don Norman 與 Jakob Nielsen 提出「使用者體驗包含使用者與公司的產品或服務互動中的所有層面」[12]
- UX Research 使用者研究 What is UX Research? | Interaction Design Foundation
- Service blueprint [繁體] 服務藍圖、[簡體] 服务蓝图
- SUS, System Usability Scale [繁體] 系統易用性量表、[簡體] 系统可用性量表。
產品規格文件 / 不同階段設計文件
RFP (Request For Proposal) 需求建議書 / 企劃書,由發案單位提供。 功能規格的文字,需要可以準確作為驗收或交付的項目。例如將模糊的大功能,展開為子項功能。相關頁面: 避免這樣寫 RFP (Request For Proposal) 需求建議書
- 軟體需求說明 (Software requirements specification, SRS) 範本,由發案單位提供。產品規格文件(BRD, MRD, PRD)撰寫[13]:
- Business Requirement Document (BRD) [繁體] 商業需求文件; [簡體] 商业需求描述
- Market Requirement Document (MRD) [繁體] 市場需求文件; [簡體] 市场需求文档
- Product Requirements Document (PRD) [繁體] 產品需求文件、產品需求文稿; [簡體] 产品需求文档、产品需求档案
- Design Requirements Document (DRD) [繁體] 互動設計文件、互動設計說明文件; [簡體] 交互设计文档、交互设计说明文档、交互设计规范性文档
- 服務建議書或服務企劃書(service suggestions) 範本。由接案單位撰寫。
草稿、手繪 (sketching)、產品設計手繪 (product design sketching)
Wireframe [繁體] 線框圖、框線稿、線稿; [簡體] 线框图。「線稿又稱頁面示意圖 (page schematic) 或螢幕藍圖 (screen blueprint)。以網站線稿為例,視覺化方式呈現網站的『骨骼圖』。線稿目的是說明如何配置網站元件,以符合特定目的。」(資料來源: Wikipedia)
- 功能地圖 (Functional Map): 初學者的 Functional Map · 嫁給 RD 的 UI Designer
- 使用者流程圖、流程圖 (Flow chart):
- 操作流程、頁面流程 (UI flow): 初學者的 UI Flow · 嫁給 RD 的 UI Designer
- 網站地圖 (Site map)
- 資訊架構[2] (Information architecture)
Mockup [繁體] 視覺稿; [簡體] 视觉稿
Prototype [繁體]雛形、原型; [簡體] 原型
- fidelity: [繁體] 保真度、逼真度[14]; [簡體] 保真度[15]。接近實際產品的畫面或互動方式的程度。
- High-fidelity prototype [繁體] 高逼真原型、高完成度原型; [簡體] 高保真原型。相反詞: Low-fidelity prototype
- Low-fidelity prototype [繁體] 低逼真原型、低完成度原型; [簡體] 低保真原型。相反詞: High-fidelity prototype
- 延伸閱讀: wesley (2016). 介面設計Prototyping 淺入淺出 – DESIGNING BY LEARNING [Last visited: 2016-08-25]
- 原型工具比較:
- Uxtools.co
- Prototyping Tools | Cooper
- Pikatool: Compare Prototyping Tools 比較 speed, fidelity, user testing, wireframing, collaboration
設計系統 (Design System)、設計規範、視覺方針 (Style guide, Style guideline)、介面模式 (UI Pattern) ex:
- 範例: U.S. Web Design Standards 其他範例請見 Style guideline & UI patterns
- 教學:
- 设计规范如何写?这20个精选案例让你大开眼界 | 人人都是产品经理 [Last visited: 2015-11-06]
- HOWLIN YANG (2016). 如何訂定有效的Design Guideline [Last visited: 2016-08-21]
- Abby Chiu (2017). Design System Practice – As A Product Designer – Medium [Last visited: 2017-05-23] "初次設計系統經驗分享"
使用者驗收測試(User Acceptance Test, UAT)
(left blank intentionally)
頁面狀態
UI Stack [繁] UI 堆疊; [簡] 交互界面堆栈。共有 5 種狀態 (Scott Hurff, 2015[16]):
- Ideal State (理想狀態)
- Empty State (空白狀態)
- Error/Failed State (錯誤狀態)
- Partial State (局部資料狀態)
- Loading State (載入中狀態)
相關資料:
- Zonble (2015). (翻譯) 如何修正壞 UI – zonble – Medium
- Scott Hurff (2015). How to fix a bad user interface - Scott Hurff's Blog
- 有限狀態機 (finite-state machine) 「表示有限個狀態以及在這些狀態之間的轉移和動作等行為的數學模型。」
- Raphael Fleckenstein (2018). The UX Design Checklist – Ryte – Medium
成長駭客
- AARRR 模式
- App Store Optimization (ASO) 行動應用程式商店、軟體商店優化、應用商店優化[17]:增加「行動應用程式」 (APP) 在行動應用程式商店 (例如: iOS 上的 APP Store、Android 上的 Google Play[18]) 可見度的程序[19]。詳: App Store Optimization (ASO) Guideline | Summer。桑莫。夏天。
- 相關頁面: APP、行動市場的調查研究
- growth hack [繁體] 成長駭客、增長駭客 [簡體] 增长黑客。「新創公司發展的行銷方法,透過創意、分析式思考 (analytical thinking) 、衡量指標 (Performance metric) ,以提升產品銷售和服務曝光。」資料來源: 維基百科
- SEO 搜尋引擎最佳化 (search engine optimization)
- (user) onboarding: 使用者第一次使用網站服務
其他
- HTML slicing, PSD to HTML Slicing [繁體] 切版[20]、[簡體] 切版。
- 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
- ↑ Cover Flow - Wikipedia, the free encyclopedia
- ↑ Facebook 輪播廣告的設計規格 | Facebook 廣告使用說明
- ↑ Lindsay is observing.....: 所謂的 Pinterest 佈局式網站
- ↑ HTML 5 <input> placeholder 属性
- ↑ 使用HTML5的Placeholder属性实现input输入框背景文字提示效果 – WEB骇客
- ↑ 6. Placeholders outside the CMS — django cms 3.0 documentation。
- ↑ 只要十秒鐘,使用 Loading.io 製作 Loading 圖示
- ↑ 富文本编辑器_百度百科
- ↑ 網頁介面A/B Test 筆記 (Google Analytics Experiments) – 花水木:文藝復興人生
- ↑ DESIGN SPRINT - HOW MIGHT WE 雜記 @ David Ko的學習之旅 :: 痞客邦 ::
- ↑ Working with Heat Maps and Gaze Plots
- ↑ The Definition of User Experience (UX)
- ↑ 產品經理(PM)一秒理解MRD、PRD、BRD | Cool SEO
- ↑ fidelity - 保真(度),逼真(度)
- ↑ 保真度_互动百科
- ↑ Scott Hurff (2015). How to fix a bad user interface - Scott Hurff's Blog
- ↑ 博客來-流量池:流量稍縱即逝,打造流量水庫,透過儲存、轉化、裂變,讓導購飆高、客源不絕、營運升級的行銷新思維
- ↑ List of mobile app distribution platforms - Wikipedia
- ↑ App store optimization - Wikipedia
- ↑ 設計和 F2E 的切圖與切版 · 嫁給 RD 的 UI Designer
further reading
- 專業人士的設計流程 (github 專案)。原文: Design Process for Pros - Best design practices in one place (github 專案) [Last visited: 2018-11-10]
- Category:GUI widgets - Wikipedia, the free encyclopedia
- Glossary | Usability First
- 飛爾酥創意設計 - 線框圖、原型、視覺稿有何不同呢?
- UI/UX 設計師的工作範圍 · 嫁給 RD 的 UI Designer
- uxeastmeetswest (2017). 你可能不知道的8個UX專有英文字彙 – uxeastmeetswest – Medium
- BAOZHU (2016). 【概念解析】同为“原型”的wireframe,prototype,mockup,到底有何不同? – UXRen [Last visited: 2017-08-05]
- (Transition) – grace Chi – Medium
- Checkbox 與 開關元件(Toggle Switch)的正確使用情境 | 設計大舌頭 [Last visited: 2018-08-27]
Web site design and development process
- Information gathering: Research surveys
- Planning: Before you start to build a website, Content development strategy | Register domain name, Choose web hosting | Information architecture | Data model: Data type, Data flow | Documentation: Request For Proposal | Licensing
- Design: CSS tools, Free fonts, Free photos, Emoji & icons
- Testing & delivery: Usability test, check browser compatibility | Web testing | Speed up websites: Web Ping, Software acceptance test plan | Promote your web
- Maintenance: Site backup & restore test, Software update (OS patch or CMS security update)
- Need help? Community, I need inspiration, Web design glossary