河南城建學(xué)院校園網(wǎng)主頁(yè)設(shè)計(jì)

1、河南城建學(xué)院校園網(wǎng)主頁(yè)設(shè)計(jì)最頂端logo，搜索欄Tille新聞滾動(dòng)模塊新聞列表模塊微博，分享模塊學(xué)校宣傳視頻、公告、校訓(xùn)展覽模塊最底部版權(quán)、聯(lián)系方式已經(jīng)校內(nèi)其他功能快捷入口主頁(yè)展示介紹主頁(yè)展示介紹 頁(yè)面全部使用 思源黑體 CN Medium，這種字體在國(guó)外很多網(wǎng)站以及國(guó)內(nèi)一些知名網(wǎng)站經(jīng)常使用。其特點(diǎn)是字體看起來(lái)圓滑，渾厚，在小字體下也能保持一定的清晰度，整體看起來(lái)會(huì)很舒適。 主頁(yè)設(shè)計(jì)中，大多參考了國(guó)外大學(xué)的主設(shè)計(jì)。國(guó)外的網(wǎng)頁(yè)特點(diǎn)是空間利用率高，可操作強(qiáng)，圖片，字體上使用十分大氣，其中最引人注目的就是顏色的搭配。 所以我的設(shè)計(jì)里，首先就想到了，藍(lán)加一點(diǎn)白的顏色做主要顏色。一方面配合了學(xué)校的log

2、o顏色，另一方面看起來(lái)比較舒適不亮不暗，很溫和。 接下來(lái)的模塊布局，十分謹(jǐn)慎，不緊不寬讓每個(gè)模塊都很好地體現(xiàn)出來(lái)，沒(méi)有帶來(lái)緊湊的感覺(jué)，這樣子整個(gè)頁(yè)面看起來(lái)很干凈，整齊。主頁(yè)展示介紹 但要給人完美的第一印象還是需要把展示的內(nèi)容完美的體現(xiàn)出來(lái)。 新聞滾動(dòng)模塊，把學(xué)校的特色活動(dòng)新聞，大圖片華麗的展示出來(lái)，一方面給人視覺(jué)上的沖擊，直接領(lǐng)會(huì)到學(xué)校的特色中來(lái)。另一方面給予了新聞傳播的很好渠道。但這部分對(duì)攝影師照相要求很高，目前本人感覺(jué)目前新聞?wù)掌](méi)有達(dá)到比較完美的地步。（插入例圖經(jīng)過(guò)ps處理） 瀏覽者進(jìn)入校園網(wǎng)，對(duì)新生來(lái)講就是了解學(xué)校，教師和在校學(xué)生就是瀏覽新聞公告。所以我把新聞列表放在 新聞滾動(dòng)模塊

3、下方。這樣一來(lái)瀏覽者首先就能很清晰的看到學(xué)校的近期動(dòng)態(tài)，對(duì)學(xué)校的大致特色有了一定的了解。主頁(yè)展示介紹 再接下來(lái)是微博的模塊?，F(xiàn)在學(xué)校對(duì)微博的宣傳十分重視，這一模塊建立可以更方便的宣傳學(xué)校微博，同時(shí)分享，十分快捷方便。 然后是學(xué)校的宣傳視頻和公告校訓(xùn)。這三個(gè)模塊的設(shè)計(jì)重點(diǎn)在視頻上。位置靠下偏左，這個(gè)位置特點(diǎn)是，根據(jù)人們喜歡從左往右讀，那么視頻會(huì)比較容易優(yōu)先看到。這么一來(lái)瀏覽者的瀏覽的時(shí)候會(huì)很容易看到，而且不大不小，不會(huì)令人看著我們很流氓試的宣傳視頻。 中間的公告會(huì)稍顯突出，這樣的列表設(shè)計(jì)能比較清晰的看到每個(gè)公告，不至于因?yàn)楣鎯?nèi)容太多，而產(chǎn)生眼睛疲勞。 最右側(cè)的校訓(xùn)與視頻一左一右，較為對(duì)稱，這么

4、一來(lái)整個(gè)布局就比較規(guī)范，中間是校內(nèi)事務(wù)，兩邊是學(xué)校概述宣傳，美觀不影響瀏覽主頁(yè)展示介紹 最后底部的設(shè)計(jì)用了一定的底色稍微與前面區(qū)分開(kāi)來(lái)。 這里填寫上一定的學(xué)校聯(lián)系方式，版權(quán)等，符合大眾網(wǎng)站的習(xí)慣。而右側(cè)的辦公系統(tǒng)等是合理利用空間將校內(nèi)或校外的鏈接充分展示出來(lái)。文章列表頁(yè)介紹 文章列表的好壞影響到瀏覽者獲取信息多少。所以每篇文章之間采取一定的間隔，并且附上一定的圖片使瀏覽器者更快的了解到此類新聞或者文章的大致內(nèi)容。 這樣的設(shè)計(jì)并不常見(jiàn)。因?yàn)閷?duì)于無(wú)圖文章或者新聞比較難于排版，同時(shí)對(duì)于撰寫者文筆要求十分高。 所以這類的文章列表我暫時(shí)只用在了學(xué)校介紹這一塊里。優(yōu)先把這里美化達(dá)到極致。 右側(cè)的內(nèi)容，把學(xué)校的很重要的特色部分給展示出來(lái)。這么做的好處是給予瀏覽者更快，更好的了解到學(xué)校。重點(diǎn)在快。任何繁瑣的步驟都會(huì)引起人們的反感，所以必不可少。正文展示頁(yè)介紹 這里設(shè)計(jì)的是新聞以及公告正文，個(gè)人想法是這種設(shè)計(jì)籠蓋所有文章展示的方式。 正文沒(méi)什么特別之處，主要在于照片展示這一塊。目前學(xué)校新聞?wù)膶⒑芏嗾掌淮蠖训恼故驹谡那懊?。這樣一來(lái)讓新聞內(nèi)容的吸收率大大降低。不僅花費(fèi)大量的空間，還增加了瀏覽者諸多無(wú)意義的操作。這樣的設(shè)計(jì)在很多知名新聞網(wǎng)上出現(xiàn)，有趣，簡(jiǎn)潔，方便，能讓瀏覽者閱讀新聞的同時(shí)，自己更快捷的尋找自己想看的新聞圖片。 最下方的分享給予