乾貨貼:Web 後臺設計易被忽視的組件技巧

2020-12-14 人人都是產品經理

今天我們聊一聊哪些容易被忽視的 Web 設計組件技巧。

儘管現在各家都將產品設計的重頭放在移動端，但對於運營後臺管理系統，仍然會將 Web 端作為自己的兵家必正之地。對於有著精細化管理，最小顆粒的維護自己平臺商品、服務、企業信息的網際網路產品來說。Web 端的大屏、易於錄入讀取數據等優勢仍然是移動端不可取代的。那麼在 Web 端產品設計中，是不是存在一些容易被我們忽視的技巧呢？

後臺系統的設計原則和前臺系統的設計原則幾乎一致，雖然頁面的動效、配色方面可能不必像前臺那般精益求精。

產品的前端由於直接展示給用戶，因此往往對於圖片質量、頁面配色等都經過 UI 的仔細打磨，後臺產品則由於圖片少、文字多；內容展示少、表格多而在界面上慘不忍睹。作為後臺產品經理，雖說我們不用對每一處細節的仔細雕琢，但至少要審美在線。

關於後臺系統應該遵循的設計規範，如果各位有興趣，我們下一篇我們再講，本篇主要介紹在設計後臺系統時諸位肯定會用到的組件及其使用技巧。

一、基礎部分

基礎組件包含：頁面布局、顏色字體、圖標按鈕

布局

布局是前端工程師的分內職責，產品經理不必太多插手，但是對於布局有 2 個基本概念我覺得大家有必要了解。

  1. 柵格式布局：通俗來講就是在一個頁面上用橫向（水平線）、縱線（垂直線/參考線）將整個頁面劃分成有規律的格子。前端工程師以這些格子或它的邊線作為基準線有規律的布局。
  2. 響應式布局：就是指一個網站能夠兼容多個終端。通俗來講就是 Web 的內容根據預設響應式尺寸不同，可以在 IPad、手機等不同尺寸的設備上幾乎不影響體驗的看。一套優秀的響應式布局前端框架可以減少不少其他終端的代碼，還可以為不同終端的用戶提供更好更舒適的界面和用戶體驗。

顏色字體

為了給用戶一個前後一致的產品使用體驗，Web 後臺的顏色字體設計和前臺產品最好保持一致，也都需要 UI 確定顏色、字體相關的標準。

顏色的使用技巧 ：要定確定產品的主色、輔助色、中性色。

字體的使用技巧：需要確定產品的中文字體、英文/數字字體的樣式。有追求的產品經理在前端框架已定的情況下甚至還可以和 UI 一起商議字體的使用規範。主標題字體樣式大小、標題字體樣式大小 、正文字體樣式大小等。

圖標按鈕

圖標、按鈕的使用技巧：和顏色字體一樣，也需要事先確定好各個狀態下的按鈕狀態、顏色、尺寸

  1. 在同個頁面中，其默認按鈕、主要按鈕甚至包括文字按鈕的不同展現方式
  2. 當一個按鈕處于禁用狀態以及可用狀態下的樣式
  3. 頁面有：「發送成功」、「發送失敗」等不同反饋信息時其對應按鈕也需要在顏色、文案、樣式、尺寸上有所不同。

二表單填寫部分

表單控制項主要包含：單選多選、輸入框、選擇器、開關、日期控制項、表單校驗

表單填寫可以算是整個後臺系統重中之重，後臺管理系統本來就是對前臺信息的管理、展示。說白了就是四個字：增、刪、改、查，如何更加優雅的錄入信息，讓整個表單填寫過程流暢、可控的進行是一個優秀的後臺產品經理必須掌握的技能。

單選多選

單選/多選按鈕的使用技巧：均不宜選項過多

  1. 當一個問題的選項超過 5 個時，最好的選擇是使用選擇器
  2. 另外單選/複選按鈕還需要考慮其禁用、可用狀態下不同的按鈕展現樣式

輸入框

輸入框的使用技巧：當用戶輸入內容過多時，最好讓研發使用可自適應高度的文本域，這樣的使用體驗簡直嗖嗖嗖的提升。

針對一些有固定前置、後置內容的選項：可以採用複合型文本框，一方面可以減少用戶輸入，提升用戶體驗；另一方面哪些具有固定前置、後置內容的選項（比如網址）往往容易輸錯，可以一定程度上降低用戶的誤操作的概率。

選擇器

選擇器的使用技巧：當選項過多時，相比於複選框，選擇器也是個好選擇。

另外使用選擇器的時候還有個不能忽視的好處就是級聯選擇。即選擇第一項時級聯觸發第二項。讓用戶看到自己的選擇即改變，非常的簡潔容易上手操作。

表單校驗

表單校驗的技巧：對表單內核心內容進行校驗是表格信息錄入一個重要一環。一般用的比較多的是行內校驗，即填寫完一行轉入下一行時即對上一行內容進行校驗。

三、表格數據展示部分

當表格數據內容過多時，就會變得非常難看，如何讓信息展示的又全又好看，可以參考以下技巧：

