本部落格已搬家
點此前往新部落格

新主機測試中...

為何別的網站無法像某官網設計得這麼「美」?

總統大選結束了,一些案例探討文章就出來了,看到一篇 蔡英文競選官網為何可以設計得這麼「美」? | 城市誌 寫了一些時程、製作細節、分工的內容,讀起來比一些純粹把功勞偏向某一方的文章更有飽足感。

文章說別人的網站案例為什麼可以做得很棒,但...
「人生最厲害就是這個BUT!」
「為什麼別人能,我們就不能?」

敗點一、各種限制與封印,無法讓網站變得很美
要討論人家為什麼成功、討論人家為什麼美,那「美」有一個標準答案嗎?
美雖然有很多原則與定理,但許多時候還是主觀的。

例如說總統候選人的網站美,有些人就要開始吐槽了:
首先是以人廢言論,對深藍選民而言,只要是異端拿出來的東西,一律都不喜歡、不支持、不合作。

例如以下這個笑話:

阿姨,妳知道嗎?柯P說如果他當市長,要爭取讓聖誕節放假
阿姨:就說這個人沒頭腦、沒經驗,放一天假會讓產業界損失多少你知道嗎?
而且放假能夠只有他要選的是臺北市長,難道放假可以只有臺北市放嗎?
柯文哲好好的醫生不當,搞什麼政治。如果是連勝文,他一定不會提這麼白癡的政見!

我憋了好久,終於等到阿姨霹靂啪啦罵完,最後跟她講,其實這是連公子的政見
我阿姨被我陰了以後,那個表情大概只比被鴿糞滴到好一點
然後她有結結巴巴的說:
其實現在那麼多年輕人在慶祝聖誕節,放個假讓大家可以逛百貨也能促進經濟呀~
by IrwinC @ 批踢踢實業坊›看板 StupidClown

去除政治這種之類影響心理的因素,還有一些民間的美學論點:
有人覺得網站版面留白這麼多,沒什麼東西,不就空心菜?
有人覺得什麼設計大師結果就畫了一個綠色圓圈,電腦字體打上去,他小孩也會畫?

以一個網站而言,誰來定義什麼叫美? 通常是出錢的人。
來討論一下業主覺得付錢之後,他覺得應該自己要得到怎樣的「成品」?

一般人從小到大常見的「商業設計」有哪些?
國語課本?
大潤發DM?
新開幕的特價廣告傳單?
火車站附近的廣告招牌?
新聞台的跑馬燈?
選舉文宣?
報紙?
租屋廣告?
公家機關文宣?
Yahoo! 奇摩首頁?
PChome 購物的首頁?

我們會說這種叫台式風格,
跟它畫上等號的只有經濟實惠、空間高利用率、效率,而不是美感。

如果突然端出這種東西:

有些人會看不懂、無法理解、無法接受。拍一張照片,把字打一打就放上去,感覺錢花得好不值得。應該要把像一般生活中「常見的設計」一樣,把畫面排得滿滿的,這樣才划算。設計師講什麼不重要,花錢的才是老大! 網站是做給自己看的!

另一種狀況: 覺得某個網站設計不錯,整體看起來的感覺很棒,想做得像他一樣?

「首頁這裡有一些圖文編排區塊,您這邊有相關的照片可以使用嗎?」
「只有一些堪稱攝影失敗範例的照片可用。」

「這裡有一個訊息曝光區,需要常常更新,您自己會編排跟作圖嗎?」
「我不太會用電腦。」

「他們的產品照片是請人商攝拍的,還有模特兒,而且品項多,排起來...」
「我的產品只有一項。」

「我們參考他的頁面配置,並針對您的產品特性與 logo 色系做些修改,然後因為您的預算有限,這部分的程式功能需要另外製作...」
「這麼麻煩幹嘛? 就做一模一樣就好了 抄一下不會嗎? 網路上公開的東西不是都可以隨便用嗎?」

「他這邊的文案寫得很好,看起來兼具網路行銷與專業素養,利於分享,引人注意,那您有文案可以介紹您的產品或您的企業嗎?」
「網路上找幾間同性質的抄一下,改一改就好了,那種東西不是大家都差不多嗎?」

