片文章介紹了三種Feed流中的圖片布局：宮格式布局、拼圖式布局、瀑布流式布局。

之前看了一篇文章：《Feed流設計：哪些謀殺你時間的APP》，通過Feed流可以讓用戶不停的刷信息，從而留住用戶更多的時間。在仔細研究你還會發現越來越多的APP都有Feed流，而且它們的圖片布局也不相同。

如果你沒有對其有深入研究，你根本不知道遇到這種頁面該如何設計。

下面通過查詢資料和對比不同的APP后，我將Feed流中的圖片布局總結起來有三種：

1. 宮格式布局
2. 拼圖式布局
3. 瀑布流布局

一、宮格式布局

宮格式布局也就是九宮格布局，多用在社交類的APP中，九宮格圖片不僅能放進去很多內容，同時也能很好地引起網友的關注。

從上面案列可以看出：宮格式圖片布局大多用于社交發布動態的Feed流中，雖然他們都采用宮格式的布局，不過當發布的是一張圖片，其呈現的狀態還是有所差異。

以微信朋友圈為例：

未對屏幕進行區分，但對只上傳一張圖片進行了特殊的處理，二張或二張以上的圖片寬 x 高以150為閥值，二邊都大于150時，以較小的一邊為基準進行等比縮放。

具體的圖片排列情況如下圖：

1. 當圖片為三張時，3、5位置對調，排成一行：1、2、3；

2. 二張時排一行，1、2，格子大小提前就已經占好位置；

3. 單張圖片，如果0.5 <=寬 / 高 <=2 時，被限定在1—4格子的范圍大小（包括間距），也就是凡是寬高比在這個范圍時，最長的那邊暫兩個格子加間距；

4. 單張圖片，寬 / 高 > 2的圖片（如全景圖），最多占三欄，高最多占一欄（包括間距大小）；

5. 單張圖片，寬 / 高 < 0.5（如微博長圖），高最多占二欄，寬度最小占二欄1/3（包括間距）；

以上圖片適配規則適合大部分的社交類APP，其中略有不同的是，在單張圖片適配的時候，站酷采用了直接占兩格的方式，這取決于，站酷的圖片質量本來相對較高，同時尺寸上沒有微信、微博、QQ空間這么多。

二、拼圖布局

這種布局方式是將幾個圖片拼成一個矩形，樣式新穎類似雜志的排版，因此也叫雜志式布局，不過因為其對圖片的要求較高，因此多應用在圖片社交中。

如：in、Nice。

雖然in和Nice都采用了拼圖的方式，不過在圖片布局上稍有不同。下面我就用一個簡單的圖將兩個圖片布局方式進行對比：

從上圖對比看：in和Nice最大的不同就是in的大圖比例更大，同時排版時多采用大圖搭配小圖的方式。

Nice雖然也采用了拼圖布局，不過其還是偏于保守，在4張圖和9張圖樣式時，均采用宮格式的布局，同時在其他樣式中，拼圖中主要的圖片采用3：2的比例，相對in來說圖片展示性稍遜，但是其優點是在展示圖片的同時，手機一屏可以顯示更多的內容。

三、瀑布流布局

瀑布流式布局是比較流行的一種網站頁面布局方式。視覺表現為參差不齊的多欄布局，最早采用此布局的是網站是Pinterest，后逐漸在國內流行。

隨著移動互聯網的發展，這種瀑布流布局也被用在了UI界面設計中。瀑布流式布局下，用戶的視線軌跡以 Z型為主，這樣的軌跡易于閱讀。

但由于用戶采用“就近原則” 閱讀信息，容易產生漏讀現象 。

因此，瀑布流式的布局適于應用在社區類瀏覽型頁面中，這樣的頁面往往信息量大，采用瀑布流式布局瀏覽體驗更為流暢。

但缺點則是信息不能完全被關注，容易漏讀信息。

上圖可以看到：在圖片收集的花瓣和視頻類的YY都用到瀑布流的形式，其優勢就是讓用戶不停的刷，缺點就是用戶很容易漏掉信息，因此這種適合泛瀏覽類的頁面。

四、總結

1. 宮格式布局：適合圖片樣式較多，質量參差不齊的APP。如：微博、微信、QQ空間等。
2. 拼圖式布局：適合圖片質量較高，尺寸較為統一的APP。如：in、Nice等。瀑布流式布局：適合圖片尺寸不統一，同時屬于泛瀏覽類的APP。如：YY小視頻、花瓣發現等。

參考鏈接：

https://www.cnblogs.com/meteoric_cry/p/5975165.html 《社交應用動態九宮格圖片的規則》

https://www.jianshu.com/p/eb02be5b7fd7 《仿 Nice 首頁圖片列表 9 圖樣式 (iOS)》