表格數據展示技巧：其實大部分的數據展示都可以像管理 Excel 表格一樣管理起來，但需要一定的開發工作量，這裡可能需要產品經理平衡一下。畢竟魚與熊掌……。另外除了固定表頭外，排序：利用一定的排序規律讓數據變得有章可循，就不會顯得非常的凌亂；隱藏：將不必要的信息收起來也是不錯的選擇。

四、消息提示部分

頁面信息成功提交後，需要返回相關內容給用戶，否則會讓用戶一頭霧水不知道自己是否提交成功。

頁面消息提示：

消息提示技巧：根據提醒類型不同，設計不同顏色的反饋提示，讓用戶一目了然。 另外為了減少用戶操作，可以設置消息提示的反饋內容在幾秒後自動消失。

進度條：

進度條使用技巧：進度條可以帶狀態，也可以帶有描述性文字幫助用戶理解目前自己處於完成表單的第幾步。

Web 後臺設計中常用的控制項還有許多比如標籤模塊、各種各樣的消息彈窗模塊、導航欄模塊等因為篇幅有限這次就不展開介紹。

一個優秀的後臺產品經理雖然我們比不上前臺產品經理對於每一個細節精益求精的打磨，但是還是應該在嚴於律己、優化每一處我們力所能及的細節上付出努力。這樣在回首自己設計出的產品才會有種天生驕傲的成就感吧。

 

本文作者：晞仔（lolitaxi61）微信公眾號：晞仔的生活實驗室

歡迎關注我，一個熱愛搖滾的貓奴，每周跟您分享我對產品的一點微不足道的見解

