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

一、首頁內(nèi)容大致分類

1、導航欄

2、圖片展播

3、小欄目組們

4、文章列表

5、ENDING信息

二、板塊排布的適當調(diào)整

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

1、文章列表

天朝政府網(wǎng)

天朝中央紀委監(jiān)察部網(wǎng)站

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

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

2、小欄目組們

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

三、實例分析

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

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

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

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

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

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)站名稱：網(wǎng)站首頁設(shè)計整體性之內(nèi)容架構(gòu)
文章轉(zhuǎn)載：http://www.js-pz168.com/news19/313969.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站內(nèi)鏈、定制開發(fā)、企業(yè)網(wǎng)站制作、小程序開發(fā)、靜態(tài)網(wǎng)站

廣告

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