国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

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

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

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

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

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

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

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

好的視覺設(shè)計和良好的可用性是卡片式設(shè)計的拿手好戲?？ㄆ旧淼牧己贸休d性，使得它稍加打磨就可以擁有不錯的美學(xué)特征，好用和漂亮結(jié)合到一起，會讓用戶對卡片式設(shè)計著迷的。

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

圖片

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

陰影和漸變

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

排版

當然，你還可以借助文本來吸引用戶的注意力?？ㄆ械奈谋緝?nèi)容應(yīng)該易于閱讀，容易理解，所以，你應(yīng)當確保它具有最大的可讀性：

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

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

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

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

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

5、充分利用動效

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

視覺提示

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

視覺反饋

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

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

放大

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

結(jié)語

卡片是UI設(shè)計師發(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