中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在本文中，我將闡述卡片設(shè)計(jì)對(duì)UI設(shè)計(jì)師意味著什么，評(píng)價(jià)三個(gè)流行的卡片式服務(wù)。

網(wǎng)頁(yè)和手機(jī)應(yīng)用正徹底地從頁(yè)面轉(zhuǎn)向個(gè)性化體驗(yàn)，這些新的體驗(yàn)建立在許多單個(gè)內(nèi)容的聚合上，而這些內(nèi)容目前以卡的形式來(lái)呈現(xiàn)?？ㄆ降慕换シ绞秸趶V泛傳播，無(wú)論是新聞網(wǎng)站或是外賣應(yīng)用，你都可以看到幾乎無(wú)處不在的“電子卡片”。

如果你對(duì)設(shè)計(jì)自己的卡片式用戶界面感興趣，可以免費(fèi)下載并體驗(yàn)Adobe的Experience Design CC。

卡片是什么？

卡片通常是指那些包含一定圖片和文本信息在內(nèi)的長(zhǎng)方形，作為查看更多詳細(xì)信息的一個(gè)入口。因?yàn)榭雌饋?lái)如同真實(shí)世界中的卡片一樣，在界面設(shè)計(jì)中的卡片具有非常棒的隱喻效果。

早在互聯(lián)網(wǎng)和移動(dòng)設(shè)備出現(xiàn)之前，卡片就在我們身邊無(wú)處不在了——商業(yè)名片、棒球卡片，甚至便利貼。 因此，對(duì)于用戶來(lái)講，我們能更直觀地意識(shí)到這些卡片就像在現(xiàn)實(shí)生活中一樣代表著一定的信息。

棒球卡片是現(xiàn)實(shí)生活中一個(gè)很好的例子：你想知道的棒球運(yùn)動(dòng)員的基本信息都包含在一張小卡片的正反面。

卡片的優(yōu)點(diǎn)

卡片式設(shè)計(jì)可以應(yīng)用于各種環(huán)境，正確運(yùn)用的話它們可以改善APP的用戶體驗(yàn)。 以下是一些例子，說(shuō)明為什么卡片有益于你的用戶界面。

良好的內(nèi)容組織

卡片在占用較少屏幕空間的情況下將信息有組織的劃分到不同的區(qū)域中。用戶喜歡信息分塊，因?yàn)樗兄诳焖贋g覽：它可以讓用戶避免閱讀讓他們覺得恐懼和費(fèi)時(shí)的超長(zhǎng)段落，讓用戶更快地抓住其感興趣的部分。類似于文本段落是對(duì)語(yǔ)句的組織結(jié)果，卡片聚集多樣的信息形成一個(gè)連貫的內(nèi)容體。

卡片上的信息布局整齊簡(jiǎn)練。

摘要性的格式易于消化

卡片幾乎可以被用來(lái)容納任何形式的信息，其摘要性的信息屬性也易于用戶快速消化。用戶通過(guò)卡片可以很容易地訪問(wèn)到他們感興趣的內(nèi)容。進(jìn)而讓用戶愿意參與到對(duì)卡片的瀏覽和操作中來(lái)。

用戶可以快速瀏覽、滑動(dòng)卡片。

視覺上賞心悅目

基于卡片式的設(shè)計(jì)通常都嚴(yán)重依賴于其視覺效果。而卡片本身又對(duì)圖片有很強(qiáng)的依賴性。多項(xiàng)研究都已經(jīng)指出圖片確實(shí)能夠提升網(wǎng)站或應(yīng)用程序的設(shè)計(jì)效果和瀏覽體驗(yàn)，因?yàn)閳D片能夠快速有效地吸引用戶的注意力。因此，在卡片中如果能突出使用圖片，那自然會(huì)對(duì)用戶產(chǎn)生更強(qiáng)的吸引力。

卡片以視覺信息取悅用戶。

易于響應(yīng)式的設(shè)計(jì)

