全面了解 B 端產品設計:基礎掃盲篇 - 優設網 - UISDC

全面了解 B 端產品設計:基礎掃盲篇

2019/08/05 18422評論 9

在今天,互聯網的影響力與作用與日俱增,除了我們日常生活領域的改變以外,對于商業領域的滲透也見效頗豐。

云南体彩网越來越多的企業開始使用數字化的解決方案來助力企業發展,包含日常管理、運營、統計等等。或者通過互聯網的方式開發出新的業務形態,進行家當升級,如這幾年風頭正勁的「新零售」領域,即通過互聯網對傳統零售業升級和改造的測驗考試。

和移動互聯網大潮一樣,企業互聯網化也是大勢所趨,是公認的萬億級市場,而這場改變才剛剛進入初級階段,充斥了非常多的機遇與想象空間。

所以 B 端的產品和需求在近兩年呈井噴式的發展,對于 B 端界面的視覺和交互要求也與日俱增。掌握 B 端的設計,是今天 UI 設計師的需要條件,也可以增加我們的求職廣度和職業競爭力。

B端產品是什么

在國內,行業習慣將互聯網產品劃分成「B2C」或者「B2B」,B2C 全稱是 Business-to-Consumer 即企業到客戶的服務,B2B 全稱是 Business-to-Business,即企業對企業的服務。還會進一步縮寫成「2C」或「2B」。

C 端產品,是面向終端消費用戶的產品,對于使用者而言主要是用來滿足自己的日常生活實踐需求,例如娛樂、消費、學習、出行等等。

而 B 端產品,是面向企業用戶的產品,用戶通過它進行日常的商業活動,例如企業庫存管理,銷售統計,員工出勤考核等等。可以說,用來解決企業需求的產品,都是 B 端產品。

云南体彩网雖然面向企業的產品對于新手來說很陌生,聽起來也很枯燥,但是 B 端產品的覆蓋范圍是非常廣泛的。因為分歧企業所處行業和業務形式分歧,所以對 B 端產品的要求差別極大,產品運行的平臺可能是手機,也可能是平板、定制安卓設備、桌面客戶端、網頁法式等。

云南体彩网對于新手來說,要一口氣掌握所有類型的 B 端產品是不切實際的,所以我們挑選其中應用最廣泛的「網頁法式」作為切入點。而且在國內互聯網語境中,B 端產品的狹義解釋也基本可以和面向企業的「網頁法式」等同,用更接地氣的稱呼,即是管理平臺。

云南体彩网管理后臺已經是今天 UI 設計師日常工作中必備的內容,相信很多已經在職的設計師已經有所體會。下面,我們就來具體認識一下 B 端的管理平臺設計有哪些基礎知識需要掌握。

常見的B端產品類型

在 B 端產品中,我們需要先認識幾個最常見的業務類型。它們分別是:

1. ERP(Enterprise Resource Planning,企業資源計劃)

ERP 是對企業所擁有、調動的資源進行統一管理的平臺,包含商品的供應鏈,銷售審計,庫存管理,成本核算等等,是今天實業領域必備的系統。

云南体彩网例如,一家連鎖零售商,首先以特訂價格購入某貨物,該貨物被運輸到倉庫進行驗收,然后貨物再次運送到某家門店,并于特定日期以特訂價格售出。那么系統可以追蹤該貨物的整個銷售狀況,并可以統計出最終的利潤。

比較有代表性的 ERP 系統有用友、金蝶等廠商的產品。

2. OA(Office Automation,辦公自動化)

OA 系統是通過法式的形式使辦公流程自動化的解決方案,是一個企業除了生產控制之外的一切信息處理與管理的集合。

常見的使用場景:你做了一份報表需要領導審批確認,而且在確認后發給相關的責任方,那么當你在系統提交這份文件后,領導在系統中只要審核通過系統就會自動分發并備份,增加內部文件流通的效率。

比較有代表性的 OA 系統服務商有泛微、藍凌、致遠等廠商的產品。

3. CRM(Customer Relationship Management,客戶關系管理)

CRM 是企業專門用來管理客戶的工具,尤其對于零售服務行業來說,能更好的維系和客戶之間的關系是提升銷售額和復購率的重中之重。

