Web design glossary: Difference between revisions
Jump to navigation
Jump to search
| Line 14: | Line 14: | ||
* progress bars [繁體] 進度條 [簡體] 进度条 example: [https://jqueryui.com/progressbar/ Progressbar | jQuery UI] | * progress bars [繁體] 進度條 [簡體] 进度条 example: [https://jqueryui.com/progressbar/ Progressbar | jQuery UI] | ||
* slider [繁體] 滑桿、拉桿 [簡體] 滑块、滑动条。例如電腦調整音量的滑桿。 sample: [http://www.uiparade.com/skill-type/sliders/ Sliders | User Interface Design Inspiration]、[https://jqueryui.com/slider/#default Slider | jQuery UI] | * slider [繁體] 滑桿、拉桿 [簡體] 滑块、滑动条。例如電腦調整音量的滑桿。 sample: [http://www.uiparade.com/skill-type/sliders/ Sliders | User Interface Design Inspiration]、[https://jqueryui.com/slider/#default Slider | jQuery UI] | ||
* spinner [繁體] 下拉框、下拉選單 [簡體] 旋转器。原本下拉選單 (select box) 外，可利用上下鍵調整項目數值。 example: [https://jqueryui.com/spinner/ Spinner | jQuery UI] | * 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>、 [簡體] 旋转加载的动画图标。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] | ||
Revision as of 01:18, 29 November 2016
網頁設計相關專有名詞
UI Components
使用者介面元件與互動特效相關
- accordion 折疊。為了在小的螢幕上，顯示主要的資訊區塊時，會將其他區域折疊。 example: Accordion | jQuery UI, Creating an Accordion with Spry Data
- breadcrumbs [繁體] 麵包屑(導覽) [簡體] 面包屑导航
- cover flow[1], 又稱 carousel, 3D封面 example: 55 Best jQuery Carousel Plugins
- drag & drop [繁] 拖曳、拖移、拖拉 [簡] 拖拽, 拖放
- dropdowns / drop down menus [繁體] 下拉選單 [簡體] 下拉菜單
- menu [繁體] 選單 [簡體] 菜单
- modal dialog [繁體] 對話視窗 [簡體] 对话框、弹出窗口。點選按鈕，跳出小視窗要求使用者填寫表單內容。 sample: Dialog | jQuery UI, Viewing snipp | Login form in a modal | Bootsnipp.com
- navbar (navigation bar) [繁體] 導覽列 [簡體] 导航条
- pagination [繁體] 分頁、頁碼 [簡體] 分页、页码
- progress bars [繁體] 進度條 [簡體] 进度条 example: Progressbar | jQuery UI
- slider [繁體] 滑桿、拉桿 [簡體] 滑块、滑动条。例如電腦調整音量的滑桿。 sample: Sliders | User Interface Design Inspiration、Slider | jQuery UI
- spinner
- [繁體] 下拉框、下拉選單 [簡體] 旋转器。原本下拉選單 (select box) 外，可利用上下鍵調整項目數值。 example: Spinner | jQuery UI
- [繁體] 載入動畫圖示、等待動畫圖示[2]、 [簡體] 旋转加载的动画图标。example: ion-spinner - Directive in module ionic - Ionic Framework
- thumbnails 縮圖
- tab [繁體] 標籤 [簡體] 标签页、选项卡 sample: Tabs | jQuery UI
- tooltip [繁體] 提示文字、彈出式提示框 [簡體] 提示文本。滑鼠游標移到元素或連結上方時，顯示的簡短文字。
- tour tip: guided tours through your app or website 步驟式導引 app 或網站功能
- example: Anno.js Demo 2, Tourist.js, Joyride | Foundation Docs
- video slider 影片選單;
內容
- highlight [繁體] 凸顯 [簡體] 高亮
- 相關字: syntax highlight [繁體] 凸顯語法、凸顯程式碼語法 [簡體] 代码高亮、源码语法高亮
- Lorem Ipsum 假文，「讓設計師拿來做為填充版面的內容物」引用自MoreText.js。假文產生器:
MoreText.js, 亂數假文產生器, Lipsum generator。 - progressive disclosure 漸進呈現。說明: 渐进呈现-Progressive Disclosure -- 用户体验那些事 -- 传送门、Progressive Disclosure [Last visited: 2016-03-11]
- Rich text [繁體] 富文字 [簡體] 富文本
- Rich text editor 網頁編輯器: 可以設定文字大小、顏色等樣式、插入圖片等素材的線上編輯器。也稱WYSIWYG 所見即所得的編輯器 ex: TinyMCE, CKEditor, Trumbowyg。
表單 html form
- chained menu 動態選單(動態二階選單、動態多階選單) 或稱 chained select menu, double combo menu, select cascade, dynamic dropdowns, dropdown dependent
- checkbox [繁體] 複選框、核取方塊 [簡體] 复选框
- date picker 日期選擇器 ex: jQuery Datepicker
- dropdown [繁體] 下拉選單 [簡體] 下拉菜單
- input box [繁體] 文字輸入欄位、輸入框 [簡體] 文本输入框
- mandatory / required (欄位)必填
- placefolder 意思可能有二:
- placefolder text [繁體] 輸入欄位 (文字方框) 的提示文字 [3] [簡體] 输入框背景文字提示[4]: 提供使用者輸入值的範例。使用者點擊輸入欄位時，提示文字會自動消失。
- 版面區塊 ex: 選定某個版面區塊，可供編輯[5] placefolder 雲端服務用以填充區塊，方便網站正式上線前，測試與確認網頁版面或圖片樣式大小。例如: {placekitten}, Placehold.it - Quick and simple image placeholders, Fake images please?
- radio button [繁體] 單選按鈕, 選項紐 [簡體] 单选按钮
- spinner 連動式下拉選單
資料結構
- Create database schema document
- ER圖 (entity-relationship diagram)
使用研究 / 方法論
- A/B testing A/B 測試: 提供網站使用者兩種版本的網站版面或不同功能進行測試，再透過網站 log檔或使用數據(例如: Google analytics[6])來評估成效。 相關資料: 超理性使用者介面設計 - Data-driven A/B Testing
- Design Thinking 設計思考，或稱設計思維。
- Persona [繁體] 人物誌、[簡體] 用户画像。
- User-centered design (UCD) 以使用者為中心的設計
產品規格文件 / 不同階段設計文件
RFP (Request For Proposal) 需求建議書 / 企劃書，由發案單位提供。功能規格的文字，需要可以準確作為驗收或交付的項目。
- 服務建議書或服務企劃書(service suggestions) 範本。由接案單位撰寫。
- 軟體需求說明 (Software requirements specification, SRS) 範本，由發案單位提供。
草稿、手繪 (sketching)、產品設計手繪 (product design sketching)
Wireframe [繁體] 線框圖、框線稿
- 功能地圖 (Functional Map): 初學者的 Functional Map · 嫁給 RD 的 UI Designer
- 流程圖 (Flow chart):
- 操作流程、頁面流程 (UI flow): 初學者的 UI Flow · 嫁給 RD 的 UI Designer
- 網站地圖 (Site map)
- 資訊架構[1] (Information architecture)
Mockup [繁體] 視覺稿
Prototype [繁體]雛形、原型
- 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:
- Uber Brand Guide
- U.S. Web Design Standards
- Apple iOS Human Interface Guidelines
- Visual Style Guide — Web Fundamentals
- Google Material design guidelines
- Salesforce Lightning Design System
- 设计规范如何写？这20个精选案例让你大开眼界 | 人人都是产品经理 [Last visited: 2015-11-06]
- HOWLIN YANG (2016). 如何訂定有效的Design Guideline [Last visited: 2016-08-21]
產品規格文件（BRD, MRD, PRD）撰寫[7]
- BRD 商業需求文件 Business Requirement Document
- MRD 市場需求文件 Market Requirement Document
- PRD 產品需求文件 Product Requirement Document
(left blank intentionally)
成長駭客
- 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: 下拉選單、核取按鈕
- 按鈕用途...
- 連結
- 使用者操作後的回饋訊息
references
- ↑ Cover Flow - Wikipedia, the free encyclopedia
- ↑ 只要十秒鐘，使用 Loading.io 製作 Loading 圖示
- ↑ HTML 5 <input> placeholder 属性
- ↑ 使用HTML5的Placeholder属性实现input输入框背景文字提示效果 – WEB骇客
- ↑ 6. Placeholders outside the CMS — django cms 3.0 documentation。
- ↑ 網頁介面A/B Test 筆記 (Google Analytics Experiments) – 花水木：文藝復興人生
- ↑ 產品經理（PM）一秒理解MRD、PRD、BRD | Cool SEO
further reading