關(guān)于卡片最重要的事情是它們幾乎是可以無(wú)限變形的?？ㄆ降脑O(shè)計(jì)在桌面電腦和移動(dòng)設(shè)備都工作良好，因?yàn)樗愿子谟脩粝姆绞较蚱涑尸F(xiàn)內(nèi)容。正因?yàn)榭ㄆ鳛橐粋€(gè)內(nèi)容容器，能很容易的放大或縮小，所以對(duì)于響應(yīng)式的設(shè)計(jì)來(lái)說(shuō)，卡片是一個(gè)非常合適的選擇?？ㄆ诙嘣O(shè)備間能創(chuàng)造出一個(gè)一致獨(dú)立的美學(xué)效果，這就是為什么它能在不同設(shè)備間如此容易的創(chuàng)建出一致體驗(yàn)的原因。

卡片非常適合響應(yīng)式和移動(dòng)端設(shè)計(jì)。

為手指而設(shè)計(jì)

卡片完全適合手指操作，看起來(lái)似乎也是專為移動(dòng)端所創(chuàng)造的樣式。數(shù)字卡片的使用和現(xiàn)實(shí)中的卡片一樣，為用戶提供了舒適的體驗(yàn)。用戶無(wú)需思考如何操作，很容易理解翻轉(zhuǎn)卡片查看更多信息或滑動(dòng)查看更多卡片。

卡片幾乎是無(wú)限可操作的：他們可以充分利用動(dòng)畫和運(yùn)動(dòng)。（動(dòng)圖）

卡片式設(shè)計(jì)的最佳案例

卡片式設(shè)計(jì)的精髓在于桌面端和移動(dòng)設(shè)備的交集設(shè)計(jì)，在互動(dòng)性和可用性之間尋求平衡點(diǎn)。然而成功的卡片式設(shè)計(jì)需要具備清爽干凈的美學(xué)特征，并且能讓用戶直接輕松地交互。

瀑布流

卡片出現(xiàn)在一個(gè)瀑布流中時(shí)，便能夠創(chuàng)建出一系列符合自然時(shí)間軸的事件。例如Facebook在news feed中呈現(xiàn)最近時(shí)間段內(nèi)容的快速預(yù)覽。Facebook的news feed是以卡片區(qū)分內(nèi)容的無(wú)止境的瀑布流?？ㄆ谶@里的關(guān)鍵是分解內(nèi)容，它們將內(nèi)容分離成無(wú)止境的瀑布流，并使內(nèi)容易于分享。這種交互模式促使用戶樂(lè)于分享平臺(tái)的信息。

Facebook是卡片式設(shè)計(jì)易于承載信息的很好案例。

易于發(fā)現(xiàn)感興趣的內(nèi)容

卡片可以使相關(guān)內(nèi)容自然展示，讓用戶挖掘自己感興趣的內(nèi)容，設(shè)計(jì)師無(wú)不知曉的設(shè)計(jì)創(chuàng)意平臺(tái)Behance就是這么做的?？ㄆ皆O(shè)計(jì)是最適合藝術(shù)創(chuàng)意類平臺(tái)展示的方式。

Behance采用卡片式布局打造直觀的用戶界面。

Tinder是國(guó)外的一款手機(jī)交友APP，它的卡片模式利用探索發(fā)現(xiàn)的機(jī)制，讓用戶習(xí)慣去探索更多內(nèi)容，從而使Tinder成為最流行的移動(dòng)端應(yīng)用之一。Tinder的交互模式很簡(jiǎn)單：向左滑動(dòng)表示不感興趣，向右滑動(dòng)表示感興趣。這種卡片式交互模式令人好奇又上癮，因?yàn)橛脩舨坏貌焕^續(xù)滑動(dòng)看看下一個(gè)到底怎么樣。

工作流

卡片很容易將一定范圍內(nèi)的任務(wù)進(jìn)行歸類。Trello這個(gè)任務(wù)管理應(yīng)用就做得很好：工作板是卡片式的模塊，每個(gè)卡片代表了不同類型的任務(wù)。

Trello的工作板上充滿了卡片。

對(duì)話框

卡片是內(nèi)容的承載器，因此對(duì)于展現(xiàn)操作行為也是很適合的。參考iOS本身的AirDrop服務(wù)，當(dāng)你接收到信賴的數(shù)據(jù)傳輸請(qǐng)求時(shí)，桌面會(huì)彈出提示卡片，請(qǐng)求你接受或拒絕傳輸。蘋果的截圖針對(duì)于照片，但開發(fā)者可以把優(yōu)惠券、歌曲或是網(wǎng)絡(luò)連接等的任何東西放在卡片上。

控制面板

