引言：莎士比亞有一句名言：一千個人心中有一千個哈姆雷特，作為企業(yè)形象窗口的官方網(wǎng)站，它的鏡子效應(yīng)更是非常顯現(xiàn)，碎片化意見顯得更為豐富多樣。官網(wǎng)的全新改版往往是牽一發(fā)而動全身，不僅影響著用戶，更影響著企業(yè)本身，如何能夠在有效的延續(xù)新網(wǎng)創(chuàng)想連續(xù)13年高速成長的品牌基因，整合來自內(nèi)外部的需求與碎片化意見，并以未來計，能夠兼容未來網(wǎng)頁設(shè)計趨勢與用戶服務(wù)，如此種種，都是本次改版的重中之重。

根據(jù)上圖馬斯洛需求層次理論，安全需求、社交需求往往是用戶關(guān)注的特征點(diǎn)，基于此，并在結(jié)合對官網(wǎng)內(nèi)外部訪問用戶的調(diào)研，官網(wǎng)改版將具體落實到以下3個維度進(jìn)行推進(jìn)。

一、品牌基因的傳承

新網(wǎng)創(chuàng)想品牌基因中包含了正直、奮進(jìn)、善群、質(zhì)樸、虛懷、性堅、奉獻(xiàn)、卓爾、擔(dān)當(dāng)?shù)刃戮W(wǎng)創(chuàng)想的文化特征，在新版官網(wǎng)設(shè)計過程中，項目組多次討論，同時聽取了新網(wǎng)創(chuàng)想VI設(shè)計單位品牌專家的意見，期望在網(wǎng)頁的每個細(xì)節(jié)中融入這些內(nèi)容，凸顯新網(wǎng)創(chuàng)想大氣穩(wěn)重而又不失活力、整體簡潔而又細(xì)節(jié)到位的蘊(yùn)涵，表達(dá)出新網(wǎng)創(chuàng)想專業(yè)的品質(zhì)與用心的服務(wù)。

1、色彩方面

色彩是品牌沖擊力非常有效的表征，新網(wǎng)創(chuàng)想從誕生至今，藍(lán)色已成為新網(wǎng)創(chuàng)想品牌的形象說明符，色彩的延續(xù)便是對品牌的體現(xiàn)，在新版設(shè)計中，官網(wǎng)以穩(wěn)重、科技感強(qiáng)的藍(lán)色調(diào)為主，搭配醒目、簡潔有力的白色，藍(lán)白色彩的使用比例巧妙協(xié)調(diào)，示例：

2、輔助形象

輔助形象的引用在新版的官網(wǎng)設(shè)計中，是一個新穎亮點(diǎn)，但在設(shè)計過程中如何融入這個元素卻需要非常慎重，輔助形象使用的范圍太廣，將會影響網(wǎng)站整體的風(fēng)格，造成混亂，喧賓奪主。最終根據(jù)新網(wǎng)創(chuàng)想VI專家的意見，在網(wǎng)站banner及其各欄目中的圖片設(shè)計中植入扁平化形象。

3、設(shè)計元素，少即是多

設(shè)計元素：“少即是多”是品牌營銷過程中往往需要表達(dá)的印象，同時也是網(wǎng)頁設(shè)計的最新理念，在新版的設(shè)計過程中，設(shè)計團(tuán)隊吸取了這個理念，所有頁面保持“用最少的元素來實現(xiàn)最純粹的表達(dá)”，將單純簡潔的色彩作為主要元素，在面積與構(gòu)成中，側(cè)重留白和空間感。以榮譽(yù)資質(zhì)為例，通過大幅情景圖片+簡潔的布局來展現(xiàn)企業(yè)的歷史沉淀，同時在空間感上沖擊力更強(qiáng)，更能提升新網(wǎng)創(chuàng)想的品牌形象，引人入勝。

二、網(wǎng)站初體驗與潮流設(shè)計

首頁的作用是彰顯品牌，彰顯企業(yè)的整體風(fēng)格，是網(wǎng)站的新聞發(fā)言人！代表了網(wǎng)站乃至企業(yè)的性格。所以下面用首頁的交互設(shè)計思路來說明集團(tuán)官網(wǎng)整體設(shè)計的核心理念。

1、首頁交互核心：給我選擇or幫我選擇？

在用戶面前，如何把新網(wǎng)創(chuàng)想豐富精彩的資訊用合理的、有效的交互策略展現(xiàn)給用戶，并直接轉(zhuǎn)化為點(diǎn)擊，是站點(diǎn)設(shè)計過程中首先需要考慮的問題。與媒體等其他網(wǎng)站不同，企業(yè)網(wǎng)站在信息呈現(xiàn)層次方面是單一的，不會像媒體那樣多元化，那樣復(fù)雜，企業(yè)網(wǎng)站有其獨(dú)特的用戶瀏覽習(xí)慣。

