詳細解析如何打造網(wǎng)頁的形式感技巧

2024-04-22    分類: 網(wǎng)站建設(shè)

作為自然界視覺的三種基礎(chǔ)形態(tài),它們分別由直線、折線、弧線組成。

我們來看看它們各自的幾何形態(tài)的情感:

方:整齊、穩(wěn)定、干凈、銳利。缺點:生硬、呆板

圓:可愛、靈動

三角:動感、尖銳、不平衡

其中方向因為其整潔、易識別、重構(gòu)性好的特點在網(wǎng)頁設(shè)計中應(yīng)用比較廣泛,但與此同時也容易讓人審美疲勞形成畫面生硬的印象,所以在非門戶或大型資料站等頁面時可以采用圓、三角這兩個元素進行調(diào)和。

如:活動專題頁、內(nèi)容不多的小型資料頁。

增強視覺上的靈動和刺激可以讓頁面快速抓住玩家的眼睛,達到專題快速傳播的效果。

現(xiàn)在我們就來用這三種幾何形態(tài)為頁面視覺做一個簡單的配餐吧!

我們在此只是做了一些簡單的嘗試,三種形態(tài)的組合還有很多。在日常的頁面設(shè)計中我們可以根據(jù)內(nèi)容進行頁面基礎(chǔ)框架的打稿。

在配搭時,必須注意選擇其中一種形作為主形,避免形成大形不清晰、小形各自獨立的碎塊。

一起來嘗試做些小練習(xí)吧。

這里是天馬行空環(huán)節(jié)!

搭幾何框架的好處有很多。增強想象空間,這點很重要。

我們拿上一張的左一圖形舉例,它可以是一個信封、可以是測量器、也可以是棒球場。當(dāng)然我們需要結(jié)合主題來變換各種幾何搭配,不斷刺激尋找到創(chuàng)作的G點。

另外在此基礎(chǔ)上我們可以進行靈活的基礎(chǔ)配色,無細節(jié)負擔(dān),運動起來當(dāng)然方便。

文字排版,可以快速調(diào)整版塊和文字比例。

搭完框架后配搭上必需的圖片和文字,豐肉加質(zhì)感。

在文字排版的時候,因為其不規(guī)則的形狀,我會需要適當(dāng)調(diào)整字符和圖片內(nèi)容。把握疏密和節(jié)奏。

一張有形式感又很整體的專題頁面就完成了。

我們再一起來欣賞一些平時看到的這些有形式感的專題頁吧。

在配搭時,必須選擇圓、方、三角的其中一個形作為主形,避免大形不清晰、小形各自獨立的碎塊。

這是一個圓和三角的陷形,結(jié)合logo的弧線打形。整個頁面雖然各自為塊,卻渾然一體,剛?cè)岵?br />
這是一張我們?nèi)粘?赡苁盏降膩碜皂椖康男枨?,版塊多、文字也不少。要做一張有形式感的頁面看起來并不容易。怎么辦呢?

讓我們來簡單規(guī)劃一下吧。

這是一個愚人節(jié)的頁面,項目策劃了與此諧音的“魚人”活動。

因為這個主題我們可以設(shè)計得相對輕松活潑有愛的風(fēng)格。

現(xiàn)在我們來看看內(nèi)容。內(nèi)容大致分為兩個部分,左右抓魚、右邊是變成魚被抓。一個并列的形式,版塊內(nèi)容頁相對類似。在最下方有一個共享的獎勵版塊,屬于兩大版塊合用的部分。

有了一個大致的概念,我們就可以開始搭出我們的框架了。

關(guān)鍵詞聯(lián)想

看我交互需求稿后,我們圍繞“愚人節(jié)”這個主題開始了系列關(guān)鍵詞的聯(lián)想。這個階段可能是天馬行空的,有著多種不可預(yù)計的有趣結(jié)果在等待我們。

選擇主要圖形元素

根據(jù)關(guān)鍵詞聯(lián)想,我們選擇了主形圓形和輔形三角。

圓形:靈動、活潑、有趣、可愛、多變。

三角:尖銳、不平衡、刺激、動感。

各種擺階段

設(shè)計是一個理性+聯(lián)想+運氣的過程。在圓方三角的各種擺過程中,我們可以潑墨般的嘗試各種方案,由運氣不斷刺激靈感,靈感不繼產(chǎn)生新的體驗,把握住理性的韁繩,最終產(chǎn)生我們要的創(chuàng)意和圖形。

1.在知道了策劃需求后,我們大致清楚我們需要一個對稱的造型。根據(jù)魚人這個概念,我們通過圓方三角的基礎(chǔ)形狀搭出一只魚的造型。

2.然后根據(jù)現(xiàn)有的頁面內(nèi)容繼續(xù)細化框架,還是繼續(xù)三種元素的配搭。

3.放入必需的圖片和文字進行空間的比對,并進一步切割形狀,豐潤細節(jié)。在這個過程中必須注意運用顏色和形態(tài)大小保持每個版塊的主形,避免過于瑣碎。

在布局完整無誤的情況下瘋狂隨意豐肉吧。一張有愛的魚人節(jié)頁面就這樣快速簡單的完成了。來試試吧!

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司!

網(wǎng)站欄目:詳細解析如何打造網(wǎng)頁的形式感技巧
網(wǎng)站URL:http://muchs.cn/news36/324736.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作定制網(wǎng)站、微信小程序、面包屑導(dǎo)航、小程序開發(fā)網(wǎng)站改版

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司