工作中我們經(jīng)常會(huì)接到一些信息卡片的設(shè)計(jì)需求，在早期很長(zhǎng)一段時(shí)間里都困擾著我。和大多數(shù)剛?cè)腴T的小白一樣，當(dāng)接觸到這類需求的時(shí)候，下意識(shí)就是打開(kāi)自己的的Eagle，找合適的參考，去借鑒排版布局。但是其實(shí)最后只知道參考這樣做好看，對(duì)于作者的設(shè)計(jì)思路并不清楚。后面我嘗試去總結(jié)其中的規(guī)律，也得出了自己的一些設(shè)計(jì)思路。

02 這里講的信息卡片是什么？

讓我們先看下各類App中，一些比較不錯(cuò)的信息卡片長(zhǎng)什么樣：

03 一個(gè)信息卡片包含什么內(nèi)容？

• 圖片

• 圖標(biāo)

• 文字

• 標(biāo)簽

• 按鈕

• 布局

1【圖片 】

圖片理解很簡(jiǎn)單，就是該卡片想表達(dá)的信息主體，可以是商品、風(fēng)景、插畫(huà)等，PGC內(nèi)容圖片通常由運(yùn)營(yíng)把控，UGC內(nèi)容為用戶自行上傳。雖然上線后實(shí)際上傳的圖片，對(duì)于設(shè)計(jì)來(lái)說(shuō)沒(méi)有太多關(guān)系，但在設(shè)計(jì)稿中還是需要嚴(yán)格控制圖片質(zhì)量。（一定程度上也能提高過(guò)稿率）

圖片挑選需要注意如下：

• 高清無(wú)碼

• 主體突出且簡(jiǎn)潔

• 配圖與文字信息相關(guān)聯(lián)

• 多圖片情況下，視線保持同一水平線或同一角度

2【 圖標(biāo) 】

圖標(biāo)的出現(xiàn)有以下幾類：品牌特定logo、特殊字段圖形化（如性別、定位、點(diǎn)贊、VIP、關(guān)閉等等，將字段圖形化后可以減少該組件內(nèi)的文本信息，方便設(shè)計(jì)排版的同時(shí)提升整體閱讀體驗(yàn)）、氛圍點(diǎn)綴（主要在于豐富卡片，提升設(shè)計(jì)感來(lái)吸引用戶注意）

圖標(biāo)設(shè)計(jì)需要注意如下：

• 清晰度：品牌圖標(biāo)避免過(guò)小，導(dǎo)致難以分辨。

• 識(shí)別度：字段圖形化后一定需要確保擁有足夠的識(shí)別度，盡量在大眾認(rèn)知范圍內(nèi)。比如“+”可以代表添加和關(guān)注、“x”代表關(guān)閉，“大拇指”和“愛(ài)心”代表點(diǎn)贊、“皇冠”代表VIP等等。

• 風(fēng)格一致：氛圍點(diǎn)綴圖標(biāo)在配色上，需要保證與產(chǎn)品調(diào)性一致，或在色彩情緒上，與該模塊傳遞的感受一致。還有一些細(xì)節(jié)，比如線性圖標(biāo)描邊粗細(xì)，圓頭還是方頭端點(diǎn)，這類盡量保持一致（當(dāng)然也可根據(jù)情況演變新的風(fēng)格，但注意風(fēng)格種類不宜過(guò)多）

3【 文字 】

文字即對(duì)圖片的描述信息，通常分為：標(biāo)題、正文、輔助信息、優(yōu)惠信息、數(shù)據(jù)信息（評(píng)分、價(jià)格、點(diǎn)贊評(píng)論數(shù)等） 

文字信息處理需要注意如下：

• 對(duì)比：需明確頁(yè)面信息權(quán)重，突出重點(diǎn)，便于有效傳遞信息。移動(dòng)端常見(jiàn)對(duì)比方式：特殊字體對(duì)比、字號(hào)差對(duì)比、色彩對(duì)比、修飾元素（點(diǎn)線面）點(diǎn)綴對(duì)比。重點(diǎn)需要注意，避免在一個(gè)卡片中，采用過(guò)多不同大小字號(hào)和顏色去表現(xiàn)信息層級(jí)，盡量使層級(jí)精簡(jiǎn)與規(guī)范。

• 對(duì)齊：保證卡片內(nèi)信息之間存在某種視覺(jué)聯(lián)系，信息結(jié)構(gòu)清晰。對(duì)齊方式分類：左對(duì)齊（符合左到右的閱讀習(xí)慣，閱讀體驗(yàn)最佳）、右對(duì)齊（閱讀類文本比較少見(jiàn)，一般是為了將分好組的信息填充卡片四角）、居中對(duì)齊（居中傳遞嚴(yán)肅、正式感，在移動(dòng)端中較少見(jiàn)，適合信息較少的情況下使用）