大家選擇時考慮的維度主要集中在幾個方面：

1）用戶進(jìn)入首頁的場景（需求）；

2）瀏覽習(xí)慣；

3）視覺層面的沖擊力；

具體來看兩種頁面布局策略：

A方案：幫我選擇，強(qiáng)烈突出推薦主題內(nèi)容；

B方案：給我選擇，盡量多呈現(xiàn)不同內(nèi)容；

項目組在討論了方案AB之后，最終選擇了A方案：方案A從商業(yè)化考慮的話，重點(diǎn)banner的廣告因素更加突出，將用戶的注意點(diǎn)全部吸引到這個大banner，增加運(yùn)營ROI，同時也更能拓展多元化廣告。從用戶體驗考慮的話，專欄化，大banner的交互設(shè)計思路，能夠有效聚焦用戶關(guān)注，不會分散用戶注意力，從而能夠激發(fā)用戶的點(diǎn)擊，體驗更流暢，減少客戶的選擇恐懼，同時由于大banner的設(shè)計，設(shè)計，文案的創(chuàng)意空間大幅提升，很好的提升了用戶視覺體驗。

下面通過點(diǎn)擊熱圖，再確認(rèn)下A方案的合理性，企業(yè)網(wǎng)站相對于媒體網(wǎng)站來講，資訊相對較少，更少下拉頁面，因此首屏資源展示更為重要。首屏是企業(yè)網(wǎng)站頁面的黃金位置。如果在首屏中沒找到感興趣的內(nèi)容，用戶就會喪失一部分信心。以下面某網(wǎng)站點(diǎn)擊熱圖可以看出，用戶的點(diǎn)擊規(guī)律基本集中在首屏，2屏以下用戶關(guān)注度低；從瀏覽習(xí)慣看，以下面某網(wǎng)站首頁及底層頁面眼動熱力圖可以看出，用戶關(guān)注度會由首屏向下延伸，除首屏推薦內(nèi)容外，到3屏左右內(nèi)容均保持較高關(guān)注度。

孰優(yōu)孰劣，一目了然。在經(jīng)過以上的分析之后，同時結(jié)合業(yè)界的潮流設(shè)計現(xiàn)狀，企業(yè)官網(wǎng)采用方案A，二級、三級等垂直頻道部分結(jié)合了方案B。下圖為首頁設(shè)計圖；

2、緊跟潮流，高大上的扁平化設(shè)計風(fēng)格

有人說“只有交互扁平了，視覺才好做扁平??”扁平化不僅僅是界面視覺扁平無立體感，更是交互體驗的扁平化，信息架構(gòu)層級的扁平化。

1）結(jié)構(gòu)層級減少——高效

交互的“扁平化”，與之相對應(yīng)的是“結(jié)構(gòu)層級、組織架構(gòu)”的扁平化，如下圖樹形結(jié)構(gòu)所示：

鏈接的層數(shù)被稱為深度（z軸），最底層頁面包含的頁面總數(shù)被稱為鏈接的廣度（x軸）。縱向（y軸）很多情況下都只有一層，放的多都是一些消息提醒和快捷方式。

以新版官網(wǎng)架構(gòu)為例：解決方案細(xì)化到各行業(yè)、領(lǐng)域；產(chǎn)品含軟件產(chǎn)品到硬件產(chǎn)品等。

官網(wǎng)新版在設(shè)計中，細(xì)節(jié)的扁平化的打磨尤其注重，同時為了兼容多種屏幕分辨率，減少結(jié)構(gòu)層級精簡交互步驟，具體是通過以下幾個方面來凸顯。

并列

將并列的信息顯示在同一個界面中，減少頁面的跳轉(zhuǎn)，層次清晰、簡潔、一目了然。如服務(wù)與支持欄目首頁，同一界面中整體顯示咨詢規(guī)劃、項目管理、系統(tǒng)集成、軟件開發(fā)、專業(yè)培訓(xùn)、應(yīng)用推廣、項目質(zhì)保、運(yùn)維服務(wù)等信息；

快捷方式

