解析如何打造網頁的形式感技巧發布者：本站 時間：2022-01-07 10:01:02
我們來看看它們各自的幾何形態的情感：
方：整齊、穩定、干凈、銳利。缺點：生硬、呆板
圓：可愛、靈動
三角：動感、尖銳、不平衡
其中方向因為其整潔、易識別、重構性好的特點在網頁設計中應用比較廣泛，但與此同時也容易讓人審美疲勞形成畫面生硬的印象，所以在非門戶或大型資料站等頁面時可以采用圓、三角這兩個元素進行調和。
如：活動專題頁、內容不多的小型資料頁。
增強視覺上的靈動和刺激可以讓頁面快速抓住玩家的眼睛，達到專題快速傳播的效果。
詳細解析如何打造網頁的形式感技巧,PS教程,
現在我們就來用這三種幾何形態為頁面視覺做一個簡單的配餐吧!
我們在此只是做了一些簡單的嘗試，三種形態的組合還有很多。在日常的頁面設計中我們可以根據內容進行頁面基礎框架的打稿。
在配搭時，必須注意選擇其中一種形作為主形，避免形成大形不清晰、小形各自獨立的碎塊。
一起來嘗試做些小練習吧。
詳細解析如何打造網頁的形式感技巧,PS教程,
這里是天馬行空環節!
搭幾何框架的好處有很多。增強想象空間，這點很重要。
我們拿上一張的左一圖形舉例，它可以是一個信封、可以是測量器、也可以是棒球場。當然我們需要結合主題來變換各種幾何搭配，不斷刺激尋找到創作的G點。
另外在此基礎上我們可以進行靈活的基礎配色，無細節負擔，運動起來當然方便。
文字排版，可以快速調整版塊和文字比例。
詳細解析如何打造網頁的形式感技巧,PS教程,
搭完框架后配搭上必需的圖片和文字，豐肉加質感。
在文字排版的時候，因為其不規則的形狀，我會需要適當調整字符和圖片內容。把握疏密和節奏。
一張有形式感又很整體的專題頁面就完成了。
撒花~
詳細解析如何打造網頁的形式感技巧,PS教程,
我們再一起來欣賞一些平時看到的這些有形式感的專題頁吧。
在配搭時，必須選擇圓、方、三角的其中一個形作為主形，避免大形不清晰、小形各自獨立的碎塊。
詳細解析如何打造網頁的形式感技巧,PS教程,
這是一個圓和三角的陷形，結合logo的弧線打形。整個頁面雖然各自為塊，卻渾然一體，剛柔并濟。
詳細解析如何打造網頁的形式感技巧,PS教程,
這是一張我們日常可能收到的來自項目的需求，版塊多、文字也不少。要做一張有形式感的頁面看起來并不容易。怎么辦呢?
讓我們來簡單規劃一下吧。
這是一個愚人節的頁面，項目策劃了與此諧音的“魚人”活動。
因為這個主題我們可以設計得相對輕松活潑有愛的風格。
現在我們來看看內容。內容大致分為兩個部分，左右抓魚、右邊是變成魚被抓。一個并列的形式，版塊內容頁相對類似。在最下方有一個共享的獎勵版塊，屬于兩大版塊合用的部分。
有了一個大致的概念，我們就可以開始搭出我們的框架了。
詳細解析如何打造網頁的形式感技巧,PS教程,
關鍵詞聯想
看我交互需求稿后，我們圍繞“愚人節”這個主題開始了系列關鍵詞的聯想。這個階段可能是天馬行空的，有著多種不可預計的有趣結果在等待我們。
詳細解析如何打造網頁的形式感技巧,PS教程,
選擇主要圖形元素
根據關鍵詞聯想，我們選擇了主形圓形和輔形三角。
圓形：靈動、活潑、有趣、可愛、多變。
三角：尖銳、不平衡、刺激、動感。
詳細解析如何打造網頁的形式感技巧,PS教程,
各種擺階段
設計是一個理性+聯想+運氣的過程。在圓方三角的各種擺過程中，我們可以潑墨般的嘗試各種方案，由運氣不斷刺激靈感，靈感不繼產生新的體驗，把握住理性的韁繩，最終產生我們要的創意和圖形。
詳細解析如何打造網頁的形式感技巧,PS教程,
1.在知道了策劃需求后，我們大致清楚我們需要一個對稱的造型。根據魚人這個概念，我們通過圓方三角的基礎形狀搭出一只魚的造型。
2.然后根據現有的頁面內容繼續細化框架，還是繼續三種元素的配搭。
3.放入必需的圖片和文字進行空間的比對，并進一步切割形狀，豐潤細節。在這個過程中必須注意運用顏色和形態大小保持每個版塊的主形，避免過于瑣碎。
選擇我們，優質服務，不容錯過
1. 優秀的網絡資源，強大的網站優化技術，穩定的網站和速度保證
2. 15年上海網站建設經驗，優秀的技術和設計水平，更放心
3. 全程省心服務，不必擔心自己不懂網絡，更省心。
------------------------------------------------------------
24小時聯系電話：021-58370032
關鍵詞標簽：上海網站建設 上海網站制作 網站優化 小程序開發