激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

從列表式UI中升華探討:卡片式UI有哪些創(chuàng)新點(diǎn)

發(fā)布時(shí)間：2024-04-16 14:33:00 瀏覽量：183次

對(duì)于傳統(tǒng)企業(yè)端應(yīng)用而言，列表是最重要也是使用頻次最高的設(shè)計(jì)元素，列表式設(shè)計(jì)有很多優(yōu)點(diǎn)才會(huì)使之有廣泛的應(yīng)用，但是相應(yīng)的列表式設(shè)計(jì)也存在很多缺點(diǎn)，在越來(lái)越追求極致體驗(yàn)的大背景下，我們需要探討是否有其他設(shè)計(jì)模式可以完善列表式設(shè)計(jì)的不足，所以我們嘗試引入卡片式設(shè)計(jì)。

背景分析：列表式設(shè)計(jì)的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)

  1. 當(dāng)（橫向與豎向）信息較多時(shí)，列表視圖可以提供一種概覽性的方案來(lái)呈現(xiàn)，也可以快速掃描；
  2. 列表視圖可以承載豐富的過(guò)濾與檢索功能，滿足復(fù)雜的用戶搜索場(chǎng)景；
  3. 當(dāng)用戶需要批量選擇操作時(shí)，列表視圖提供了便捷的交互方式。

缺點(diǎn)

  1. 在用戶終端分辨率越來(lái)越多的情況下，列表的響應(yīng)性單一，空間利用率較差；
  2. 針對(duì)單條信息，呈現(xiàn)效果不夠豐富；
  3. 跨終端將會(huì)受局限；
  4. 過(guò)多的場(chǎng)景使用列表，會(huì)引起視覺(jué)疲勞。

設(shè)計(jì)目標(biāo)：細(xì)分業(yè)務(wù)需求，尋求每個(gè)場(chǎng)景下的極致體驗(yàn)，所以我們開始探尋卡片式設(shè)計(jì)模式

設(shè)計(jì)定義：什么是卡片式設(shè)計(jì)

簡(jiǎn)單說(shuō)卡片式設(shè)計(jì)，它是包含圖片以及文案并且有明顯邊界的信息區(qū)塊，本身可以是一個(gè)完整的信息區(qū)塊，也可以作為更多具體內(nèi)容的一個(gè)入口，同時(shí)也可以承載豐富的互動(dòng)方式。

價(jià)值點(diǎn)分析：卡片式設(shè)計(jì)的優(yōu)點(diǎn)

1. 重塑空間利用價(jià)值

我們將卡片當(dāng)做一個(gè)承載內(nèi)容的容器，不同的內(nèi)容被規(guī)劃成不同的卡片，不同的卡片有著適合自己的尺寸。這個(gè)時(shí)候傳統(tǒng)的框架被打破，卡片組成卡片集，空間利用上會(huì)得到極大的拓展，同時(shí)看起來(lái)也具有整體性。

卡片式設(shè)計(jì)配合以卡片相應(yīng)的交互操作，可以讓空間利用率更加合理。

在iOS系統(tǒng)下，appstore將卡片式設(shè)計(jì)發(fā)揮的淋漓盡致，不同的內(nèi)容被盛放到相應(yīng)的卡片容器中。

  1. 【專題】卡片就像窗口，卡片內(nèi)的信息可以平鋪在一個(gè)很大的畫布上，用戶可以通過(guò)窗口滾動(dòng)瀏覽信息，當(dāng)點(diǎn)擊的時(shí)候，窗口會(huì)展開變大，使用戶專注于這個(gè)類目的瀏覽與選擇；
  2. 不同的卡片之間采用常規(guī)豎向滾動(dòng)與橫向滾動(dòng)相結(jié)合，使得卡片集的組合空間更大，并且可以在橫向同類卡片與縱向不同欄目之間快速切換，方便快捷。

2. 內(nèi)容前置，信息分級(jí)

卡片作為一個(gè)獨(dú)立的容器，可以在內(nèi)容上進(jìn)行良好的布局組織，將信息分塊，突出重點(diǎn)，讓用戶快速找到感興趣的內(nèi)容，避免在繁雜的信息集中浪費(fèi)時(shí)間。

類似于電商中的商品類卡片，商品圖片、商品名稱、折扣信息、價(jià)格等被按重要性組織布局，組成一個(gè)友好且連貫的內(nèi)容體，整齊簡(jiǎn)練。

3. 跨越終端，多元場(chǎng)景

正因?yàn)榭ㄆ且粋€(gè)內(nèi)容的盛放容器，所以它有一個(gè)特別重要的特性是它可以自由變換大小，這使得它在跨終端的響應(yīng)中表現(xiàn)出色。

同時(shí)在不同的終端中，卡片的信息組織并不受影響，這也是保證跨終端體驗(yàn)一致的重要因素。

