這一次，我們做了一次官網(wǎng)改版

時(shí)間：2023-04-26 00:42:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-04-26 00:42:02 來源：網(wǎng)站運(yùn)營

這一次，我們做了一次官網(wǎng)改版：

科技性冷淡風(fēng)。這應(yīng)該是我們這次改版的風(fēng)格總結(jié)了。
沒有很濃郁的色彩，沒有恣意的漸變，沒有神秘的黑暗亮藍(lán)與熒光綠，也沒有各種punk的流行元素，我們呈現(xiàn)出來的就是一個(gè)可靠、學(xué)術(shù)、娓娓道來的界面風(fēng)格。
我們不需要很酷炫的東西，我們要的是peace and love。

項(xiàng)目背景

剛來到公司就覺得當(dāng)時(shí)官網(wǎng)有很多設(shè)計(jì)上的錯(cuò)誤，包括間距不統(tǒng)一、圖片拉伸、icon樣式不一致等明眼能看出來的視覺錯(cuò)誤，然后一直被其他項(xiàng)目拖著，沒有時(shí)間去做官網(wǎng)的樣式修正問題。

直到有一天偉哥ceo半開玩笑的說，『你臉洗了么？』我愣了神，后來偉哥才表明，官網(wǎng)是公司的臉面，是該洗洗了。隨后呢，這個(gè)項(xiàng)目也就提上了日程。

本項(xiàng)目的設(shè)計(jì)由我和雪馨共同完成。我主要負(fù)責(zé)官網(wǎng)需求定義、風(fēng)格定義、頁面設(shè)計(jì)，她負(fù)責(zé)風(fēng)格探索、插畫設(shè)計(jì)、頁面設(shè)計(jì)與標(biāo)注。

明確問題

• 之前官網(wǎng)由外包團(tuán)隊(duì)開發(fā)，維護(hù)和管理不方便
• 視覺上比較粗糙（有一些錯(cuò)誤），視覺形象不高端
• 官網(wǎng)內(nèi)容較為單薄，缺少案例支撐，缺少可信度

改版需要達(dá)成的目標(biāo)

• 視覺上進(jìn)行提升，提高公司品牌的視覺層次，讓來訪者感覺很公司很正規(guī)、很可信
• 增加落地項(xiàng)目的宣傳，讓來訪者知道公司確實(shí)有很多實(shí)戰(zhàn)經(jīng)驗(yàn)，從而信服我們的能力
• 將官網(wǎng)的功能架構(gòu)進(jìn)行梳理，方便以后功能模塊的拓展
• 方便市場(chǎng)人員運(yùn)維

1. 確定需要呈現(xiàn)的內(nèi)容

嗯，我們?cè)诮邮诌@個(gè)項(xiàng)目的時(shí)候，手里沒有一點(diǎn)內(nèi)容，我們需要去尋找一些素材，讓官網(wǎng)變的豐滿一點(diǎn)。

這個(gè)部分可以分成兩塊任務(wù)，一個(gè)是收集我們自己有哪些現(xiàn)有的東西，一個(gè)是確定來訪者需要獲取什么東西。

在走訪各個(gè)部門，與各部門負(fù)責(zé)人親密交談后，獲取了以下素材：

1. 公司、團(tuán)隊(duì)介紹.doc
2. 老板出去宣講時(shí)候.ppt
3. 產(chǎn)品白皮書.pdf
4. 公司新聞.doc
5. 各項(xiàng)目組正在進(jìn)行或已完成的項(xiàng)目.zip

在收集過后，發(fā)現(xiàn)了我們還是有很多可以呈現(xiàn)的內(nèi)容，當(dāng)時(shí)的官網(wǎng)并沒有把這些展現(xiàn)出來，少了很多向外界展示趣鏈的機(jī)會(huì)。

2. 下一步就是確定來訪者的用戶畫像，以及他們的用戶訴求。

當(dāng)然，我們沒有做用戶調(diào)研。

在我和雪馨兩個(gè)人角色扮演的過程中，我們初步臆想出會(huì)訪問我們網(wǎng)站的四類人群。

