隱私權聲明
本公司關心使用者隱私權與個人資訊,並遵守本公司的網站隱私政策,使用者若有任何問題,可以參考本公司的「網站隱私政策」,或利用電子郵件或連絡電話詢問本公司.
2017
01
16

2017年網頁設計流行趨勢 [轉載於翻轉行銷]

關鍵字:網頁設計電子商務網頁設計作品

UI可以說是企業數位形象的門面,也是能留住和吸引顧客的關鍵,隨著移動裝置和新技術的興起,UI設計每年都在推陳出新,繼扁平化、微互動及卡片式設計之後,2017年又會有什麼樣新穎的設計手法呢?

 我們根據目前所知的設計風格加上網路資訊的彙整,整理出15項2017年可能流行的設計趨勢以供參考。

 一、全幅或是影片背景 

全篇幅的主視覺設計較傳統主題橫幅更容易聚焦,且能帶給用戶驚豔視覺和沉浸式體驗,近年來在HTML5的影片支援下,也愈來愈多網頁使用影片做為背景,全幅影片擁有更強烈的敘事感,打造身歷其境的感受。 

 聖僑_全幅背景

二、一頁長條狀或微頁式設計
簡約的使用介面,第一頁只呈現重要資訊,並如同居家收納一般將細節內容層層堆疊,結合滾動式操作的長條狀網頁能夠創造更流暢的線性瀏覽,同時能更秩序性地呈現內容,打造良好的故事性與閱讀體驗。

聖僑_一頁式設計

三、卡片化設計將會變得更常見
符合桌上型及移動裝置的通用設計,能有效分類內容和處理大量資訊,同時也能讓使用者快速閱覽想看的訊息。另一方面,它能有秩序的呈現文字、圖片或影象,並結合翻轉等特效讓頁面產生多元變化。

聖僑_卡片式設計

四、娛樂與個性化
大膽配色、趣味性設計的信息欄或框架, 插圖和創意字體的搭配較受使用者青睞。

<a href=網頁設計_用色" src="http://flipmarketing.sjcorpwebdesign.com/wp-content/uploads/2016/12/%E5%A4%A7%E8%86%BD%E7%94%A8%E8%89%B2.png" style="height:400px; width:614px" />

以重疊方式營造視覺延伸感
圖片取自 Nyte template

五、扁平式設計
利用滑動選單欄隠藏非必要功能,簡單化使用介面,運用漸變色系營造合理的階層感,並配合適當的層次分割,透過色塊及留白達成簡易的排版。

<a href=網頁設計_肩平化設計" src="http://flipmarketing.sjcorpwebdesign.com/wp-content/uploads/2016/12/%E8%82%A9%E5%B9%B3%E5%8C%96%E8%A8%AD%E8%A8%88.jpg" />

六、Cinemagraph圖(cinemagraph)
局部動態攝影照片近年來開始盛行,Cinemagraph 一詞是由 cinema(電影)和 photograph(靜態相片)所組成,它使圖像介於影片、照片之間,意即在同一張照片中,可以看見部分動態影像,也能看見部分靜態影像。可至 Instagram 上搜尋 #cinemagraph觀看更多有趣品牌應用案例。
<a href=網頁設計_Cinemagraph" src="http://flipmarketing.sjcorpwebdesign.com/wp-content/uploads/2016/12/giorgio-armani2.gif" />

七、預覽
在網頁載入前,先顯示出部份預覽畫面,讓使用者願意花時間等待載入。

八、具手繪感的設計元素
針對企業形象繪製適合的插畫,可以呈現出品牌的個性和獨創風格,達成更直觀親和的用戶體驗,在品牌與用戶之間建立有溫度的視覺交流。
<a href=網頁設計_手繪設計" src="http://flipmarketing.sjcorpwebdesign.com/wp-content/uploads/2016/12/%E6%89%8B%E7%B9%AA%E8%A8%AD%E8%A8%88.jpg" style="height:400px; width:617px" />
取自日本レクシー株式会社

九、電子商務式的響應式設計
結合電商與智慧分析技術,可針對用戶的性別、年齡,給予適當的回應,調整內容與排版。

*字體大小、顏色及間距會因用戶年齡而變動

*版面配色也會依年齡而不同

十、微型互動設計
運用slider、Fade製作微動畫元素或是細微的轉場效果,增加網頁趣味性的同時也能給予用戶明確的行為回饋。

十一、大面積漸變陰影及濾鏡
增強陰影元件和整體視覺形象。

<a href=網頁設計_濾鏡" src="http://flipmarketing.sjcorpwebdesign.com/wp-content/uploads/2016/12/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88_%E6%BF%BE%E9%8F%A1.jpeg" />

十二、無網格的創意性設計
打破傳統框架限制,讓設計元素更靈活的躍動在網頁之間,但在設計前,請務必考量介面是否方便使用者操作。

<a href=網頁設計_無網格設計" src="http://flipmarketing.sjcorpwebdesign.com/wp-content/uploads/2016/12/%E8%81%96%E5%83%91_%E7%84%A1%E7%B6%B2%E6%A0%BC%E8%A8%AD%E8%A8%88.png" style="height:400px; width:585px" />

十三、獨創字型
跳脫傳統的文字排版,各大品牌近幾年也開始使用更醒目、粗體以及精緻襯線的字型來增強品牌形象。

<a href=網頁設計_字體設計" src="http://flipmarketing.sjcorpwebdesign.com/wp-content/uploads/2016/12/%E5%AD%97%E9%AB%94%E8%A8%AD%E8%A8%88.png" style="height:400px; width:585px" />

十四、導航設計
漢堡式選單雖然已有被濫用的現象,但不容置疑地是隨著移動端的發展,它在未來仍是網頁選單的主流之一,但網頁設計好玩的地方就在於它的變化性,所以目前也有設計師跳脫漢堡式主流流創造出其它好玩的導航設計。

十五、視差滾動
讓多層背景以不同速度滾動,讓視覺呈現更加立體 

更多優秀的視差滾動作品請參考=>17 個優秀的視差滾動網站範例

你可能有興趣的作品案例
傑立資訊傑立資訊事業有限公司
Powered by AWS Cloud Computing

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map

© 2019 傑立資訊 All rights reserved.| 網站隱私政策

線上詢價