• 親密性：將信息通過(guò)留白、分割線、色塊等方式來(lái)成組劃分，避免信息散亂。

4【 標(biāo)簽 】

標(biāo)簽指活動(dòng)通知、產(chǎn)品賣點(diǎn)、重要時(shí)間、優(yōu)惠信息等這類需要突出的內(nèi)容，標(biāo)簽按視覺(jué)層級(jí)由高到底依次劃分為：異型標(biāo)簽、色塊型標(biāo)簽、描邊型標(biāo)簽3大類。 

標(biāo)簽處理需要注意如下：

• 視覺(jué)層級(jí)：一個(gè)卡片內(nèi)可能出現(xiàn)不同類型的標(biāo)簽，比如同時(shí)有活動(dòng)通知、優(yōu)惠信息、產(chǎn)品關(guān)鍵詞，這個(gè)時(shí)候就需要了解各類信息重要層級(jí)，正確選擇標(biāo)簽形式（異型、色塊、描邊），幫助用戶快速抓住產(chǎn)品重點(diǎn)。

• 極限場(chǎng)景：標(biāo)簽內(nèi)字段不宜過(guò)長(zhǎng)，需要考慮最大寬度，進(jìn)行合理布局。（牽扯到屏效比）

• 呼吸感：合理定義標(biāo)簽內(nèi)部文字與底板的上下左右間距，避免擁擠。

• 設(shè)計(jì)感：標(biāo)簽多數(shù)是帶有活動(dòng)屬性，在設(shè)計(jì)手法上可以嘗試破型設(shè)計(jì)，還可以嘗試加入一些小圖標(biāo)、紋理，一方面營(yíng)造活動(dòng)氛圍，提升產(chǎn)品品質(zhì)感。一方面圖標(biāo)具有一定語(yǔ)義，可輔助用戶識(shí)別。（適合單個(gè)特殊標(biāo)簽添加，而不是一類標(biāo)簽，因?yàn)槎鄠€(gè)一樣的標(biāo)簽配上圖標(biāo)同時(shí)展示太亂）

• 對(duì)比度：在色塊標(biāo)簽中需要重點(diǎn)注意，通常色塊標(biāo)簽又分以下3類：有彩色底板+白色文字、帶不透明度的有色彩底板+有彩色文字、消色底板+消色文字，在挑選顏色時(shí)需注意文字與底板對(duì)比足夠清晰，減少閱讀障礙。

5【 按鈕 】

按鈕是卡片上最重要的元素之一（部分卡片也可能沒(méi)有），作為一個(gè)行動(dòng)點(diǎn)，Ta的作用在于吸引用戶點(diǎn)擊。按鈕在表現(xiàn)形式上和標(biāo)簽一致，我們最常見(jiàn)的有彩色底板+白色文字、消色底板+消色文字、描邊框+文字（有彩色描邊或有彩色字）。 

按鈕和標(biāo)簽在處理上很相似，可參照標(biāo)簽。

6【 布局 】

布局指上述所有圖片、圖標(biāo)、字段等信息，在卡片內(nèi)的排布方式，常見(jiàn)布局方式：上下布局、左右布局、居中布局。 

信息布局需要注意如下：

• 拓展性：卡片中字段的長(zhǎng)短對(duì)布局的影響較大，字段較長(zhǎng)且多的情況下需要的占用的空間更多，所以常見(jiàn)是上下布局。

• 屏效比：上述拓展性與屏效比的關(guān)聯(lián)緊密，在卡片中，為了保證一行文字最大顯示，通常文字都是單獨(dú)一行，避免左右存在元素占用文字橫向空間。但單獨(dú)一行就意味著增加了卡片高度，雖然單個(gè)卡片內(nèi)文字顯示多了，但整個(gè)一屏中展示內(nèi)容變少。為了便于理解上面這段話，這里我們可以看到淘寶這個(gè)案例，淘寶的推薦卡片中信息很多，在遇到文案很長(zhǎng)的情況下，為了平衡上面講的這個(gè)問(wèn)題，使用到了如下較少見(jiàn)的布局方式。

• 合理性：在列表式左右布局中，是選擇左文右圖，還是左圖右文。這需要看產(chǎn)品類型，在新聞資訊類產(chǎn)品中常見(jiàn)是左文右圖，而在美食、電商類產(chǎn)品中是左圖右文。再有在信息布局上也應(yīng)符合人眼左到右，上到下的閱讀習(xí)慣。

04 如何做好一個(gè)信息卡片？

• 明確產(chǎn)品類型

• 明確應(yīng)用場(chǎng)景

