商務(wù)單張?jiān)O(shè)計(jì)案例詳解（二） 天意有福科技股份有限公司 / 2012-10-23
其實(shí)在上圖就是我們所說的一個(gè)“模板”，它可以使你在設(shè)計(jì)時(shí)知道什么東西放在什么位置上，你在設(shè)計(jì)時(shí)的要做的其實(shí)只是需要簡單地將各個(gè)元素放在各自的位置上就行了。
.jpg)
.jpg)
.jpg)
這個(gè)模板從上圖可以看出，它是由五列組成（采用奇數(shù)是為了打破平衡，可以使頁面產(chǎn)生動(dòng)感），當(dāng)然，這些線段只是參考線，在最后的設(shè)計(jì)中并不會(huì)出現(xiàn)。我們將頁里分成三個(gè)區(qū)域，包括標(biāo)題區(qū)域、圖片區(qū)域及文字區(qū)域。
.jpg)
在設(shè)計(jì)時(shí)，我們從最上面開始。在標(biāo)題區(qū)域中我們要用上某種顏色（如上圖是填充了黑色），而標(biāo)題文字則采用反差較大白色。注意這個(gè)黑色的區(qū)域?yàn)檎麄€(gè)頁面定下了一個(gè)基調(diào)。接著我們放上圖片，占滿整個(gè)圖片區(qū)域。
.jpg)
接著加上文字。我們將各種相關(guān)的文字（各種信息及要點(diǎn)）放在三個(gè)列的范圍中，并要注意文字間的對(duì)比，在上圖中是由較大的細(xì)襯線（ serif ）字體及一種較小的非襯線（ san-serif ）粗體組成形成了對(duì)比。這樣可以使觀看的人知道這是兩部分不同的文字信息。與標(biāo)題一樣，這里的文字區(qū)域同樣是由那些列來決定的。最后就是加上聯(lián)系信息。地圖放在右邊，占了兩列，而右下角放上了小圖片。
請注意在這個(gè)版面中，我們是如何利用不對(duì)稱的設(shè)計(jì)來使整個(gè)頁邊變得更加生動(dòng)。如果在文字區(qū)域里，我們兩邊的寬度一樣大，那版面就會(huì)顯得過于平靜。
我們還可以對(duì)上面這個(gè)設(shè)計(jì)來點(diǎn)變化：例如我們可以調(diào)整各個(gè)區(qū)域的尺寸使到標(biāo)題能夠放進(jìn)更多的文字或者在圖片區(qū)域里加進(jìn)更多的圖片。但無論如何，不要打破原來的區(qū)域基本布局。而且要注意各種長方形的顏色區(qū)域使到整個(gè)版面的各個(gè)元素聯(lián)系了起來。
在圖片區(qū)域里加多幾張照片（上圖是由三張圖片組成），但圖片所占據(jù)的位置仍然要遵守原來的五列布局。而且象上圖一樣，大圖占三列，小圖占兩列，避免頁面顯得過于呆板。如果你有需要，甚至放進(jìn)四張圖片也可以（見下圖）。在這種設(shè)計(jì)中，使其中一張照片比其它的照片都要大可以獲得最好的視覺效果。
