整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
輯導語：To C市場如今已經越來越飽和，流量的獲取難度也越來越大，于是從To B向To C方法探索也是大勢所趨。對于不少設計師來說，習慣了C端設計，轉到B端后一時間有點不知所措。本文作者總結了自己負責B端產品設計的一些經驗，為我們分享了這篇指南。
To C市場的表現隨著用戶逐漸趨向飽和，流量紅利也盡顯頹勢，向To B延展已成為To C產品探索的新方向，國內的互聯網巨頭也是紛紛布局To B業務。
B端行業需求量的增加更多B端設計師（互聯網打工人）開始涌入，還在互聯網C端折騰的互聯網打工人們，說不定哪天就轉做B端了呢。無論是C端與B端選哪個方向都沒有錯，建議都嘗試下再根據個人興趣選擇一個深耕方向一直去探索。
接下來就我負責一些B端產品設計淺談我的看法，看完本文你會學到：
B 端設計，從承接載體來看就是網頁設計，只是因為行業屬性、用戶群體的不同而賦予的代名詞。
C端產品需要兼顧“用戶體驗”和“商業化變現”的平衡，所以會額外重視在視覺體驗上的設計。不僅要讓用戶有好的體驗，更要用趣味性的設計引起用戶共鳴，用戶的要求就是好看、好用、好玩。
B端產品注重操作者的使用效率、成本、管控，追求服務的穩定性、保證能力、安全性，所以在視覺體驗上多是保持干凈簡單的簡潔風。
組件化對于設計師來說相信已經不陌生了，簡單的說，組件化即是產品中的通用模塊進行元素拆解、整理、重組為一套「多維度」的解決方案，組件化在運營設計、UI、交互、動效、開發等多方面都能用上，一套完整的組件庫無論對于產品、設計還是開發來說，無疑都大大提高設計品質、提高工作效率與減少溝通成本。
在B端后臺開發過程中，前端同學都是基于UI框架進行開發的，引入一些開源的UI框架或者公司自建的UI框架，使用這些框架開發可以把一些通用的模塊用代碼封裝起來在項目中重復使用。
因此在設計時就要求我們掌握主流UI框架的設計規范，然后基于這套框架的規范進行設計及延展。比如Ant Design、Element、iview、Layui等這些前端常使用的UI框架。
Ant design等平臺的這些組件只是覆蓋了通用場景，對于一些定制化的產品需求是無法滿足的，無論是單個產品或產品線，因品牌差異性在不斷成熟過程中都有屬于自己的組件庫（UI KIT）。
以下是我基于組件的類別與使用場景的不同進行了分類，組件的應用上每個產品不一樣，我們需要根據項目實際情況需要進行增加和刪除。主要包括7個部分：基礎組件、布局、導航、數據錄入、數據展示、反饋、數據可視化等。
每個組件都有自己的應用場景，總之不能盲目借鑒其他產品，要根據用戶使用場景去選擇適合的組件，以提示設計為例：界面設計中我們什么時候需要強提示什么時候弱提示呢？
原子設計理論，常用來搭建出統一且層次豐富的設計系統的一套方法論，由原子、分子、組織、模板和頁面這五個層面組成。
以下為原子設計理論的示例圖，就是將界面中的元素、組件、模塊、原型圖、視覺稿進行歸納、整理、重組整理成通用的規范。
其實在龐大的web類別中，根據產品產品屬性、用戶群體不同分為很多種：從網頁前臺到管理后臺，設計師起到很重要的一點作用就是判斷web產品契合的框架和標準定義。
在定義網頁尺寸時，我們首先要考慮我們的大眾用的顯示器。
記得在N年前，那時頁面的信息內容一定要設計在800或1000的寬度以內，規則其實并沒錯，不過隨著設備和網絡的發展，網頁顯示的分辨率也在發生著快速的變化，為了兼顧大眾的瀏覽體驗屏幕分辨率也越來越大了。
根據百度流量研究院最新的數據顯示，市面上的電腦屏幕尺寸多種多樣，設備中占比最多的仍然是1920×1080、最少的分辨率是 1024×768，低于1024的屏幕分辨率可以忽略了。
B端管理后臺考慮最大最小響應的屏幕，建議取中間尺寸1440×900寬，響應式從小往大適配容易，但是從大往小適配問題就特別多。選這個尺寸前端在適配時錯誤率更低。
確定了寬度，那高度尺寸怎么定義呢？雖說瀏覽器豎屏方向是無限展示，但不得不說首屏在界面設計中的重要性，研究表明首屏以上的關注度為80.3%，首屏以下只有19.7%，這也解釋了我們設計時為什么要把重要內容展示在首屏的原因了。
以中間尺寸1440×900為例，我們不能直接用900的高度為基準尺寸，要除掉系統任務欄、瀏覽器菜單欄以及狀態欄后，剩下的網頁首屏內容控制高度約為720px（700-750PX區間），這個區間都是相對安全區域。
取這個中間值，就可以照顧到約80%的用戶群體，Ant design的組件也是1440x720px，所以最終確定分尺寸為1440x720px。
常規web網頁固定寬度顯示類型：頁面中心區域寬度通常設置為1200px（1000px -1400px區間）作為設計相對標準，這個范圍內能保證大部分瀏覽器能夠顯示出所有的內容。
當涉及數字產品設計時，您幾乎可以在設計工具中完成的所有工作都可以用代碼創建和表現出來，但是出于多種原因（從開發思維到基礎設計規范），可能設計稿不能落地或者設計輸出質量差給你帶來煩惱，接下來我們來探討下設計前的一些準備工作吧。
1）盒子模型讓你更懂開發思維
盒子模型是最常聽見的是在網頁設計領域中，經常用到的CSS技術所使用的一種思維模型，是最常用且高效的界面開發模型之一，也是提高設計師與開發溝通效率的一個重要知識。
盒子模型包含了以下屬性：內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）
2）確定柵格的基準–基于8點網格
網格是構成頁面柵格系統的最小單位，8點/8point/8pt，建立一個以8為單位的網格系統，利用8的倍數來規定內容元素（按鈕、輸入框、圖片等）和布局規則。
為什么是基于8pt去定義網格？盡量保證最小柵格單位是偶數，使用2、4、6、8點或者10點為柵格的候選原子單位其實都是可以的，偶數能夠匹配多數主流的顯示設備，最大程度避免出現半像素模糊的情況。
根據最新中國PC端主流分辨率統計，只有“4、8”不能被1366整除，其他都可以。由于4過于小在視覺上區分不大，所以我們選用8作為最小單位，之后所有的數值都使用8的倍數，8作為最小柵格單位更多是在后臺系統中用的比較多。
網頁中常用柵格單位是8、10，那么針對最小單位是該用8、10還是多少也是需要根據需求去做分析。比如淘寶、京東這些電商網站內容區域都是1190px，以10作為最小柵格單位，常規web網頁固定寬度顯示類型用的比較多，寬度都能被10整除。
舉個栗子：從下面這個對比圖中可以看到，是否嚴格按照網格系統排列出來的成果有明顯的好壞差別。
站在巨人的肩膀上，關于iOS的@1x，@2x，@3x圖與 Material Design 的@1x, @1.5x, @2x，@3x，@4x，Ios與material design組件都是以8點為基準，小的控件以4點為基準。
3）柵格系統讓設計更有秩序
柵格系統，可以讓設計更有秩序，更有規律，簡單來說就是用科學的方法去排版。我們利用柵格系統就是把一個頁面切開成有N個柵格單元（區塊），以保證頁面信息的每個區域能夠有秩序地排布起來。
然后我們把這個頁面的寬度代表為W，網格單元寬度為a，網格單元之間的間隙為i，然后把網格單元+網格單元之間的間隙代表為A。計算公式：寬度=（柵格的寬度X數量）+（數量-1）X間隙的寬度，就醬柵格系統就Get了，如下圖所示：
繼續舉栗子，我們選擇確定的畫布尺寸1440x720px（左右布局），布局采用24欄柵格。對寬度為 1152 的內容區域進行 24 柵格的劃分設置，頁面中柵格的 水槽設定了定值，即瀏覽器在一定范圍擴大或縮小，柵格的列寬會隨之擴大或縮小，但槽的寬度值固定不變。
制定如下的樣式，數值僅供參考，照搬的請慎重。
12柵格和24柵格都是PC端較常用的。它們都可以被2等分、3等分、4等分、6等分、12等分，還能按 1:2:1 、 1:3:2 …等比例分割，提供了足夠豐富的變化。
一般12欄柵格適用于業務信息承載密度少，適合信息承載較疏松的中后臺頁面設計或展示類網站。24等分的柵格系統適用于業務信息量大、適合信息繁雜的中后臺頁面設計，選用那種柵格視實際情況而定。
填充內容：建立好基礎柵格之后，我們可以把內容布局進行劃分成區塊，使整體界面整體有序。在區塊內放置內容，內容的開始和結尾盡量避免在水槽里，區塊的高度也需要保持8的倍數。
示例為24柵格中，區塊內容占據8、6以及12柵格的布局
不用柵格設計行不行？不用柵格沒問題，很多優秀作品都沒有刻意的遵守傳統的柵格，反而顯得更加靈動。
但是打破規則前得知道規則才行，所謂方法論和規范只是基于前輩總結沉淀的經驗，當你的創新足夠有顛覆性，之前的規則就會變成陳規舊俗。
B端系統的框架一般會依據產品目標與用戶的使用場景來定義，一般主流的導航樣式就兩種：側邊欄導航與頂部導航，其他都是這兩種主流導航的延展或不常用就不細細列出來了，比如：頂部導航與側邊欄導航結合的混合導航。
很多老鐵通常會誤以為B端就是側邊欄，C端就是頂部導航，雖然大部分是這樣，但是這里不能畫等號，有些產品同時兼有兩種導航或者混用的情況，根據項目實際情況去定。
布局框架確認之后我們就可以結合設計規范和以及產品特點開始擼圖了，一般先確定好首頁及產品主要功能頁面，整體產品的視覺基調就已經定下來了，其他頁面風格布局按照主頁延展，一些列表頁、彈窗的復用性高的頁面制作成組件，然后就做完了，小編圖做的渣，放一張例圖吧。
圖例為Ant design組件
以上是小編在B端設計過程中的所思所想，通過對各平臺組件以及相關標準的了解，可以為你的設計點亮思路，讓圖擼的更快、更準、更穩，先避免一些原則性的錯誤，才能為后續產品的精雕細琢打下良好的根基。
隨著B端市場的發展，更多的B端產品逐漸進入大眾視野，但是B端產品的用戶體驗卻遠未達到行業標準，這里并不是說視覺表現力上，更多的是B端設計師對于產品業務的理解、用戶的操作效率上，所以B端產品的體驗設計仍是我們的發力點。
補充：B端內容區都是自適應的，一說的自適應設計，可能我們經常聽到響應式，自適應設計和響應式設計這兩個概念非常容易混淆：自適應是對于設備而言、響應式是對于尺寸而言，一張圖看懂什么是響應式什么是自適應。
本文由 @呆呆龍 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
輯導語： 組件庫是設計系統里的一個重要分支，一個合適的組件庫可以幫助設計師和開發者提高工作效率；本文作者分享了關于各個大廠已經成形的組件庫，一起來看一下。
最近為了給部門制定合理的設計規范，方便各個團隊更好的高效協作；為此參考了許多國內外優秀的設計規范，趁著這次機會做一個整理，而且這些設計規范基本上都是附帶 Sketch 源文件的。
但實際上組件庫的整理工作也是比較繁復的，我們在開始之前，需要去判斷什么情況下組件庫可以真正為我們節省工作量提升效率；而這些已經成形的組件庫，非常值得大家下載學習、參考和使用。
螞蟻金服出品，非常著名的框架；企業級產品的設計系統，很多公司的項目都在使用，而且提供了對設計師友好的Sketch規范文件，可以直接拿來用。
官方鏈接：https://ant.design/
源文件規范下載：https://ant.design/docs/resources
移動端： AntDesignMobile Template V1.0.sketch
首頁： Ant.Design.home-3.0.sketch
Pro： Ant.Design.Pro.sketch
web端： Ant.Design.3.0.Components.sketch
AntV是螞蟻金服全新一代數據可視化解決方案，致力于提供一套簡單方便、專業可靠、無限可能的數據可視化最佳實踐。（包含PC和移動端）
源文件規范下載：https://antv-2018.alipay.com/zh-cn/vis/resource/index.html
附件下載： AntV.Charts.sketch
這是由餓了么 UED 設計開發的基于 Vue 的前端組件庫，雖然在很多交互模式和組件樣式以及設計理念上都參考了 Ant Design，但是也做了一些自己的修改和調整。
他們同樣也推出了 Axure 元件庫文件以及 Sketch 組件庫，有興趣的朋友可以參考研究一下。
源文件規范下載：https://element.eleme.cn/#/zh-CN/resource
附件下載： Element UI Kit_v2.0.sketch
服務于 SaaS 產品的設計體系。連接設計和開發，讓協作變得高效簡單；通過沉淀不同行業、場景的經驗和思考，推動社交生態內的用戶體驗一致性。
源文件規范下載：https://design.youzan.com/resource/resource.html
桌面端視覺規范： Zan Desgin PC_2.0_beta.sketch
視覺規范： Zan Design Vant 視覺規范 V3.0 .sketch
元件庫： Zan Design Vant 元件庫 TC_ZY.zip
面向金融場景的Vue移動端UI組件庫，豐富、靈活、實用，快速搭建優質的金融類產品，讓復雜的金融場景變簡單。
源文件規范下載：https://didi.github.io/mand-mobile/#/en-US/design/other/resource
Taro UI，一套基于 Taro 框架開發的多端 UI 組件庫，可以在微信小程序 / H5 / ReactNative 等多端適配運行。京東用戶體驗設計部的凹凸實驗室出品。
源文件規范下載：https://taro-ui.aotu.io/#/docs/resource
附件下載： TaroUI.sketch
Axure部件庫： taroui-rplib1565263474229.zip
AT-UI 是一款基于 Vue.js 2.0 的前端 UI 組件庫，主要用于快速開發 PC 網站中后臺產品。
源文件規范下載：https://at-ui.github.io/at-ui/#/zh/resource/design
附件下載： feather.sketch
由微信團隊推出的可以用于微信小程序設計的 Sketch 組件庫，用起來也很方便，有微信端設計需求的朋友可以參考。
源文件規范下載：https://developers.weixin.qq.com/miniprogram/design/#%E5%9B%BE%E6%A0%87
QMUI，騰訊出品，分為Web、iOS、安卓三個端，都有相應的dome下載安裝；設計師可以下載安卓和iOS應用，經常看看里面的組件，熟悉后，和技術的協作會更有效率。
官方文檔：https://qmuiteam.com/web/page/widget.html
iOS 的設計規范其實并沒有 Material Design 那么具體和細節，但作為一個 iOS 平臺的設計人員還是需要把它們的設計理念爛熟于胸。
對于 iOS 平臺的 Sketch 組件庫，我只推薦兩個，一個是 Facebook 推出的 iOS 10 組件庫，另外一個是由 Apple 官方推出的組件庫，同樣都有 Sketch 源文件。
源文件規范下載：https://developer.apple.com/design/resources/
由 Google 設計團隊推出的 Material Design 一經發布就紅遍了全球設計界，多個富有突破性的設計理念，將理性與感性相結合的完美標準，使得越來越多的人基于 Material Design 制作了自己產品的設計規范。
除了谷歌官方的 Sketch 組件庫外，還有一個基于 Material Design 色板的 Sketch 源文件下載，用起來非常方便。
源文件規范下載：https://material.io/resources#sticker-sheets-icons-components
Material Design 官方相關源文件下載
Material Design 色板 Sketch 源文件下載
Teambition出品。Clarity Design 是一套全面的設計語言，從設計原則到字體排版，從交互到文案，從動效到樣式，從組件到設計工具…… 提供了各種解決方法和指導，設計師和工程師可以快速找到相關的指導內容，有效地幫助完善工作并且提高效率。
源文件規范下載：https://design.teambition.com/resource/design-resource
由國外 Shopify 團隊推出的 Polaris 設計規范也有比較不錯的參考價值，而且內容非常豐富完整，感興趣的朋友可以查看官方文檔好好研究一下，他們同樣提供 Sketch 組件庫。
源文件規范下載：https://polaris.shopify.com/resources/resources
由國外知名軟件企業 Atlassian 推出的設計語言，涵蓋了品牌、營銷、產品相關的設計規范和理念，其豐富程度僅次于 Material Design，可以說給了設計師很多參考與幫助，另外還提供了非常完整詳細的 Sketch 組件庫，強烈推薦大家研究學習！
源文件規范下載：https://atlassian.design/resources/sketch-library
Lightning Design System 是由 Salesforce 團隊推出的一個設計規范，它們的規范文檔也是相當完整而且可參考性很強，推薦大家研究，同時它們也有 Sketch 組件庫可供下載。
官方文檔：https://www.lightningdesignsystem.com/
源文件規范下載：https://github.com/salesforce-ux/design-system-ui-kit/blob/master/README.md
源文件規范下載：https://www.figma.com/community/ui_kits
https://www.figma.com/community/ui_kits
開源前端組件&交互Demo
官方文檔：http://vue.ydui.org/demo/#/
http://vue.ydui.org/demo/#/
一套基于 Vue.js 的高質量UI 組件庫。Vue.js 是一個JavaScriptMVVM庫，是一套構建用戶界面的漸進式框架；在網站中可以看到數量眾多的UI組件和對應代碼，本質上和我們制作UI規范是一樣的。
官方文檔：https://www.iviewui.com/
非官方，由 Sketch 團隊維護
源文件規范下載：https://www.sketch.com/downloads/mac/
規范文檔：https://mobile.ant.design/index-cn
Bootstrap是Twitter推出的一個用于前端開發的開源工具包，是一個CSS/HTML框架，目前世界上的很多網站開發都使用了這個。其中的柵格理論、響應式解決方案都變成了業界的參考規范。
官方文檔：https://v4.bootcss.com/
將設計規范做成 Sketch 組件庫甚至 Axure 元件庫其實任務量很大，但是這項工作做好了能夠大大提高產品、設計、開發團隊的協作效率！
但組件庫不是表面工作，畢竟，產品研發工作不是一蹴而就的，組件庫可以幫助研發團隊持續地維護產品。
在組件庫的研發工作中，我們需要思考：
本文由 @七分 翻譯發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
進公司做的第一個項目,剛好前端人手不足,需要我們后端同時兼顧前后端的工作,采用的iview UI框架,基于vue.js。
先給大家科普一下:
前端JS框架和前端UI框架的區別
前端JS框架:基于js進行一定封裝與一些獨立設計的框架 比如:jQuery,Vue,React,angular等等
前端UI框架:基于某種js框架進行設計的UI組件庫,就是一些寫好的UI組件,拿來就能用,不需要自己寫css
比如: 基于JQuery的Bootstrap,jQuery Smart UI 等 基于Vue的iView,Element等 基于React的Material-UI,React Desktop等
對于剛接觸的Vue框架的我來說,vue最大的特性,莫過于雙向綁定了
單向綁定和雙向綁定
Model:數據模型 View:視圖
單向綁定：把Model綁定到View，當我們用JavaScript代碼更新Model時，View就會自動更新。因此，我們不需要進行額外的DOM操作，只需要進行Model的操作就可以實現視圖的聯動更新。 例如，我們定義好一個JavaScript對象作為Model，并且把這個Model的兩個屬性綁定到DOM節點上：
雙向綁定：把Model綁定到View的同時也將View綁定到Model上，這樣就既可以通過更新Model來實現View的自動更新，也可以通過更新View來實現Model數據的更新。
所以，當我們用JavaScript代碼更新Model時，View就會自動更新，反之，如果用戶更新了View，Model的數據也自動被更新了。
例如當用戶填寫表單時，View的狀態就被更新了，在瀏覽器中，當用戶修改了表單的內容時，我們綁定的Model會自動更新,那就相當于我們把Model和View做了雙向綁定：
Vue的基本結構
//這個div在最外層,將其他的div或者其他元素都包起來<div id="app">...</div><script>const app=new Vue({ //找到對應的dom樹,將他轉成vue對象 el: '#app', //數據屬性:存放數據 data: { message: 'Vue的生命周期' }, //方法屬性:存放方法 methods：{ test:function(){ console.info("測試方法") } }, //創建完成狀態函數: //組件實例創建完成,屬性已綁定,但DOM未生成 //常用于數據的初始化操作 created () { console.group('------created創建完畢狀態------'); console.log("%c%s", "color:red","el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, //DOM渲染完成 //常用于數據的初始化操作,當需要操作DOM時,在此處進行 mounted: function () { console.group('mounted 掛載結束狀態===============》'); console.log("%c%s", "color:red","el : " + this.$el); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 } })</script>
下面寫一個使用例子
<!-- 引入 Vue.js --><script src="http://vuejs.org/js/vue.min.js"></script><!-- 引入 iView的樣式css --><link rel="stylesheet" ><!-- 引入 iView --><script src="http://unpkg.com/iview/dist/iview.min.js"></script><body><div id="app"> <div style="margin:auto;height: 300px;width: 300px"> <b>View</b><i-input v-model="name" ></i-input><i-input v-model="age" ></i-input><i-button @click="test">測試按鈕</i-button><p><b>Data</b></p><p>{{name}}</p><p>{{age}}</p> </div></div></body><script> const app=new Vue({ el: '#app', //找到對應的dom樹。將他轉成vue對象, //數據屬性:存放數據 data: { name:"ken", age:"26" }, //方法屬性:存放方法 methods: { test:function(){ this.name="測試按鈕-名稱" this.age="測試按鈕年齡" } } })</script>
1.data初始化DOM的值 2.使用v-model屬性進行數據綁定 3.Dom的值與data的值雙向綁定綁定,相互影響
可看下面動圖
這里只做了個小演示,我的vue水平也差不多到這了(hahah~) 我這里使用的iview UI框架,也可以嘗試其他的UI框架,UI框架都差不多,只是一些樣式和組件
就到這了,感興趣的可以自己動手試試,有js,Jquery基礎的上手很快! 我們被培訓了半個小時,就開始動手寫了
分享給你的朋友！
"波浪分割線"
THANDKS
· End -
一個立志成大腿而每天努力奮斗的年輕人
伴學習伴成長，成長之路你并不孤單!
java從心 掃描二維碼,關注公眾號
不錯吧?必須好看?
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
