提到政府單位的網(wǎng)站，

相信不少人有過(guò)被它支配的恐懼吧！

它就像一張報(bào)紙一樣，密密麻麻全是字。顯眼位置的banner圖一般是領(lǐng)導(dǎo)在開會(huì)，信息資訊除了領(lǐng)導(dǎo)開會(huì)，剩下就是“xx市關(guān)于xx的文件”，沒(méi)一句聽得懂的人話。

跟普通老百姓相關(guān)的業(yè)務(wù)，一般藏在某個(gè)欄目下面的更多鏈接中，你就慢慢找吧，找到算我輸！

每次我打開政府單位的官網(wǎng)，如果在沒(méi)有指引的情況下能把事情搞定，都會(huì)有種莫大的成就感！忍不住在心中默念一句“牛逼~為自己打call!”

視覺設(shè)計(jì)上，

它們不但丑，還丑得很雷同。

紅字+藍(lán)底的頭圖：

這配色效果，就是一個(gè)字：沖(chòng)！

就連云彩+漸變的效果都一樣一樣的，要不是這些地方相隔十萬(wàn)八千里，我都要懷疑它們是出自同一人之手。

整體布局也大同小異：

這些網(wǎng)站就像是窯藏了15年的“古董”，濃濃的“復(fù)古感”撲面而來(lái)！

那么問(wèn)題來(lái)了，

是什么原因?qū)е铝怂鼈儾坏?，還丑得如此相似？

很多人肯定會(huì)說(shuō)到領(lǐng)導(dǎo)的審美問(wèn)題。

是的，領(lǐng)導(dǎo)的審美肯定在某種程度上決定了網(wǎng)站的審美基調(diào)。而領(lǐng)導(dǎo)都是體制中的勝利者，所以他們的做事風(fēng)格天生會(huì)偏向保守，在審美上肯定也一樣。不要說(shuō)等90后、00后當(dāng)了領(lǐng)導(dǎo)后，審美就會(huì)提上去。并不會(huì)，到時(shí)候只是會(huì)多了一批審美保守的90后、00后領(lǐng)導(dǎo)而已。

然而，

還有一個(gè)大家意想不到的因素，才是這些網(wǎng)站如此雷同的根本原因。

原來(lái)政府相關(guān)的網(wǎng)站是有著統(tǒng)一規(guī)范的！

《國(guó)務(wù)院辦公廳關(guān)于印發(fā)政府網(wǎng)站發(fā)展指引的通知》中，各種規(guī)范寫得十分詳細(xì)！具體到欄目怎么劃分，頁(yè)面風(fēng)格，甚至代碼怎么寫，都明文規(guī)定了！

關(guān)于網(wǎng)站的考核標(biāo)準(zhǔn)，就有十幾頁(yè)，只要一項(xiàng)不達(dá)標(biāo)項(xiàng)目就驗(yàn)收不了！在標(biāo)準(zhǔn)化的考核制度下，審美、創(chuàng)意算個(gè)毛線，先過(guò)稿再說(shuō)吧！

看下文件中的內(nèi)容：

制度所導(dǎo)致的審美標(biāo)準(zhǔn)化，也反映在了其它方面。

比如說(shuō)一些與市政相關(guān)的業(yè)務(wù)的LOGO設(shè)計(jì)中，也同樣存在著“丑得雷同”的情況。

來(lái)看一張圖：

上圖上列出來(lái)的是最近中標(biāo)的一些項(xiàng)目LOGO，可以看到大多是與政府相關(guān)的項(xiàng)目。雖然每一個(gè)LOGO形態(tài)各不相同，但是從設(shè)計(jì)手法上來(lái)說(shuō)，幾乎如出一轍！

如果你覺得這些只是巧合，樣本量太小，不足以說(shuō)明問(wèn)題，那就大錯(cuò)特錯(cuò)了！

來(lái)看一張長(zhǎng)圖：

雖然圖上面有一些民營(yíng)企業(yè)，但是大部分是政企事業(yè)相關(guān)的，可以看到他們的審美是如此的相似。

有沒(méi)有打開一個(gè)新世界的感覺？

腦子靈活的同學(xué)可能反應(yīng)過(guò)來(lái)了，這張圖簡(jiǎn)直是財(cái)富密碼??！以后政企相關(guān)行業(yè)的LOGO，全照這個(gè)風(fēng)格整，分分鐘過(guò)稿！

噓，一般人我不告訴他~

然后今天在朋友圈發(fā)了一下今晚的文章內(nèi)容預(yù)告，有同學(xué)說(shuō)，因?yàn)檎W(wǎng)站設(shè)計(jì)不喜歡花里胡哨，不知道這位同學(xué)說(shuō)的花里花哨是指什么？

丑就不可以花里胡哨？

