手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

【譯】卡片式設(shè)計強在哪里

2016-12-30    用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

 來源:UI中國



在現(xiàn)在這個信息大爆炸的時代,網(wǎng)頁和app所需要展示的內(nèi)容越來越多。以前那種簡單堆砌式的頁面設(shè)計已經(jīng)無法滿足現(xiàn)在用戶的需求了。用戶見的越多,也變的越來越“挑剔”。對于一款app來說,他們除了要求界面好看之外,也要易于操作,簡單易懂。那么我們?nèi)绾卧谧⒅乇U嫌脩趔w驗的前提下還能表現(xiàn)如此繁雜的內(nèi)容呢?卡片式設(shè)計應(yīng)運而生了。

什么是卡片式設(shè)計?

卡片式設(shè)計的“卡片”其實是交互信息的載體,通常以矩形的形式呈現(xiàn)。這種樣式很像我們?nèi)粘I钪杏玫降目ㄆ热缑?、信用卡和球星卡等。所以我們形象的稱這種設(shè)計風(fēng)格為卡片式設(shè)計。

2URBRfV.jpg


這張球星卡正反兩面印有這名球員的基本信息。

卡片式設(shè)計理念

卡片式設(shè)計具有很強的兼容性。在新聞類網(wǎng)站和美食類app,你都可以看到它的身影。那么卡片式設(shè)計究竟有著什么樣的魅力讓它如此的受歡迎呢?

內(nèi)容整合

卡片式設(shè)計將內(nèi)容劃分到不同的卡片上,每一張卡片代表著同一邏輯類型的內(nèi)容??ㄆ木仃囆闻挪伎梢院芎玫囊龑?dǎo)用戶的視線。傳統(tǒng)的列表設(shè)計模式,我們只可以縱向的瀏覽內(nèi)容,但是卡片式設(shè)計可以讓用戶沿著縱向和橫向有序的進(jìn)行瀏覽。這種瀏覽方式更加的,用戶可以更快的發(fā)現(xiàn)他們感興趣的內(nèi)容。

zQ3UJnz.png


卡片就是一個承載信息的“容器”

簡潔明了

我曾經(jīng)說過一款app或者一個網(wǎng)站其實就是一本書。我們設(shè)計師就是這本書的作者,我們要讓這本書為讀者(用戶)所接受,首先我們就應(yīng)該讓它通俗易懂。現(xiàn)在這種快節(jié)奏的生活方式,人們不愿意靜下心來讀大部頭??ㄆ皆O(shè)計就將頁面的內(nèi)容進(jìn)行分割整合,用戶一眼就能看明白。

yYbq6vY.png


當(dāng)我們說到卡片式設(shè)計的時候,簡潔這個詞應(yīng)該第一個想到。Carrie Cousins說過“一張卡片一條信息”。一個卡片上可以展示多條信息,但是要做到有側(cè)重,每張卡片要突出表現(xiàn)一條信息或者內(nèi)容。

美觀

3muAvaV.png


卡片式設(shè)計中卡片其實就是帶有文字與圖像的矩形。研究表明,圖像的使用可以有效的吸引用戶的注意力。帶有圖片的頁面對于用戶來說,遠(yuǎn)比通篇文字的新聞通稿式頁面有吸引力的多。

6zeInmj.png


我們應(yīng)該使用簡單的字體和易讀的配色。(文字應(yīng)該是最顯眼了,選用一個足夠?qū)Ρ榷鹊募兩鳛楸尘埃?/span>

不要使用過多的字體。大部分情況下,一個卡片中一種字體就足夠了。

易操作

現(xiàn)實生活中,你接住別人遞給你的名片,你將信用卡從pos機中刷過,你將酒店房卡插進(jìn)卡槽。這一切都是需要手指來完成?,F(xiàn)實的卡片設(shè)計的很適合手指操作,虛擬的卡片也同樣如此。我們可以點擊卡片來獲取更多信息,滑動卡片來看下一條內(nèi)容,這些操作手指都很容易實現(xiàn)。

