已然成熟的卡片式設計，遵循著怎樣的設計規(guī)則？

網(wǎng)站建設計技巧或者設計手法趨近于成熟的時候，我們常?？梢钥偨Y(jié)出足夠完整的實踐了。在這個移動端逐步占據(jù)主導而桌面端設備仍然主導生產(chǎn)力的時代，強調(diào)同時兼顧兩大平臺的設計，是自然而然的事情。對于許多人而言，在桌面端和移動端上來回切換是一件非常平常的事情，設計師需要讓設計兼容不同屏幕，而卡片式設計，正是這種語境下誕生，并且蓬勃發(fā)展到了今天。
無論主推卡片式設計的Android，還是卡片化元素越來越多的iOS，又或者是將卡片元素玩的得爐火純青的 Facebook、Twitter 等巨頭，我們可以清晰地看到卡片式設計的普及和巨大的能量。它足夠整潔，有著良好的參與感，能夠更好地組織內(nèi)容，易于擴展且非常靈活。
同時，諸多的優(yōu)勢和可能性也意味著，你想要設計出體驗足夠好的卡片元素，需要有足夠好的策略和審慎的構思，否則，你的設計很可能是個失敗的產(chǎn)物。
先說說卡片式設計本身
在真正開始探討卡片式設計的實踐之前，我們還是需要梳理一下卡片式設計的基本概念和它的優(yōu)勢。
UI中的卡片借用了現(xiàn)實世界中的卡片的特征和概念。通常UI中的卡片是矩形的，其中承載圖像、文本、鏈接、按鈕等不同元素?？ㄆ侨萜?，但是通常一個卡片中會集中承載一種或以一種元素為核心的一小組元素。不同的元素在不同的卡片中各司其職，不同的卡片組合到一起，構成功能性的頁面，或者組合。
典型的卡片結(jié)構
例如在一個電商網(wǎng)站中，設計師會使用卡片來承載類目列表，在設計媒體中，卡片被用來承載用戶發(fā)出的一條條內(nèi)容，在新聞類網(wǎng)站中，卡片則常常拿來承載不同的新聞。
卡片的優(yōu)勢也很明顯：
承載著不同元素的卡片有著千變?nèi)f化的玩法，適合用來展示尺寸不同，屬性不同的各種元素。
響應性：卡片移動端屏幕當中顯示效果頗為精美，移動端需要流暢而靈活的布局，這一點卡片非常合適?？ㄆ沟貌季指鼮殪`活，三個卡片在桌面上可以顯示為并排的3列，在移動端上可以縱向拍成1列，這兩種布局都能貼合用戶的閱讀習慣。
組織性：卡片可以將不同類型的元素有效地組織到一起，無論是圖片、視頻、文本還是CTA按鈕，由于卡片本身的靈活性，設計師可以靈活地、有針對性地調(diào)整每一個元素而不用擔心影響其他的的元素?？ㄆ瑯嫿ǔ鼋y(tǒng)一的用戶模式，使得用戶可以更好地、快速地完成任務。
極簡：極簡主義的設計是目前主流，也是流行的設計風格。極簡主義風格下用戶更容易理解內(nèi)容，外觀上也更為優(yōu)雅。卡片式設計在精神上和極簡主義相通。
卡片式設計實踐
·有目的地使用卡片
雖然卡片在UI設計中功能強大，但是不要僅僅為了用而用。絕大多數(shù)設計師是為了利用卡片本身的強大組織性才采用這一設計元素。
當你的UI中有大量不同類型的元素，諸如圖片、文本、列表、CTA按鈕等，你需要借助卡片來整合。
所承載的元素展示的長度可變
用戶不用考慮各種元素之間的尺寸差別
需要承載某些交互，比如輸入框、按鈕和鏈接等
·保持簡約
每個卡片承載一種元素，執(zhí)行一個任務。各種不同的元素通常不應該混雜在一起，不同的卡片將它們分散開來，讓它們互補干擾。如果同時需要不同屬性的內(nèi)容共同完成一個任務，那么要讓它們靠在一起，多卡片協(xié)同。限制卡片中文本的數(shù)量，盡量不要添加段落。
·引導用戶關注最重要的信息或操作
善用卡片的層次結(jié)構，突出關鍵內(nèi)容和信息。例如將承載管家信息的卡片放在頂部，還可以使用排版來突出關鍵的信息和交互。
·精心選圖
圖片是UI當中視覺化元素的代表，它能讓界面吸引人，也能讓卡片脫穎而出。但是不是圖片素質(zhì)越好，對于UI就越好，圖片必須要傳達正確的信息，這是第一要務。圖片在卡片內(nèi)的位置，通常取決于它是主要內(nèi)容還是支撐性的內(nèi)容。
·支撐微交互
卡片本身是交互式元素，卡片上的鏈接和按鈕可以指向更為詳細的信息，卡片內(nèi)自然也可以承載更為多樣的微交互。比如，將光標懸停于卡片之上的時候，可以觸發(fā)顯示其他的內(nèi)容。
·支持手勢
移動端設計當中，手勢是主要的交互。手勢不僅具備可用性，而且有趣的手勢和交互能夠創(chuàng)造有趣和愉悅的體驗。通過滑動來移動卡片，以及使用點擊、長按來組織卡片，通過上下滑動來關閉卡片，早在 webOS時代就已經(jīng)有了。不過，要讓整個手勢交互的邏輯順滑自恰，這樣才能讓體驗無懈可擊。
·精心打磨
有創(chuàng)意的設計會讓人眼前一亮。尺寸合理、大小合適的高清圖片讓人賞心悅目。精心打磨的細節(jié)令人看著就舒服。你應該盡量讓卡片給人快樂和愉悅的體驗。
結(jié)語

卡片式設計如果能夠好好運用，對于整個體驗的效果是明顯而巨大的?，F(xiàn)如今的設計師已經(jīng)在卡片式設計上有了足夠深入的探討，多鉆研實例能夠讓你更好地掌握這一設計技巧。

本文來自創(chuàng)新互聯(lián)品牌網(wǎng)站建設網(wǎng)站設計制作公司-創(chuàng)新互聯(lián)
標簽：成都網(wǎng)站建設公司,成都網(wǎng)頁設計公司,成都網(wǎng)站設計公司，網(wǎng)站建設 成都，成都 網(wǎng)站建設，企業(yè)網(wǎng)站建設，營銷型網(wǎng)站建設，網(wǎng)站建設設計，網(wǎng)站開發(fā)，網(wǎng)站制作設計

文章名稱：已然成熟的卡片式設計，遵循著怎樣的設計規(guī)則？
轉(zhuǎn)載來于：http://www.muchs.cn/news7/168657.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設計公司、動態(tài)網(wǎng)站、建站公司、企業(yè)建站、微信小程序、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)