看下12306的改版，告訴大家，政府的網(wǎng)站也可以設(shè)計(jì)得美觀好用的！

是不是視覺上的和交互上都得到不小的改進(jìn)？

當(dāng)然，上面寫這么多，并不只是為了吐槽，而是為了給大家來(lái)點(diǎn)干貨！

哈哈，想不到吧，干貨又一次禿如其來(lái)~

前面我們吐槽了這么多政府官網(wǎng)，下面我們就以為一個(gè)政府APP為例，看看要怎么優(yōu)化，才能讓它徹底擺脫“官方出品”的老舊氣質(zhì)。

先來(lái)看看是哪個(gè)APP：

交管12123，公安部官方出品。

開車的同學(xué)應(yīng)該都用過(guò)，不管你在哪里違章都能在線處理，并且免手續(xù)費(fèi)，功能上真的沒(méi)得說(shuō)，司機(jī)必備神器。

盡管功能強(qiáng)大，然而APP store中的評(píng)分并不高。之所以這么多差評(píng)，除了穩(wěn)定性之外，UI風(fēng)格老舊，以及交互邏輯上的混亂也有很大關(guān)系。

OK，下面我們先從視覺和交互兩方面來(lái)分析下，看下存在哪些問(wèn)題。

原圖是典型的“菜單式”設(shè)計(jì)，將各種功能堆上去，完全不管操作效率以及用戶使用習(xí)慣。

好的"菜單"更有讓人下單的欲望，對(duì)應(yīng)到APP的設(shè)計(jì)，優(yōu)秀的信息排版，也更讓人有使用的欲望。所以在信息的編排上要有強(qiáng)有弱，讓整個(gè)頁(yè)面看起來(lái)有運(yùn)營(yíng)感。

在視覺風(fēng)格上，由于官方的屬性，所以肯定要突出正式感。

色彩上，我選擇了明度比較中等的藍(lán)色，相比其它兩個(gè)藍(lán)色，既正式又顯得沒(méi)那么老氣。

信息貼片的設(shè)計(jì)上，則選用了小圓角，相對(duì)于原圖的直角會(huì)顯得更加精致和有親和力。

OK，下面就來(lái)看具體怎么改。

首頁(yè)：

按用戶使用習(xí)慣，我將首屏的信息重新梳理，分成車輛與駕照兩大類，然后將與個(gè)人相關(guān)的信息著重凸顯。

將重點(diǎn)信息提取出來(lái)，

提高操作效率。

同時(shí)強(qiáng)調(diào)了平臺(tái)與“我”的關(guān)聯(lián)度，

顯得很友好。

功能列表欄目：

優(yōu)化圖標(biāo)風(fēng)格，去掉無(wú)關(guān)細(xì)節(jié)，讓圖標(biāo)的表義更清晰。

資訊和服務(wù)兩個(gè)欄目，以優(yōu)化排版為主。

手機(jī)端的文字排版，一定要注意信息的密度。文字太密很容易讓人失去閱讀欲望，寧愿讓用戶多劃一下屏，也不要在一屏里塞下太多內(nèi)容。

好了，最后看下優(yōu)化后的大圖：

駕照頁(yè)：

這頁(yè)沒(méi)什么操作性的內(nèi)容，以信息展示為主，所以在排版上可以適當(dāng)添加一些裝飾性的元素，增強(qiáng)一下頁(yè)面的設(shè)計(jì)感。

看下大圖：

網(wǎng)辦進(jìn)度頁(yè)：

這一頁(yè)可以給大家演示一下，復(fù)雜的純文字的表格如何排版。

先看看原圖的設(shè)計(jì)。

針對(duì)每一條信息版塊來(lái)做重點(diǎn)優(yōu)化。

看出區(qū)別了嗎？

改完之后不僅僅是好看了，更重要的是，信息的層次感更清晰了。

下面教大家一個(gè)文字排版的小訣竅。

其實(shí)文字排版就和音樂(lè)一樣，是有“動(dòng)次打次”節(jié)奏的。

我們?cè)谧雠虐娴臅r(shí)候一定要有相應(yīng)的意識(shí)，把重點(diǎn)信息與非重點(diǎn)信息區(qū)別開來(lái)，然后進(jìn)行強(qiáng)弱強(qiáng)弱的節(jié)奏變化。

看下大圖：

其它頁(yè)面我就不改了，留著大家自己去動(dòng)手。

最后，

簡(jiǎn)單的做一個(gè)樣機(jī)展示效果：

不過(guò)話說(shuō)回來(lái)，設(shè)計(jì)得那么好看，用戶會(huì)不會(huì)覺得這個(gè)是個(gè)騙子APP？

畢竟醫(yī)院網(wǎng)站就是越好看越是騙子網(wǎng)站。

哎，不說(shuō)了，去TM的漂亮設(shè)計(jì)。。