適合響應(yīng)式設(shè)計

我們都知道你的app和網(wǎng)站在不同的設(shè)備下保持適配是一件很重要的工作。而卡片式設(shè)計就能很好的幫助我們來完成這一點。卡片式設(shè)計從根本上來說就是將頁面內(nèi)容進(jìn)行分解,然而再整合一個無法再進(jìn)行分解的元素。而響應(yīng)式設(shè)計要求的就是我們可以根據(jù)屏幕尺寸的大小對頁面內(nèi)容就行調(diào)整。卡片式設(shè)計就可以對頁面內(nèi)容進(jìn)行分割重組來適應(yīng)不同的屏幕。比如這個Google在手機設(shè)備上顯示一個卡片,pad端顯示兩個卡片。

E7NJFnY.png


而卡片本身還具有很強的伸縮性,可大可小??ㄆ皆O(shè)計可以在不同大小的屏幕中仍保持視覺風(fēng)格的統(tǒng)一。傳統(tǒng)的列表排布模式很難做到適配不同屏幕的情況下還保持視覺風(fēng)格的統(tǒng)一??ㄆ母叨瓤梢愿鶕?jù)屏幕尺寸進(jìn)行相應(yīng)的調(diào)整。

6jUVRrF.png


卡片式設(shè)計的經(jīng)典案例

Facebook

nARzyeF.jpg


Facebook中好友的每條動態(tài)都是以一張卡片的形式展現(xiàn)的。用戶可以很快的完成對頁面信息的讀取。你可以不斷的往下滑查看更多的好友動態(tài)。你也可以看到多少人點贊,多少人評論與分享。這些功能誘導(dǎo)用戶積極參與互動,增加傳播性。

Tinder

byE7BjZ.png


Tinder是一款交友軟件,其頁面設(shè)計的很簡單但是很精致。主體就是一張附近用戶的照片,你如果喜歡可以就向右滑動卡片,不喜歡就想左劃,就是這么簡單。很適合拇指操作。

Trello

EF322yA.png


卡片式設(shè)計很適合任務(wù)列表類的頁面。Trello就是一個很出色的例子,在這里做了一個卡片式的任務(wù)面板,其中每張卡片代表著一個獨立的任務(wù)。

AirDrop

JRraqiy.jpg


卡片可以用來承載內(nèi)容,也可以用來表示動作。Apple的AirDrop功能,當(dāng)對方想給你傳送文件的時候,你就會收到一個請求。我們可以做一個卡片式的彈出框來完成這個交互事件。

Behance

YvIz2yy.jpg


卡片式設(shè)計使頁面如此的簡單,所以用戶的注意力都放在內(nèi)容上面了,內(nèi)容也會更容易的引起用戶的注意力。Behance就是一個卡片式設(shè)計的網(wǎng)站,每張卡片代表了一個作品,里面提供了作者姓名,多少瀏覽者點擊了這張卡片,多少人轉(zhuǎn)載了它。

微軟

6niUjeq.png


2010年,微軟推出了Metro UI。微軟將原本擬物化設(shè)計統(tǒng)統(tǒng)拍扁,陰影,高光,質(zhì)感一律不要。這種扁平化的設(shè)計風(fēng)格使整個頁面簡潔而美觀,用戶將更多的注意力放在頁面內(nèi)容上。在這里卡片不僅僅是一個設(shè)計元素,還是為頁面交互打下基礎(chǔ)。

總結(jié)

卡片式設(shè)計不僅僅體驗在頁面外觀上,它為我們提供了一種靈活的布局方式,流暢的用戶體驗。當(dāng)然以上只是我的一家之言。每個人對卡片式設(shè)計都會有自己的看法與理解。在我看來,卡片式設(shè)計依舊會流行一段時間,繼續(xù)在app與網(wǎng)頁設(shè)計中占有一席之地。

藍(lán)藍(lán)設(shè)計m.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)



分享本文至:

日歷

鏈接

個人資料

存檔