• <samp id="mz5ne"><acronym id="mz5ne"></acronym></samp>
      <ol id="mz5ne"></ol>
      

    1. <samp id="mz5ne"></samp>
      <mark id="mz5ne"></mark>
        

        <fieldset id="mz5ne"></fieldset>
        

        免费看又黄又无码的网站_久久久高清国产免费观看_亚洲一区二区三区在线免费观看_免费欧洲美女a视频一级毛片_日本最新免费二区三区
        



        

        
  
  
  ×

        

        
  
        
    
        


        
  

  
        
    
  
        

  

        











  
        

        

        





        


        
	

        

		
		
        
			
        

				
				
        
					
        
                    
					
        
					
        
						
        響應(yīng)式柵格系統(tǒng)是什么
        
						
          
							
        • 作者：新網(wǎng)
          • 
							
        • 來源：新網(wǎng)
          • 
							
        • 瀏覽：100
          • 
							
        • 2018-02-27 17:45:42
          • 
						
        
						
        Material Design 的響應(yīng)式柵格系統(tǒng)是谷歌推出了全新的設(shè)計語言Material Design。谷歌表示，這種設(shè)計語言旨在為手機、平板電腦、臺式機和\"其他平臺\"提供更一致、更廣泛的\"外觀和感覺\"。
        
						
						
         Material Design 的響應(yīng)式柵格系統(tǒng)是谷歌推出了全新的設(shè)計語言Material Design。谷歌表示，這種設(shè)計語言旨在為手機、平板電腦、臺式機和"其他平臺"提供更一致、更廣泛的"外觀和感覺"。
        

        51550170_640.jpg
        
<div>可當(dāng)真正需要用到響應(yīng)式這東西時，在做完競品調(diào)研后，我慢慢發(fā)現(xiàn)自己真不該那么執(zhí)著于 Material Design 響應(yīng)式柵格系統(tǒng)，因為：
        

         
        

        那兩張英文圖表對藝術(shù)背景的設(shè)計師來說真的很難理解。
        

         
        

        你設(shè)計的產(chǎn)品很有可能比 Material Design 的預(yù)期更加復(fù)雜。
        

         
        

        你的開發(fā)團隊很有可能不能夠 or 不愿意花費時間嘗試這么復(fù)雜的系統(tǒng)。
        

         
        

        連 Google 自己的產(chǎn)品都沒怎么使用這套柵格系統(tǒng)。
        

         
        

        那么，真正大范圍使用、可以借鑒的、非理想主義的響應(yīng)式柵格存在嗎?答案是肯定的，下面我要介紹三種國內(nèi)外常見的類型。
        

         
        

        一. 擺不下就換行
        

         
        

        顧名思義，這種柵格中，卡片(即內(nèi)容區(qū)塊)尺寸和間距不變，每行能放幾張卡片就放幾張，擺不下就換行，邏輯非常簡單。典型的例子有 Youtube 、Pinterest、Behance ……
        

         
        

        Youtube
        

         
        

        這么簡單的響應(yīng)式柵格系統(tǒng)，其問題也很明顯：
        

         
        

        頁邊距不確定，所以為了視覺的平衡感，大多將列表居中(像 Google Play 那樣堅持左對齊也不是不可以)。
        

         
        

        一整頁最好只有一種尺寸的卡片，否則邊距無法不統(tǒng)一。
        

         
        

        固定的卡片尺寸和邊距可能在大屏里看起來太小，小屏里看起來又太大。
        

         
        

        但是如果產(chǎn)品夠簡單，列表單一的話，用這種是沒問題的。
        

         
        

        二. 彈性伸縮填滿
        

         
        

        這種柵格系統(tǒng)的間距和頁邊距是固定的，卡片尺寸在一定程度下彈性伸縮，以確保填滿整個屏幕。因為間距和頁邊距固定，也不用擔(dān)心卡片混排。典型的例子有： Google Drive 、Spotify ……
        

         
        

        Spotify
        

         
        

        這種方式為了保證頁邊距不像第一種方式那樣來回變動，不得不讓卡片在一定范圍內(nèi)彈性伸縮，這樣做的好處是，不同大小的卡片混排也不會造成混亂。但是在縮放瀏覽器時，你會發(fā)現(xiàn)卡片的尺寸無可避免地時大時小。
        

         
        

        這種響應(yīng)式柵格稍微復(fù)雜一點，我下面畫圖示意設(shè)計方法：
        

         
        

        1. 畫出基準(zhǔn)界面：
        

         
        

        用一個理想寬度的屏幕，用適當(dāng)?shù)拈g距擺下理想尺寸的卡片。
        

         
        

        2. 標(biāo)出固定部分：
        

         
        

        頁邊距和卡片間距是不變的，把它們用色塊標(biāo)記出。
        

         
        

        3. 畫出基準(zhǔn)柵格：
        

         
        

        橫向延展間距色塊，就得到了這個界面的基準(zhǔn)柵格。
        

         
        

        三. 定制類響應(yīng)式布局
        

         
        

        其實國內(nèi)的大部分網(wǎng)頁并沒有做響應(yīng)式布局(比如知乎、淘寶、愛奇藝等)，即便是部分做了的(比如簡書、京東、騰訊視頻等)，也大多沒有使用上面講的那兩種自適應(yīng)的柵格，而是定制類響應(yīng)式布局。
        

         
        

        上述這些響應(yīng)式柵格各有優(yōu)劣，都不是最完美的解決方案。但是世界上沒有最完美的解決方案，Google 能設(shè)計出 Material Design 那樣細(xì)致的柵格系統(tǒng)，卻也沒有辦法在自己的產(chǎn)品上廣泛使用。
        

         
        

						
					
        
					
        
                    
					
        
					
					
        
						
        免責(zé)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻自行上傳，本網(wǎng)站不擁有所有權(quán)，也不承認(rèn)相關(guān)法律責(zé)任。如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容，請發(fā)送郵件至：operations@xinnet.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，本站將立刻刪除涉嫌侵權(quán)內(nèi)容。
        
					
        
					
				
        
				
			
        
		
        
	
  
  
  

        
  
        
    
        
    

    
        
  
        

  

        





        
  
  免費咨詢獲取折扣
  

        





        

        
  

        Loading
        

        




 




 









国产精品视频白浆免费视频_久久久高清国产免费观看_亚洲一区二区三区在线免费观看_免费欧洲美女a视频一级毛片 

      2. <samp id="mz5ne"><acronym id="mz5ne"></acronym></samp>
          <ol id="mz5ne"></ol>
          

        1. <samp id="mz5ne"></samp>
          <mark id="mz5ne"></mark>
            

            <fieldset id="mz5ne"></fieldset>
            
建瓯市|
荆州市|
鹰潭市|
申扎县|
独山县|
江华|
大姚县|
许昌县|
河曲县|
湖口县|
德昌县|
涞源县|
怀柔区|
乳山市|
蒲城县|
林芝县|
武胜县|
新巴尔虎右旗|
东阳市|
武隆县|
乡宁县|
辽阳市|
城市|
扶余县|
章丘市|
临安市|
关岭|
麻栗坡县|
岳池县|
墨竹工卡县|
孝昌县|
应用必备|
常德市|
临漳县|
黄梅县|
呼玛县|
河北省|
定边县|
修文县|
清涧县|
浙江省|