LV. 46
GP 4k

【心得】轉職網頁前端工程師十年的一點經驗談

樓主 law lawlaw
48 -
最近板上出現很多想轉職工程師的文章,而我自己也有緣認識了一位想轉職前端工程師的朋友,所以想在這邊分享一點個人經驗。

先自我介紹一下,我大學時是念平面設計,從大二開始就開始接觸相關的工作,畢業後也順理成章成為了平面設計師。對於網頁的前端方面,大學時有學過最基礎的html 入門,但自始之後就對網頁有濃厚興趣,閒時也會自己寫一些遊戲相關的網頁。

在平面設計方面,不算大學的工作經驗的話,大約有五年正式在業界的經驗,從logo到海報到雜誌到網頁也有設計的經驗,但五年下來我自己是覺得平面設計不是很適合我。詳細原因就不來這裡分享了。
這段期間我也一直有在練習前端方面的技術,所以最後就決定轉職成為前端工程師了。

前端工程師給大部分人的印象就是能製作網頁(html/css),大不了再加一點前端程式如javascript 之類。就正如伺機給人的印象就是一個會開車的人。

說到底,html/css,javascript,或其他不同語言,這些都只是工具而已。個人認為專業與不專業的分別,在於想法。

當你在大企業工作,每個步驟都會仔細地分工時,前端工程師的確只需要把設計師做好的圖和上司/老闆/客戶要求的前端功能做出來就可以。
可是當你在一些中/小型公司工作時,很多時候分工就不會那麼細,前端工程師也有可能會包辦設計甚至後端的工作。
因此,在學習成為一個前端工程師時,設計的概念和和後端的邏輯也需要有最低限度的認識。

我自己對於後端就真的只有基礎概念,因為工作上從未接觸過,所以在這裡就只分享設計概念這一塊。

一個網頁,除了基本的美觀 (文字容易閱讀,圖片配合主題等),最最最重要的就是可以快速和準確地把訊息傳達給用戶。

除了那些漫無目的四處逛網頁的人之外,一般人使用網頁都是有目的。可能是購物,也有可能是找資料,當用戶在搜尋引擎找到你的網頁,點進去的10秒內找不到他想要的資料或看不懂你網頁想表達什麼,他就會很自然地按上一頁,再點進其他網頁。

因此在設計網頁時,必需先考慮網頁想傳達的訊息是什麼?是公司的產品?還是公司的服務?還是什麼?

相信大家也看過一些網頁,一進去就是一張横跨整個頁面的圖片。
這個元素的確非常吸引眼球,不過如果圖片跟網頁的主題沒有關係的話,那用戶最多只會覺得:"喔,圖片好帥!但你們網頁是做什麼的?"

在這裡舉一個成功和失敗的網頁設計例子。


亞馬遜這公司應該很多人都認識,以下是這個網頁的首頁:


在設計上,他們看起來沒有任何"哇"元素,就是用戶第一眼看到就會覺得"哇,好帥!"的元素,不過他們很直接地把公司最主要的目的和功能傳達給用戶。就是他們是賣東西的,而且你可以直接在首頁使用搜尋功能去找你想要東西。

一個聽起來再普通不過的理由,大家可能會心想,這不是很正常嗎?

接下來讓我們來看一下以下這個網頁:


這是網頁的首頁:


這個網頁第一眼就可以看出他們是專賣這些閃亮亮東西的網頁,而且他們正在推情人節的活動。

這網頁也做到了讓用戶第一眼就知道網頁的主題,不過相比起亞馬遜,這個網頁可能會讓你無法瀏覽超過一分鐘。

一個好的網頁,除了能在首頁就讓用戶一下子就知道網頁的主題之外,其實還有其他元素構成。

- 顏色配搭:網頁的背景,文字,圖片等顏色配搭對於用戶的使用經驗是非常重要。背景和文字的顏色有鮮明對比,文字的字體和大小等,這些都能讓用戶繼續閱讀或者看不下去。

- 帶動眼球的元素:在一個靜止的網頁上有一個會動的元素時,用戶的眼球就會立即被吸引過去。很多網頁都會使用輪播圖 (carousel) 這個功能,例如上面亞馬遜的例子。利用輪播圖這個元素,一下就可以吸引到用戶看到那邊的內容,然而當用戶來這網頁是想找東西時,他多半不會把全部的圖片都看完。因此輪播圖的第三張之後的圖片,很多時候都會被忽略,而設計師也得考慮這一點而控制圖片的數量。

上面的第二個網頁,背景顏色和文字的配搭都沒有問題,但那些一直動的圖就嚴重影響閱讀的經驗,一直滑下去再看到幾張動圖時,我就已經無法忍受要按上一頁了。

