PC端、WEB前段UI交互布局規范
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
分享工作中，中后臺產品前端的一些交互規范。 通常來說，產品和前端同學約定好組件樣式，在繪制原型時非必要不提一些天馬行空的交互想法，一方面組件樣式的開發需要花費大量的開發工時；另一方面新的組件不一定經得起考驗，可能存在bug或者性能上的壓力。 PC端交互布局規范有利于工作時便于雙方理解，減少溝通成本。一個好的規范可以提高原型的完整度，約束產品人去豐富其審美和觀感。 1 排版原則 Robin Williams在《寫給大家看的設計書》中總結了排版設計的四大原則，對所有互聯網設計工作具有指導意義，在原型設計和高保真設計工作中可以將這些知識靈活使用，以提升產品的體驗和美觀度。 1、對齊 ? 文案類：如果頁面的字段或段落較短、較散時，需要確定一個統一的視覺起點。? ? 表單類：冒號對齊（右對齊）能讓內容鎖定在一定范圍內，讓用戶眼球順著冒號的視覺流，就能找到所有填寫項，從而提高填寫效率。? ? 表格類：表體數據默認的對齊原則：? ????? 文本對齊方式一般為左對齊；? ????? 數值、金額靠右，表頭文字右對齊處理；? ????? 合并表頭居中顯示文字。? ????? 操作列：居左。
2、對比 ? 主次對比：當有多個操作按時，突出當前狀態下用戶最想操作的按鈕。? ? 信息層級：頁面上的信息通過組隊后，一定會有需要的側重點。拉開內容間的差距，使頁面更有層次感，用戶可分層級獲取想要的信息。
3、一致性 ? 顏色：網頁上顏色不能夠濫用，會導致視覺疲勞或無法突出重要內容，如主題色可以用于文字鏈接、按鈕、導航等多處顯示。? ? 空間：間距上需要有一致性，規律的排版可以方便設計開發工作和提升用戶的頁面閱讀體驗。? ? 文案：文案的使用和排版格式具有統一性可以明確內容層級關系，提升閱讀效率。
4、親密性 ? 邏輯關系：有邏輯關聯的按鈕或內容，可以做進行分組，如：啟用 / 禁用、完成 / 取消。? ? 表現形式：距離拉大或縮小，顏色統一或區分，大小一致或區分。
2 文案規范 設計網站時需要注意文案使用是否恰當，應遵循以下要求：1）語氣平等親和；2）字句精簡，不贅余；3）用詞一致，同一產品中的相同相近場景用詞應具有統一性。 文案格式 ??計量單位通常使用符號顯示，如kg、m、h、min。但有多意的符號謹慎使用，如￥也表示日元，t 表示噸和排量。數字間使用半?符號，一般調整至英文輸入法打字即可。? ????? 前端展示，數字按三位逗號分隔?
? 中文請勿使用斜體，會顯著影響閱讀速度。可通過字重、顏色、大小和符號來進行文案排版設計。? ? 標簽、標題、氣泡、表格、及輸入框提示語，結尾不使用句號。? ? 文案表示省略時，一般使用... 按鈕文案 按鈕文案應保持最精簡的狀態，它的操作對象是明確的，不必在按鈕中再強調這點。
說明與提示 ? 文案足夠精簡，讓用戶在最短的時間內理解情況，做出判斷。
? 描述足夠清晰，確保無錯誤和歧義。
3 文字規范 字體 字體是 UI 設計中最基本的構成之一。字體系統的建立主要解決的是內容可讀性以及信息的表達，同時選擇不同的字體傳達不同的設計思格。通過定義字體的使用規則在設計上達到統一性和整體性，從而在閱讀的舒適性上達到平衡。 行寬 ? 行寬 / 行高：是指一行字的高度。計算行寬的簡單方法，使用 Robert Bringhurst 的方法：行寬 = 字號 x 30。如果定義網站的基礎字號為 14px，那么最適宜基礎行寬為：14（字號） x 30 = 360px （行寬）。較適宜的寬度為 40-70 個字符。? ? 從生理結構分析，人在閱讀文字的時候，理解并傳遞到大腦的信息是有限的。用戶在閱讀時，目光左右上下巡視、掃描和閱讀，這意味著閱讀要求大量的眼球運動。行寬越大，眼睛移動的距離太寬太多。寬度較大，眼動位移較大，讀者閱讀換行時容易串行。? ? 行寬越短，眼睛閱讀折行的次數太多。行數較多，眼動跳躍次數多，讀者閱讀行時會感覺到文字不連續。 行高 ? 行距 / 行高：Photoshop 里為從一行文字的底部到另一行文字底部的間距。但在前端代碼實現上， 行距會自動平均分配到文字上下端，因此這里說的行距 / 行高為每行字體占用的高度空間。? ? 行間距：從一行文字的底部到另一行文字頂部的間距。? ? 行距（行高) = 字號 + 行間距? ???? 例如：字號 24px，行距 / 行高為 32px，根據 web 頁面平均分配原則，行距就是從文字的頂端上移 4px 到文字底部下移 4px 的距離。 4 配色規范
5 交互設計規范 列表頁 ? 按鈕：顯示在列表表頭上方，獨立一行顯示，按鈕順序根據優先級排序，最多顯示3個按鈕，超過3 個用【更多】。如果按鈕無主次，可全部使用次級按鈕。表頭字段必須顯示完整。
? 查詢條件統一都需要有【重置】按鈕。 ??列表頁【重置】按鈕定義：重置的是查詢條件，清空/恢復默認值可根據實際項目需求自定，重置對表格數據不起作用，重置完成后再點擊查詢才會更改表格顯示內容。?? ? 點擊【重置】后，立即查詢 ? 查詢和重置按鈕，默認居右展示（只有1個查詢條件的除外，緊挨查詢條件展示），如果查詢條件填滿某一行，放不下就換一行靠右展示。? ? 查詢條件默認展示兩行，超過兩行查詢條件自動折疊，展示展開按鈕，支持展開和收起查詢條件。 ? 下拉框支持搜索過濾功能，包括下拉單選和下拉復選框。
? 列表頁數據行操作列按鈕，統一超鏈接文字展示，最多展示三個，超過三個自動折疊，顯示更多， 常用操作居左，需謹慎操作的按鈕突出顯示，并且需有二次確認操作。? ? 數據列無法一屏展示，展示水平滾動條時，操作列默認凍結展示。
? 列表頁數據表頭右上?位置，展示列表操作icon，比如頁面刷新和列字段管理，可以對列表數據進行管理；
? 表格內容緊湊展示，適配至少兩種屏幕分辨率? ? 滑動時，表頭固定在頂部 查詢條件 下拉選? 1. 不要「全部」選項，想要實現“全部”，不選即可。? 標題展示 1. 前端實現輸入框獲取焦點時，placeholder自動上移 日期組件 1. 日期選擇條件，只支持日期范圍或單個日期，原則上不允許同一個頁面上交叉使用，若要使用日期范圍選擇一天，那開始日期和結束日期相同即可 2. 日期范圍選擇器，如果不需要選擇時間，則默認開始日期的默認時間是00:00:00，結束日期的默認時間是23:59:59。該規范涉及到接口規范，協作時跟服務端溝通好 3. 日期組件高度固定，可能引起時間展示不全，暫不管，看用戶反饋 每行個數? 1. 固定每個元素的寬度，3個（帶日期范圍）或4個（不帶日期范圍） 查詢按鈕? 1. 當前行放得下，放到最右邊? 2. 當前行放不下，放到下一排的最右邊? 布局? 1. tab放置位置? ??? a. 如果查詢條件不同，相當于獨立頁面，tab放到頂部? ????b. 如果查詢條件相同，則tab放在查詢區域和（操作按鈕+table）中間，居左展示 滾動條? 1. 垂直方向或水平方向，只出現一個滾動條，且樣式保持一致? 2. 垂直滾動時，整個內容區域（包括查詢、表格）滾動，表格表頭固定到頂部時吸住? 3. todo：設置滾動條默認值 表格? 1. 表頭、內容緊湊 表單類 ? 必填項顯示的星號，統一放在title的左邊。
? 數據存儲、流程切換等情況，正向操作放在右邊，取消操作放左邊。如在表單填寫頁、彈窗中。
校驗? 1. 所有必填輸入框，如果只輸入空格，都算沒輸入，在提交時需要校驗。 頁面跳轉 ? 點擊新增操作打開表單填寫類頁面、查看數據表格的某一條詳情信息時，如果需要展示內容很少，在一個窗口內能顯示完全，可采用模態窗口展示而非獨立頁面。?
分頁器 ? 一頁就能展示所有數據的情況下，使用一屏展示方案； ? 如果一頁不能展示所有數據，使用tab展示方案；? ? 分頁/翻頁控件默認挨著列表table右下方展示。
選擇器 ? 當選擇器的選項可以選中全部時，一般增加選項【全部XX】，并且默認選中，等同選擇了所有其他選項。 ? 當選擇器只能選擇選項中的一個時，默認展示提示文案【請選擇XX】。? ? 選擇器支持下拉搜索，鼠標上移出現叉叉按鈕
小彈窗 ? 左邊圖標大小 20px * 20px? ? 字體大小：14px ? 右圖大小：10px * 10px ? 出現位置：頂部居中，與antdv默認保持一致
中彈窗 ? 左邊圖標大小 20px * 20px? ? 標題大小：PingFang Semibold ? 內容大小：14px ? 右圖大小：10px * 10px
大彈窗 ? 左邊圖標大小 20px * 20px? ? 標題大小：PingFang Semibold ? 內容大小：14px ? 右圖大小：10px * 10px
文本域 ? 支持提示控制文字高度數值
按鈕
（1）主按鈕 主按鈕為頁面中按鈕區最為核心的操作，在日常場景中，主要按鈕一般都為新建、編輯、保存這一類正向的操作，強調頁面中最為核心的功能，能夠讓用戶一看到主按鈕就明白大致在頁面中需要如何操作。 但在主按鈕的使用中，要遵循以下兩個原則：? ? 在頁面當中，按鈕區域的主按鈕最好只有一個，否則會對頁面的主要功能造成干擾。
? 并不是每一個頁面都需要有主按鈕，不要因為源碼缺失主按鈕而強行加上。因為在實際使用中，時常遇到按鈕之間為平級的關系，強行添加，容易造成頁面層級混亂。
在主按鈕中，按鈕狀態的設計也會跟隨物理世界進行相應的映射，因此在設計時需考慮現實生活中的狀態。? 比如用戶的懸停狀態時，一般都將按鈕抬起并亮度增加，其目的是為了提示用戶可以點擊，而用戶在按下時，用加黑來表示用戶按下的狀態，與現實生活中按鈕的狀態類似，因此按鈕狀態應該映射物理世界。 （2）次按鈕/標準按鈕? 次按鈕在頁面中出現最為頻繁，在日常使用中，如果你不太確定使用何種按鈕時，那使用它，大概率沒有錯。因為它運用廣泛，出現頻率也最高，因此也被人們稱為標準按鈕。 （3）文字按鈕/鏈接? 文字按鈕為頁面中視覺層級較低的按鈕形式，因而可以在頁面中大面積的重復使用，文字按鈕與鏈接基本一致，且沒有太多區分，所以在設計上，文字按鈕與鏈接基本相同。? 文字按鈕重復的出現，以表格頁面當中的操作列表最為突出，因為表格當中常用的操作最好能夠直接展現出來，因此表格中基本都采取文字按鈕的形式。
（4）按鈕菜單? 按鈕菜單為設計中許多操作的集合，通常是將高頻的操作以及一些低頻的操作進行整合，組成的按鈕菜單。這樣既能夠減少頁面元素的冗雜，同時也能夠滿足業務對于功能的需求。
舉個例子，在表格設計當中，B端設計師最常用到的按鈕菜單就是新建，這類新建按鈕其實是必不可少的，同時業務需要，還需要多個業務按鈕進行展開，按鈕菜單的出現，幫助用戶進行按鈕的整理， 同時也滿足業務需求。 （5） 危險按鈕? 危險按鈕在刪除操作中最為常見，通常是為了警告用戶，這個數據刪除不可恢復，讓用戶謹慎考慮。在常見的刪除操作中，都需要用戶進行再次確認，避免失誤操作。 可能造成損失的操作，特別是破壞性操作，如果不是用戶期望點擊的按鈕，應該盡量遠離常用按鈕。? 如果此時主按鈕放在左邊，危險按鈕就放右邊，反之亦然。
END 該文章在 2024/11/14 12:30:08 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
?
