UI設(shè)計(jì)網(wǎng)格布局有哪些

　　您已經(jīng)對(duì)如何使用網(wǎng)格有了基本的了解，您可能想知道如何將其應(yīng)用于您在網(wǎng)絡(luò)上看到的布局。響應(yīng)式網(wǎng)格是一種系統(tǒng)地調(diào)整您的設(shè)計(jì)，分配命令，建立層次結(jié)構(gòu)和“邏輯”設(shè)計(jì)的方法。它使事情看起來不那么浮動(dòng)，您通?？梢苑直娉稣l在使用網(wǎng)格以及誰沒有使用網(wǎng)格。隨著人們成為更好的設(shè)計(jì)師，他們的眼睛不斷在各處繪制水平和垂直線，以創(chuàng)建這種順序和對(duì)齊方式。
 

　　在該注釋上，我經(jīng)常會(huì)遇到諸如“等等，粘性面板如何在網(wǎng)格布局中工作?”之類的問題?；?ldquo;您對(duì)端到端的Web應(yīng)用程序做什么?” 我們將研究響應(yīng)式網(wǎng)格的一些應(yīng)用程序，以及它們?nèi)绾伟幢壤s小到移動(dòng)設(shè)備。更重要的是，我想教您如何混合和匹配布局以適應(yīng)您的設(shè)計(jì)需求。
 

　　如果不確定如何在響應(yīng)式設(shè)計(jì)中使用網(wǎng)格，請(qǐng)閱讀第一部分：響應(yīng)式網(wǎng)格以及如何實(shí)際使用它們。還是順其自然，一切都很好。
 

　　免責(zé)聲明：我不在這些公司中任職，也不知道他們?nèi)绾谓⒆约旱木W(wǎng)格。這純粹是一個(gè)學(xué)習(xí)練習(xí)，我僅以這些網(wǎng)站為例。
 

　　單列布局
 

　　又名全頁布局。這是最簡(jiǎn)單的布局，用于登錄頁面。您有足夠的空間來顯示大圖像，以創(chuàng)建可增強(qiáng)您的產(chǎn)品或品牌的聲明。一欄式布局中的事物充當(dāng)單獨(dú)的模塊，并且易于在移動(dòng)設(shè)備上擴(kuò)展，因?yàn)槭挛镆呀?jīng)按照您希望它們顯示的順序進(jìn)行了堆疊。因?yàn)樗诩ぐl(fā)情緒方面非常強(qiáng)大，所以這是主頁，簡(jiǎn)介，操作指南或新產(chǎn)品等的通用布局。即使在模塊中，也有可能將事物分成不同的網(wǎng)格列，整體而言正在利用12列作為主要內(nèi)容。
 

　　網(wǎng)格使用
 

　　您可以清楚地看到，WeWork在其設(shè)計(jì)中使用了網(wǎng)格，因?yàn)楸M管每一行都劃分了所有內(nèi)容，但它們?nèi)匀慌帕性谝黄?。一個(gè)簡(jiǎn)單的贈(zèng)品是元素之間的填充量是一致的(在4張卡片和兩個(gè)客戶成功案例之間)，并且外部邊緣的寬度相同，這使此設(shè)計(jì)非常令人賞心悅目。我也喜歡這個(gè)示例，因?yàn)樗砻髂匀豢梢栽趫?zhí)行基于行的模塊的同時(shí)以有趣的方式分解頁面。
 

　　例子

　　這是一列布局的其他一些示例。請(qǐng)注意，父元素內(nèi)的元素可能如何劃分為不同的列，但整個(gè)父元素位于一個(gè)主容器下。
 

　　兩列布局
 

　　這可能是最常見的布局之一，只是因?yàn)槟幌Ｍ谋镜膶挾瘸^6–8列。另一個(gè)好處是您可以將其他元素置于折疊上方，并使用此側(cè)欄進(jìn)行導(dǎo)航，廣告，號(hào)召性用語，類似清單等。您應(yīng)將8欄用作主要內(nèi)容，并將4欄用作側(cè)面內(nèi)容。這樣，您的兩面都是偶數(shù)，如果需要，您可以將主要內(nèi)容切成兩半，以很好地并排顯示內(nèi)容。
 

