界面布局之_關(guān)于卡片設(shè)計(jì)的思考

你有沒(méi)有反問(wèn)自己是在被趨勢(shì)牽著鼻子走,還是真正深思熟慮后,選擇更符合自己產(chǎn)品定位和內(nèi)容傳達(dá)的表現(xiàn)形式?

總的來(lái)說(shuō),任何表現(xiàn)形式都應(yīng)該是為了更好的呈現(xiàn)功能及內(nèi)容,而不是盲目的追隨趨勢(shì)。

自成一派的優(yōu)秀設(shè)計(jì)師并不需要受到任何風(fēng)格的局限,因?yàn)樗里L(fēng)格并無(wú)好壞之分,而是探索更適合自己產(chǎn)品的處理方式。

界面布局樣式有哪些?

在做界面設(shè)計(jì)時(shí),我們?yōu)榱藚^(qū)分信息結(jié)構(gòu)及層次,通常采用以下3種布局樣式:卡片式設(shè)計(jì)、分割線(xiàn)、無(wú)框設(shè)計(jì)。

1.卡片式

自從Android4.1上Google Now登臺(tái)亮相之后,卡片式這種設(shè)計(jì)思路/風(fēng)格慢慢就流行了起來(lái),被大家所關(guān)注和使用。

Google將它稱(chēng)之為“Inside Out design(由內(nèi)而外式)”,它的本質(zhì)是更好的處理信息集合,那么卡片式設(shè)計(jì)適合運(yùn)用在什么地方呢?a.增加空間利用率;b.區(qū)分不同維度內(nèi)容;c.提升可操作性

a.增加空間利用率

相比于傳統(tǒng)列表式布局,卡片式設(shè)計(jì)能更好的打破原有的框架。比如,在傳統(tǒng)列表下,內(nèi)容一般為縱向滾動(dòng)操作,展示的內(nèi)容有限,而采用卡片式的布局,在縱向的內(nèi)容流里,還可以很好的增加橫向滑動(dòng)的內(nèi)容區(qū)域,而且看起來(lái)很整體。

知乎feed流里增加知乎live的橫向滑動(dòng)內(nèi)容

b.區(qū)分不同維度內(nèi)容

卡片,其實(shí)比較像一個(gè)容器,你可以把不同維度的內(nèi)容放入不同的卡片中,使其在內(nèi)容區(qū)分的同時(shí),還能保持界面的統(tǒng)一性。

比如:淘寶采用卡片處理信息的層級(jí)。第一個(gè)卡片承載著:個(gè)人信息及偏好;第二個(gè)卡片:購(gòu)買(mǎi)操作后的所有關(guān)鍵流程;第三個(gè)卡片:一些淘寶內(nèi)使用率不高的功能聚合;第四個(gè)卡片,是對(duì)支付寶和理財(cái)產(chǎn)品的一種推廣;等等...?

淘寶采用卡片處理信息的層級(jí)

每個(gè)卡片都是不同維度,相對(duì)獨(dú)立的,但通過(guò)不同大小的卡片歸納后,比起傳統(tǒng)列表項(xiàng)?+?分割線(xiàn)?+?標(biāo)題的視覺(jué)效率要高很多,顯得更有有秩序。

再比如:荔枝FM、微信讀書(shū),也是采用卡片式設(shè)計(jì),來(lái)歸納不同維度的信息內(nèi)容。?


歸納不同維度的信息內(nèi)容

還有,微信公眾號(hào)和appstore,同樣是采用這種處理方式,把繁雜的信息以時(shí)間維度,歸納到不同卡片中。

以時(shí)間維度

c.提升可操作性

卡片是一種擬真元素,可以被覆蓋、堆疊、移動(dòng)、劃去,這樣能更好的拓展內(nèi)容塊的視覺(jué)深度和可操作性。

比如:iPhone自帶的“提醒事項(xiàng)”APP,就是采用卡片堆疊的方式,用戶(hù)可按照標(biāo)題快速查找目標(biāo)備忘錄,同時(shí)進(jìn)行點(diǎn)擊操作,打開(kāi)卡片內(nèi)容。

卡片堆疊

探探,運(yùn)用卡片式設(shè)計(jì),實(shí)現(xiàn)左右滑動(dòng)代表感不感興趣的操作,從而增加產(chǎn)品的趣味性。

增加產(chǎn)品的趣味性

但是,卡片也有它的弊端,如果不在何時(shí)的場(chǎng)合盲目的使用卡片設(shè)計(jì),也會(huì)使你的設(shè)計(jì)變得低效和空間浪費(fèi)。

舉個(gè)例子,下面這種效果圖,設(shè)計(jì)師們應(yīng)該都不陌生,因?yàn)樵诟鞔笤O(shè)計(jì)網(wǎng)站上經(jīng)常看到的。

卡片的弊端

但是,你認(rèn)真分析下,好好的一個(gè)通訊錄,明明只有簡(jiǎn)單的頭像和名字的元素,非要包裹在卡片里,而且卡片與卡片之間還要留出間距。為了視覺(jué)效果,空間這么浪費(fèi),并且影響效率。

如果按照微信的策略好友可以加到5000,那找個(gè)人不得向上滑死么。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,351評(píng)論 25 708
  • 卡片式設(shè)計(jì)的變遷 說(shuō)到卡片大家都不陌生。日常生活中我們都接觸過(guò)哪些卡片呢?細(xì)細(xì)留意實(shí)際上我們每天無(wú)時(shí)無(wú)刻不被卡片所...
    角馬X閱讀 1,992評(píng)論 13 24
  • 第八章 愛(ài)情,你有沒(méi)有見(jiàn)過(guò)它全部的樣子? 最近的橙子小姐和向陽(yáng)先生就好像泡在了蜂蜜里面,每天臉上都掛著甜死人不...
    南橘愛(ài)北枳閱讀 556評(píng)論 0 21
  • 長(zhǎng)這么大,從來(lái)沒(méi)在野外露過(guò)營(yíng),不知道野外露營(yíng)的樂(lè)趣與兇險(xiǎn)。 看似野外露營(yíng)有很大的吸引力,因?yàn)槟鞘且黄耆粗奶斓?..
    Kitekiss閱讀 292評(píng)論 0 2
  • 小學(xué)生語(yǔ)文預(yù)習(xí)要求和方法 “凡事預(yù)則立,不預(yù)則廢?!睂?duì)于語(yǔ)文學(xué)習(xí)來(lái)說(shuō),“預(yù)習(xí)”是非常重要的一個(gè)學(xué)習(xí)習(xí)慣,是調(diào)動(dòng)孩子...
    壹陶然閱讀 4,139評(píng)論 0 2

友情鏈接更多精彩內(nèi)容