UI新手排版入門!最容易上手的6個排版套路 - 優設網 - UISDC

UI新手排版入門!最容易上手的6個排版套路

2017/12/11 21246評論區

作為UI設計師,如何讓界面有規律有節奏地去展示信息內容?今天分享的這6個技巧或許可以幫助到你!

一. 親密原則

設計前對內容進行信息分層,屬于一個層級分為一組,有關聯的內容會離得更近,這樣的間距規律還會讓我們清晰地區分開每一條信息,不會導致信息干擾。

我們很容易將1、2分成一組,而將3、4分成一組,因為1、2離得更近。

圖中內容有三個模塊:上間距、內容區域、下間距。

因此我們可以判斷內容區內間距一定小于上下間距,因為根據親密性原則,有關聯內容會離得更近,標題和價格又分為2個模塊,其中價格優惠之間信息屬于一個內容,所以他們的間距相對就比較小。

△(左圖)我們就無法弄清楚標題是區分上面圖片還是下面圖片

△(右圖)我們采用親密原則,將1.2放一起,加上間距區分上下文關系

二. 對比原則

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

這些App都是通過字號、粗細以及間距大小進行對比來區分信息和信息之間關系,讓整個頁面動線看起來更加流暢,閱讀節奏更舒適。

△(左圖)雖然運用了親密原則但是看起來還是很混亂,原因是界面信息內容看起來對比不強烈。

△(右圖)重要信息和次要信息對比強烈,通過字體大小、字重來突出標題的信息,讓用戶焦點聚焦在標題上。

三. 平衡原則

平衡原則是界面排版布局的首要原則,大到整個官網,小到一張圖文,都需要我們對頁面的視覺平衡有很好的節奏控制。

△ Fancy為了避免左側視覺重點過多導致畫面不平衡,設計師將分享按鈕放置于頁面右側達到左右平衡

△ Pinterest為了保持平衡,將用戶頭像放置左邊作為視覺焦點,右側放置入口按鈕,起到互相平衡的作用

△ Ebay為了避免信息過多導致沒有視覺重點,設計師在設計列表時,采用加大右側信息間距以及顏色、字重來保持平衡。

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

四. 相似原則

△ Fancy頁面中所有與點擊相關的控件,比如,氣泡、按鈕還有鏈接都采用品牌藍色作為行動點。

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

△ Ebay的頁面中,所有能操作的頁面、按鈕、圖標、行動點,全部采用藍色做為行動點。

△ Facebook的頁面中,能點擊的圖標、文字按鈕都是灰藍色來協調統一。

五. 簡單原則

注意Sketch中對齊參數中的小數點,尤其是位置參數。我們經常在執行過程中不愛看圖層和大小,所以會導致位置的數值出現小數點或者奇數,從而使整個界面元素的間距、位置都不夠規范,如下圖:

1. 數字簡單

△ (左圖)間距的小數點,會讓頁面不嚴謹

△ (右圖)正確做法對齊每個像素,位置

2. 規則簡單

一張平面設計的字體種類不宜太多、對齊方式不宜太多…..因為規則太過繁瑣會讓設計變得復雜,甚至臃腫不堪。而UI設計師也是一樣的,能用一個規則解決的問題,就盡量不要使用兩個。

△ 間距規則簡單一致,復用

△ 間距規則統一

△ 由于親密原則,我們知道上下間距(紅色高度)一定大于內容區間距(綠色高度),但是為了規則的簡潔,內容區的所有間隔(綠色高度)可以采用同一個規則,而上下間距(紅色高度)也可以相同。

這樣四個距離,我們僅僅只用了兩個規則就解決了問題。比如,Facebook為了保持頁面簡潔,間距都采用一個規則解決,并且不失美感。

△ (左圖)4個間距規則,繁瑣缺乏統一

△ (右圖)簡化規則,從4個調整為2個

△ (左圖)優化前,間距規則冗余

△ (右圖)簡單規則優化后,簡單統一

3. 樣式簡單

今年流行一個趨勢就是「無線化分隔」。將分隔線去掉,成為一種樣式上的簡潔,這種技法分場景使用。

△ 韓國29CM、Airbnb、Pinterest 都采取了這種簡潔的分隔樣式

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

4. 起伏邊緣簡單

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

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

△(左圖)右側鋸齒嚴重

△(右圖)左右兩側對齊,減少鋸齒

△(左圖)右側鋸齒嚴重,參差不齊

△(右圖)左右兩側對齊,減少鋸齒

六. 封閉原則

將兩個部分的內容用線框封閉起來后,就更容易區分了。在移動端界面進行排版時,最常使用的封閉表現形式就是「卡片」,它用來區分各部分獨立的信息。

△ 同一組信息用卡片封閉

△(左圖)這張列表,由于間隔和顏色的原因,導致我們更傾向于縱向閱讀,這時候我們也可以使用封閉原則,將內容封閉起來。

△(右圖)使用封閉原則,將內容封閉起來(每隔一條信息使用深色背景)。這樣,不僅可以讓我們傾向于橫向閱讀,而且能更好的區分每條獨立的信息內容。

設計策略

親密原則:先對內容進行信息分層,屬于一個層級分為一組,有關聯的內容會離的更近。

對比原則:通過顏色對比、粗細對比、形狀對比、疏密對比、大小對比,使我們聚焦在需要關注的信息上,在進行對比排版的時候,需要多維度考慮。

平衡原則:平衡原則是界面排版布局的首要原則。大到整個官網,小到一張圖文,都需要我們對頁面視覺平衡有很好的節奏控制。

相似原則:對相似的內容賦予相同的屬性。例如同一級別的標題文字大小相同,相同顏色(如藍色等)的字體都可以點擊等等,相似原則的因素也不只有文字顏色,還有背景色、方向、大小等等。

簡單原則:對頁面所有元素避免小數點。頁面間距規則簡單通用、視覺樣式輕量化、無線化分割,同時,注意頁面右邊邊緣對齊。

封閉原則:用于區分兩個獨立的模塊部分時一般采用封閉原則。封閉原則一般使用卡片、線框或間隔的顏色來封閉內容。

「讓你輕松掌握排版原則」

歡迎關注作者的微信公眾號:我們的設計日記,每周分享最新設計趨勢和設計經驗,科學設計方法。

================明星欄目推薦================

優優教程網 UiiiUiii.com 是優設旗下優質中文教程網站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章,按照我們的專欄一步步學習,一定可以迅速上手并制作出酷炫的視覺效果。

設計導航:國內人氣最高的設計網址導航,設計師必備:http://hao.uisdc.com

優設大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.bwxlya.live/ui-typesetting-6-routines

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

扁平化設計 設計師干貨 版式設計 交互設計師 界面設計 排版布局 職場 優設專訪 優設大課堂 配色 視覺設計 web前端開發 素材下載 設計流程 AI教程 設計理論 神器下載 字體下載 設計師專訪 psd下載 平面設計 設計趨勢 用戶體驗設計 設計規范 海報設計 動效設計 圖標設計 logo設計 產品設計 ICON 神器推薦 App設計 職場規劃 字體設計 酷站推薦 交互設計 ui設計 設計師職場 優秀網頁設計 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

今日内蒙古快三开奖号