　　“但是等等，有8列?然后我的設(shè)計(jì)空間就大大減少了!” 你可能會(huì)說。在網(wǎng)絡(luò)上，切勿讓文本使用全部12列。這是一個(gè)基本的排版原則，舒適的閱讀寬度在16px處約為60–80個(gè)字符，而在桌面上恰好不超過8列。其實(shí)8列是真正推動(dòng)它，因?yàn)槟惚仨氁紤]那些誰使用了大量的桌面，所以我不會(huì)設(shè)計(jì)的東西多比。即使在單列主頁布局中，內(nèi)容也居中并具有最大寬度。因此，“更少的空間”確實(shí)是沒有問題的，甚至可以使您的設(shè)計(jì)更好。
 

　　這種布局用途廣泛，適用于網(wǎng)站的內(nèi)頁，例如，當(dāng)您有大量文本要閱讀時(shí)。一些頁面示例是博客，說明，常見問題解答，操作方法，您希望在其中使導(dǎo)航或其他方便用戶使用的內(nèi)容。
 

　　移動(dòng)
 

　　在移動(dòng)設(shè)備上，這是一個(gè)簡(jiǎn)單的層次結(jié)構(gòu)問題。您需要根據(jù)側(cè)面板中的內(nèi)容做出堆疊決策。如果側(cè)面板是導(dǎo)航或關(guān)于FAQ的一系列問題，則應(yīng)將其放在主要內(nèi)容之前。如果側(cè)面板是“閱讀更多”或“其他建議”，則應(yīng)將其堆疊在主要內(nèi)容的底部。
 

　　三列布局
 

　　由于您要處理三列，因此您可以選擇如何分配它們。讓我們先來看一個(gè)簡(jiǎn)單的示例-均勻的4–4–4分布。
 

　　4–4–4分布
 

　　當(dāng)您需要發(fā)布大量圖像時(shí)，這對(duì)于布局很有用。如果設(shè)計(jì)將不使用最大寬度，則可以由您選擇。我在下面顯示了兩個(gè)示例。
 

　　分布不均(3–6–3)
 

　　分布不均勻是一種布局，用于當(dāng)您擁有可以處理較長(zhǎng)內(nèi)容的產(chǎn)品時(shí)，您還希望突出顯示用戶可以做的其他事情。當(dāng)主要內(nèi)容不需要很多水平空間時(shí)，這是最合適的。
 

　　這是Dribble設(shè)計(jì)工作板上3–6–3布局的示例。紫色輪廓指示內(nèi)容位于網(wǎng)格上的位置，紫色塊指示它們?yōu)樵靥峁┑钠渌畛?。我非常喜歡這個(gè)示例，因?yàn)樗嵝涯梢园醋约旱南埠梅纸忭撁?。在這里，標(biāo)題和大號(hào)的CTA是一個(gè)模塊，用作三列之前的標(biāo)題語句。但是，如果仔細(xì)看，它實(shí)際上仍在中間的6列之內(nèi)。
 

　　就像兩列布局一樣，您需要決定如何顯示內(nèi)容，而這取決于信息的重要性。使用相同的Dribbble示例，在平板電腦上，左面板完全消失。在移動(dòng)設(shè)備上，右側(cè)面板會(huì)塞入過濾器按鈕。單擊過濾器按鈕可展開該部分并將內(nèi)容推入下面。僅出于理論上的考慮，如果左側(cè)是導(dǎo)航，則可以將其堆疊在主要內(nèi)容的頂部，放在抽屜中，嘗試水平滾動(dòng)的錨點(diǎn)，或者創(chuàng)建帶有導(dǎo)航元素的粘性頁腳。
 

　　Dribble的3列布局更改為平板電腦上的2列(左)。在移動(dòng)設(shè)備上，右側(cè)面板會(huì)塞入過濾器按鈕(中間)。單擊過濾器按鈕可展開該部分，并將內(nèi)容推入下方(右)。
 