云南体彩网在日常生活里,我們在商店里辦的會員卡,還有填寫的用戶資料,就是記錄到 CRM 系統中,后臺可以查看和統計客戶數據,消費額度,賬戶余額等等。多數情況下,我們手機收到的品牌促銷推廣,就是由 CRM 系統操作的。

云南体彩网比較有代表性的 CRM 產品有 Salesforce 和易享銷客等。

4. SAAS(Software as a Service,軟件即服務)

SAAS 是一個比較寬泛的概念,通常它指第三方提供給企業的線上軟件服務,它既可以包含前面幾種服務類型,也可以是一些更細化的需求。SAAS 是這幾年發展最迅猛的 B 端服務類型。

云南体彩网例如,中小團隊會使用一些 SAAS 軟件來進行團隊協作,如發布、追蹤任務,分享內部文檔和即時溝通等等。

比較有代表性的 SAAS 產品有 Teambition、Tower、Slack 等。

5. CMS(Content Manage System,產品后臺)

產品后臺是每一個互聯網產品都必備的系統,也是 B 端產品中最常見,數量最多的管理平臺。我們通過這個后臺系統對前端的產品進行管理,包含發編輯內容,處理用戶,統計數據等。

云南体彩网好比在社交應用內通常有一個舉報按鈕,用戶可以舉報違規內容,而這個舉報的信息就會在產品后臺中有對應提示,操作人員就可以進行審核并做出處理。

B端和C端的區別

接下來,我們就要談談有關設計的問題了,因為 B 端產品服務的對象分歧,所以它和 C 端的設計有一定的差別,下面來分析一下它們之間的區別。

1. 需求特點

云南体彩网對于 B 端的產品來說,要解決的問題通常都是比較明確、顯性的。好比前面提到的零售公司在日常運營中需要記錄產品從買入到賣出的流程和數據,產品制定功能時就會緊緊圍繞這個目標展開。

可以說,B 端和 C 端產品在需求上最大的分歧,就是為了解決問題的主體對象分歧。C 端產品是為了解決用戶的需求,從功能的制定到交互和設計都圍繞目標用戶展開。而 B 端產品要解決的是企業運營的問題,以完整的實現目標功能為核心,往往是要用戶犧牲體驗去適應功能,而不會為了體驗去刪改功能。

分歧于一些簡單的 C 端項目,即使對需求內容沒有什么理解,只要拿到了產品的原型也能輕松完成設計。而 B 端的需求往往非常的復雜,一個界面或者組件會有非常多分歧的狀態和細節變更,且操作內容相互交叉,在我們對需求缺乏理解的時候,做出來的設計只會漏洞百出。

2. 交互特點

云南体彩网對于一般的 C 端產品來說,產品通常只是用來獲取信息的載體,我們通過操作界面來獲取商品、視頻、動態、新聞等內容。很多時候,會將部分操作狀態、交互方式進行隱藏,以更好的展示內容。

但在 B 端產品中,雖然信息的展示也很重要,但更重要的目的是通過一系列的操作去篩選或者處理信息。因為這些操作往往步調比較多,且可操作的選項也多,所以產品對于交互要有更清晰明確的反饋。

云南体彩网例如,可操作的功能都要羅列展示出來,鼠標懸停,跳轉,狀態變革等等也要有對應樣式,而且許多操作步調需要通過文字提示告知用戶結果。和 C 端的交互比起來,雖然 B 端產品會顯得「啰嗦」,原因就是為了給用戶帶來更準確的操作感受,不讓用戶去「猜」或者刻意「探索」小細節。

3. 設計特點

云南体彩网當我們面向 C 端用戶設計的時候,往往需要增加一些額外的視覺元素來涌現品牌和情感化的表達,而且也要去滿足目標用戶的個性化需要,所以多數 C 端產品看起來會顯得「花哨」。

而 B 端產品是為了解決企業的問題,是需要用戶長時間操作并完成工作任務的,對于操作和展示內容無關的元素,越少越好。很多新人會熱衷于下方這類以 C 端視覺標準進行設計的管理界面,但它們對于真實的使用體驗來說顯得過于冗余。

優秀的 B 端界面設計在視覺的表示上一定是克制、簡潔、干練的,因為超出操作需要的視覺元素越多,對于用戶認知的負擔就越重。

4. 技術特點

