說(shuō)到公司網(wǎng)頁(yè)設(shè)計(jì)方案，我可是忙活好一陣子！真是兩眼一抹黑，不知道從哪兒下手。

第一步，當(dāng)然是搞清楚需求！

我直接找到老板和各個(gè)部門(mén)的頭頭，跟他們聊個(gè)底朝天。銷(xiāo)售部希望頁(yè)面能突出產(chǎn)品，最好能讓客戶一眼就看到咱們的優(yōu)勢(shì)；市場(chǎng)部，希望頁(yè)面酷炫一點(diǎn)，能吸引眼球；技術(shù)部則強(qiáng)調(diào)要穩(wěn)定、安全，不能三天兩頭出問(wèn)題。我把這些需求都一一記下來(lái)，生怕漏掉一個(gè)。

就是找靈感、做設(shè)計(jì)。

我在網(wǎng)上看好多同行的網(wǎng)站，還研究一些設(shè)計(jì)網(wǎng)站上的案例。看得我眼花繚亂，各種風(fēng)格都有。我還是決定走簡(jiǎn)約大氣的路線，畢竟咱們公司是做實(shí)業(yè)的，穩(wěn)重一點(diǎn)比較

我用一款叫“摹客”的設(shè)計(jì)軟件（別問(wèn)我為公司就買(mǎi)這款），開(kāi)始畫(huà)原型圖。先是首頁(yè)，把導(dǎo)航欄、輪播圖、產(chǎn)品展示、公司簡(jiǎn)介這些模塊都安排然后是二級(jí)頁(yè)面，比如產(chǎn)品詳情頁(yè)、新聞動(dòng)態(tài)頁(yè)、關(guān)于我們等等。每個(gè)頁(yè)面我都反復(fù)修改好幾遍，力求做到既美觀又實(shí)用。

• 首頁(yè)設(shè)計(jì)：花大概3天，主要是布局和風(fēng)格的確定。
• 內(nèi)頁(yè)設(shè)計(jì)：每個(gè)內(nèi)頁(yè)大概1天，主要是內(nèi)容的填充和排版。

然后，就是跟前端工程師對(duì)接。

我把設(shè)計(jì)稿交給前端工程師，跟他詳細(xì)講解每個(gè)模塊的功能和交互效果。他還挺專(zhuān)業(yè)的，提一些我沒(méi)想到的問(wèn)題，我們一起討論、解決。這個(gè)過(guò)程還挺費(fèi)勁的，有時(shí)候?yàn)橐粋€(gè)按鈕的位置都要爭(zhēng)論半天。不過(guò)最終的效果還是挺滿意的。

開(kāi)發(fā)階段，那叫一個(gè)驚心動(dòng)魄！

前端工程師開(kāi)始寫(xiě)代碼，我時(shí)不時(shí)地過(guò)去看看進(jìn)度。有時(shí)候會(huì)發(fā)現(xiàn)一些跟設(shè)計(jì)稿不符的地方，或者一些bug。我們就一起調(diào)試、修改，直到問(wèn)題解決。這段時(shí)間，我感覺(jué)自己都快成半個(gè)程序員！

當(dāng)然是測(cè)試和上線！

網(wǎng)站開(kāi)發(fā)完成后，我們找?guī)讉€(gè)同事進(jìn)行測(cè)試，讓他們體驗(yàn)一下，看看有沒(méi)有什么問(wèn)題。還真別說(shuō)，他們還真發(fā)現(xiàn)一些我沒(méi)注意到的細(xì)節(jié)問(wèn)題。我們趕緊修改，然后又測(cè)試幾遍，確保沒(méi)問(wèn)題才正式上線。

總結(jié)一下這回的經(jīng)驗(yàn)：

• 溝通很重要！一定要跟各個(gè)部門(mén)溝通清楚，解他們的需求。
• 設(shè)計(jì)要多看案例，多找靈感，但也要結(jié)合公司的實(shí)際情況。
• 跟前端工程師要密切配合，及時(shí)溝通，解決問(wèn)題。
• 測(cè)試不能少！一定要多測(cè)試幾遍，確保網(wǎng)站沒(méi)問(wèn)題再上線。

至于報(bào)價(jià)嘛我們是公司內(nèi)部做的，沒(méi)法給出詳細(xì)的報(bào)價(jià)單。不過(guò)我聽(tīng)說(shuō)外面的公司做 ???? 的網(wǎng)站，首頁(yè)設(shè)計(jì)大概要500塊一頁(yè)，內(nèi)頁(yè)200塊一頁(yè)。這只是個(gè)參考價(jià)，具體還要看設(shè)計(jì)的復(fù)雜程度和工作量。

這回網(wǎng)頁(yè)設(shè)計(jì)，雖然過(guò)程有點(diǎn)曲折，但最終結(jié)果還是挺好的，老板也挺滿意。我也算是積累一次寶貴的經(jīng)驗(yàn)！