http://www.woshipm.com/pd/773523.html 《那些謀殺你時間的Feed流》

作者：風箏KK，公眾號：海鹽社

本文由 @ 風箏KK 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash ，基于 CC0 協議

使用場景和設計方法來看，App與Web的設計有什么區別？

早前，總是遇到問“Web設計”和“UI設計”分別做了多久？之類的詢問，文章開始之前，我們先來聊聊什么是UI設計。

UI=Ueser Interface，直譯“用戶界面”。也就是說UI設計就是用戶界面設計。所以只要是用戶，也就是人機交互得體驗中會用到的界面,都叫做“UI”，對于這些“UI”的設計，我們都統稱為“UI設計”。

界面有很多種，我們主要介紹Web與App界面，由淺入深，通過使用場景與設計方法、開發環境與適配要點，兩兩結合來看一下他們的區別。

關于使用場景，2012年移動互聯網元年至今，越來越多的小伙伴將網癮道具，從電腦改為移動設備。以前聊的是，我配了個XXX的顯卡跑游戲，現在越來越多的是，某果的發布會看了嗎？

越來越多的用戶“道具”，促使我們要去畫更多的，用戶的“道具”皮膚，也就是我們“俗稱”的界面。

在設計不同的“皮膚”時，我們可通過考慮以下幾點設計方法，來區分他們。

1. 交互方式的不同

1.1 操作媒介

Web網站 – 鼠標操作 VS 移動App – 手指場景的局限造成了，使用電腦成本會高一些，相對按鈕位置的精確度會更高（在觸摸大屏還沒出現的時代，我們操作鼠標來實現點擊）。

而移動設備，隨時隨地動動手指就可以了。

我們要注意預留點擊區域，控制可點擊內容的艱巨性。

1.2 設計要點

（1）使用場景不同

• 相對PC端的位置固定，因為顯示器種類繁多，窗口也可以隨意縮放，設計時需要優先確定頁面的安全區域，但同樣因為屏幕大所有現實的內容相對更豐富。
• 而移動端的頁面相對就小很多，雖然小但顯得很靈活，很多App賣點就是利用碎片花時間學習、購物、娛樂，對應這點的不同，移動端的內容會更加精簡。

兩端的閱讀范圍及內容長度偏重的也因此不同。

（2）文字大小

Web設計 ：比較隨意，文章正文字體12px/14px；頁面安全區域1080px～1280px為宜（一些展示頁面字體會做到16-20px或更大）。

App設計：正文30-34px,最小可用28px;注釋及提示行文字20-24px，最小不小于20px。（具體字數根據24px-36px的字體大小，以及頁邊距來定～）。

（3）Banner

• Web設計：寬度在1920px,主內容區域（安全范圍）1080px～1280px為宜；
• App設計：畫面大小根據比例自適應縮放或根據實際頁面適配方案調整安全距離。

2. 反饋方式的不同

相對PC端的位置固定，用戶會在一個相對平緩的環境瀏覽頁面，狀態也會更為專注。誤點擊的概率小，更多的會講究反饋速度和信息的精確度，用戶比較多的是收藏正頁面而不是單獨的段落。而移動端用戶因為場景多變，很多時候會利用走路，坐車的實際去瀏覽界面，更容易產生誤操作，也更容易對頁面內容產生疲憊感。

Web設計：一般對于界面的通知中心,位置相對固定，但較為隱蔽，用戶使用的不多,很難主動喚起用戶。

這里設計師需要做的，是將自動呼出的彈窗提示和漂浮窗口這類的“強制”、“粗魯”的提示形式。（經常被運營要求加個活動飄窗，價格在線客服，這類令人反感的交互方式。）

通過一些，相對“隱蔽”、“固定”、“委婉”的方式及擺放位置，在不影響用戶閱讀的前提下進行提示交互。

App設計：最常見的是系統自帶的推送通知，用戶可主動關閉通知，當然也有嵌在頁面內的，因為屏幕限制，所以相對網頁更加突出，設計師需要思考如何讓用戶更容易“開啟通知權限”。

3. 側重的不同

針對不同設備用戶的不同習慣，我們在定義兩端的交互內容時也要有所側重，我們會選擇性的對一些內容進行隱藏，也會針對設備區分同一功能的交互方式。比如：兩端同樣的收藏動作，Web用戶比較多的是收藏整頁，而不是單獨的段落；因此用戶會較多使用“收藏夾”、下載等方式。

而對App用戶因為切換應用容易被打斷操作及閱讀環境的限制，除了選擇一些App自帶的“稍候閱讀”功能外，“截屏”保存或長按收藏就比較實用了。

3.1 藏功能

平臺，會在兩端分別給用戶不同的功能側重。就好像工作時間會更優先pc端去處理事情，這是因為，PC端能夠更好的拆解我們的需求，因為需求不同界面的側重功能也會不同。

