開發網站不可不知:2015 - 16 年的網頁設計趨勢

較資深的用戶或設計師應該都還記得,90 年代大家特別喜歡使用繁複的 GIF 動態檔來裝飾網頁吧?而現在最流行的網頁風格反而是簡約的扁平化設計。 網頁設計趨勢 可以反映當時的技術、使用者習慣、裝置、美學與設計思維的不同,相當有趣並值得探討。
評論
評論

本文轉自

Photo credit: Bugaboo via awwwards

 

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

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

Photo credit: Squarespace

  • 背景動畫或影片

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

Photo credit: Dunckelfeld

 

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

Photo credit: Slack

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

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

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

對微互動還有興趣的讀者,可以參考設計大舌頭先前的文章 – 微互動將是 2016 年 APP 設計的新趨勢

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

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

Photo Credit: Google Now

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

Photo credit: Angular

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

5. 響應式設計

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

Photo credit: UXPin

以企業的角度而言,建構一個功能齊全且對於移動端友善的網站,Responsive design 是一個相對簡單且省錢的方式,但若是應用錯誤的方法,可能會影響效能。藉此,Guy’s Pod 向設計師提出了一些建議:

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

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

Photo credit: The Guardian

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

6. 扁平化設計會退燒嗎?應該沒那麼快!

扁平化設計風格其實已經流行一陣子了,目前它也與其他相似風格與設計語言融合得很好,如極簡主義、響應式網站設計與 Google 的 Material Design。

Photo credit: Beoplay via awwwards

未來,我們推測有更多扁平化設計的元素會流行:

  • 長陰影(Long shadow): 長陰影可以帶給扁平元素視覺上的深度。
  • 鮮明色調: 一些受歡迎的 UI 模板都開始使用越來越鮮明的色系。
  • 簡單的文字排版 簡單的文字排版,可以確保文字在扁平化設計下,保持清晰與可讀性。
  • 幽靈按鈕(Ghost button): 幽靈按鈕的意思就是,讓按鈕僅留下外框線與說明文字,當使用者透過滑鼠 hover 時,才呈現變化。這樣可以讓使用者更專注於按鈕的功能性,避免上方的顏色、形狀或視覺表現而分心。
  • 極簡主義: 省略不必要的元素,讓畫面看起來清新不擁擠。

關於 網頁設計 趨勢的小建議

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

如果還想要了解更多 網頁設計趨勢 的資訊,可以下載我們免費的 e-book – Web Design Trends 2015 and 2016。這本書內分析了超過 160 個案例,包含 Google、Apple、Reebok、BMW、Intercom、Adidas、Dropbox 等等。

本文章已獲得作者授權,翻譯自:6 Web Design Trends You Must Know for 2015 & 2016 by Jerry Cao ,原文出處 awwwards

 


雲隨商轉.建構由我!2021 AWS 台灣雲端高峰會,9 月 2 日線上磅礴登場

2021 AWS 台灣雲端高峰會將在 9 月 2 號登場,全天候透過線上舉行,免費接軌業界資源、技術交流不斷電,任何需要開拓雲端新經濟或是自我加值的工作者,都不該錯過這場盛會。
評論
Photo Credit:AWS
評論

AWS 公布今年度的雲端技術盛會訊息:2021 AWS 台灣雲端高峰會 ( AWS Summit Online ) 即將在 9 月 2 號登場!全天候透過線上舉行,讓業界的交流與創新不間斷。今年的活動主題定為「雲隨商轉.建構由我」,強調 2021 年企業仍持續尋找新常態的求生法則,不分產業擁抱數位轉型,以及掌握雲端驅動力,人人都應具備開創新局的力量。

2021 AWS 台灣雲端高峰會,聚焦七大雲端主題

Photo Credit:AWS

今年度的 AWS 台灣雲端高峰會,不只將一次集結 AWS 重量級技術專家與產業代表,共同分享最前瞻的技術發展、商業洞見及最佳實務,還有線上互動展覽、hands-on 實作課程、demo 實機展演、一對一線上諮詢等多元體驗,帶領參與者充分掌握雲端技術動態,實現創新藍圖。

透過 2021 AWS 台灣雲端高峰會的活動平台,無論是 AWS 技術與服務的初學者或資深使用者,都可以在高峰會上學習到新事物,並透過七大雲端主題聚焦學習,為自己的能力加值。

2021 AWS 台灣雲端高峰會七大雲端主題,包含:

  • AI 與機器學習
  • 最佳實務分享
  • 資料分析
  • IT 管理
  • 資安與合規
  • 創新思維
  • 應用程式現代化

另外,參與者還可以根據個人的工作執掌、興趣和產業相關課程、技術能力,找到量身定制的議程。以下是 AWS 台灣雲端高峰會官方提供的技術能力分級參考,建議有興趣的與會者不妨以此作為基準,為自己安排相對應的議程。

  • Level 100(初級):課程將涵蓋服務、特色及效益的概觀說明,無須任何課前先修知識。
  • Level 200(中級):課程將聚焦於最佳實務、服務特色詳情以及展示或程式碼範例。需具備初級主題知識。
  • Level 300(高級):課程將深入說明服務特色、經驗分享、部署及架構範例。參與此課程,需對 AWS 服務及 AWS 平台有深入的了解。
  • Level 400(忍者):課程將集中說明更為複雜的主題,如進階編碼、架構、基礎結構設計和解決方案。需具備對主題的深入了解。

立即報名:2021 AWS 台灣雲端高峰會

不限專業大師或怪獸新人,你也應該參加 2021 AWS 台灣雲端高峰會

AWS 台灣雲端高峰會不限於技術開發人員或是企業高階主管,無論是想了解最新趨勢的雲端初心者、尋求技術突破的資深使用者,或是想在有限預算內提升營運效率的企業主,都有機會在「2021 AWS 台灣雲端高峰會」上找到答案。

2021 AWS 台灣雲端高峰會參加對象,包含:

  • 別創新格 - 開發人員
  • 邏輯清晰 - 工程師
  • 足智多謀 - 解決方案或系統架構師
  • 技術神展開 - IT專業人員或技術支援經理
  • 硬體擔當 - 系統管理員
  • 日理萬機 - 創辦人或經營決策者
  • 自我充實 - 學生、教職或研究員

最重要的是,2021 AWS 台灣雲端高峰會可免費報名參加,任何需要開拓雲端新經濟還自我加值的工作者,都不該錯過這場盛會!

立即報名:2021 AWS 台灣雲端高峰會

AWS DeepRacer 人工智慧賽車同步登場!快交出你最夠勁的模型

Photo Credit:AWS

每年跟著台灣雲端高峰會前會舉行的 AWS DeepRacer 智慧自駕車競賽,今年亦不缺席,即日起至 2021 年 10 月 31 日都可以提交模型參加競賽。

為什麼要參加 AWS DeepRacer?因為這是全球首個自動駕駛賽車聯盟盃賽,讓機器學習驅動的賽車模型在場上奔馳,除了要激起開發者的鬥志,也可更加精進與磨練機器學習(ML)、強化學習(RL)技術,是 AWS 送給所有工程師最棒的寓教於樂場域。當然,參加 AWS DeepRacer 競賽不只能贏取獎品和榮耀,也可獲得晉級 AWS DeepRacer 冠軍賽的機會

立即報名:2021 AWS 台灣雲端高峰會