2021-3-3 ui設(shè)計(jì)分享達(dá)人
信息有各種形式，圖、文、視頻、音頻等，而承載信息的形式也多種多樣。
本文意將信息容器進(jìn)行整理歸納，以總結(jié)出一些經(jīng)驗(yàn)規(guī)律。
信息容器是承載信息的載體，位于內(nèi)容層。要理解信息容器的概念，首先要理解界面中的層級(jí)關(guān)系。一個(gè)界面除了豎直方向和水平方向維度，還有縱深維度。
從底層（遠(yuǎn)離用戶）到頂層（靠近用戶），基本上可以分為以下幾層：
背景層
信息層
全局操作層（各種常駐于屏幕的bar、懸浮按鈕等）
浮出層（模態(tài)類型的浮出層還需要有蒙版進(jìn)行隔斷）
本文要討論的“信息容器”，指的是信息層上，裝載信息的載體。信息的類型多種多樣，可以是文字、圖片、視頻、各種操作控件等。
常見的信息容器主要有2大類：列表和卡片。
在整理案例的時(shí)候，我不禁產(chǎn)生了一個(gè)疑問，到底什么是列表，什么是卡片？如何界定和區(qū)分兩者？這個(gè)問題乍一聽有點(diǎn)無厘頭，列表不就是列表嗎，多個(gè)布局一致的狹長(zhǎng)單元組合在一起，就形成了列表。那么什么是卡片呢？和屏幕兩側(cè)保持一定間距，帶圓角的就是卡片嗎？
我們不妨先看看下圖案例：
為什么類似的布局形式，上圖中，圖1給人感覺是列表，圖2給人感覺是卡片，圖3既像列表又像卡片？
從內(nèi)容層面來說，包含的信息類型有：文字、圖標(biāo)/圖片、按鈕。幾乎沒有太大區(qū)別。
是什么導(dǎo)致我們觀感上的不同呢？
電商案例也許可以給出答案。
從電商產(chǎn)品的商品列表頁中可以看到，用戶可以自主選擇兩種不同的商品展示模式：列表模式和卡片模式。
這兩種模式幾乎可以對(duì)應(yīng)“列表”和“卡片”兩種信息容器樣式。完全一致的信息量：主圖、標(biāo)題信息、價(jià)格信息、輔助信息，相似的展示效率（一屏展示約4.5個(gè)商品），不同的信息容器展示形式給人不同的感覺。
單純從信息層面或者視覺層面都不能界定列表和卡片，如果多維度疊加限定又太繁瑣，因此本文給出的列表和卡片直接的區(qū)別界定是：可以自主定位關(guān)鍵線索，規(guī)劃視覺瀏覽動(dòng)線。如果視覺瀏覽大方向是豎直的，那么就歸入列表范疇，瀏覽動(dòng)線不是豎直而是折線的，都算在卡片范疇。
除了上面說的，最常見的兩類信息容器：列表和卡片之外，還有另外兩種形式，分別是：無容器和復(fù)合容器。
這些容器具體有哪些特點(diǎn)，我們一一來看。
列表的定義：將結(jié)構(gòu)一致的信息單元在豎直方向上鋪陳下去，形成的信息集合。
不同場(chǎng)景要呈現(xiàn)的信息側(cè)重不同。
舉例幾種常見的列表形式：
用戶/消息列表
圖文列表
功能列表
“卡片型”列表
用戶/消息列表的內(nèi)容結(jié)構(gòu)很清晰，頭像+身份+內(nèi)容提要+輔助信息。
圖片天然地比文字更具有吸引力，視覺上的優(yōu)先級(jí)排序是頭像＞身份＞內(nèi)容提要＞輔助信息。
當(dāng)然用戶可以很方便地選擇關(guān)注的對(duì)象是圖片還是文字，這體現(xiàn)了列表的優(yōu)越性，瀏覽動(dòng)線豎直，可以方便用戶根據(jù)自己想要的索引快速定位。
這里值得討論的是頭像用方形還是圓形的問題，相信大家都想到過這個(gè)問題，同樣是社交產(chǎn)品，qq是圓頭，微信是方頭，這里邊有什么原因呢？
本文嘗試分析一下，僅是個(gè)人意見，歡迎討論。
按照理論，圓頭親切的形狀感知更加適合輕松基調(diào)的產(chǎn)品，方頭嚴(yán)謹(jǐn)?shù)男螤罡兄舆m合嚴(yán)肅基調(diào)的產(chǎn)品。這解釋了電商類型產(chǎn)品（淘寶、京東）的信息通知一般都是圓頭的，匹配輕松愉悅的網(wǎng)購體驗(yàn)，而金融類產(chǎn)品（支付寶）多是方頭。對(duì)于同是熟人社交類產(chǎn)品的微信和qq來說，qq用戶層年齡偏低，屬性相對(duì)更加活躍，更加輕松的圓頭可能更適合此類用戶。
以iOS為例，當(dāng)用戶向左滑動(dòng)列表時(shí)，呼出針對(duì)該列表單元的操作。具體列表對(duì)應(yīng)具體操作，操作項(xiàng)數(shù)量不同。
方案A：
優(yōu)點(diǎn)：操作底板寬度適應(yīng)文案，不會(huì)出現(xiàn)空間局促的現(xiàn)象。
缺點(diǎn)：當(dāng)文案字段長(zhǎng)時(shí)，列表被推出屏幕外的內(nèi)容較多，當(dāng)用戶操作分心時(shí)，可能會(huì)忘記正在操作的對(duì)象，雖然這種情況極少發(fā)生。
方案B：
優(yōu)點(diǎn)：操作底板固定，文案折行規(guī)則明確，既不會(huì)造空間擁擠，被擠出屏幕外的列表區(qū)域可控。
方案C：
優(yōu)點(diǎn)：搭配圖標(biāo)，視覺更豐富。
缺點(diǎn)：圖標(biāo)占據(jù)了一定高度，導(dǎo)致文案無法折行，列表被推出屏幕外的內(nèi)容較多，與方案A類似。
綜上，個(gè)人認(rèn)為方案B是最合理的，對(duì)于文案長(zhǎng)度的寬容度高，即便文案較長(zhǎng)，也可以保證視覺和諧，并保留較多列表內(nèi)容。
在用色策略上，使用的是為大眾所接受的“語義色”，一些具體的顏色在長(zhǎng)期經(jīng)驗(yàn)積累中形成了固定的語義。
當(dāng)用戶觸發(fā)了帶有一定破壞性的操作時(shí)，需要用戶進(jìn)行二次確認(rèn)。
并不是所有情況都需要二次確認(rèn)，二次確認(rèn)的樣式也有多種。
同樣都是模態(tài)視圖，要表達(dá)的信息也相似，都是要求用戶進(jìn)行選擇，為什么有些產(chǎn)品選擇將對(duì)話框居中，有些產(chǎn)品選擇將對(duì)話框放在底部？這里涉及到關(guān)于模態(tài)視圖的相關(guān)知識(shí)點(diǎn)，本篇文章旨在討論信息層面的內(nèi)容，模態(tài)視圖涉及到了浮出層的內(nèi)容，將在下篇文章中進(jìn)行詳細(xì)探討。本篇文章不做過多延展。
信息流產(chǎn)品一般是由圖片+重點(diǎn)文案+標(biāo)簽（可有可無）構(gòu)成。
不同性質(zhì)的產(chǎn)品想要突出的重點(diǎn)不同，根據(jù)內(nèi)容的重要性權(quán)重來分配視覺占比。
從上方幾個(gè)例子中我們可以看到：
在圖文比例從左到右依次提升；
圖文布局案例1-3使用了左文右圖的方式，案例4-7使用了左圖右文的方式。
搞清楚如何圖文布局和設(shè)置圖文比例，就基本解決了資訊流頁面最關(guān)鍵的問題。
資訊列表或稱feed流，主要根據(jù)用戶喜好定向推送內(nèi)容。除了從用戶日常瀏覽、搜索等行為中提取用戶喜好信息，用戶主動(dòng)反饋的信息精度更高，用戶不惜花費(fèi)更多操作成本來提示產(chǎn)品，對(duì)內(nèi)容不感興趣。
從視覺上說：
1、提交反饋的入口（小而淺的icon）都不明顯，有些產(chǎn)品用“更多”來提示用戶，有些產(chǎn)品用更加負(fù)面的“關(guān)閉”來提示用戶。當(dāng)用戶對(duì)內(nèi)容產(chǎn)生較為強(qiáng)烈的反感時(shí)，才會(huì)注意到屏蔽入口。常規(guī)瀏覽時(shí)，該圖標(biāo)不會(huì)影響用戶注意力。
2、反饋形式采用模態(tài)對(duì)話框，用戶需要選擇具體操作，是屏蔽內(nèi)容或作者、還是舉報(bào)或不感興趣。
3、對(duì)話框是否有指向性：從表意明確的角度上來說，帶有箭頭的氣泡更有利于用戶定位對(duì)象。
從交互上說：
反饋入口熱區(qū)較小，容易誤觸，大多數(shù)情況下，用戶不會(huì)注意和點(diǎn)擊該圖標(biāo)，用戶是以瀏覽為主要行為。
列表索引一般還是定位文字為主要形式，不同用戶的認(rèn)知水平不同，圖標(biāo)表意始終是一大難點(diǎn)，多用為輔助記憶或單純提升視覺美觀。圖標(biāo)雖然是體現(xiàn)設(shè)計(jì)風(fēng)格的重點(diǎn)，但是在具體情境下，如設(shè)置頁，用戶更加在意快速找到自己要找的內(nèi)容，多度的圖標(biāo)樣式，實(shí)際上會(huì)折損用戶的檢索效率。
一般功能頁面或放置許多功能，常常會(huì)超過十幾項(xiàng)，這種情境下，檢索效率低下是一個(gè)痛點(diǎn)。
如何提高檢索效率？—— 分組
分組給用戶提供了認(rèn)知線索，根據(jù)格式塔原則，用戶總是傾向于把距離近的、樣式統(tǒng)一的元素歸位同類。
毫無分組顯然對(duì)于檢索是不利的，用戶需要逐一瀏覽，該情況適用于列表項(xiàng)無法分組時(shí)，如果有分組條件，務(wù)必分組，幫用戶節(jié)約篩選成本。
UI界面中，列表的分割方式常見的有以下3種：
線條分割
塊面分割
間距分割
在我們的固有觀念里，大圓角，不通欄，有投影的形象就是卡片。
這種樣式也越來越盛行，許多產(chǎn)品嘗試將列表也用“卡片化”進(jìn)行包裝。
雖然是相當(dāng)細(xì)節(jié)的點(diǎn)，但是精細(xì)化處理之后的結(jié)果就立刻會(huì)與批量化處理的結(jié)果拉開差距。
產(chǎn)品級(jí)的風(fēng)格統(tǒng)一來源于點(diǎn)滴細(xì)節(jié)。
卡片的類型繁多：?jiǎn)瘟写罂ㄆ?、泳道、?nèi)容流（兩列網(wǎng)格、瀑布流）、宮格
從內(nèi)容展示效率上來講，單張大卡片就占據(jù)占據(jù)屏幕（劉海屏）超出一半的高度，用戶需要不斷滑動(dòng)屏幕瀏覽下方內(nèi)容，操作成本較高。大卡片形式對(duì)內(nèi)容本身，如圖片的質(zhì)量要求很高。這種模式常見于圖片社區(qū)或垂類電商產(chǎn)品，圖片社區(qū)（如躺平）本身較為小眾、即便是UGC（用戶產(chǎn)生內(nèi)容）單元，用戶上傳的圖片素材平均水平也較高，垂類電商（如Nike）圖片品質(zhì)由編輯控制，質(zhì)量高且穩(wěn)定。以上類型產(chǎn)品不以量吸引用戶，用戶往往更加在意內(nèi)容本身是否優(yōu)質(zhì)。用戶沒有帶著明確的目標(biāo)，心智更加類似于瀏覽雜志。產(chǎn)品提供什么內(nèi)容，就進(jìn)行瀏覽。從上方案例可見，除了微信讀書之外的3款產(chǎn)品首頁都沒有突出搜索功能，而是以信息流呈現(xiàn)為主。
與列表分割一致，卡片也有對(duì)應(yīng)分割方式。
大卡片占據(jù)屏幕面積大，理論上大卡片的內(nèi)容質(zhì)量是經(jīng)審查的。部分產(chǎn)品不存在大卡片容器的交互，點(diǎn)擊卡片直接進(jìn)入詳情頁。部分產(chǎn)品通過比較低調(diào)的方式向用戶收集對(duì)于內(nèi)容的意見。如微信讀書長(zhǎng)按卡片，可以選擇不再顯示該卡片內(nèi)容，產(chǎn)品收集反饋，對(duì)于用戶喜好的描述可以進(jìn)一步具象準(zhǔn)確。長(zhǎng)按不是一個(gè)高頻手勢(shì)，用戶觸發(fā)該手勢(shì)往往是試探性的，代表用戶確實(shí)對(duì)于內(nèi)容有意見要傳達(dá)。躺平使用了簡(jiǎn)約三小點(diǎn)樣式的“更多”圖標(biāo)來收納不常用的收藏和舉報(bào)操作。
何為泳道？顧名思義，常見的滑動(dòng)手勢(shì)是上下方向滑動(dòng)，但有時(shí)也會(huì)出現(xiàn)橫向滑動(dòng)的情況。一系列對(duì)象在一條橫向軌道內(nèi)左右滑動(dòng)，該類型的形式組合在一起，就好比泳道賽道一般。
可以橫向滑動(dòng)以查看內(nèi)容的呈現(xiàn)形式，稱為“泳道”。泳道可以有多種形式。
停止位置隨機(jī)：
內(nèi)容與手勢(shì)相關(guān)度高，比較自由，但停止位置隨機(jī)，不能保證停下后用戶能完美看到當(dāng)前卡片的所有信息，需要用戶微調(diào)卡片位置。
停止位置固定：
根據(jù)用戶滑動(dòng)速率，模擬物理慣性和摩擦，判斷最終展示哪張卡片，并將卡片呈現(xiàn)在屏幕中部，確保卡片上的信息都可以讀取。這種交互更加合理，給滑動(dòng)設(shè)置卡點(diǎn)，類似banner效果。
雙列卡片可以看成是大卡片（單列）的另一種表現(xiàn)形式。這種形式更加提高了空間利用率，對(duì)于單一信息展示更加克制。平衡了效率和效果，是電商、圖片社區(qū)、視頻等產(chǎn)品類型的首選表現(xiàn)手法。
雙列卡片可以細(xì)分為兩大類：
卡片流（對(duì)齊）、瀑布流
卡片對(duì)齊：
優(yōu)點(diǎn)：規(guī)整統(tǒng)一，視覺動(dòng)線清晰，瀏覽舒適。
缺點(diǎn)：對(duì)主圖尺寸要求高，確定的比例會(huì)對(duì)商品展示有一定局限。
瀑布流：
優(yōu)點(diǎn)：圖片尺寸寬容度高，滿足一定比值區(qū)間即可。保證商品的展示完整度。錯(cuò)落的布局容易形成節(jié)奏。
缺點(diǎn)：不容易進(jìn)行比較，若要進(jìn)行圖片間的對(duì)比，比較困難，視覺動(dòng)線混亂。
兩列式的卡片布局需要注意內(nèi)容層與背景層的區(qū)分。
大多數(shù)產(chǎn)品的背景層是淺灰色，內(nèi)容層是白色，色差可以建立區(qū)分。部分產(chǎn)品背景層是白色，或者說取消了背景層的概念，那么要建立卡片之間的區(qū)分，就需要通過間距或者卡片加底色的方式。
個(gè)性化推薦模塊對(duì)電商產(chǎn)品尤其重要，準(zhǔn)確地將用戶可能感興趣的產(chǎn)品推薦出去，可以減少用戶的搜索、篩選步驟，提升購買效率和愉悅感，從而提升用戶對(duì)產(chǎn)品的評(píng)價(jià)。因此，不斷收集用戶的喜好相當(dāng)重要，盡管各種算法已經(jīng)讓產(chǎn)品顯得越來越智能，但依舊要給用戶留下提建議的入口。
上文介紹了資訊類產(chǎn)品中，用戶如何給出對(duì)于具體信息的反饋，電商類產(chǎn)品原理也大同小異。
從功能上來說，淘寶、閑魚、京東，都是通過用戶手勢(shì)（點(diǎn)擊圖標(biāo)或長(zhǎng)按卡片或兩者皆可）來呼出選項(xiàng)，用戶通過選擇來表達(dá)意見，從而使推送更精準(zhǔn)。
從視覺上來說，淘寶和閑魚的反饋形式類似，都是在卡片上添加一個(gè)黑色半透明蒙版，將有限的選項(xiàng)豎直碼放在卡片上，類似小型模態(tài)的概念（但是這里不同于嚴(yán)格的模態(tài)視圖，沒有限定用戶必須要做出選擇，用戶可以直接劃走）。而京東的邏輯不同，使用了傳統(tǒng)阻斷性模態(tài)視圖的處理方式，將下方卡片用蒙版遮擋，希望用戶專注于選擇。
從阻斷感上說，京東的阻斷干是最強(qiáng)的，將用戶從原本的瀏覽行為中提取出來，請(qǐng)用戶嚴(yán)肅地做出對(duì)于當(dāng)前商品的反饋。這樣收集信息的效率更高。由于選項(xiàng)是盛放在帶有指向性的小氣泡之上，針對(duì)性足夠，且延展性好，氣泡的高寬都可以調(diào)整，而淘寶和閑魚的處理方式，在極端情況下，如選項(xiàng)超過5項(xiàng)時(shí)，所有內(nèi)容放在卡片之上，空間就很緊湊。
這類操作比較隱晦，可點(diǎn)擊按鈕很不明顯，長(zhǎng)按手勢(shì)也不常用。同樣是當(dāng)用戶有明確反饋需求時(shí)，才會(huì)尋找反饋入口，一般情況下，用戶不會(huì)注意到。以用戶常態(tài)下的瀏覽行為為最優(yōu)先。
閑魚的交互做的很細(xì)致，蒙版出現(xiàn)采用了水波的形式，用戶抱著要吐槽的心態(tài)，這種精致有巧思的小動(dòng)效在一定程度上可以緩和用戶的煩躁的心理。
除了電商類產(chǎn)品，部分視頻類產(chǎn)品長(zhǎng)按卡片也會(huì)呼出對(duì)應(yīng)效果。
案例1和案例2，長(zhǎng)按卡片，都是出現(xiàn)視頻片段的預(yù)覽。效果類似iOS的3Dtouch，在相冊(cè)中按壓具體照片即可預(yù)覽。而案例3，點(diǎn)擊“更多”圖標(biāo)，呼出操作。然而選項(xiàng)只有1項(xiàng)，不符合邏輯，單一的選項(xiàng)無法構(gòu)成“選擇”，這會(huì)讓人有點(diǎn)摸不著頭腦。
如果把界面看作是一張大網(wǎng)格，不同的內(nèi)容占據(jù)著不同位置、不同面積的頁面區(qū)域。
除了我們已經(jīng)熟悉的“有序”布置，如從上到下依次排列內(nèi)容（大卡片），或者從左往右依次排列內(nèi)容（泳道），還有更加靈活多變的排布方式可供選擇。
布局的本質(zhì)是分配界面面積，用以盛放內(nèi)容，同時(shí)運(yùn)用面積對(duì)比進(jìn)行突出。除了面積對(duì)比的方式外，還有其他方式可以突出關(guān)鍵內(nèi)容。
無內(nèi)容的呈現(xiàn)形式比較簡(jiǎn)單：內(nèi)容直接置于背景層之上。減少視覺負(fù)擔(dān)，內(nèi)容為主，形式為輔。
復(fù)合容器是指超過一種的容器形式的組合，如卡片中包含列表、卡片中包含泳道等。
不同的信息容器組合在一起，搭建一個(gè)分工明確的界面。界面中不同的信息需要套用合適的形式去呈現(xiàn)。有層級(jí)就有對(duì)比，對(duì)比越大，層次拉得越開，重點(diǎn)就越突出。
建立對(duì)比的策略：
色彩對(duì)比、面積對(duì)比、樣式對(duì)比、Z軸高度對(duì)比、靜態(tài)動(dòng)態(tài)對(duì)比
文章來源：站酷 作者：doo_W
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn