在商言商

網站設計新趨勢
網站設計新趨勢
網頁設計趨勢 可以反映當時的技術、使用者習慣、裝置、美學與設計思維的不同,相當有趣並值得探討。 我們可以看到  響應式網頁設計(RWD) 越來越流行,許多網站皆改為此方式來設計,除了對移動裝置用戶更友善外,甚至也影響 Google 的搜尋排行。接著,讓我們透過 UXPin  針對今年度所見的趨勢整理而成的文章。   UI 模板(patterns)激增   在響應式設計的風潮下,似乎每個網站看起來都一樣。不過,造成這樣的現象,除了響應式設計外,還有其他原因,譬如市場上出現大量的套版網站與工具(如 WordPress 等)。不過,相似排版與視覺的模板並非不好,這只是市場上出現大量好用的 UI 模板後,我們考量它所帶來的效益(省成本或可更專注於內容等)而產生的必然的現象而已。   另外,這些模板的發展都相當的成熟,要有極大的創新確實也相對...
>

網頁設計趨勢的翻轉

| Jan 31 , 2018

網頁設計趨勢 可以反映當時的技術、使用者習慣、裝置、美學與設計思維的不同,相當有趣並值得探討。

我們可以看到 響應式網頁設計(RWD)越來越流行,許多網站皆改為此方式來設計,除了對移動裝置用戶更友善外,甚至也影響 Google 的搜尋排行。接著,讓我們透過 UXPin 針對今年度所見的趨勢整理而成的文章。

 

UI 模板(patterns)激增

 

在響應式設計的風潮下,似乎每個網站看起來都一樣。不過,造成這樣的現象,除了響應式設計外,還有其他原因,譬如市場上出現大量的套版網站與工具(如 WordPress 等)。不過,相似排版與視覺的模板並非不好,這只是市場上出現大量好用的 UI 模板後,我們考量它所帶來的效益(省成本或可更專注於內容等)而產生的必然的現象而已。

 

另外,這些模板的發展都相當的成熟,要有極大的創新確實也相對困難。事實上,我們也不需要為了創新,而把一個通用成熟的東西重新發明。應該把精力放在如何用 UI 模板打造出流暢的使用者體驗,以下是設計師不可不知的 UI 模板元素:

  1. 漢堡圖標(hamburger menu)類似中文 “三” 的漢堡圖標,雖然過去常被批評和討論(使用者不易理解符號意思等),但現在使用者大多能理解它的意思了。此外,它可把眾多的選項元素縮合(menu),相當方便,在許多產品上都可看見這個圖標的應用。

 

  1. 帳號註冊的方法:我們可以發現,幾乎所有網站的會員註冊頁面的排版方式都很接近,通常會在表格底下放置第三方登入的按鈕。若註冊方式較複雜,也會將步驟拆解分散在多個頁面,並提供提示讓使用者知道如何進行,藉此減少註冊流程中不良體驗的產生。

 

  1. 長滾動條頁面(Long scroll):這項設計的流行可以歸因於行動裝置用戶的增長,因為行動裝置適合不斷的將頁面往下滑動。除此之外,這項技術特別適合那些想要說故事的網站(不斷的往下滾動,讓使用者沉浸於功能介紹等內容),並且還可以做出如簡報般,滾動一格就換到全新頁面的效果。

 

  1. 卡片式排版:Pinterest 是應用卡片式排版的先驅,因為卡片式易於讓使用者以掃描的方式了解每塊區域的內容,所以相當受到歡迎。每一塊卡片區域都有獨立的資訊,就如同內容的容器般。此外,因其方形的型態,在不同的螢幕大小下,網站也可以輕易地重新排配版面。

 

  1. 高清晰度的大圖(Hero image):視覺是人們感受事物的主要方式之一,網站上若擺放高清晰度的大圖,可很快的抓住使用者的注意力。這個趨勢主要歸因於網路的速度提升,使用者不必受苦於載入圖片時的等待。其中,我們最常看到的排版方式莫過於在網站最上方放置一張高清晰度的大圖,緊接著下方有由左至右並由上往下的系列內容排列或卡片式的布局。

 

豐富的動態效果

 

動畫可以加強網站想要告訴使用者的資訊,營造更多互動性與娛樂性。然而,設計師還是需要考量放置的位置,何處或何時出現才能達到動畫想傳遞的效果;另外,也要思考如何帶入產品的故事元素與品牌個性。基本上,動態效果可分為兩種動畫類型:

  • 大尺寸的動畫:通常使用大尺寸的動畫,就是想讓它成為與使用者互動的工具。其中有多種呈現方式,如滾動視差或彈跳通知視窗等方式。
  • 小尺寸的動畫:小尺寸的動畫大多應用於資訊單向傳達的情境,如等待中的旋轉效果、滑鼠 hover 時的效果或載入進度條的效果等。

 

載入時的動畫

雖然傳統的旋轉或連續的圓點動畫就能表示載入狀態,但似乎滿無趣的。因此有一些設計師開始設計載入時的動畫(或頁面),它們特別受到扁平化設計、 極簡主義、 作品集與單頁類型的網站歡迎。

 

呼叫或隱藏導航列和選單的轉場效果

將導航列或選單隱藏,是現在很多網站或 app 應用的方式,尤其可以省下許多頁面空間。譬如說,應用 hamburger icon 來隱藏選單

 

hover 動畫

使用者已經習以為慣地透過滑鼠 hover 的方式,來瀏覽更多的資訊。因此增加 hover 的動畫,直接地給予使用者視覺回饋,會讓這個行為更直覺。

 

圖片集與幻燈片的動畫

圖片集(可切換圖片或呈現多張)與幻燈片(單張切換)的呈現方式,很適合讓使用者閱讀圖片,若增加更多互動性,可再提升使用者體驗。這樣的方式特別適合攝影、產品與作品集類型的網站。 

 

動態的物件

人類很自然地會被動態的事物所吸引,因此設計師可以透過這個方法來抓住使用者的注意力,也可以讓畫面視覺更有層次感。甚至可以將其應用於表單、CTA 按鈕或選單上,以達到商業的效益。

 

透過滾動滑鼠一步一步的呈現動畫效果

流暢的滾動效果必須依賴動畫的呈現與提供更進一步的控制權給予使用者。使用者可以自行決定觸發下一段內容的步調。

 

背景動畫或影片

在背景放置簡單的動畫或影片,可讓網站更加吸引人,但必須保持簡單與色調溫和,不然容易造成使用者的分心。而製作的要領在於讓動畫或影片獨立於一個區塊或使用緩緩的動態效果來呈現大圖。

 

微互動

 

人們幾乎每天都與微互動接觸,例如關閉手機鬧鈴的過程或在 FB 的照片上按讚。每一個互動時刻都相當短暫快速,也不需要多想。就如同關閉鬧鈴,很自然地就透過介面完成了這項事情。而也有越來越多的 app 開始思考它,並設計微互動的介面、操作方式與流程。

 

基本上,微互動可以幫助使用者完成三項事情:

  • 告知現在處於何種狀態或回饋資訊
  • 了解這個動作後的結果
  • 幫助使用者操作一些功能

微互動的設計是每個 app 開發中十分關鍵的部分之一。微互動在設計時,必須儘量不打擾使用者,千萬別過度設計,並保持簡單;仔細思考每個細節,同時讓過程如同“人類”之間的互動;文字內容的撰寫多點人性,不要如機器人一般。此外,每一個互動的途徑都要以使用者為中心思考,讓產品更人性化,並提升可用性。當然,這會加重開發團隊的工作量,但這些確實是使用者真正或想要互動的部分。

 

Material Design: 後扁平化設計時代的創新者

去年,Google 發佈了它的設計風格語言: Material Design。它利用陰影來表現各個狀態,而陰影的深度又能帶給使用者操作扁平化物件的真實感受(例如物件前後關係)。

 

Material Design 目的是希望創造出簡潔、現代的設計風格,並專注於使用者體驗(UX)。然而,過去 Google 與設計美學談不上關係,而這次 Material Design 發表後,反而造成流行並受到各界讚揚。雖然 Material Design 的簡約設計元素,與扁平化設計相似。不過相較於扁平化,Material Design 使用了深度表現與陰影,更可表現元件的前後關係。

 

 

儘管 Google 提出這個設計語言,想要打造可供跨裝置使用的漂亮 UI 與良好體驗。但至今,應用 Material Design 的產品大多是 app。Google 也發現了這個現象,因此在七月時發佈了網站可用的套件 – Material Design Lite(MDL)。這個套件結合 vanilla CSS、HTML 和 JavaScript,並希望它夠輕量並易於開發人員使用,同時保有 Material Design 的視覺元素。此外,MDL 並不是依賴在特定框架上,所以設計師可以用各種前端方法來設計網站,同時它的程式也非常輕量化。

 

響應式設計

近幾年,因為移動裝置普及,網站響應式設計顯得格外重要,同時也相當受到歡迎(Responsive web design,RWD)。

 

 

以企業的角度而言,建構一個功能齊全且對於移動端友善的網站,Responsive design 是一個相對簡單且省錢的方式,但若是應用錯誤的方法,可能會影響效能。

藉此,Guy’s Pod 向設計師提出了一些建議:

 

  • 圖片顯示避免使用display: none的寫法。雖然使用者沒有看見圖片,但其實仍然是有被 load 進來的,因此在網頁的效能上產生了不必要的負擔。
  • 圖片大小使用百分比來定義。
  • 有條件式的引用JavaScript,因為許多 js 元件在小尺寸的裝置上(手機)是無法被使用的。特別需要注意的是第三方 script(如社群分享按鈕)對於網站而言,常常會有負面的影響與降低效能。
  • 使用 RESS – Responsive and Server Side
  • 為了有效的量測與優化每個網站,應將效能測試這項目加入到流程中。

 

效能不單單只是使用者判斷體驗好壞的關鍵,同時也會影響 Google 的檢索排名。此外,由於最近流行的極簡風格讓網頁排除了不必要的元素而減少頁面的複雜性,非常適合響應式的設計。同時,我們也可以看到許多具響應式設計的網站使用卡片式的排列,可在不同螢幕尺寸下,輕易的重新調整排列。

 

 

響應式設計已慢慢由趨勢轉變為最佳的實踐方式。然而設計師們也必須想出一些聰明的方式解決任何速度的問題。無疑地,響應式設計是十分有用且通用的,但它也應該是高效能的,才可以提供出色的使用者體驗(UX)。

 

雖然這些設計趨勢是因為帶來某些效益而受到歡迎,但千萬別盲目地追求流行,一定要以使用者為中心思考,確保應用這些設計趨勢對他們是好的。例如,電商網站就不適合完全的無限滾動頁面。所以,這些趨勢僅是設計師腦袋中的資料庫,必須深思熟慮的選擇其中最佳方案

 

資料來源:https://designtongue.me/web-design-trends-you-must-know-for-2015-2016/

分享這篇文章
上一篇
網站媒體視覺案例分享
BACK

\ 您也可能喜歡這些 /

more

服務支援

refresh captcha
登入