云南体彩网和手機客戶端分歧的是,網頁可以隨意的更改寬度,顯示內容區域差距極大。往往我們既要考慮 1024px 的正常顯示,也要考慮在 2560px 寬下的顯示效果。那么,這就需要設計師對于前端的知識和框架有深刻的理解,因為沒有這方面的知識,那么頁面的自適應結構設計將無從談起。

所以,設計師在進行 B 端設計前,要能熟練掌握 HTML5 和 CSS3 的內容,并能理解 JS 對于頁面結構的計算方法。

而且,除了完全自力設計開發的項目以外,還有大量的 B 端項目是采取第三方框架開發而成的,如 Ant、SBadmin、Element 等等。這是因為這些第三方法式可以贊助團隊節省大量的開發時間和精力,避免重復造輪子。

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

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

B端設計的內容

1. 結構設計

云南体彩网B 端產品,就是一套商業系統,在這個系統需要包含眾多的信息和操作功能,而設計的任務之一,就是界說一套結構框架,將信息和操作功能整合進去,實現有序、統一的操作體驗。

云南体彩网通常,管理界面的結構會包含以下幾種固定的內容:

  • 導航
  • 狀態欄
  • 內容區域
  • 彈窗/邊欄

云南体彩网好比常見的幾種結構類型:

當然,結構的設計遠不是到這里就結束了,除了部分具體的字段、鏈接以外,我們還要將自適應的前端技術考慮進去,如何在拉伸瀏覽器的同時,担保這套結構的正常使用。

云南体彩网好比在今天最主流的適配方式就是通過 CSS 刪格等分體系,但這是一個非常復雜的話題,我們以后討論。

2. 控件設計

作為 UI 設計的一部分,控件的設計自然也少不了。多數控件的設計和一般網頁設計所需的控件差不多,類似按鈕、菜單欄、分頁欄、面包屑、通知欄、下拉菜單等等。

這部分內容設計起來沒有技術難點,但我們前面講過,B 端產品在交互反饋上的需求,使得我們對控件進行設計時要充分考慮它們的狀態。

例如,一個按鈕可以包含默認、鼠標懸浮、點擊、已點擊、弗成點、加載中等多種狀態,這些狀態設計得越全面,則操作的體驗就越好。

3. 表單設計

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

云南体彩网在 B 端設計中經常需要用一系列的表單控件組成一個完整的業務操作,好比在后臺創建一個用戶賬號,可能就需要通過在輸入框輸入用戶名、密碼,然后用單選框選擇性別,復選框選擇喜好,日期下拉菜單選擇生日等等。

或者,我們還會使用表單的內容進行高級的篩選操作,通過分歧的表單控件來設置篩選條件,縮小結果的范疇。

4. 表格設計

云南体彩网在 B 端產品中,數據主要通過表格的形式展現。而多數設計師對于表格的理解一無所知,甚至連 Excel 都沒有用過。

云南体彩网表格是 B 端產品涌現信息和數據最重要的組件之一,無論是用戶、產品、訂單或者記錄,我們都需要依靠表格的展現形式進行梳理。

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

5. 圖表設計

云南体彩网最后,就要講講圖表的設計了。在大數據概念大熱的今天,人們對數據的重視度越來越高,無論是在新聞還是在會議的 PPT 上,我們都邑看見各種各樣的數據內容。而這些數據,通常都以圖表的形式涌現。

常見的圖表包含折線圖、扇形圖、柱狀圖、曲線圖等等,比較常見。但是,有一個普遍的謬誤是,很多新手毛病地將圖表的設計理解成數據可視化設計。數據可視化是將數據以更復雜、多樣的方式表示出來,不僅在設計上難度更高,且需要極其高昂的開發成本,我們會在后續的內容里說明。

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

總結

以上就是關于 B 端設計掃盲的第一篇內容,簡單地對管理平臺的設計進行掃盲,讓人人有一個初步的認識,并對一些毛病的想法進行糾正。

云南体彩网之后,我們會逐一更新后續的內容,如果有遇到的疑問可以寫在留言里。

歡迎關注作者的微信公眾號:「超人的德律風亭」

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.7daer.cn/tob-design

發表評論 加載中....

評論加載中....

uisdc

云南体彩网評論區都快餓癟了,看看我期盼的小眼神...

您還沒有登錄

優設啟用更平安省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
云南体彩网 2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里