全面了解B端產(chǎn)品設(shè)計(jì)：基礎(chǔ)掃盲篇

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

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

4. 技術(shù)特點(diǎn)

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

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

并且，除了完全獨(dú)立設(shè)計(jì)開(kāi)發(fā)的項(xiàng)目以外，還有大量的 B 端項(xiàng)目是采用第三方框架開(kāi)發(fā)而成的，如 Ant、SBadmin、Element 等等。這是因?yàn)檫@些第三方程序可以幫助團(tuán)隊(duì)節(jié)省大量的開(kāi)發(fā)時(shí)間和精力，避免重復(fù)造輪子。

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

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

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

1. 布局設(shè)計(jì)

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

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

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

比如常見(jiàn)的幾種布局類型：

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

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

2. 控件設(shè)計(jì)

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

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

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

3. 表單設(shè)計(jì)

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

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

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

4. 表格設(shè)計(jì)

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

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

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

5. 圖表設(shè)計(jì)

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

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

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

總結(jié)

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

文章標(biāo)題：全面了解B端產(chǎn)品設(shè)計(jì)：基礎(chǔ)掃盲篇
轉(zhuǎn)載注明：http://www.muchs.cn/news13/103263.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站改版、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、建站公司

廣告

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