目次
2023年作為疫情後時代全新的一年，除了是極具歷史意義的里程碑，更是疫情後新生活的開始。
你，準備好了嗎?
新的一年總是展開全新希望的契機，而新的希望也總讓人感覺美好，而對UI/UX設計師及每天使用各式行動裝置的我們來說，新的一年也是新科技/新設計帶來改變的起點。
本篇文章中我們將會為您解說2023年的網站設計五大趨勢，透過「使用者體驗」及愛貝斯深耕響應式網站多年的經驗，來帶您一起分享網頁設計五大趨勢重點方向。
愛貝斯作為一間網頁設計公司，首要重視的除了網頁視覺美感呈現外，比好看更重要但也更容易為一般使用者所忽略的，便是網站的「使用者體驗」了。
使用者體驗如今是每個人每天都會遇到的問題，也是網頁設計中最為重視的一環，而改善一項東西通常建立在既有的基礎之上，改善既有缺點進而提出更好的解決方法。
本篇提及的2023網頁設計五大趨勢便立基在改善以往的不良的設計上，提供使用者更直覺、便利的操作設計。
趨勢一、 icon圖標互動設計（ Hoverable iconography）
網頁設計的首要任務是透過網頁與使用者產生互動的介面，但「好的」網頁設計應該是網站的介面只需要使用者以最直覺的方式操作，便能讓使用者找到需要的資訊，但是對使用者來說，直覺的操作及簡潔的頁面設計，卻是最需要經過UI／UX設計師費盡心思的策略設計，正所謂老子所言之『大道至簡』，最精簡的設計通常需經千錘百鍊才得精煉而成。而icon圖便是設計中最為精簡，也已被使用者所理解的直覺設計，icon圖彷彿是全世界共通語言，以最簡約的方式，讓所有使用者都能理解這icon圖的含意。
講白話一點，當你點擊進入此網站 Be Biker，並看到右上方的三個icon圖時，
就算沒有任何文字輔助，你也已經有共識這3個icon圖分別代表什麼意思
- 購物車
- 商品搜尋
- 會員中心
你可能也沒發現自己在使用網站多年的經驗下默認了這個規則，這是網路時代的共業，也是透過數以萬計的使用者經驗累積而來的共識。
所以當網站出現新的icon圖時，該如何讓使用者直覺理解icon圖所代表的究竟是什麼意思？
而當加上文字說明輔助，是不是就破壞了原本簡潔設計的初衷呢？
再來，參考這國外網站 BeJeweler
當滑鼠移入至產品圖片後，icon圖簡潔優美出現，並在icon圖上以滑鼠hover效果增添了簡短的文字說明，這種既直覺又不破壞畫面美感的作法便是今年的首要趨勢之一。
趨勢二、 網站中出現客戶評價，進而提高品牌／產品信賴度
每間企業品牌的專業感及忠誠度最高原則，就是積極與消費者建立良好關係！就像每位使用者購買商品前會先上網搜尋其他消費者的開箱心得，或是查看google商家評論，進而影響消費者購買決策。
如 BeDoctor 這個網站中運用到3種與使用者建立品牌信賴度的方式：
- 消費者滿意度評分
- 消費者心得回饋
- 消費者平均評分（可連結到google商家評論）
但如果你是新創企業或是剛成立的個人工作室呢?
缺少大量使用者評論及回饋的情況下，你可以參考 BeMarketing 2 下方圖片中的做法
參考案例提到「該公司可以讓你的業績提升三倍！」
「threefold*」文字部分透過效仿螢光筆視覺設計，並於頁面下方補充三倍數據的依據說明，就像是化妝品／保養品的說明中常會看到「增加2倍保濕力」、「95%使用者有感」等說明，均會在下方標示出「增加2倍保濕力」是以哪支產品做為比較依據，又或是「95%使用者有感」的有購買商品消費者的數據分析等。
雖然只是簡短的文字說明，但透過簡短說明，便可讓使用者在看到數據資料的時候，對於品牌企業可提供的服務有更清楚的認知，進而提高與使用者之間的品牌信賴程度。
趨勢三、 符合手機閱覽習慣的RWD響應式網頁設計
由於RWD響應式網頁設計早行之有年，於設計業界也已經發展出了一套慣用的規則，但隨著手機版使用者的人數逐年增加，各式行動裝置也不斷推陳出新，瀏覽頁面要符合手機使用者的習慣早已不是一件新鮮事，但在今年，我們可以看到以往偏重電腦使用者的響應式網頁設計，開始出現了更多針對手機使用者的巧思。如 BeLanguage 4 此網站為例，Call us在電腦版上的按鈕設計有別於其他單元的選單
在手機版的介面操作考慮到使用者體驗，以及call-to-action的需求，特別將Call us提拉到選單的最上方
而以 BeFurnitureStore 網站為例，於電腦版購物網站中，常駐於右上角的3個常見icon（購物車、我的最愛、會員中心）
而在手機版中被刻意固定在手機版畫面下方
雖然還是保留了一般常見的漢堡選單，但將產品總覽、會員中心、購物車、我的最愛特別提出，除了促進消費者購買商品的意願，也是讓使用者在購買界面的操作上得以更加直覺使用。
以上看似小小的趨勢改變，可觀察出RWD響應式網頁設計，業界已開始重視手機使用者的習慣，並且更顯示出手機使用者人數上升，對以往偏重電腦使用者的網頁設計造成了不小的變化，手機使用者的人數攀升此事彷彿若投入湖中的石子開始產生的漣漪，於今年開始漸漸擴大影響，安於現狀而不願意改變的網頁設計公司極可能會因跟不上科技日新月異的腳步，而在不久的將來被無情淘汰。
趨勢四、 產業相關元素（紋理、線條、意象化）穿插於網頁中
以 BeRenovate 5 網站為例，做為居家改造相關的產業畫面中流線型的線條設計除了柔化網站整體的視覺效果外，更是搭配實際油漆桶圖片做出了塗油漆視覺設計的簡化，僅僅以簡單線條便顯示出了網站的產業類型及塗油漆的視覺效果，讓整體視覺畫面簡潔，卻又切中品牌產業核心。
接著以 BeCoaching 3 網站為例，此網站作為一個強調個人品牌及專業形象的網站，藉由科技感的視覺效果營造網站的專業形象感。
敏銳的你可能還發現了一件事，此網站在視覺設計上有更深一層的巧思 — 視覺聚焦
網站中出現的圓形視覺設計，讓使用者可以專心聚焦在某些資訊上，尤其一般使用者在瀏覽網頁時都較傾向於聚焦畫面的左方，所以在此網站中我們可以看到，右手邊人像後方的圓形框更加上了旋轉的動態特效，是為了在視覺上強調畫面中右手邊人像的專業形象，進而提升使用者對企業品牌網站的信賴程度。
趨勢五、 網頁中增添影片補充說明
隨著時代的演進，影音媒體已深入民眾的日常娛樂當中，許多人的注意力已經短暫到連閱讀完整一句文字的時間都沒有了，但是網頁設計除了需考慮好看的視覺設計、網站內容資訊呈現是否清楚之外，更需要考慮網站載入的速度。聰明的你看到這邊，有想到網站載入速度及影片播放的關連性了嗎？
沒錯，就像「魚與熊掌不可兼得」這個道理一樣，如果在網站中放入影片，雖然可以吸引使用者注意力的效果，及直接取代落落長的文字內容，但此舉卻會拖慢整體網站載入的速度，更可能導致使用者在點擊進入網站瀏覽的時，無法即時看到資訊，因為沒有耐心等待或是誤以為網站出現錯誤，便離開／關閉了網站，以上狀況都是對使用者注意力錙銖必較的你我來說最大的噩夢！
想必沒有一間公司願意將好不容易吸引來的使用者親手送走吧~
所以如何好好取捨「將影片置入網頁中」此舉帶來的利與弊，便是網頁設計領域在今年需要好好深思的議題。
以 BeBusiness 6 網站為例，
進入網站往下瀏覽頁面資訊時，可以發現有一個滿版呈現的影片播放區塊
滿版的設計主要是為了讓使用者不會錯過這網頁區塊資訊，而在網站整體的中間區塊放置影片主要有以下幾個考量：
1. 透過影片曝光，總結網站上半部的各項重點說明
2. 讓瀏覽到這區塊的使用者聚焦在企業想要呈現給使用者的資訊
3. 影片比起文字更讓人有觀看意願
補充說明的影片也不一定都要滿版呈現，
像是 BePregnancy 這個網站的做法是利用圖片旁的一個小區塊呈現影片
觀察力入微的你可能還發現了一件事，在上述舉例中，影片是可以由使用者決定要不要播放的，但根據影片資訊的重要性，也可以直接將影片設定為自動播放，自動播放影片可以讓所有使用者自動接收影片中的重要資訊。
看到這邊，你對2023網頁設計五大趨勢的想法是？
以往幾年，網站視覺設計上的改版往往是針對網站的「視覺設計面」，如前幾年各界趨之若鶩的Pantone年度代表色、行銷人員必不陌生的A／B測試、特殊的網頁動態效果等等。
上述這些方面都還是UI／UX設計師及工程師們每天持續優化的目標，但在2023年，誠如文章上述五大趨勢清楚說明了一件事 —未來優化著重的面向逐漸轉變為「優化使用者體驗」、「提升品牌信賴度」及「針對手機使用者的RWD響應式網頁設計」等。
愛貝斯早已經摩拳擦掌準備好要走在這波改革之前，愛貝斯正準備引領2023年的這波網頁設計趨勢改革。
愛貝斯網路於2007年便踏入網站建置行列，更於2013年搶先國內業界導入RWD響應式網站建置技術，以用心經營16年累積而來的網站建置經驗，搭配專業的企劃以顧問式服務，加上愛貝斯團隊的專業 UI／UX 設計師、前端工程到後端程式設計師們的加持，以及我們服務過上市櫃企業、連鎖飯店品牌、餐飲美食及購物型電商等各大產業累積而來的know-how，愛貝斯除了有豐富的網站建置經驗，絕對是您在網頁設計方面最好的專業顧問！
你也有網站建置的需求嗎？
聽聽愛貝斯在網站建置方面服務多年的專業建議吧！
延伸閱讀：
解析各產業網站建置重點
網頁設計的十大常見問題 建置網站前必須搞懂哪些事 ?
網頁設計做完了，然後呢？五個經營網站的起手式教給你
