SVG微信交互圖文|點擊切換如何優化圖文排版設計的?

2021-01-07 葉小圈圈圈

交互在微信圖文推送中已經司空見慣,據前面文章也為大家介紹了不少,有簡單的點擊切換、高度展開等效果,也有相對複雜的沉浸式圖文和擬物裝置,如果單純為了圖文趣味一昧追求技術難度不一定成就優秀的作品,而發揮交互效能真正服務內容傳遞信息,進一步優化用戶的閱讀體驗才最重要。下面介紹一些比較簡單的交互,但在微信推送裡承載豐富信息、增強互動的作用,下面以「小編備用」交付寶馬中國的交互圖文——《想為你掃清冬日寒冷》為例,不妨通過例子了解一下。

從推送效果中可以看出,全篇是基於點擊切換效果,使用了<animate>標籤的透明度屬性<opacity>的技術原理,觸發控制圖片出現和消失實現同一層級不同內容之間的切換。在交互展示上界面信息聚合,讓用戶在一屏中獲取更多的信息,從而提高獲取信息效率。技術不複雜,也不是最有趣的內容,但是交互在此實現的是優化結構的圖文效果。除此之外,文末巧妙的通過生成海報讓用戶自行輸出信息,用戶可以截圖轉發朋友圈引起深層次信息傳遞。

總的來說,案例所示點擊切換的模型,優化內容自上而下的閱讀方式,節省了排版設計的空間,同時提高用戶獲取信息的效率。在這裡簡單的交互實現最大效能,優化界面信息傳遞路徑,也為信息傳遞過程提供了新思路。

圖文最終回歸於內容的發揮,交互的作用也不可小覷。簡單的交互聯動,實現具有信息承載樣豐富、容量大、互動性強的推文,也增強了圖文中信息傳遞優勢,成就圖文排版設計的有效解決方式。