所以這時候誰來定義美? 常常是出錢的人,還有依預算來決定。

設計師說這樣做會很美,出錢的人卻不這樣認為,還是無視規則與原理,硬是要改為「他認為的設計」。設計師說再花多一點預算把照片拍好、把一些部分做好,就可以很美,但是出錢的人卻不想花這筆錢。

美感只是表面的空談,美還沒講兩句,核心概念又轉回成本、效益、經濟上面去,這樣的成品會很美?

減法設計原則嗎? 少即是多? 但現實中卻常常在幹「把畫面上空白的地方填滿」這件事。設計師這樣提案,通常是「他覺得你很適合」「他用時光機看到以後一定會被改成這樣」,為了快速結案而走安全牌。一些趴數不夠的設計師想搞叛逆、教育客戶的下場,通常只是白費口舌,然後得到「不敢跟別人說這是我做的」的成品。

關於現代感,日式風格,高級風格之類的說法,但以前看過一位設計師 Wang Zhihong 的專訪,覺得他的說法很不錯。

所謂「日本風格」的聯想,或許是表達錯誤。今天日本設計成為細膩設計的標桿,而成細緻的代名詞而已。

其實我認為這時人們所看到的只是ㄧ種品質與嚴謹,只多數人把這種視覺經驗反射成日本這個國家。就像使用俗豔的顏色,不拘小節的手法,才很容易讓人認為是臺式風格。我想我們必需先釐清這中間的關係,否則能力難以進步,風格將成為阻礙。

不是做成日式風格就是美,而是美的成品,恰好跟要求精緻的日式風格類似。

敗點二、讓專業的來,不一定可以得到理想的結果
一般發包者理想中可接受的預算範圍,可以請到高手來組隊,還是只能請鬼開藥單?

花錢「讓專業的來」就不會有問題? 找人把規格開好,再找人發包做出來,就不會有問題? 但最後會發現,甲方以為自己的錢很大,實際上很小,那一丁點預算只夠讓「專業知識不足」的人員做出「能動就好」的東西,根本就遑論什麼專業規劃、解決使用者問題,或是幻想用微薄的報酬與人力,去拷貝數個大型專業團隊經營好幾年的產品。

乙方的專業也不是把東西做得完美無缺,而是先用低價把案子接進來,然後用差勁的設計或開發流程把東西製造出來,讓新人練功、讓客戶 debug,在預算內用各種 Costdown 工法,把爛東西包裝成好像可以結案,從中牟取利潤。通常得讓報價無限追加,讓案件進行到第 N 階段,甲方才有機會得到真正得到合用、好用的產品。

還有設計公司常見的「我們選你來做,不是因為規劃得功能有多完整,而是你們報價比較低。」
反正大家都在賭,貴的不一定真的好用,那就先選便宜的就好。搞得很多接案公司或 SOHO 都搞得像門口掛一幅春聯,上聯「低價接案」,下聯「收錢擺爛」,橫批「一分錢一分貨。」

敗點三、團隊不合作
成功案例是政治、商業設計、資訊數位多媒體設計,三方完美無間的合作,有人就會覺得:「像電影 瞞天過海 或是 金剛戰士 一樣,專業分工,人多好辦事。把人找齊,然後就可以做出很棒的東西了!」
專業分工的理想很棒,但現實中呢?

「有一工程,甲做 30 日可以完成,乙做 20 日可以完成,今兩人合作 4 日,明天可以給客戶看?」
「一個女人懷胎 10 個月可以生出孩子,那找十個女人,可以在 1 個月之內生出孩子吧!」
只有時程很趕才是真的。

製作端不求專業分工,而只求用最低的人力成本達到最高的效益,做出連自己都不敢用的東西。不求「瞞天過海」或「天龍特攻隊」,只求請到一個全能的「馬蓋仙」。如果不想當馬蓋仙,想要體驗專業分工的團隊,大概只能到大公司裡面去當小齒輪。

不同領域的合作,對於各種沒經驗的人員來說,往往是惡夢。
有些小型網頁公司不負責企業形象識別,也會遇到本身真的有 VI 或 CIS 的客戶,所以剛好都跟成功案例中的一樣,是三方合作耶! 但只會發生:

  • 實際執行方與規劃方的思考,完全不在同一個水平裡面。
  • 錯誤的需求造成錯誤的規畫,然後要開始錯誤的執行,妄想得到正確的結果。
  • 可預期的失敗,但是決策者不知道。
  • 技術太高端,可使用的使用者太少,還要花許多時間做 fallback。
  • 提議不錯,但與第三方組織/法規牴觸。
  • 以為別人都該知道你知道的東西。
  • 一言堂,講了又不聽。
  • 執行成果有誤差,做的人跟說的人覺得都是對方的錯。

上述是乙方製作團隊的問題,另外還有甲方的問題:

  • 公司內部嫌隙。
  • 聯絡窗口對其他部門的專業內容傳達不清。
  • 聯絡窗口提的,與實際公司內部需求有落差。
  • 最不常上網的人,由他決定網站要長怎樣。
  • 吃米不知道米價。

成也團隊合作,敗在團隊不合作。

敗點四、設計的事先調查沒有用
在該成功案例的文章中有提到

團隊為此做了不少前期功課。「我們研究了相當多國外的競選網站,當然競選網站有許多特別的呈現需求...

我其實挺好奇競選網站這種案例要如何研究與取材? 候選人的網站會有捐款流程、政見呈現方式、各種資訊流,與一般基本企業形象網站、購物網站、活動網站、內容型網站、入口網站、線上工具型網站....的網站架構、開發思維、使用者思維都有一些不同。

當年歐巴馬勝選時,有許多文章分析候選人的各種設計。外國的月亮很圓,但是否適合國情不同的亞洲開發中國家? 蘇貞昌 2010 年競選台北市長時,也運用了很多數位工具,線上直播、定點打卡、網路商店、線上捐款、整體的視覺形象風格也還算新潮,但是落選了......一般不太會做敗者的案例分析,因為沒有討論的價值。而且有些網站是「活動辦完」就會消失的,競選網站就是其一。

事先做了許多調查與分析,對於設計過程有幫助嗎?
但有時候案例本身的素質也是一個要點:

「我昨天上網去找凱 X 模特兒經紀公司的名冊來挑女朋友,
不知道為什麼都沒挑到喜歡的,是不是這家模特兒經紀公司不夠好呢?」

「我都把金城武的照片給百元剪髮的看了,他怎麼沒有把我剪成跟金城武一樣呢?」

一般人講這種話只會被拍起來放到爆 X 公社當笑柄,但是在設計公司或印刷廠卻常常聽到這種「理所當然」概念的言論,甚至還停留在「網路上的東西都是免費的,幹嘛花錢買圖片?」不同類型、產業別、時間點做的網站,就有不同的製作方式與規劃,東方的方塊字與西方文字的結構也完全不同,照片的構圖跟風格色系也不同,做出來的感覺也不可能會一樣。專業人士樂意替人解決問題,但問題常常在於預算有限,或是根本問錯問題,事情會往正確的方向進展嗎?

更別提現在錢變小了,得省著點花,比稿、比價風格盛行,花了許多時間與心思去規劃、評估可行性,結果沒接到案子,或是規劃書被拿去給更便宜的估價,要專業人士保持熱情...的花時間做白工?

國內的設計師每年看老外寫的「來年網頁視覺設計趨勢預測」打手ㄑ...(此處消音處理),但到了實際上場,常常還是逃脫不了五福臨門首頁套餐組:「首頁動畫、跑馬燈、漸層水晶立體感按鈕、小連結圖示、側邊固定捲動圖片。」

這次終於在選舉網站這種目標受眾較大的網站上,發現這些現代的視覺設計元素的蹤跡,例如首頁大影片、扁平式按鈕。雖然每個產業別狀況不同,不一定要跟流行,但這也許有助於帶動整體環境的推進,而不是為了讓出錢的人爽而隨便妥協,老是做一些不合時宜、有礙觀瞻的東西。

除了上述的「金城武理論」跟「名模名冊理論」,還有一些民間常聽到的概念,也會導致成品慘不忍睹:

  • 每個功能都很重要,所以都要做得超顯眼。結果兜在一起之後顯得超亂。
  • 之前的人都這樣做,為了安全起見,我們還是...
  • 這邊還有留白,間距太大,應該要找東西把它填滿。
  • 要熱鬧、繽紛、豐富、跳一點,下場是不知道這東西要表達什麼? 主題為何?
  • logo 大一點,產品名稱大一點。把真正能吸引人的文字、Call to action 按鈕排擠到邊緣地帶。

許多專業公司常會分享一些「做 XX 很重要」「要做 XX 沒有這麼簡單」的文章來傳達觀念,想要營要專業形象,並帶動整體環境的進步,「帶動」這件事是很重要的,就像香蕉熟了就變軟變好吃了,溝通起來就比較容易了?

事實是許多人不會去關心所謂「美感」、「某某新方法有多棒」、「與自己不相干的其他產業新聞」,夜裡想了千百條路,早上起來還是選便宜的那個,或是等到發現我的對手有 XX ,我們也來學他。

敗點五、設計規範的實用性不足,甚至沒有設計規範
商業設計的專家都會說,對於品牌而言,CIS(企業識別系統)是很重要的;
管理學的專家都會說,SOP 或是____是很重要的;
資訊科學專家說某某架構、____化是很重要的,
專案管理專家說專案進行時,寫____文件與____報告是重要的,
各種領域都會強調一些標準流程與 Guideline 的重要性,
簡直就是「平生不識 Guideline,就稱多會做也枉然。」

在網頁設計來說,畫面上各種狀態的按鈕、操作元件,都是可以被規範的,只要發現自己常常在做重複的東西,就該把重複的東西模組化。版面的區塊配置與配色也可以拆開,達到最高的彈性,甚至追求訂立團隊的開發流程規範。

點亮台灣・設計規範 Web Design Guideline 讓大家知道設計不是「出錢的人最大」「做給自已看,憑感覺來製作」,雖然有人當了領頭羊,但還是看得到吃不到,在現實中的一般小型案例,Guideline, wireframe, mockup 還是很有距離感的東西,拿出來常常沒人能理解,反正開發時一定還會再遇到 wireframe 沒有寫的情況。

規範不能吃,趕快結案收錢才是真的,結案的錢才能吃。原地踏步就有錢賺,革新這種事還是交給別人就好了?

現實是坊間更多「XX 無用論」、「如何建立真正有用的 XX」,
甚至還有專門幫人做出「假裝流程有在照規範走」的服務。

差勁的規範只會綁手綁腳,規劃不足、或是多年前製作的 VI 在網頁設計上的應用,實務上只會遇到:
「我們在網路這邊是一個全新出發的新方向,不要用 VI 上面的規範,大家都看膩了」
「不要照規範走,要跳一點!
「這種排列方式或配色在 VI 裡面是不允許的」「反正上面的人就說改這樣」

鄉民常說台鐵誤點發什麼新聞? 等沒誤點再來發新聞!
網頁設計有規範,而且還真的照規範做出東西,原來也是一個新聞。

敗點六、無法實現的創意,不叫創意
競選網站的設計目的,在於候選人的形象營造與各種資訊的傳達,
資訊能給最多人看到才是真的,酷炫、新技術不是重點。

該成功案例提出 4 點設計原則:

  • 行動裝置體驗
  • 高解析度
  • 通用、簡易的 UI 元件
  • 規範是活的

規範是活的,但人的腦袋常常是死的,與其要說服一堆人、開不完的會,又被一堆長官加油添醋,還是不如用最簡單的方法+最爛的技術來解決,聽說這個叫做與勢推移啊。原則人人會講,但真的能做到的才敢大聲。做得出來的創意才叫做創意,不然哆啦 A 夢的漫畫豈不就是創新服務寶典了?

資訊業務的溝通面難度常常在於: 要說服業主買一些他自己根本沒在用、覺得不重要的東西,在網站上放一些業主也不知道是幹嘛用的東西。 FunCity 執行長的文章講得讓我很有共鳴:

「傳統企業不願意參與產業革命常是基於四種原因: 看不見、看不起、看不懂、跟不上。」

