在找素材的時(shí)候偶然發(fā)現(xiàn)這個(gè)網(wǎng)站∑潞兀看了一會兒發(fā)現(xiàn)一些問題官辈，剛好想開一個(gè)產(chǎn)品文集，第一篇內(nèi)容就寫這個(gè)吧遍坟。

偶然發(fā)現(xiàn)的設(shè)計(jì)網(wǎng)站：www.youlovedna.com

網(wǎng)站的定位應(yīng)該是小清新和文藝范兒吧拳亿，采用瀑布流式布局。每個(gè)數(shù)據(jù)塊的寬度一致政鼠，高度根據(jù)圖片的高度來排列（不知道算法上具體是怎么實(shí)現(xiàn)的）风瘦。

從整體效果來看是舒服、有設(shè)計(jì)感的公般，并且鎖定背景圖片万搔，讓數(shù)據(jù)塊浮于上方胡桨。每個(gè)數(shù)據(jù)塊相當(dāng)于一個(gè)專題，點(diǎn)進(jìn)去后是專題的詳細(xì)頁瞬雹，圖文內(nèi)容昧谊。

但看了一會兒后覺得每個(gè)數(shù)據(jù)塊右下角的“+”——表示數(shù)據(jù)塊的詳細(xì)頁面入口，這個(gè)設(shè)計(jì)其實(shí)累贅了酗捌。如果單看我上面的截圖呢诬，可能不會注意到加號。

“+”的功能是跳轉(zhuǎn)到詳細(xì)頁胖缤。在每個(gè)數(shù)據(jù)塊中尚镰，“+”很小，但也不至于是到會被忽略的地步哪廓，可能設(shè)計(jì)師在視覺美感上是經(jīng)過考量的狗唉。但這樣導(dǎo)致可點(diǎn)擊的區(qū)域很小（在界面上看是三角形涡真，實(shí)際上做的是正方形分俯，當(dāng)鼠標(biāo)進(jìn)入正方形區(qū)域范圍內(nèi)時(shí)，自動變成手形）哆料，用戶需要花時(shí)間把鼠標(biāo)對準(zhǔn)然后點(diǎn)擊缸剪。但同時(shí)能實(shí)現(xiàn)這個(gè)功能的另一個(gè)操作是點(diǎn)擊圖片。比較而言东亦，“+”的點(diǎn)擊率就更小了杏节。

其次，圖片下方的文字過多典阵。把評論數(shù)放進(jìn)去意義不大拢锹。評論和熱度對用戶來說是一個(gè)意思。在數(shù)據(jù)塊中評論只顯示了數(shù)量萄喳，并不是把評論內(nèi)容放上來，那么就是為了展示這個(gè)圖片有多少人進(jìn)行了關(guān)注蹋半。熱度在后臺可能代表點(diǎn)擊量他巨，但用戶并不會區(qū)分熱度和評論數(shù)，相反减江，熱度傳達(dá)的概念應(yīng)該更直觀染突、更有表現(xiàn)力。

其實(shí)可以把“熱度”專門做一個(gè)分類出來辈灼，放在每個(gè)板塊下份企。

進(jìn)入網(wǎng)頁的時(shí)候，用戶會根據(jù)圖片來找到吸引他的內(nèi)容巡莹，然后點(diǎn)擊查看司志，只有當(dāng)熱度達(dá)到一個(gè)量的時(shí)候才會引起關(guān)注甜紫。而從圖片的排列來看，并不是根據(jù)熱度來排序的骂远∏舭裕基本上我點(diǎn)開的圖片到底有多少人喜歡，有多少人看過不會影響我的操作激才，至少在這個(gè)頁面上影響力很小拓型。

當(dāng)然，想要實(shí)現(xiàn)的功能可能就是隨便看看瘸恼，但隨便看看對實(shí)時(shí)更新的要求又很高了劣挫。當(dāng)刷新時(shí)，首頁的內(nèi)容是不是全部都會更新东帅，還是只有部分更新压固。好吧，扯遠(yuǎn)了冰啃。

數(shù)據(jù)塊上展示的內(nèi)容缺少PM的考量邓夕，給我的感覺是只是為了配合后臺的數(shù)據(jù)所設(shè)計(jì)。腦補(bǔ)畫面：程序員說后臺有這些數(shù)據(jù)喲阎毅，PM點(diǎn)點(diǎn)頭焚刚，不用可惜了，都放上去吧扇调。