比如：我們會有在平臺編輯文章并配圖、排版發布平臺的需求，但是在兩端同時體驗操作后發現，App任務發布的復雜程度讓用戶難以理解。往往一個Web頁面就能完成的事情App端需要2-3個頁面才能完成，加上大段的文字內容需要編輯，以及網絡狀態原因，讓發布任務變得很艱難。

因此，很多App就會拆分兩端的用戶需求，將商家更多的引導去Web去上架貨物;消費者則側重于App，同時界面會根據不同端“藏”去一部分的功能。

3.2 藏內容

因界面分辨率的差異化，我們也會隱藏一些需求度較低的內容元素。比如：我們常說的面包條菜單，其實就是把Web上常規的Menu，適應智能手機的操作和顯示特性而做出的變化。

Web網站：以鼠標或觸摸板為操作媒介, 常用交互方式有左擊、右擊、hover鼠標滑過幾個操作方式，對應這些操作的web端可以將隱藏的元素，（比如解釋類文字，及子菜單等）可以在鼠標hover時或是點擊后才展示出來。

移動App：因為實際面積更手指觸控的關系，App常用的交互方式有，手指點擊、滑動、捏合等各種復雜的手勢。同時在App設計時，多遵循用選擇代替輸入，因此設計師需要更多整合信息，并隱藏一些焦點外的內容。

3.3 “藏”的設計方式

（1）提示

通用-小紅點、提示氣泡、文字字重及變色、展開收起常用提示性符號。

（2）內容收起Web網站

點擊下拉、hover下拉。

移動App：滑動拖出內容

4. 功能側重的不同

• Web網站：側重復雜操作類，例如文本編輯，后臺數據上傳下載等，需要大量操作及其他軟件相互協助的功能。
• 移動App：側重相對簡易且場景多變的操作，比如打車，導航等，或是一些適合利用碎片化時間作業的功能。

Tips：我們在“藏”的時候要注意，移動App以單手操作為主，界面上重要元素需要在用戶單手點擊范圍內，或者提供快捷的手勢操作。

5. 網絡環境的不同

Web使用的是Wifi或是電纜等無限量的高速網絡，而App則是移動網絡或是Wifi，網絡環境相對復雜。應對這些不同網絡環境對應的網絡速度，我們可以通過分頁區別化和加載區別化來提高用戶的體驗。

Web網站：一般都是點擊進入鏈接后從0開始加載，也因為網絡穩定的“先天”優勢，讀用翻頁符號來解決分頁問題，也有一些以支撐的網站選擇使用“瀑布流”的方式替代分頁。

比如，花瓣、蘑菇街這類“看圖”的網站，因為搜索后的數據格式相同，用戶對同一內容興趣關注度大，停留對比時間較長，所以優先使用“瀑布流”。

移動App：因用戶使用環境復雜（可能在移動過程中從通暢環境到封閉的信號較差的環境,網絡可能從有到無、從快到慢）。所以和網站有區別的是，我們一般通過用戶主動下載、更新的方式來加載主要框架；實時的數據信息則是在用戶打開App后通過當前網絡加載，也因為網絡不穩定的劣勢，很少有翻頁符號來區別每頁，反復刷新加載會造成等待時間較長。

Tips：注意圖片大小 -加載圖片是對數據流量和網速的“巨大”考驗，因此，我們在一些運營類的項目或者是商場圖片時，尤其是App圖一定要記得壓縮。我們可以用到tinypng.com等在線壓縮圖片的工具進行壓縮，也要提醒開發小哥哥發版前記得壓縮圖片。

總結

• 交互方式，因為操作媒介有所不同，所以我們要注意區分一些狀態和側重；
• 反饋方式，因為瀏覽環境和基礎框架不同，所以我們要注意利用各自空間優勢進行反饋；
• 側重功能，因為各自的操作優勢，我們會對兩端的用戶和功能進行劃分，給出不同的產品側重；

最后是網絡環境，因為兩者各自網絡環境的優劣勢，我們在做頁面布局設計的時候也要作出相應的調整。

雖然現在Web端的網站等在慢慢的被弱化，連鵝廠都放棄了Web端的QQ，但是作為UI設計師，對于Web端的基本工還是不能放棄啊～至少App戰勝不了后臺系統！

參考鏈接：

• https://www.jianshu.com/p/81d4486bc816《網頁中的字體到底該怎么選擇？》
• https://www.jianshu.com/p/cc8916f35d00《用戶界面網頁設計原則》

本文由 @Quines 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

近關于大屏的項目做的比較多，目前手頭項目結束，有時間將內容整理分享，基于目前手上的某省監獄項目做可視化大屏規范分享希望能對大家有所幫助。