剛剛在電視上看到一個蓋台廣告,是某種由使用者提供內容的線上服務平台,在 2016 年,竟然還有人新做的線上服務網站,無視使用者的行動裝置操作體驗與 Google 手機版搜尋引擎的排名政策,用手機看還要一直放大縮小,是因為產業別關係,資料不需要行動裝置看嗎? 不是,該行業的每一個競爭對手都在比 APP 有多好用耶。

實務製作面上,網頁從無到有的製作階段就會遇到許多問題,網頁生出來之後,將會碰到更多問題,例如許多前端技術的呈現效果,會受到瀏覽者的網路、瀏覽器環境影響。對開發人員來說,有千百種環境跟變因會讓網站爛掉,但是對於使用者而言,他看到的那個爛掉的畫面就是一切。

這次的總統競選網站,對一些已經停止支援的瀏覽器與作業系統,支援性如何呢?

連蔡英文跟宋楚瑜都沒在管 IE8 了,您還在用過時的舊瀏覽器嗎? 繼 Windows XP 的支援已終止2016年1月12日起微軟將不支援IE8 9 10更新
我們應該可以多用一點新技術了。

敗點七、後續沒有人會維護
許多網站首頁有華麗的 flash 動畫,曾經很美,但是在今日呢,時代的美感與時俱進,當年的美感在今日看來甚至是羞恥。資訊技術也不斷更新,華麗的 flash 動畫根本無法在智慧型手機上面直接瀏覽,資訊軟體產品不是大同電鍋,別奢望一個網站可以用一輩子。

網頁的內容也需要有更新,新產品、新活動、新公告,不然上去放個新年快樂,讓人家知道這家公司還活著也好。雖然現在有很多像 weebly, wix 的免費線上網站建置工具,方便編排、範本多,但花錢請人做網站的企業還是很多,通常是需求比較高端,免費工具不合用,或是自己沒有足夠的編輯能力,需要別人服務。

何謂足夠的網頁編輯維護能力?

  • 要會用電腦,會打字。
  • 有資訊邏輯,知道何謂圖片、表格、超連結,會把檔案上傳到網路上。
  • 知道螢幕上「看到的資料」是有人輸入的,不是從樹上長出來的。
  • 知道螢幕上「會跟你互動的功能」是有人做出來的,不是從地上長出來的。
  • 擁有著作權與授權圖片的概念,而不是「網路上的東西都是免費的」「這個大陸網站說免費,我隨便拿來用都不會出事。」
  • 有足夠的內容產出能力,可以自己無中生有產出視覺化的圖像,如攝影、繪圖、影像處理等。
  • 知道網路上的目標族群在想什麼、需要什麼,而不是放一些沒人會看的內容。

還有更進階的能力需求:

  • 知道一般資訊服務的價位在哪?
  • 知道 Yahoo 首頁上的內容大部分都是買廣告來的。
  • 知道 Yahoo 或 Google 搜尋引擎中有一些底色不一樣的連結,也是買廣告的。
  • 了解 HTML, CSS,知道畫面上的東西是怎麼來的,而不是只會透過工具去操作,沒了工具就不會用。
  • 給一個編輯框,知道如何讓內容在電腦上顯示得正常,在手機上顯示正常,在 email 中顯示正常。
  • 頁面上的編排改壞了,知道如何去修復,而不是重新排一個看起來差不多的。

但是設計相關的東西就跟水電師傅一樣,絕大部分的行業不會自己在團隊中養水電師傅,都是自己人兼著做,如非情勢確有必要,絕不另外花錢。

漂亮網站的成本不只在建置,後續的維持與維護也是挺重要的,設計師在網站建置期間,塞了許多假字、假圖促進結案。但客戶真的要開始排自己的東西的時候,災難就來了。

編排在網頁上的內容,必須同時考慮品牌特性、目標族群、畫面視覺的美觀、資訊呈現的動線、此內容在行銷上、在 SEO 的優化等等,在一定程度的視覺、編排、功能需求上,網頁編輯排版會變成專業需求,但卻常被低估為普通的行政文書工作,也就不要太奢求編排出來的內容是否有美感了。

最常安慰自己的話就是: 美感不重要,有生意、能生存才是真的。

敗點八、易用性,比美更重要的事
設計師會在意畫面上使用的字型有何淵源、配色是否流行、符號有何意象,圖片是否能傳達概念,整體視覺上的風格,這些事很重要,但一個網站還有許多更重要的事,例如商業價值,還有使用者介面與使用者體驗。

