图文设计中那些值得学习的套路

本文介绍了影响图形设计的集中类型、用户阅读顺序和几个要素。 网上有很多关于图文结合设计的讨论 ，各大产品的用法不同，但也符合各自产品的定位。只要产品模块中有，Feed流量将涉及到图形和文本组合的设计，以及如何更合理地设计图形和文本。多的是用户的阅读顺序，这确实是一个非常关键的原因，但如果用阅读顺序来解释，不符合顺序的设计并非不合理。 就像男人看女人的顺序，脸，胸，腿，你知道吗？ 女人看男人的顺序完全相反。高度往往是第一印象，发型是否蓬头垢面，衣服是否脏，然后看起来，如果有以下细节来看言行。 为什么人与人之间的差距这么大？ 对设计师来说，阅读顺序也太难了。事实上，阅读顺序可以通过设计细节来指导。让我们来看看图片和文本设计的几个顺序。 一、图文设计类型 图片设计的顺序有四种，左图右文，左文右图，上图下文，上图下图。不同的产品根据其表达的焦点选择相应的排列方法。 左图右文 视觉重心是图片，对图片的要求稍高，图片不能吸引用户，可能会对转换产生一定的影响。用户优先反馈图片，然后看标题，所以图片有一定的代表性。 最合适的产品类型是具有商品属性的产品。用户的视觉重心首先看到商品图片；然后是使用频率最高的社交产品。作为高识别度的载体，喜欢换头像的学生很容易崩溃。 可见左图右文设计的优势截然不同，合适的产品场景也很明显。 左文右图 视觉重心仍然是图片，但用户的阅读顺序是从左到右，首先看标题文本，如果标题不吸引人，用户看到图片有吸引力，也会产生二次转换，真正产生转换的前提必须是用户感兴趣。 因此，这种设计方法特别适合信息推荐流，但特别适合，并不是说信息产品不能使用其他方法。事实上，具体或通过设计细节来权衡，下面将总结设计细节模块，然后做详细的描述。 上图下文 作为另一种不同于左右结构的设计形式，在多图、大图、视频的封面设计中，图片的视觉水平越来越高，图片的质量对引导用户是否有阅读兴趣有很大的影响。 图片必然会被赋予更重要的意义，封面上表达了许多核心标题。更适合图像相册、艺术欣赏、视频等产品设计。图片质量高，欣赏性强。 上文下图 用户的阅读顺序自上而下。与上图和下图的设计相比，标题被用户优先阅读，但标题不是唯一的决定因素，也会受到图片的影响，因为大图片的呈现通常是一个屏幕，占很大比例，对用户有很大的视觉影响。 优点是标题内容吸引用户，占据用户的心理模型，会产生先入为主的优势。这种设计非常适合信息文章中的多图、短视频和大图呈现产品。 二、用户阅读顺序 古腾堡图表 古腾堡图表又称对角线平衡，其设计理念起源于约翰内斯·古腾堡图表古腾堡。 在这种模式下，眼睛通常从左上角浏览到右下角，缺乏注意力的右上角和左下角被称为视觉盲点。 阅读重力是由于视线往往从上到下，从左到右，左上角是第一个视觉立足点，右下角是最终的视觉立足点，所以右上角和左下角是一个强烈的视觉盲点区域，其中大多数很容易被忽视。 古腾堡图表倾向于呈现用户的眼动规律，体现设计层次的重心。 F字形 Web尼尔森，易用性大师（Jakob Nielsen）2006年提出F型视觉模型 ，他指出，当用户第一次观看页面时，视线将呈F形，从顶部从左到右移动，从左到右观察，但长度将相对较短，以较短的长度向下扫描，形成一个 F形状。 很多页面的热图都可以证实，但是我们发现F字形的阅读顺序很容易受到设计层次的影响，偏向于网页端。 Z字形 移动终端经常会遇到双列信息流设计，眼睛从左到右移动，在视线移动到右上角后沿着斜对角向下移动，然后视觉再次向右移动。视觉运动的轨迹就像字母Z的形状。 Z字体往往是在移动端，双列图文组合的设计类型，用户的视线来回切换，会对沉浸式体验产生一定的影响。 影响设计的因素 从图形和文本设计的四种类型和用户的阅读顺序中发现，影响用户阅读顺序的并不局限于这些原则。这些原则太容易被设计细节的指导和变化所打破，也是左右文本。设计指导形式的变化会影响用户的阅读顺序。 例如，我们左图右文的形式设计，左图加上圆角、比例缩小、间距扩大、卡片设计等。，可能会影响信息层次的顺序。总结以下影响视觉层次的设计细节。 卡片 卡片设计可以使信息水平显得孤独，并立即脱颖而出。它大大降低了受其他信息干扰的水平。在移动栏设计中，周围卡的形式更加独立，栏卡形式的水平是，但如果卡设计成两列，则会呈现上述Z形布局。 留白 Feed在视觉的基础上，流之间的空白越多，信息呈现的转化效果越好，干扰的影响就越小。这里的空白主要表现为上下分离之间的空白，空白较大，单个信息的沉浸感越强。 比例 图片所占比例的大小反映了用户视觉焦点的比例。图片的比例越大，用户的视觉负担就越重，对文本的影响就越大。华丽的图片集可以直接切割内容的焦点，更大的图片比例可以突出优势，否则需要降低比例，突出内容。 字体 除了上面提到的图片和文本，文本排列的大小、颜色和对齐可以导致不同的视觉呈现。此外，通过增加注释来加强用户对内容的理解，图片表达了强烈的视觉影响，图片背后的故事可以通过注释带来更多。 线条 作为上下文之间使用最多的分界线——如果使用较少，整个界面将显得愚蠢和不清楚。如果你使用更多，它会显得太重，不够简单。 因此，线条一直是设计最考验的元素之一 —— 栏目线分割线具有较强的阻断性，栏目标题具有较强的意义；两侧留出间隙的分割线增强了平行连续性；留出图片，只划分文本区域，以提高用户的指导属性；在线的开头留出间隙栏的结尾，以加强和引导用户操作进入细节。 圆角 圆角在设计中被引用越来越多，使用圆角更友好。因为人眼往往更容易处理圆角，直角更锋利，生活中有很多角容易碰撞，现代家居需要做倒角。用户对圆角的接收程度较高，带圆角似乎代表了设计细节。直角传导到视线是静止的，圆角的光滑角度更容易引导视线传输。 互动 在Feed在流的设计层面上，还有更小的元素，如评论、共享、作者信息等。但它起着核心的互动指导作用，内容裂变的价值在于产生互动沟通。用户的互动行为也需要设计来指导，这可以突出设计的意义。 四、写在最后 用户眼睛的阅读顺序受设计所呈现的视觉重心的影响。图形和文本的设计形式不超过四种。利用用户的阅读顺序，通过改变设计细节，改变视觉重心的指导水平，使产品体验设计更符合产品定位，传递给用户的信息更加完善。 作者：VV微信公众号体验：VV体验 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营伙伴提供便利。本网站收集的公共内容来自互联网或用户的贡献，这并不意味着本网站同意其观点，也不对网站内容的真实性负责。如有侵权行为，请联系网站管理员删除，。