google極度推行卡片式設(shè)計(jì)，正是為了保證各式各樣的安卓機(jī)分辨率下的一致體驗(yàn)。

4. 擬物視覺(jué)，賞心悅目

人機(jī)界面交互是一門語(yǔ)言也是一門藝術(shù)，界面需要給用戶呈現(xiàn)信息，也需要給用戶心理感知。感知源于習(xí)慣，習(xí)慣源于現(xiàn)實(shí)，這就是擬物化設(shè)計(jì)，將用戶在現(xiàn)實(shí)生活中的習(xí)慣與感知傳承到界面交互中。

iOS中的卡包在空間布局允許的情況下，使用卡片式的擬物化設(shè)計(jì)，將真實(shí)且親切的感知帶給用戶，同時(shí)增加界面趣味性。

場(chǎng)景探索：尋求卡片式設(shè)計(jì)的最佳案例

Dashboard（工作臺(tái)）運(yùn)用場(chǎng)景

工作臺(tái)的設(shè)計(jì)源于儀表盤，而儀表盤的核心理念是直接、高效、準(zhǔn)確地向用戶展示最重要的信息。

對(duì)于工作臺(tái)的設(shè)計(jì)，需要重注三個(gè)元素：場(chǎng)景、角色、內(nèi)容；他們的關(guān)系是在相應(yīng)場(chǎng)景下需要給某類角色提供最需要查看的內(nèi)容，而這個(gè)內(nèi)容往往是多類別的。

我們將卡片式設(shè)計(jì)代入，自由的布局方式可以帶來(lái)每塊區(qū)域的很好的展示方式，同時(shí)更加重要的是卡片集強(qiáng)大的分類功能，在工作臺(tái)上做信息分類布局使得用戶可以更高效瀏覽一類信息。

數(shù)據(jù)排布主要涉及到三個(gè)心理學(xué)小知識(shí)：格式塔原則、短時(shí)記憶和神奇的X。

應(yīng)用選擇運(yùn)用場(chǎng)景

對(duì)于應(yīng)用選擇，我們需要展示給用戶的第一要素是『這是什么應(yīng)用』，每個(gè)獨(dú)立卡片中承載的圖標(biāo)和名稱可以以最生動(dòng)形象的感知傳達(dá)給用戶。

設(shè)計(jì)師往往注重功能化導(dǎo)向設(shè)計(jì)，而用戶體驗(yàn)更需要讓用戶愉悅的完成任務(wù)，所以注重感知和情緒設(shè)計(jì)會(huì)讓用戶更加喜歡。

卡片集運(yùn)用場(chǎng)景

這類場(chǎng)景往往更注重對(duì)單個(gè)信息的關(guān)注，此時(shí)用戶不需要進(jìn)行對(duì)比，更需要對(duì)單個(gè)信息內(nèi)容進(jìn)行多遠(yuǎn)互動(dòng)，我們將卡片進(jìn)行信息分級(jí)設(shè)計(jì)，同時(shí)設(shè)計(jì)豐富的互動(dòng)操作欄。

列表更傾向于對(duì)信息進(jìn)行總覽、比較、過(guò)濾篩選。

圖表類運(yùn)用場(chǎng)景

在數(shù)據(jù)可視化領(lǐng)域有『數(shù)據(jù)深度分析』和『數(shù)據(jù)概覽』，我們借助卡片承載簡(jiǎn)單的數(shù)據(jù)概覽內(nèi)容，展示數(shù)據(jù)趨勢(shì)與核心指標(biāo)，在保證數(shù)據(jù)價(jià)值的同時(shí)也使得數(shù)據(jù)可視化的運(yùn)用場(chǎng)景得到拓充。

將圖表卡片運(yùn)用在報(bào)表頁(yè)面，可以打造分析型報(bào)表的業(yè)務(wù)場(chǎng)景。

對(duì)話式UI運(yùn)用場(chǎng)景

我們打破傳統(tǒng)對(duì)話式UI的體驗(yàn)?zāi)Ｊ?，將『圖形化UI』與『對(duì)話式UI』相結(jié)合，此時(shí)卡片就是圖形化元素最好的載體，各式各樣的卡片豐富了對(duì)話式UI的交互方式，又與之完美融合，體驗(yàn)具有整體性。

結(jié)語(yǔ)

正是因?yàn)樯鲜鰞r(jià)值點(diǎn)使得卡片化設(shè)計(jì)快速流行起來(lái)，并且會(huì)使用越來(lái)越廣泛。

卡片式設(shè)計(jì)并不是一種簡(jiǎn)單的樣式設(shè)計(jì)，而是一種信息自由布局的設(shè)計(jì)語(yǔ)言，它使人機(jī)交互方式越來(lái)越豐富，相信會(huì)有越來(lái)越多的平臺(tái)創(chuàng)造新的卡片式交互形式，以創(chuàng)造更加極致的用戶體驗(yàn)。

本文由 @小偉同學(xué) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖作者提供

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定