• 潛在客戶。關(guān)注區(qū)塊鏈，有自己的行業(yè)需求，希望與一家區(qū)塊鏈技術(shù)公司合作來實(shí)現(xiàn)自己的想法。
• 投資者。對(duì)趣鏈有投資想法，希望根據(jù)官網(wǎng)提供的一些信息初步、較全面的了解公司當(dāng)前的發(fā)展?fàn)顩r。
• 普通群眾。在行業(yè)活動(dòng)或新聞報(bào)道中聽到、看到趣鏈的品牌，希望對(duì)這家公司有更深入的了解。
• 區(qū)塊鏈愛好者。對(duì)區(qū)塊鏈開發(fā)有興趣，希望了解趣鏈的開發(fā)水平，并尋找一些對(duì)自己開發(fā)有幫助的內(nèi)容。

1、潛在客戶的訴求：

傳遞給用戶的印象：趣鏈的區(qū)塊鏈技術(shù)很厲害，而且實(shí)戰(zhàn)經(jīng)驗(yàn)豐富，能夠與之進(jìn)行合作。

2、區(qū)塊鏈技術(shù)愛好者的訴求：

傳遞給用戶的印象：了解趣鏈的技術(shù)水平，可以尋找到一些對(duì)自己的開發(fā)能力有所幫助的東西。

3、普通群眾的訴求：

傳遞給用戶的印象：趣鏈?zhǔn)且患易鰠^(qū)塊鏈的公司，在區(qū)塊鏈領(lǐng)域有很多客戶，技術(shù)上很厲害。

4、投資者的訴求：

傳遞給用戶的印象：初步了解公司全貌，行業(yè)的布局，以及未來發(fā)展的的可能性。

在沒有接觸到任何真實(shí)的網(wǎng)站訪客后（除本公司員工外），我們很形象的把用戶訴求以及如何滿足這些訴求給描繪出來了?；?。

雖然感覺這些訴求可能與真實(shí)的情況并不匹配，但是我們義無反顧的繼續(xù)下去了。

現(xiàn)在，我們腦海中就時(shí)時(shí)刻刻浮現(xiàn)出這四個(gè)虛擬的人物了。

證實(shí)我們的思考是正確的

我和雪馨YY了一下午，終于把我們要展示的內(nèi)容梳理出來了。但是我們還沒有把這些內(nèi)容按照某些模塊進(jìn)行分類。下面我覺得可以做一些競(jìng)品分析了，來參考、驗(yàn)證一下官網(wǎng)的內(nèi)容是否充分。畢竟都說自己造輪子不好，我們要學(xué)會(huì)從同類產(chǎn)品中去學(xué)習(xí)。

剛好手里有一份朋友圈都在轉(zhuǎn)發(fā)的區(qū)塊鏈專利列表，就按照順序挨個(gè)去他們的網(wǎng)頁瀏覽了一遍。確認(rèn)了兩個(gè)可以參考的競(jìng)品：布比和金丘科技。選擇依據(jù)：內(nèi)容的豐富度、產(chǎn)品定位。

同時(shí)又考慮到趣鏈?zhǔn)且患壹夹g(shù)公司，也選擇了騰訊云、網(wǎng)易云、七牛這三家較成熟的技術(shù)公司來做參考。

將各家網(wǎng)站的信息內(nèi)容按照模塊羅列出來。

對(duì)比發(fā)現(xiàn)，網(wǎng)頁架構(gòu)竟然驚人的相似，而且都是按照『首頁-產(chǎn)品-解決方案-關(guān)于我們』這幾個(gè)模塊進(jìn)行劃分?？磥恚覀冞@么做肯定也錯(cuò)不了。隨后我們之前自己分析的內(nèi)容與競(jìng)品的內(nèi)容確定出了趣鏈官網(wǎng)的內(nèi)容模塊。

終于，把這些內(nèi)容確認(rèn)完畢。有了內(nèi)容就可以進(jìn)行風(fēng)格的定義了，yeah！

---

品牌風(fēng)格定義

通過我和雪馨兩人在公司半年的切身感受，公司是做新技術(shù)的，但又是做金融領(lǐng)域的較多，更多的是和銀行政府打交道，所以還是要?jiǎng)?wù)實(shí)一些，不能太炫酷。并詢問了周邊的幾個(gè)小伙伴，我們私擬了公司的品牌定位：

隨后開始了維持?jǐn)?shù)小時(shí)的苦思冥想，終于把一個(gè)白板畫滿了。

我們從探索、學(xué)術(shù)、有用這幾個(gè)詞，聯(lián)想到了冉冉上升的行業(yè)新星、志在改變金融行業(yè)。當(dāng)然，我們也想學(xué)習(xí)天貓他們?cè)O(shè)計(jì)師高大上的品牌形象，Insight/洞察、inspire/參與、involve/啟發(fā)、injoy/愉悅?？墒俏覀兿氩怀鰜?。

我們把白板上的詞整理的干凈了一些，并打印出來貼在電腦上，時(shí)刻提示我們?nèi)倪@些線索中去創(chuàng)造。

既然有一些正面詞語，當(dāng)然我們也要避免給用戶傳遞一些負(fù)面的情緒。

定義完公司的品牌形象。我們要開始從這些關(guān)鍵詞出發(fā)去定義設(shè)計(jì)的元素了。

• 顏色
• 基本形
• 組合形
• 設(shè)計(jì)風(fēng)格

顏色定義

顏色上感覺挺不講究的，我覺得公司的定位就是年輕版的微軟（谷歌的風(fēng)格太飄），所以直接取的微軟色板里面的顏色做了一些微調(diào)，調(diào)的更活潑了一點(diǎn)。

基本形（原圖形）

這個(gè)就更玄學(xué)了，我們?cè)陬^腦風(fēng)暴的時(shí)候，想到了一些名詞，例如可靠，我們會(huì)想到大樓、鋼筋、樹墩，這些抽象一下，就形成了一個(gè)個(gè)最簡(jiǎn)單的圖形。

組合形

我們根據(jù)區(qū)塊鏈的定義與設(shè)計(jì)師腦海中的區(qū)塊鏈定義了區(qū)塊鏈的形態(tài)。

區(qū)塊鏈?zhǔn)且环N按照時(shí)間順序?qū)?shù)據(jù)區(qū)塊以順序相連的方式組合成的一種鏈?zhǔn)綌?shù)據(jù)結(jié)構(gòu)， 并以密碼學(xué)方式保證的不可篡改和不可偽造的分布式賬本。

關(guān)鍵詞：區(qū)塊、連接、順序、分布。

有了這些組合形，我們就可以發(fā)揮各種各樣的icon和視覺元素啦。

視覺風(fēng)格

視覺風(fēng)格的確定，我和雪馨商量，我們要可靠、創(chuàng)造、學(xué)術(shù)，不要虛無、神秘，略帶一些打破常規(guī)的東西，同時(shí)要散發(fā)出青春的活力。

畫了一個(gè)星期，出了四個(gè)方案。四種實(shí)現(xiàn)方式。

方案一：科技幻想。手法：線條。

評(píng)價(jià)：風(fēng)格過于未來，有些飄渺，會(huì)讓訪問者感覺到不切實(shí)際。

方案二：未來城市。手法：建模。

評(píng)價(jià)：由放大的電路板代表城市很有想法，這個(gè)樣式如果作為一個(gè)主視覺，工作量較大而且容易偏科幻。

方案三：有機(jī)連接。手法：程序編寫。

評(píng)價(jià)：看起來很新穎，但很難去表現(xiàn)，個(gè)人能力有限。

方案四：人機(jī)融合。手法：暴力拼圖。

評(píng)價(jià)：能夠表達(dá)出區(qū)塊鏈的某種意義，而且放入了人的元素，并不顯得很神秘、虛無。

方案四是我偷懶，去各大網(wǎng)站上搜羅的一些關(guān)于區(qū)塊鏈、科技的風(fēng)格插畫，然后直接套在官網(wǎng)里面，能很直觀的看出是否達(dá)到那種感覺。個(gè)人覺得這種暴力拼圖法省時(shí)省力，推薦使用。

基于方案四，我們做了細(xì)化，繪制了自己的插畫。

設(shè)計(jì)風(fēng)格評(píng)審

這一part很有趣，當(dāng)我們將設(shè)計(jì)提案已經(jīng)做成了一份4-50頁的ppt很忐忑地準(zhǔn)備向老板匯報(bào)的時(shí)候，老板匆匆看了幾眼，說『你們的設(shè)計(jì)風(fēng)格定位是什么』？我說『年輕的微軟吧』。老板表示還挺贊同，然后他就開會(huì)去了，他說等他晚上再來找他，然后我沒等到。就忘記了。。

我覺得還是要和老板確定好風(fēng)格后再做，最后做完所有頁面的時(shí)候再去給他評(píng)審的時(shí)候，總是害怕他說這個(gè)頁面太丑了，回去重新再改。

視覺輸出

icon