在新版官網(wǎng)中，主站底部位置，設(shè)計了快捷方式副導(dǎo)航欄，作為主導(dǎo)航的輔助功能菜單，以訪問用戶模塊為例，通過根據(jù)訪問用戶屬性定位不同行業(yè)用戶的點(diǎn)擊，用戶可以直接從這個導(dǎo)航菜單進(jìn)入自己最關(guān)注的行業(yè)解決方案，同時，我們能夠進(jìn)而得到行業(yè)用戶點(diǎn)擊率排行及熱力圖，再如用戶最關(guān)心的聯(lián)系方式等信息，在副導(dǎo)航欄中再次設(shè)計進(jìn)去，想用戶之所想，及用戶之所及。

對比步驟：
新版：打開官網(wǎng)===具體頁面瀏覽
舊版：打開官網(wǎng)===解決方案===行業(yè)選擇===具體頁面瀏覽

層級結(jié)構(gòu)的減少，用戶不用在一層一層的點(diǎn)到設(shè)置里面去按，提高效率的同時也使結(jié)構(gòu)變的清晰。

顯示關(guān)鍵信息

這是新網(wǎng)創(chuàng)想招聘網(wǎng)站===校園招聘===行程安排頁面，在頁面中，準(zhǔn)確的設(shè)計了“地區(qū)、高校、宣講地點(diǎn)、時間”等校園招聘過程中的關(guān)鍵信息元素，并且在一個頁面中扁平化排列，讓同學(xué)不用再挨個查詢新網(wǎng)創(chuàng)想在各個城市的招聘信息，加快了瀏覽效率和用戶體驗，同時也能在無形中提升優(yōu)秀畢業(yè)生對新網(wǎng)創(chuàng)想品牌的好感和認(rèn)知。

從上面的例子可以看出層級結(jié)構(gòu)減少，交互步驟必然減少，無疑讓用戶的使用效率得到了提高。

2）表達(dá)方式直白——準(zhǔn)確

小學(xué)時，老師為了讓學(xué)生喜愛且容易接受知識，經(jīng)常會以看圖識字這種最簡單、直白的方式來教學(xué)生，但結(jié)果卻往往非常有效。網(wǎng)站瀏覽也是同樣的道理，新版官網(wǎng)設(shè)計中，采用了諸多擬物化設(shè)計的優(yōu)秀理念，讓網(wǎng)站的設(shè)計表達(dá)更直白，讓小白用戶瀏覽網(wǎng)站毫無壓力，讓用戶一眼就能看明白模塊所表達(dá)的意思，而不再需要解釋。例如解決方案欄目設(shè)計，通過細(xì)致分析各行業(yè)及其特征，每個行業(yè)都采用獨(dú)特的banner展示圖來做說明。

更加直觀的表達(dá)方式，讓用戶能更準(zhǔn)確的使用體驗，不用在去為這里要怎么操作而苦惱了。

3）信息直觀——有序

干凈整潔有序，永遠(yuǎn)比雜亂無章跟讓人賞心悅目，即使在信息量很大的情況下，在有序的環(huán)境里面找起來也會比較方便快捷。

互聯(lián)網(wǎng)時代已經(jīng)是信息爆炸的時代，如何從這些里面找到自己想要的，尤其是現(xiàn)在小屏幕設(shè)備流行，致使我們更需要減少過度繁雜元素的交互界面設(shè)計，讓信息更直觀的展示。通過整理，我們能找到事物的本質(zhì)，發(fā)現(xiàn)全新的觀點(diǎn)，看到一些深藏于表面的事物。通過整理，我們視野里問題會變得越來越清晰，并且獲得許多新發(fā)現(xiàn)。

新版官網(wǎng)采用了分類、整理的方式，降低用戶檢索體驗的難度，同時可以幫助用戶認(rèn)知新網(wǎng)創(chuàng)想的行業(yè)深度、廣度及其產(chǎn)品，讓用戶能根據(jù)所整理的清晰分類快速找到自己需要的東西。在下面圖中，展示的是行業(yè)產(chǎn)品頁面內(nèi)容的截圖，每個行業(yè)產(chǎn)品按照對應(yīng)的業(yè)務(wù)屬性進(jìn)行定位、細(xì)分，信息直觀有序，能讓每位用戶快速定位到自己想找的內(nèi)容。

4）一致性：減少學(xué)習(xí)成本，提高效率（二期工作）

多平臺之間的運(yùn)用，現(xiàn)在的用戶已經(jīng)習(xí)慣了在多場景下運(yùn)用多平臺設(shè)備，一旦用戶學(xué)會了界面中某個部分的操作，他們很快就能知道如何在其他地方或其他性能上進(jìn)行操作。

功能的一致性

平臺與平臺之間的無縫體驗

