【前端GUI】——對一些優秀網頁設計作品的分析&心得


前言:優秀的網站設計作品都有一些相似的地方,即使是美學,也一定會遵循着一定的規律。


ONE

 

 

 

  • 這一組,屬於同類。      
  • 主題:點心。     
  • 背景:卡通動物形象。     
  • 色調:柔和,甜美。
  • 點線面布局
  1. 在這兩個頁面中,點心作為點的存在,水平均勻擺放在頁面的中間,采用了實物的照片,更加立體化,背景由柔和的漫畫形式平面展現,很好的突出了點心這一網頁主題。給人以想吃的欲望。
  2. 同時,這兩排點心大小相同,位置整齊,以點的形式串聯成線,和頁面上方由動物形象形成的點串聯成線的效果相呼應。營造了一種平穩,規律的效果。
  3. 導航條中的小方塊,作為一個面,插在兩個分隔開的區域中間,打破了圖形之間的分界,使它們相互融合,暗示了導航欄的作用。
  • 面的使用

    在這兩個網頁中,導航欄和主頁面的矩形邊框是幾何形,規則,平穩,理性;背景的動物插畫師人造型,活潑,自由;點心的實物圖是自然形,生動,厚實,與矢量的單薄產生強烈的反差。

  • 色彩的運用

    導航欄固定使用米白色,主頁面使用色調柔和的橙色,紫色,頁面中的文字使用了白色作為調和,調和了原本十分明艷的顏色,使頁面更加浪漫,恬靜,柔和。

 

TWO

 

 

 

  • 這一組,屬於同類。
  • 主題:新聞。
  • 留白:使用少量幾何圖形作為點綴,大量空間留白,文字以線的形式存在,段落又構成面,中間由一條細線分隔開,使頁面更加的理性,單純,簡練,信息傳達更加清晰和准確。
  • 點線面布局
  1. 第一個頁面中,版頭一些散落的幾何圖形以點的形式存在,沒有秩序,分散排列,顯得自由,輕松,活潑。同時,它們采用近大遠小的視覺引導,將視線集中到中間位置,突出了News這個主題。
  2. 第二個頁面中,兩個不同的新聞版塊,右邊放置了同樣的圓形圖案,以點的形式存在,暗示了內容的同類性。左邊,不同的幾何圖案排列組合構成了不同的面,顯示了內容的豐富,多彩。
  3. 兩個頁面中間都有一條直線,用來分隔上下兩個不同的部分,在這條直線右端,設計了一個帶有箭頭標示的幾何圖案,以點的形式存在,打破了直線帶來的單調和沉悶。
  4. 在這兩個頁面中,多使用幾何圖形,構成幾何面,使得頁面規則,平穩,理性。
  • 色彩運用
  1. 背景使用灰色,理性的顏色,突出新聞主題的嚴肅,冷靜。
  2. 幾何點綴使用黃色,藍色,中間用少量的白色作為調和,色調明麗,營造出活潑,輕松的氛圍。

 

Three

 

 

 

  • 這一組,屬於同類。
  • 點線面布局
  1. 圓形圖案以點的形式存在,水平對稱並置,顯得嚴謹和理性。
  2. 文字標題以線的形式存在,和段落一起構成面。放在頁面的上方。
  3. 圓形的邊界運用了藍色的閃光效果,制造出電子化,信息化的界面。
  • 突出主題
  1. 第一個頁面大膽使用紅色和藍色做為對比色,圖案中也使用到冰與火的對比,營造出熱情,大膽的效果。

 

心得

 

 

  • 網頁美術設計有一個“2秒理論”,判斷它是否設計成功的最好標准就是它能不能在最短的時間內抓住用戶的眼球,傳遞給用戶想要傳遞的信息。
  • 完整的網頁設計需要:A、視聽元素  B、版式設計(有效傳達信息)
  • 優秀網頁的特征:
  1. 主題信息傳達明確
  2. 網站內容與視覺形式統一
  3. 鮮明的整體設計風格
  • “一個好的設計,永遠離不開紙和筆”——量身定做
  • 創意(創作立意)是優秀網頁的先決因素,優秀的網頁需要實現形式與內容理智與情感審美與實用(創意與信息)的辯證統一。

 


版權聲明:本文原創,非本人允許不得轉載


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM