從列表式UI中升華探討:卡片式UI有哪些創(chuàng)新點
對于傳統(tǒng)企業(yè)端應(yīng)用而言,列表是最重要也是使用頻次最高的設(shè)計元素,列表式設(shè)計有很多優(yōu)點才會使之有廣泛的應(yīng)用,但是相應(yīng)的列表式設(shè)計也存在很多缺點,在越來越追求極致體驗的大背景下,我們需要探討是否有其他設(shè)計模式可以完善列表式設(shè)計的不足,所以我們嘗試引入卡片式設(shè)計。
背景分析:列表式設(shè)計的優(yōu)缺點
優(yōu)點
- 當(dāng)(橫向與豎向)信息較多時,列表視圖可以提供一種概覽性的方案來呈現(xiàn),也可以快速掃描;
- 列表視圖可以承載豐富的過濾與檢索功能,滿足復(fù)雜的用戶搜索場景;
- 當(dāng)用戶需要批量選擇操作時,列表視圖提供了便捷的交互方式。
缺點
- 在用戶終端分辨率越來越多的情況下,列表的響應(yīng)性單一,空間利用率較差;
- 針對單條信息,呈現(xiàn)效果不夠豐富;
- 跨終端將會受局限;
- 過多的場景使用列表,會引起視覺疲勞。
設(shè)計目標(biāo):細(xì)分業(yè)務(wù)需求,尋求每個場景下的極致體驗,所以我們開始探尋卡片式設(shè)計模式
設(shè)計定義:什么是卡片式設(shè)計
簡單說卡片式設(shè)計,它是包含圖片以及文案并且有明顯邊界的信息區(qū)塊,本身可以是一個完整的信息區(qū)塊,也可以作為更多具體內(nèi)容的一個入口,同時也能承載豐富的互動方式。
價值點分析:卡片式設(shè)計的優(yōu)點
一、重塑空間利用價值
我們將卡片當(dāng)做一個承載內(nèi)容的容器,不同的內(nèi)容被規(guī)劃成不同的卡片,不同的卡片有著適合自己的尺寸。這個時候傳統(tǒng)的框架被打破,卡片組成卡片集,空間利用上會得到極大的拓展,同時看起來也具有整體性。
卡片式設(shè)計配合以卡片相應(yīng)的交互操作,可以讓空間利用率更加合理。
iOS系統(tǒng)下,appstore將卡片式設(shè)計發(fā)揮的淋漓盡致,不同的內(nèi)容被盛放到相應(yīng)的卡片容器中
- 【專題】卡片就像窗口,卡片內(nèi)的信息可以平鋪在一個很大的畫布上,用戶可以通過窗口滾動瀏覽信息,當(dāng)點擊的時候,窗口會展開變大,使用戶專注于這個類目的瀏覽與選擇;
- 不同的卡片之間采用常規(guī)豎向滾動與橫向滾動相結(jié)合,使得卡片集的組合空間更大,并且可以在橫向同類卡片與縱向不同欄目之間快速切換,方便快捷。
二、內(nèi)容前置,信息分級
卡片作為一個獨立的容器,可以在內(nèi)容上進(jìn)行良好的布局組織,將信息分塊,突出重點,讓用戶快速找到感興趣的內(nèi)容,避免在繁雜的信息集中浪費時間。
類似于電商中的商品類卡片,商品圖片、商品名稱、折扣信息、價格等被按重要性組織布局,組成一個友好且連貫的內(nèi)容體,整齊簡練。
三、跨越終端,多元場景
正因為卡片是一個內(nèi)容的盛放容器,所以它有一個特別重要的特性是它可以自由變換大小,這使得它在跨終端的響應(yīng)中表現(xiàn)出色。
同時在不同的終端中,卡片的信息組織并不受影響,這也是保證跨終端體驗一致的重要因素。
google極度推行卡片式設(shè)計,正是為了保證各式各樣的安卓機(jī)分辨率下的一致體驗
四、擬物視覺,賞心悅目
人機(jī)界面交互是一門語言也是一門藝術(shù),界面需要給用戶呈現(xiàn)信息,也需要給用戶心理感知。感知源于習(xí)慣,習(xí)慣源于現(xiàn)實,這就是擬物化設(shè)計,將用戶在現(xiàn)實生活中的習(xí)慣與感知傳承到界面交互中。
iOS中的卡包在空間布局允許的情況下,使用卡片式的擬物化設(shè)計,將真實且親切的感知帶給用戶,同時增加界面趣味性。
場景探索:尋求卡片式設(shè)計的最佳案例
一、Dashboard(工作臺)運用場景
工作臺的設(shè)計源于儀表盤,而儀表盤的核心理念是直接、高效、準(zhǔn)確地向用戶展示最重要的信息。
對于工作臺的設(shè)計,需要重注三個元素:場景、角色、內(nèi)容;他們的關(guān)系是在相應(yīng)場景下需要給某類角色提供最需要查看的內(nèi)容,而這個內(nèi)容往往是多類別的。
我們將卡片式設(shè)計代入,自由的布局方式可以帶來每塊區(qū)域的很好的展示方式,同時更加重要的是卡片集強(qiáng)大的分類功能,在工作臺上做信息分類布局使得用戶可以更高效瀏覽一類信息。
數(shù)據(jù)排布主要涉及到三個心理學(xué)小知識:格式塔原則、短時記憶和神奇的X
二、應(yīng)用選擇運用場景
對于應(yīng)用選擇,我們需要展示給用戶的第一要素是『這是什么應(yīng)用』,每個獨立卡片中承載的圖標(biāo)和名稱可以以最生動形象的感知傳達(dá)給用戶。
設(shè)計師往往注重功能化導(dǎo)向設(shè)計,而用戶體驗更需要讓用戶愉悅的完成任務(wù),所以注重感知和情緒設(shè)計會讓用戶更加喜歡。
三、卡片集運用場景
這類場景往往更注重對單個信息的關(guān)注,此時用戶不需要進(jìn)行對比,更需要對單個信息內(nèi)容進(jìn)行多元互動,我們將卡片進(jìn)行信息分級設(shè)計,同時設(shè)計豐富的互動操作欄。
列表更傾向于對信息進(jìn)行總覽、比較、過濾篩選。
四、圖表類運用場景
在數(shù)據(jù)可視化領(lǐng)域有『數(shù)據(jù)深度分析』和『數(shù)據(jù)概覽』,我們借助卡片承載簡單的數(shù)據(jù)概覽內(nèi)容,展示數(shù)據(jù)趨勢與核心指標(biāo),在保證數(shù)據(jù)價值的同時也使得數(shù)據(jù)可視化的運用場景得到拓充。
將圖表卡片運用在報表頁面,可以打造分析型報表的業(yè)務(wù)場景
五、對話式UI運用場景
我們打破傳統(tǒng)對話式UI的體驗?zāi)J?,?strong>『圖形化UI』與『對話式UI』相結(jié)合,此時卡片就是圖形化元素最好的載體,各式各樣的卡片豐富了對話式UI的交互方式,又與之完美融合,體驗具有整體性。
結(jié)語
正是因為上述價值點使得卡片化設(shè)計快速流行起來,并且會使用越來越廣泛。
卡片式設(shè)計并不是一種簡單的樣式設(shè)計,而是一種信息自由布局的設(shè)計語言,它使人機(jī)交互方式越來越豐富,相信會有越來越多的平臺創(chuàng)造新的卡片式交互形式,以創(chuàng)造更加極致的用戶體驗。
本文由 @小偉同學(xué) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖作者提供
寫得很棒??贊贊贊
B端的同學(xué)很受用 ??
還不錯,有前途
青年設(shè)計師就應(yīng)該多多思考,而不是埋頭畫圖,贊一個
好文! 關(guān)注啦
受益匪淺~
文章寫的很棒,想跟您授權(quán)下轉(zhuǎn)載到公眾號“黑桃A玩設(shè)計”,您看可以么 ??
好的,請注明轉(zhuǎn)載出處,謝謝