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