最近板上出現很多想轉職工程師的文章,而我自己也有緣認識了一位想轉職前端工程師的朋友,所以想在這邊分享一點個人經驗。先自我介紹一下,我大學時是念平面設計,從大二開始就開始接觸相關的工作,畢業後也順理成章成為了平面設計師。對於網頁的前端方面,大學時有學過最基礎的html 入門,但自始之後就對網頁有濃厚興趣,閒時也會自己寫一些遊戲相關的網頁。
在平面設計方面,不算大學的工作經驗的話,大約有五年正式在業界的經驗,從logo到海報到雜誌到網頁也有設計的經驗,但五年下來我自己是覺得平面設計不是很適合我。詳細原因就不來這裡分享了。這段期間我也一直有在練習前端方面的技術,所以最後就決定轉職成為前端工程師了。
前端工程師給大部分人的印象就是能製作網頁(html/css),大不了再加一點前端程式如javascript 之類。就正如伺機給人的印象就是一個會開車的人。說到底,html/css,javascript,或其他不同語言,這些都只是工具而已。個人認為專業與不專業的分別,在於想法。
當你在大企業工作,每個步驟都會仔細地分工時,前端工程師的確只需要把設計師做好的圖和上司/老闆/客戶要求的前端功能做出來就可以。
可是當你在一些中/小型公司工作時,很多時候分工就不會那麼細,前端工程師也有可能會包辦設計甚至後端的工作。因此,在學習成為一個前端工程師時,設計的概念和和後端的邏輯也需要有最低限度的認識。
我自己對於後端就真的只有基礎概念,因為工作上從未接觸過,所以在這裡就只分享設計概念這一塊。
一個網頁,除了基本的美觀 (文字容易閱讀,圖片配合主題等),最最最重要的就是可以快速和準確地把訊息傳達給用戶。除了那些漫無目的四處逛網頁的人之外,一般人使用網頁都是有目的。可能是購物,也有可能是找資料,當用戶在搜尋引擎找到你的網頁,點進去的10秒內找不到他想要的資料或看不懂你網頁想表達什麼,他就會很自然地按上一頁,再點進其他網頁。
因此在設計網頁時,必需先考慮網頁想傳達的訊息是什麼?是公司的產品?還是公司的服務?還是什麼?
相信大家也看過一些網頁,一進去就是一張横跨整個頁面的圖片。這個元素的確非常吸引眼球,不過如果圖片跟網頁的主題沒有關係的話,那用戶最多只會覺得:"喔,圖片好帥!但你們網頁是做什麼的?"
在這裡舉一個成功和失敗的網頁設計例子。https://www.amazon.com/
亞馬遜這公司應該很多人都認識,以下是這個網頁的首頁:
在設計上,他們看起來沒有任何"哇"元素,就是用戶第一眼看到就會覺得"哇,好帥!"的元素,不過他們很直接地把公司最主要的目的和功能傳達給用戶。就是他們是賣東西的,而且你可以直接在首頁使用搜尋功能去找你想要東西。
一個聽起來再普通不過的理由,大家可能會心想,這不是很正常嗎?接下來讓我們來看一下以下這個網頁:https://blinkee.com/
這是網頁的首頁:
這個網頁第一眼就可以看出他們是專賣這些閃亮亮東西的網頁,而且他們正在推情人節的活動。這網頁也做到了讓用戶第一眼就知道網頁的主題,不過相比起亞馬遜,這個網頁可能會讓你無法瀏覽超過一分鐘。一個好的網頁,除了能在首頁就讓用戶一下子就知道網頁的主題之外,其實還有其他元素構成。
- 顏色配搭:網頁的背景,文字,圖片等顏色配搭對於用戶的使用經驗是非常重要。背景和文字的顏色有鮮明對比,文字的字體和大小等,這些都能讓用戶繼續閱讀或者看不下去。
- 帶動眼球的元素:在一個靜止的網頁上有一個會動的元素時,用戶的眼球就會立即被吸引過去。很多網頁都會使用輪播圖 (carousel) 這個功能,例如上面亞馬遜的例子。利用輪播圖這個元素,一下就可以吸引到用戶看到那邊的內容,然而當用戶來這網頁是想找東西時,他多半不會把全部的圖片都看完。因此輪播圖的第三張之後的圖片,很多時候都會被忽略,而設計師也得考慮這一點而控制圖片的數量。
上面的第二個網頁,背景顏色和文字的配搭都沒有問題,但那些一直動的圖就嚴重影響閱讀的經驗,一直滑下去再看到幾張動圖時,我就已經無法忍受要按上一頁了。
- 功能的流暢度:當用戶使用網頁時,如果流程複雜,每個步驟都不明確指示,這會嚴重影響使用者的體驗。
以購物的功能為例,在亞馬遜把物品加到購物車後,頁面會跳到購物車主頁。在購物車的介面立即可以看到結帳的選項和購物車的內容。再往下滑一點更會顯示一堆相關的產品。
反觀另一個網頁,點選購買後同樣會跳到購物車的主面。可是該介面一打開就是老闆(應該吧) 的銘言,然後是顯示購物車內容,最後才是結帳的按鈕。而這介面並沒有顯示相關產品。
同樣是購物車內容和結帳按鈕這兩個購物車的基本元素,只是擺放的位置不同,亞馬遜可以在無需滑動頁面的情況下確認內容和結帳,另一個則要滑動到下面才能結帳,整個過程的流暢度就截然不同了。再者亞馬遜的用戶有可能會隨便看一下相關產品,也有可能會因為這樣而再買其他產品,而Blinkee 的用戶買完這個產品後購物的過程就完結了。
以上這些都是使用手機的體驗,桌面版的體驗有可能會不同,不過我就不重新比較了。畢竟這世代使用手機逛網頁和購物的人已經越來越多了。
由於不想讓文章太長影響閱讀經驗 (我知道現在已經很長了),所以就暫時說到這裡,其他設計上的元素就等下次有機會再分享吧。
總而言之,一個專業的前端工程師除了能把網頁製作出來,同時也應該了解和明白版面上每一個元素放在這個位置的用途和原因,才能製作一個完善又實用的網頁。