做 VALSE 2016 網(wǎng)站的時(shí)候，沒(méi)有設(shè)計(jì)師的參與。在這種情境下要做出網(wǎng)站，只好考慮從功能性出發(fā)寫(xiě)網(wǎng)站，而在這個(gè)過(guò)程中，開(kāi)始思考前端工程師的工作起點(diǎn)到底是不是設(shè)計(jì)稿，并以此看到了可能可以 讓前端工程師脫離設(shè)計(jì)師直接寫(xiě)網(wǎng)站 的可能性： 從功能性出發(fā)的網(wǎng)頁(yè)構(gòu)建 。

優(yōu)勢(shì)在于快速建站。前端工程師可以脫離設(shè)計(jì)師直接接觸甲方，根據(jù)功能需求直接寫(xiě)代碼構(gòu)成功能模塊組合之后建站。

劣勢(shì)在于裝飾性的缺失。雖然實(shí)現(xiàn)功能性之后能做一些裝飾性的工作加以彌補(bǔ)，但是這樣的設(shè)計(jì)缺乏整體考慮。算是速度與設(shè)計(jì)質(zhì)量之間的角力。

核心有三點(diǎn)：模塊化（跟響應(yīng)式直接相關(guān)）、功能優(yōu)先（原型線框圖？）、一致性（字體、LOGO、前端自然模塊（navooter））。

有沒(méi)有網(wǎng)站不需要設(shè)計(jì)？

大概在去年9月的時(shí)候，接了一個(gè)做 VALSE 會(huì)議網(wǎng)站的項(xiàng)目。項(xiàng)目的 deadline 是“盡快完成”。在這樣緊迫的情況下出現(xiàn)了一個(gè)問(wèn)題：找不到設(shè)計(jì)師。被逼無(wú)奈只能硬頭皮上了，一把甲方的需求弄清楚，就開(kāi)始寫(xiě)代碼。具體的做法就是：需要10個(gè)頁(yè)面？好，那我就寫(xiě)個(gè) 10 標(biāo)簽的導(dǎo)航。需要會(huì)議新聞？那我就寫(xiě)個(gè)新聞的塊兒出來(lái)。需要會(huì)議位置？那我就添加一個(gè)地圖插件指向會(huì)議地址。需要注冊(cè)頁(yè)面？那就寫(xiě)表單咯。就這樣一塊兒一塊兒地寫(xiě)，最后形成了 VALSE 2016 的網(wǎng)站 。同樣的理念，還做出來(lái)了另外一個(gè)會(huì)議的網(wǎng)站： SIDAS 2016 。

現(xiàn)在回頭想起來(lái)，覺(jué)得有這樣幾個(gè)問(wèn)題：

• 站在使用者的角度看，這樣一個(gè)以功能性為重的 會(huì)議 網(wǎng)站，設(shè)計(jì)是必須的嗎？

• 站在網(wǎng)站前端的角度看，前端工程師的工作的起點(diǎn)真的是設(shè)計(jì)稿嗎？

第一個(gè)問(wèn)題我覺(jué)得是能肯定的，設(shè)計(jì)對(duì)于一個(gè)會(huì)議網(wǎng)站來(lái)說(shuō)絕對(duì)不是必須的環(huán)節(jié)。直至今天，很多國(guó)際會(huì)議都難說(shuō)有設(shè)計(jì)過(guò)： ECCV 2016 。

第二個(gè)問(wèn)題，前端工程師的工作起點(diǎn)我認(rèn)為不是設(shè)計(jì)稿，而是功能性。當(dāng)拿到一份設(shè)計(jì)稿的時(shí)候，我第一時(shí)間能看到的是圖漂不漂亮，但是這并不足以讓我寫(xiě)出來(lái)一個(gè)網(wǎng)站，我需要快速讀懂設(shè)計(jì)師想說(shuō)的意思：“這一塊是導(dǎo)航欄，這一塊是 banner，這一塊是頁(yè)腳”。并以此用上相應(yīng)的語(yǔ)義化標(biāo)簽：“nav、footer、article”。所以設(shè)計(jì)稿給我們傳達(dá)的絕對(duì)不只有這個(gè)東西長(zhǎng)什么樣子，更有 這是個(gè) 什么東西，換句話說(shuō)，是告訴我們這個(gè)東西的 功能 。

