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

卡片式設計依然是目前UI設計的熱門，雖然我們在前幾天的文章《不是萬能！卡片式設計并不能支撐所有的設計需求》當中探討了卡片式設計為數(shù)不多的“局限”。今天我們從基本的規(guī)則入手，為你展示卡片式設計的最佳實踐。

卡片這種UI元素一直是以小巧整齊的內(nèi)容容器的形式而存在著。當我們探討清晰平衡、富有美感、簡約時尚而又具備良好可用性的設計方案的時候，卡片式設計幾乎是不二之選。早年間的Pinterest 和Facebook 是卡片式設計的先驅(qū)者，隨后Google 通過 Material Design 幾乎標準化了卡片式設計，現(xiàn)在你會發(fā)現(xiàn)卡片式設計，幾乎已經(jīng)深入到各個行業(yè)、領域的UI設計當中。

最佳實踐(best practice)，是一個管理學概念，認為存在某種技術或者方法使生產(chǎn)管理實踐的結(jié)果達到最優(yōu)，并減少出錯的可能性。也就是我們常說的“最佳解決方案”。

最初是 Pinterest 采取了這種使用卡片作為信息組織的基本元素的思路，使得網(wǎng)頁中多類型信息組織有了更好的用戶體驗設計方案，并隨后引發(fā)了“瀑布流”設計風潮。之后多年的積累和探究，卡片式設計有了長足的進步和相對系統(tǒng)的設計思路，今天的文章，我們將探討最常見也是最實用的5種卡片式設計的最佳實踐。

1、遵循“一卡一概念”的規(guī)則

每一個卡片應當承載一種概念，其中內(nèi)容不應當混搭而復雜。卡片式設計當中，卡片可以橙子啊多種多樣的信息和元素，但是單個卡片應當保持其中內(nèi)容屬性的純粹性和直觀性。這樣用戶會更輕松的選取他們想要的內(nèi)容，或者分享他們眼中最合適的內(nèi)容。

2、讓整個卡片都可被點擊

根據(jù)費茨定律（Fitts’s Law），用戶應當可以點擊卡片的任何一個部分來觸發(fā)其中的內(nèi)容，而不只是圖片和文本鏈接。更大的觸摸和觸發(fā)范疇是卡片本身的優(yōu)勢所在，不論是在移動端的觸摸屏上，還是以鍵盤鼠標為主桌面端上，讓整個卡片都可被點擊明顯擁有更強的可用性。

小貼士：Material Design 中常常會讓卡片擁有微妙的陰影，這種設計是非常有道理的，陰影和深度會給予用戶以視覺感知力，強化它的可見性，以及知覺上的“可點擊性”。

3、讓卡片具有視覺愉悅感

好的視覺設計和良好的可用性是卡片式設計的拿手好戲。卡片本身的良好承載性，使得它稍加打磨就可以擁有不錯的美學特征，好用和漂亮結(jié)合到一起，會讓用戶對卡片式設計著迷的。

當你在設計實戰(zhàn)當中使用卡片的時候，你應當特別注意下面的幾個部分：

圖片

卡片是圖片的“重度用戶”，甚至可以說卡片“特別擅長”展示圖片。研究證明，圖片本身能夠提升設計的質(zhì)感，而圖片和卡片式設計的結(jié)合無疑能夠讓卡片本身對于用戶的吸引力，再往上提升一個高度（前提是圖得找對）。

陰影和漸變

陰影和漸變是最能讓用戶將UI中的卡片和現(xiàn)實中的卡片聯(lián)系到一起的元素。在設計的時候，你應當仔細觀察一下卡片在現(xiàn)實世界中的質(zhì)感，光影的分布和走向，否則陰影和漸變太假就不好了。

排版

當然，你還可以借助文本來吸引用戶的注意力。卡片中的文本內(nèi)容應該易于閱讀，容易理解，所以，你應當確保它具有最大的可讀性：

• 選擇簡單的字體和易于閱讀的配色方案（文本內(nèi)容應該是清晰可見的，放置在純色背景下，擁有足夠的對比度）
• 嘗試控制字體的數(shù)量，對于絕大多數(shù)的情況，單個字體足以應付。

小貼士：卡片中的正文部分只需要一個Normal 字重的非襯線體就行了。

4、限制卡片中的內(nèi)容

卡片通常不大，并且大多是作為詳細信息的入口而存在的，所以它本身不應當承載太多細節(jié)。當你試圖向一張卡片中加入太多的內(nèi)容的時候，會讓其變得過于臃腫，不論是太長還是太寬都非常難看，而且會失去它作為一個“卡片”的隱喻。

下面就是一個采用卡片式設計的案例。注意中間的卡片，它的問題在于其中填充了太多的內(nèi)容，這些內(nèi)容太難以查看了。

5、充分利用動效

如果動效用的好，用戶體驗會有極大的提升。動效能夠幫助用戶在基于卡片的UI當中更好的定位，并且建立不同卡片狀態(tài)之間的視覺關聯(lián)。

視覺提示

視覺提示能夠幫助用戶更好的了解如何同界面進行交互。當需要為用戶展示具體的某個功能如何操作的時候，它就顯得頗為有用了。

視覺反饋

在UI設計當中，視覺反饋是極為重要的組成部分。視覺反饋的工作原理很簡單，視覺反饋幫助用戶確認他們的交互已經(jīng)完成。在現(xiàn)實生活中，物品通常會對我們的操作給予回應，比如點擊開關會有力量的回饋，以及“喀噠”一聲響。在桌面端UI中，鼠標光標懸停在可交互的控件上之時，箭頭會變成按鈕，這也是UI元素給予的反饋。懸停動畫增加了功能的可發(fā)現(xiàn)性，同時使得體驗更加有意思。在移動端和卡片式設計當中更是如此。

使用懸停動效觸發(fā)更多的選項。比如在下面的案例當中，光標懸停之后，用戶可以標記、回復、轉(zhuǎn)發(fā)或者刪除當前信息。

放大

這個放大的動效連接了預覽和詳情視圖：用戶選中卡片就可以看到對應的詳細信息。這個動效確保了用戶能夠聯(lián)系上下文。

結(jié)語

卡片是UI設計師發(fā)揮創(chuàng)意的畫板，它不僅僅是一個形似卡片的UI控件，它還是創(chuàng)建優(yōu)質(zhì)內(nèi)容，營造優(yōu)質(zhì)用戶體驗的重要布局手段。

原文地址：medium

原文作者：Nick Babich

譯者：@陳子木

譯文地址：http://www.uisdc.com/best-practices-for-cards