• 了解目標(biāo)用戶

• 劃分信息權(quán)重

• 同類信息歸組

• 增強(qiáng)信息對(duì)比

• 設(shè)計(jì)細(xì)節(jié)表現(xiàn)

• 確定最終布局

1【 明確產(chǎn)品類型 】

產(chǎn)品類型不同主要對(duì)布局產(chǎn)生影響。

• 以文字為主的產(chǎn)品，比如前面講到的新聞資訊類，通常采用左文右圖的布局。

• 以圖片為主的產(chǎn)品，比如美食、電商類，通常采用左圖右文或上圖下文。 

原因：新聞資訊類，吸引用戶產(chǎn)生點(diǎn)擊的并不是因?yàn)閳D片，而是具體的標(biāo)題，通過(guò)標(biāo)題用戶才能了解更多關(guān)于該卡片的信息。而美食、電商類產(chǎn)品則相反，這類產(chǎn)品圖片比文字更吸引人。

2【 明確應(yīng)用場(chǎng)景 】

在我之前一號(hào)店改版中提到，信息卡片可以分為列表式和卡片式兩大類，對(duì)應(yīng)的優(yōu)缺點(diǎn)如下： 

卡片式：在卡片式中圖片是設(shè)計(jì)的重中之重。這是因?yàn)槿耸且曈X(jué)動(dòng)物，在卡片式設(shè)計(jì)中使用高質(zhì)量的圖片能瞬間抓住用戶的眼球。卡片式設(shè)計(jì)實(shí)現(xiàn)了圖文的完美結(jié)合，能給用戶呈現(xiàn)良好的視覺(jué)效果。

應(yīng)用場(chǎng)景：

• 圖片為主，需要利用圖片給用戶帶來(lái)良好的視覺(jué)沖擊，提升瀏覽過(guò)程中的趣味性，從而吸引用戶長(zhǎng)時(shí)間瀏覽。

• 適合隨機(jī)推薦的內(nèi)容，不適合進(jìn)行查找。

• 豐富內(nèi)容展示，適合元素較多情況，可以讓各種形式的元素保持井然有序。

列表式：信息集合一般是簡(jiǎn)單的圖文組合（小圖+標(biāo)題）或純文本信息。由于列表垂直排列每一行內(nèi)容，相對(duì)卡片式，在同樣大的屏幕中可以展示更多內(nèi)容，可供用戶閱讀信息更多，新聞?lì)惡蛿?shù)據(jù)類應(yīng)用更青睞于這種設(shè)計(jì)。

應(yīng)用場(chǎng)景： 

• 信息直白，用戶無(wú)需點(diǎn)擊查看，即能盡可能了解內(nèi)容信息，適合快速查找。

• 文本重要程度高于圖片，需要靠標(biāo)題吸引用戶點(diǎn)擊。

• 小屏幕應(yīng)用場(chǎng)景。

3【 明確目標(biāo)用戶】

目標(biāo)受眾的屬性，對(duì)信息權(quán)重的劃分影響很大，比如對(duì)價(jià)格敏感的用戶，優(yōu)惠信息的視覺(jué)層級(jí)就需要抬高。為了便于理解下面的案例，這里我定義的就是對(duì)價(jià)格敏感性用戶。

4【 劃分信息層級(jí) 】

定義了目標(biāo)用戶后，將卡片內(nèi)所有元素羅列出來(lái)，并借助四象限分析的方法，對(duì)各個(gè)元素的權(quán)重進(jìn)行劃分。

5【 同類信息分組 】

將同類信息分組，便于后面確定元素之間的親密性關(guān)系。

6【 增強(qiáng)信息對(duì)比 】

前面我們借助四象限，將信息重要程度進(jìn)行了劃分。接下來(lái)對(duì)元素之間親密性和對(duì)比進(jìn)行處理，設(shè)計(jì)用戶瀏覽視線，在該過(guò)程中對(duì)案例中的元素進(jìn)行如下處理：

• 圖片：這里圖片及比例保持不變

• 圖標(biāo)：將原版會(huì)員圖標(biāo)+字段的方式更改為圖標(biāo)，原因有兩個(gè)：1、會(huì)員圖標(biāo)+字段的方式占用了較多的橫向空間，導(dǎo)致標(biāo)題字段信息展示減少，同時(shí)還導(dǎo)致用戶在閱讀完標(biāo)題后，閱讀下一行內(nèi)容時(shí)視覺(jué)錯(cuò)行嚴(yán)重（會(huì)員圖標(biāo)+字段過(guò)長(zhǎng)導(dǎo)致）。2、由于會(huì)員圖標(biāo)代表會(huì)員內(nèi)容，這是絕大對(duì)數(shù)產(chǎn)品對(duì)用戶有過(guò)的教育，所以這里重設(shè)了會(huì)員圖標(biāo)并單獨(dú)展示。

