解析如何打造網(wǎng)頁(yè)的形式感技巧發(fā)布者：本站     時(shí)間：2022-01-07 10:01:02

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

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

圓：可愛(ài)、靈動(dòng)

三角：動(dòng)感、尖銳、不平衡

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

如：活動(dòng)專題頁(yè)、內(nèi)容不多的小型資料頁(yè)。

增強(qiáng)視覺(jué)上的靈動(dòng)和刺激可以讓頁(yè)面快速抓住玩家的眼睛，達(dá)到專題快速傳播的效果。

詳細(xì)解析如何打造網(wǎng)頁(yè)的形式感技巧,PS教程,

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

我們?cè)诖酥皇亲隽艘恍┖?jiǎn)單的嘗試，三種形態(tài)的組合還有很多。在日常的頁(yè)面設(shè)計(jì)中我們可以根據(jù)內(nèi)容進(jìn)行頁(yè)面基礎(chǔ)框架的打稿。

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

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

詳細(xì)解析如何打造網(wǎng)頁(yè)的形式感技巧,PS教程,

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

搭幾何框架的好處有很多。增強(qiáng)想象空間，這點(diǎn)很重要。

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

另外在此基礎(chǔ)上我們可以進(jìn)行靈活的基礎(chǔ)配色，無(wú)細(xì)節(jié)負(fù)擔(dān)，運(yùn)動(dòng)起來(lái)當(dāng)然方便。

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

詳細(xì)解析如何打造網(wǎng)頁(yè)的形式感技巧,PS教程,

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

在文字排版的時(shí)候，因?yàn)槠洳灰?guī)則的形狀，我會(huì)需要適當(dāng)調(diào)整字符和圖片內(nèi)容。把握疏密和節(jié)奏。

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

撒花~

詳細(xì)解析如何打造網(wǎng)頁(yè)的形式感技巧,PS教程,

我們?cè)僖黄饋?lái)欣賞一些平時(shí)看到的這些有形式感的專題頁(yè)吧。

在配搭時(shí)，必須選擇圓、方、三角的其中一個(gè)形作為主形，避免大形不清晰、小形各自獨(dú)立的碎塊。

詳細(xì)解析如何打造網(wǎng)頁(yè)的形式感技巧,PS教程,

這是一個(gè)圓和三角的陷形，結(jié)合logo的弧線打形。整個(gè)頁(yè)面雖然各自為塊，卻渾然一體，剛?cè)岵?jì)。

詳細(xì)解析如何打造網(wǎng)頁(yè)的形式感技巧,PS教程,

這是一張我們?nèi)粘？赡苁盏降膩?lái)自項(xiàng)目的需求，版塊多、文字也不少。要做一張有形式感的頁(yè)面看起來(lái)并不容易。怎么辦呢?

讓我們來(lái)簡(jiǎn)單規(guī)劃一下吧。

這是一個(gè)愚人節(jié)的頁(yè)面，項(xiàng)目策劃了與此諧音的“魚(yú)人”活動(dòng)。

因?yàn)檫@個(gè)主題我們可以設(shè)計(jì)得相對(duì)輕松活潑有愛(ài)的風(fēng)格。

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

有了一個(gè)大致的概念，我們就可以開(kāi)始搭出我們的框架了。

詳細(xì)解析如何打造網(wǎng)頁(yè)的形式感技巧,PS教程,

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

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

詳細(xì)解析如何打造網(wǎng)頁(yè)的形式感技巧,PS教程,

選擇主要圖形元素

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

圓形：靈動(dòng)、活潑、有趣、可愛(ài)、多變。

三角：尖銳、不平衡、刺激、動(dòng)感。

詳細(xì)解析如何打造網(wǎng)頁(yè)的形式感技巧,PS教程,

各種擺階段

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

詳細(xì)解析如何打造網(wǎng)頁(yè)的形式感技巧,PS教程,

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

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

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