由于區(qū)塊鏈中有很多神奇的術(shù)語程序員都不知道怎么形象的描述它們，所以我們很難用圖形來準(zhǔn)確的告訴客戶這是什么，icon更多起到了一個(gè)導(dǎo)視的作用。風(fēng)格使用了較為新奇的線面結(jié)合的樣式，黑色的線穩(wěn)重、嚴(yán)謹(jǐn)，小色塊也帶來一些活力與創(chuàng)造。

插畫風(fēng)格

插畫使用的是當(dāng)前還流行的 Isometric （正等軸測(cè)）風(fēng)格，也加入了一些人物的插畫，讓畫面有趣一些。畫面元素沒有很繁復(fù)，因?yàn)檎w視覺風(fēng)格還是偏簡(jiǎn)潔、規(guī)整，如果在插畫里面做過度的細(xì)節(jié)，反而會(huì)讓整體畫面顯得不夠協(xié)調(diào)。

動(dòng)效設(shè)計(jì)

當(dāng)然，我們做完后覺得靜態(tài)圖有點(diǎn)死板，為什么不動(dòng)起來呢，就做了一些動(dòng)畫。因?yàn)槭欠旁赽anner里面，banner本身還會(huì)附加切換的動(dòng)效，怕兩個(gè)效果有過多干涉，所以內(nèi)部的插畫動(dòng)效就做得細(xì)微了一些。Gif的文件格式比較大（3-4M，當(dāng)然您現(xiàn)在正在看的就耗費(fèi)了這么多流量），被前端強(qiáng)烈的譴責(zé)了，后來發(fā)現(xiàn)可以使用Animate CC里面有HTML5 Canvas導(dǎo)出的選項(xiàng)，開心死了，導(dǎo)出只有幾百k～

官網(wǎng)其他部分的動(dòng)效就直接使用Axure進(jìn)行了模擬，個(gè)人覺得Axure已經(jīng)可以很好的做出一些細(xì)節(jié)的動(dòng)畫了。前端開發(fā)根據(jù)Axure的動(dòng)畫導(dǎo)出竟然很好的還原了我們的設(shè)計(jì)，并沒有像想象中需要調(diào)什么曲線之類的東西，或許是我接觸不夠深。。

https://www.zhihu.com/video/1010608458818781184

頁面標(biāo)注

由于協(xié)作的小姑娘使用的是XD，頁面的標(biāo)注、元素的規(guī)范化都是她在XD上一點(diǎn)點(diǎn)堆砌出來，后來我們才發(fā)現(xiàn)XD有個(gè)標(biāo)注神器——PxCook，當(dāng)然藍(lán)湖現(xiàn)在也支持了。但它們都在2018年7月之后才上線支持對(duì)XD的支持。所以在XD上標(biāo)注花費(fèi)了較多的時(shí)間。雖然有很多自動(dòng)的標(biāo)注工具，但設(shè)計(jì)還是需要標(biāo)注才能進(jìn)一步驗(yàn)證自己所有的元素是否規(guī)范，而且有些關(guān)鍵尺寸需要標(biāo)在圖上，開發(fā)才能夠很清楚的認(rèn)識(shí)到。

當(dāng)然在標(biāo)注的時(shí)候，需要考慮到響應(yīng)式設(shè)計(jì)，考慮在頁面變窄的時(shí)候，哪些元素需要變化，哪些需要是保持寬度不變的。這些都需要和前端溝通清楚。

PxCook - 最高效易用的自動(dòng)標(biāo)注工具，設(shè)計(jì)研發(fā)協(xié)作利器

響應(yīng)式設(shè)計(jì)

移動(dòng)端頁面的設(shè)計(jì)和pc端的區(qū)別主要在于屏幕尺寸窄，所以更多元素需要隱藏或滾動(dòng)顯示。我們的解決辦法：

1. 橫向排列的內(nèi)容如果放不下，使用縱向排列
2. 鼠標(biāo)hover的手勢(shì)轉(zhuǎn)變?yōu)橛|屏點(diǎn)擊
3. 如果很細(xì)節(jié)的內(nèi)容，在移動(dòng)端可以省略

變化1：橫向變縱向

變化2：hover變點(diǎn)擊

變化3:內(nèi)容省略

后臺(tái)運(yùn)維系統(tǒng)

后臺(tái)運(yùn)維系統(tǒng)是為了方便市場(chǎng)、人事、行政等人員對(duì)官網(wǎng)頁面進(jìn)行動(dòng)態(tài)調(diào)整。當(dāng)然我們也對(duì)上傳的內(nèi)容進(jìn)行規(guī)范。這樣才能保證視覺的統(tǒng)一和協(xié)調(diào)。