一個(gè)數(shù)據(jù)塊的內(nèi)容

“分類”放出來也沒什么意義矿咕，因?yàn)榭戳讼聢D你就會明白，從網(wǎng)頁頂部的板塊里進(jìn)入下面的內(nèi)容狼钮√贾可能在后臺每個(gè)圖片的標(biāo)簽會有多個(gè)，但在這個(gè)板塊下分類都是一個(gè)熬芜，從字面上“分類”所表示的意義是進(jìn)行區(qū)別莲镣，在這里就失去了作用。而且分類還沒有鏈接涎拉，不支持跳轉(zhuǎn)到相應(yīng)板塊瑞侮。

唯一體現(xiàn)分類區(qū)別的地方是，在首頁（不屬于任意板塊）里所有圖片被放在一起鼓拧。但要知道這時(shí)候用戶不是看“分類”半火，是看圖片啊。

www.youlovedna.com

整個(gè)文字部分季俩，采用一個(gè)字號钮糖，分類、評論酌住，熱度后面的數(shù)據(jù)用其他顏色突出店归。不能點(diǎn)擊阎抒，只是展示。從視覺效果上來講娱节，給用戶提供的信息很少挠蛉。

看看pinterest的：每個(gè)數(shù)據(jù)塊的內(nèi)容是——圖片、標(biāo)題肄满、被pin的數(shù)量谴古、熱愛數(shù)，然后是來源稠歉。比較簡潔掰担，信息的有效性很高。

pinterest數(shù)據(jù)塊

再比如極客公園怒炸，雖然是文章內(nèi)容带饱，但也采用這樣的布局，只是舉個(gè)數(shù)據(jù)塊內(nèi)容的例子阅羹，不評價(jià)合不合適：

極客公園數(shù)據(jù)塊

因?yàn)閿?shù)據(jù)塊的內(nèi)容是文章勺疼，所以采用了看文章的方式進(jìn)行布局，也是很好的改進(jìn)吧捏鱼。他們也放上了評論數(shù)执庐，但支持點(diǎn)擊，直接鏈接到詳細(xì)頁的評論內(nèi)容部分导梆。

只提問題轨淌，不說解決方案屬于用戶反饋，不是產(chǎn)品分析……不能寫解決方案的PM做不出好產(chǎn)品（這句話放在這里的意義是逼我自己寫解決方案）看尼。

其實(shí)這個(gè)網(wǎng)站的構(gòu)架還比較簡單递鹉，分為首頁和頂部的那些大的板塊，每個(gè)板塊對應(yīng)為一個(gè)分類藏斩。板塊下就是一個(gè)個(gè)的數(shù)據(jù)塊躏结，也算是專題，然后下一級是每篇專題的圖文內(nèi)容狰域。

不知道網(wǎng)站的需求是什么窜觉，目標(biāo)用戶是誰。只是結(jié)合我自己的分析和不靠譜的交互思路北专，給出關(guān)于數(shù)據(jù)塊的建議：

my design 1

1、文字居中旬陡。

2拓颓、熱度用“喜歡”的圖標(biāo)表示，引導(dǎo)用戶進(jìn)行點(diǎn)擊描孟，發(fā)表自己的想法（熱度是一個(gè)客觀的詞驶睦，但如果是喜歡就很主觀砰左，會有想要發(fā)表自己意見的意愿）

3、“喜歡”和“評論”都有鏈接场航，可以跳轉(zhuǎn)到詳細(xì)頁面的相應(yīng)內(nèi)容中缠导。

4、在原網(wǎng)頁中圖片的標(biāo)題比較長溉痢，而且有效信息少僻造。如果是代碼自動判斷，那可以直接從中文開始輸入（長度還是不好控制）孩饼，如果是編輯處理髓削，雖然耗費(fèi)人力，但可以直接選擇有效的內(nèi)容镀娶。

如果做成瀑布流布局立膛，大概是這樣的：

my design 2

以上。解決方案只是自己的想法梯码，可能缺乏科學(xué)性宝泵，并且作為一個(gè)經(jīng)驗(yàn)并不太豐富的PM，這篇文章是寫來練手的轩娶。

原本下午寫了幾小時(shí)儿奶，晚上回到家繼續(xù)寫，然后中間又搜了一些資料罢坝，又被資料的內(nèi)容吸引過去廓握，拖拖拉拉地盡然寫了一個(gè)晚上……也是費(fèi)腦細(xì)胞的。