最近有同學問了老師這樣一個問題，就是關於BS架構與CS架構，對設計會有什麼影響在我工作的五六年時間裡，其實很少會用到這方面的內容，並且我們之前團隊也做過客戶端與網頁端，很少去分析這兩者之間的差異，我覺得特別有意思，今天我們就來聊聊關於BS架構與CS架構之間有什麼差異？
定義肯定會有同學不知道這兩個名詞具體的含義，簡單說說首先BS架構，（定義不夠準確）即瀏覽器和服務器架構模式，是隨着Internet技術的興起，對C/S架構的一種變化或者改進的架構。這種架構下，用戶工作界面通過瀏覽器即可實現，極少部分事物邏輯在前端（Brower）實現。B/S架構是WEB興起的一種網絡架構模式，WEB瀏覽器是客戶端最主要的應用軟件
通俗一點來說，其實就是我們理解的客戶端，比如常見的 Windows 系統當中的exe，Macos系統當中的pkg，都是軟件的 BS 架構的產品
其次CS架構，（定義不夠準確）則是通過採取兩層結構，服務器負責數據的管理，客戶機負責完成與用戶的交互任務。客戶機通過局域網與服務器相連，接受用戶的請求，並通過網絡向服務器提出請求，對數據庫進行操作通俗一點來說，就是網頁端的產品，比如B端系統當中的 各種用瀏覽器打開的產品，都可以這麼進行歸納（設計已經很難了，就不要太糾結了）如果你是從C端設計師，給你舉一個更為形象的例子，BS架構就如同我們設計的原生應用，就是你在 app store 裡面下載的而CS架構的就是 小程序 h5 他們都是根據運行在其他產品當中的，這其實就是他們的差別
BS架構與CS架構對B端產品有何影響其實這兩年接觸到B端設計的同學，很多就會默認我的產品是運行在瀏覽器當中，但是在B端早期，很多產品都是以客戶端的形式出現，比如像金蝶k3，用友u8都是通過客戶端，以激活碼的形式進行使用
當然隨着 SaaS的普及，為了降低用戶的使用成本，按照每月收費的標註，再加上 瀏覽器當中的技術逐漸成熟，現如今很多產品都是採取 BS 架構，金蝶、用友也是如此，只是在財稅等敏感內容時，使用本地客戶端的形式BS架構與CS架構對設計帶來的影響BS架構與CS架構其實對於開發而言差距非常大，因為會涉及到完全不同的技術類型，開發理念也完全不同，因此差別巨大。但是在設計的角度，主要總結了以下幾類差別
瀏覽器的縮放比例、與客戶端的分辨率縮放在頁面設計當中，縮放是最為頭疼的在BS架構的瀏覽器當中，瀏覽器的縮放將會直接影響頁面的呈現，因為瀏覽器本身的放大縮小是直接破壞性的將頁面強制進行調整。因此在BS架構當中，我們通常會在頁面當中進行通知，目前頁面處於縮放狀態，需要回到100%的頁面分辨率當中上面主要呈現是 公眾號 壹伴 的瀏覽器變化以及 有贊 縮放的信息提示而在CS架構的產品當中，能夠通過拖拽四角，實現客戶端的窗口大小調整。雖然 客戶端也會有幾個縮放等級（你可以打開微信桌面端，按下 Command+加號）但是整體的縮放方式是其本身就已經做好預設，不會出現瀏覽器當中特別離譜的情況並且客戶端整體的最小尺寸是較為固定，如果想要比這個尺寸還小，那系統便可以 「擺爛」 不做加載快捷鍵由於在瀏覽器當中，快捷鍵的使用其實會受到瀏覽器的限制，為了避免衝突，在設計的時候要儘可能的避免
而在CS架構的產品當中，原生的客戶端則不會有太多的限制，避免與系統的那個匯總常使用的快捷衝突即可。並且優先級都是 系統全局快捷鍵（如Command+Q）> CS架構產品快捷鍵 > BS架構產品快捷鍵
新出窗口的設計我相信大多數B端設計師都有見過這樣的這類的頁簽設計，並且對其深惡痛絕。而這類型的設計，其實最開始就是從CS架構的產品當中引出的。我們在設計CS架構的產品的時候，就一定要注意會不會有新窗口的情況，新窗口究竟應該如何彈出如果有需求，其實大概率就是在系統當中做一個瀏覽器頁簽
產品資源的加載方式因為CS架構與BS架構，本身產品的特性就會有所不同，一個是需要安裝，另一個即開即用，因此在資源加載上就會有所差別CS架構很多可以通過本地文件獲取得到，比如圖標、界面資源，我們都可以通過CS架構當中的客戶端進行使用而在BS架構當中，所有資源都需要進行網絡加載（有些內容可以通過緩存保留）因此對於網絡的實際要求會更高。
總結其實關於BS架構與CS架構，現在來看其實差別真的不大，因為現在有很多產品邊界並不清晰，比如 Notion、Figma 既會有網頁端、也會有客戶端，並且能夠發現整體架構都是同一套邏輯也嘗試去搜索了一下，現在有很多成熟的封裝技術能夠達到這樣的一個效果，很多技術層面的我們就不班門弄斧了，關於技術層面的東西不必過於糾結，專注於自己的領域，做好設計
如果想要了解更多關於B端設計相關內容的的同學，快來參加我們的B端交互訓練營吧！掃碼右側二維碼，備註：課程
留言列表