在今天，互聯(lián)網(wǎng)的影響力與作用與日俱增，除了我們?nèi)粘Ｉ铑I(lǐng)域的改變以外，對于商業(yè)領(lǐng)域的滲透也見效頗豐。

越來越多的企業(yè)開始使用數(shù)字化的解決方案來助力企業(yè)發(fā)展，包括日常管理、運營、統(tǒng)計等等?；蛘咄ㄟ^互聯(lián)網(wǎng)的方式開發(fā)出新的業(yè)務(wù)形態(tài)，進行產(chǎn)業(yè)升級，如這幾年風頭正勁的「新零售」領(lǐng)域，即通過互聯(lián)網(wǎng)對傳統(tǒng)零售業(yè)升級和改造的嘗試。

4. 技術(shù)特點

和手機客戶端不同的是，網(wǎng)頁可以隨意的更改寬度，顯示內(nèi)容區(qū)域差距極大。往往我們既要考慮 1024px 的正常顯示，也要考慮在 2560px 寬下的顯示效果。那么，這就需要設(shè)計師對于前端的知識和框架有深刻的理解，因為沒有這方面的知識，那么頁面的自適應(yīng)布局設(shè)計將無從談起。

所以，設(shè)計師在進行 B 端設(shè)計前，要能熟練掌握 HTML5 和 CSS3 的內(nèi)容，并能理解 JS 對于頁面布局的計算方法。

并且，除了完全獨立設(shè)計開發(fā)的項目以外，還有大量的 B 端項目是采用第三方框架開發(fā)而成的，如 Ant、SBadmin、Element 等等。這是因為這些第三方程序可以幫助團隊節(jié)省大量的開發(fā)時間和精力，避免重復(fù)造輪子。

而設(shè)計師需要根據(jù)這些第三方框架的特性對頁面進行設(shè)計(類似換膚)，掌握前端的知識越扎實，那么設(shè)計的過程也就會越順利。

實際上，B 端的設(shè)計內(nèi)容是可以拆分成若干模塊的，每個模塊都有特定的知識點和理論需要掌握。所以最后，就來分享一下做 B 端設(shè)計時我們具體在設(shè)計什么內(nèi)容。

B端設(shè)計的內(nèi)容

1. 布局設(shè)計

B 端產(chǎn)品，就是一套商業(yè)系統(tǒng)，在這個系統(tǒng)需要包含眾多的信息和操作功能，而設(shè)計的任務(wù)之一，就是定義一套布局框架，將信息和操作功能整合進去，實現(xiàn)有序、統(tǒng)一的操作體驗。

通常，管理界面的布局會包含以下幾種固定的內(nèi)容：

• 導(dǎo)航
• 狀態(tài)欄
• 內(nèi)容區(qū)域
• 彈窗/邊欄

比如常見的幾種布局類型：

當然，布局的設(shè)計遠不是到這里就結(jié)束了，除了部分具體的字段、鏈接以外，我們還要將自適應(yīng)的前端技術(shù)考慮進去，如何在拉伸瀏覽器的同時，保證這套布局的正常使用。

比如在今天最主流的適配方式就是通過 CSS 刪格等分體系，但這是一個非常復(fù)雜的話題，我們以后討論。

2. 控件設(shè)計

作為 UI 設(shè)計的一部分，控件的設(shè)計自然也少不了。多數(shù)控件的設(shè)計和一般

這部分內(nèi)容設(shè)計起來沒有技術(shù)難點，但我們前面講過，B 端產(chǎn)品在交互反饋上的需求，使得我們對控件進行設(shè)計時要充分考慮它們的狀態(tài)。

例如，一個按鈕可以包含默認、鼠標懸浮、點擊、已點擊、不可點、加載中等多種狀態(tài)，這些狀態(tài)設(shè)計得越全面，則操作的體驗就越好。

3. 表單設(shè)計

表單是一個接觸頻率非常高，但對新人來說很陌生的詞匯。簡單點理解，它就是用來在界面中鍵入信息的控件的合集。比如輸入框、復(fù)選框、單選框、下拉選框等等。

在 B 端設(shè)計中經(jīng)常需要用一系列的表單控件組成一個完整的業(yè)務(wù)操作，比如在后臺創(chuàng)建一個用戶賬號，可能就需要通過在輸入框輸入用戶名、密碼，然后用單選框選擇性別，復(fù)選框選擇愛好，日期下拉菜單選擇生日等等。

或者，我們還會使用表單的內(nèi)容進行高級的篩選操作，通過不同的表單控件來設(shè)置篩選條件，縮小結(jié)果的范疇。

4. 表格設(shè)計

在 B 端產(chǎn)品中，數(shù)據(jù)主要通過表格的形式展現(xiàn)。而多數(shù)設(shè)計師對于表格的理解一無所知，甚至連 Excel 都沒有用過。

表格是 B 端產(chǎn)品呈現(xiàn)信息和數(shù)據(jù)最重要的組件之一，無論是用戶、產(chǎn)品、訂單或者記錄，我們都需要依靠表格的展現(xiàn)形式進行梳理。

但是，表格的設(shè)計并不只是枯燥的畫好線條方格，而是要根據(jù)業(yè)務(wù)的屬性、字段的類型和顯示數(shù)量靈活的調(diào)整，以及還要考慮如果對每一條數(shù)據(jù)進行編輯、選中、移動等操作的交互方式。

5. 圖表設(shè)計

最后，就要講講圖表的設(shè)計了。在大數(shù)據(jù)概念大熱的今天，人們對數(shù)據(jù)的重視度越來越高，無論是在新聞還是在會議的 PPT 上，我們都會看見各種各樣的數(shù)據(jù)內(nèi)容。而這些數(shù)據(jù)，通常都以圖表的形式呈現(xiàn)。

常見的圖表包含折線圖、扇形圖、柱狀圖、曲線圖等等，比較常見。但是，有一個普遍的謬誤是，很多新手錯誤地將圖表的設(shè)計理解成數(shù)據(jù)可視化設(shè)計。數(shù)據(jù)可視化是將數(shù)據(jù)以更復(fù)雜、多樣的方式表現(xiàn)出來，不僅在設(shè)計上難度更高，且需要極其高昂的開發(fā)成本，我們會在后續(xù)的內(nèi)容里說明。

所以，在 B 端設(shè)計中，我們對數(shù)據(jù)的展示只要專注于了解主流的圖表類型，并明白如何根據(jù)數(shù)據(jù)展示的需要對它們進行運用即可。

總結(jié)

以上就是關(guān)于 B 端設(shè)計掃盲的第一篇內(nèi)容，簡單地對管理平臺的設(shè)計進行掃盲，讓大家有一個初步的認識，并對一些錯誤的想法進行糾正。

當前題目：全面了解B端產(chǎn)品設(shè)計：基礎(chǔ)掃盲篇
文章分享：http://jinyejixie.com/news/103263.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、軟件開發(fā)、定制開發(fā)、外貿(mào)建站、網(wǎng)站設(shè)計公司、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)