网络配资炒股-杠杆交易是什么意思-【东方资本】,今日股市热点新闻最新消息,正规的杠杆平台百度搜加杠网,佰倍资本控股

19937166636
您的位置: 首頁 動態 頁面設計中的四個排版原則

頁面設計中的四個排版原則

2019-03-16

  設計頁面最基本的就是排版布局了,如果你覺得自己設計的頁面總是哪里不對勁,為什么別人的頁面看起來那么舒服,也許這篇文章能解答你部分的疑惑。
  
  UI設計中,除了我們強調的配色方案,字體,UI元素之外,還有一點是很重要的,那就是設計布局的四大原則:對齊,對比,親密性,重復。
  
  下面以APP-MONO為例進行說明,這四個排版原則在頁面設計中的應用。
  
  一、對齊對齊(Alignment):任何東西都不能在頁面上隨意安放。每個元素都應當與頁面上的另一個元素有某種視覺聯系。這樣能建立一種清晰、精巧而且清爽的外觀。


  


  如圖一所示,這個頁面是一個推薦關注的列表頁,處處能體現設計者的對齊方式。最左邊的與屏幕邊緣的對齊,列表的推薦名字的對齊,右邊的“關注”按鈕的對齊等等。這個頁面看上去所有的元素都統一,有聯系而且彼此相關,各個單獨的元素之間存在著某種視覺紐帶,雖然沒有間隔線,但是通過統一對齊的方式,使頁面看起來更容易且美觀。
  
  二、對比對比(Contrast):對比的基本思想是,要避免頁面上的元素太過相似。如果元素(字體、顏色、大小、線寬、形狀、空間等)不相同,那就干脆讓它們截然不同。要讓頁面引人注目,對比通常食最重要的一個因素,正是它能使讀者首先看這個頁面。
  
  如上面圖二,這個頁面是內容推薦列表頁,從文字的對比分析來看,文章的標題與簡介的對比,點贊數評論數和文章標題的對比,一目了然,使頁面更易讀。
  
  三、親密性親密性(Proximity):彼此相關的項應當靠近,歸組在一起。如果多個項相互之間存在很近的親密性,它們就會成為一個視覺單元,而不是多個孤立的元素。這有助于組織信息,減少混亂,為讀者提供清晰的結構。
  
  例如,下面圖三這個頁面紅色框框出部分屬于兩個內容塊,中間有一個間隙,這就是屬于親密性的運用,使得同一塊內容在一個區域內。


  
  四、重復重復(Repetition):讓設計中的視覺要素在整個作品中重復出現。可以重復顏色、形狀、材質、空間關系、線寬、字體、大小和圖片,等等。這樣一來,既能增加條理性,還可以加強統一性。
  
  如上面圖四,這個頁面是內容列表頁,多個內容塊是屬于同一種設計形式:作者+圖片+標題+簡介+操作,每個內容的設計形式都是一種重復,有了重復,讀者可以更簡易的閱讀,不用學習成本就知道是如何的展現形式。很難想象一個列表頁有多種設計形式(上面作者中間圖片下面標題or上面圖片中間標題下面作者or采用左中右的形式),這樣不僅不美觀,也會給用戶造成學習成本,設計者和開發者也得花更多的時間在頁面上。
  
  總結:頁面更多會采用上面四種排版混合的設計形式,仔細觀察上面每一個頁面就不難發現四種設計原則都有用到。

相關資訊
LinkedIn廣告:B2B出海品牌構建全球影響力的實戰指南

簡介:LinkedIn廣告:B2B出海品牌構建全球影響力的實戰指南 “找對客戶”比“吸引點擊”更重要——在碎片化內容環境中,LinkedIn提供了連接真實決策者的沉穩路徑。

查看詳情 >
你的網站為啥沒流量?可能是Google沒收錄!——悉知科技SEO優化指南

簡介:悉知科技作為專業的SEO服務提供商,幫助企業解決網站收錄難題,提升搜索引擎可見性。今天,我將深入解析如何檢查Google是否已收錄你的網站,并分享一系列經過驗證的技巧,幫助你加速這一過程。讓我們一起來看看吧~

查看詳情 >
中國汽車品牌在俄羅斯市場報告

簡介:當前俄羅斯汽車市場正發生巨大轉變:俄羅斯消費者開始逐漸接受中國汽車品牌。盡管消費者的態度產生了急劇的轉變,中國汽車品牌的銷售量也高歌猛進,但俄羅斯消費者還是不熟悉部分中國品牌。這個市場充滿了機遇,也充滿了挑戰。

查看詳情 >
我們已為1268位客戶提供網站建設方案
19937166636
電話咨詢
19937166636
在線客服
微信咨詢
微信加好友,獲取海外營銷方案
返回頂部