不會排版做什么UI設計師

　　新手UI設計師做設計工作很苦惱，為什么辛辛苦苦做出來的頁面沒有設計感?大多數情況下不是能力不行，而是對細節(jié)沒有掌控好，職場中可能還會被懟：不會排版做什么UI設計師，我們怎么才能讓頁面更具設計感呢?
 

　　UI設計中的第一個基礎原則就是親密原則，設計前對內容進行信息分層，屬于一個層級分為一組，有關聯的內容會離的更近，這樣的間距規(guī)律還會讓我們清晰的區(qū)分開每一條信息，不會導致信息干擾。

 

　　我們很容易將1.2分成一組，而將3.4分成-組，因為1.2者離的更近。

　　圖中內容有三塊: 上間距，內容區(qū)域，和下間距，因此我們可以判斷內容區(qū)內間距一定小于上下間距，因為根據親密性原則，有關聯內容會離的更近，標題和價格又分為2個模塊，其中價格優(yōu)惠之間信息屬于一個內容，所以它們間距相對就比較小。

 

　　很難一眼看出圖片屬于上邊還是下邊，親密原則就是區(qū)分哪塊和哪塊是整體， 加上間距區(qū)分上下文關系。
 

　　UI設計中的第二個原則就是對比原則，重要信息和次要信息通過顏色對比、粗細對比、形狀對比、疏密對比，大小對比使我們聚焦在需要關注的信息上，在進行對比排版的時候，需要多維度考慮，找到合適的解決方案。

　　以上APP都是通過字號，粗細，以及間距大小通過對比原則來區(qū) 分信息和信息之間關系，讓整個頁面動線看起來更加流暢閱讀節(jié)奏舒適。

　　有的設計雖然運用了親密原則但是看起來還是很混亂，原因是界面信息內容看起來對比不強烈。重要信息和次要信息要對比強烈，通過大小，字重突出標題信息讓用戶焦點聚焦在標題。

 

　　UI設計中的第三個原則就是平衡原則，它是界面排版布局的首要原則，大到整個官網，小到一張圖文，都需要我們對頁面視覺平衡有很好節(jié)奏控制。為了避免左側行動點過多不平衡，設計師采用分享按鈕放置于頁面右側達到左右平衡

　　為了保持平衡，Pin在feed設計上，保持了頭像左視覺焦點，右側入口按鈕互相平衡

　　ebay為了避免信息過于偏平衡，設計師在列表設計時候采用加大右側信息間距以及顏色自重來保持平衡

　　嚴選在設計時候為了保持設計平衡在標題上面兩側加上線條讓頁面更加舒適。
 

　　UI設計中的第四個原則就是相似原則，同樣的內容用同樣的視覺表達方式，讓用戶更容易去理解，這也是設計中經常運用到的原則。

 

　　Fancy在頁面中所有和點擊相關的無論氣泡還我按鈕還是鏈接都采用品牌藍色作為行動。

 

　　Airbnb頁面中，只要是可以點擊的都是綠色文字

 

　　ebay的頁面中所有能操作的頁面，按鈕，圖標，行動點全部采用藍色作為行動點

 

　　Facebook頁面中，能點擊的圖標，文字，按鈕，都是灰藍色來協調統(tǒng)一。
 

　　UI設計中的第五個是簡單原則，簡單原則分好幾種，其中一個就是sketch中對齊產生小數點，尤其是位置，經常我們執(zhí)行過程中不愛看圖層和大小，會導致位置的數值經常出現小數點或者奇數，從而使整個界面元素的間距、位置都不夠規(guī)范。
 

　　數字簡單，很容易產生小數點，間距的小數點，從而會讓頁面不嚴謹，正確做法對齊每個像素， 位置

　　規(guī)則簡單：平面設計的經驗中，一個平面設計的字體種類不宜太多、對齊方式不宜太多，因為規(guī)則太過繁瑣會讓設計變得復雜，甚至臃腫不堪。而界面設計也是一樣的，能用一個規(guī)則解決的問題，就盡量不要使用兩個。

　　間距規(guī)則簡單一致，復用。由于親密原則，我們知道上下間距(紅色高度) 一定大于內容區(qū)間距(綠色高度)，但是為了規(guī)則的簡潔，內容區(qū)的所有間隔(綠色高度)可以采用同一個規(guī)則，而上下間距(紅色高度)也可以相同，這樣4個距離，我們僅僅只用了2個規(guī)則就解決了問題，Facebook為了保持頁面關系簡潔，間距都采用一個規(guī)則解決，并且不失美感。

 

　　4個間距規(guī)則，繁瑣缺乏統(tǒng)一

 

　　簡化規(guī)則，從4個調整為2個

　　樣式簡單，有一個趨勢就是“無線化分隔”。將分隔線去掉，這就一種樣式上的簡潔，這種技法分場景使用。

　　采用簡潔的分隔樣式，這樣的排版方法使整個頁面看著輕量，干凈，大氣，更加突出內容，甚至能夠增加用戶的欣賞時間。

　　起伏邊緣簡單，起伏邊緣是一段文字的邊緣。當視線從行尾跳至下一行首時，大腦最好要能判斷出下一次跳躍的角度和距離把每次跳躍都想象成跑過跳板，如果間距保持一致，就會快很多。

 

　　在英文的段落排版中， 通常是左側對齊，而讓右側自然形成起伏邊(rag) eaby和谷歌做法保持左右邊緣對齊，方便閱讀，網易新聞也是采用左右兩側對齊，比較協調。

　　右側鋸齒嚴重，左右兩側對齊，減少鋸齒

　　右側鋸齒嚴重參差不齊

 

　　UI設計中的第六個就是封閉原則了，將兩個部分的內容用線框封閉起來后，就可以更容易的區(qū)分二者了。在我們的移動端界面排版時，最常使用的封閉表現形式就是“卡片”，用來區(qū)分各部分獨立的信息。

 

　　同一組信息用卡片封閉

 

　　這張列表，由于間隔和顏色的原因，導致我們更傾向于縱向閱讀，這時候我們也可以使用封閉原則，將內容封閉起來。用封閉原則，將內容封閉起來(每隔一條信息使用深色背景)這樣，不僅可以讓我們傾向于橫向閱讀，而且可以更好的區(qū)分開每條獨立的信息內容。

　　沒有人想被別人說：不會排版做什么UI設計師，作為一個UI設計師，專業(yè)設計技能必不可少，排版的重要性也是不言而喻的。大到頁面的整體布局，小到一個按鈕的位置，字體的顏色，都會影響到用戶體驗，進而決定UI設計師的設計作品的成敗。