<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          

	
          
		
          
			
          
				
          如何創建精致的UI界面布局篇
          
				
           2019-10-31      ui設計分享達人      
          
			
          
			
          
				
          
    前言

          

          
     

          

          前面已經完成這個系列的 “排版和圖形”兩篇文章，本周接著后面的 布局篇幅，我們知道布局的好壞直接影響產品美觀度，不同形式的布局，給用戶帶來的感受是不一樣的，產品也將會有不一樣的性格，因為布局直接影響界面空間疏密程度，不同產品都有著不同空間，那么我們要如何做，才能更好的去布局，并且能在激烈的競爭中脫穎而出，現今大部分產品基本都是長得差不多，作為設計師更應該去多研究一些布局趨勢，并能將其融匯在自家產品中。 
          

          
    
          

          

          
    
          

          

          
    
          

          

          
    為什么要重視布局 

          

          - 
          布局對界面設計來說十分重要，不僅是我們常說的在移動端或者web端的設計中，他在車載中、電視端UI或者VR設計同樣有很大影響。我們知道界面設計中最關鍵的五大基礎語言；形，色，字，質， 構，其中 構（結構）即是我們所說的布局，五個維度之前已經和大家分享了 圖形和字體篇，今天我們可以看下布局對界面設計的影響，以及我們該如何通過布局來使界面設計看起來更加有范，更有自己的視覺特征點在里面。 
          

          
    
          

          

          
    
          

          

          
    
          

          

          
    目前主流布局趨勢是怎樣的 

          

          
    -

          

          前面在向大家介紹布局的重要性和他對界面設計的影響，那么如果我們需要做出一些比較有創新的布局來提高界面精致度，該如何去下手呢？我們可以通過觀察目前主流一些趨勢做法，了解國外設計師如何找到更有創意的方式來設計他們的布局 - 并將一些創意運用到界面設計中的，下面我們一起看下。 
          

          
    
          
           

          

          
    
          
           

          

          
    
          
           

          

          
    
          
           

          

          
    偏移與疊加網格布局
          

          

          
    -

          

          網格布局我相信大部分人都知道，很熟悉，那么今天所說的偏移疊加網格布局是什么樣子的呢？其實就是我們在設計界面時候，把最底層基礎網格搭建好后，上層的內容排版，通過錯落疊加方式來布局，這種布局的優點是留白空間大，呼吸感強，圖文錯落交織一起，形式感增強。缺點是，運用的范圍會小一些，承載內容少，一般Web端運用比較多。當然也有一些移動端設計個性化產品存在這樣的布局 （Rover APP）可以去下載體驗下。 
          

          
    
          

          

          
     

          

          
    上圖文字與圖片交疊錯落排版，圖片與圖片之間也是網格交錯

          

          
    
          

          

          
     

          

          
     

          

          
    
          

          

          
    上面移動端設計，設計師通過留出左側空網格，整體內容往右側偏移，導航相對內容來說做了差異化設計，并未進行偏移設計（看我上圖紅框部分）  。這樣做的目的是因為，我們點擊漢堡菜單的時候，本來整體就要往右側移動，如果再繼續移動，那么內容會顯示不下，同時視覺效果并沒有很好

          

          
    
          

          

          
     

          

          
     

          

          
    
          

          

          
    半偏移網格布局，界面中并非所有的內容都偏移底層網格，而是部分模塊這樣去做，原因是內容多的情況下。

          

          
    
          

          

          
    
          

          

          
    
          

          

          
    
          

          

          
    分屏布局 

          

          - 
          

          

          
    分屏布局，顧名思義就是將屏幕進行幾種不同區域的劃分，然后內容分布排版在里面，分屏布局解決的主要問題將屏幕大的設備進行合理劃分空間設計，一般是在橫屏運用比較多，比如PAD，或者WEB或者車機中控屏，下面一起看下分屏布局在實際設計中的具體表現

          

          
    
          

          

          
     

          

          
     

          

          
     

          

          
    
          

          

          
    上圖界面設計采用了1/2分屏布局，將圖片與內容文字進行區域劃分，下圖是將主文案擺放在分割區域中間（文字較少情況下可以這樣去做）增強形式感。當然分屏布局可以有多重形式，列如，2/3,1/3，3/4等等，可以根據內容進行選擇合適分屏

          

          
    
          

          

          
    
          

          

          
    
          

          

          
    
          

          

          
    Z軸視差布局 

          

          
    -

          

          視差布局，在web app或者web端布局常用比較多的一種，運行方式當滑動頁面內容時內容與內容之間運動速率會有時間差，同時Z軸空間位置也會有深度差異，這樣就形成了視差效果，視差布局一般在H5界面出現比較多，用于營銷場景會多一些，當然WEB端倒是比較常見 
          

          
    
          

          

          
     

          

          
     

          

          
    地址:https://www.stereo.ca/project/clinique-dentaire-gagnon/

          

          
    
          

          

          
    
          

          

          
    
          

          

          
    
          

          

          
    內容重疊布局 

          

          - 
          

          內容重疊布局，打破了傳統平整的極簡注意風格，扁平化設計將會加入Z軸空間元素，使得整體設計有了新穎的布局方式，這也是一種區分競爭產品的布局方式，一般內容重疊產品大多出現在偏雜志化設計的產品中，如之前我介紹圖形篇時候提到 韓國29cm
          他們詳情頁，運營頁面運用了重疊布局。 
          

          

          
    
          

          

          
     

          

          
     

          

          
    
          

          

          
    地址:https://www.stereo.ca/project/clinique-dentaire-gagnon/

          

          
    
          

          

          
     

          

          
     

          

          
    
          

          

          
    
          

          

          
    
          

          

          
    
          

          

          
    卡片布局 

          

          - 
          

          為什么要把卡片布局拿出來講?卡片布局應該是我們見過最多的布局了，卡片布局也會有很多種方式去布局，根據產品內容復雜程度去建立卡片容器大小，卡片作為承載內容的容器，對于響應式布局也是非常有利的支持，我們看appstore,behance的移動端，都是卡片布局。 
          

          
    
          

          

          
     

          

          
     

          

          
    
          

          

          
    卡片布局還有一個最大好處就是，他能夠封裝內容，使得畫面布局整潔，所有內容都往容器里面放，信息之間保持很好的區分

          

          
    
          

          

          
     

          

          
     

          

          
     

          

          
    
          

          

          
    全封閉卡片布局，內容之間通過卡片封裝，中間無空隙

          

          
    
          

          

          
    
          

          

          
    
          

          

          
    
          

          

          
    自由式網格布局 

          

          - 
          

          這種網格布局相對來說比較開放性的，布局上多以卡片承載內容為主，卡片跟隨隱形網格隨機分布在畫板中，有點類似我們說的暴瀑流布局方式，這種會比較靈活，一般會在攝影類，雜志類，文藝類產品居多。 
          

          
    
          

          

          
     

          

          
     

          

          
     

          

          
    
          

          

          
    
          

          

          
    
          

          

          
    
          

          

          
    
          

          

          
    如何運用這些布局進行創新設計 

          

          
    -

          

          上面已經列舉了目前比較流行的一些布局，可能部分人還是感覺不會使用，也不會很好的去利用在自己設計中。要么就直接把別人布局抄襲過來，其實是有方法的，我們可以把自己認為比較好的一種布局拿出來，然后拆解他，拆解完后，再來重新組裝，組裝的時候，你可以參考下其他布局，兩者集合起來，就像樂高積木一樣，你可以有很多種組合方式。 
          

          
     

          

          
     

          

          
     

          

          
    
          

          

          
    上面利用樂高積木思維重新對布局進行拆解組合，當然一切的布局都是基于當前你的主旨，你的產品內容，找到合適布局，然后去研究他，并且拆解，然后重新搭建屬于自己產品一套布局規則

          

          
    
          

          

          
    
          

          

          
    
          

          

          
    
          

          

          
    總結 

          

          
    -

          

          
    全文向大家介紹5種布局思路，當然其實不止這5種，但是其他布局相對來說會運用少一些，這些布局我們可以加以學習利用，可以運用在任何設計中去，當然運用的時候，一定要清晰知道自己產品的主旨目標，用戶群體，合理運用布局，做出創新設計！

          

          
    
          

          

          
    轉自：站酷-設計TNT  

          				
          
								
			
          
		
          
		
		
	
          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合