设计之家 > 文章 >

日期如何排版?我總結了10套排版案例

作者:設計小餘 來源:設計小餘 時間:2020-08-14

寫在前麵

版式設計在我們的設計中是非常重要的技能,無論是UI設計還是平麵設計,都會運用到版式設計相關的知識,在版式設計中最常見的就是圖文排版、文文排版。一張圖片一段文案在不同的需求情況下我們都可以排版出很多種樣式,每一種樣式展現出來給人的感覺也是不一樣的,美的排版總是會使人眼前一亮,也會使整體的設計更耐看。

排版也是會根據重要程度劃分層級,我們都知道主題文案都需要醒目,讓人一眼就能看到,這樣才能達到宣傳的作用,當然僅僅隻是展示主題文案也是遠遠不夠的,達到主題排版,主圖排版,小到副標題排版,我們都需要精心的排版,還可以更精細到小到輔助文案以及圖形的排版,而今天我們就來看一下日期這樣的文案我們可以怎麼排版呢?

日期在一些重要的活動中也是比較重要的信息,比如展會時間,我們需要突出時間,不能用極小的文字排版在角落,用戶不注意的地方,這樣會給人一種焦慮的情緒,既然是展會活動,那麼用戶關心的是展會的主題是什麼?活動時間是什麼時候?活動地址在什麼地方?所以這些重要的信息就需要重要突出。而在一些做紀念性的日期我們就可以小化(例如我自己記錄自己的學習打卡練習)

 

案例分享

我們常見的日期有年、月、日、時、分、秒,接下來我們就通過對日期的展現做一些不同的排版方式,通過與日期的普通排版方式做對比,我們就可以看出微小的日期排版對整體的設計展現也是有很大影響的。

簡單的日期排版我們通常就隻是將年月日對齊排版就算完成了,但是這樣的排版方式會影響整體畫麵的美觀,我們對於小文案也需要花一定心思去整理以及排版出更精細的樣式,這樣給用戶的感覺就會覺得你的每一步設計都是用心設計的,並且為了整體的美觀,我們 也不得不從細微之處出發。

 

日期排版01

例如下麵對於日期的排版,TIME這個文案有時候我們也可以去掉,因為用戶看到時間就會明白這是什麼,在一定的情況下也是可以去掉的,當然有時候為了整體頁麵的展示效果,我們也可以加上,便於排版,左邊隻是將年、月、日並排,時間節點作為一個點排列,下麵的文案我們可以根據實際情況選擇一些特殊的提示文案做裝飾

而通過對左邊簡單的日期排版進行改版後,我們會發現右邊的日期排版會顯得更美觀,排版更精妙,也有更多的細節之處,例如2020後緊接著年(YEAR)的提示,08後麵標識是周六(SAT.),年月日和時間節點也同時做了層次區分,這樣更有利於閱讀。

 

日期排版02

對於上麵同樣的日期文案,我們還可以排出右邊不同的樣式,整體采用橫排的方式,將年、月、日同排,時間段縮小處理,使時間之間也能有層次感

 

日期排版03

下麵的日期是年、日期段、時間段的組合,左邊的排版顯然是比較常規的分層排版,卻主要突出了2020,而一般時間我們在這一年將要發生的事,我們更關心的是哪一天那個時間點,而右邊的排版主要突出時間段/點,更能讓用戶看到自己關心的事件。

 

日期排版04

下麵這一組日期是有不同年份的,所以我們在排版的時候可以突出顯示年份,這樣在排版的時候就可以注意層級關係,排除層次感

 

日期排版05

這一組日期是比較簡單的,隻有一個時間點,沒有時間段,如果直接按照左邊這樣的日期排版方式,顯然整體看著就很單薄,把這樣的日期排版方式融入到版式整體畫麵中,也一定會顯得毫無設計感,而我們隻需要將簡單的日期經過簡單的排版,從年、月、日、時,從上至下依次排列,這樣就可以顯得信息有層次感,並且閱讀也不會有困惑,加上精致的icon做裝飾,這樣的日期排版就顯得更耐看。

 

