UI中的设计样式-图片流
什么是流：多个物品按照特定规律依次排列，这种呈现方式称为流。
我们在生活中常见的书柜、橱窗的排练形式就是一层一层分列下来，物品整齐且重复展示。那么应用到设计中，我们也参考这样的设计样式，将元素依次整齐排列，并且重复显示。
图片流介绍：
图片流的展现方式主要以图片为主，满足用户快速对图片进行筛选和浏览的需求。引导用户滑动页面，增加滚屏率，引流分支。出现场景主要在一级页面。
图片流设计细节：
突出重点功能
在综合页面采用图片流设计时，把重点功能突出显示，如：搜索功能。
由于主要以图片内容为主，那么页面的功能就比较单一，此时对于用户要寻找的内容我们需要明显的突出出来。可以采取背景填色使搜索框突出，或者给搜索框加上弥散阴影，突出功能。在整体排版上极简去线大留白，页面干净简洁。
多元化排版
在排版上避免整个设计都采用同一种设计方式，造成视觉效果审美疲劳。可以采用多图模块组合，防止单调，大模块包含小模块，交互上搭配X轴（横向）展现方式，丰富页面视觉效果。不过这里需要注意的是，X轴交互时一般我们在一级页面使用，而且要低频次使用。二级页面尽量不要使用，因为这与返回按钮（左上角）交互重合，很多产品交互往右滑动时也会有返回效果，容易造成误操作，不宜使用。
多模块排版展示：
卡片内容区域，高度变与不变
当图片区域高度固定时，排版整齐，方便对比，适合用于电商、直播平台，这样更利于用户方快速筛选内容；当图片区域高度不固定时（交错排版），展示完整，灵活布局，适用于展示图片为主的平台，例如花瓣，壁纸，这样的平台图片有横有竖，有长有短，方便图片的多尺寸展示。例如淘宝（右）和花瓣（左）：
智能场景分配图片
当用户经常性使用平台查看图片以后，后台数据可以根据用户喜欢和常看内容进行喜好匹配图片，千人千面的设计方式，有利于留住用户，符合用户预期心理。
例如网易云音乐的“每日推荐”和QQ音乐的“喜欢”，以及淘宝的首页推送宝贝，很好的解释了这一点。虽然那里并不是说图片的推送，但是我们同样可以采用一样的符合用户心理模型的方式推荐图片内容。
弱化文本信息，减少图标、标签元素的干扰
我们说图片流主要展示的就是图片为主的设计样式，那么图片内容肯定是重点，图片的辨认效率肯定远远大于文字的辨认。如果模块之间图标和标签内容过于显眼，肯定会干扰到用户，分散视觉注意力。
常见的图片流设计样式都弱化了图标和标签一类元素的展示，而只是简单的写明用户名称和图片简介一类的文字信息，并且弱化文字。下面是堆糖的界面，无论是推荐大人的动态主页还是分类图片展示，文字信息都没有过多的展示，而是给图片留有大量空间去展示：
总结：
图片流是主要以图片展示为主，满足用户快速对图片进行筛选和浏览的需求。我们在设计产品时要分析好产品定位，适用于哪一种方式来设计，快速找准符合用户预期心理模型的设计，才能为产品提高良好的用户体验，留住用户。
图片流的设计方式今天就简单介绍到这里吧，有需要补充或者更正的欢迎留言探讨。
如果您对我的文章感兴趣，欢迎关注微信公众号“U点计”，每周更新2-4篇设计干货文章。
网友评论