一般公司,甚至包含現(xiàn)在的網(wǎng)絡創(chuàng)新公司,對于網(wǎng)站設(shè)計的想像,就是請「網(wǎng)頁設(shè)計師」從平面設(shè)計開始,畫出這個網(wǎng)站的look & feel(看起來、感覺起來如何),甚至要你多設(shè)計幾個樣稿、比稿之后,挑選中意的設(shè)計,再送給前端工程師切版、后端工程師套版,網(wǎng)站就上線了。我們暫時把這種流程稱為「傳統(tǒng)設(shè)計流程」好了。
那為什么我們的商業(yè)網(wǎng)站,多數(shù)設(shè)計還是不到及格邊緣呢?即使一開始設(shè)計不錯,但為什么品質(zhì)就是會慢慢向下變調(diào)呢?
其實問題就在于前面提到這種制作方法與流程,已經(jīng)不符合時代了。
一般大家認知的「傳統(tǒng)設(shè)計流程」也就是大概距離15 年前、網(wǎng)絡泡沫時代的「我的第一個Homepage」的作法。當時的企業(yè)非常勇敢,我也參與其中,無論任何公司都要搭上.COM 的潮流。作法確實是直接跳過HTML 到Adobe 軟體去制作所有的網(wǎng)頁。而其中Adobe 軟體就包了好幾個項目:Photoshop、Dreamweaver、Fireworks、Flash 等等,主宰了大概快十年的網(wǎng)頁設(shè)計市場。
不過也因為這種「傳統(tǒng)設(shè)計流程」模式固定下來很久??往往網(wǎng)頁設(shè)計公司經(jīng)營到最后,變成專門供應廣告設(shè)計事務所制作「活動網(wǎng)站」,這種案例并不少見。也常常有人去應征「網(wǎng)頁設(shè)計師」,搞到最后都在做線上EDM 或活動網(wǎng)站,更慘一點還有幫忙做廣告banner??設(shè)計師自己感覺到連尊嚴都沒了。
更慘的是?????04 征才的內(nèi)容就能知道,連現(xiàn)在2016 當紅網(wǎng)絡創(chuàng)新事業(yè)的公司還是一樣的狀況。如果這個市場環(huán)境里的「網(wǎng)頁設(shè)計師」職位內(nèi)容一直是混亂的,代表企業(yè)看待網(wǎng)站的層級就有根本上的問題:網(wǎng)站普遍在企業(yè)內(nèi)既然被視為是次要的、替補的,企業(yè)對于網(wǎng)站設(shè)計的想法,就不會與時俱進。
這樣的流程早在2010 之前就被淘汰了,而我們還在呼吁這件事。
時代改變后,如果「品牌、傳播媒體」或「平臺」還使用「傳統(tǒng)設(shè)計流程」來制作,悲劇就會不斷的重復發(fā)生
首先,用「平面」來設(shè)計網(wǎng)站,就好像在一張紙上畫圖,既不能互動,又不能想像在各種不同寬度上的模樣。平面對我們的用途,僅能確認一個大概的方向。再來,如果一開始就在平面上模擬到最后的模樣,到最后切版、套版、上線之后,經(jīng)營幾個月,風格一定會脫離一開始設(shè)計師模擬的畫面。然后過一季面臨各種文章更新、或新增功能、需求,整個風格就開始崩壞。
上面一段短敘,我們就能發(fā)現(xiàn)幾個現(xiàn)代要因應的問題:
要求更豐富的互動操作
面對多樣化上網(wǎng)裝置
工程品質(zhì):永續(xù)營運、品質(zhì)的一致性
1. 更豐富的互動操作
網(wǎng)站如果只是從平面設(shè)計搬到網(wǎng)絡上,那就不叫網(wǎng)站,那只能稱做EDM,就像是你在服飾網(wǎng)站訂閱的電子報一樣,那也是HTML 寫成的,但完全不能操作。你頂多只能點選連到該去的地方而已。而臺灣有許多網(wǎng)站就是這樣設(shè)計完成的,前端工程師必須讓互動成真,必須修改幾乎要砍掉重練的HTML 原始碼。另外,我們現(xiàn)在的輸入裝置除了滑鼠以外,可能還有觸控版、滾輪、或是觸控螢幕等。這是平面設(shè)計階段完全體會不到的。
2. 多樣化上網(wǎng)裝置
在2000 年的網(wǎng)站設(shè)計觀念,從桌上型電腦開始到筆記型電腦,就有著各種不同的大小,但還好這些裝置螢幕都還算大,如果視窗放的太小,無法看到網(wǎng)站的全貌,就算他活該。我們現(xiàn)在上網(wǎng)的方法變多了,在2016 年,有平版電腦、手機電腦(其實現(xiàn)代的手機應該叫做隨身手持電腦附屬手機功能)、甚至還有全螢幕分割模式、TV 或其他物聯(lián)網(wǎng)瀏覽器等,你不可預期的各種尺寸大小。這也是平面設(shè)計階段完全體會不到的。
3. 工程品質(zhì):永續(xù)營運、品質(zhì)的一致性
從平面思考的網(wǎng)頁設(shè)計,其結(jié)果再怎么讓人「眼睛一亮、哇、不得了」,都是一時的激情。等到交給前端工程師開始切版、套版之后,就不再是那么熱血的事。因為純平面網(wǎng)頁設(shè)計師不知道程式的限制在哪,而純前端工程師也不知道設(shè)計的限制在哪里。都不知道,自然也無法突破障礙,雙方都只能打出最安全的牌:盡量不要出錯。
歸結(jié)上面三點,你就會知道到底為什么公司會為了因應各種活動、專案,就得勞師動眾,把整個開發(fā)團隊、設(shè)計師的產(chǎn)能都吃光、產(chǎn)能都調(diào)度去做臨時的專案。加上RWD 觀念興盛,這些工作難度又再度雪上加霜。這完完全全就是因為決策層缺乏系統(tǒng)觀念??膳碌氖墙?jīng)過惡性循環(huán)、缺乏人力的情況下,也會誤認為設(shè)計一套系統(tǒng)是浪費錢。
我們需要的是「設(shè)計系統(tǒng)」本身,而不是只有設(shè)計頁面長相。這就是目前北京商業(yè)網(wǎng)站設(shè)計品質(zhì)遇到困境的主因。事前做了妥善準備,在有設(shè)計系統(tǒng)的狀況下,完成一個新專案就不再是那么艱辛的事,也許還可以把重復浪費使用的精力,拿去挑戰(zhàn)更困難或更高收益的內(nèi)容。
設(shè)計系統(tǒng)
做產(chǎn)品前,先做這個產(chǎn)品的系統(tǒng)。做一整套事業(yè)之前,先做這整套事業(yè)的系統(tǒng)。分子化元件之后,使用設(shè)計系統(tǒng)來完成你的前線產(chǎn)品,其中可能包含(不限于):
*跨媒體視覺識別系統(tǒng)(平面版、數(shù)位版)
*跨平臺UI元件系統(tǒng)(HTML/CSS/JS/或其他平臺相關(guān)格式之Style Guide)
*商業(yè)邏輯分子化系統(tǒng)
設(shè)計系統(tǒng)本身確實需要額外的計畫、預算,企業(yè)主如何讓設(shè)計系統(tǒng)成為可能?
UBER brand guide
Google 推出Material Design 統(tǒng)一旗下產(chǎn)品體驗
當想法對了,就會產(chǎn)出額外要做的事,也會省下事后不必要的浪費。不過??若要問企業(yè)有沒有認真?從計畫與預算就能夠看出。
如果只是交代設(shè)計師、工程師在原有專案的壓力之下,剩余時間又多做一個系統(tǒng)設(shè)計,相信只會提高離職率而已。
這必須是一個「認真的專案」,而不是「Side Project」之類的勵志成功小品。
調(diào)查規(guī)模
其實,只要先透過調(diào)查、診斷,先確認企業(yè)1–2年之內(nèi)的野心、布署、未來可能計畫,就能統(tǒng)整出適合自己事業(yè)的規(guī)模,需要做出的設(shè)計系統(tǒng)范圍。這步驟無論是內(nèi)部主管自己多花來做、或請外部專業(yè)公司評估都可以。
不同規(guī)模的事業(yè)體、不同產(chǎn)業(yè),制作設(shè)計系統(tǒng)的規(guī)模、范圍也就不同。我們不一定要花非常多的預算來做這件事,僅需求合理、合乎自己的需要即可。
下放資源
有了大致的范圍后,根據(jù)制作量的多寡,少至一個禮拜只挪周五來做,多至成立三個人的小組來負責做這件事,也都是比完全不做來的更好。而你投入的資源,可以是現(xiàn)成的人月時間,或是你的預算:例如產(chǎn)品的規(guī)模龐大,委托專業(yè)的設(shè)計公司來做,可能會比花現(xiàn)成的人力還要省時省錢。若資源暫時不足,也沒有關(guān)系。其重點就在于真正的面對這件事,是高于第一線業(yè)務的層級,非做不可。必須安排企業(yè)中菁英的決策者來下定決心、計畫、安排未來的時間與確切預算下去執(zhí)行。等待在企業(yè)最有能力承擔的時候,把底打好。另外,設(shè)計系統(tǒng)也需要時俱進,當事業(yè)、產(chǎn)品線有擴展后,研發(fā)必須再回饋、增長自己的系統(tǒng),長久以來就能夠發(fā)揮對產(chǎn)業(yè)的影響力。
只有這么做,網(wǎng)絡事業(yè)才能呈現(xiàn)出品牌的樣稿,隨設(shè)計系統(tǒng)的累積不斷改進品質(zhì)。面對設(shè)計人才的需求,也變?yōu)槭褂谜嬲母唠A人才。而前線業(yè)務的進行也變得更容易有規(guī)則,降低人事變動對企業(yè)的殺傷力。網(wǎng)絡產(chǎn)業(yè)才會開始樂觀、令人向往了。