前言

1销斟、本視覺指導適用于MPOS WEB端

2蚂踊、本視覺目的使前端同學可以參考自行設計開發(fā)犁钟，減短開發(fā)周期

3、本設計稿主要基于1024*768px設計炬灭，但由于終端版本復雜米愿，請在設計時充分考慮適配性

4育苟、本視覺指導中的標注若非特殊標注皆為二倍圖下尺寸

5违柏、為了更好的用戶體驗漱竖，請相關同事在設計及實現(xiàn)界面時能嚴格參照本指導

布局 Container

a.基本布局

b.柵格系統(tǒng)

去掉兩邊頁邊距后，操作區(qū)寬度為黃金標準寬度960px烤礁。

960到980像素是最適合人眼視覺接受范圍的寬度勤众，且和傳統(tǒng)的1024×768像素的顯示器分辨率相匹配们颜，能最大限度的發(fā)揮其長處窥突。

將頁面均分成24列梧税，且固定安全距離=1/2槽第队，得出公式24n-i=940；

注：瀏覽器在一定范圍擴大或縮小尸执，柵格的欄寬度會隨之擴大或縮小如失，但槽的寬度值固定不變。

色彩 Colour

a.功能色

功能色代表了明確的信息以及狀態(tài)，比如成功橄镜、出錯洽胶、失敗、提醒翔横、鏈接等禾唁。

b.中性色

中性色主要被大量的應用在界面的文字部分丐枉。通過運用不同的中性色瘦锹，來表現(xiàn)內容的層次結構。

字體 Typography

a.字體

由于線下門店pos機版本復雜，中文&英文字體按下圖排列優(yōu)先級順序顯示辫红。

b.字號

應用：16px：菜單欄、標題名惩、Tab； 14px：下拉框弯予；

? ? ? ? ? 13px：分頁組件；12px：表格呼寸、按鈕、表單

圖標 ICON

插畫 Inset

按鈕 Button

a.基本

1）按鈕尺寸對寬度不進行限制糟趾，高度分為 small 和 medium 兩種慌植，small 尺寸用于常規(guī)的表單和頁面甚牲；medium 則用于更加醒目的CTA按鈕，例如：登錄按鈕

當按鈕文字是兩個字的情況蝶柿，文字中間要添加空白字符

2）按鈕位置及間距

返回按鈕固定在頁面底部丈钙，保存類針對模塊的按鈕緊隨在此模塊底部。

3）禁用狀態(tài)

4）組合按鈕

當表格容量有限交汤，而按鈕個數(shù)又過多時星岗，可以考慮使用組合按鈕

組合按鈕沒有禁用狀態(tài)寥掐，當其不可用時則不予顯示

b.一級按鈕

c.二級按鈕

表格中的按鈕通常采用二級按鈕

當頁面存在很多兩個及兩個以上同一類別的按鈕時庶弃，可根據按鈕的優(yōu)先級順序掉伏，將優(yōu)先級靠后的按鈕定義為二級按鈕

彈窗 MessageBox

彈窗用于消息提示、確認消息和提交內容。

根據終端尺寸和分辨率進行響應式布局，寬度通常占頁面的43%-80%，高度占頁面的80%以下

提示 Message

a.提示反饋

通常為一個操作引發(fā)的不打斷用戶操作的輕量級提示方式适袜，位于頂部居中顯示冕房，需用戶手動關閉详拙；

對于結果反饋類的提示通常采用toast的形式弃揽，3秒后自動消失（通常距上邊距20px）掖举；

對于比較重要的提示励负，建議改用對話框的形式進行通知攒发，以避免用戶遺漏信息。

b.確認提示

通過一個操作引發(fā)的反饋浮層扼鞋，位于頁面中心，可通過確認或取消按鈕進行關閉影涉，

在對提示彈窗進行交互前，用戶不可進行其他任何的操作，用于重要的反饋馅而，例如刪除前的確認维哈。

c.氣泡卡片（Popover）

當空間容量有限，卻存在較為詳細的描述和相關操作時谐腰，可以將其收納到卡片中衅疙，通過鼠標hover進行展示绩郎。