文案的風(fēng)格與審核

在頁面設(shè)計(jì)的時(shí)候，自己私擬了一些文案，文案的語氣平緩、不露鋒芒，讓人感覺踏實(shí)、可靠又包含夢(mèng)想。

區(qū)塊鏈行業(yè)的筑路者
——潛心研究區(qū)塊鏈底層技術(shù)，用技術(shù)創(chuàng)造價(jià)值

你可能從來沒有見過這么一只年輕的隊(duì)伍，他們充滿活力與激情，不畏技術(shù)難點(diǎn)，勇往直前，在區(qū)塊鏈的賽道上一馬當(dāng)先。趣鏈在這些“小朋友”、“小年輕”的全力拼搏下茁壯成長，即將成為區(qū)塊鏈的“獨(dú)角獸”。這些小伙伴們也相親相愛，互幫互助，共同營造著趣鏈公司和諧、愉快的氣氛。

當(dāng)然，有些內(nèi)容是我可以寫的，但有些技術(shù)性的問題就需要各個(gè)部門負(fù)責(zé)人去填寫上去。我們列出了一個(gè)文案填寫表。

后來還列出了一個(gè)中英文的對(duì)應(yīng)表。

至此，官網(wǎng)設(shè)計(jì)的內(nèi)容就結(jié)束了。下面就是配合前端去確定一些他們很難實(shí)現(xiàn)或我們?cè)O(shè)計(jì)有誤的部分。

再然后是設(shè)計(jì)走查。

最終

最終，我們鄭重地給趣鏈的小伙伴發(fā)了一封郵件，告訴他們新官網(wǎng)的上線。此時(shí)心情還是很不安的，不知道是否會(huì)被大家接受。當(dāng)大家在朋友圈發(fā)趣鏈新官網(wǎng)上線的狀態(tài)后，還有老板認(rèn)可的郵件，心情大好～

一個(gè)星期過去了，看看看看過去7天的數(shù)據(jù)。新訪客數(shù)據(jù)。

跳出率減少了30%，說明新訪客在來到趣鏈官網(wǎng)后會(huì)更細(xì)致的瀏覽頁面的內(nèi)容，能夠找到他們想要的東西。

訪問時(shí)長從2分35增加到4分56，提升了90%多，說明有部分新訪客是抱著仔細(xì)了解趣鏈的態(tài)度來官網(wǎng)的，他們想了解更多的內(nèi)容，而現(xiàn)在確實(shí)官網(wǎng)的內(nèi)容變得充實(shí)了，所以停留的時(shí)間變得更長。

至于關(guān)鍵指標(biāo)，這個(gè)我們很難去采集某個(gè)決定性的指標(biāo)，應(yīng)該記錄是客戶打給市場(chǎng)的電話數(shù)量？還是關(guān)注微信公眾號(hào)的新用戶數(shù)？

官網(wǎng)的最終目標(biāo)肯定是為了將來訪用戶轉(zhuǎn)化為我們的客戶，但目前的官網(wǎng)沒有相應(yīng)可以采集的點(diǎn)，所以，到此為止吧。

---

終于，這篇水文要寫完了。這次官網(wǎng)改版算是自己視覺方面最優(yōu)秀、最完整的一個(gè)產(chǎn)品吧。雖然文中有很多自嘲、自黑的點(diǎn)，但這些也都是無奈的表現(xiàn)，我們想表現(xiàn)地更好，但有點(diǎn)力不從心，肯定沒有大廠那些規(guī)范的流程和洋洋灑灑的設(shè)計(jì)總結(jié)，我們只是努力地做完每一步事情，讓它顯得還挺正規(guī)，像那么回事情，至少官網(wǎng)每個(gè)地方我們都思考過了。

可能很多還不入流或有改進(jìn)的地方，我和雪馨會(huì)繼續(xù)向前行進(jìn)，我們盡力了。

創(chuàng)業(yè)公司是可以給你很多發(fā)揮的空間，但你能發(fā)揮多少，這就是你自己的本事了。




最后，放上官網(wǎng)的鏈接：

https://www.hyperchain.cn/




同時(shí)也感謝參與這次官網(wǎng)改版的前端，團(tuán)子同學(xué)，他給我們指出了很多設(shè)計(jì)上的問題。

也感謝參與到項(xiàng)目中的后端、測(cè)試和材料提供者們。