說(shuō)到這里好像我是自相矛盾：明明說(shuō)不認(rèn)為設(shè)計(jì)稿是起點(diǎn)，但是前面說(shuō)的話都是在說(shuō)設(shè)計(jì)稿。那我們從設(shè)計(jì)師的角度來(lái)看，他們的工作起點(diǎn)是什么？是甲方的需求，是這個(gè)東西要實(shí)現(xiàn)些什么。那他們的工作是什么？是把抽象的需求，具化成產(chǎn)品功能，并用圖片來(lái)描述產(chǎn)品功能，方便前端實(shí)現(xiàn)。對(duì)于一個(gè)前端工程師來(lái)說(shuō)，如果你只知道設(shè)計(jì)稿漂亮，而不能理解設(shè)計(jì)師想要傳達(dá)的具化后的功能性的話，那你永遠(yuǎn)不會(huì)用語(yǔ)義化標(biāo)簽。因此，前端工程師的工程起點(diǎn)是功能性。

進(jìn)一步想，如果一個(gè)前端工程師跨過(guò)設(shè)計(jì)師具化需求為功能這個(gè)過(guò)程，直接接觸需求，結(jié)果會(huì)怎樣？腦洞開(kāi)大一點(diǎn)：做出來(lái)的是一個(gè)長(zhǎng)得像線框圖原型的網(wǎng)站......（感覺(jué)這里有個(gè)莫名的笑點(diǎn)）

回到之前我遇到的問(wèn)題：沒(méi)有設(shè)計(jì)師，只有前端工程師的話，怎樣做出來(lái)一個(gè)還能看的網(wǎng)站？

我覺(jué)得是 從功能性出發(fā)的網(wǎng)頁(yè)構(gòu)建 ：用 模塊化 的方式，依照 功能性?xún)?yōu)先 的原則先寫(xiě)出來(lái)一個(gè)原型圖一樣的網(wǎng)站，最后再通過(guò)一些保持 一致性 的技巧讓使用者認(rèn)為這是一個(gè)網(wǎng)站的多個(gè)頁(yè)面，而非多個(gè)網(wǎng)站（又一個(gè)奇怪的笑點(diǎn)）。

通過(guò)這段描述會(huì)發(fā)現(xiàn)，從功能性出發(fā)的網(wǎng)頁(yè)構(gòu)建的優(yōu)勢(shì)在于快速建站，前端工程師可以脫離設(shè)計(jì)師直接接觸甲方。劣勢(shì)在于裝飾性的缺失。雖然實(shí)現(xiàn)功能性之后能做一些保持一致性的裝飾性工作加以彌補(bǔ)，但是這樣的設(shè)計(jì)缺乏整體考慮，算是速度與設(shè)計(jì)質(zhì)量之間的角力。

模塊化

根據(jù)甲方需求，細(xì)分成功能之后，每個(gè)功能其實(shí)就是一個(gè) div 標(biāo)簽（或者其他語(yǔ)義化標(biāo)簽）。

以會(huì)議網(wǎng)站為例子，其實(shí)已經(jīng)有一套固定的范式，從會(huì)議需要幾個(gè)頁(yè)面，每個(gè)頁(yè)面需要放什么東西，每一年的需求其實(shí)是一樣的，從需求到功能這個(gè)過(guò)程已經(jīng)被以前的網(wǎng)站做過(guò)了，這個(gè)時(shí)候前端要做的事情就是根據(jù)以前的功能模塊去粗取精，然后開(kāi)始 coding。

一個(gè)功能模塊就是一個(gè) div 的做法其實(shí)是自然的。響應(yīng)式設(shè)計(jì)開(kāi)始成為趨勢(shì)之后，網(wǎng)頁(yè)的設(shè)計(jì)變得同質(zhì)化，長(zhǎng)得都跟 Boxify 大同小異。

為了方便做響應(yīng)式，大部分響應(yīng)式模板都少有左右排版，大多是從上至下的排版。這其實(shí)給前端工程師按照需求寫(xiě)網(wǎng)站帶來(lái)便利：新增的模塊直接添加就可以，不需要考慮過(guò)于復(fù)雜的重排問(wèn)題。Boxify 是一個(gè)很典型的響應(yīng)式網(wǎng)站，每個(gè)橫條色塊承擔(dān)起一個(gè)單一功能。

對(duì)于前端工程師來(lái)說(shuō)，接到需求的第一步是明確和細(xì)化需求。細(xì)化后的需求對(duì)應(yīng)起一定的功能，最后根據(jù)這些功能從上至下一塊兒一塊兒寫(xiě)。

