運城網站建設不可不知:2016~17年的網頁設計趨勢
較資深的用戶或設計師應該都還記得,90年代大家特別喜歡使用繁復的 GIF 動態檔來裝飾網頁吧?而現在最流行的網頁風格反而是簡約的扁平化設計。 網頁設計趨勢 可以反映當時的技術、使用者習慣、裝置、美學與設計思維的不同,相當有趣并值得探討。
舉個最近流行的趨勢吧!我們可以看到 響應式網頁設計(RWD)越來越流行,許多網站皆改為此方式來設計,除了對移動裝置用戶更友善外,甚至也影響百度的排名。接著,就讓我們通過北京網站建設針對今年度所見的趨勢整理而成的文章,一起回顧今年的網頁設計風潮與展望明年可能會流行的趨勢~
一、響應式設計
近幾年,因為移動裝置普及,網站響應式設計顯得格外重要,同時也相當受到歡迎(Responsive web design,RWD)。
以企業的角度而言,建構一個功能齊全且對于移動端友善的網站,Responsive design 是一個相對簡單且省錢的方式,但若是應用錯誤的方法,可能會影響效能。借此,Guy’s Pod 向設計師提出了一些建議:
圖片顯示避免使用 display: none 的寫法。雖然使用者沒有看見圖片,但其實仍然是有被 load 進來的,因此在網頁的效能上產生了不必要的負擔。
圖片大小使用百分比來定義。
有條件式的引用 Java,因為許多 js 元件在小尺寸的裝置上(手機)是無法被使用的。特別需要注意的是第三方 (如社群分享按鈕)對于網站而言,常常會有負面的影響與降低效能。
使用 RESS – Responsive and Server Sid雖然這些設計趨勢是因為帶來某些效益而受到歡迎,但千萬別盲目地追求流行,一定要以使用者為中心思考,確保應用這些設計趨勢對他們是好的。為了有效的量測與優化每個網站,應將效能測試這項目加入到流程中。
效能不單單只是使用者判斷體驗好壞的關鍵,同時也會影響 Google 的檢索排名。此外,由于最近流行的極簡風格讓網頁排除了不必要的元素而減少頁面的復雜性,非常適合響應式的設計。同時,我們也可以看到許多具響應式設計的網站使用卡片式的排列,可在不同螢幕尺寸下,輕易的重新調整排列。
響應式設計已慢慢由趨勢轉變為最佳的實踐方式。然而設計師們也必須想出一些聰明的方式解決任何速度的問題。無疑地,響應式設計是十分有用且通用的,但它也應該是高效能的,才可以提供出色的使用者體驗(UX)。
二、扁平化設計會退燒嗎?
扁平化設計風格其實已經流行一陣子了,目前它也與其他相似風格與設計語言融合得很好,如極簡主義、響應式網站設計與 Google 的 Material Design。
未來,我們推測有更多扁平化設計的元素會流行:
長陰影(Long shadow):長陰影可以帶給扁平元素視覺上的深度。
鮮明色調: 一些受歡迎的 UI 模板都開始使用越來越鮮明的色系。
簡單的文字排版:簡單的文字排版,可以確保文字在扁平化設計下,保持清晰與可讀性。
幽靈按鈕(Ghost button): 幽靈按鈕的意思就是,讓按鈕僅留下外框線與說明文字,當使用者透過滑鼠 hover 時,才呈現變化。這樣可以讓使用者更專注于按鈕的功能性,避免上方的顏色、形狀或視覺表現而分心。
極簡主義: 省略不必要的元素,讓畫面看起來清新不擁擠。
三、豐富的動態效果
動畫可以加強網站想要告訴使用者的資訊,營造更多互動性與娛樂性。然而,設計師還是需要考量放置的位置,何處或何時出現才能達到動畫想傳遞的效果;另外,也要思考如何帶入產品的故事元素與品牌個性?;旧?,動態效果可分為兩種動畫類型:
大尺寸的動畫:通常使用大尺寸的動畫,就是想讓它成為與使用者互動的工具。其中有多種呈現方式,如滾動視差或彈跳通知視窗等方式。
小尺寸的動畫:小尺寸的動畫大多應用于資訊單向傳達的情境,如等待中的旋轉效果、滑鼠 hover 時的效果或載入進度條的效果等。
在此,我們整理了7種較受歡迎的動畫技術:
載入時的動畫
雖然傳統的旋轉或連續的圓點動畫就能表示載入狀態,但似乎滿無趣的。因此有一些設計師開始設計載入時的動畫(或頁面),它們特別受到扁平化設計、 極簡主義、 作品集與單頁類型的網站歡迎。最后,我們也要提醒,設計要保持簡單且避免加入音效,巧妙地融入網站特質與識別配色。
呼叫或隱藏導航列和選單的轉場效果
將導航列或選單隱藏,是現在很多網站或 app 應用的方式,尤其可以省下許多頁面空間。譬如說,應用 hamburger icon 來隱藏選單。但要特別注意別用太過度或過長的轉場效果,造成使用者不悅。
hover 動畫
使用者已經習以為慣地透過滑鼠 hover 的方式,來瀏覽更多的資訊。因此增加 hover 的動畫,直接地給予使用者視覺回饋,會讓這個行為更直覺。
Photo credit: Humaan
圖片集與幻燈片的動畫
圖片集(可切換圖片或呈現多張)與幻燈片(單張切換)的呈現方式,很適合讓使用者閱讀圖片,若增加更多互動性,可再提升使用者體驗。這樣的方式特別適合攝影、產品與作品集類型的網站。
動態的物件
人類很自然地會被動態的事物所吸引,因此設計師可以透過這個方法來抓住使用者的注意力,也可以讓畫面視覺更有層次感。甚至可以將其應用于表單、CTA 按鈕或選單上,以達到商業的效益。
透過滾動鼠標一步一步的呈現動畫效果
流暢的滾動效果必須依賴動畫的呈現與提供更進一步的控制權給予使用者。使用者可以自行決定觸發下一段內容的步調。
背景動畫或影片
在背景放置簡單的動畫或影片,可讓網站更加吸引人,但必須保持簡單與色調溫和,不然容易造成使用者的分心。而制作的要領在于讓動畫或影片獨立于一個區塊或使用緩緩的動態效果來呈現大圖。
四、 微互動
人們幾乎每天都與微信接觸,例如關閉手機鬧鈴的過程或在 FB 的照片上按贊。每一個互動時刻都相當短暫快速,也不需要多想。就如同你關閉鬧鈴,很自然地就透過介面完成了這項事情。而也有越來越多的 app 開始思考它,并設計微互動的介面、操作方式與流程。
基本上,微互動可以幫助使用者完成三項事情:
告知現在處于何種狀態或回饋資訊
了解這個動作后的結果
幫助使用者操作一些功能
微互動的設計是每個 app 開發中十分關鍵的部分之一。因此,我們根據此篇文章( Web Design Trends 2015 and 2016)給與開發團隊一些建議:微互動在設計時,必須盡量不打擾使用者,千萬別過度設計,并保持簡單;仔細思考每個細節,同時讓過程如同 “人類" 之間的互動;文字內容的撰寫多點人性,不要如機器人一般。此外,每一個互動的途徑都要以使用者為中心思考,讓產品更人性化,并提升可用性。當然,這會加重開發團隊的工作量,但這些確實是使用者真正或想要互動的部分。
五、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 和 Java,并希望它夠輕量并易于開發人員使用,同時保有 Material Design 的視覺元素。此外,MDL 并不是依賴在特定框架上,所以設計師可以用各種前端方法來設計網站,同時它的程式也非常輕量化。
運城網站建設關于網頁設趨勢的小建議