當(dāng)卡片式設(shè)計(jì)用來(lái)組織不同類型的內(nèi)容時(shí)，它的精確度極高。使用卡片，你可以將信息組織成符合邏輯的分組，并可以根據(jù)特定的上下文進(jìn)行排序。對(duì)于一個(gè)需要分組的集合而言, 合理利用不同類型的卡片比起傳統(tǒng)列表項(xiàng) + 分割線 + 標(biāo)題的視覺效率要高太多。

基于卡片的設(shè)計(jì)語(yǔ)言

2010年，微軟推出了Metro設(shè)計(jì)語(yǔ)言。Metro的一個(gè)關(guān)鍵設(shè)計(jì)原則是更好的關(guān)注應(yīng)用的內(nèi)容，而這是通過(guò)采用扁平化元素、排版和卡片來(lái)實(shí)現(xiàn)的。一個(gè)Metro卡片不僅僅是單純的設(shè)計(jì)元素，它還提供了必要的內(nèi)容與交互。

卡片設(shè)計(jì)的更多細(xì)節(jié)

簡(jiǎn)約

當(dāng)你準(zhǔn)備設(shè)計(jì)卡片時(shí)，簡(jiǎn)約應(yīng)當(dāng)是你始終牢記的一個(gè)準(zhǔn)則。Carrie Cousins對(duì)此有一個(gè)很好的建議：卡片可以在設(shè)計(jì)中包含多個(gè)元素，但是最好每次都突出其中的一個(gè)內(nèi)容或信息。這樣設(shè)計(jì)能使用戶選擇起來(lái)更精準(zhǔn)，也使得內(nèi)容得以分享。

ReaLync的列表是卡片形式，以此來(lái)顯示最重要的地方信息。

卡片和響應(yīng)式設(shè)計(jì)

我們都知道響應(yīng)式設(shè)計(jì)的重要性，要讓自己的應(yīng)用和頁(yè)面在不同尺寸的屏幕上運(yùn)行自如。當(dāng)我們?yōu)椴煌聊辉O(shè)計(jì)時(shí)，應(yīng)當(dāng)充分利用屏幕特征和卡片里的內(nèi)容屬性，這樣才能根據(jù)屏幕的大小快速、輕松地調(diào)整內(nèi)容?？ㄆ皆O(shè)計(jì)與響應(yīng)式框架兼容性良好，它可以輕松適應(yīng)不同的屏幕尺寸，自適應(yīng)地進(jìn)行展示。

數(shù)字化后的卡片可以以不同的方式進(jìn)行操控，這是其一大優(yōu)勢(shì)。例如在移動(dòng)設(shè)備上，卡片可以橫向或縱向排列。

手機(jī)端豎屏的Verge

電腦端的Verge

同一個(gè)布局下，卡片通常限制寬度，但不限制高度。最大高度限制于展示平臺(tái)的可視空間高度，但有時(shí)也是可以擴(kuò)展的。

卡片和排版

關(guān)于卡片設(shè)計(jì)的一切都應(yīng)易于閱讀和理解。設(shè)計(jì)師應(yīng)當(dāng)視可讀性為重要目標(biāo)：

• 選擇簡(jiǎn)單且易于辨別的字體，以及對(duì)比度良好的配色方案（純色背景上的文本要與背景有足夠的對(duì)比度，保證文本清晰可見）。
• 嘗試控制字體數(shù)量，對(duì)于大多數(shù)卡片，一種字體就足夠了。

結(jié)語(yǔ)

希望你能了解為什么卡片式設(shè)計(jì)變得如此流行，并且相信這個(gè)趨勢(shì)也會(huì)長(zhǎng)盛不衰。這種趨勢(shì)不會(huì)那么快結(jié)束，卡片式設(shè)計(jì)將會(huì)是APP設(shè)計(jì)的大勢(shì)所趨?？ㄆ皆O(shè)計(jì)的極佳可用性是其經(jīng)久不衰的原因?？ㄆ⒉恢皇峭接型獗?，它是設(shè)計(jì)統(tǒng)一體驗(yàn)的最自由的布局形式。如今人們獲取信息速度越來(lái)越快，卡片能忽略設(shè)備的差異給用戶提供更好的服務(wù)。這也是以用戶體驗(yàn)為中心的設(shè)計(jì)。

原文作者：Nick Babich

原文地址：https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/

翻譯：ued_ui

譯文地址：攜程設(shè)計(jì)委員會(huì)