論平臺(tái)產(chǎn)品在品牌傳承、響應(yīng)式潮流產(chǎn)品設(shè)計(jì)與用戶(hù)服務(wù)的交融與平衡

2 評(píng)論 14397 瀏覽 40 收藏 25 分鐘

莎士比亞有一句名言:一千個(gè)人心中有一千個(gè)哈姆雷特,作為企業(yè)形象窗口的官方網(wǎng)站,它的鏡子效應(yīng)更是非常顯現(xiàn),碎片化意見(jiàn)顯得更為豐富多樣。

產(chǎn)品背景:紫光華宇是一家非常人性化的企業(yè)(紫光輸入法,主要面向B2B領(lǐng)域),有幸之前全面負(fù)責(zé)了集團(tuán)官方網(wǎng)站、招聘網(wǎng)站web、M、APP等全面改版工作。從品牌傳承、潮流產(chǎn)品設(shè)計(jì)與用戶(hù)服務(wù)3大維度思考平臺(tái)級(jí)產(chǎn)品思維、營(yíng)銷(xiāo)思維和用戶(hù)服務(wù)思維!

官網(wǎng)的全新改版往往是牽一發(fā)而動(dòng)全身,不僅影響著用戶(hù),更影響著企業(yè)本身,如何能夠在有效的延續(xù)華宇連續(xù)13年高速成長(zhǎng)的品牌基因,整合來(lái)自?xún)?nèi)外部的需求與碎片化意見(jiàn),并以未來(lái)計(jì),能夠兼容未來(lái)網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)與用戶(hù)服務(wù),如此種種,都是本次改版的重中之重。

masiluoxuqiu

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

QQ20161024095733

一、品牌基因的傳承

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

1.色彩方面

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

QQ20161024095747

2. 輔助形象

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

3. 設(shè)計(jì)元素,少即是多

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

20161024095757

二、產(chǎn)品初體驗(yàn)與潮流設(shè)計(jì)

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

1.首頁(yè)交互核心:給我選擇or幫我選擇?

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

大家選擇時(shí)考慮的維度主要集中在幾個(gè)方面:

  • 用戶(hù)進(jìn)入首頁(yè)的場(chǎng)景(需求);
  • 瀏覽習(xí)慣;
  • 視覺(jué)層面的沖擊力;

具體來(lái)看兩種頁(yè)面布局策略:

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

QQ20161024095826

B方案:給我選擇,盡量多呈現(xiàn)不同內(nèi)容;

QQ20161024095835

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

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

QQ20161024095845

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

QQ20161024095857

2. 緊跟潮流,高大上的扁平化設(shè)計(jì)風(fēng)格

有人說(shuō)“只有交互扁平了,視覺(jué)才好做扁平??”扁平化不僅僅是界面視覺(jué)扁平無(wú)立體感,更是交互體驗(yàn)的扁平化,信息架構(gòu)層級(jí)的扁平化。

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

交互的“扁平化”,與之相對(duì)應(yīng)的是“結(jié)構(gòu)層級(jí)、組織架構(gòu)”的扁平化,如下圖樹(shù)形結(jié)構(gòu)所示:

QQ20161024095910

鏈接的層數(shù)被稱(chēng)為深度(z軸),最底層頁(yè)面包含的頁(yè)面總數(shù)被稱(chēng)為鏈接的廣度(x軸)。縱向(y軸)很多情況下都只有一層,放的多都是一些消息提醒和快捷方式?!敬硕螢橐貌糠郑奖憷斫夂驼f(shuō)明】

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

QQ20161024095919

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

并列

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

QQ20161024095930

快捷方式

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

QQ20161024095938

對(duì)比步驟:

  • 新版:打開(kāi)官網(wǎng)===具體頁(yè)面瀏覽
  • 舊版:打開(kāi)官網(wǎng)===解決方案===行業(yè)選擇===具體頁(yè)面瀏覽

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

顯示關(guān)鍵信息

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

QQ20161024095949

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

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

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

QQ20161024095959

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

3)信息直觀——有序

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

QQ20161024100008

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

QQ20161024100017

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

QQ20161024100027

4)一致性:減少學(xué)習(xí)成本,提高效率(具體見(jiàn)下方響應(yīng)式設(shè)計(jì))

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

功能的一致性

平臺(tái)與平臺(tái)之間的無(wú)縫體驗(yàn)

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

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

1.互動(dòng)營(yíng)銷(xiāo),社會(huì)化分享

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

QQ20161024100037

新版官網(wǎng)在設(shè)計(jì)過(guò)程中,在網(wǎng)頁(yè)的細(xì)節(jié)之處,植入了JisThis程序,見(jiàn)圖示:

QQ20161024100044

2. 華宇服務(wù)中心功能亮點(diǎn)

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

3. 招聘服務(wù)

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

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

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

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

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

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

QQ20161024100055

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

QQ20161024100110

  • 華宇的工作環(huán)境、培訓(xùn)、薪資待遇等等不論社會(huì)求職者、校園求職都是非常關(guān)心,所以獨(dú)立設(shè)置一級(jí)欄目。

QQ20161024100119

四、響應(yīng)式設(shè)計(jì),小屏,你好!

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

QQ20161024100127

1.web產(chǎn)品響應(yīng)式說(shuō)明