相關焦點

  • 設計規範 | Web端設計組件篇-反饋類
    設計規範中最重要的部分就是組件規範了，制定組件的規範有哪些好處呢？高效簡單：熟悉了解組件的用法之後，在做界面設計時，只需要合理運用組件就可以快速搭建web端界面，高效無差錯。由於有成套的組件規範，所以在互動設計和視覺設計過程中無需每次都重複勞動。
  • 設計規範 | Web端設計組件篇-文本與選擇器
    ♝點擊上方「互動設計學堂」關注我們,送電子書根據組件的用途，可以分為六大類：Feedback 反饋、form 表單、basic 基礎
  • 米大師web改版之設計總結
    本文作者將對本次的米大師web改版設計進行了總結，主要是針對已知問題，從三個方面進行解決。一、項目背景1、米大師web是什麼？米大師web是計費平臺部為公司以及合作方提供的，web端泛娛樂業務支付解決方案。後臺以SDK包提供給業務，前端以支付彈窗形式適配所有業務場景。
  • 設計規範|Web端設計組件篇―樹和日期時間選擇器
    根據組件的用途，可以分為六大類：Feedback 反饋、form 表單、basic 基礎、data 數據 、navigation 導航、other 其他。表單在網頁中主要負責信息數據採集功能，用戶需要填寫輸入信息數據並且提交到後端資料庫，以此完成信息的採集，則這種組件就是表單組件。本文主要講解表單中的treeselect樹選擇、datepicker日期選擇器和timepicker時間選擇器。
  • [開源推薦]面向組件的Web框架tapestry
    tapestry是面向組件的開源框架，程式設計師可以使用它在Java、Groovy、Scala中創建動態、健壯和高度可伸縮的Web應用程式。與現有的其他Web應用程式框架而言，應用tapestry會讓程式設計師從繁瑣的，不必要的底層代碼中解放出來。
  • 聊聊Web Crawler
    如果你竟然真的看完了，請再次接受我的感謝，並誠摯的希望收到你的品評、意見和建議。======= 我是分割線 =======摘要曾在搜索領域發揮著重要的作用的web crawler，伴隨著大數據的興起，從搜尋引擎走入更多的系統架構中。本文是在我經歷了一次爬蟲項目後的一個資料整理，包含常規爬蟲結構，存在的問題，以及已有的商業化方案等。篇幅有限，僅做概要解析。
  • 入門Web開發者福音 React學習少走彎路的實用貼
    由Facebook開發，近年來發展迅猛的前端框架ReactJS（簡稱Reat）可以說已成為了基於組件GUI開發的標準庫。畢竟React的獨到之處就在於，它僅僅關注基於組件的GUI開發，而不涉及其他的領域。但是學好React並非易事，特別是對於剛剛入門Web開發的人來說。從一張由adam-golab創作超詳細的React開發者學習路線圖，開啟今天的知識分享貼。
  • ReactNative 的組件架構設計
    來開發 web 程序，本篇文章只能僅供參考，問題都沒有在 web 上去考慮過。官方建議設計模式：頂層容器組件才對redux有依賴，組件間通過 props 來傳遞數據。按照這樣設計還是沒有解決組件間交互和數據傳遞的問題。官方 react 設計建議：react 的設計建議：http://camsong.github.io/redux-in-chinese/docs/basics/UsageWithReact.htm4.
  • 給Android工程師的Java後臺學習建議
    作為一個原生Android開發，一路走來經歷了Java 、 Kotlin的洗禮；在「原生要涼」的氛圍下學習Cordova、ReactNative、Weex、Flutter 等跨平臺框架；之後又在「大前端」的口號下延伸到React、Vue 等前端框架的學習；最終面對「全棧」的誘惑，又擼起了 SpringBoot的 Java web 開發。
  • 設計師必備丨Web端響應式設計規範(2020版)
    距離上一期整理的移動端設計規範《也許是2020年全網最全的關於iOS、Android設計規範、適配總結文章》已過去140多天，得到了很多朋友的認同，這次我整理了響應式網頁設計規範，希望可以給大家帶來一定幫助。不足之處，還望斧正，祝閱讀愉快。 喜歡《蝸牛和筆》公眾號的朋友可以給個關注，會不定期更新乾貨和原創作品，感謝。
  • Web頁面設計工具千千萬,為何它備受青睞?
    199RMB /人/年 699RMB /人/終身團隊版 999 RMB /年 3999 RMB /終身企業版 5999 RMB /年 19999 RMB/終身Mockplus宣傳圖Mockplus是mockplus是一款免費，簡單且快捷的web
  • 零基礎入門Web前端,什麼樣的人適合學Web前端-開課吧
    曾經看過一段話：web大前端，坐擁網際網路IT時代的半壁江山！那Web前端的工作是什麼樣的呢？web前端的工作主要是客戶端的實現，也就是向客戶展示的一些內容，分為幾個方面，如前端美工UI、前端特效、前端交互、前端架構等。
  • 為什麼2017年Web前端開發工程師薪資越來越高?
    事實上，前端工程師在做的是：1、在設計師和工程師之間創建可視化的語言；2、根據設計稿定義一組代表內容、品牌和功能的組件；3、為Web應用程式的框架、需求、可視化的語言和規格設定基準；4、根據設備、瀏覽器、屏幕、動畫來劃分web應用的工作劃分；5、用QA基準來保證指南來確保品牌忠誠度、代碼質量、產品標準；
  • React中的樣式化:從外部CSS到樣式化組件
    在第三個主要版本中(第四個即將發布)，它通過添加新特性繼續增長，並保持了作為基本web技術的聲譽。CSS將永遠是web組件樣式化的黃金標準，但是它的使用方式每天都在變化。從我們可以建立一個網站的日子，從分割的圖像，到定製的，手工滾動的CSS可以反映與圖像一樣的時代，CSS實現的演變已經隨著JavaScript和web作為一個平臺的移動而增長。
  • 軟體項目實訓及課程設計指導——系統概要設計中的組件設計示例
    軟體項目實訓及課程設計指導——軟體系統概要設計中的組件設計示例1、UML技術規範中的UML組件及UML組件圖UML技術規範中的組件是軟體應用系統的一個物理單元，它代表軟體應用系統中的一個物理實現的功能模塊——在Java技術平臺中一般為一個*.jar包文件。
  • web表格設計攻略
    在後臺管理系統、數據類產品等的設計中，表格作為一種常見的信息組織整理手段，甚至是web頁面的基礎設施之一，其重要性不言自明。表格的用途表格是常見的信息組織手段，是web頁面布局的重要組成部分，可用於保存和展示少量或大量結構化數據、靜態數據以及處於變化中的數據。
  • Web前端知識體系梳理，值得收藏
    前言現在是資訊時代，經過 web1.0 時期、web2.0 時期到現在的移動網際網路時期，信息獲取越來越高效，坐著不動就會有大量的新聞、博客、資訊向你推薦而來。作為一名靠譜的程式設計師，你免不了要查閱大量的文章、視頻和書籍來充斥你的知識量，不斷學習。但是現在網上大量的信息堆積起來，對於你來說意味著什麼？
  • guns-lite 發布了姊妹項目 web-flash,前後端分離的後臺管理系統
    了解guns-lite的同學都知道這是個完善的後臺管理系統，包含了後臺管理的基礎功能。該框架包含兩套系統，一套前後端分離，一套不分離（單體）應用。隨著功能的完善和擴展，不同應用的差別逐漸增大，為了更方便的維護兩個版本，現將兩個版本拆成兩個不同的項目：guns-lite:致力於基於SpringBoot2和Bootstrap/Beetl的非前後端分離的後臺管理系統的維護。
  • 圖標、組件、字體,超實用設計乾貨大合集
    最新一期的設計圈實用乾貨大合集來了！和以往類似，11月的乾貨合集當中，涵蓋了一些實用性頗為不錯的設計工具和開發工具，但是最實用的始終是各種圖標、組件、還有字體，下面具體看看吧： The Good Line-Height https://www.thegoodlineheight.com/
  • Erupt Framework 正式開源,後臺管理框架
    後臺管理系統非常重要，但開發存在一定的痛點，如：開發效率低、界面不美觀、交互不理想、工作量重複、存在安全漏洞、後端研發被迫寫前端代碼等。Erupt提供企業級中後臺管理系統的全棧解決方案，提供超多業務組件，簡潔美觀的後臺頁面，支持23類數據組件，多種數據源支持，嚴密的安全策略，壓縮研發周期，降低研發成本。