功能性?xún)?yōu)先

按照上一步做，呈現(xiàn)出來(lái)的很可能是難看的，因?yàn)椴粠в性O(shè)計(jì)，出來(lái)的頁(yè)面會(huì)簡(jiǎn)潔到可怕。就我自己來(lái)說(shuō)，每次到這種時(shí)候都會(huì)覺(jué)得蛋疼，因?yàn)閷徝赖奶煨圆辉试S自己寫(xiě)出來(lái)這么丑的頁(yè)面。但是為了快速實(shí)現(xiàn)需求，從始至終都應(yīng)該堅(jiān)信自己是在做正確的事情，更直白一點(diǎn)，功能性對(duì)我們來(lái)說(shuō)是最重要的，再丑也要堅(jiān)持把功能實(shí)現(xiàn)了再說(shuō)。

保持一致性

保持一致性是站在用戶(hù)角度思考得來(lái)的需求。

完成了功能性的網(wǎng)站是一個(gè) 可用 的網(wǎng)站，但是并不代表用戶(hù) 愿意用 。拋開(kāi)會(huì)議網(wǎng)站這種不管我做多丑你都得用的情況，其他情況下的網(wǎng)站設(shè)計(jì)中，美觀是一個(gè)要素。

當(dāng)一個(gè)網(wǎng)站的 10 個(gè)頁(yè)面都按照上面功能性?xún)?yōu)先的原則完成之后，得到的是丑丑的線框圖。然而，遵循一些很簡(jiǎn)單的一致性，就能輕易地讓用戶(hù)產(chǎn)生“這 10 個(gè)頁(yè)面是一個(gè)網(wǎng)站里面的”這樣的想法。同時(shí)在保持一致性的過(guò)程中，也對(duì)網(wǎng)站進(jìn)行了一定的美化。

對(duì)于一個(gè)網(wǎng)站下的多個(gè)頁(yè)面來(lái)說(shuō)，它們天然就具有一致性：

• 一樣的 nav 導(dǎo)航欄和footer

• 一致的網(wǎng)站的主要配色

• 一致的特殊字體

實(shí)際上，只要做到這三點(diǎn)，網(wǎng)站的大部分元素都會(huì)按照這三點(diǎn)更新一遍。而更新之后的網(wǎng)站距離丑又遠(yuǎn)了一步。

以 SIDAS 2016 網(wǎng)站為例。

• 一樣的 nav 導(dǎo)航欄和footer：nav 統(tǒng)一采用 Bootstrap 默認(rèn)的響應(yīng)式 nav。左側(cè)放上會(huì)議名稱(chēng)作為 LOGO（因?yàn)闀?huì)議沒(méi)有 LOGO 啊 ?_?）右側(cè)是導(dǎo)航的幾個(gè)頁(yè)面。footer 根據(jù)需求需要放上導(dǎo)航鏈接、其他會(huì)議鏈接、會(huì)議主辦人員聯(lián)系方式和社交管道，因此做成 4 個(gè) div，豎放。




• 一致的網(wǎng)站的主要配色：#f60c3e

• 一致的特殊字體：使用 dosis light 免費(fèi)字體作為網(wǎng)站主要內(nèi)容（如標(biāo)題和會(huì)議介紹內(nèi)容）的字體；其他字體優(yōu)先使用 helvetica。

除了這三點(diǎn)之外，還有很多細(xì)節(jié)可以美觀和優(yōu)化。例如為了節(jié)省版面，將幾個(gè)較少內(nèi)容的模塊合并起來(lái)；長(zhǎng)頁(yè)面添加回到頂部按鈕；hover 動(dòng)效等等。

從功能性出發(fā)的網(wǎng)頁(yè)構(gòu)建，將功能性放在裝飾性前，對(duì)于需求急迫的項(xiàng)目來(lái)說(shuō)可能是一種解決方案。應(yīng)用這種構(gòu)建方法，已經(jīng)成功地做成了 VALSE 和 SIDAS 兩個(gè)案例。對(duì)于那些沒(méi)有設(shè)計(jì)師幫助的前端工程師和想嘗試拋棄掉設(shè)計(jì)師做一個(gè)項(xiàng)目的前端工程師，不妨嘗試一下。

作者署名：Hongyang Wang

版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0

網(wǎng)站名稱(chēng)：前端開(kāi)發(fā)工程師眼中網(wǎng)站設(shè)計(jì)的功能性
文章地址：http://jinyejixie.com/news/104089.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)