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