2022-5-16 博博
以下內(nèi)容主要分成兩大部分，第一是聊聊響應(yīng)式和自適應(yīng)的區(qū)別和原理，以及我們應(yīng)該如何去設(shè)計(jì)響應(yīng)式界面；第二部分也是比較關(guān)鍵的B端系統(tǒng)設(shè)計(jì)的核心，B端設(shè)計(jì)中臺完整構(gòu)建過程的具體步驟，以及應(yīng)用到的格式塔原則，和命名的一些注意事項(xiàng)，內(nèi)容較多，大家可以根據(jù)上述目錄來選擇性閱讀。
簡單概括多端兼容設(shè)計(jì)的發(fā)展史，最早是桌面端，比如桌面的一些應(yīng)用；后來出現(xiàn)了移動端，針對移動端大家用的都是WAP，指一種無線應(yīng)用協(xié)議，大家在用手機(jī)瀏覽一些網(wǎng)站，會把網(wǎng)站翻譯成一種低流量的瀏覽方式，比如去掉圖片大圖，只剩全文字，因?yàn)楫?dāng)時網(wǎng)絡(luò)不好，早在3G和2G時代移動端用的都是WAP；在2008年之后出現(xiàn)了響應(yīng)式，也就是做一套代碼可以兼容三端（網(wǎng)頁、移動端、iPad）設(shè)備，在發(fā)展的同時也遇到很多問題，但響應(yīng)式同時也遇到了很多問題；于是又出現(xiàn)了自適應(yīng)，指不同的設(shè)備打開不同的頁面進(jìn)行自適應(yīng)，自適應(yīng)能增加效率，但需要增加工作量；2017年以后直到現(xiàn)在看到最常用的就是漸進(jìn)式，類似完整的像在使用一個APP。這是多端兼容設(shè)計(jì)的整體的發(fā)展。
可以理解成用戶在手機(jī)、電腦、ipad打開同一個界面，所呈現(xiàn)的界面是一樣的。需要考慮移動端設(shè)計(jì)和網(wǎng)頁端怎么通過一套代碼進(jìn)行兼容。
自動布局算是響應(yīng)式的一種，但平時看到很多響應(yīng)式其實(shí)并不是真正的響應(yīng)式，而是自動布局，因?yàn)榻缑嬖诓煌脑O(shè)備用的是不同的模板，當(dāng)我們用電腦打開呈現(xiàn)的是一套模板，而用手機(jī)打開則是另外一套模板，這種看起來是響應(yīng)式，其實(shí)不是。因?yàn)楫?dāng)我在開發(fā)者模式下調(diào)節(jié)不同設(shè)備展示時，就會發(fā)現(xiàn)，其實(shí)是換了一個網(wǎng)址來根據(jù)不同的設(shè)備進(jìn)行自適應(yīng)的，而真正的響應(yīng)式是不需要刷新的，在拖小窗口的時候就會變成手機(jī)端的那個樣子。
漸進(jìn)式布局是近幾年比較新起的，這種布局設(shè)計(jì)，很像一個網(wǎng)站或者本身它就是一個網(wǎng)站，但用起來就像一個APP一樣，看到這里大家很容易相到，小程序就是漸進(jìn)式布局得一種，小程序明顯是一個網(wǎng)頁，但通過技術(shù)的一些嵌入和一些接口或者緩存的方式的操作，讓用戶在使用的時候感覺小程序就是一個APP，但核心技術(shù)還是web網(wǎng)頁。
響應(yīng)式的原理是通過定位的方式來做響應(yīng)式的各種開發(fā)，需要在頁面中至少標(biāo)出這十個點(diǎn)：中心點(diǎn)，上下左右點(diǎn)，上左上右點(diǎn)和下左下右點(diǎn)，這幾個點(diǎn)其實(shí)就代表了做響應(yīng)式和做布局相應(yīng)的位置。這樣可能大家不容易理解，其實(shí)結(jié)合figma來看，這些點(diǎn)對應(yīng)的就是這樣（如下圖），在figma中的布局點(diǎn)。設(shè)計(jì)師通過調(diào)節(jié)圖形的布局點(diǎn)，可以做到在頁面拉伸時，讓想動的元素跟隨變化，不動的元素靜止不動，這就是響應(yīng)式的原理。換言之，我們做響應(yīng)式布局的原理也就是通過figma或者sketch中的布局約束這個功能來實(shí)現(xiàn)的。
01、響應(yīng)式
如下圖是響應(yīng)式的優(yōu)點(diǎn)和缺點(diǎn)。響應(yīng)式其實(shí)就是只開發(fā)一套頁面，這個頁面兼容三端。雖然做了響應(yīng)式，但如何響應(yīng)是需要設(shè)計(jì)師去設(shè)計(jì)的。比如我們設(shè)計(jì)了一個移動端界面，然后全部做好對應(yīng)的自動布局，再進(jìn)行頁面拉伸，內(nèi)容隨之會發(fā)生變化，比如當(dāng)拉伸到1024*768的時候，也就是iPad的尺寸，就會發(fā)現(xiàn)局部在設(shè)計(jì)上有些不合實(shí)際情況，這時就需要設(shè)計(jì)師在對應(yīng)尺寸的設(shè)計(jì)稿上進(jìn)行內(nèi)容上的微調(diào)，比如按鈕不可能那么長，就把按鈕設(shè)計(jì)的短一點(diǎn)。當(dāng)繼續(xù)進(jìn)行拉伸到1440網(wǎng)頁的寬度時，然后再酌情針對網(wǎng)頁尺寸的呈現(xiàn)樣式，局部進(jìn)行尺寸的調(diào)整，比如文字和按鈕被拉伸到網(wǎng)頁版都需要居中對齊，電腦端的樣式就需要設(shè)計(jì)師重新排版了。
通常在B端系統(tǒng)，設(shè)計(jì)師需要做響應(yīng)式設(shè)計(jì)時，往往是從大往小做設(shè)計(jì)，這也取決于這個B端產(chǎn)品是否需要進(jìn)行移動端的設(shè)計(jì)，《B端設(shè)計(jì)總概二》中提到過什么情況下進(jìn)行設(shè)計(jì)B端移動端。如果需要設(shè)計(jì)B端移動端，就需要我們將網(wǎng)頁改成移動端設(shè)計(jì)，比如B端的側(cè)邊欄導(dǎo)航在拉伸到移動端時，就會變成用一個折疊懸浮的iocn來替代等等這樣設(shè)計(jì)上的改變。在figma中，做三端拉伸時候，可以用斷點(diǎn)插件來進(jìn)行演示，通過對斷點(diǎn)插件的設(shè)置，就可以完美的看到頁面在三端不同情況的適配呈現(xiàn)，斷點(diǎn)插件用來做演示非常方便。
02、自適應(yīng)
如下圖是自適應(yīng)的優(yōu)點(diǎn)和缺點(diǎn)，其實(shí)就是一個項(xiàng)目開發(fā)三個頁面，分別做定制設(shè)計(jì)，網(wǎng)頁端、移動端和Ipad端。
我們都知道2021年也就是今年是我國新基建的元年，十四五規(guī)劃2035遠(yuǎn)景目標(biāo)里提到重點(diǎn)發(fā)展傳統(tǒng)企業(yè)數(shù)字化轉(zhuǎn)型，尤其是今年我們設(shè)計(jì)師更能深刻體會，C端和B端已經(jīng)是完全兩個不同的行業(yè)，C端發(fā)展近十年，已經(jīng)很難再做到創(chuàng)新上的突破，該做的功能和創(chuàng)新都已經(jīng)做了，而B端這片藍(lán)海才剛剛開始發(fā)力，很多企業(yè)也都在考慮B端系統(tǒng)的搭建，降本提效率成了很多公司新的指標(biāo)，因此數(shù)字化轉(zhuǎn)型重點(diǎn)在于B端系統(tǒng)探索，B端重點(diǎn)在于中臺的搭建！設(shè)計(jì)師通過設(shè)計(jì)中臺，構(gòu)建出基本的業(yè)務(wù)類型，再分類到業(yè)務(wù)中，構(gòu)建出不同的業(yè)務(wù)界面，所以設(shè)計(jì)中臺非常關(guān)鍵，很多公司經(jīng)常會用這兩個系統(tǒng)去構(gòu)建，Antdesign和Elemnet就是設(shè)計(jì)中臺，我們會發(fā)現(xiàn)用Antdesign可以做出很多的系統(tǒng)，那怎么進(jìn)行設(shè)計(jì)中臺的設(shè)計(jì)呢？和我們設(shè)計(jì)師有什么樣的關(guān)聯(lián)度呢？帶著這個問題，我們深度探索B端設(shè)計(jì)中臺的落地！
概念：中臺是互聯(lián)網(wǎng)的術(shù)語，一般應(yīng)用于大型企業(yè)，中國互聯(lián)網(wǎng)的變革永遠(yuǎn)是從大型互聯(lián)網(wǎng)開始，大型互聯(lián)網(wǎng)公司引發(fā)了技術(shù)的變革，這也是中臺的興起，一般指搭建一個靈活快速應(yīng)對變化的架構(gòu)，快速實(shí)現(xiàn)前端提的需求，避免重復(fù)建設(shè)，達(dá)到提高工作效率目的。
作用：降本提效。如果沒有組件庫，普通設(shè)計(jì)師一天最多做十個頁面，再多就不太可能了，如果有組件化得產(chǎn)生，一天可以做一百個左右的界面。在面對B端系統(tǒng)這樣幾千個頁面的巨大的工作量前，組件庫的作用尤為重要。但如果落地，就需要前端工程師的密切配合，因?yàn)樵O(shè)計(jì)師設(shè)計(jì)的組件只是一個樣式，而前端需要把組件進(jìn)行代碼化，所以組件一定是代碼化的，也就是說只有代碼化的組件才是真正的組件。所以視覺組件的復(fù)用，和前端代碼的復(fù)用，可以大大提高設(shè)計(jì)師的工作效率。
基本庫指的是一些色彩系統(tǒng)、字體系統(tǒng)、圖標(biāo)系統(tǒng)、柵格系統(tǒng)、間距系統(tǒng)等等，之所以強(qiáng)調(diào)系統(tǒng)兩個字，有系統(tǒng)就要統(tǒng)一規(guī)則和統(tǒng)一規(guī)范，然后進(jìn)行調(diào)用應(yīng)用在系統(tǒng)中的各個地方，比如我們想調(diào)用一個顏色，不是去隨選用一個顏色，應(yīng)該嚴(yán)格的從色彩系統(tǒng)中去調(diào)用，如果系統(tǒng)組件庫里沒有這個顏色，我們也絕對不可以使用，可以先用替代色做或者根據(jù)業(yè)務(wù)再進(jìn)行補(bǔ)充顏色進(jìn)組件庫為了后續(xù)的調(diào)用，這是一種比較嚴(yán)謹(jǐn)?shù)氖褂梅绞?。所以在建立組件庫的時候我們要考慮全面，組件庫中如果沒有相應(yīng)的組件，我們應(yīng)該試著反推一下，是否要加進(jìn)組件庫中去，來進(jìn)行系統(tǒng)的調(diào)用。在做中臺的過程中，我們一直使用Antdesign，我們對組件的名稱，組件的分類其實(shí)一點(diǎn)都不陌生，其實(shí)Antdesign也在借鑒國外的Bootstrap組件庫（大家感興趣可以下載Bootstrap組件庫進(jìn)行查看），所以并不是Antdesign組件庫形成了一定的規(guī)則，它也是在沿用別人的規(guī)則，而這些規(guī)則也需要不斷的有大公司去繼承出來，所以慢慢衍生出來現(xiàn)在這樣的組件庫，那中臺設(shè)計(jì)，首先要搭建基本庫，把基本庫里的基礎(chǔ)一些系統(tǒng)搭建好后，我們繼續(xù)去做擴(kuò)展庫。
如下圖，擴(kuò)展庫中包含了很多內(nèi)容，比如分了四類，導(dǎo)航系統(tǒng)，數(shù)據(jù)錄入，數(shù)據(jù)展示和反饋系統(tǒng)。其中導(dǎo)航系統(tǒng)又包含了，面包屑導(dǎo)航、下拉菜單、導(dǎo)航菜單、頂部導(dǎo)航等等，包括后面的數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋系統(tǒng)也包含了很多內(nèi)容。我們做這樣的擴(kuò)展庫，也不需要做成像Antdesign的組件庫里包含的那么多，或者和新出得字節(jié)Arco組件庫，因?yàn)樗鼈兠嫦虻氖窍到y(tǒng)級的解決方案，各行各業(yè)都可以用它，它面向的是一個大系統(tǒng)，也許我們只涉及到了其中的20%，因?yàn)橐矝]有一個系統(tǒng)能用到它所有的組件，所以我們自己在設(shè)計(jì)組件庫的時候，一定是按照我們自己項(xiàng)目的范圍去做組件庫，而不是做一個大而全的，大而全的組件庫對我們也沒有意義。它們做的是公共平臺，而我們要做的是一個專屬平臺。
形成完基本庫和擴(kuò)展庫后，第三步是建立方法庫。方法庫告訴我們的是什么時候用，比如我做了一個多選框，這個多選框應(yīng)該什么時候用，是不是只要遇見一個選擇就去用多選框，肯定不是，應(yīng)該加以說明什么時候用這個多選框。類似于是組件的設(shè)計(jì)說明。
最后再做一個案例庫，最佳實(shí)踐庫，具體組件什么時候用我們知道了，接著案例庫就是在告訴我們應(yīng)該如何正確的使用，或者說的方法是什么。比如標(biāo)簽的左對齊和右對齊，這種情況都對，什么時候用頂對齊，什么時候用左對齊，什么時候用右對齊呢？那么根據(jù)眼動儀實(shí)驗(yàn)數(shù)據(jù)數(shù)據(jù)來看，并且結(jié)合給出一些工作中業(yè)務(wù)中的最佳實(shí)踐得案例放進(jìn)去，給使用的人去做指引。
所以設(shè)計(jì)師做的事情，不僅僅是應(yīng)用組件庫和創(chuàng)造組價庫，還應(yīng)該指導(dǎo)其他設(shè)計(jì)師，指導(dǎo)開發(fā)人員在去復(fù)用每個頁面組件的的時候，應(yīng)該怎么正確的使用，這也是在B端設(shè)計(jì)中一個關(guān)鍵的環(huán)節(jié)，同時我們的視覺系統(tǒng)一定也是和業(yè)務(wù)有關(guān)聯(lián)度的，所以在B端中做設(shè)計(jì)一定也不會脫離業(yè)務(wù)去做，我們一定要聯(lián)系到實(shí)際的業(yè)務(wù)場景中，這個業(yè)務(wù)場景指的就是業(yè)務(wù)和視覺的結(jié)合，在做C端的時候，業(yè)務(wù)場景一定不會比B端多，C端的業(yè)務(wù)場景大多是定制化的業(yè)務(wù)場景，它要求的是個性化，不要求通用，盡量得個性化，比如圖標(biāo)、按鈕、頁面，而B端需要統(tǒng)一化，中臺組件庫的落地，可以大大提高設(shè)計(jì)師的工作效率和開發(fā)人員的協(xié)同效率，嚴(yán)謹(jǐn)?shù)恼{(diào)用組件使用組件，可以使得系統(tǒng)頁面保持高度的一致。
如圖1：可以看出縱列的關(guān)系更緊密，因?yàn)榭v間距小于行間距。
如圖2：可以看出行間距大于列間距，它得橫向關(guān)系更加緊密。通過圖中這樣的視覺設(shè)計(jì)為什么會感覺間距更加緊密呢？這屬于用戶心理學(xué)的應(yīng)用，如果元素相鄰的更近，元素之間的關(guān)系就會更加的緊密。
如圖3：如果元素相鄰的關(guān)系都是保持一樣的，那么它們的關(guān)系是相對對等的。
由此可以得出結(jié)論，如果相鄰的關(guān)系越近，它們的關(guān)聯(lián)度就越近，如果相鄰的越遠(yuǎn)，它們的關(guān)聯(lián)度就越遠(yuǎn)。
應(yīng)用案例：如圖4卡片中得標(biāo)題和內(nèi)容，設(shè)計(jì)中把標(biāo)題和內(nèi)容進(jìn)行區(qū)分，所以我們會做大量的留白，這樣的留白就會讓信息結(jié)構(gòu)具有層次感，層次感就是指它們信息結(jié)構(gòu)的關(guān)聯(lián)度，如果想讓它們有關(guān)聯(lián)度，就讓它們距離近一點(diǎn)不要做區(qū)分，如果不想讓它們有關(guān)聯(lián)度，或者關(guān)聯(lián)度出現(xiàn)一個等級的區(qū)分，那么就可以加一條線，讓它們之間的關(guān)聯(lián)度分隔開。這就是格式塔接近性的應(yīng)用。
如圖5：如果去區(qū)分右邊的形狀，通常我們會根據(jù)形狀進(jìn)行區(qū)分，因?yàn)槿说臐撘庾R會認(rèn)為相似的形狀會更有相關(guān)的分類性。這就是格式塔中的相似性原則。
應(yīng)用案例：如果文字的標(biāo)題大小是保持一致的，包括它有統(tǒng)一的大小，統(tǒng)一的色彩，統(tǒng)一的字號，那系統(tǒng)中的其他同樣功能的地方，都應(yīng)該用統(tǒng)一的文字，這就是格式塔相似性的應(yīng)用，比如圖標(biāo)也是一樣，只有用了相似的圖形大小，相似的顏色，在相同的位置，用相同的圖標(biāo)進(jìn)行表達(dá)，圖標(biāo)之間的設(shè)計(jì)才具有相似性。
如圖6：可以看到有一個L，是主體與背景進(jìn)行了區(qū)分，如果在設(shè)計(jì)的時候讓L看的更加明顯，我們采用的辦法就是將主體的色彩或者形狀變的更加獨(dú)特，或者將背景的顏色變得更加分明，這樣就可以做到那個L看的更加明顯。這就是主題與背景區(qū)分原則。
應(yīng)用案例：比如警告彈出，可以用色彩去區(qū)分，目標(biāo)就是讓用戶看的更加得清晰，當(dāng)警告的時候給用戶一個警告的信息，當(dāng)成功的時候給用戶一個成功的信息。還有類似對話框的彈出，采用背景變暗和加陰影的方式，都使用到了格式塔的主體與背景變化關(guān)系的原理。因此應(yīng)用在我們設(shè)計(jì)系統(tǒng)中，前景和背景進(jìn)行區(qū)分的時候，我們就可以通過色彩進(jìn)行區(qū)分，色彩的區(qū)分要保持統(tǒng)一，比如背景色彩透明度50%同時加一些背景模糊，其他的背景也需要保持一致，陰影也是一樣，如果把陰影放在一個平面上，距離平面越近，它得陰影越短，距離平面越遠(yuǎn)，它得陰影越長，這也是陰影的層級關(guān)系。
如圖7：可以看出這是一個四分之一的圓形。
如圖8：這個圖可以看出是一個五角星。
封閉性應(yīng)用案例：當(dāng)一個形狀被另外一個形狀或者被另外一個色彩阻斷的時候，并不影響人們對這個形狀額外得認(rèn)知，一定會腦補(bǔ)出另外一個形狀，這個原則和我們UI的關(guān)系是什么呢？比如一個loading，半圓一直在旋轉(zhuǎn)，或者圖表中的圓占比，我們就可以判斷出誰大誰小，誰多誰少，判斷出當(dāng)前的進(jìn)程和位置，封閉性原則通常應(yīng)用在圖標(biāo)的設(shè)計(jì)，圖表的設(shè)計(jì)和步驟條的設(shè)計(jì)中。
如圖9：可以看出用一些簡單得形狀來體現(xiàn)，其中三角形具有明顯的指向性，三角形箭頭指向右邊，上面五個是一組，可以看出它們具有連續(xù)性；另外一組三角形箭頭指向右下角，可以看出它們是連續(xù)的一組。不同的形狀會有連續(xù)性，箭頭也特別有指向性，這就是為什么返回和前要進(jìn)放在不同的位置，當(dāng)我們的數(shù)據(jù)需要有連續(xù)的時候，我們也要使用相似的形狀來表達(dá)，這就是連續(xù)性原則的應(yīng)用。
同理如圖10：連續(xù)性一定是要有連續(xù)等階的變化，從左上角開始，向下和向右我們可以看出有明顯的顏色連續(xù)等階變化，通過色彩的透明度也可以做到連續(xù)性。
很多公司或者不同公司有不同的命名方式，這個需要和團(tuán)隊(duì)開發(fā)提前做溝通，主要以方便開發(fā)習(xí)慣操作為主，如果不命名也不能非得說成是錯誤的，命名可以理解成是一件錦上添花的事情，因?yàn)橐磺卸家孕蕛?yōu)先，命名自然會影響工作效率，通常情況，組件的命名可以分成組件的名稱、級別、尺寸、狀態(tài)，這樣的命名順序來進(jìn)行，這樣命名開發(fā)使用也比較方便，因?yàn)槭前凑樟碎_發(fā)的統(tǒng)一規(guī)則來進(jìn)行命名的。如圖所示：
當(dāng)英文不好的時候，推薦大家記常用組件英文名，以及常用狀態(tài)名、級別名、內(nèi)部名、尺寸名和位置名，那這些英文也幾乎涵蓋了工作中80%的英文詞匯，收藏記憶哦~
至此B端系統(tǒng)設(shè)計(jì)總概系列為終結(jié)篇，回顧第一篇主要內(nèi)容是如何正確設(shè)計(jì)組件庫，B端業(yè)務(wù)調(diào)研的具體過程步驟，以及視覺規(guī)范的建立，可以看出第一篇屬于B端設(shè)計(jì)的方法論或者設(shè)計(jì)指導(dǎo)，也是為開展B端設(shè)計(jì)前的一些準(zhǔn)備工作；回顧第二篇總概主要內(nèi)容是如何設(shè)計(jì)表單、表格、圖標(biāo)、儀表盤這些經(jīng)常用到的設(shè)計(jì)難點(diǎn)，第二篇更加講究設(shè)計(jì)落地過程中遇到的疑難雜癥，專業(yè)技法；回顧當(dāng)前總概三，主要內(nèi)容就是中臺規(guī)范的建立和自適應(yīng)、響應(yīng)式適配的難點(diǎn)，主要是成系統(tǒng)的B端設(shè)計(jì)步驟。我們都知道B端市場剛剛打開，而且當(dāng)下對B端設(shè)計(jì)師的需求還遠(yuǎn)遠(yuǎn)不能滿足我國現(xiàn)代化建設(shè)，數(shù)字化推進(jìn)這么的大市場，作為UIUX，更早的拓寬一條路是我們當(dāng)下必要的選擇，謝謝閱讀，祝愿各位2022乘風(fēng)破浪，B端設(shè)計(jì)學(xué)有所成，如虎生翼！
轉(zhuǎn)載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://bouu.cn