- 功能的流暢度:當用戶使用網頁時,如果流程複雜,每個步驟都不明確指示,這會嚴重影響使用者的體驗。

以購物的功能為例,在亞馬遜把物品加到購物車後,頁面會跳到購物車主頁。在購物車的介面立即可以看到結帳的選項和購物車的內容。再往下滑一點更會顯示一堆相關的產品。


反觀另一個網頁,點選購買後同樣會跳到購物車的主面。可是該介面一打開就是老闆(應該吧) 的銘言,然後是顯示購物車內容,最後才是結帳的按鈕。而這介面並沒有顯示相關產品。


同樣是購物車內容和結帳按鈕這兩個購物車的基本元素,只是擺放的位置不同,亞馬遜可以在無需滑動頁面的情況下確認內容和結帳,另一個則要滑動到下面才能結帳,整個過程的流暢度就截然不同了。
再者亞馬遜的用戶有可能會隨便看一下相關產品,也有可能會因為這樣而再買其他產品,而Blinkee 的用戶買完這個產品後購物的過程就完結了。

以上這些都是使用手機的體驗,桌面版的體驗有可能會不同,不過我就不重新比較了。畢竟這世代使用手機逛網頁和購物的人已經越來越多了。

由於不想讓文章太長影響閱讀經驗 (我知道現在已經很長了),所以就暫時說到這裡,其他設計上的元素就等下次有機會再分享吧。

總而言之,一個專業的前端工程師除了能把網頁製作出來,同時也應該了解和明白版面上每一個元素放在這個位置的用途和原因,才能製作一個完善又實用的網頁。
48
-
LV. 19
GP 296
2 樓 ms0223900 mmss00009
2 -
感謝經驗分享,現在這方面關於網頁排版的設計與規劃,我覺得樓主提到的已經偏向是UI和UX的部分了~

一般分工比較細的公司中的前端工程師,除非是效能問題,可能不會碰到這麼多(甚至也不會去管)這方面使用者體驗的部分,但是多一點這方面對於操作使用上的概念,對於獨立作業或是自己的side project都是很有幫助的。
2
-
LV. 19
GP 8
3 樓 FizzyElt relaxplay
0 -
我算理工類轉前端領域的
雖然學了不少但對於做作品很不在行,完全沒想法
感覺別人的作品都很有貢獻,讓我自卑了一陣子
不知道心態該如何調整
0
-
LV. 46
GP 4k
4 樓 law lawlaw
3 -
※ 引述《relaxplay (FizzyElt )》之銘言

你做作品時通常是用誰的角度去做呢?

舉個例,假如今天要你製作一張椅子,你第一個想法大概會是:這張椅子是給誰坐的?
如果是造給小孩子,那椅子就要做得比較矮,用的質料可能會用比較輕的塑膠,顏色或形狀也會比較偏於小孩的喜好。
要是做給年輕人或老年人,那在設計上則會有不同的做法。

其實網頁的道理也一樣,每種網頁都有它的用戶群,而當你知道你的對象是什麼類型的用戶群時就以這個用戶群的角度去思考。

假設你要製作一個html教學網頁,那你的用戶群多數都是15~35的群族,然後考慮一下這個群族的人有什麼特點,再針對這些特點來設計。
然後就是排版的部分,個人認為,排版的順序應該是方便性 > 美觀。
頁面的美觀當然重要,但要是用戶去你的網頁是想學html,結果找半天才看到原來html 教學的部分在首頁接近底部或要在選單點幾次才可以看到。
這樣的網頁做得再漂亮都很難吸引用戶長期使用。

以下舉一個實例:

這是我製作的一個遊戲工具,用戶對象理所當然就是該遊戲的玩家。
在設計上我主要的理念就是讓玩家可以在最短的時間裡找到需要的資料,所以頁面的設計沒有任何花巧或對遊戲甚至這工具的簡介。
有玩該遊戲的玩家都知道這種圖鑑模式,進來就是直接輸入名字或在列表中找到角色就可以了。
我在意的是資料上的呈現方式,網路上有很多相關的資料網頁,裡面的資料都很完整很豐富,甚至包括這個遊戲的全部系列,不過我這個工具有它的主要目的,所以我只顯示了需要的資料就足夠了。

在視角美觀的角度上,這個網頁一點也說不上是漂亮,然而在實用度方面,不少玩家都有正面的回應。

因此到最後,你製作作品的動機是為了什麼?
當你真正了解之後自然就可以做出好的作品了。
3
-
未登入的勇者,要加入 5 樓的討論嗎?
板務人員:

561 筆精華,01/22 更新
一個月內新增 1
歡迎加入共同維護。


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】