大屏數據可視化概念

數據可視化，是關于數據視覺表現形式的科學技術研究。其中，這種數據的視覺表現形式被定義為，一種以某種概要形式抽提出來的信息，包括相應信息單位的各種屬性和變量。

上述文字來自百度百科，做了許多大屏之后，可總結大屏分為信息展示、數據分析、監控預警三大類。利用屏幕大可展示信息多的特點，將復雜、抽象的內容通過可視化更加直觀的方式，以易于理解的形式幫助人們更好決策。

設計需求了解

1. 需求分析

一般產品經理需要想清楚大屏展示的內容動線，需要給觀者講述什么故事，由于視覺展示往往也起著決定性作用。所以在需求分析排布時設計師需要提前加入項目中了解項目需求，以展示問題解決問題為目標將業務模塊理出順序。

2. 視覺設計

平時利用Eagle這款圖片收藏軟件很好的幫助我在需要靈感素材時快速上手。

關鍵詞：FUI \ HUD \ SCI-FI

設計網站：behance、dribbble、站酷、Tob.design、UI中國、花瓣、pinterest

業務場景：智慧園區、智慧安防、智慧交通、智慧城市、智慧監獄、智慧水利、智能客服、智慧倉儲、智慧醫藥、智慧零售、智慧工業、數字港口、智慧工程

3. 硬件了解

數據可視化最終落地平臺一般有① 大屏、② 拼接屏、③ LED大屏、④ DLP大屏（無縫隙拼接市場占有率較高）、⑤ LCD、⑥ PDP（3mm拼接縫隙）需要清除了解大屏物理尺寸及視頻輸出分辨率，確定設計稿尺寸。

根據需求內容及硬件尺寸確定頁面布局方式，以下布局為常用布局方式，在實際工作中可能會遇到相同的需求內容會展示在不同比例的大屏硬件中，這時將設計稿的設計尺寸高度固定，地圖寬度自適應，用一個設計稿一次開發解決不同尺寸適配問題。

4. 圖表類型選擇

將抽象的需求用圖表的形式展示，一般圖表分① 比較類 ② 占比類 ③區間類 ④關聯類 ⑤ 趨勢類 ⑥ 時間類 ⑦ 地圖類。

不同展示內容選用不同形式的圖表，但有時候為了視覺效果豐富，不會在一個大屏里顯示相同的圖表展示方式，這時需要了解圖表特性與需求內容將圖表差異化展示。并在項目積累到一定程度時整合圖表庫以便于下次項目快速設計避免重復工作。

5. 字體字號選擇

一般大屏設計與開發盡量選擇自帶字體微軟雅黑，數字字體選用din，特殊字體可將字體包給到開發嵌入程序中。

由于甲方客戶多為政府機關，字體要求也會比較大一些，16px為正文字號，最小字號14px，在設計時對這些規范靈活應用。

6. 顏色

顏色選用應以信息展示清晰為最基本要素，在主次清晰的情況下選擇視覺效果較舒適的顏色搭配，在此之前需要了解大屏的顯色模式，在不支持漸變色的情況下盡量避免漸變色的使用。

在演示搭配時選擇“631”搭配原則，頁面中60%使用主色調，30%使用輔助色調，10%使用對比色調。

7. 基礎組件

在前端調用一些現成圖表組件時候，添加一些背景組件能夠豐富畫面，增強頁面層次。

以下是幾種組件的展示樣式供大家參考，這里也感謝組內小伙伴@梁祝。

設計注意事項

（1）屏幕投射效果不佳

如果條件允許的情況下應當設計前先用已經完成的不同風格的大屏設計在屏幕上投放，了解顏色差距，對比色臨近色漸變色在大屏上是否存在色差，如若效果不好應適當避免效果差的設計方式。

（2）等比例放大投射會發虛問題

首先需要明白幾個概念：①大屏邏輯分辨率（設計分辨率）② 顯卡輸出分辨率 ③ 視頻矩陣切換器（DVI）支持分辨率 ④ 大屏實際物理分辨率 。

當顯卡輸出分辨率=DVI支持分辨率時顯示效果最佳，另外多個信號源投射優于單個信號源投射 。

（3）大屏顯示被拉伸或壓縮

一般情況下，前端只需要對設計稿還原就好，可能由于視頻擴展器顯示不正確導致壓縮或拉伸，現在需要了解被壓縮的比例，對其進行校正，再者可以通過視頻自定義分辨率解決問題。

（4）圖表類樣式參考及實現

圖表工具：echarts、hichcharts 。第三方開發工具：datav數據可視化、騰訊云圖、百度智能云。原生開發：HTML5、JS、CSS、WebGL、unity。

本文由@宋佳 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash， 基于CC0協議