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

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

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

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

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

視覺設(shè)計上，

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

紅字+藍底的頭圖：

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

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

整體布局也大同小異：

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

那么問題來了，

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

很多人肯定會說到領(lǐng)導(dǎo)的審美問題。

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

然而，

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

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

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

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

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

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

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

來看一張圖：

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

如果你覺得這些只是巧合，樣本量太小，不足以說明問題，那就大錯特錯了！

來看一張長圖：

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

有沒有打開一個新世界的感覺？

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

噓，一般人我不告訴他~

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

丑就不可以花里胡哨？

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

是不是視覺上的和交互上都得到不小的改進？

當然，上面寫這么多，并不只是為了吐槽，而是為了給大家來點干貨！

哈哈，想不到吧，干貨又一次禿如其來~

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

先來看看是哪個APP：

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

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

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

OK，下面我們先從視覺和交互兩方面來分析下，看下存在哪些問題。

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

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

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

色彩上，我選擇了明度比較中等的藍色，相比其它兩個藍色，既正式又顯得沒那么老氣。

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

OK，下面就來看具體怎么改。

首頁：

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

將重點信息提取出來，

提高操作效率。

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

顯得很友好。

功能列表欄目：

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

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

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

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

駕照頁：

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

看下大圖：

網(wǎng)辦進度頁：

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

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

針對每一條信息版塊來做重點優(yōu)化。

看出區(qū)別了嗎？

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

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

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

我們在做排版的時候一定要有相應(yīng)的意識，把重點信息與非重點信息區(qū)別開來，然后進行強弱強弱的節(jié)奏變化。

看下大圖：

其它頁面我就不改了，留著大家自己去動手。

最后，

簡單的做一個樣機展示效果：

不過話說回來，設(shè)計得那么好看，用戶會不會覺得這個是個騙子APP？

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

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