这次因为要做一个视频类的网站和app，其中有一个主要的界面是以图片展示为主的页面类型，所以搜集了一些以图片为主的网页设计，来做一个小总结。第一次写总结，希望能越写越好。
在开始搜集之前大概疏理了一般会用到这种设计方式的网站类型：
1、视频类。需要展示视频预览效果，有的还有动图效果。腾讯tv（鼠标移上去可以有一个小的卡片预览）、爱奇艺、芒果tv、乐视。
2、新闻类。bbc cnn nbc 首页都有一些视频的预览。国内的媒体似乎并不是以视频画面展示为主。反而倒是爱范儿、好奇心日报（没想到居然有了网页版）这种新闻类的网页是这种多图片的布局。
3、设计类图片分享类的网站。展示图片为主，bechance 、pinterest 、dribbble 国内的花瓣、站酷、ui中国、麦芽、padmag等等。还有一个是订阅的网站，但是订阅的是图片展示类型的网站才会是图片，所以就不单独出来分类了，像一个叫panda的国外订阅类（http://usepanda.com/）国内的我记得腾讯也有一个忘记存了。
可能还有其它的类型，暂时先写着几种。
第一种视频类
整个网站白色底，基本的元素是卡片式，卡片的构成也非常的简单：视频的图片＋节目名字＋节目一行简介，文字背景浅灰色。根据分类的不同，部分还有评分或2行介绍或1行介绍。
整个网站的基础网格是wh180x136的卡片，宽度一共7个，卡片间距20 ，故而总宽度180x7+20x6＝1380。宽度做2个或文字的变化，高度做2个卡片叠加高度，还有宽高都是2个的变化，这个变化要加上间距的高宽度。专门查看了下视频点开的页面，居然不是以这个为基础的，或者是更小的网格基数？
页面真个也是白色底，最大宽度1710比爱奇艺的视频宽度宽很多，除了最上面的热门分类有灰色卡片的背景，下面的均为图片＋节目名称＋一行简介，分类的不同会有一些个别小元素的区别，时长、评分、vip小标签、更新到x集、全部集数。
小模块比较复杂有两种尺寸，宽一点的wh240x135高一点的 wh209x293，图片之间的左右间距更小只有4px。比较有特色的是当鼠标滑过的时候会有一小段视频的预览（之前的预览时在上面或者下面，现在则是直接浮出在当前的位置上多占一点左右的位置，更简洁了）
芒果tvwww.mgtv.com/
底色为浅灰色，最大宽度是1420。基本的内容与爱奇艺腾讯一样，图片＋节目名称＋节目一行简介。网格基础是wh220x125，一行6个，根据不同的分类做2网格大小的变化或文字的变化和爱奇艺的有点像，每个小的图片都比较小。
腾讯无动图，爱奇艺的一页3个，多为综艺的，芒果的比较多目测大概5、6个是为热播的电视剧，大概是收的广告费吧 ～
itvwww.itv.com/
英國第二大無線電視經營商，是以視頻展示為主的，比較傾向這個分類。它的首頁是灰色底，中間1366的主視覺區域，加陰影浮動效果，首頁只是放了一些比較熱播的劇，圖片比較大，單個有303，一行3個，間距也比較寬，目測得有20多吧，特色是分類用的是熱播劇的圖片做分割。單個小模塊是圖片＋加粗節目名稱＋電台名字｜播放時間，這個不同於視頻網站的簡介。在不同分類下的台打開的子頁裡面，前兩屏模塊更大一些，寬有468，所以一行排列兩個，給人的感覺更加的清晰明了，下面的更多模塊與主頁一樣一行3個。
與國內的視頻網站比較起來，itv的ui上圓角比較多給人感覺更加的有親和力，可能也與視頻網站希望給人的輕鬆愉悅的感受有關。在內容上分類更加的少一些，佈局上也不會把主要的內容一起集中在首頁給人感覺非常的滿，它的首頁更加的精煉，在重要的位置上放置了分類，分類子頁呈現更多的內容。
另一點，hover的效果非常明顯，圖片下方出現一條粗的主題色線＋標題也變成主題色，這點比國內的要好一些（國內上面分析的幾家只有騰訊做了hover效果）。
第二种新闻类
bbc www.bbc.com/news
由于是新闻类，最大的不同是文字的板块更多一些，整体也是白色底，最大的宽度1248 ，基本的网格是252x200加上间距加上文字四舍五入的情况下，不明白为什么有小数点。分类直接用黑色加粗和线通一行来分割，非常的简洁，视觉焦点可以落在它的图片上，感觉图片的比例也很舒适，不会觉得很小也不会觉得太大太拥挤。
版面上比较多的变化，几个大的分类是一样的，中间穿插了一个最多阅读的排名纯文字。最上面的第一屏内容可能是为了承载更多的新闻内容，所以并未每个小模块都有配图，这样子就突出了有图片的部分，左侧第一个图片也比较大，视觉上的优先级非常明显，大图>小图>无图。重复分类的那几个左侧大图，右侧小图，不太明白为什么左侧的图文并未占满2个网格大小。
整个网页的底色也是白色，在每一个小的分类上面有一个灰条，大的分类与BBC类似，文字和线来做区隔。版面分为三个小板块和4个小板块两种，第一屏和第二屏变化更加丰富一些。网页最大宽度1100，三栏的时候宽度是353（也有小数点此处省略），四栏的时候255。基本的小模块都是由图片、标题构成，新闻类的属性决定了每个小模块图片下的新闻标题有4个，但并未对对字数做限制，所以会有换行的情况，看上去是参差不齐的。
整个网页的背景是浅灰色，主视觉区1120，小模块为白底卡片式设计wh266X68，一行4个，图片＋标题＋左侧时间｜右侧喜欢评论，图片的左上角会有一些透明黑色的小标签表示分类。第一二屏比较多的模块变化，2个模块宽2个模块高2个模块的文字，用色块来突出重要的区域，mindtalk区域用了不同于主题色的冷蓝绿来突出，视频则用深色的卡片来突出，还有一个亮眼的设计用的分屏式设计：左侧蓝灰色背景加文字，右侧图片。
初看，觉得这个设计有点浪费屏幕，并不是以图片为主的卡片式呈现方式，相反，文字更加的突出。多滑动了几屏感觉体验非常的像用手机，倒也不用左右来回切换，这样的加粗加大的文字反倒有一种大气豪迈的感觉（什么鬼）。第一行用的大行的加粗文字＋第二行左侧图｜右侧上头像名字时间 右侧下简介 作为基本的模块来陈列新闻内容。最引人注意的地方大概是它的第一屏，用了占满一屏的图片和文字来推一个新闻还是很大气的。
设计类图片分享类
dribbledribbble.com/
dribble
浅灰色底，白色底卡片式设计，非常浅的一点阴影，卡片wh219.98X191.98（怎么都要小数点？自适应设置的比例关系？）间隔30，主视觉2000，最大化一行8个，缩小后一个个缩减下去最少2个左侧栏变成汉堡包样式。卡片的内容由图片＋浏览数评论数点赞数，用户的头像和名字没有放置在卡片上而是放在浅灰色背景上，这样一来就更加突出图片。
在hover卡片效果的时候，会出现浅白色蒙板层遮住图片而出现介绍作品的文字标题和一段（限制5行）简介，在下面用户名的后面还会出现teme的小标签，在hover标签的时候底色会变色。在hover过用户的名字的时候还有一个提示框出现团队logo成员的头像和名字一些基本的团队信息。交互的细节还是很丰富的，如果不是专门写，似乎都快忽略了这些小细节了。点击图片是重新打开一个新的页面。
pinterestwww.pinterest.com/
pinterest
总体是用的白色做底，瀑布流的方式来呈现。在hover一个个小模块的时候会出现浅灰的底色，比较的像卡片式设计。宽度236小模块，可以随着屏幕的拉大无限加载，最少一行三个。小模块的元素有图片＋图片名称加粗＋图片的简介＋采集者头像采集者名字采集者简介＋右侧多少人pin的数据，内容有点多，不过并不是每一个卡片都全部有这些内容，很多都没有图片的名称。
hover图片或简介的时候会自动填充下侧的白色背景为灰背景，左右两侧也扩充出一些灰色的区域，在图片的顶部会出现分享、喜欢、保存到画板、more的icon。hover不同的地方，中间还有一些细微的差别，hover图的时候图片区域会多加一层透明的浅黑色层，显的更深一些，如果只是hover简介文字那一段则图片的底部会有一个渐变的黑色透明层，hover头像那组信息的时候是单独的浅灰色背景显示可以链接（去该采集者的主页）。还有一些比较细小的细节，如图片底部居然有一个采集原网址的一行文字可以直接去到对应的网站，采集来源的那个文字也是可以直接链接去采集的那个画板去的，如果不注意似乎并不会太注意到这些小行的文字也是可以链接的，可以理解为这是为熟练高级用户设计的？分享的按钮用的是非模态的弹框，直接在下方出现浮框。more的双圈小icon点击一下，在这个图片的周围就会变成跟这个图片相关或者相似的一些图片（关键词或者画板的筛选）。点击图片的话出现的是一个模态的弹框，貌似除了一些信息更为详细有更多的相似图片推荐之外，我看主页已经能实现全部了吧，hover大法！
bechancewww.behance.net/
behance
与dribble一样，浅灰底色，卡片式设计，不过它的卡片的阴影更重一些。卡片wh202X292，主视觉宽1546，最多一行7个最少一个然后简介移到右侧。卡片的内容图片＋作品名＋作者名＋分类＋赞｜浏览数｜推荐日期的icon。
hover图片的时候，图片上有一层白色的透明层，作品名称加下划线，鼠标变成手的时候右侧还会有一个小的作品名称的提示，个人感觉这个提示有点多余，滑过作品名称的时候和滑过图片的时候是一样的效果，滑过作者名字的时候会有一个小的非模态提示框显示作者的头像近期的作品关注按钮等一些简单的元素，当是多个作者的时候会出现几个作者的列表排列，分类的文字也可以直接链接去相应的分类，这些小细节也是需要特别主要才能注意到，按照之前的使用习惯，基本看到感兴趣的图片就直接点击进去看详情了，看详情跟pinterest一样也是模态的弹框形势，不过更大一些，右侧没有一个叉叉按钮。
zcool
今天打开发现已经改版，记得之前是用线去做小模块的分割的，主题色黄色也没有以前那个深了，现在也变成了浅灰底色和白色底色的卡片式设计结合的了，上面的几个大分类的分割也是用的色块的区分也蛮眼熟的dribbble。主视觉1380，卡片wh260X345，一页最多5个最小尺寸的时候也是5个，但每个卡片的宽度进行了缩小，变成wh210X308。卡片的内容图＋作品名称＋分类＋浏览数｜评论｜赞数＋作者头像名字时间，作品的名字限制在一行多出的用省略号，时间也会被替换成推广或商业活动的小icon。
在滑过图片的时候会加上一层浅白色层，滑过作品标题的时候文字的颜色变成红色（新增的主题色？）滑过作者头像或名字的时候会出现一个非模态的小弹窗出现作者的头像名字关注数粉丝数关注按钮这些基本信息。这个地方比起上面几个倒是少了一个分类的链接。
pandausepanda.com/app/#/
这是一个订阅类型的网站，因为结构上与要做的项目非常像所以也拿来重点参考了。这种布局是工具类软件经常用到的，像outlook邮件、腾讯云、阿里云，顶栏和侧栏固定导航，中间是内容区，避免了过多的跳转，能够让用户更方便的切换功能使用产品。
整体白色底，顶栏白色底通栏，右侧有几个功能的小icon浅灰色底，然后下面一条左右分栏的浅灰色功能区，之所以分栏，是因为针对的区域不同。左侧的搜索可以搜订阅的栏目，设置可以添加及删除订阅，添加是一个新页面。右侧能够对当前订阅的内容做一些更加具体的设置，如有些网站有following，还能选择更新内容的时间是当日还是过去式。然后左侧订阅栏的底色还是白色，选中为浅灰色，右侧的内容区域底色也是白色。整个页面还是蛮清爽的，因为左侧订阅的有图标，内容区域也很丰富，所以页面并不会因为简单清爽而显得简单，削弱不必要的导航功能到更好的突出了中间的核心内容区。像dribbble这样的内容平台在点击内容区（图片）以后还是会跳转到原网页，而像一些新闻类型的则在中间又多加一个列表区，右侧显示具体的内容，个人觉得这种还是蛮方便的。
这里还是重点分析下图片居多的设计。同样是采集dribbble的内容，却是采用的不同与它的设计，以白色底为主，图片排的较为密集也更大一些，去掉了卡片式设计，单单只展示图片，并且在图片上加了描边，dribbble原本的一些功能，如浏览数点赞数这些则是通过hover的方式去呈现的。一行最多的时候展示6个图最少3个，随着屏幕的拉大每个图片也相应的放大，缩小的时候图也相应的缩小，可以说是按照一定的比例在变化的，而间距保持一致。
麦芽
麦芽是以前一个关注的设计公司出的一个网站，非常喜欢它们的设计。属于大设计（设计艺术生活方式时尚什么的）范畴里面的一个以图片展示为主的网站。去做分析当然不仅是因为比较喜欢这个网站还因为它的设计方式对要做的项目有比较大的参考意义，就是图片下面的内容其实并不是非常整齐的，一行当中会有突出的部分，但它用一个固定的间距可以容纳更多或者更少的方式去解决的。
整个网站也是白色底，中间的内容部分小模块图片+大粗标题+小日期+简介+标签，与其他这种类型网站不同的地方是，一般这种小模块都会限制标题字数在一行多少字以内然后超出的部分就用省略号表示鼠标上移的时候出现全部，尽量每个模块保持整齐，然后这个网站比较特别，标题有1行也有2行，简介有2行也有3行，就连标签页游2行和3行的差别，突然发现有的简介是在第2行打省略号有的第3行，所以难道是故意而为之？（我太年轻。。）
hover图片的时候图片会加上一个透明黑色图层，hover标签的时候浅灰色底的标签会变成黑色底。这个跟老外的那些网站比起来就没有什么幺蛾子了，毕竟它算是主动筛选的给用户的内容，而不是用户产生内容，所以没有那么多的链接点。
straightlinebm.straightline.jp/
straightline
这是一个日本的一个以收集网站为主的网站。不同与前面的网站白色底或者浅灰色底，这个用的是深黑底，同样是卡片式设计，卡片为比底色更深的深黑色底。卡片的内容图片+网站名字+date日期+stats使用数|喜欢数+action保存|加入到喜欢，卡片的下面的空白比较多，大概是为了舒缓这种图片为主的布局。
hover图片的时候会加上一层浅黑色图层，click图片则直接进入该网站。hover stats后面的内容的时候在左侧弹出弹框可以看见具体的用户头像，click action后面的save会有弹框出来具体的选项然后保存，add to favorite则是直接在当前显示保存的过程转圈圈然后变成delete form favorite。
顶部的筛选做的比较细致，可以参考。有编辑精选、全部、我的书签、我的喜欢这几个分类，下面还有一个标签tags list的分类，点开是一个浮层，有按颜色、类型、语言／网站技术、布局这几个具体的分类。右侧还有可以调大调小卡片展示尺寸的设计，非常人性化的筛选选项。
网友评论