海淘科技觀點(diǎn):網(wǎng)頁設(shè)計(jì)布局要?jiǎng)?chuàng)建的有充滿的呼吸感
好的排版是構(gòu)圖、圖片、色彩、字體的協(xié)調(diào),如共同的結(jié)果,設(shè)計(jì)是沒有規(guī)律可循的,審美永遠(yuǎn)不會(huì)發(fā)生在約束之內(nèi)。要使整個(gè)格式內(nèi)容豐富,充滿了呼吸的空間,我們需要流動(dòng)起來的整個(gè)思維方式。我們?nèi)祟惽饲?,無論怎么長不會(huì)偏離骨頭。因此,保持內(nèi)心強(qiáng)大的永久性,外觀是一出戲,視覺想象力編織相對(duì)自由式。然而,它很容易布局和排版,是填充列表的列表元素,然后一個(gè)一個(gè)放在頁面上。是因?yàn)樽杂纱钆涞姆绞接星ХN不同的方式,我們的心總是為最好的解決方案上線,是最終的結(jié)果又是馬虎不清。
無邊界
一段文字和圖像,甚至是一個(gè)圖標(biāo)…在布局上,你因?yàn)槟愕牟牧鲜遣皇橇⒖淌值角軄?,你總是喜歡用一個(gè)矩形來表示一個(gè)文本或圖像的布局,這沒有錯(cuò),但這種做法會(huì)讓你進(jìn)入一種“框架”的陷阱。像這樣的布局,只是畫一個(gè)粗略的框架,也許你只是想說,這只是一個(gè)框架,設(shè)計(jì)規(guī)劃早期,因?yàn)樵S多材料也不完善。然而,很有可能你就會(huì)因此而將頁面設(shè)計(jì)成這樣。當(dāng)然,你會(huì)說這是不是一件壞事,因?yàn)槲覀兌伎吹綆缀跏强吹降谋馄交W(wǎng)頁都是這個(gè)樣式,但可以肯定的是,這個(gè)頁面是沒有多少喘息的空間,整個(gè)頁面充滿了信息,如果改變?cè)氐拇笮『臀恢貌贾靡稽c(diǎn)點(diǎn),它會(huì)顯示不同的布局效果(下圖),顯然后者的版式更靈活。邊界是由你的思維所造成的,你會(huì)在這個(gè)框架中去思考解決問題的方法,如果你想避免這個(gè)陷阱,就是要學(xué)會(huì)跨框架去思考??蚣?,即使當(dāng)你準(zhǔn)備好了,也要意識(shí)到,這只是一個(gè)初步的不確定的誘惑方向,你可以改變框架的結(jié)構(gòu)。
許多設(shè)計(jì)師對(duì)農(nóng)民工的要求,并覺得這一類是越來越遠(yuǎn)離藝術(shù)家,不同的是,工匠的性質(zhì)只是重復(fù)一個(gè)勞動(dòng),在創(chuàng)造它之前,它已經(jīng)知道目標(biāo)。在如網(wǎng)頁設(shè)計(jì)之前,已經(jīng)知道網(wǎng)站做什么樣的,然后你的工作只是一步一步完成的每一個(gè)元素的對(duì)齊工作。不知道結(jié)果,藝術(shù)家是在進(jìn)步是一個(gè)步驟一個(gè)測(cè)試,以找到更有效的解決方案,藝術(shù)創(chuàng)作是類似的風(fēng)險(xiǎn)。設(shè)計(jì)師們正在考慮的,也是兩個(gè)身份的理想組合,并有。
創(chuàng)建一個(gè)焦點(diǎn)
所以可能是一個(gè)夸張,但任何良好的圖形作品,必須有一個(gè)重點(diǎn)。當(dāng)我們談到,跨明星的視覺結(jié)構(gòu)習(xí)慣的重點(diǎn)放在中心的地方,使一種方式有很多的重點(diǎn),總之,是創(chuàng)造沖突。想象你是在一個(gè)大廳里的人,突然有兩個(gè)男人大聲爭(zhēng)吵,然后引起了幾個(gè)人的圍觀,現(xiàn)場(chǎng)在安靜的人最初創(chuàng)造了一個(gè)焦點(diǎn)。此外,在視覺領(lǐng)域,使用對(duì)比度的沖突應(yīng)該是最有效的方法之一,使焦點(diǎn)。
對(duì)于理解的重點(diǎn),我們也不應(yīng)該是有限的和一個(gè)“點(diǎn)”,它是一塊你的視線是吸引投影面積。它也可以分為實(shí)焦點(diǎn)和虛焦點(diǎn),真正的焦點(diǎn)集中在虛焦點(diǎn)上,更精確的投影。在頁面設(shè)計(jì)中,字母與靜止生活相融合的區(qū)域位于中線,成為一個(gè)虛擬的焦點(diǎn),而使用的色彩對(duì)比度,黃色的眼鏡和出的虛擬焦點(diǎn)區(qū)域突出成為真正的焦點(diǎn)
除了顏色,任何其他屬性都可以通過對(duì)比而形成,你在這一刻做的,是關(guān)注的焦點(diǎn)不應(yīng)該太多。因此,除了重點(diǎn)之外,其他元素在設(shè)計(jì)上保持一種相似性。
在這里,我們總結(jié)的屬性可以用來比較,這些屬性之間的對(duì)比度越大,沖突就越大。
(摘自《平面設(shè)計(jì)原理》一書)
設(shè)計(jì)師在設(shè)計(jì)上,其實(shí)并不是這些規(guī)范會(huì)事先設(shè)置在大腦中,而是經(jīng)過積累的經(jīng)驗(yàn)和形成一種潛在的直覺,這個(gè)列表的含義是不需要你寫下來的,而是經(jīng)過瀏覽,在設(shè)計(jì)的任何場(chǎng)合都要提醒。一個(gè)完成后的作品,例如,可以看看什么重點(diǎn)吸引足夠的,什么元素需要進(jìn)一步調(diào)整。
聚焦的焦點(diǎn)是盡量保持一致的焦點(diǎn)區(qū)域的前提。創(chuàng)建沖突似乎都有情婦,但需要慢慢來,保持一致。例如下面的設(shè)計(jì)也是整個(gè)頁面中間頁面的焦點(diǎn)
可以看到虛擬的重點(diǎn)地區(qū)是以手繪的花朵,在本設(shè)計(jì)中幾何數(shù)字和其他數(shù)字的幾何設(shè)計(jì),真正關(guān)注的是最大的手繪花朵。在這一刻,手繪花卉有機(jī)和相鄰的幾何有一個(gè)對(duì)比,這是幾何形式與有機(jī)形式的對(duì)比。三角形的幾何和數(shù)字的位置是三角形的。再仔細(xì)觀察整個(gè)材料和彩繪和數(shù)字材料是相同的花的幾何圖形,并用手繪繪畫材料的大腦是一個(gè)明顯的區(qū)別,比較彼此之間的彼此,和對(duì)方有一個(gè)統(tǒng)一的。經(jīng)過觀察分析,一個(gè)結(jié)構(gòu)的焦點(diǎn)不是那么簡(jiǎn)單。如果把對(duì)比與統(tǒng)一作為一個(gè)平衡的兩極,那么所有元素之間的關(guān)系都是它們之間的值,消除了最后的平衡。它被認(rèn)為是一種力學(xué)。如果你有一個(gè)更多的元素的圖片,需要加強(qiáng)你的整個(gè)圖片的統(tǒng)一。
本設(shè)計(jì)是由許多小的插圖組成的一個(gè)頁面,一個(gè)不小心在一個(gè)混亂,和設(shè)計(jì)師將這些插圖分為三個(gè)部分內(nèi)容,每一個(gè)內(nèi)容與背景顏色分區(qū),形成三個(gè)矩形,這是統(tǒng)一的形狀。材料和風(fēng)格的說明是統(tǒng)一的,同時(shí),所顯示的對(duì)象的方向也在斜,也形成了一個(gè)統(tǒng)一的。所以,你可以看到圖像對(duì)比的力量是比較弱的,重點(diǎn)是在左邊的矩形,沒有人懷疑,可以看到的重點(diǎn)是一個(gè)男人的襯衫和女襯衫,男人和女人用品的對(duì)比。這不是一個(gè)很強(qiáng)烈的對(duì)比。
保持比例
說到比例,難以避免和數(shù)學(xué)公式。事實(shí)上,一點(diǎn)點(diǎn)更簡(jiǎn)單,我們可以看到比例作為一個(gè)可視化的原子單元,所有的位置,大小的關(guān)系的圖標(biāo)的原子單位。如我確定一個(gè)原子單位是50像素的正方形,然后在矩形的基礎(chǔ)上創(chuàng)建一個(gè)圖形,圖形是由正方形再次設(shè)置的,就像我們玩拼圖游戲一樣。加入50像素的網(wǎng)格線后,你會(huì)明白他們只是符合原子單位的比例。上面顯示的問題,比例是否一至三或五比二,事實(shí)是從衍生的原子單位。在 web 設(shè)計(jì)中,為了保持比例網(wǎng)格可以用作輔助線。在 Photoshop 中可任意設(shè)定大小的網(wǎng)格,網(wǎng)格的大小是最好能文檔是成正比關(guān)系。如您新文檔的寬度是 1600年像素,所以才可以設(shè)置網(wǎng)格,為 80 px 或 160 px,等等。根據(jù)網(wǎng)格的大小、 位置和對(duì)齊方式的較小的網(wǎng)格線,最終的結(jié)果是更靈活的。此外應(yīng)該注意到網(wǎng)格如果太小,但實(shí)際上并沒有發(fā)揮太大作用。比將使您的web 頁設(shè)計(jì),形成一些看不見的穩(wěn)定性、 擬合性能的每個(gè)元素應(yīng)該出現(xiàn)在的位置,如果你選擇對(duì)稱的布局,其對(duì)稱性本身具有穩(wěn)定性,因此,不對(duì)稱的作用在網(wǎng)格布局中更大。
折疊式音樂游戲有趣的設(shè)計(jì)就是要使每個(gè)色塊與網(wǎng)格正常工作的以下性能放置。它在任何時(shí)候的不對(duì)稱布局給的人一種精神的崩潰,需要的是更多比例的支持。
神奇的幾何
頁面的布局幾乎是由幾何組成的,結(jié)合屏幕本身是長方形的,因此,最常用的布局也要矩形。
矩形
給人以穩(wěn)重、踏實(shí)、有序的感覺,因此,給人一種信任。在網(wǎng)頁設(shè)計(jì)中,圖形設(shè)計(jì)不僅可以作為矩形,也可以作為一個(gè)矩形的文本段落。顯示在下面的例子中左字右格式的圖形分別為矩形作為矩形和方形矩形和圓角矩形,兩個(gè)矩形分別傳達(dá)不同的感覺,圓角矩形比較鋒利,它往往更柔和圓潤。除了圖形,和作為一塊矩形,是常用的視覺重點(diǎn)。如下面的例子就在矩形框的左側(cè),用于集中一段
三角形
三角形有一種穩(wěn)定性,因?yàn)榇蟛糠值娜切温?lián)想是一座山或金字塔,結(jié)構(gòu)本身可以抵御外部環(huán)境的入侵。你的潛意識(shí)會(huì)把一個(gè)等邊三角形作為避難所。三角穩(wěn)定感的強(qiáng)度常用于建筑等領(lǐng)域的人工痕跡。目前的外觀的三角穩(wěn)定性的光環(huán)不應(yīng)該是干擾,因此,出現(xiàn)與三角形的圖片,它是整個(gè)重點(diǎn)。當(dāng)然,如果只是作為一個(gè)三角形的例外。這只是一種野心,顯示三角形的孤立。由于三角形的一半是矩形的,因此要用三角形矩形的意圖,通過巧妙的構(gòu)圖布置,也可以起到矩形布局的效果。
圓
圓是完整的,也是一個(gè)符號(hào)的周期,圓圈是非常象征性的元素,東方風(fēng)格,所以說。圓圈有一個(gè)靈活的和開放的態(tài)度,它與三角形相比,稍弱的力量,更生動(dòng)。如果你的網(wǎng)頁與點(diǎn),毫無疑問,這一頁是讓人想起這是孩子或年輕女孩的觀眾的網(wǎng)頁。
圓的魅力在于和諧,所以它可以和可以用在任何格式,它也可以形成一個(gè)焦點(diǎn)因?yàn)槲覀冇幸粋€(gè)圓形的流動(dòng)性,因此,它沒有穩(wěn)定的特性,在布局如果循環(huán)布局,將受到影響,它的表達(dá)式的使用圓形布局所以我們都需要進(jìn)一步改善。例如,保持圓形的大小并不是一件容易的事太多,因?yàn)樘笕菀讛D壓屏幕本身的邊緣,周圍產(chǎn)生一種壓迫的感覺。通過幾何布局設(shè)計(jì),往往大多是矩形文本格式的段落,據(jù)說在圖和模式需要排版使用幾何魔法本身。事實(shí)上,自然本身的結(jié)構(gòu)可以簡(jiǎn)化幾何建模、甚至一幅與幾何建模的特點(diǎn)。所以你可以把圖像內(nèi)容本身與幾何結(jié)合起來。一些幾何形狀并不簡(jiǎn)單,例如,矩形是一個(gè)平行四邊形。兩個(gè)三角形疊加在六星的角落。五角大樓的四邊形邊的數(shù)量的增加,進(jìn)而增加多邊形。后的巧妙組合幾何也可以形成一個(gè)新的形狀,這幾乎使幾何有無限魔力。
如將圓角,圖形的敏銳直覺沒有給整個(gè)圖形添加一份靈動(dòng)。
后記。
靈動(dòng)本身是一種感染性的,也許來自很多人認(rèn)為它需要付出很大的努力,其實(shí)往往更難更移動(dòng)得太快,只要有明確的設(shè)計(jì)目標(biāo),你只需要按照目標(biāo)進(jìn)入過程。這里就不得不提到,很多看似簡(jiǎn)單的操作技能不一定真的能幫助你,如“使用黃金比例可以得到最好的結(jié)果”的“非對(duì)稱布局必須更加動(dòng)態(tài)比對(duì)稱布局”的顏色一頁不能超過3種顏色”字體的藍(lán)色,和閱讀體驗(yàn)差”…這樣的經(jīng)歷會(huì)誤導(dǎo)你,不是它本身是不正確的,而是因?yàn)樗惶峁┮粋€(gè)初學(xué)者的外部環(huán)境,他們只給出了基于他們的解決方案的設(shè)計(jì)領(lǐng)域的問題,它可能不會(huì)改變你的環(huán)境。
網(wǎng)頁設(shè)計(jì)是最有趣的,沒有標(biāo)準(zhǔn)的答案永遠(yuǎn)。一個(gè)甚至被稱為大師的杰作,等待有人可以突破它,也許我們應(yīng)該放棄思維的“突破”的運(yùn)動(dòng)類型的表達(dá),應(yīng)該說,不同的人應(yīng)該執(zhí)行不同的風(fēng)格。