相關焦點

  • 自適應寬度SVG圖文伸長動畫教程
    這次我們來學習一種自適應SVG圖文動畫排版方法,我會繼續發揚授人以漁精神,剖析這種自適應方法的實現原理,讓大家知其所以然,力求做到拋磚引玉。要明白這種自適應圖文動畫的原理,我們先要引入一個叫做」替換元素」的概念。什麼是替換元素呢?我們平時在圖文排版中用到的<img>標籤就是一種替換元素。
  • SVG交互圖文|蘋果公眾號的排版為何如此舒適?
    在推送開篇可以看到類似GIF動畫視效,這是使用SVG實現出的視覺精湛效果,細點說是基於<foreignObject>參數,將元素分布到SVG盒子外部,呈現<fo>裡的優先級關係,再通過<animate>動畫呈現圖片的輪播效果,而在內容上大體以左右滑動的形式進行圖文設計,視覺和觸覺的完美適配,使得整個交互過程舒適自然,也提高信息的傳遞效率
  • ACM TOMM 2017最佳論文:讓AI接手繁雜專業的圖文排版設計工作
    論文作者之一梅濤將應邀參加由中國人工智慧學會組織的第四期人工智慧前沿講習班《智能感知與交互》,文末點擊閱讀原文關注活動。當今富媒體的內容之多是前所未有的,人們每時每刻都在創造和分享著海量信息,特別是內容繁雜的圖像和文字信息,其中圖文混排的內容模式已經成為主流。
  • SVG微信交互圖文|如何在推送中縱享絲滑般的閱讀感
    如何讓用戶保持持續注意力接納內容信息,是微信圖文裡一直關注的問題。近期「小編備用」為微信派開發了一篇具有流暢閱讀體驗的推送交互圖文《2021全球追光!一起來看新年的第一個日出》,現在為大家分享這篇推送技術邏輯。若想體驗一下絲滑版的圖文閱讀體驗,可以看看這篇推送。
  • word圖文排版教程
    word圖文排版教程 學習辦公 大小: 6.39M
  • 微信圖文排版編輯器哪個好用
    今天小編來給大家推薦一款插件式的微信圖文排版編輯器——壹伴助手,可以直接在公眾號後臺直接編輯圖片和文字,一起來看看吧~公眾號怎麼編輯圖片通常,我們會先處理好圖片,再上傳到公眾號添加進文章裡我們選中圖片,點擊編輯按鈕,選擇壹伴、懶設計,或者是創客貼,進入到編輯圖片的頁面後,就可以開始進行高級操作了。小編以壹伴的頁面為例,大家可以自行選擇上傳本地圖片,還是壹伴提供的無版權圖庫裡的圖片,當然也可以使用純色背景,來設計想要的原創圖片,讓大家儘可能避免圖片版權風險。
  • 【教程】SVG入門基礎筆記1.0
    論文初稿搞定後,開始研究SVG排版,製作了幾篇簡單的微信。
  • 圖文排版設計技巧
    2.圖片圖片有兩種:一是圖片內容,根據設計需要進行的內容填充與裝飾。(3)圖文合一設計中超吸睛的做法——圖文疊加,交錯式產生一種空間感,讓圖片與文字有了互動,另外,當文字已經不僅僅充當文案,更變成一種裝飾元素,起到讓畫面變美觀的作用,最近熱播的《歡樂頌2》的海報中也使用到這一手法。
  • 澳門回歸21周年,主題微信圖文如何排版?
    下面,我來跟大家分享下,澳門回歸21周年,我們應該如何來編輯排版微信公眾號圖文:(以下排版素材來源於速排小螞蟻,微信圖文編輯器,大家在編輯器裡輸入關鍵詞「澳門回歸」,就可以搜索到相關素材了!)排版素材分享排版技巧1、澳門回歸是我國振奮人心的大事,所以在排版配色上可以偏紅色一些2、配圖上,可以選擇一些澳門的著名建築、景點、商業發展的圖片以下3
  • 【設計學堂】平面圖文設計排版技巧
    不管當今社會的平面廣告設計如何種類寬泛文字和圖形相輔相成,相映生輝是秩序產生、美感形成的關鍵,而文字和圖片能否恰當的組合在一起,更好的表達主題是設計排版成功的重點,圖文混排有以下幾點方法技巧值得探究。圖文混排注意事項①圖文混排中的文字和圖片的色彩處理要謹慎。
  • 圖片太多,圖文排版如何漂亮?
    圖片較多時,我們怎樣才能做出漂亮的圖文排版呢?今天135微信編輯器就來分享下自己多年的經驗。處理圖片。選擇好圖片以後,我們就要對圖片進行處理了,通常我們處理圖片的方式有四種:調整顏色/色調,統一尺寸/比例,去除水印/添加馬賽克,突出重點。
  • 微信公眾號圖文排版指南-圖片排版
    (答案僅供參考,如有雷同,純屬巧合)如果給我一張圖片,我會有4種排版方式:單圖樣式、插入小圖、圖文結合以及SVG互動樣式。接下來看一下答案詳解。二、插入小圖之前寫的文章中會經常在段落末尾插入小圖,有小夥伴會問到如何實現這種效果的。接下來看看操作過程。先將滑鼠移動在文章段落的尾部,然後在我的圖片中選擇一張圖片,進行滑鼠右鍵點擊,選擇以小圖形式插入就好了,怎麼樣?是不是很簡單?
  • MSRA獲ACM TOMM 2017最佳論文:讓AI接手繁雜專業的圖文排版設計工作
    你是否曾經為如何創作和編輯一篇圖文並茂、排版精美的文章而煩惱?或是為缺乏藝術靈感和設計思路而痛苦?AI技術能否在藝術設計中幫助到我們?當今富媒體的內容之多是前所未有的,人們每時每刻都在創造和分享著海量信息,特別是內容繁雜的圖像和文字信息,其中圖文混排的內容模式已經成為主流。而在內容創作過程中,人們面臨的一個巨大的挑戰就是如何針對內容多樣的圖像和文字信息來設計吸引眼球的版面(例如,雜誌封面、海報、或者PPT演講稿等)。這個問題無論是對於商業印刷、在線期刊與雜誌,還是用戶生成的內容表達,都極為重要。
  • 北京網頁設計中的圖文如何做好排版
    如果網站的首頁設計沒有美感也不夠整潔,更不符合企業自身的形象,給人帶來的印象並不好,對企業而言也是不太好,那麼在北京網頁設計要怎樣才能夠使得圖文排版做得更好呢?,但實際上圖片要與北京網頁設計相和諧搭配,不能盲目的把所有圖片都放上去,要選擇合適的圖片顏色,要麼是有強烈對比感的,有充分的對比性,要麼是相互和諧統一的,搭配和諧。
  • AI來了,再也不需要印前排版人員了!再也不需要美工了!讓AI接手繁雜專業的圖文排版設計工作 ACM TOMM 2017最佳論文
    你是否曾經為如何創作和編輯一篇圖文並茂、排版精美的文章而煩惱?或是為缺乏藝術靈感和設計思路而痛苦?
  • 微信排版細節設置,讓你的微信公眾號圖文排版與眾不同
    微信排版細節設置,讓你的微信公眾號圖文排版與眾不同。之前的排版賞析推文,有很多小夥伴來問小編樣式ID是不是寫錯了,為什麼搜出來的樣式和文章中不一樣呢?這些細節的設置,在排版中可以使整篇文章更加協調一致,具有美感。想要觀看我們前幾期排版細節的朋友可以到135編輯器進行查看哦!設置樣式邊框寬度、線型、邊框顏色,這種操作小編在圖片樣式中使用最多。
  • 做了600張PPT,總結了這些圖文排版設計技巧,職場必備技能
    今天跟大家分享一下,關於PPT圖文排版的處理方法,因為上一次的案例有粉絲留言。感覺PPT圖文排版不好設計,特別是多圖或者少圖的頁面。比如,下面這些PPT中的圖文排版頁面,整體看起來很不好。那麼,我相信大家應該看到過下面這種圖文排版的PPT,整體簡潔且有設計感。可以看出,這些頁面的設計中並不複雜,都是基礎知識,但是排版思路卻比較難。比如,上一次分享的案例,都是圖片型頁面。
  • 如何打造一篇具有呼吸感的圖文排版?
    圖文排版要想好看,一定要有呼吸感。換句話說,文章不能看起來就很擁擠,這樣,讀者閱讀起來也會感覺不舒服。有呼吸感的圖文排版要從以下幾個方面來打造:字間距、行距和段距、兩側留白。今天,我就跟大家一起學習一下,如何打造有呼吸感的圖文排版?
  • 圖文排版是學習平面設計的最佳切入點
    圖文排版是一項應用廣泛的技能,針對不同的應用場合,排版可以分為辦公排版、廣告排版、印刷排版、網頁排版、電子書、展示屏等等。圖文排版是籠統的說法,不同的場合採用的排版技術或軟體都不相同,比如辦公肯定用OFFICE,如果廣告則用PS,印刷則一般用CDR、AI、ID,如果網頁排版則可能是DW、HTLML、CSS等等。所以一名好的排版技術人員一定要根據自己的工作範圍和內容選擇合適的工具。
  • 以微信圖文排版切入市場,「秀米」如何用工具講好公眾號營銷這個故事
    微信公眾號剛剛上線時,不僅後臺更新功能不完善,每天給用戶推送的圖文、內容也是沒有經過任何排版的,導致用戶的體驗一般,市場急需一個給訂閱號、服務號內容做排版的工具。 秀米最初就是以這樣一個小點來切入市場的工具型網站。