由街市執檔到網頁執code:我嘅「睇餸食飯」設計學

逍遥阁 於 1 天前發表 收藏文章
琴日同個客開會,佢睇完我個設計稿,彈咗句:「阿陳生,你呢個版,好似『爭咁啲嘢』咁喎。」我望住個Mon,再望吓佢,心裡面把聲係:「大佬,你俾個 budget 同時間,就係咁多啦,你想我整到去國金匯咁,都要有料至得㗎。」當然,把聲只可以留喺個心入面,面口依然係個專業笑容:「明白,等我再『執靚佢』。」

呢句「執靚佢」,令我諗起老豆。

我老豆係街市賣魚嘅。細個睇住佢開檔,將啲魚鱗刮得乾乾淨淨,啲冰碎鋪到靚一靚,連啲蔥都擺到好似花飾咁。佢成日話:「仔,做嘢要『睇餸食飯』。今日啲魚靚,就擺當眼處;啲冰鮮唔多靚嘅,就搭棵芫茜,賣平啲,一樣有人要。最緊要係,個檔口要整整齊齊,令人行過都想埋嚟睇吓。」

嗰陣時覺得,賣魚咋嘛,使唔使搞到咁藝術啊?點知而家做網頁設計,先至恍然大悟——老豆根本就係個 UX/UI 大師!佢嘅「睇餸食飯」,就係我哋成日掛喺嘴邊嘅「在限制中尋找創新」;佢嘅「執靚個檔口」,就係「用戶體驗優化」。

第一課:個「檔口」要就腳(用戶體驗 UX)

老豆個魚檔,永遠唔會將啲濕漉漉嘅水桶擺出通道,因為會「阻住個客」。同樣地,我做網頁,第一個諗法就係:「個客(網站訪客)會點行?」佢哋想搵嘅「餸」(資訊/服務),放喺邊度最就手?

試過有個茶餐廳老闆叫我整網頁,佢最初乜都想放首頁:餐單、關於我們、最新優惠、聯絡方法、仲要加段創業史視頻。我同佢講:「陳老闆,你個舖頭門口,會唔會同時貼滿晒餐牌、價錢表、老闆你張畢業證書、同埋張租契?」佢呆一呆。我繼續:「個客入你舖頭,第一眼最想睇到咩?梗係今日有咩好食同幾多錢啦!」

呢個就係「動線設計」。網頁就係你嘅虛擬舖頭,個客撳入嚟,三秒內搵唔到想要嘅嘢,就會好似行過一間亂七八糟嘅舖頭咁,轉身就走。老豆教識我,個「檔口」嘅擺設,要符合行人嘅直覺。放個「落單」掣,就要好似街市個磅咁,永遠喺最順手嘅位置。

第二課:芫茜蔥嘅美學(用戶界面 UI)

我老豆唔會求其掉棵芫茜落條魚度,佢會斜斜地、有藝術感咁擺喺魚鰓旁邊。「咁樣先『睇得』嘛,」佢話。

網頁設計,啲「芫茜蔥」就係啲 icon、顏色、字型、留白。曾經我沉迷於好型好潮嘅設計,用晒啲幼線字、對比度好低嘅顏色。點知個客同我講:「後生仔,你個網好靚,但我阿媽睇唔到啲字喎。」當頭棒喝!

我諗返起老豆,佢把魚鱗刮得閃令令,唔係為咗自己睇得開心,係為咗令個客覺得「呢條魚好新鮮」。網頁嘅「靚」,唔係設計師自己覺得靚,係要個目標受眾覺得清楚、舒服、易用。而家我揀字型,一定會諗吓長輩睇唔睇到;揀顏色,會諗吓色弱人士分唔分到。呢啲唔係限制,而係專業,就好似老豆知道師奶鍾意芫茜多過香茅一樣,係一種對使用者嘅體貼。

第三課:學識「手板眼見」工夫(前端開發)

老豆片魚,手起刀落,一氣呵成。把刀利唔利,手法熟唔熟,直接影響件產品嘅賣同。我呢行嘅「片魚」,就係寫前端 Code(HTML, CSS, JavaScript)。

初學嘅時候,成日寫到個網「睇落似樣」,但撳落去就「穿崩」。個按鈕郁起上嚟窒下窒下,手機睇又走位。呢個時候,我就會諗起老豆話:「後生仔,做嘢要練到『手板眼見』工夫,唔可以求其。」於是我死死地氣,對住個 Mon,逐行 Code 去「執」,睇吓點樣可以令個動畫流暢啲,點樣用 CSS 令個版面喺唔同尺寸嘅 Mon 都「企企理理」。

呢個過程好磨人,但當你見到自己寫出嚟嘅網頁,順滑如絲,喺任何裝置上都展示得妥妥貼貼,嗰種滿足感,就等同老豆片出一條完美魚生,連隔離檔口都走過嚟讚兩句一樣。

總結:個「網」就係我個新檔口

老豆個魚檔,服務嘅係街坊。我而家做嘅網頁,服務嘅係全世界嘅網民。但核心精神,原來從來無變過。就係「企喺用家角度諗」——師奶想買條新鮮魚,網民想快靚正搵到資訊。我老豆用佢對手去「執靚」個實體檔口;我用鍵盤同滑鼠,去「執靚」個虛擬空間。

所以,當個客同我講「執靚佢」嘅時候,我已經唔會再心裡抱怨。我會笑一笑,諗起老豆把刮鱗刀,然後答:「無問題,等我幫你『執到靚一靚』,等個客行過都想入嚟睇吓。」

呢份工,其實都係一種「手作」。只不過我嘅材料,唔係魚肉,而係像素同代碼。老豆嘅智慧,就係我最好嘅 Style Guide(風格指南)。
標籤: 設計學  

留言


請按此登錄後留言。未成為會員? 立即註冊
    快捷鍵:←
    快捷鍵:→