旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計 > UI設(shè)計網(wǎng)格布局有哪些

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

時間:2020-05-07來源:m.5wd995.cn點(diǎn)擊量:作者:Sissi
時間:2020-05-07點(diǎn)擊量:作者:Sissi



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

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

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

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

  單列布局
 

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

  網(wǎng)格使用
 

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

  例子

UI設(shè)計


 

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

  兩列布局
 

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

UI設(shè)計
 

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

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

  移動
 

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

  三列布局
 

UI設(shè)計
 

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

  4–4–4分布
 

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

  分布不均(3–6–3)
 

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

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

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

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

  分布不均(2–5–3)
 

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

  如果您回想起我以前的文章,則12列是臺式機(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)的目的是主要閱讀長篇小說或查看大圖像,則我不會使用三列布局,因?yàn)槲蚁胧褂酶嗟乃娇臻g。取而代之的是,我將導(dǎo)航放在頂部,并使用兩列布局。或者,如果我需要一個介于圖像和文本之間的不錯的選擇,那也將是使用兩列布局的一個很好的理由,例如Reddit的當(dāng)前設(shè)計。
 

  粘板
 

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

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

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

  移動
 

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

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

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

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

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

  移動
 

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

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

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




 

預(yù)約申請免費(fèi)試聽課

填寫下面表單即可預(yù)約申請免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