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