全面了解 B 端產品設計︰基礎掃盲篇 - 特级毛片www,色综合天天综合网,国产成人综合亚洲 - UISDC

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

2019/08/05 11566評論 7

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

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

和移動互聯網大潮一樣,企業互聯網化也是大勢所趨,是公認的萬億級市。 獬「謀洳鷗嶄戰氤跫督錐,充滿了非常多的機遇與想象空間。

所以 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.rumotanartist.com/tob-design

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

版式設計 交互設計師 界面設計 排版布局 職場 設計師干貨 儒墨堂專訪 儒墨堂大課堂 設計達人 配色 視覺設計 web前端開發 素材下載 AI教程 設計流程 設計理論 神器下載 字體下載 設計師專訪 psd下載 平面設計 用戶體驗設計 設計規範 海報設計 設計趨勢 動效設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

儒墨堂啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!特级毛片www,色综合天天综合网,国产成人综合亚洲是極具人氣的設計師平台
2012年成立至今,一直專注于設計師的學習成長交流

特级毛片www|色综合天天综合网|国产成人综合亚洲

打開微信,掃碼分享
學設計 特级毛片www,色综合天天综合网,国产成人综合亚洲 在這里