App設計新潮流:卡片化滑動派

2020-12-25 TechWeb
 

3月17日,科技網站Recode報導稱,喜歡就向右滑,不喜歡就向左滑。如果雙方都右滑,那麼恭喜了,你們「牽手」成功!這就是交友應用Tinder,它以卡片的形式展示用戶的照片和資料。Tinder每次只展示一位用戶的照片,如果你向左滑動某位用戶的照片,那麼你就不會再看到這位用戶。

Tinder聯合創始人兼CEO西恩•拉德(Sean Rad)表示:「滑動操作之美在於,用戶只需最少的動作,便可瀏覽內容。通常,在瀏覽器或手機上,你需要滾動頁面,然後才能閱讀內容。通過Tinder的滑動功能,內容導航操作還整合了輸入操作。」

目前,Tinder用戶每天滑動8億次,並且已經成功配對10億名用戶。

Tinder無疑是新式用戶界面的典範,這種界面非常適合小屏幕行動裝置。拉德表示,Tinder界面的靈感來自寶麗來相片和撲克牌,並非借鑑了其他移動應用。在Tinder發布之初,拉德便發現用戶非常喜歡翻閱圖片卡。拉德將它稱作一種「基於動作的用戶界面」。

實際上,除了Tinder,很多移動應用同樣採用了卡片式界面,例如 Jelly, Swell和Weotta。如果要用一種界面來取代無線下拉式界面,那麼卡片式界面便是最佳的替代方式。卡片式界面每次只展示一個信息,如你可能約會的對象,你可能想回答的問題,或者一首你可能喜愛的歌曲。

越來越多的應用開始採用卡片式界面。上周,一款名為Steller的應用便利用卡片式界面幫助用戶講故事。但是,這些應用並不一定抄襲了Tinder的設計,只是它們的界面相似而已。

Swell CEO諾馬•庫馬(Ram Kumar)表示:「我們自主開發了Swell的設計,後來發現這種界面已成為一種趨勢。」

過去8年,卡片式界面一直被認為是改進網絡內容展示方式的方法之一。2006年,Facebook推出信息流功能,Twitter隨之推出相似的功能。這種界面以倒序的方式為用戶展示實時信息,並針對每位用戶展示定製信息,但對於海量的信息,用戶往往無可適從。

紅點投資合伙人賴安•薩沃(Ryan Sarver)表示:「當Twitter和Facebook由網際網路服務轉型為移動服務時,它們很難徹底重新構思自己的服務。」薩沃此前曾任職於Twitter公司。

作為移動內容應用的先驅,Instagram採用了一種新式界面。儘管Instagram界面仍然存在信息流風格,但用戶已經可以每次只瀏覽一張照片,這與卡片式界面十分相似。

最近幾個月,風投人士和設計博客都在談論卡片式界面,他們無不認為這種界面非常適合展示脈絡清晰的信息。如今,Google Now個人助理、Twitter平臺、Kik等消息應用以及Facebook Paper都已經採用卡片式界面。

拉德、薩沃等人認為,卡片式界面和滑動功能的結合將用戶體驗提升到新的高度。這種界面不僅可以讓信息更為簡潔,而且讓用戶擁有更多的選擇。一方面,卡片和滑動功能便於用戶使用。另一方面,這種界面也可以為開發商提供用戶互動數據。

也就是說,用戶與每一個內容互動,Tinder可根據用戶對潛在約會對象的反應加以改進,然後推薦不同的用戶。Swell同樣如此。庫馬表示:「每一次滑動都可以向Swell算法提供一個信號。」

但拉德表示,有些應用採用卡片式界面,但沒有完全採用滑動功能,這樣的設計其實存在缺陷。例如Facebook Paper,它的設計方向沒錯,但互動方式有所欠缺。

拉德甚至認為,Tinder已經說明卡片式滑動界面可行,每一款移動應用都應該採用卡片式滑動界面。(Edward)

