WEB設(shè)計(jì)中的排版(值得借鑒學(xué)習(xí))

2014-10-30    藍(lán)藍(lán)設(shè)計(jì)的小編

Metro是基于瑞士平面設(shè)計(jì)的設(shè)計(jì)原則(清晰,真實(shí),美觀),來(lái)源于交通指示牌。生活中人們行色匆匆,更需要提供快速,簡(jiǎn)潔,直接,明確的設(shè)計(jì)?,F(xiàn)在的互聯(lián)網(wǎng)又何嘗不是如此,快捷獲取信息的同時(shí),信息泛濫、龐雜無(wú)序,簡(jiǎn)潔之風(fēng)深入人心——減少元素,以顯現(xiàn)本質(zhì)。良好的排版有助于Web設(shè)計(jì)更加簡(jiǎn)潔有效。

概念:

排版就是將有限的視覺(jué)元素進(jìn)行有機(jī)的排列組合,讓邏輯清晰、閱讀順暢、交互便捷,產(chǎn)生良好的體驗(yàn)。

Rams的10條關(guān)于優(yōu)秀設(shè)計(jì)的原則(創(chuàng)新、實(shí)用、美感、簡(jiǎn)單易懂、謙虛、誠(chéng)實(shí)、時(shí)間考驗(yàn)、細(xì)節(jié)、重視環(huán)境、簡(jiǎn)潔)

排版早已廣泛應(yīng)用于平面媒體中的報(bào)紙、書(shū)刊雜志,同樣也適用于Web設(shè)計(jì),但Web的特性使之又有所不同:

交互性(可操作、即時(shí)響應(yīng)、狀態(tài)變化,要求不但美觀更要易用)

呈現(xiàn)媒介(PC、手機(jī)、平板、電視、投影等,需要考慮呈現(xiàn)尺寸及色彩)

技術(shù)性(HTML和CSS的不斷升級(jí),對(duì)Web排版的支持更加優(yōu)秀和)

多媒體(文字、圖片、視頻)

致使Web設(shè)計(jì)中的排版更復(fù)雜,更困難,更有挑戰(zhàn)性;

原則:

萬(wàn)變不離其宗,排版依然要遵循平面構(gòu)成的基本原則——

重復(fù)與交錯(cuò)、節(jié)奏與韻律、對(duì)稱與均衡、對(duì)比與調(diào)和、比例與適度、變異與秩序、虛實(shí)與留白、變化與統(tǒng)一

同時(shí)還要強(qiáng)調(diào):

功能與形式(深入理解功能和內(nèi)容,使之形式更好的體現(xiàn)主題思想)

兼容與響應(yīng)(跨平臺(tái),不同的分辨率、不同的設(shè)備環(huán)境下的呈現(xiàn)效果)

類(lèi)型

1. 文字

通過(guò)對(duì)字號(hào)、字體、字色、粗細(xì)、間距、行距等屬性來(lái)體現(xiàn)出內(nèi)容的層次結(jié)構(gòu)。

2. 顏色

運(yùn)用顏色的形體、位置、面積,及色相、明度、純度等屬性并結(jié)合內(nèi)容與環(huán)境來(lái)組織色彩。

3. 圖片

Pinterest引領(lǐng)瀑布流排版的流行風(fēng)潮

4. 表單

精心的表單排版,能讓用戶感到心情舒暢,愉快地注冊(cè)、付款和進(jìn)行內(nèi)容創(chuàng)建和管理。

5. 界面

和平面排版最大的區(qū)別在于,Web界面可操作的功能性,需要強(qiáng)調(diào)設(shè)計(jì)的可用性,排版上也要兼顧用戶的瀏覽、操作習(xí)慣。

6. 導(dǎo)航/圖表

通過(guò)對(duì)信息數(shù)據(jù)的歸納整理,有效分類(lèi)、排布,將復(fù)雜信息、清晰地傳遞給用戶——清晰、直觀。

總結(jié):

Web設(shè)計(jì)中排版很重要。好的排版設(shè)計(jì),不但要美觀,更多的是要將信息內(nèi)容有效的組織、排布,使其規(guī)范有序、清晰明確,便于用戶、準(zhǔn)確獲取相關(guān)信息,讓W(xué)eb設(shè)計(jì)更友好、易用、真實(shí)可信。

這需要設(shè)計(jì)師深入理解所設(shè)計(jì)的信息內(nèi)容,提高信息內(nèi)容的組織、加工能力,將內(nèi)容本身作為設(shè)計(jì)元素,依照設(shè)計(jì)原理有效排布。良好的排版有助于Web設(shè)計(jì)更加簡(jiǎn)潔有效。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