這里除了數(shù)據(jù)同步，還有一點(diǎn)就是考慮到怎么解決多設(shè)備之間的交叉融合的問題。所以保證一致性也是扁平化很重要的一點(diǎn)，減少學(xué)習(xí)成本，提高使用效率。

三、用戶服務(wù)：以用戶為導(dǎo)向的理念

1、互動營銷，社會化分享

移動化是全球的趨勢，“PC+移動端”目前是大部分網(wǎng)絡(luò)用戶訪問社會化媒體的主要方式，社會化媒體作為營銷平臺，營銷價值已深入人心，所謂全民營銷，人人都是口碑傳播的一份子。企業(yè)網(wǎng)站作為企業(yè)宣傳的大本營、門戶，重視營銷推廣無可厚非，可能出現(xiàn)于用戶瀏覽某個文章的瞬間，可能出現(xiàn)于用戶查某個圖片的時刻，當(dāng)用戶隨手轉(zhuǎn)發(fā)，輕輕進(jìn)行分享的時候，其實新網(wǎng)創(chuàng)想已完成了一次有效推廣。

新版官網(wǎng)在設(shè)計過程中，在網(wǎng)頁的細(xì)節(jié)之處，植入了JisThis程序：

2、新網(wǎng)創(chuàng)想服務(wù)中心功能亮點(diǎn)

以客戶為到導(dǎo)向的用戶服務(wù)一直以來都是新網(wǎng)創(chuàng)想最重視的工作之一，體現(xiàn)到了售前、售中、售后等各個環(huán)節(jié)。新版官網(wǎng)在規(guī)劃、設(shè)計之前，就做了大量的需求分析，提煉了諸多有效提升用戶黏性的剛性需求。

3、招聘服務(wù)

1）社招、校招的統(tǒng)一性PK

企業(yè)招聘往往是凸顯企業(yè)文化的排頭兵，且會是企業(yè)的核心工作之一，同時社會求職者更重視企業(yè)的核心價值、業(yè)務(wù)能力、產(chǎn)品范圍、研發(fā)情況等實際的信息，而應(yīng)屆生更重視企業(yè)的品牌、核心價值、職位的晉升、薪資待遇等軟性福利的信息。根據(jù)分析，項目組初始時設(shè)想將社會招聘、校園招聘進(jìn)行拆分，分別單獨(dú)的交互設(shè)計、視覺設(shè)計、品牌元素植入，但隨著討論的深入，項目組統(tǒng)一了意見：

u  企業(yè)服務(wù)的統(tǒng)一性，不論是社招、校招，企業(yè)方的核心服務(wù)都是招聘業(yè)務(wù)；

u  用戶服務(wù)統(tǒng)一性，雖然社招、校招求職者所關(guān)注的點(diǎn)不同，但歸根結(jié)底，核心的用戶需求依然是最關(guān)注企業(yè)提供的崗位信息；

2）結(jié)構(gòu)層次、交互的清晰定位

在確定站點(diǎn)統(tǒng)一性之后，項目組進(jìn)一步考慮了如何合理、清晰的進(jìn)行在社會招聘、校園招聘的交互區(qū)分以及結(jié)構(gòu)層級的區(qū)分，同時又不影響整體的統(tǒng)一性體驗感。前后共手繪了多種交互原型，經(jīng)過討論，最終梳理如下：

u  社會求職、校園求職的需求同等重要，都是核心工作，在流程中分別是單獨(dú)進(jìn)行，所以社招、校招的網(wǎng)站結(jié)構(gòu)都定位為一級欄目，職位都分別進(jìn)行排列；

u  招聘網(wǎng)站首頁建設(shè)中的社招、校招，類似于主站點(diǎn)法院、檢察院等行業(yè)用戶，邏輯上既需要有聯(lián)系，同等，又需要進(jìn)行明顯的區(qū)分；

u  新網(wǎng)創(chuàng)想的工作環(huán)境、培訓(xùn)、薪資待遇等等不論社會求職者、校園求職都是非常關(guān)心，所以獨(dú)立設(shè)置一級欄目。

四、響應(yīng)式設(shè)計，小屏，你好?。ǘ诠ぷ鳎?/strong>

隨著移動互聯(lián)網(wǎng)的蓬勃發(fā)展，多屏互動已成為引領(lǐng)科技的潮流趨勢，watch、phone、pad、PC、TV等等不同的設(shè)備都有各自的操作系統(tǒng)、屏幕分辨率、清晰度以及屏幕定向方式，而不斷被研發(fā)著的各種新設(shè)備也將帶來更多的屏幕尺寸規(guī)格。怎樣才能做到讓一種設(shè)計方案滿足所有情況？so,響應(yīng)式設(shè)計來了！