关于后台网页设计的原则
關于后臺網頁的設計有很多不可違背的原則,還有排版、頁面布局和視覺的影響等等;最后就通過一些制作效果還不錯的后臺網頁,來講解一些不可缺少的原則。
下面就主要講解:板塊和字體的親密性、對齊、對比、重復這幾個不可缺少的原則,板塊的親密性分為2大部分:橫間距之間的關系和縱間距關系。前者為了適用不同尺寸的屏幕,在橫向采用柵格布局來排版里面的東西,從而保證布局的靈活性。后者則是通過小號、中號、大號這3種間距來規格來進行劃分信息層次。
對齊大概就3種:文案類對齊、表單類對齊、數字類對齊。文案對齊作用在于:頁面的字段或段落較短、較分散的時候,就需要一個統一的視覺起點。表單類對齊:讓用戶的視覺順著冒號的視覺流,就能找到所有填寫項,從而提高填寫效率。數字類對齊:為了快速對比數值大小、所有數值取相同有效位數,而且都是右對齊。如圖所示:(從前者到后者依次放圖)
對比主要分為主次關系、總分關系、狀態關系3大關系對比,前者為了讓用戶在操作上快速的做出判斷。來突出其中一項相對重要的操作。總分關系:通過調整排版、字體、大小等方式來突出層次感,區分總分關系,使得頁面更具張力、節奏感。后者則是通過改變顏色、增加輔助形狀等方法來實現狀態關系的對比,以便用戶更好的區分信息。狀態關系常見的類型有:靜態和動態對比。
如圖所示:(從主次到狀態關系排列)
關于重復就很簡單了,重復的元素可以是點、線、面等一些設計要素、格式、風格等等。只要是有規則的重復,又符合原則就可以。
說了那么多原則,下面就通過上面的這張圖來詳細講解。這張是關于交通的后臺網頁,先看最左邊灰色區域的板塊,在看每一條icon和對應的文字,從左到右看都是左右對齊的,除了首頁不一樣以外。親密度也布置很得當,從橫縱間距看給用戶的視覺影響不會覺得太緊密或太松散。字體的大小也很合適,而且1剛剛在每個板塊的中間位置。
然后最上方的黑色部分的矩形板塊,logo的布局和旁邊的名稱上下大小距離一樣,左右間距也是按照整個頁面的布局進行的,這樣就不會然人覺得有不規則的感覺。右邊的內容形成了一個信息的對比,通過一些紅色的形狀提示,使用戶能夠快速的查詢信息。因為紅色在各種色彩中吸引力是最強烈的。
如上圖部分,分成2個部分的板塊,一邊是字較多的部分和可視化圖表的部分,先看左邊的部分,都有這對齊、親密度、重復、對比的原則。從商品移庫、停售到損益管理形成了一個流程的一個排版。里面的箭頭符合和icon都重復排版布局。字體都以從左到右對齊,里面的內容是如此,整個管理也都是左右對比、對齊排版以突出重要性。
關于右邊的可視化圖表我就不詳細講解了,因為之前已經講解過了。只是對這些圖表在整個頁面講解較為突出的作用。從整個圖表來看,劃分為3大部分的圖表。雖然上面的曲線圖和以矩形里的數字來突出信息的圖表,有些視覺上的不一樣。但它們都是同一類型有著聯系關系的呼應。有著很相近的感覺;所以這樣劃分。
在這些圖表中就只是曲線圖、柱形圖的表達方式。還有矩形顏色填充突出的一些數據。但對于查詢和描繪信息和數據,這些圖表的作用,也已經體現在這個后臺網頁中了,給用戶視覺和實用價值上有這很大的效果就已經算是一個很不錯的后臺網頁了。至于內容方面之后還可以修改和完善。
最后總結:后臺網頁的制作和設計,是離不開這些必要的原則的,要想制作一個接近完美的后臺,就必須遵守原則,還有所謂現代化的實用價值。
總結
以上是生活随笔為你收集整理的关于后台网页设计的原则的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 从iReport到Jaspersoft
- 下一篇: VLAN笔记