整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
片文章介绍了三种Feed流中的图片布局：宫格式布局、拼图式布局、瀑布流式布局。
之前看了一篇文章：《Feed流设计：哪些谋杀你时间的APP》，通过Feed流可以让用户不停的刷信息，从而留住用户更多的时间。在仔细研究你还会发现越来越多的APP都有Feed流，而且它们的图片布局也不相同。
如果你没有对其有深入研究，你根本不知道遇到这种页面该如何设计。
下面通过查询资料和对比不同的APP后，我将Feed流中的图片布局总结起来有三种：
宫格式布局也就是九宫格布局，多用在社交类的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都用到瀑布流的形式，其优势就是让用户不停的刷，缺点就是用户很容易漏掉信息，因此这种适合泛浏览类的页面。
参考链接：
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的显卡跑游戏，现在越来越多的是，某果的发布会看了吗？
越来越多的用户“道具”，促使我们要去画更多的，用户的“道具”皮肤，也就是我们“俗称”的界面。
在设计不同的“皮肤”时，我们可通过考虑以下几点设计方法，来区分他们。
Web网站 – 鼠标操作 VS 移动App – 手指场景的局限造成了，使用电脑成本会高一些，相对按钮位置的精确度会更高（在触摸大屏还没出现的时代，我们操作鼠标来实现点击）。
而移动设备，随时随地动动手指就可以了。
我们要注意预留点击区域，控制可点击内容的艰巨性。
（1）使用场景不同
两端的阅读范围及内容长度偏重的也因此不同。
（2）文字大小
Web设计 ：比较随意，文章正文字体12px/14px；页面安全区域1080px～1280px为宜（一些展示页面字体会做到16-20px或更大）。
App设计：正文30-34px,最小可用28px;注释及提示行文字20-24px，最小不小于20px。（具体字数根据24px-36px的字体大小，以及页边距来定～）。
（3）Banner
相对PC端的位置固定，用户会在一个相对平缓的环境浏览页面，状态也会更为专注。误点击的概率小，更多的会讲究反馈速度和信息的精确度，用户比较多的是收藏正页面而不是单独的段落。而移动端用户因为场景多变，很多时候会利用走路，坐车的实际去浏览界面，更容易产生误操作，也更容易对页面内容产生疲惫感。
Web设计：一般对于界面的通知中心,位置相对固定，但较为隐蔽，用户使用的不多,很难主动唤起用户。
这里设计师需要做的，是将自动呼出的弹窗提示和漂浮窗口这类的“强制”、“粗鲁”的提示形式。（经常被运营要求加个活动飘窗，价格在线客服，这类令人反感的交互方式。）
通过一些，相对“隐蔽”、“固定”、“委婉”的方式及摆放位置，在不影响用户阅读的前提下进行提示交互。
App设计：最常见的是系统自带的推送通知，用户可主动关闭通知，当然也有嵌在页面内的，因为屏幕限制，所以相对网页更加突出，设计师需要思考如何让用户更容易“开启通知权限”。
针对不同设备用户的不同习惯，我们在定义两端的交互内容时也要有所侧重，我们会选择性的对一些内容进行隐藏，也会针对设备区分同一功能的交互方式。比如：两端同样的收藏动作，Web用户比较多的是收藏整页，而不是单独的段落；因此用户会较多使用“收藏夹”、下载等方式。
而对App用户因为切换应用容易被打断操作及阅读环境的限制，除了选择一些App自带的“稍候阅读”功能外，“截屏”保存或长按收藏就比较实用了。
平台，会在两端分别给用户不同的功能侧重。就好像工作时间会更优先pc端去处理事情，这是因为，PC端能够更好的拆解我们的需求，因为需求不同界面的侧重功能也会不同。
比如：我们会有在平台编辑文章并配图、排版发布平台的需求，但是在两端同时体验操作后发现，App任务发布的复杂程度让用户难以理解。往往一个Web页面就能完成的事情App端需要2-3个页面才能完成，加上大段的文字内容需要编辑，以及网络状态原因，让发布任务变得很艰难。
因此，很多App就会拆分两端的用户需求，将商家更多的引导去Web去上架货物;消费者则侧重于App，同时界面会根据不同端“藏”去一部分的功能。
因界面分辨率的差异化，我们也会隐藏一些需求度较低的内容元素。比如：我们常说的面包条菜单，其实就是把Web上常规的Menu，适应智能手机的操作和显示特性而做出的变化。
Web网站：以鼠标或触摸板为操作媒介, 常用交互方式有左击、右击、hover鼠标滑过几个操作方式，对应这些操作的web端可以将隐藏的元素，（比如解释类文字，及子菜单等）可以在鼠标hover时或是点击后才展示出来。
移动App：因为实际面积更手指触控的关系，App常用的交互方式有，手指点击、滑动、捏合等各种复杂的手势。同时在App设计时，多遵循用选择代替输入，因此设计师需要更多整合信息，并隐藏一些焦点外的内容。
（1）提示
通用-小红点、提示气泡、文字字重及变色、展开收起常用提示性符号。
（2）内容收起Web网站
点击下拉、hover下拉。
移动App：滑动拖出内容
Tips：我们在“藏”的时候要注意，移动App以单手操作为主，界面上重要元素需要在用户单手点击范围内，或者提供快捷的手势操作。
Web使用的是Wifi或是电缆等无限量的高速网络，而App则是移动网络或是Wifi，网络环境相对复杂。应对这些不同网络环境对应的网络速度，我们可以通过分页区别化和加载区别化来提高用户的体验。
Web网站：一般都是点击进入链接后从0开始加载，也因为网络稳定的“先天”优势，读用翻页符号来解决分页问题，也有一些以支撑的网站选择使用“瀑布流”的方式替代分页。
比如，花瓣、蘑菇街这类“看图”的网站，因为搜索后的数据格式相同，用户对同一内容兴趣关注度大，停留对比时间较长，所以优先使用“瀑布流”。
移动App：因用户使用环境复杂（可能在移动过程中从通畅环境到封闭的信号较差的环境,网络可能从有到无、从快到慢）。所以和网站有区别的是，我们一般通过用户主动下载、更新的方式来加载主要框架；实时的数据信息则是在用户打开App后通过当前网络加载，也因为网络不稳定的劣势，很少有翻页符号来区别每页，反复刷新加载会造成等待时间较长。
Tips：注意图片大小 -加载图片是对数据流量和网速的“巨大”考验，因此，我们在一些运营类的项目或者是商场图片时，尤其是App图一定要记得压缩。我们可以用到tinypng.com等在线压缩图片的工具进行压缩，也要提醒开发小哥哥发版前记得压缩图片。
最后是网络环境，因为两者各自网络环境的优劣势，我们在做页面布局设计的时候也要作出相应的调整。
虽然现在Web端的网站等在慢慢的被弱化，连鹅厂都放弃了Web端的QQ，但是作为UI设计师，对于Web端的基本工还是不能放弃啊～至少App战胜不了后台系统！
参考链接：
本文由 @Quines 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
近关于大屏的项目做的比较多，目前手头项目结束，有时间将内容整理分享，基于目前手上的某省监狱项目做可视化大屏规范分享希望能对大家有所帮助。
数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。
上述文字来自百度百科，做了许多大屏之后，可总结大屏分为信息展示、数据分析、监控预警三大类。利用屏幕大可展示信息多的特点，将复杂、抽象的内容通过可视化更加直观的方式，以易于理解的形式帮助人们更好决策。
一般产品经理需要想清楚大屏展示的内容动线，需要给观者讲述什么故事，由于视觉展示往往也起着决定性作用。所以在需求分析排布时设计师需要提前加入项目中了解项目需求，以展示问题解决问题为目标将业务模块理出顺序。
平时利用Eagle这款图片收藏软件很好的帮助我在需要灵感素材时快速上手。
关键词：FUI \ HUD \ SCI-FI
设计网站：behance、dribbble、站酷、Tob.design、UI中国、花瓣、pinterest
业务场景：智慧园区、智慧安防、智慧交通、智慧城市、智慧监狱、智慧水利、智能客服、智慧仓储、智慧医药、智慧零售、智慧工业、数字港口、智慧工程
数据可视化最终落地平台一般有① 大屏、② 拼接屏、③ LED大屏、④ DLP大屏（无缝隙拼接市场占有率较高）、⑤ LCD、⑥ PDP（3mm拼接缝隙）需要清除了解大屏物理尺寸及视频输出分辨率，确定设计稿尺寸。
根据需求内容及硬件尺寸确定页面布局方式，以下布局为常用布局方式，在实际工作中可能会遇到相同的需求内容会展示在不同比例的大屏硬件中，这时将设计稿的设计尺寸高度固定，地图宽度自适应，用一个设计稿一次开发解决不同尺寸适配问题。
将抽象的需求用图表的形式展示，一般图表分① 比较类 ② 占比类 ③区间类 ④关联类 ⑤ 趋势类 ⑥ 时间类 ⑦ 地图类。
不同展示内容选用不同形式的图表，但有时候为了视觉效果丰富，不会在一个大屏里显示相同的图表展示方式，这时需要了解图表特性与需求内容将图表差异化展示。并在项目积累到一定程度时整合图表库以便于下次项目快速设计避免重复工作。
一般大屏设计与开发尽量选择自带字体微软雅黑，数字字体选用din，特殊字体可将字体包给到开发嵌入程序中。
由于甲方客户多为政府机关，字体要求也会比较大一些，16px为正文字号，最小字号14px，在设计时对这些规范灵活应用。
颜色选用应以信息展示清晰为最基本要素，在主次清晰的情况下选择视觉效果较舒适的颜色搭配，在此之前需要了解大屏的显色模式，在不支持渐变色的情况下尽量避免渐变色的使用。
在演示搭配时选择“631”搭配原则，页面中60%使用主色调，30%使用辅助色调，10%使用对比色调。
在前端调用一些现成图表组件时候，添加一些背景组件能够丰富画面，增强页面层次。
以下是几种组件的展示样式供大家参考，这里也感谢组内小伙伴@梁祝。
（1）屏幕投射效果不佳
如果条件允许的情况下应当设计前先用已经完成的不同风格的大屏设计在屏幕上投放，了解颜色差距，对比色临近色渐变色在大屏上是否存在色差，如若效果不好应适当避免效果差的设计方式。
（2）等比例放大投射会发虚问题
首先需要明白几个概念：①大屏逻辑分辨率（设计分辨率）② 显卡输出分辨率 ③ 视频矩阵切换器（DVI）支持分辨率 ④ 大屏实际物理分辨率 。
当显卡输出分辨率=DVI支持分辨率时显示效果最佳，另外多个信号源投射优于单个信号源投射 。
（3）大屏显示被拉伸或压缩
一般情况下，前端只需要对设计稿还原就好，可能由于视频扩展器显示不正确导致压缩或拉伸，现在需要了解被压缩的比例，对其进行校正，再者可以通过视频自定义分辨率解决问题。
（4）图表类样式参考及实现
图表工具：echarts、hichcharts 。第三方开发工具：datav数据可视化、腾讯云图、百度智能云。原生开发：HTML5、JS、CSS、WebGL、unity。
本文由@宋佳 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自Unsplash， 基于CC0协议
*请认真填写需求信息，我们会在24小时内与您取得联系。