　　分布不均(2–5–3)
 

　　Facebook和Twitter使用這種布局，其中主要內(nèi)容是供稿的長(zhǎng)滾動(dòng)區(qū)域。您可能會(huì)注意到左側(cè)和右側(cè)的列數(shù)不均。他們的左側(cè)面板是導(dǎo)航欄，右側(cè)是一列較寬的欄，其中包含生日，精彩集錦，提醒和趨勢(shì)等雜項(xiàng)。
 

　　如果您回想起我以前的文章，則12列是臺(tái)式機(jī)上最基本和最標(biāo)準(zhǔn)的列，但這并不意味著您需要使用它。不同的頁面可能需要不同的網(wǎng)格設(shè)置，具體取決于您的產(chǎn)品。在這里，布局之所以有用，是因?yàn)樘嵋恍枰珜?，而且分布不均勻也使提要具有層次結(jié)構(gòu)和注意力。
 

　　基本上，您可以按自己的喜好分割網(wǎng)格，只需要認(rèn)真考慮站點(diǎn)的用途以及削減層次結(jié)構(gòu)將如何支持該目的。如果站點(diǎn)的目的是主要閱讀長(zhǎng)篇小說或查看大圖像，則我不會(huì)使用三列布局，因?yàn)槲蚁胧褂酶嗟乃娇臻g。取而代之的是，我將導(dǎo)航放在頂部，并使用兩列布局。或者，如果我需要一個(gè)介于圖像和文本之間的不錯(cuò)的選擇，那也將是使用兩列布局的一個(gè)很好的理由，例如Reddit的當(dāng)前設(shè)計(jì)。
 

　　粘板
 

　　粘性面板是指您的區(qū)域具有粘性，或者在用戶向下滾動(dòng)頁面時(shí)“跟隨”用戶。粘性面板中的信息可以是靜態(tài)的，例如帶有號(hào)召性用語的警告消息，也可以是動(dòng)態(tài)面板，該面板會(huì)在您更改信息時(shí)進(jìn)行更新。布局本身與兩列布局相同，但粘性內(nèi)容要短得多。它之所以非常有效，是因?yàn)樗捎糜诜从秤脩粼诜钦承苑矫嫠龅氖虑?，并始終吸引號(hào)召性用語。使號(hào)召性用語保持一致很重要，因?yàn)樗梢蕴嵝延脩粝乱徊綉?yīng)該做什么，從而增加轉(zhuǎn)化次數(shù)。與滾動(dòng)兩列布局相比，當(dāng)您要突出顯示用戶可以執(zhí)行的單個(gè)操作時(shí)，最好使用粘性列，而對(duì)于多個(gè)操作則最好使用不粘滯。
 

　　如果使用網(wǎng)格系統(tǒng)進(jìn)行設(shè)計(jì)，則面板應(yīng)位于網(wǎng)格內(nèi)部。在臺(tái)式機(jī)上，面板將占用外部3或4列。其余的，無論是右側(cè)還是左側(cè)，將是滾動(dòng)的8列或9列。
 

　　重要：如果您決定設(shè)計(jì)粘性面板，則該面板必須足夠短，以使其在所有桌面屏幕上都可見。因此，它必須簡(jiǎn)明扼要，如果它是動(dòng)態(tài)的或具有伸縮性，則應(yīng)確保內(nèi)容未在其最大高度處被剪切。
 

　　移動(dòng)
 

　　您是否注意到臺(tái)式機(jī)與兩欄式布局相同，但側(cè)面板較短?區(qū)別在于移動(dòng)設(shè)備，面板被壓入了一個(gè)粘性頁腳。另一個(gè)選擇是，它也可以是包含在內(nèi)容中間的另一個(gè)模塊。
 

