這次因?yàn)橐鲆粋€(gè)視頻類(lèi)的網(wǎng)站和app妄荔，其中有一個(gè)主要的界面是以圖片展示為主的頁(yè)面類(lèi)型，所以搜集了一些以圖片為主的網(wǎng)頁(yè)設(shè)計(jì)言疗，來(lái)做一個(gè)小總結(jié)晴圾。第一次寫(xiě)總結(jié)颂砸，希望能越寫(xiě)越好噪奄。
在開(kāi)始搜集之前大概疏理了一般會(huì)用到這種設(shè)計(jì)方式的網(wǎng)站類(lèi)型：
1死姚、視頻類(lèi)。需要展示視頻預(yù)覽效果勤篮，有的還有動(dòng)圖效果都毒。騰訊tv（鼠標(biāo)移上去可以有一個(gè)小的卡片預(yù)覽）、愛(ài)奇藝碰缔、芒果tv账劲、樂(lè)視。
2金抡、新聞?lì)惼俳埂bc cnn nbc 首頁(yè)都有一些視頻的預(yù)覽。國(guó)內(nèi)的媒體似乎并不是以視頻畫(huà)面展示為主梗肝。反而倒是愛(ài)范兒榛瓮、好奇心日?qǐng)?bào)（沒(méi)想到居然有了網(wǎng)頁(yè)版）這種新聞?lì)惖木W(wǎng)頁(yè)是這種多圖片的布局。
3巫击、設(shè)計(jì)類(lèi)圖片分享類(lèi)的網(wǎng)站禀晓。展示圖片為主，bechance 坝锰、pinterest 粹懒、dribbble 國(guó)內(nèi)的花瓣、站酷顷级、ui中國(guó)凫乖、麥芽、padmag等等弓颈。還有一個(gè)是訂閱的網(wǎng)站拣凹，但是訂閱的是圖片展示類(lèi)型的網(wǎng)站才會(huì)是圖片，所以就不單獨(dú)出來(lái)分類(lèi)了恨豁，像一個(gè)叫panda的國(guó)外訂閱類(lèi)（http://usepanda.com/）國(guó)內(nèi)的我記得騰訊也有一個(gè)忘記存了嚣镜。
可能還有其它的類(lèi)型，暫時(shí)先寫(xiě)著幾種橘蜜。
第一種視頻類(lèi)
愛(ài)奇藝www.iqiyi.com/
整個(gè)網(wǎng)站白色底菊匿，基本的元素是卡片式，卡片的構(gòu)成也非常的簡(jiǎn)單：視頻的圖片＋節(jié)目名字＋節(jié)目一行簡(jiǎn)介计福，文字背景淺灰色跌捆。根據(jù)分類(lèi)的不同，部分還有評(píng)分或2行介紹或1行介紹象颖。
整個(gè)網(wǎng)站的基礎(chǔ)網(wǎng)格是wh180x136的卡片佩厚，寬度一共7個(gè)，卡片間距20 说订，故而總寬度180x7+20x6＝1380抄瓦。寬度做2個(gè)或文字的變化潮瓶，高度做2個(gè)卡片疊加高度，還有寬高都是2個(gè)的變化钙姊，這個(gè)變化要加上間距的高寬度毯辅。專門(mén)查看了下視頻點(diǎn)開(kāi)的頁(yè)面，居然不是以這個(gè)為基礎(chǔ)的煞额，或者是更小的網(wǎng)格基數(shù)思恐？
頁(yè)面真?zhèn)€也是白色底，最大寬度1710比愛(ài)奇藝的視頻寬度寬很多膊毁，除了最上面的熱門(mén)分類(lèi)有灰色卡片的背景胀莹，下面的均為圖片＋節(jié)目名稱＋一行簡(jiǎn)介，分類(lèi)的不同會(huì)有一些個(gè)別小元素的區(qū)別婚温，時(shí)長(zhǎng)嗜逻、評(píng)分、vip小標(biāo)簽缭召、更新到x集栈顷、全部集數(shù)。
小模塊比較復(fù)雜有兩種尺寸嵌巷，寬一點(diǎn)的wh240x135高一點(diǎn)的 wh209x293萄凤，圖片之間的左右間距更小只有4px。比較有特色的是當(dāng)鼠標(biāo)滑過(guò)的時(shí)候會(huì)有一小段視頻的預(yù)覽（之前的預(yù)覽時(shí)在上面或者下面搪哪，現(xiàn)在則是直接浮出在當(dāng)前的位置上多占一點(diǎn)左右的位置靡努，更簡(jiǎn)潔了）
芒果tvwww.mgtv.com/
底色為淺灰色，最大寬度是1420晓折』箅基本的內(nèi)容與愛(ài)奇藝騰訊一樣，圖片＋節(jié)目名稱＋節(jié)目一行簡(jiǎn)介漓概。網(wǎng)格基礎(chǔ)是wh220x125漾月，一行6個(gè)，根據(jù)不同的分類(lèi)做2網(wǎng)格大小的變化或文字的變化和愛(ài)奇藝的有點(diǎn)像胃珍，每個(gè)小的圖片都比較小梁肿。
騰訊無(wú)動(dòng)圖，愛(ài)奇藝的一頁(yè)3個(gè)觅彰，多為綜藝的吩蔑，芒果的比較多目測(cè)大概5、6個(gè)是為熱播的電視劇填抬，大概是收的廣告費(fèi)吧 ～
itvwww.itv.com/
英國(guó)第二大無(wú)線電視經(jīng)營(yíng)商烛芬，是以視頻展示為主的，比較傾向這個(gè)分類(lèi)。它的首頁(yè)是灰色底赘娄，中間1366的主視覺(jué)區(qū)域仆潮，加陰影浮動(dòng)效果，首頁(yè)只是放了一些比較熱播的劇擅憔，圖片比較大鸵闪，單個(gè)有303檐晕，一行3個(gè)暑诸，間距也比較寬，目測(cè)得有20多吧辟灰，特色是分類(lèi)用的是熱播劇的圖片做分割个榕。單個(gè)小模塊是圖片＋加粗節(jié)目名稱＋電臺(tái)名字｜播放時(shí)間，這個(gè)不同於視頻網(wǎng)站的簡(jiǎn)介芥喇。在不同分類(lèi)下的臺(tái)打開(kāi)的子頁(yè)裡面西采，前兩屏模塊更大一些，寬有468继控，所以一行排列兩個(gè)械馆，給人的感覺(jué)更加的清晰明了，下面的更多模塊與主頁(yè)一樣一行3個(gè)武通。
與國(guó)內(nèi)的視頻網(wǎng)站比較起來(lái)霹崎，itv的ui上圓角比較多給人感覺(jué)更加的有親和力，可能也與視頻網(wǎng)站希望給人的輕鬆愉悅的感受有關(guān)冶忱。在內(nèi)容上分類(lèi)更加的少一些尾菇，佈局上也不會(huì)把主要的內(nèi)容一起集中在首頁(yè)給人感覺(jué)非常的滿，它的首頁(yè)更加的精煉囚枪，在重要的位置上放置了分類(lèi)派诬，分類(lèi)子頁(yè)呈現(xiàn)更多的內(nèi)容。
另一點(diǎn)链沼，hover的效果非常明顯默赂，圖片下方出現(xiàn)一條粗的主題色線＋標(biāo)題也變成主題色，這點(diǎn)比國(guó)內(nèi)的要好一些（國(guó)內(nèi)上面分析的幾家只有騰訊做了hover效果）括勺。
第二種新聞?lì)?/b>
bbc?www.bbc.com/news
由于是新聞?lì)惙趴桑畲蟮牟煌俏淖值陌鍓K更多一些，整體也是白色底朝刊，最大的寬度1248 耀里，基本的網(wǎng)格是252x200加上間距加上文字四舍五入的情況下，不明白為什么有小數(shù)點(diǎn)拾氓。分類(lèi)直接用黑色加粗和線通一行來(lái)分割冯挎，非常的簡(jiǎn)潔，視覺(jué)焦點(diǎn)可以落在它的圖片上，感覺(jué)圖片的比例也很舒適房官，不會(huì)覺(jué)得很小也不會(huì)覺(jué)得太大太擁擠趾徽。?
版面上比較多的變化，幾個(gè)大的分類(lèi)是一樣的翰守，中間穿插了一個(gè)最多閱讀的排名純文字孵奶。最上面的第一屏內(nèi)容可能是為了承載更多的新聞內(nèi)容，所以并未每個(gè)小模塊都有配圖蜡峰，這樣子就突出了有圖片的部分了袁，左側(cè)第一個(gè)圖片也比較大，視覺(jué)上的優(yōu)先級(jí)非常明顯湿颅，大圖>小圖>無(wú)圖载绿。重復(fù)分類(lèi)的那幾個(gè)左側(cè)大圖，右側(cè)小圖油航，不太明白為什么左側(cè)的圖文并未占滿2個(gè)網(wǎng)格大小崭庸。
整個(gè)網(wǎng)頁(yè)的底色也是白色，在每一個(gè)小的分類(lèi)上面有一個(gè)灰條谊囚，大的分類(lèi)與BBC類(lèi)似怕享，文字和線來(lái)做區(qū)隔。版面分為三個(gè)小板塊和4個(gè)小板塊兩種镰踏，第一屏和第二屏變化更加豐富一些函筋。網(wǎng)頁(yè)最大寬度1100，三欄的時(shí)候?qū)挾仁?53（也有小數(shù)點(diǎn)此處省略）余境，四欄的時(shí)候255驻呐。基本的小模塊都是由圖片芳来、標(biāo)題構(gòu)成含末，新聞?lì)惖膶傩詻Q定了每個(gè)小模塊圖片下的新聞標(biāo)題有4個(gè)，但并未對(duì)對(duì)字?jǐn)?shù)做限制即舌，所以會(huì)有換行的情況佣盒，看上去是參差不齊的。
愛(ài)范兒www.ifanr.com/
整個(gè)網(wǎng)頁(yè)的背景是淺灰色顽聂，主視覺(jué)區(qū)1120肥惭，小模塊為白底卡片式設(shè)計(jì)wh266X68，一行4個(gè)紊搪，圖片＋標(biāo)題＋左側(cè)時(shí)間｜右側(cè)喜歡評(píng)論蜜葱，圖片的左上角會(huì)有一些透明黑色的小標(biāo)簽表示分類(lèi)。第一二屏比較多的模塊變化耀石，2個(gè)模塊寬2個(gè)模塊高2個(gè)模塊的文字牵囤，用色塊來(lái)突出重要的區(qū)域，mindtalk區(qū)域用了不同于主題色的冷藍(lán)綠來(lái)突出，視頻則用深色的卡片來(lái)突出揭鳞，還有一個(gè)亮眼的設(shè)計(jì)用的分屏式設(shè)計(jì)：左側(cè)藍(lán)灰色背景加文字炕贵，右側(cè)圖片。
初看野崇，覺(jué)得這個(gè)設(shè)計(jì)有點(diǎn)浪費(fèi)屏幕称开，并不是以圖片為主的卡片式呈現(xiàn)方式，相反乓梨，文字更加的突出鳖轰。多滑動(dòng)了幾屏感覺(jué)體驗(yàn)非常的像用手機(jī)，倒也不用左右來(lái)回切換督禽，這樣的加粗加大的文字反倒有一種大氣豪邁的感覺(jué)（什么鬼）脆霎。第一行用的大行的加粗文字＋第二行左側(cè)圖｜右側(cè)上頭像名字時(shí)間 右側(cè)下簡(jiǎn)介 作為基本的模塊來(lái)陳列新聞內(nèi)容总处。最引人注意的地方大概是它的第一屏狈惫，用了占滿一屏的圖片和文字來(lái)推一個(gè)新聞還是很大氣的。
設(shè)計(jì)類(lèi)圖片分享類(lèi)
dribbledribbble.com/
淺灰色底鹦马，白色底卡片式設(shè)計(jì)胧谈，非常淺的一點(diǎn)陰影，卡片wh219.98X191.98（怎么都要小數(shù)點(diǎn)荸频？自適應(yīng)設(shè)置的比例關(guān)系菱肖？）間隔30，主視覺(jué)2000旭从，最大化一行8個(gè)稳强，縮小后一個(gè)個(gè)縮減下去最少2個(gè)左側(cè)欄變成漢堡包樣式『驮茫卡片的內(nèi)容由圖片＋瀏覽數(shù)評(píng)論數(shù)點(diǎn)贊數(shù)退疫，用戶的頭像和名字沒(méi)有放置在卡片上而是放在淺灰色背景上，這樣一來(lái)就更加突出圖片鸽素。
在hover卡片效果的時(shí)候褒繁，會(huì)出現(xiàn)淺白色蒙板層遮住圖片而出現(xiàn)介紹作品的文字標(biāo)題和一段（限制5行）簡(jiǎn)介，在下面用戶名的后面還會(huì)出現(xiàn)teme的小標(biāo)簽馍忽，在hover標(biāo)簽的時(shí)候底色會(huì)變色棒坏。在hover過(guò)用戶的名字的時(shí)候還有一個(gè)提示框出現(xiàn)團(tuán)隊(duì)logo成員的頭像和名字一些基本的團(tuán)隊(duì)信息。交互的細(xì)節(jié)還是很豐富的遭笋，如果不是專門(mén)寫(xiě)坝冕，似乎都快忽略了這些小細(xì)節(jié)了。點(diǎn)擊圖片是重新打開(kāi)一個(gè)新的頁(yè)面瓦呼。
pinterestwww.pinterest.com/
總體是用的白色做底喂窟，瀑布流的方式來(lái)呈現(xiàn)。在hover一個(gè)個(gè)小模塊的時(shí)候會(huì)出現(xiàn)淺灰的底色，比較的像卡片式設(shè)計(jì)谎替。寬度236小模塊偷溺，可以隨著屏幕的拉大無(wú)限加載，最少一行三個(gè)钱贯。小模塊的元素有圖片＋圖片名稱加粗＋圖片的簡(jiǎn)介＋采集者頭像采集者名字采集者簡(jiǎn)介＋右側(cè)多少人pin的數(shù)據(jù)挫掏，內(nèi)容有點(diǎn)多，不過(guò)并不是每一個(gè)卡片都全部有這些內(nèi)容秩命，很多都沒(méi)有圖片的名稱尉共。
hover圖片或簡(jiǎn)介的時(shí)候會(huì)自動(dòng)填充下側(cè)的白色背景為灰背景，左右兩側(cè)也擴(kuò)充出一些灰色的區(qū)域弃锐，在圖片的頂部會(huì)出現(xiàn)分享袄友、喜歡、保存到畫(huà)板霹菊、more的icon剧蚣。hover不同的地方，中間還有一些細(xì)微的差別旋廷，hover圖的時(shí)候圖片區(qū)域會(huì)多加一層透明的淺黑色層鸠按，顯的更深一些，如果只是hover簡(jiǎn)介文字那一段則圖片的底部會(huì)有一個(gè)漸變的黑色透明層饶碘，hover頭像那組信息的時(shí)候是單獨(dú)的淺灰色背景顯示可以鏈接（去該采集者的主頁(yè)）目尖。還有一些比較細(xì)小的細(xì)節(jié)，如圖片底部居然有一個(gè)采集原網(wǎng)址的一行文字可以直接去到對(duì)應(yīng)的網(wǎng)站扎运，采集來(lái)源的那個(gè)文字也是可以直接鏈接去采集的那個(gè)畫(huà)板去的瑟曲，如果不注意似乎并不會(huì)太注意到這些小行的文字也是可以鏈接的，可以理解為這是為熟練高級(jí)用戶設(shè)計(jì)的豪治？分享的按鈕用的是非模態(tài)的彈框洞拨，直接在下方出現(xiàn)浮框。more的雙圈小icon點(diǎn)擊一下鬼吵，在這個(gè)圖片的周?chē)蜁?huì)變成跟這個(gè)圖片相關(guān)或者相似的一些圖片（關(guān)鍵詞或者畫(huà)板的篩選）扣甲。點(diǎn)擊圖片的話出現(xiàn)的是一個(gè)模態(tài)的彈框，貌似除了一些信息更為詳細(xì)有更多的相似圖片推薦之外齿椅，我看主頁(yè)已經(jīng)能實(shí)現(xiàn)全部了吧琉挖，hover大法！
bechancewww.behance.net/
與dribble一樣涣脚，淺灰底色示辈，卡片式設(shè)計(jì)，不過(guò)它的卡片的陰影更重一些遣蚀》椋卡片wh202X292纱耻，主視覺(jué)寬1546，最多一行7個(gè)最少一個(gè)然后簡(jiǎn)介移到右側(cè)险耀∨卡片的內(nèi)容圖片＋作品名＋作者名＋分類(lèi)＋贊｜瀏覽數(shù)｜推薦日期的icon。
hover圖片的時(shí)候甩牺，圖片上有一層白色的透明層蘑志，作品名稱加下劃線，鼠標(biāo)變成手的時(shí)候右側(cè)還會(huì)有一個(gè)小的作品名稱的提示贬派，個(gè)人感覺(jué)這個(gè)提示有點(diǎn)多余急但，滑過(guò)作品名稱的時(shí)候和滑過(guò)圖片的時(shí)候是一樣的效果，滑過(guò)作者名字的時(shí)候會(huì)有一個(gè)小的非模態(tài)提示框顯示作者的頭像近期的作品關(guān)注按鈕等一些簡(jiǎn)單的元素搞乏，當(dāng)是多個(gè)作者的時(shí)候會(huì)出現(xiàn)幾個(gè)作者的列表排列波桩，分類(lèi)的文字也可以直接鏈接去相應(yīng)的分類(lèi)，這些小細(xì)節(jié)也是需要特別主要才能注意到请敦，按照之前的使用習(xí)慣镐躲，基本看到感興趣的圖片就直接點(diǎn)擊進(jìn)去看詳情了，看詳情跟pinterest一樣也是模態(tài)的彈框形勢(shì)冬三，不過(guò)更大一些匀油，右側(cè)沒(méi)有一個(gè)叉叉按鈕缘缚。
今天打開(kāi)發(fā)現(xiàn)已經(jīng)改版勾笆，記得之前是用線去做小模塊的分割的，主題色黃色也沒(méi)有以前那個(gè)深了桥滨，現(xiàn)在也變成了淺灰底色和白色底色的卡片式設(shè)計(jì)結(jié)合的了窝爪，上面的幾個(gè)大分類(lèi)的分割也是用的色塊的區(qū)分也蠻眼熟的dribbble。主視覺(jué)1380齐媒，卡片wh260X345蒲每，一頁(yè)最多5個(gè)最小尺寸的時(shí)候也是5個(gè)，但每個(gè)卡片的寬度進(jìn)行了縮小喻括，變成wh210X308邀杏。卡片的內(nèi)容圖＋作品名稱＋分類(lèi)＋瀏覽數(shù)｜評(píng)論｜贊數(shù)＋作者頭像名字時(shí)間唬血，作品的名字限制在一行多出的用省略號(hào)望蜡，時(shí)間也會(huì)被替換成推廣或商業(yè)活動(dòng)的小icon。
在滑過(guò)圖片的時(shí)候會(huì)加上一層淺白色層拷恨，滑過(guò)作品標(biāo)題的時(shí)候文字的顏色變成紅色（新增的主題色脖律？）滑過(guò)作者頭像或名字的時(shí)候會(huì)出現(xiàn)一個(gè)非模態(tài)的小彈窗出現(xiàn)作者的頭像名字關(guān)注數(shù)粉絲數(shù)關(guān)注按鈕這些基本信息。這個(gè)地方比起上面幾個(gè)倒是少了一個(gè)分類(lèi)的鏈接腕侄。
pandausepanda.com/app/#/
這是一個(gè)訂閱類(lèi)型的網(wǎng)站小泉，因?yàn)榻Y(jié)構(gòu)上與要做的項(xiàng)目非常像所以也拿來(lái)重點(diǎn)參考了芦疏。這種布局是工具類(lèi)軟件經(jīng)常用到的，像outlook郵件微姊、騰訊云酸茴、阿里云，頂欄和側(cè)欄固定導(dǎo)航兢交，中間是內(nèi)容區(qū)弊决，避免了過(guò)多的跳轉(zhuǎn)，能夠讓用戶更方便的切換功能使用產(chǎn)品魁淳。
整體白色底飘诗，頂欄白色底通欄，右側(cè)有幾個(gè)功能的小icon淺灰色底界逛，然后下面一條左右分欄的淺灰色功能區(qū)昆稿，之所以分欄，是因?yàn)獒槍?duì)的區(qū)域不同息拜。左側(cè)的搜索可以搜訂閱的欄目溉潭，設(shè)置可以添加及刪除訂閱，添加是一個(gè)新頁(yè)面少欺。右側(cè)能夠?qū)Ξ?dāng)前訂閱的內(nèi)容做一些更加具體的設(shè)置喳瓣，如有些網(wǎng)站有following，還能選擇更新內(nèi)容的時(shí)間是當(dāng)日還是過(guò)去式赞别。然后左側(cè)訂閱欄的底色還是白色畏陕，選中為淺灰色，右側(cè)的內(nèi)容區(qū)域底色也是白色仿滔。整個(gè)頁(yè)面還是蠻清爽的惠毁，因?yàn)樽髠?cè)訂閱的有圖標(biāo)，內(nèi)容區(qū)域也很豐富崎页，所以頁(yè)面并不會(huì)因?yàn)楹?jiǎn)單清爽而顯得簡(jiǎn)單鞠绰，削弱不必要的導(dǎo)航功能到更好的突出了中間的核心內(nèi)容區(qū)。像dribbble這樣的內(nèi)容平臺(tái)在點(diǎn)擊內(nèi)容區(qū)（圖片）以后還是會(huì)跳轉(zhuǎn)到原網(wǎng)頁(yè)飒焦，而像一些新聞?lì)愋偷膭t在中間又多加一個(gè)列表區(qū)蜈膨，右側(cè)顯示具體的內(nèi)容，個(gè)人覺(jué)得這種還是蠻方便的牺荠。
這里還是重點(diǎn)分析下圖片居多的設(shè)計(jì)翁巍。同樣是采集dribbble的內(nèi)容，卻是采用的不同與它的設(shè)計(jì)志电，以白色底為主曙咽，圖片排的較為密集也更大一些，去掉了卡片式設(shè)計(jì)挑辆，單單只展示圖片例朱，并且在圖片上加了描邊孝情，dribbble原本的一些功能，如瀏覽數(shù)點(diǎn)贊數(shù)這些則是通過(guò)hover的方式去呈現(xiàn)的洒嗤。一行最多的時(shí)候展示6個(gè)圖最少3個(gè)箫荡，隨著屏幕的拉大每個(gè)圖片也相應(yīng)的放大，縮小的時(shí)候圖也相應(yīng)的縮小渔隶，可以說(shuō)是按照一定的比例在變化的羔挡，而間距保持一致。
麥芽是以前一個(gè)關(guān)注的設(shè)計(jì)公司出的一個(gè)網(wǎng)站间唉，非常喜歡它們的設(shè)計(jì)绞灼。屬于大設(shè)計(jì)（設(shè)計(jì)藝術(shù)生活方式時(shí)尚什么的）范疇里面的一個(gè)以圖片展示為主的網(wǎng)站。去做分析當(dāng)然不僅是因?yàn)楸容^喜歡這個(gè)網(wǎng)站還因?yàn)樗脑O(shè)計(jì)方式對(duì)要做的項(xiàng)目有比較大的參考意義呈野，就是圖片下面的內(nèi)容其實(shí)并不是非常整齊的低矮，一行當(dāng)中會(huì)有突出的部分，但它用一個(gè)固定的間距可以容納更多或者更少的方式去解決的被冒。
整個(gè)網(wǎng)站也是白色底军掂，中間的內(nèi)容部分小模塊圖片+大粗標(biāo)題+小日期+簡(jiǎn)介+標(biāo)簽，與其他這種類(lèi)型網(wǎng)站不同的地方是昨悼，一般這種小模塊都會(huì)限制標(biāo)題字?jǐn)?shù)在一行多少字以內(nèi)然后超出的部分就用省略號(hào)表示鼠標(biāo)上移的時(shí)候出現(xiàn)全部蝗锥，盡量每個(gè)模塊保持整齊，然后這個(gè)網(wǎng)站比較特別率触，標(biāo)題有1行也有2行终议，簡(jiǎn)介有2行也有3行，就連標(biāo)簽頁(yè)游2行和3行的差別闲延，突然發(fā)現(xiàn)有的簡(jiǎn)介是在第2行打省略號(hào)有的第3行痊剖，所以難道是故意而為之？（我太年輕垒玲。。）
hover圖片的時(shí)候圖片會(huì)加上一個(gè)透明黑色圖層找颓，hover標(biāo)簽的時(shí)候淺灰色底的標(biāo)簽會(huì)變成黑色底合愈。這個(gè)跟老外的那些網(wǎng)站比起來(lái)就沒(méi)有什么幺蛾子了，畢竟它算是主動(dòng)篩選的給用戶的內(nèi)容击狮，而不是用戶產(chǎn)生內(nèi)容佛析，所以沒(méi)有那么多的鏈接點(diǎn)。
straightlinebm.straightline.jp/
這是一個(gè)日本的一個(gè)以收集網(wǎng)站為主的網(wǎng)站彪蓬。不同與前面的網(wǎng)站白色底或者淺灰色底寸莫，這個(gè)用的是深黑底，同樣是卡片式設(shè)計(jì)档冬，卡片為比底色更深的深黑色底「蚣。卡片的內(nèi)容圖片+網(wǎng)站名字+date日期+stats使用數(shù)|喜歡數(shù)+action保存|加入到喜歡弄砍，卡片的下面的空白比較多，大概是為了舒緩這種圖片為主的布局态坦。
hover圖片的時(shí)候會(huì)加上一層淺黑色圖層，click圖片則直接進(jìn)入該網(wǎng)站棒拂。hover stats后面的內(nèi)容的時(shí)候在左側(cè)彈出彈框可以看見(jiàn)具體的用戶頭像伞梯，click action后面的save會(huì)有彈框出來(lái)具體的選項(xiàng)然后保存，add to favorite則是直接在當(dāng)前顯示保存的過(guò)程轉(zhuǎn)圈圈然后變成delete form favorite帚屉。
頂部的篩選做的比較細(xì)致谜诫，可以參考。有編輯精選攻旦、全部猜绣、我的書(shū)簽、我的喜歡這幾個(gè)分類(lèi)敬特，下面還有一個(gè)標(biāo)簽tags list的分類(lèi)掰邢，點(diǎn)開(kāi)是一個(gè)浮層，有按顏色伟阔、類(lèi)型辣之、語(yǔ)言／網(wǎng)站技術(shù)、布局這幾個(gè)具體的分類(lèi)皱炉。右側(cè)還有可以調(diào)大調(diào)小卡片展示尺寸的設(shè)計(jì)怀估，非常人性化的篩選選項(xiàng)。
