網頁設計中的「骨骼」運用技巧

2021-07-23 19:18:59 字數 1547 閱讀 1974

今天我們接著來談談有關網頁設計的事,只是因為網際網路時代,網頁設計實在是成為了一種潮流。必不可少。 1、

設計的骨架:視覺解剖。

隨著網頁設計的發展,其骨架也慢慢漸隱,但它依然發揮著支撐起整個視線框架。這裡,有人會與柵格系統聯絡起來。網頁的柵格系統更多發揮的是對齊元素的作用,而骨架的功能會更加籠統。

頁面設計的骨架,針對的是每一頁面的骨架。每乙個**都會有不同的頁面,我們會把頁面分級為首頁

——二級頁面

——**頁面。通常來說,首頁運用乙個骨架,二級頁面、**頁面也分別有乙個骨架。首頁的骨架有時還會根據分屏展示的不同展示不同的骨架樣式。但無論有多少變化,乙個**的諸多頁面的骨架之間,都會存在一種內在的視覺統一。

首頁的視覺骨架尤其重要,因為首頁承擔著網頁的第一印象,還主導著整個**的風格方向,因此確定好首頁的視覺骨架,是設計最初最難明確的問題。很多設計師在設計最初所耗費最多時間,用於實驗各種頁面版式的型別以期最完美的效果展現,而事實上,最完美其實是個偽命題,在有限的時間內,你需要做得就是找好自己的表達目標,每個頁面設定好乙個視覺焦點,根據焦點來表達你的重點內容。換句話說,你最希望使用者了解什麼?這個問題的答案應該是要無比清晰的在大腦中伴隨設計全過程。 2、

十字準星式:瞄準期待

無論網頁的導航等其他元素放置於頁面的哪個位置(盡量圍繞線條經過的方向),這兩個頁面都是屬於十字準星型的骨架結構,焦點始終位於正中,導航無論居於**,都屬於次要的視覺地位。 3、

垂直雙欄式:雙面一體。

將乙個網頁分成兩欄並不意味著均分,它們是按照垂直方向形成了兩列的不同布局。常見的的確是平均分配的表現情況,網頁的焦點內容可以選擇任一側,另一側作為補充。簡稱雙面一體是因為,你不能製造兩個焦點,分兩個部分,它們也應該共同營造乙個焦點。

雙欄式的頁面設計表現比較靈活,通常會有一偏倚輕重這,樣就能確立好視覺焦點,形成對比,製造情景衝突。視覺重點在某一側,利用背景色的不同加強視覺重量的對比

兩列縮圖垂直排列,讓版式活躍起來的方法就是增加某一處高度的不同,強調一點細微的變化。 4、

網格式:有序與無序

這種骨架樣式通常是基於某乙個網格而搭建內容,網格的表現形式多樣,每個網格都用以展示不同的內容,可以是比較規範的網格,也可以是錯落有致

……雖說每個網頁都可以基於網格而設計,但是網頁的表現未必要嚴格遵循網格本身。

規範的網格通常比較傾向古典懷舊,它傳遞出一種相對嚴格的秩序之美。

相對有些錯落變換的網格,更具現代風格,規則與反規則的交錯。 5、

動感傾斜式:墜落的**

傾斜的線條容易形成動感的張力,利用這一點所形成的視覺骨架就能很好表現與「運動

」「衝擊力

」等動感較強的內容頁面。

這些所謂的骨架原理在於隱藏於表層下方的最基地的視覺結構,事實上,其他的元素通常並不嚴格侷限於某個區域,這就讓頂層的枝葉更加豐富。

在我們著手進行頁面設計前,確定好乙個視覺骨架的方向至關重要,這讓我們並不依賴於運氣去「撞

」到某個好的表達,並且你也不需要單獨設定某個固定的骨架,還可以兩兩並用,乙個**有多個頁面,多個頁面都可以擁有不同的布局。同乙個頁面,也會因為內容的不同採用不同的視覺結構表達。

(注:以上部分內容**於網路。整理歸檔:藍藍設計,

中運用 色彩在包裝設計中的運用技巧

包裝設計對於產品一直有著不可忽視的重要性,就好比乙個人的長相,顏值高 有特點的人更容易被人記住,給人留下好的第一印象。當我們看到乙個包裝時,我們第一視覺點便是它的顏色。色相 即色彩的相貌和特徵。如 紅 橙 黃 綠 青 藍 紫等等顏色的種類變化就叫色相。明度 指色彩的亮度或明度。比如,紫紅 深紅 玫瑰...

網頁設計中的常用表單設計技巧

輸入框 input 應當符合邏輯地劃分為小組,這樣大腦就可以很好的處理大堆區域間的關係。html權威指南 web應用程式總是利用表單來處理資料錄入和配置,但並不是所有的表單都保持一致。輸入區域的對齊方式,各自的標籤 label 操作方式,以及周圍的視覺元素都會或多或少影響使用者的行為。表單布局 考慮...

優秀網頁設計的技巧

作為一名網頁設計師,如何在第一時間打動潛在的客戶是至關重要的。如果你設計的東西不能夠打動他們,你就會失去一切,這個世界有的時候就是這麼的現實。那究竟要注意哪些細節才能夠在乙個正確的方向去打動客戶,讓瀏覽者源源不斷呢?下面幾點可能是你需要反思的。1.有明確的標誌和口號 我們知道有乙個好的標誌是企業形象...