以使用者介面來說,如本部落格以前的文章 從三姊弟布丁事件論購物系統流程優化 的結論,網站頁面通常是一個互動的介面,不是越貴越好,更不是看起來酷炫漂亮又潮就好,以購物系統來說,必須要能減少消費者的糾紛,降低店家工作流程的失誤,才能稱為一個好的系統。

用此概念來檢視一些修改需求,就會發現出許多問題。例如:

  • 一個只是顯示當前狀態的元件,卻做得像按鈕,讓人點老天卻什麼事都沒發生,明明是機能性的工具,還以為在玩密室解謎遊戲呢!
  • 充滿讓人容易誤操作的排列或操作流程,如執行跟刪除按鈕放在一起,靠得很近,容易讓人誤點。
  • 操作上毫無統一性,如同樣兩個框框疊在一起的圖案,一個代表開新分頁,在另一個地方卻是加入群組。
  • 完全不考慮使用者的年齡層與特性,畫面上有許多按鈕,但是按鈕上只有中國書法風格的抽象圖示,沒有半個文字,按鈕圖案做得又小又精緻。
  • 製造超乎預期的互動行為,例如網頁旁邊放了一排 f, G+, Line, email ...按鈕,以為是分享網頁用的呢! 結果 FB 點了是到粉絲團,Google+ 點了是分享文章,Line 點了是到店家的 Line@ 生活圈,Email 點了是聯絡表單,WTF?
  • 視覺稿畫得很漂亮,提案時很會嘴砲,但功能與操作流程上缺乏邏輯,也根本無法開發出來。

在這種情況下,還在討論視覺風格要年輕小清新,圖案是黑底白邊還是白底黑邊,文字要多大,都是沒什麼意義的。不管視覺上有多美,這個產品有可能會成功、好用、受歡迎嗎?

政府機關的美感跑哪去了?
台灣政府機關網站為什麼無法像 XX 官網設計得這麼「美」? 會問這問題的人,建議先去了解一下採購法、發包流程、評鑑項目,還有看一下 NCC 的無障礙網頁的設計規範與檢測項目。

然後美感並不是公務人員考試的必要科目,如何寫公文才是。要讓政府機關的網站視覺設計與使用者介面設計,接近一般年輕人或視覺設計師認可的美感,這可是會動搖國本、出人命的

最可悲的就是,政府機關的東西無法不爽不要用,即使很醜、很瞎、很難用,違背一般人的邏輯與所有設計原則。納稅人還是得付錢,而且不得不看、不得不用。

但是 2015 年還是不乏令人耳目一新的公務機關網站,或是政府的活動宣傳網站。
例如:

結論:好的婚姻只有一種,不好的婚姻有千百種
如果有超棒的團隊,以上的問題通通都沒有了嗎?
超棒的團隊,常常能把各種問題化為無形,只端出好的一面。但是淘寶、Google 的超強團隊,還是不乏一些失敗的作品,雖然作品看起來沒有不美,但是無法創造價值,還是一場空。

如果有口袋超深的預算,以上的問題通通都沒有了嗎?
每隔一陣子也會看到新聞說(某某某)砸大錢,要幹掉國外的(某線上服務),成為(某產品)殺手,做台灣(某行業)第一,不然就是公務部門又有個幾年幾百億的規劃,口袋也算是有點深,那最後真的有做出符合期待的產品嗎?

這世界上需要多一點正面能量,帶大家提升成長。
充滿愛的時刻,世界會越來越完美。

延伸閱讀
蔡英文競選官網為何可以設計得這麼「美」? | 城市誌
【廣告】誰讓理性小英,說出動人故事? 專訪小英廣告操盤手 - 動腦新聞
FunCity 執行長談電商:傳統企業電商化,千萬別掉進去的那些坑
為什麼日本人設計出來的網站如此擁擠? - Inside 硬塞的網路趨勢觀察 回應比該文章本身還精采。
「醜感」也能累積,你的市容別想好好看 - The News Lens 關鍵評論網


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


Comments 轉載文章請留言說一聲

comments powered by Disqus