400-611-9921
2015-12-17
3982
編者按:對(duì)大多數(shù)國(guó)內(nèi)的政務(wù)網(wǎng)站,同學(xué)們的印象可能還以停留在大紅大黃的配色和雜亂無(wú)章的版面,不過(guò)今天@三島維諾 同學(xué)給政務(wù)網(wǎng)站來(lái)了一個(gè)徹底的改頭換面,氣質(zhì)立刻大漲。你可以學(xué)習(xí)到他重設(shè)計(jì)過(guò)程中的思路,非常務(wù)實(shí)的干貨呦。
@三島維諾 :政務(wù)網(wǎng)站(特別是中國(guó))給人的印象都不佳,WEB1.0、大紅大黃、內(nèi)容空洞、幾年不更新等等。
之前看過(guò)一些國(guó)外的政務(wù)網(wǎng)站推薦,比如白宮、美國(guó)空軍等等,一直收藏在書(shū)簽里(盼著以后能出去….),不久前設(shè)計(jì)圈出了幾個(gè)很火的重設(shè)計(jì),比如大眾官網(wǎng)重設(shè)計(jì)、亞馬遜重設(shè)計(jì)、IMDB重設(shè)計(jì)等等,我很受啟發(fā),正好這段時(shí)間領(lǐng)導(dǎo)要求給tcsasac.com做一個(gè)首頁(yè)改版,我就按著國(guó)外重設(shè)計(jì)的概念來(lái)做了。
中國(guó)的政務(wù)網(wǎng)站還是有一些思維限制的,之前有人說(shuō)做成國(guó)外公司官網(wǎng)那種高大上,其實(shí)不現(xiàn)實(shí),我們做重設(shè)計(jì),最終的目的還是要讓我們做出來(lái)的東西不論是在視覺(jué)上還是在易用性上都要比原來(lái)的好,不能說(shuō)為了美觀潮流而把實(shí)用性給丟掉。
比如tcsasac是一個(gè)國(guó)資委體系內(nèi)的干部教育培訓(xùn)網(wǎng),用戶(hù)群體很單一,就是那些央企內(nèi)部的領(lǐng)導(dǎo)干部,再怎么也是科級(jí)以上了,35歲-50歲的人,而且權(quán)重隨著年齡的增大而增加,領(lǐng)導(dǎo)也是人。。。所以我們要考慮他們的使用習(xí)慣。
做重設(shè)計(jì)之前我決定瀏覽一遍國(guó)內(nèi)的重點(diǎn)政務(wù)網(wǎng)站,從人民政府網(wǎng)開(kāi)始,看完了所有的部委網(wǎng)站和一部分省級(jí)政府官網(wǎng)??赐旰笙矐n(yōu)參半,傳統(tǒng)的網(wǎng)站有不少,就是大家印象中的矮丑搓政府網(wǎng)站,占到2/3吧,但是有幾個(gè)網(wǎng)站很不錯(cuò),甚至是棒極了(以體系內(nèi)的角度來(lái)看)。
首先說(shuō)說(shuō)人民政府網(wǎng)(http://www.gov.cn),這個(gè)是所有政府網(wǎng)站的BOSS了,大家可以點(diǎn)進(jìn)去看看,藍(lán)色、簡(jiǎn)潔的風(fēng)格,感覺(jué)很清新,當(dāng)然頭部有點(diǎn)粗糙了,一點(diǎn)都不像是大國(guó)的中央政府官網(wǎng),但是作為一個(gè)BOSS,放棄了大紅大黃,去探索新的東西,本身就是一件很進(jìn)步的事情。
再說(shuō)說(shuō)一個(gè)不錯(cuò)的政府網(wǎng)站——發(fā)改委的官網(wǎng)(http://www.sdpc.gov.cn),大家用心體會(huì)一下,這個(gè)網(wǎng)站把發(fā)改委官網(wǎng)的職能基本上都發(fā)揮出來(lái)了,有新聞通知、政務(wù)查詢(xún)、政策發(fā)布、文件資料下載等等,內(nèi)容很多但是不亂,給人的感覺(jué)是很整齊,也很權(quán)威,當(dāng)然也有一些需要改進(jìn)的地方,比如UI不是很精細(xì),網(wǎng)站首屏比下面復(fù)雜造成頭重腳輕等等。
最后說(shuō)一個(gè)我覺(jué)得驚艷的政府網(wǎng)站——湖南省人民政府(http://www.hunan.gov.cn),我的老家了,有沒(méi)有感覺(jué)很舒服,很清新,特別是這個(gè)“湖南夢(mèng)”的banner看得我瞬間領(lǐng)悟了banner的訣竅。雖然看起來(lái)很簡(jiǎn)潔,其實(shí)這個(gè)網(wǎng)站很復(fù)雜,路勁很多,大家可以走走看,很多頁(yè)面都非常不錯(cuò),看完這個(gè)網(wǎng)站,我真的覺(jué)得政務(wù)網(wǎng)站不是沒(méi)有前景,還是有很多人是想改變的,想嘗試變好的。
還有幾個(gè)比較有特色的網(wǎng)站就不細(xì)說(shuō)了,大家可以自己看看:海關(guān)總署(http://www.customs.gov.cn)、國(guó)家民委(http://www.seac.gov.cn)。
政府網(wǎng)站為什么這么丑,原因很多人不一定看得清楚,我在做重設(shè)計(jì)的時(shí)候找出了一些因素,跟大家分享分享。
一、風(fēng)格基調(diào)
大紅大黃是革命傳統(tǒng),這個(gè)是沒(méi)辦法的事情,設(shè)計(jì)師改不了,領(lǐng)導(dǎo)也沒(méi)辦法,當(dāng)然也有例外,這個(gè)就要看情況了。大紅大黃并不見(jiàn)得一定會(huì)丑,但是把大紅大黃當(dāng)做背景色來(lái)處理,就基本上必丑無(wú)疑了,因?yàn)樘y處理,如果再加上華表、紅旗、人民大會(huì)堂,你就隨便弄弄吧。
二、用戶(hù)使用習(xí)慣
不見(jiàn)得每一個(gè)上政府網(wǎng)站的用戶(hù)都是中老年人,也不見(jiàn)得每一個(gè)中老年人都不喜歡潮流,但是你要他們來(lái)遷就你的設(shè)計(jì)思維那就不對(duì)了,中老年人都很忙,真的,領(lǐng)導(dǎo)干部也是人,越是大領(lǐng)導(dǎo)越是時(shí)間少,事情很多,你要他們看網(wǎng)站的時(shí)候等一個(gè)Loading、看一段動(dòng)畫(huà)、切一個(gè)特效,你覺(jué)得合適嗎?政務(wù)網(wǎng)站也不是SNS,沒(méi)事大家不會(huì)上來(lái)看的,來(lái)了一般都是大事急事,所以設(shè)計(jì)師能夠做到多簡(jiǎn)潔實(shí)用就要做到多簡(jiǎn)潔實(shí)用。
三、劣質(zhì)素材
這一點(diǎn)很多很多都不太清楚,我在做重設(shè)計(jì)的時(shí)候,很受這一條限制。主要是兩個(gè)方面,一是文字,文字太長(zhǎng),太復(fù)雜。比如我們網(wǎng)站上的一個(gè)培訓(xùn)班的名稱(chēng)“企業(yè)經(jīng)營(yíng)管理人才素質(zhì)提升工程——浙江大學(xué)管理學(xué)院——巴黎HEC商學(xué)院2014年高級(jí)管理人員工商管理碩士(EMBA)班”,你們告訴我怎么放?比如一條新聞的標(biāo)題“企業(yè)經(jīng)營(yíng)管理人才素質(zhì)提升工程 ——企業(yè)領(lǐng)軍人才培訓(xùn)班(第二期)圓滿(mǎn)結(jié)束”。文字太長(zhǎng),而且不能刪字(的確不能刪,不見(jiàn)得是領(lǐng)導(dǎo)壓力,很多時(shí)候刪了字內(nèi)容就變味了)。二是圖片,大家可以去看看各大部委網(wǎng)站,圖片拍得太次了,光線黑、角度太刁鉆,根本就不能放大圖看,這也是為什么政府網(wǎng)站一般都把輪播圖放的很小的原因,不是不能放大,放首頁(yè)第一屏全屏,而是放上去了會(huì)讓訪客瞬間有關(guān)掉網(wǎng)站的念頭。素材的劣質(zhì)使得設(shè)計(jì)師和編輯工作難度很大。
四、領(lǐng)導(dǎo)的偏好
這一點(diǎn)大家都懂了,比如某些領(lǐng)導(dǎo)喜歡方塊、有些喜歡橢圓、還有的喜歡三角形,沒(méi)辦法的。
說(shuō)了這么多,回歸主題,我來(lái)說(shuō)說(shuō)我的重設(shè)計(jì)。
先來(lái)看看本尊,這是前任的作品,那時(shí)候還沒(méi)來(lái),不了解情況。
這一次重設(shè)計(jì)帶有半概念性質(zhì),也就是說(shuō)領(lǐng)導(dǎo)要是喜歡,那就可能換,要是不喜歡,就不要再提此事。
網(wǎng)站改版是為了改善內(nèi)容分布邏輯(優(yōu)勝劣汰)以及視覺(jué)體驗(yàn),內(nèi)容上的變動(dòng)就不細(xì)說(shuō)了,比較忌諱,視覺(jué)上的話(huà)主要是解決閱讀舒適性的問(wèn)題,一來(lái)文字顯示要齊全,哪怕40個(gè)字的標(biāo)題,也要把它顯示出來(lái),二要加入一些圖片化的東西,不要看起來(lái)干巴巴的全是文字。
內(nèi)容的設(shè)置就不說(shuō)了,我自己根據(jù)業(yè)務(wù)權(quán)重來(lái)劃分的,視覺(jué)上我主要是采用了另一種風(fēng)格——把大紅大黃這種象征性的元素用點(diǎn)綴的形式體現(xiàn),而不是用做背景(從湖南人民政府官網(wǎng)那里學(xué)的)。
細(xì)節(jié)元素用的是積累的素材庫(kù),其實(shí)這里我想說(shuō),素材不要盲目積累,以前我收集了很多亂七八糟的素材,有很多好東西,但是我沒(méi)有分類(lèi),所以就是一堆廢物,后來(lái)還刪掉了,然后去淘寶花了1塊錢(qián)買(mǎi)了一個(gè)還過(guò)得去的素材包,一直用到現(xiàn)在??傊?,素材不在多,有幾百M(fèi)精致的就行,顏色樣式都是可以自己換的,有個(gè)幾套UI Kit就夠了,重點(diǎn)是多看看其他的網(wǎng)站是怎么設(shè)計(jì)的,看他的理念,不要看只看UI元素,當(dāng)你掌握了理念,你用最差的素材也能做出好東西。
具體說(shuō)說(shuō)重設(shè)計(jì),頭部我是從發(fā)改委那里學(xué)來(lái)的,紅色的效果我甚至覺(jué)得比發(fā)改委本身還好看,簡(jiǎn)潔大方。
導(dǎo)航欄就隨便從一個(gè)素材庫(kù)弄了一個(gè),沒(méi)什么好說(shuō)的,簡(jiǎn)單清晰即可,別弄得花里胡哨,導(dǎo)航欄是用來(lái)導(dǎo)航的。
輪播圖我比較喜歡標(biāo)題的擺放,夠長(zhǎng),60字的標(biāo)題也能放,只是大圖顯示對(duì)以后修圖的工作有點(diǎn)擔(dān)心。
培訓(xùn)信息是本網(wǎng)站特有的內(nèi)容,前面已經(jīng)提到過(guò)了那個(gè)Bug般長(zhǎng)度的培訓(xùn)班了,關(guān)鍵是要把名字顯示齊全,我就參考了蘋(píng)果上的一個(gè)表單,感覺(jué)還不錯(cuò)。
接下來(lái)的教育培訓(xùn)是大雜燴了,內(nèi)容比較雜,但是有比較重要,一個(gè)個(gè)堆著放不合適,那索性就合并成一個(gè)模塊,參考的是發(fā)改委官網(wǎng)。
新聞中心
學(xué)習(xí)平臺(tái)
這個(gè)banner是不是很眼熟。。。沒(méi)錯(cuò),是湖南人民政府網(wǎng)的,太喜歡它了,政務(wù)banner必備樣式啊,banner右邊給出了廣告進(jìn)入的通道。
工作動(dòng)態(tài)不是很滿(mǎn)意,時(shí)間比較緊,這一部分主要是從豆瓣日記和什么值得買(mǎi)那里獲得的靈感。
企業(yè)分站沒(méi)什么好說(shuō)的了,這種風(fēng)格大家從優(yōu)設(shè)上也看膩了。
機(jī)構(gòu)鏈接自己畫(huà)的。。。本來(lái)想?yún)⒖柬n國(guó)首爾政府的官網(wǎng),但是不是太合適,這里貼出來(lái)給大家參考。
最后是屁股了,也是用的紅底白字,算是語(yǔ)文課中的首尾呼應(yīng)吧。
總結(jié)經(jīng)驗(yàn):
1、做重設(shè)計(jì)是一件很開(kāi)心的事情,如果你有時(shí)間,就動(dòng)手吧,用不了1個(gè)月,幾天甚至1天就夠了,視情況而定,至于目標(biāo),其實(shí)有很多好目標(biāo)(真要感謝自己在中國(guó)),比如58同城這種,急需好的重設(shè)計(jì)。
2、我建議大家做重設(shè)計(jì)的時(shí)候一定要站到網(wǎng)站所有者的角度看問(wèn)題,要考慮用戶(hù)人群偏好、改版限制條件、網(wǎng)站定位、以后的發(fā)展規(guī)劃等等,我覺(jué)得不要為了重設(shè)計(jì)而重設(shè)計(jì),不要只考慮自己的視覺(jué)習(xí)慣,比如政府網(wǎng)站設(shè)計(jì)你就不能說(shuō)標(biāo)題太長(zhǎng)我刪掉一半,如果你能把別人想不到的因素都做好,那就是一個(gè)頂好的重設(shè)計(jì)。
3、哪怕做的不好,自己開(kāi)心就行,這個(gè)重設(shè)計(jì)我知道是什么斤兩,抄了不少東西沒(méi)事,被嘲諷也沒(méi)事,自己開(kāi)心也是好的回報(bào)。
4、拿出來(lái)分享,聽(tīng)聽(tīng)別人的意見(jiàn),對(duì)意見(jiàn)揚(yáng)棄,優(yōu)設(shè)是一個(gè)不錯(cuò)的渠道,2年間我從上面學(xué)到了很多東西。
關(guān)于作者,本科學(xué)金融,自覺(jué)沒(méi)戲,大四下學(xué)期自學(xué)互聯(lián)網(wǎng),包括PS,然后在優(yōu)設(shè)等設(shè)計(jì)及產(chǎn)品博客潛水2年,做了無(wú)數(shù)亂七八糟的東西,現(xiàn)在做臨時(shí)工。
PS:
1、不要受限于專(zhuān)業(yè),何時(shí)學(xué)都不晚,現(xiàn)在互聯(lián)網(wǎng)資源開(kāi)放,是頂好的自學(xué)時(shí)代,免費(fèi)的文學(xué)、音樂(lè)、美術(shù)、電影資源取之不盡、用之不竭,別打LOL了,對(duì)于真正寶貴的資源,你的時(shí)間不多。
2、不見(jiàn)得要有物質(zhì)回報(bào),自己開(kāi)心是最好的回報(bào)。
3、求設(shè)計(jì)師妹子交往…
本文來(lái)源專(zhuān)注廣州網(wǎng)站建設(shè)公司與廣州高端網(wǎng)站設(shè)計(jì)制作公司,品牌網(wǎng)站建設(shè)公司-縱天科技!
關(guān)注我們:在查找公眾號(hào)中搜索:zomsky1688,或者掃描下方二維碼快速關(guān)注。
關(guān)鍵詞:縱天,廣州網(wǎng)站建設(shè),廣州網(wǎng)頁(yè)設(shè)計(jì),廣州網(wǎng)站設(shè)計(jì),廣州網(wǎng)站建設(shè)公司,廣州網(wǎng)頁(yè)設(shè)計(jì)公司,廣州網(wǎng)站設(shè)計(jì)公司,移動(dòng)網(wǎng)站建設(shè),高端網(wǎng)站建設(shè)
400-611-9921
020-29860991
地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場(chǎng)16F
業(yè)務(wù) QQ: 3561401262
E-mail: sales@zomsky.com
立即與縱天項(xiàng)目顧問(wèn)通話(huà)
400-611-9921
您也可以咨詢(xún)我們的在線客服或預(yù)約資深顧問(wèn)