2022-12-18 分類: 網(wǎng)站建設(shè)
數(shù)學(xué)無(wú)處不在,即使你不喜歡它。 你可以在建筑中找到數(shù)學(xué)比例和常數(shù),也可以在樂器中找到它們。 我們常玩的游戲里也有,所以就不要為數(shù)學(xué)在網(wǎng)頁(yè)設(shè)計(jì)中扮演了重要角色而感到驚訝咯。 但是它是什么呢? 我們?cè)撊绾问褂眠@些比例,常數(shù)和理論來(lái)是的我們的網(wǎng)頁(yè)設(shè)計(jì)更加美觀?
數(shù)學(xué)無(wú)處不在
沃爾特·迪斯尼曾經(jīng)在Mathmagicland拍了一部關(guān)于唐老鴨的電影。 在YouTube上提供的這個(gè)視頻中,他們會(huì)向兒童介紹數(shù)學(xué)及其用途。 它表明使用數(shù)學(xué)比例來(lái)定義儀器上的音符,并且可以在古代和現(xiàn)代建筑中找到數(shù)學(xué)矩形。 此外,我們可以在一些文藝復(fù)興時(shí)期的藝術(shù)中找到這個(gè)完全相同的矩形,例如著名的蒙拉麗莎的微笑。
簡(jiǎn)單的小課程:你可以使用一些基本的數(shù)學(xué)原理來(lái)使得自己的設(shè)計(jì)更為美觀。
小故事
在古希臘,有一群數(shù)學(xué)家稱自己是畢達(dá)哥拉斯人。 畢達(dá)哥拉斯人以五角星為標(biāo)志。 他們選擇這種形狀,因?yàn)樗臄?shù)學(xué)好:五角星的線性形狀中包含著黃金比例! 此外蒙娜麗莎的微笑里面也隱藏著黃金矩形。
兔子養(yǎng)殖
在十二世紀(jì)和十三世紀(jì),有一位才華橫溢的意大利數(shù)學(xué)家。 他的名字是斐波那契。他觀察到兔子的自然繁殖。 在他這個(gè)理想的世界里,兔子不會(huì)死亡,每只兔子都竭力繁殖, 他發(fā)現(xiàn)這個(gè)周期里有一個(gè)特殊的數(shù)字序列。 這個(gè)序列后來(lái)被稱為斐波納契數(shù)字。
關(guān)于這個(gè)序列的特別之處在于,如果您按序列中的數(shù)字劃分所選數(shù)字,則每次都會(huì)(大約)獲得相同的數(shù)字。 這個(gè)數(shù)字約為1.618,更好地稱為Phi。按順序進(jìn)一步,分割結(jié)果越接近Phi。 斐波那契還發(fā)現(xiàn),這個(gè)序列不僅存在于兔子的育種中, 而且在自然界的其他物質(zhì)中也存在著,例如種子在向日葵中的排列。
黃金比例
正如你已知道的,Phi是非常常見的設(shè)計(jì)常數(shù)。 這是因?yàn)?比1.618被稱為黃金比例,或者說(shuō)是黃金分割。如果按照這個(gè)比例繪制一個(gè)矩形,就會(huì)得到一個(gè)黃金矩形。
這里顯示的黃金矩形展示了如何將其自身無(wú)限好分割。
黃金比例和黃金矩形用于許多設(shè)計(jì)中,在文藝復(fù)興時(shí)期,許多藝術(shù)家按這個(gè)比例和矩形來(lái)繪制他們的作品。 在古希臘,建筑師在建筑物的設(shè)計(jì)中使用黃金矩形, 帕特農(nóng)神廟就是個(gè)很好的例子。 即使在現(xiàn)代建筑中,黃金矩形也有很強(qiáng)的存在感。
但是,這個(gè)比例為什么這么特別呢? 因?yàn)镻hi,是個(gè)自然數(shù)學(xué)常數(shù),我們會(huì)自動(dòng)的對(duì)這個(gè)比例的東西感到滿意 因?yàn)槲覀兒苁煜み@個(gè)比例,觸發(fā)一種韻感。 因此使用黃金比例可以保證你設(shè)計(jì)中的元素構(gòu)成平衡。
網(wǎng)頁(yè)設(shè)計(jì)中黃金比例的例子
在我們甚至開始考慮將這個(gè)比例應(yīng)用于我們的設(shè)計(jì)之前,我們首先要看一下使用這個(gè)比例的幾個(gè)例子。
首先是這個(gè)網(wǎng)站,它的設(shè)計(jì)有多個(gè)比例構(gòu)成。 在下面的圖片里你將看到網(wǎng)站的界面。 我用了兩種顏色來(lái)標(biāo)記不同的構(gòu)成, 主要列的寬度比恰好是1.618, 像素點(diǎn)的計(jì)算證明了這一點(diǎn)。
但是這個(gè)網(wǎng)站不僅在總寬度上使用黃金比例,還適用于網(wǎng)站上一些較小的部分。
讓我們快速瀏覽主列,然后看看內(nèi)容。 如下所示,文本元素大概是此元素中藥讀取內(nèi)容的1.618倍。
另一個(gè)很好的例子是著名的Smashing Magazine博客。 其主列的總寬度僅為700像素。 當(dāng)您將此數(shù)字除以1.618時(shí),結(jié)果是大約435:側(cè)邊欄的寬度。
如何將這個(gè)比例應(yīng)用于你的下一個(gè)設(shè)計(jì)中
繪畫的畫布和建筑物的寬度都具有固定的寬度 ,但是我們的的顯示器的大小不同。因此,尤其是在網(wǎng)站設(shè)計(jì)中,在計(jì)算黃金比例時(shí)應(yīng)考慮一個(gè)額外的變量。
但是有一個(gè)簡(jiǎn)單的辦法來(lái)解決這個(gè)問題, 你根據(jù)比例計(jì)算寬度的時(shí)候,只需要計(jì)算包含元素。 在我們的第一個(gè)和最后一個(gè)例子中, 這是一個(gè)網(wǎng)站的完整寬度,在第二個(gè)例子中,只是較小部分的寬度:它們的主列。
無(wú)論如何,當(dāng)你確定包含元素的寬度時(shí),你應(yīng)該將此值除以Phi, 然后獲得主要元素的寬度。 然后從元素寬度中減去主要元素的結(jié)果,這將給出較小部分的寬度。
如果你懶得記Phi或者懶得用計(jì)算器,我建議用Phiculator, 這個(gè)小程序只需要填寫總寬就能自動(dòng)計(jì)算寬度。 它能整數(shù)計(jì)算,不必?fù)?dān)心十進(jìn)制數(shù)字計(jì)算會(huì)出問題。
三分法則
另一個(gè)著名的數(shù)學(xué)法則是三分法則。 這個(gè)規(guī)則將幫助你將畫面分為九個(gè)相等的部分來(lái)制作平衡的組合。 這個(gè)規(guī)則有點(diǎn)類似于黃金比例,因?yàn)?.618和0.67約等于三分之二。
攝影
在攝影中,經(jīng)常使用三分法則來(lái)構(gòu)圖拍攝,因?yàn)樗莻€(gè)很直觀的指導(dǎo),容易拍出好的照片。 這就是為什么你會(huì)在單反上看到網(wǎng)格線的原因。 有些微單也有這個(gè)功能,在攝影的時(shí)候加入網(wǎng)格點(diǎn)。
它是如何指導(dǎo)工作的?
使用三分法則, 你可以將畫布分為九個(gè)相等的矩形,平行線和四個(gè)交點(diǎn), 你可以使用平行線和交點(diǎn)創(chuàng)造出有趣的組合。
顯然,組合的關(guān)鍵在正確定位元素, 使用三分法則的時(shí)候,你可以做兩件事。
第一個(gè)是用于劃分畫布的線條, 攝影中,長(zhǎng)而直的形狀通常與這些線對(duì)齊。 在設(shè)計(jì)中,具有相同形狀的東西也可以與這些線對(duì)齊。
第二件事是,你需要在交點(diǎn)上放置一個(gè)或兩個(gè)對(duì)象, 太多會(huì)影響構(gòu)圖。
這是我在攝影網(wǎng)站Flickr上發(fā)現(xiàn)的一個(gè)很好的例子。 如下圖所示攝影師將排列的建筑物與頂線對(duì)齊,而在右上角的交叉點(diǎn),您會(huì)發(fā)現(xiàn)一個(gè)房子,因?yàn)樗念伾钔怀觥?因?yàn)樗旧砭褪且粋€(gè)焦點(diǎn),它與交點(diǎn)相一致,增加了良好的組合和均衡的感覺。
Flickr上發(fā)現(xiàn)的照片
我們已經(jīng)看到了三分法則適用于攝影中,但是如何將其用于網(wǎng)站設(shè)計(jì),我們可以找到例子嗎?
網(wǎng)頁(yè)設(shè)計(jì)三份法則
網(wǎng)站設(shè)計(jì)中一個(gè)很好的例子就是這個(gè)。 我準(zhǔn)備了一個(gè)你將看到的圖片。 側(cè)邊欄和右邊的垂直線非常接近, 在左側(cè),你可以看到文章位于交點(diǎn)上。
你在上面看到的兩個(gè)對(duì)齊垂直線在這個(gè)網(wǎng)站的布局中創(chuàng)造出一種和諧的感覺。
將三分法則應(yīng)用于你的下一個(gè)設(shè)計(jì)
三分法則究竟能適用于你的網(wǎng)站的設(shè)計(jì)嗎? 另外,我們的“畫布”的寬度變化可能會(huì)帶來(lái)一些麻煩。 當(dāng)我們使用與黃金比例相同的技術(shù)時(shí),我們會(huì)很好。
要應(yīng)用這個(gè)法則,你必須把你的總寬分為三份, 然后畫出指導(dǎo)線,然后重復(fù)。
但是,第二部分可能有點(diǎn)麻煩,我們畫布的高度是可變的, 將變量除以三將給我們帶來(lái)麻煩。 我喜歡用寬屏比例來(lái)計(jì)算分?jǐn)?shù)的高度,或者只是使用包含元素的高度。 將包含元素的寬度除以16再乘以9,就得到了高度, 然后除以3并繪制指導(dǎo)線。
當(dāng)你設(shè)置了指導(dǎo)線,你可以根據(jù)這些指導(dǎo)線來(lái)定位你的元素。 將你的元素與線對(duì)齊,將一些亮點(diǎn)放置在交點(diǎn)上。
網(wǎng)格系統(tǒng)
你可能認(rèn)為網(wǎng)格系統(tǒng)并不是數(shù)學(xué)的,但是它們是的。 你將畫布分為不同的列和溝槽,這個(gè)劃分由黃金法則和三分法則計(jì)算。
很多人認(rèn)為網(wǎng)格系統(tǒng)會(huì)限制設(shè)計(jì)師的創(chuàng)造力,因?yàn)榈酶鶕?jù)系統(tǒng)來(lái)繪圖。 我不認(rèn)可這個(gè)觀點(diǎn),因?yàn)榫W(wǎng)格系統(tǒng)實(shí)際上提高了創(chuàng)造力, 你會(huì)看到很多的構(gòu)成,會(huì)想辦法去解決它們,而如果沒有網(wǎng)格系統(tǒng),你將永遠(yuǎn)不會(huì)考慮它們。
網(wǎng)格系統(tǒng)的工作原理是引導(dǎo)你進(jìn)行大小、定位、調(diào)整網(wǎng)站設(shè)計(jì)。 它們可以幫助你組織規(guī)范的界面,消除混淆的版塊。 最重要的是它們便于使用。
使用網(wǎng)格系統(tǒng)的另一個(gè)好處是規(guī)則就是用來(lái)打破的,不是嗎? 如果你打斷你的網(wǎng)格的一部分, 這并不錯(cuò)誤! 可以為界面上的特定元素制作出特別的點(diǎn),因?yàn)樗c其他元素有著鮮明的對(duì)比。 這可以幫助你實(shí)現(xiàn)某些目的,比如標(biāo)語(yǔ)。
如何制作一個(gè)好的網(wǎng)格
沒有任何一個(gè)網(wǎng)格是適用于任何設(shè)計(jì)的,因?yàn)榫W(wǎng)格圍繞內(nèi)容來(lái)制作。 我將演示如何在960像素寬的環(huán)境中構(gòu)建6列網(wǎng)格的簡(jiǎn)單過(guò)程。
首先,我們將我們的總畫布寬度除以6,所以我們有每列的總寬度。 這個(gè)劃分的結(jié)果是160像素,如下圖所示。
其次,我們將創(chuàng)建一個(gè)圖像的一列,我們稍后將復(fù)制。 樣一來(lái),以后就更容易創(chuàng)建完整的網(wǎng)格,因?yàn)槲覀儾槐貫槊恳涣兄貜?fù)這一步。
我們將決定我們的間隔的大小,我認(rèn)為20像素就足夠了。 這個(gè)間隔應(yīng)該被添加到列的兩邊,所以我們必須把它除以2。 這個(gè)間隔應(yīng)該被添加到列的兩邊,所以我們必須把它除以2。 如下圖所示,我們?cè)诿窟吿砑恿艘粋€(gè)10像素的間隔。
然后我們將再次復(fù)制這個(gè)圖像,直到再次達(dá)到960個(gè)像素,這個(gè)時(shí)候我們已經(jīng)創(chuàng)建了一個(gè)基本的網(wǎng)格系統(tǒng)了。
我很懶!
別擔(dān)心,哪怕你懶, 互聯(lián)網(wǎng)上也有很多的免費(fèi)網(wǎng)格系統(tǒng)可以使用。 我最喜歡的是960gs網(wǎng)格系統(tǒng),它具有一個(gè)CSS框架和PSD源文件。
總結(jié)
我希望我向你展示了數(shù)學(xué)是可以使設(shè)計(jì)變得更加美好,我已經(jīng)教給你在下一個(gè)設(shè)計(jì)中使用得很多技巧。 不過(guò)需要注意的是,設(shè)計(jì)中還需要考慮到很多問題,并不是僅僅使用這些技巧就能創(chuàng)造出良好的設(shè)計(jì),但是它們確實(shí)可以幫助到你進(jìn)行創(chuàng)造。
創(chuàng)新互聯(lián)專業(yè)從事成都網(wǎng)站建設(shè),成都網(wǎng)站設(shè)計(jì),成都網(wǎng)站制作
網(wǎng)站題目:成都網(wǎng)站建設(shè)_數(shù)學(xué)與網(wǎng)頁(yè)設(shè)計(jì)之間的密切關(guān)系
網(wǎng)頁(yè)鏈接:http://m.rwnh.cn/news19/223669.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容