最近看汪曾祺的《嘆息橋》中的一句話，我必須分享給你。緣起我在人群中看見你，緣散我看見你在人群中。是的我想你在人群中看到我。這就是最初我分享這系列設計文章的初衷。
慢慢發(fā)現(xiàn)其實分享也是一件快樂的事情、而且在分享的過程中我自己也收獲了很多。而且對設計的理解也更深了。更快樂的是收獲了一群一起同行的小伙伴、這個還挺開心。和他們一起在群里吹水、一起吐槽。一起討論問題、那真的是快樂無邊。哈哈哈
上面扯多了。我們開始今天的內容。今天內容分三部分、第一部分內容總結是對我寫的這個系列文章每一篇文章內容和核心的小總結。第二部分這個系列的文章頁算是告一段落了、下一階段我會做些什么。第三部分分享一些我寫文章的感受、然后煽煽情。
因為在寫這個系列的文章時我加入了很多擴展知識。希望告訴你更多。這里我會把主要的這個系列的知識總結一下讓你盡量一次看完。
最近就在做我們系統(tǒng)的登陸頁面優(yōu)化?；仡^我會寫一個項目總結給你們看。這里介紹一下B端登陸頁面該怎么去做。其實還挺簡單了。因為現(xiàn)在主流的布局就那幾個。
頁面元素：導航、登錄框、背景（裝飾元素）、互聯(lián)網(wǎng)信息。
導航高度：68px或48px、文字大?。?4（大部分）16（也可以）
登錄框大?。捍笮〕叽绮唤y(tǒng)一、沒有固定的尺寸?？梢愿鶕?jù)自己和領導的喜好決定。對還有要承載的內容多少。
標題切換字號：我喜歡用26px（也要其他的16、/18、/20）
底部要不就是單純的互聯(lián)網(wǎng)信息。要不就是快捷入口、聯(lián)系方式什么。這個就不多說了正常排版就行。
篩選相對是很簡單的部分把、因為你直接用規(guī)范里的組件。雖然不會很優(yōu)秀、但是剛重要的是不會出什么錯誤。主要是就大廠規(guī)范能夠快速的幫你解決問題。
篩選的意義：定位數(shù)據(jù)、縮短查詢路徑、數(shù)據(jù)內容分類
篩選類型：基礎篩選組件（就是我們常見的頁面頂部的篩選）、高級篩選（就是那些需要你定義想一想的篩選部分）
篩選樣式：平鋪；折疊；Tab篩選；單側選擇；表頭；綜合
這里其實還簡單的、首先你要明白柵格在我們的設計里面很重要。你不用當然也可以呀。但是你想要做的更好那就用起來你會有意外的收獲。
怎么用：直接看ant design、TDesign、阿科desing的規(guī)范就行、寫的很清楚。
注意點：不要硬套、我們要根據(jù)自己的系統(tǒng)去自己定制。比如我們系統(tǒng)、用的是ant design的框架、但是我們的網(wǎng)格系統(tǒng)是自己定制的。因而我們的邊距不是24px、我們是20px
這部分相對來說是我自己的弱項、在寫當時的文章的時候也是收獲頗多的。明白了大廠規(guī)范是怎么確定自己色彩設計規(guī)范的。也清楚了自己應該怎么去規(guī)定自己的設計規(guī)范。
主色確定：常見的方法、1、用自己品牌logo的顏色；2、用行業(yè)色
配色確定：我一般是找競品、或者優(yōu)秀的配色方案、來確定自己的。多參考大廠的配色方案。雖然不全是好的。但是好的還是站大多數(shù)的。
大廠色彩：這里我分享了大廠的色彩是怎么去確定的、如何去確定。可以去看看。我在自己的工作中色彩的應用就參考了ant Design的色彩應用方式定制的。
字體部分我覺得最有意思是的是分享了、我們宋體、楷體、隸屬、甲骨的發(fā)展歷史和由來。還有就是如何去設計一款自己的字體。還有后臺字體規(guī)范的制定
中國文字：這里中國文字的發(fā)展歷史、所有字體的產生都是有自己發(fā)展的歷史原因的。很有意思。建議你看看、可以當做你喝酒吹水的談資。
字體規(guī)范：我們大部分的字體會采用黑體、可讀性強、親和、現(xiàn)代、清晰。
字號：最新的字體12px、正文、14px、通過+2， +4，+8，+12，+16 的步數(shù)增長規(guī)律
行高：通過邏輯得到這樣一個公式：「 行高 = 字號 + n 」，8 作為變量正好同時滿足與 1.5 倍的「 14px & 16px 」常用字號行高保持一致，總體文字間隙穩(wěn)定呼吸，行高空間較一致得出計算公式：「line-height = font size+8」
字重（就是字粗）：建議使用兩種常規(guī)和加粗（在前端里一般就是400和500）
顏色：我是主張帶有色彩傾向的顏色應用的。根據(jù)字體樣式的設計原則，制定了簡易好記的透明度數(shù)值區(qū)間并且將該字色與界面系統(tǒng)的色彩系統(tǒng)結合，文字顯示色彩對比滿足至少1:4.5( AA級別）。且驗證了其中的實用性，共分為亮暗兩種模式，4 個色階。
你要統(tǒng)一風格成套的去找參考和應用。在我們的系統(tǒng)里我是自己畫icon的然后傳到阿里巴巴矢量圖庫讓開發(fā)直接引用。這個是自己累點、但是可以保障實現(xiàn)效果。
我是用的阿里巴巴矢量圖庫的設計規(guī)范、因為我要傳到這個平臺應用
按鈕我覺得這部分是相對簡單的、也是要做到風格的統(tǒng)一。直接用大廠組件然后根據(jù)自己平臺的風格、不如圓角的大小其他的倒是沒什么了。
常規(guī)按鈕：次要按鈕、主要按鈕、文字按鈕、圖標按鈕
尺寸：把按鈕分成：迷你、小、中、大，四種尺寸。高度分別為：24px/28px/32px/36px。推薦及默認為尺寸「中」。
樣式：各個規(guī)范對按鈕形狀的規(guī)范基本都一樣。提供長方形、正方形、圓角長方形、圓形四種形狀。
布局：這里分享了兩個概念、古登堡法則、費茨定律、告訴你我們?yōu)槭裁催@么排版。對產品和甲方很有用、哈哈、這是我的秘訣。
后臺彈窗是一個很復雜的內容、但是也是一個相對很好處理的部分。只要你做好規(guī)范這部分、簡直就是一點開胃小菜。
彈窗是一個我頭痛的問題因為不太好規(guī)范。但是我還是把這個彈窗系統(tǒng)、在我們的體系中形成了一個小的規(guī)范。感謝領導、感謝前段端的龍哥。
我們把前段粗略的分為400px、600、800、1000、最大、廣告。業(yè)務里我們會采用4、/6、/8、/1、最大、推廣和通知我們就統(tǒng)一的尺寸。
什么是表單：我理解表單就是系統(tǒng)為和用戶進行交互、所要收集用戶信息的或獲得用戶反饋的一種方式的載體。在后臺產品中對我們數(shù)據(jù)做的增、刪、改、查、驗都可以通過表單完成。
我們在后臺系統(tǒng)中、大部分的場景都會使用上表單。信息采集呀、編輯數(shù)據(jù)呀等。在表單設計時要遵循的原則、簡潔明了、清晰高效、適應業(yè)務、即時反饋。
表單的構成結構、基本都是由、標簽、域、提示、操作按鈕這四個部分構成的。
表單布局在表單中我們采用多種布局方式。信息分組、內容列表、標簽頁、分步驟。
B端設計中，對數(shù)據(jù)瀏覽、操作、過濾、展示是最高效的。這你就不用質疑了。因為結構簡單、精準高效、數(shù)據(jù)形式豐富。
表格是用來收集、整理、組織、分析數(shù)據(jù)的二維矩陣。它由內、外兩部分組成。其中，內部包含表頭、表體、底欄等。外部包含標題、篩選區(qū)、操作按鈕區(qū)等。
表格的類型：基礎表格、樹形、子表格、交叉表格、圖表表格、卡片表格
表格的樣式：網(wǎng)格型、水平線型、斑馬紋、自由形式
進階的一些知識就是表格數(shù)據(jù)的優(yōu)化和表格的交互知識了。想了解去看更詳細的我的文章11表格設計和12表格優(yōu)化項目實戰(zhàn)。
如果你是一個小廠B端設計師、剛好沒有自己平臺的設計規(guī)范。那就去直接用的場的設計規(guī)范。去用沒問題的。大廠那么多的牛逼設計給你做好了你不用。都塞到嘴巴上、不吃就不給面了。
在使用大廠的設計規(guī)范時然后慢慢的積累自己平臺的設計規(guī)范。逐漸的你就會形成一個屬于你們自己平臺業(yè)務的高質量設計規(guī)范了。
這個基礎系列的文章就這樣寫結束掉吧、希望可以對你的B端設計有所幫助。之后我會寫二個系列的文章、去分享我理解的B端設計。
第一個系列是B端基礎設計的加強版、B端高手。B端高手是會寫我的實戰(zhàn)里是怎么去做的。其實就是我的設計項目復盤。
第二個系列就隨便的去分享一些設計知識。比如哪些什么什么原理呀、什么什么法則呀、在設計里的應用。而且會提出和討論一些設計問題。
分別是為了更好的相見、我一直希望我的文章可以幫到你。慢慢來路還很長、總是要一步一步的來。很快我們會再次相見。我是KING（國王）
注解：標題的40000余字也好、50000字也好都是說的我這個系列總計的字數(shù)、因為想讓你們看到。
作者：彪形大漢pro
鏈接：https://www.zcool.com.cn/article/ZMTYyMTEyNA==.html
來源：站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。
