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