• 字體：對(duì)標(biāo)題字體進(jìn)行加粗，（16pt，Medium），價(jià)格字體加大加粗（24pt，Medium），劃線價(jià)加粗（12pt，Medium），按鈕文字&活動(dòng)標(biāo)簽文字（14pt，Medium）精簡(jiǎn)其他輔助信息層級(jí)（12pt，Regular）

• 標(biāo)簽：優(yōu)惠信息標(biāo)簽由0.5pt改為1pt，提升視覺(jué)層級(jí)?；顒?dòng)標(biāo)簽為色塊降低不透明度+有彩色文字。

• 按鈕：由于標(biāo)簽為描邊樣式，為了拉開(kāi)差異，突出按鈕，所以將按鈕改為實(shí)心色塊。

做完上面這些后，可能大部分人覺(jué)得到這就可以了，但其實(shí)我們還可以再增加設(shè)計(jì)細(xì)節(jié)，這也是你與其他設(shè)計(jì)師拉開(kāi)差距的地方。

7【 設(shè)計(jì)細(xì)節(jié)表現(xiàn) 】

由于案例不同，增加細(xì)節(jié)的方式不同，所以需要具體案例具體分析。在本次案例中，我通過(guò)新增圖標(biāo)設(shè)計(jì)以達(dá)到豐富卡片細(xì)節(jié)的作用。在活動(dòng)標(biāo)簽中新增小喇叭圖標(biāo)，來(lái)增強(qiáng)活動(dòng)氛圍、增強(qiáng)信息視覺(jué)上的互動(dòng)性、增強(qiáng)代入感。在按鈕中新增時(shí)鐘圖標(biāo)，配合預(yù)約文案，讓用戶預(yù)知操作后可能的結(jié)果，并且提升按鈕視覺(jué)層級(jí)、提升點(diǎn)擊欲望。

8【 確定最終布局 】

在布局中主要考慮兩個(gè)點(diǎn)：

1、合理性&拓展性

由于該卡片的應(yīng)用場(chǎng)景為推薦列表，所以這里保持原有的上下布局，遵從人眼閱讀習(xí)慣。

2、屏效比

將活動(dòng)標(biāo)簽選擇放置在圖片與底板分割處，好處有： 

• 借助這個(gè)方式，使圖文內(nèi)容過(guò)渡順暢，閱讀體驗(yàn)更佳。

• 盡可能減少了標(biāo)簽對(duì)產(chǎn)品圖的遮擋。

• 壓縮卡片高度，最終達(dá)到提升屏效的目的。

解決部分人可能存在的疑惑：

Q1: 3張?jiān)O(shè)計(jì)稿中活動(dòng)標(biāo)簽為什么進(jìn)行修改？

答：稿1到稿2，活動(dòng)標(biāo)簽樣式修改，位置調(diào)整，對(duì)應(yīng)不同的用戶，對(duì)于價(jià)格敏感性用戶，顯然稿2更能刺激他們點(diǎn)擊。稿2到稿3，對(duì)標(biāo)簽樣式再次進(jìn)行加強(qiáng)。稿3到稿4，考慮該應(yīng)用場(chǎng)景是在推薦列表中，為了避免出現(xiàn)多個(gè)同類型活動(dòng)的卡片，導(dǎo)致過(guò)亂，所以修改了設(shè)計(jì)樣式。

Q2:在稿3到稿4中優(yōu)惠標(biāo)簽這一排內(nèi)容，和預(yù)約按鈕這一排內(nèi)容，上下調(diào)整的原因是什么？

答：1、將文字區(qū)域看做一塊完整的矩形區(qū)域，稿3整體看起來(lái)更完整，而稿2像是右下缺了一個(gè)角。2、在信息閱讀順序設(shè)計(jì)上，稿3的處理是優(yōu)先讓用戶看到優(yōu)惠相關(guān)信息，更加迎合價(jià)格敏感性用戶的需求。

Q3:你認(rèn)為最終稿還有優(yōu)化空間嗎？

答：這個(gè)案例，是我截圖與我司相關(guān)App的。我認(rèn)為如果可以，還需要再了解目標(biāo)用戶畫(huà)像，了解用戶真正在意的信息是那些，這些都會(huì)對(duì)最終方案產(chǎn)生影響，也只有知道這些才能得出最合適的哪個(gè)方案。這里我定義的是對(duì)價(jià)格敏感的用戶，基于這類用戶來(lái)說(shuō)，我認(rèn)為最終方案是合適的

文章來(lái)源：站酷 作者：幺零三

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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