最近自己參與評改網友作業分享,設計選圖感覺很贊,版式有自己的思考。但是擺放有些失控,因為沒有利用到基礎網格的功能。

原來問題如下

那個男人12月12日 提問:老師您好,仰慕已久。我主要是碰到了一下問題:

▍在製作網頁的時對於網頁交互的體驗不夠了解,往往是做的很平。

▍優秀網頁應該具備那幾點呢?來證明一個網頁作品。

▍網頁在製作過程中對於後台優化的問題怎麼盡量做到最好,本人略懂代碼,在平時學習中經常聽到在製作網頁的時候要考慮到後台優化問題。


問題回答:

▍交互體驗,這類型的網頁可以嘗試用視察滾動處理

▍優秀網頁整體統一,每個模塊都自己細節,包括視覺和交互細節。

▍根據程序員的思維製作源文件,最直觀的就是圖層的命名。還有每個模塊圖片比例尺寸的問題,盡量做到一致。

左/原圖 右/效果圖

那如何改進呢?

▍利用網格柵格系統,規範整體設計

▍圖層編組要有邏輯規範

▍視覺平衡,每個畫面處理都應該是感覺是平衡

小提示:

對於柵格系統,我們利用到PS參考輔助線插件神器GuideGuide。他能根據畫布,畫板,所選圖層或您的選擇添加輔助線,快速生成滿足不同場景的參考線。

修改流程

因為是特殊構造的網頁,那麼,為了保持在特立中尋找統一的特點。

設計最好遵循在完整的網格系統進行,方便調整時有規範可尋。

為了保證快速生成網格系統

我們會用到Photoshop插件GuideGuide,設置時注意劃分的數量以及每個組件的間距即可。

一般,自己習慣將此劃分為20等分,每個間距是8.

當然更理想的狀態如上,將整個頁面寬度劃分為12等分。

這一套體系,基本沿用了現有前端框架常用的柵格系統,即12等分系統。

譬如Bootstrap 提供了一套響應式、移動設備優先的流式網格系統,隨著屏幕或視口(viewport)尺寸的增加,系統會自動分為最多12列。

Photoshop插件GuideGuide

每個元素都遵循柵格系統對齊

主要是物體的左側和右側元素間交叉對齊

針對圖層進行調整

設計師成不成熟的標誌,有一個細節可以看出來,就是對圖層的處理。

就像程序員的代碼為了時別人看懂,都會做好注釋工作。


最後調整重點都是視覺平衡。

物理上的平衡和感知上的平衡是不一致。

後者更強調感覺,就如同下圖,物理層面上,左右方塊大小質量都是一致,而但我們觀察時會發現,明顯右側的方塊顯得更重要。

這是由於視覺神經在作怪,此時如果只是單純以數值為調整基礎,就會顯得很無力。

一般我們會做這樣的調整:

  • 將右側方塊往天平中間挪動
  • 將左側方塊的藍色調亮一點

同樣,在具體處理每個畫面時,也是基於這點考慮。

譬如上圖,我們觀察發現左側是盆栽整體偏暗,即視覺認知上是顯得比較重。

此時調整的策略:

  • 右側添加一塊差不多重量的暗色平衡視覺
  • 左側盆栽的亮度稍微提高或往版面的中間線靠攏

如果你對我這次講演感興趣

可以移步到如下網址觀看完整的講解過程:http://www.xuehui.com/pinggai/239

推薦閱讀:

相关文章