2020-8-14 資深UI設(shè)計者
版式設(shè)計在我們的設(shè)計中是非常重要的技能，無論是UI設(shè)計還是平面設(shè)計，都會運用到版式設(shè)計相關(guān)的知識，在版式設(shè)計中最常見的就是圖文排版、文文排版。一張圖片一段文案在不同的需求情況下我們都可以排版出很多種樣式，每一種樣式展現(xiàn)出來給人的感覺也是不一樣的，美的排版總是會使人眼前一亮，也會使整體的設(shè)計更耐看。
排版也是會根據(jù)重要程度劃分層級，我們都知道主題文案都需要醒目，讓人一眼就能看到，這樣才能達(dá)到宣傳的作用，當(dāng)然僅僅只是展示主題文案也是遠(yuǎn)遠(yuǎn)不夠的，達(dá)到主題排版，主圖排版，小到副標(biāo)題排版，我們都需要精心的排版，還可以更精細(xì)到小到輔助文案以及圖形的排版，而今天我們就來看一下日期這樣的文案我們可以怎么排版呢？
日期在一些重要的活動中也是比較重要的信息，比如展會時間，我們需要突出時間，不能用極小的文字排版在角落，用戶不注意的地方，這樣會給人一種焦慮的情緒，既然是展會活動，那么用戶關(guān)心的是展會的主題是什么？活動時間是什么時候？活動地址在什么地方？所以這些重要的信息就需要重要突出。而在一些做紀(jì)念性的日期我們就可以小化（例如我自己記錄自己的學(xué)習(xí)打卡練習(xí)）
我們常見的日期有年、月、日、時、分、秒，接下來我們就通過對日期的展現(xiàn)做一些不同的排版方式，通過與日期的普通排版方式做對比，我們就可以看出微小的日期排版對整體的設(shè)計展現(xiàn)也是有很大影響的。
簡單的日期排版我們通常就只是將年月日對齊排版就算完成了，但是這樣的排版方式會影響整體畫面的美觀，我們對于小文案也需要花一定心思去整理以及排版出更精細(xì)的樣式，這樣給用戶的感覺就會覺得你的每一步設(shè)計都是用心設(shè)計的，并且為了整體的美觀，我們 也不得不從細(xì)微之處出發(fā)。
日期排版01
例如下面對于日期的排版，TIME這個文案有時候我們也可以去掉，因為用戶看到時間就會明白這是什么，在一定的情況下也是可以去掉的，當(dāng)然有時候為了整體頁面的展示效果，我們也可以加上，便于排版，左邊只是將年、月、日并排，時間節(jié)點作為一個點排列，下面的文案我們可以根據(jù)實際情況選擇一些特殊的提示文案做裝飾
而通過對左邊簡單的日期排版進(jìn)行改版后，我們會發(fā)現(xiàn)右邊的日期排版會顯得更美觀，排版更精妙，也有更多的細(xì)節(jié)之處，例如2020后緊接著年（YEAR)的提示，08后面標(biāo)識是周六(SAT.），年月日和時間節(jié)點也同時做了層次區(qū)分，這樣更有利于閱讀。
日期排版02
對于上面同樣的日期文案，我們還可以排出右邊不同的樣式，整體采用橫排的方式，將年、月、日同排，時間段縮小處理，使時間之間也能有層次感
日期排版03
下面的日期是年、日期段、時間段的組合，左邊的排版顯然是比較常規(guī)的分層排版，卻主要突出了2020，而一般時間我們在這一年將要發(fā)生的事，我們更關(guān)心的是哪一天那個時間點，而右邊的排版主要突出時間段/點，更能讓用戶看到自己關(guān)心的事件。
日期排版04
下面這一組日期是有不同年份的，所以我們在排版的時候可以突出顯示年份，這樣在排版的時候就可以注意層級關(guān)系，排除層次感
日期排版05
這一組日期是比較簡單的，只有一個時間點，沒有時間段，如果直接按照左邊這樣的日期排版方式，顯然整體看著就很單薄，把這樣的日期排版方式融入到版式整體畫面中，也一定會顯得毫無設(shè)計感，而我們只需要將簡單的日期經(jīng)過簡單的排版，從年、月、日、時，從上至下依次排列，這樣就可以顯得信息有層次感，并且閱讀也不會有困惑，加上精致的icon做裝飾，這樣的日期排版就顯得更耐看。
日期排版06
這一組日期也很簡單，只有月、日、時，都是屬于時間段的信息，通過分析這個時間，月都是10月，是相同的，所以我們可以將月份單獨拿出來，作為共用信息，這樣就可以精簡畫面重復(fù)的信息，依然采用月、日、時這樣從上至下的順序排列，時間小化，但是利用色塊突出，也不會柔化時間點的閱讀，再通過一條線的連接，將斜線和時間icon相連，形成一個有趣味性的時間裝飾，這樣的排版更容易吸引用戶的眼球
日期排版07
下面的日期也是年、日期段、時間段的組合，和第三個日期排版的案例類似，所以存在同樣的問題，左邊的排版顯然是比較常規(guī)的分層排版，卻主要突出了2020，右邊改版后，我們同樣弱化年份（2020），提取相同的月份（8月），突出顯示日期
日期排版08
這一個和第五個也是一樣的，左邊都是年、月、日、時的時間點，沒有時間段，第五個我們是采用豎排的方式，而這里我們改版后采用的是橫排的方式，突出顯示月、日，讓整體的層次更加清晰
日期排版09
下面這一組時間改版，我們主要采用錯位豎排的方式，像這樣的排版方式，我們可以多用于一些比較有設(shè)計感或者比較唯美的畫面中，顯得每一個小的點，都有用心設(shè)計，并且也符合這樣的氣質(zhì)
日期排版10
這一組日期只有年、月、日。左右兩邊的排版看起來很相似，但是通過對細(xì)節(jié)的調(diào)整，例如2020的弱化，間距的把控，星期幾的友好提示，這樣就會使整個日期排版看起來更精細(xì)、耐看。
我們通過對上面日期的排版分析和總結(jié)，會發(fā)現(xiàn)小小的日期排版也是很關(guān)鍵也很追重要的，所以下面我們將通過一張海報案例，來真正體現(xiàn)日期排版對整體畫面的重要性。
海報主題是選擇的立秋，雖然立秋以及過去兩天了，但是我又學(xué)會了這個立秋新的排版技巧，所以我想將這一技巧分享出來，但是這里就不詳細(xì)講解海報的設(shè)計過程了，主要還是分享日期排版對整體畫面的影響作用
這里就簡單的說一下海報設(shè)計的思路，海報主題是立秋，所以我現(xiàn)在一片黃色的楓葉作為畫面的主視覺，畫面整體體現(xiàn)秋天的感覺，一片黃燦燦的畫面，給人感覺就像是秋天到了，畫面元素簡約，只選擇了一片楓葉加上它的投影，體現(xiàn)空間感，主題文案排版在楓葉上，與楓葉融為一體，這樣用戶得分第一視覺就會被主圖吸引，同時看到主題相關(guān)文案，下面的其它文案通過從|秋|字垂落的豎線，分別右對齊以及左對齊，顯得畫面規(guī)整
第一張海報的日期排版就是采用普通常規(guī)的排版方式，我們會發(fā)現(xiàn)這樣的日期排版方式，在整個畫面中會顯得有點僵硬，并且左右兩邊不對稱的關(guān)系，會顯得右邊偏輕，使畫面的平衡感缺失，也正是日期的排版太粗糙的原因，導(dǎo)致整張海報的精細(xì)度大減。
樣機(jī)效果
我們保持其它元素以及排版都一致，只改變?nèi)掌诘呐虐娣绞剑覀兙蜁l(fā)現(xiàn)右邊的海報整體給人的感覺更精美，平衡感更強烈，所以我們在做設(shè)計的時候不要忽略每一個點。將每一個點都細(xì)心的設(shè)計，這樣的作品才會更耐看。
版式設(shè)計是我們設(shè)計中最基本的知識，我們在做設(shè)計的時候，通常會注意主題主圖的排版，而經(jīng)常會忽略哪些不是很重要的信息，但是我們在分析文案信息的時候，也需要考慮整體設(shè)計的目的，有時候日期信息也是非常重要的信息，所以我們在做排版的時候，也需要認(rèn)真考慮日期與整體需求的關(guān)系，并且日期排版風(fēng)格也會影響整體的氣質(zhì)。
文章來源：優(yōu)設(shè) 作者：設(shè)計小余
藍(lán)藍(lán)設(shè)計( www.gyxygd.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.gyxygd.cn