網站其實不難懂

所謂設計到底包含哪些項目?

2022/02/23
所謂設計到底包含哪些項目
為什麼網頁設計公司的人問我有沒有設計稿,不就是把想法告訴網頁設計公司就能架好網站了嗎?另外我聽說設計還分為視覺設計或UIUX之類的,這是什麼意思?

初次接觸網站的客戶,經常會遇到這樣子的疑惑,「設計」確實還會分工好幾個層面,逐層完成設計才會出現您看到的網站。網站擁有良好體驗及美觀是必須的,因此不能跳過設計階段直接編寫程式碼,避免產生悲劇。

讓我用淺顯易懂的方式跟您說說。

設計大致分類

從大到小來看,每個階段都是依循上個層級制定的戰略方針前進,就像是建築一樣必須每層蓋穩再繼續往上。最高方針是結構設計,規劃整個專案需要哪些頁面、功能、動線。再來才是 UX 設計使用者體驗或故事,此階段大部分還是以文字示意,想像網站實際運行時想要表達什麼、想要帶給使用者什麼體驗。WireFrame 則是盡量將 UX 寫出來的文件具象化,增強受眾對於網站的想像,也可以提供給下階段使用。UI 則已經是網站實際會出現的長相,只不過是用畫的,而不是實際程式碼切版。最後視覺設計則是在各區塊畫龍點睛,優化視覺美觀。

step1 結構設計

整個專案的最高方針,如果這裡沒有花功夫好好思考,恐怕接下來各環節都會無所適從。主要是規劃需要哪些頁面、功能、動線,無論是要跟客戶溝通或是跟其他設計師溝通,甚至是用來幫助自己對專案想法更具體,你都會需要將想到的結構寫下來,能夠補充重要細節的話更好。

step2 UX

User Experience,溝通使用者體驗,所謂體驗用白話來說,就是使用者逛網頁的舒適度。
從負面角度來看,像是會員登入要能記住帳號密碼、刪除重要資料前需跳出提醒,這些事情很小,但沒做到絕對會讓使用者很不開心。
從正面角度來看,你可以透過細節告訴使用者你想表達什麼,例如 Youtube Music,你沒付費訂閱一樣可以免費使用,但是會一直跳出廣告。

UX 設計方式差不多是透過大量訪談潛在使用者、設計情境題目、收集並分析結果,以及將業主最想表達或最在意的資訊如何無違和表達,UX 階段非常需要經驗。

step3 WireFrame

大家應該都初步知道網站開發前會畫設計稿,實際上在這個設計稿之前還有框線圖階段,可以想像成做勞作前會先用鉛筆在紙上畫草稿,把心中的想法大致勾勒出來。大家就可以根據這個框線圖草稿討論,那邊動線要怎麼走、這個頁面要連結哪裡、按鈕應該怎麼擺,這時候會比 UX 階段更容易挑出一些盲點。

step4 UI

緊接著大家熟悉的設計稿就是出現在這個階段,User Interface,以視覺做圖方式畫出真正的網頁樣式,設計方向盡量不脫離前面階段制定的原則,當然如果真的是前面階段有誤,那就滾動式調整吧!

UI 會是前端工程師切版時必須依據的藍圖,此時身負兩大任務,第一是呈現前面階段所設計的體驗,第二是視覺風格。視覺風格通常會先用口說或文字方式與業主討論,例如喜歡黃色、帶給人親切感、簡約風、類似 Airbnb 那樣,這些都是重要線索,要將這些線索描繪成形並且讓業主滿意。

step5 視覺設計

畫龍點睛、神來一筆,常在網站上看到的主視覺、繪畫、特殊字型等等,都是在 UI 階段制定好的各個位置區塊補上,讓網頁整體氣氛點綴加分,有時候甚至視覺設計才是網頁的核心主角。各位不妨參考 Apple 官網,UIUX 設計架構都非常簡單,但那個商品圖片有夠正點,把整個網站撐起來!

每個步驟都是順著上個階段建立的基礎繼續延伸,目的是逐步調整細節並確保方向正確,尤其是大型專案,建議一定要按部就班,可以最大程度降低後續修改的成本。