相關焦點

  • UI設計中卡片化設計的運用方法
    上面所說的形式功能的組織與呈現其實講的是設計排版上的問題,當然對設計師排版功力也有相當的要求。這種排版優化的方法有很多種,我這裡主要圍繞卡片式設計的理論進行深入探討,相信大家對卡片式設計已非常熟悉,雖然已流行了好多年,但是設計形式並不是隨著使用年齡的增長而消失,今天AAA教育郭老師就針對UI設計中卡片化設計的運用方法進行簡單的說明。
  • 計算機編程設計卡片式電腦:「樹莓派」
    怎麼樣,是不是很厲害,反正小編是服了,接下來我們就去了解一下這種卡片式電腦。     樹莓派Raspberry Pi(中文名為「樹莓派」,簡寫為RPi,(或者RasPi / RPI)是為學生計算機編程教育而設計               卡片電腦樹莓派由註冊於英國的慈善組織「Raspberry Pi 基金會」開發,Eben·Upton/埃·厄普頓為項目帶頭人。
  • 思考總結:談談卡片式設計
    最近在新項目的設計中也嘗試使用了卡片式設計,結合實際項目中的得到了一些思考進行總結並歸納出一些卡片式設計的小知識點。同時希望自己通過本次的總結進行知識沉澱,以及跟大家一起探討下卡片式的設計。Feed流卡片式的feed流設計是一種非常常見的設計,早在前幾年Facebook、Google+等產品就使用了這一方式,Feed流作為一種長內容的媒介,用戶需要長時間的滑動看內容並篩選有效信息,卡片式設計很好的解決了內容與內容的區塊分隔,讓用戶在長屏幕滑動中依舊可以很好的明確每一塊的內容。
  • 關於卡片式設計,你需要知道這4點
    在本文中,作者對卡片式設計進行了梳理:從卡片式設計的由來、到卡片式設計的各種形態和卡片式設計的優缺點,希望通過此文能夠加深你對卡片式設計的認識。01 卡片式設計的由來卡片設計來源於早已存在於人類生活的各種現實物品。
  • 探探/派派/釐米秀:95後社交圖鑑
    當你對探探、派派、Faceu、釐米秀、狼人殺等一大波新潮社交app還一無所知或者不以為然的時候,它們已經悄然擄走萬千少男少女的心,搶佔年輕人新興社交市場,開始悶聲發大財了。對此派派只想說,盆友們冷靜一點,這算啥,想當年我還偷過菜呢……釐米秀保留了QQ聊天核心的對話場景,融入服裝、道具、動作等卡通元素,承載了時下最流行的動漫影視等潮流IP,並且輔以常玩常新的遊戲規則,公測階段就宣稱月活躍用戶數已過億,不得不服呀。
  • 2015-2016年最流行的APP設計是什麼?比如,Facebook那樣的
    這本電子書結合豐富案例講述了2015-2016年間重要的移動設計趨勢,共含6章節:靈巧的手勢操作、層級化的移動界面、雋永的字體排印、扁平化設計、愉悅的微交互、小卡片。本文將來分享小卡片設計。註:以下圖片全部來自UXPin。對於APP設計,2015儼然是卡片設計年。從網站到移動應用,不同屏幕尺寸的卡片無處不在,卡片展現形式與實物相似。通過手指滑動,用戶可以輕鬆地在卡片容器中翻閱。
  • 騰訊都參考的證券app:輕金融下的體驗式設計
    這也是它與其他網際網路券商app的最大區別--輕量級的體驗設計。RobinHood的視覺設計極簡、清新,採用了原質化設計(material design)風格,交互上使得股票交易操作直觀和移動,耳目一新的易用性也使得其贏得了2015年的Apple Design Awards和2016的Google Play設計卓越獎。
  • 優酷App卡片化設計 打造輕量簡約之美
    卡片設計 輕量簡約之美或許說,打造簡約而不簡單的輕量體驗,這一理念始終灌輸在整個優酷產品團隊中。從扁平化風格,到卡片式設計,在優化布局的基礎上,信息組合更趨規整,乃至簡潔明了,提升閱讀舒適度,降低用戶操作成本,讓用戶更快捷的獲取精彩內容。個性化 讓精彩與眾不同視頻玩出個性,這並不遙遠,至少優酷如此。
  • 設計中的卡片式設計與體驗
    無論你對這個概念的感覺如何,卡片設計都已經是近兩年最流行的界面設計的排列樣式什麼是卡片卡片是那些裝滿包含圖像和文本的小矩形,作為功能、內容入口點,以提供更詳細的信息。可以平衡用戶界面的設計美學和良好的可用性,最近卡片幾乎成了移動端界面設計的一個默認的選擇。因為卡是一種方便的顯示不同元素組成的內容的方式。
  • 卡片式設計用戶界面 | 人人都是產品經理
    用戶通過卡片可以很容易地訪問到他們感興趣的內容。進而讓用戶願意參與到對卡片的瀏覽和操作中來。用戶可以快速瀏覽、滑動卡片。視覺上賞心悅目基於卡片式的設計通常都嚴重依賴於其視覺效果。而卡片本身又對圖片有很強的依賴性。
  • 電商活動卡片式設計思考
    卡片式設計的優點很多,它可以較好的對內容進行區域劃分,解決了內容與內容的區塊分隔,讓用戶在長屏幕滑動中,依舊可以很好的識別每一塊內容。一、背景活動設計中,我們經常會碰到復用性超高的組件。在物料的表象之下,存在一系列的基礎原則。
  • app界面設計的流行趨勢
    app界面設計的流行趨勢,界面作為我們認識app的第一道門檻,是app的「面子」,更是不可忽視的一項重點設計,為了建立有效的ui,設計師需要根據移動端app本身的特性和當下趨勢,作出不一樣的改變。但當今設計趨勢瞬息萬變,在沒有統一標準的設計規則之下,緊跟設計趨勢,才能保證ui對用戶的吸引力常在。一、首頁作為設計師,一定要做到多看多用才能夠找到更適合產品本身的展示方式。下面介紹一下首頁最常見的4種表現形式,分別是列表型首頁、圖標型首頁、卡片型首頁和綜合性首頁,不同類型的首頁布局承載著不同的內涵。
  • App中列表、卡片和雙欄卡片的布局思考
    APP中常見的布局有列表式、卡片式以及雙欄卡片,這些不同的布局方式的最佳使用場景是什麼?作者將App中列表、卡片和雙欄卡片的布局思考總結成文,看一看和你的思考有無異同。其布局形式的特點在於能夠在較小的屏幕中顯示多條信息,用戶通過上下滑動的手勢能獲得大量的信息反饋。而列表也是一種非常容易理解的展示形式。卡片式布局常見於微博、Facebook等社交類App,也出現於其他不同類的App中,形式非常靈活。其特點在於,每張卡片的內容和形式都可以相互獨立,互不幹擾,所以可以在同一個頁面中出現不同的卡片承載不同的內容。
  • [新] 2020年最佳移動應用UI設計趨勢
    換句話說,好的設計是不需要用戶思考很多的,而是更加重視情感,動機和需求的滿足。如果你想設計出技術先進的,直戳用戶痛點,理解用戶心聲的產品, 看這篇文章就對了!在這篇文章中,你將看到2020年最好的行動應用程式設計實例及趨勢,了解他們是如何擴大銷售,留著用戶的。現如今,每個人都被裹挾在源源不斷的信息潮流中,想要創作一款足夠吸引人注意力的產品越來越難。
  • Hybrid APP架構設計思路
    本文將從以下幾個方面闡述Hybrid app架構設計的一些經驗和思考。通訊作為一種跨語言開發模式,通訊層是Hybrid架構首先應該考慮和設計的,往後所有的邏輯都是基於通訊層展開。如上圖所示,界面含有tab,且可以左右滑動切換,tab標題的下劃線會跟著手勢左右滑動。
  • Android 11又大改多任務管理界面:顯示更大的app卡片,加入快速截屏
    由於全面屏手機已經是如今市場主流,Google原生Android在最近三年來的更新上,其UI都是為了改進便於全面屏使用的手勢操作,在經過了Andorid 9 Pie、Android 10的迭代完善後,Google在今年Android 11上又做了些新嘗試,其中多任務管理界面(或者叫最近
  • 得物App舉辦國潮設計大賽,獨特設計引領時尚新潮流
    得物App作為全國最大的潮流文化社區,緊跟新一代消費趨勢,打造了社交型電商平臺,受到了年輕人喜愛。在此基礎上,品牌方才有更多精力投入原創設計、工藝改進,並且探索品牌定位、創新商業模式,變得更加「打動人心」。比如,得物App平臺在售的大量商品,僅僅因為顏色差異也會擁有不同的名字,名字背後還有不同的故事和精神所指。還有的鞋款,配色超過1000個。這些,在過去是難以想像的。
  • iOS新浪新聞首頁卡片滾動特效實現淺談
    2、中間的滾動視圖在滑動的時候發現卡片是疊在一起的,中間的在上層,其他部分在下層,根據距離中間位置的遠近來區別上下層3、中間的滾動視圖在滑動的時候發現卡片大小不一致,中間的最大,越靠近邊框越小。4、中間的滾動視圖在滑動的時候發現滑動的距離和卡片移動的距離並不是成正比,而是按照不斷變化的加速度移動的。5、中間的滾動視圖滑到左右邊緣時視圖透明度改變。
  • 如何設計一個美觀又易用的食譜APP?
    無論這個和美食相關的 APP 的UI 背後的設計目標是什麼,它不僅能夠幫助用戶達成目標,而且因為美食的加成,它還有著別樣的吸引力。早些時候,我們已經就這個主題分享過不少關於UI 設計的想法,今天我們要探討的這個設計實戰,是一個關於新鮮食品的設計案例研究,這個 APP 的核心概念是食譜卡。
  • 街頭派撒「小卡片」的人,抓了!
    11月8日晚,警方在出租屋內將陳某、楊某抓獲當場繳獲涉黃小卡片4萬餘張經審訊,陳某和楊某對其派發涉黃小卡片的違法行為供認不諱此後,「小花」通過微信分別聯繫他們,以每月3000元的工資僱用他們在三鄉鎮內派發涉黃小卡片。一次,陳某和楊某在派卡過程中相遇了,二人一拍即合,不但共同幹起派發涉黃小卡片的勾當,還一起合租當起了室友。僅半個月時間,他們就派發了數萬張涉黃小卡片。