　　在移動(dòng)體驗(yàn)上，Airbnb會(huì)將粘性的右面板變成粘性的底部頁腳。當(dāng)用戶單擊“預(yù)訂”時(shí)，將顯示帶有預(yù)訂詳細(xì)信息的模式。通常，粘性頁腳會(huì)非常匯總，如果用戶單擊粘性頁腳，則可能會(huì)顯示一個(gè)模態(tài)或您可以像抽屜一樣將其拉起。在移動(dòng)網(wǎng)絡(luò)上，與抽屜相比，該模式更易于開發(fā)，但是抽屜將模仿更近的桌面體驗(yàn)。
 

　　網(wǎng)絡(luò)應(yīng)用
 

　　某些站點(diǎn)具有持久的導(dǎo)航功能，該導(dǎo)航功能通常會(huì)粘在屏幕邊緣，通常在屏幕的頂部和左側(cè)。這些粘性導(dǎo)航菜單可幫助用戶感覺就像他們?cè)谑褂脩?yīng)用程序，并且對(duì)于基于動(dòng)作的UI(用戶需要在不同目標(biāo)之間進(jìn)行切換)非常有用。由于這樣的設(shè)計(jì)意味著導(dǎo)航始終存在，因此您可以利用它來簡(jiǎn)化內(nèi)容。
 

　　對(duì)于Web應(yīng)用程序設(shè)計(jì)，粘性導(dǎo)航實(shí)際上不屬于網(wǎng)格。它留在它外面，因?yàn)樗鼘⒁恢贝嬖?。網(wǎng)格將成為您的內(nèi)容，其外部還有粘性導(dǎo)航。通常，此粘性導(dǎo)航的大小也是固定的。在此示例中，Spotify的左側(cè)面板和底部面板具有粘性，并且在拉伸瀏覽器時(shí)，只有網(wǎng)格中的內(nèi)容會(huì)動(dòng)態(tài)更改大小。大多數(shù)網(wǎng)絡(luò)應(yīng)用程序都保持網(wǎng)格流暢以填充瀏覽器。
 

　　移動(dòng)
 

　　通常，Web應(yīng)用程序傾向于具有實(shí)際的移動(dòng)應(yīng)用程序(從應(yīng)用程序商店下載應(yīng)用程序)。與移動(dòng)網(wǎng)絡(luò)相比，有了移動(dòng)應(yīng)用程序，您可以做更多的事情(在手機(jī)上以chrome打開頁面)。在移動(dòng)體驗(yàn)中，由于菜單項(xiàng)很多，導(dǎo)航項(xiàng)往往會(huì)塞入漢堡菜單。如果在桌面上有一個(gè)頂部導(dǎo)航充當(dāng)總體導(dǎo)航，則它在移動(dòng)設(shè)備上可能仍會(huì)粘在頂部或底部。為什么是底部?它離您的手更近，因此更容易接近。因此，現(xiàn)在有幾家公司不再將導(dǎo)航放在其應(yīng)用程序的頂部。
 

　　Slack的移動(dòng)應(yīng)用程序?qū)?dǎo)航隱藏在左上角的圖標(biāo)中。Google Keep將導(dǎo)航隱藏在移動(dòng)應(yīng)用程序的漢堡菜單中，但還引入了新的即時(shí)貼按鈕來創(chuàng)建新的便箋。Youtube的移動(dòng)網(wǎng)絡(luò)版本具有導(dǎo)航功能，可作為頁腳。
 

　　這還不是全部。您還可以利用許多其他很酷的方法來利用網(wǎng)格進(jìn)行出色的設(shè)計(jì)。有時(shí)您不必使用裝訂線，有時(shí)甚至不必在桌面上做12列。您的三列布局甚至不需要從頁面的開始處開始。這僅僅是設(shè)計(jì)中如何使用網(wǎng)格的開始。最后，它可以幫助您思考層次結(jié)構(gòu)。希望本文能夠在技術(shù)方面為您提供幫助，但更重要的是，在如何考慮設(shè)計(jì)并提供適合頁面目的的可視化解決方案方面，您會(huì)有所幫助。良好的可用性不僅取決于外觀，還取決于有效的，可擴(kuò)展的和可轉(zhuǎn)換的。