與文字提示的區(qū)別是可以承載更復雜的內容，比如鏈接或按鈕等帝簇。

d.文字提示（Tooltip）

常用于展示鼠標 hover 時的提示信息纸巷，不承載復雜文本和操作竖伯。

e.錄入提示

通常用于表單中婚惫，通過提示讓用戶及時發(fā)現(xiàn)并糾正錯誤蒋川。隨著用戶的交互行為而改變，不會自動消失。

f.加載提示

分散用戶在等待過程中的注意力，減少用戶的等待感濒析。

組件 Element

a.輸入框

b.單選框

不宜展示過多選項，若選項過多啥纸，可使用選擇器号杏；

需要提高注意力（例如收銀）的模塊，可以使用特殊樣式進行切換斯棒。

c.復選框

單個復選框可以表示兩種狀態(tài)之間的切換盾致。

d.開關

表示兩種相互對立的狀態(tài)間的切換

e.計數(shù)器

僅允許輸入標準的數(shù)字值，可定義遞增遞減的步數(shù)控制

f.時間日期選擇器

為用戶提供了一種直觀的方式去瀏覽和選擇一個日期或者日期范圍荣暮。

可以在同一個選擇器中選擇時間和日期庭惜，也可以分別選擇。

g.滾動條

當將頁面及表單高度固定為限定值時穗酥，未展示完全的部分通過拖動滾動條展示护赊；

盡量避免頁面和表格同時使用滾動條，造成滾動條嵌套砾跃；

當因表格過長而造成內容顯示不全時將滾動條放置在表格內骏啰，固定表格寬度；

若頁面剩余表格顯示區(qū)域過小時蜓席，將本頁表格內容顯示全器一，而滾動條則放置于頁面上。

h.標簽

可通過添加按鈕或下拉菜單添加厨内，通過自身的刪除icon移除

i.分頁

當數(shù)據量過多時祈秕，可以通過分頁來分解數(shù)據

j.折疊面板

通過折疊面板收納內容區(qū)域，可同時展開多個面板雏胃，面板之間不影響请毛。

導航 Navigation

a.導航菜單

采用靈活的側邊導航，更易于向下擴展瞭亮，類目數(shù)量不限方仿，易可配合滾動條使用，適合mpos這種信息層級較多统翩、切換頻率較高的應用仙蚜。

b.面包屑導航

面包屑導航可以顯示通往當前頁面的路徑，快速返回之前的任意頁面厂汗。

注： 1. 層級過深時委粉，建議做隱藏處理，頁面顯示保持在三級以內娶桦，最多不宜超過五級贾节；

? ? ? ? 2. 如果當前頁面的導航能清晰的告訴用戶他在哪里時汁汗，盡量不要使用面包屑導航。

c.標簽頁（tabs）

通過把大量信息進行分類展示栗涂，得以在有限的顯示區(qū)域內展示更多信息知牌，

用戶可以方便地切換標簽，而不必跳轉頁面進行比較瀏覽斤程，分類標題長度為 2-6 個中文字角寸。

d.步驟條（Steps）

引導用戶按照流程完成任務的導航條，可以幫助用戶對操作流程長度和步驟有預期忿墅，并且知道自己當前在哪個步驟袭厂，同時也可以對用戶的任務完成度有明確的度量。

步驟多于 2 步時使用, 但建議不超過 5 步球匕，每階段文字長度保持在 12 個字符以內。

表格 Table

a.概述

當頁面容量有限而表格內容過多時帖烘，可以配合滾動條一同進行操作亮曹；通過固定列或固定表頭來方便用戶進行對照尋找數(shù)據。

非特殊情況秘症，文字盡量不換行

b.動態(tài)顯示

將鼠標移至可進行動態(tài)顯示的表格表頭的分割線照卦，懸停出現(xiàn)編輯按鈕，表格寬度可以自由拉伸乡摹。

c.表格組合

當出現(xiàn)可同時針對表格的所有行進行的操作時役耕，為避免按鈕重復，可將表格與全選組件進行組合使用