日期排版06

這一組日期也很簡單,隻有月、日、時,都是屬於時間段的信息,通過分析這個時間,月都是10月,是相同的,所以我們可以將月份單獨拿出來,作為共用信息,這樣就可以精簡畫麵重複的信息,依然采用月、日、時這樣從上至下的順序排列,時間小化,但是利用色塊突出,也不會柔化時間點的閱讀,再通過一條線的連接,將斜線和時間icon相連,形成一個有趣味性的時間裝飾,這樣的排版更容易吸引用戶的眼球

 

日期排版07

下麵的日期也是年、日期段、時間段的組合,和第三個日期排版的案例類似,所以存在同樣的問題,左邊的排版顯然是比較常規的分層排版,卻主要突出了2020,右邊改版後,我們同樣弱化年份(2020),提取相同的月份(8月),突出顯示日期

 

日期排版08

這一個和第五個也是一樣的,左邊都是年、月、日、時的時間點,沒有時間段,第五個我們是采用豎排的方式,而這裏我們改版後采用的是橫排的方式,突出顯示月、日,讓整體的層次更加清晰

 

日期排版09

下麵這一組時間改版,我們主要采用錯位豎排的方式,像這樣的排版方式,我們可以多用於一些比較有設計感或者比較唯美的畫麵中,顯得每一個小的點,都有用心設計,並且也符合這樣的氣質

 

日期排版10

這一組日期隻有年、月、日。左右兩邊的排版看起來很相似,但是通過對細節的調整,例如2020的弱化,間距的把控,星期幾的友好提示,這樣就會使整個日期排版看起來更精細、耐看。

案例實操

我們通過對上麵日期的排版分析和總結,會發現小小的日期排版也是很關鍵也很追重要的,所以下麵我們將通過一張海報案例,來真正體現日期排版對整體畫麵的重要性。

海報主題是選擇的立秋,雖然立秋以及過去兩天了,但是我又學會了這個立秋新的排版技巧,所以我想將這一技巧分享出來,但是這裏就不詳細講解海報的設計過程了,主要還是分享日期排版對整體畫麵的影響作用

這裏就簡單的說一下海報設計的思路,海報主題是立秋,所以我現在一片黃色的楓葉作為畫麵的主視覺,畫麵整體體現秋天的感覺,一片黃燦燦的畫麵,給人感覺就像是秋天到了,畫麵元素簡約,隻選擇了一片楓葉加上它的投影,體現空間感,主題文案排版在楓葉上,與楓葉融為一體,這樣用戶得分第一視覺就會被主圖吸引,同時看到主題相關文案,下麵的其它文案通過從|秋|字垂落的豎線,分別右對齊以及左對齊,顯得畫麵規整

第一張海報的日期排版就是采用普通常規的排版方式,我們會發現這樣的日期排版方式,在整個畫麵中會顯得有點僵硬,並且左右兩邊不對稱的關係,會顯得右邊偏輕,使畫麵的平衡感缺失,也正是日期的排版太粗糙的原因,導致整張海報的精細度大減。

樣機效果

我們保持其它元素以及排版都一致,隻改變日期的排版方式,我們就會發現右邊的海報整體給人的感覺更精美,平衡感更強烈,所以我們在做設計的時候不要忽略每一個點。將每一個點都細心的設計,這樣的作品才會更耐看。

總結

版式設計是我們設計中最基本的知識,我們在做設計的時候,通常會注意主題主圖的排版,而經常會忽略哪些不是很重要的信息,但是我們在分析文案信息的時候,也需要考慮整體設計的目的,有時候日期信息也是非常重要的信息,所以我們在做排版的時候,也需要認真考慮日期與整體需求的關係,並且日期排版風格也會影響整體的氣質。

 

作者:設計小餘

相關文章:

推薦設計

最新文章