移動(dòng)端頁(yè)面延續(xù)了PC端的簡(jiǎn)潔風(fēng)格,使得用戶(hù)在瀏覽頁(yè)面時(shí),更容易的快速獲取信息。優(yōu)化后的輔助圖形菜單,在形象表達(dá)菜單含義的同時(shí),用戶(hù)也更加容易點(diǎn)擊這些對(duì)比鮮明的色塊。

Q20161024100135

PC端常用的是固定布局和彈性布局,前者設(shè)置一個(gè)絕大多數(shù)電腦能正常顯示的固定寬度居中顯示,后者則采用百分比。而現(xiàn)在的移動(dòng)平臺(tái)日新月異,為了讓網(wǎng)頁(yè)適應(yīng)各種屏幕分辨率需要避免使用固定尺寸。

  1. 使用 viewport meta標(biāo)簽在手機(jī)瀏覽器上控制布局
  2. 通過(guò)使用媒體查詢(xún)可以根據(jù)獲取到訪(fǎng)問(wèn)者的設(shè)備類(lèi)型和設(shè)備分辨率,我們?yōu)椴煌直媛实挠脩?hù)提供不同的訪(fǎng)問(wèn)體驗(yàn)。
  3. 在服務(wù)器后臺(tái),我們通過(guò)分析用戶(hù)請(qǐng)求的頭部信息,將PC端用戶(hù)和移動(dòng)端用戶(hù)分別導(dǎo)向不同的頁(yè)面。
  4. 移動(dòng)端的頁(yè)面較之PC端頁(yè)面使用的圖片更少,最大限度的降低了網(wǎng)絡(luò)流量,并在樣式文件中大量使用了CSS3屬性,使頁(yè)面布局更加靈活。

2. 移動(dòng)端響應(yīng)式設(shè)計(jì)

1、拋棄傳統(tǒng)的像素單位,采用全用單位值 rem,采用百分之?dāng)?shù)值,運(yùn)用偽元素,讓頁(yè)面更加靈活,代碼更加少

QQ20161024100149

QQ20161024100201

(百分?jǐn)?shù),偽元素運(yùn)用)

2、響應(yīng)式頁(yè)面設(shè)計(jì),讓頁(yè)面自動(dòng)適應(yīng)各種屏幕,視窗變動(dòng)頁(yè)面會(huì)隨著變動(dòng),引入全新媒體查詢(xún)的應(yīng)用,讓頁(yè)面真正實(shí)現(xiàn)響應(yīng)式

QQ20161024100214

QQ20161024100231

(大分辨率效果)

QQ20161024100241

(小分辨率效果)

3、運(yùn)用css3全新屬性替代圖片,減少http請(qǐng)求數(shù),加速頁(yè)面運(yùn)轉(zhuǎn),同時(shí)降低用戶(hù)訪(fǎng)問(wèn)頁(yè)面流量,運(yùn)用css3動(dòng)畫(huà)讓頁(yè)面更加絢麗。

QQ20161024100254

(過(guò)度效果運(yùn)用,漸變效果,旋轉(zhuǎn)效果等的運(yùn)用讓頁(yè)面更加生動(dòng))

4.運(yùn)用全新HTML5標(biāo)簽,優(yōu)化SEO搜索引擎,讓頁(yè)面運(yùn)轉(zhuǎn)速度更快,更穩(wěn)定

QQ20161024100303

5.引入jQuery mobile 框架,讓頁(yè)面更加穩(wěn)定,性能更加優(yōu)越,訪(fǎng)問(wèn)速度更快

QQ20161024100311

6. 移動(dòng)端端,新型meta標(biāo)簽的運(yùn)用,讓頁(yè)面可兼容各種移動(dòng)端設(shè)備

QQ20161024100317

項(xiàng)目成效:

改版后,頁(yè)面跳出率比舊版降低了40%個(gè)百分點(diǎn),訪(fǎng)問(wèn)時(shí)長(zhǎng)增加一倍之多,用戶(hù)忠誠(chéng)度大幅提升,訪(fǎng)問(wèn)深度可達(dá)5-10頁(yè),而舊版只到3頁(yè);網(wǎng)站客戶(hù)體驗(yàn)滿(mǎn)意度從55%提升到了90%;網(wǎng)站訪(fǎng)問(wèn)流量提升了5倍左右;品牌關(guān)鍵詞獲得百度等搜索引擎的有效收錄和展示,“華宇——華宇軟件”關(guān)鍵詞已被百度良好的收錄,并進(jìn)入熱門(mén)推薦詞匯之中!

 

作者:趙飛譚(微信公眾號(hào)zhaofeitan1987),小米手機(jī)運(yùn)營(yíng)經(jīng)理,原京東高級(jí)運(yùn)營(yíng),紫光華宇市場(chǎng)經(jīng)理(兼任所負(fù)責(zé)的產(chǎn)品工作),也曾在神州數(shù)碼就職。

本文由 @趙飛譚 投稿發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 我的微信公眾號(hào):zhaofeitan1987;微信:zhao_feitan

    來(lái)自北京 回復(fù)
    1. 寫(xiě)的不錯(cuò),可惜就是圖片不清晰,影響閱讀了

      來(lái)自廣東 回復(fù)