最近是在做研招辦宣傳的一個頁面，而自己也是在這邊遇到了設計的瓶頸。之前的設計似乎都是在無意識的拼湊，都是靠運氣。正好湊得上，就過，湊不上， 就改，接著湊，自己也沒有想過一些設計的細節與方法，在這里整理 一下一些思路，希望自己可以借此開竅一下，也督促自己繼續學習，然后就是繼續改那個稿。

一、首頁內容大致分類

1、導航欄

2、圖片展播

3、小欄目組們

4、文章列表

5、ENDING信息

二、板塊排布的適當調整

為了體現整體性，往往需要在設計中稍微“畫蛇添足”，也就是多些修飾。既保證此板塊與其他板塊相區分，同時也保證板塊內部的整體性與整個網頁設計的融合性以及板塊內容的合理性。下面就以文章列表與小欄目組為例，看他們是怎樣的適當調整。

1、文章列表

天朝政府網

天朝中央紀委監察部網站

之前截圖但已然忘記來源的一塊。。。

由于前面兩個都是政府門戶網站，以新聞內容為主，所以第三個看不懂的文章列表設計風格看起來很閑情逸致。文章列表最中流砥柱的當然也就是一個可以點擊的文章標題而已，那其余的就都是修飾，所以修飾有哪些呢?日期、文字前的小圓點、“更多”、被重點推出的標題以及其附帶的一段灰色內容概要，選區被選中時的修飾效果，有些還會附加一張圖…………

2、小欄目組們

小欄目組的適當調整要考慮欄目個數以及欄目的分類，有些是橫著排列在頁面中，有些事側邊豎下來一列，這個大概位置在需求文檔中客戶會大概的分布好，但有時客戶分布地不合理，或者出于設計合理性，可以適當調整位置，只要最終這樣的分類不影響網頁體驗。欄目的設計中很容易出現整體性的問題，小欄目組成的小整體，還有整個快速入口與整個頁面內容排布的整體性。這一點在最后的實例中會有淋漓盡致的體現。。。。。總之相同的內容分布怎樣設計版式，上面三個一橫排，下面的欄目就分成四塊，這樣欄目之間上下就是錯位的，并不是排排站的，這樣可以增強整體性。總而言之就是要錯落有致，就像瀑布流的設計一樣，方塊之間不是對齊完全一樣的。

三、實例分析

在這里先PO一個由分裂逐漸走向整體的設計過程，大家輕噴。。。。。。

這個就是傳說中的排排站，沒有“錯落有致”，導致了分割

上面的三個欄目被一個灰色背景框了起來，但還是缺乏整體性

文章列表的設計形式變化了，但設計重復;“招考快訊”旁邊的三個圖標移到了下方，版式排布豐富了;“院系介紹”等三個橙色的方塊上多了小三角，使上下內容(上面的粉色介紹性文字與下面的橙色圖標)聯系緊密了，并且“院系介紹”中文下多了英文;“熱點外鏈”移了位置，但缺乏設計感

將本來的兩部分欄目做了合理的調整，兩個介紹單獨放在了一起，但涉及效果好像是兩個標簽，與下面的“數據統計”聯系了起來，要重新考慮一下設計;"數據統計"板塊本身整體性有待增強;四個快速入口鏈接圖標顏色與網頁整體的跳躍色調有些不符;“熱點外鏈”的這種設計形式在扁平化風行的現在很普遍。

本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司！

網站名稱：網站首頁設計整體性之內容架構
文章轉載：http://vcdvsql.cn/news19/313969.html

成都網站建設公司_創新互聯，為您提供網站改版、網站內鏈、定制開發、企業網站制作、小程序開發、靜態網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