建站常識(shí)
網(wǎng)頁設(shè)計(jì)中“點(diǎn)”的視覺構(gòu)成
2005-12-28 13:58:00
點(diǎn)、線、面是構(gòu)成視覺空間的基本元素,是表現(xiàn)視覺形象的基本設(shè)計(jì)語言。網(wǎng)頁設(shè)計(jì)實(shí)際上就是如何經(jīng)營(yíng)好三者的關(guān)系,因?yàn)椴还苁侨魏我曈X形象或者版式構(gòu)成,歸結(jié)到底,都可以歸納為點(diǎn)、線和面。
一個(gè)按鈕,一個(gè)文字是一個(gè)點(diǎn)。
幾個(gè)按鈕或者幾個(gè)文字的排列形成線。
線的移動(dòng)或者數(shù)行文字或者一塊空白可以理解為面。
點(diǎn)、線、面相互依存,相互作用;可以組合成各種各樣的視覺形象,千變?nèi)f化的視覺空間。
在網(wǎng)頁中,一個(gè)單獨(dú)而細(xì)小的形象可以稱之為點(diǎn)。點(diǎn)是相比較而言的,比如一個(gè)漢字是由很多筆劃組成的,但是在整個(gè)頁面中,他可以稱為一個(gè)點(diǎn)。點(diǎn)也可以是一個(gè)網(wǎng)頁中相對(duì)微小單純的視覺形象,如一個(gè)按鈕(BUTTON),一個(gè)LOGO等等。
需要說明的是,并不是只有圓的形才叫一個(gè)點(diǎn),方形,三角,自由形都可以作為視覺上的點(diǎn),點(diǎn)是相對(duì)線和面而存在的視覺元素。
點(diǎn)是構(gòu)成網(wǎng)頁的最基本單位,在網(wǎng)頁設(shè)計(jì)中,經(jīng)常需要我們主觀的加些點(diǎn),如在新聞的標(biāo)題后加個(gè)NEW,在每小行文字的前面加個(gè)方或者圓的點(diǎn)。
點(diǎn)在頁面中起到活潑生動(dòng)的作用,使用得當(dāng),甚至可以是畫龍點(diǎn)睛的。
一個(gè)網(wǎng)頁往往需要有數(shù)量不等,形狀各異的點(diǎn)來構(gòu)成。點(diǎn)的形狀、方向、大小、位置、聚集,發(fā)散,能夠給人帶來不同的心理感受。
下面我們就具體的頁面,談?wù)匋c(diǎn)的運(yùn)用和表現(xiàn)。
例一:
在這個(gè)頁面中,只有唯一的一個(gè)點(diǎn),四周是大量的空白,于是它馬上成為吸引視線,引發(fā)興趣的視覺中心。而這個(gè)視覺中心就應(yīng)該是你想表達(dá)的主題,效果是最直接明確的。
在你實(shí)際瀏覽這個(gè)頁面的時(shí)候,這個(gè)處于三維空間點(diǎn)(花生)旁邊環(huán)繞著一段電腦聯(lián)線。三維技術(shù)的運(yùn)用,更突出了這個(gè)視覺中心,讓你迫不及待的點(diǎn)擊進(jìn)入下一級(jí)頁面。
這是同一網(wǎng)站二級(jí)頁面中的一個(gè),我們可以將每一組形看做是一個(gè)點(diǎn),如NEWS可以稱做點(diǎn),右下角還有四個(gè)點(diǎn)。所有的點(diǎn)互相呼應(yīng),組成不穩(wěn)定的三角構(gòu)圖。在這個(gè)頁面中,重復(fù)出現(xiàn)了用三維動(dòng)態(tài)技術(shù)表現(xiàn),最吸引視線的首頁的點(diǎn)(花生)。
同一視覺形象(點(diǎn))的不斷重復(fù)出現(xiàn),能夠增加瀏覽者的印象。
例二:
在這個(gè)頁面的下部,點(diǎn)的水平排列,形成平穩(wěn),安詳?shù)木€的感覺。
三種形狀相似的點(diǎn)隨著點(diǎn)擊產(chǎn)生的顏色變化,同時(shí)在頁面中心位置出現(xiàn)不同的產(chǎn)品圖片,給大家一種跳躍,動(dòng)蕩,歡快的感受。
在頁面中四處飄蕩的點(diǎn)(TOP10的圖標(biāo))和由左至右移動(dòng)的文字(也是由點(diǎn)組成),加強(qiáng)了頁面的活躍氣氛。
在同一個(gè)空間里面體現(xiàn)了兩種不同情緒的動(dòng)態(tài)的對(duì)比,這也是網(wǎng)頁相對(duì)傳統(tǒng)平面媒體的極大優(yōu)勢(shì)。
做為呼應(yīng),設(shè)計(jì)師特意在頁面的中上部,采用了很多較小的點(diǎn)做底紋,起到了豐富頁面層次的作用。
頁面上下兩段橫向的色條,強(qiáng)調(diào)了水平線的穩(wěn)定情緒,將頁面統(tǒng)一起來。
在這個(gè)二級(jí)頁面中,右邊垂直排列的圓點(diǎn)(由1到10),起到了引導(dǎo)視線和強(qiáng)調(diào)次序的作用。
點(diǎn)的等距垂直排列,在視覺上形成虛擬的豎線。加上段落文字的共同邊距,在視覺上形成豎線,起到分割頁面的作用。
例三:
在這個(gè)頁面中,點(diǎn)的大小,位置,顏色,聚散的不同變化和組合,產(chǎn)生了輕松,活潑,流動(dòng),抒情,愉快的氣氛。
通過優(yōu)美的弧線的引導(dǎo),人們的視線最終將集中在"wasabi:sneaker"這幾個(gè)由點(diǎn)組成的文字上。自然,這也是設(shè)計(jì)師所要突出訴求的主題之一。
在二級(jí)頁面中,設(shè)計(jì)師采用了流行的FLASH技術(shù),紅點(diǎn)在頁面上歡快的運(yùn)動(dòng),同時(shí)進(jìn)行顏色的漸變;綠色的點(diǎn)加上點(diǎn)綴其中的深色小點(diǎn),豐富了色彩和層次。整個(gè)網(wǎng)頁的流動(dòng)著歡快和輕松。
在頁面下部,設(shè)計(jì)師并列運(yùn)用高低顏色不同的點(diǎn),若隱若現(xiàn),突出了頁面以點(diǎn)造型的設(shè)計(jì)語言。
注意在兩個(gè)頁面中都出現(xiàn)了三個(gè)斜向排列的帶有漸變色的點(diǎn)。它為頁面增加了動(dòng)勢(shì)和前后的空間層次,實(shí)屬不容忽視的精彩之處!
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺(tái)管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢(shì)?
延伸閱讀
- [2007-12-17 13:36:00] “永久鏈接”的可用性問題
- [2016-08-10 11:14:00] 網(wǎng)頁設(shè)計(jì)之色彩搭配法則
- [2009-09-07 08:13:00] “高效”是首要的設(shè)計(jì)要求
- [2009-06-09 22:34:00] 圖片投射方法在會(huì)員官網(wǎng)視覺風(fēng)格調(diào)研中的運(yùn)用
- [2010-10-31 09:56:00] 網(wǎng)頁中的廣告牌設(shè)計(jì) :如何贏得用戶的注意力
- [2012-10-12 11:44:41] 根據(jù)用戶習(xí)慣的人性化網(wǎng)頁設(shè)計(jì)
- [2006-03-31 21:11:00] 網(wǎng)站設(shè)計(jì)中的導(dǎo)航理論與實(shí)踐
- [2007-12-13 17:16:00] 從用戶分類中體會(huì)善待用戶的設(shè)計(jì)原則
- [2006-08-31 22:24:00] 網(wǎng)頁設(shè)計(jì)中該如何決定是否使用框架?
- [2007-07-02 09:52:00] 網(wǎng)頁設(shè)計(jì)配色應(yīng)用實(shí)例剖析——黑色系
- [2016-12-19 15:51:00] 政府網(wǎng)站建設(shè)要按照“一級(jí)政府一個(gè)門戶網(wǎng)站”的原則,實(shí)施政府門戶網(wǎng)站群的策略部署
- [2007-11-23 10:51:00] 對(duì)于頁面中圖像格式的個(gè)人觀點(diǎn)
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
php程序 H5 青島海洋投資集團(tuán) 互聯(lián)網(wǎng) 插畫 網(wǎng)站品牌 扁平化設(shè)計(jì) html和css 審美 青島網(wǎng)站營(yíng)銷 集團(tuán)性網(wǎng)站 網(wǎng)站優(yōu)化 青島不錯(cuò)的英文網(wǎng)站建設(shè)公司 網(wǎng)站開發(fā) 建站常識(shí) 網(wǎng)站動(dòng)畫 圖形網(wǎng)格 青島開發(fā)區(qū)建站公司 視覺靈感 如何做網(wǎng)站優(yōu)化 網(wǎng)站視覺 網(wǎng)站策劃 官網(wǎng)網(wǎng)站建設(shè) 高端輪胎網(wǎng)站設(shè)計(jì) 青島輪胎網(wǎng)站設(shè)計(jì)公司 網(wǎng)站改版 網(wǎng)頁設(shè)計(jì) 膠南網(wǎng)站建設(shè)公司 企業(yè)網(wǎng)站為什么要備案 色彩心理學(xué)