很可惜 T 。T 您现在还不是作者身份，不能自主发稿哦～
如有投稿需求，请把文章发送到邮箱tougao@appcpx.com，一经录用会有专人和您联系
咨询如何成为春羽作者请联系：鸟哥笔记小羽毛（ngbjxym）
网上有很多关于图文结合设计的讨论 ，各大产品的用法也不尽相同，但又符合各自产品的定位。在产品模块中只要有Feed流都会涉及到图文结合的设计，图文到底怎么设计更合理。讨论最多就是用户的阅读顺序，这确实是非常关键的理由，但如果都用阅读顺序来解释的话，不符合顺序的设计岂不是都没有道理。
就好比男人看女人的顺序，脸、胸、腿、还有，你懂的？而女人看男人的顺序却截然相反，高度往往是第一印象、发型是不是蓬头垢面、穿着是不是脏兮兮的、然后才到长相、如果有下文还要看言谈举止的细节。人和人的差距咋就这么大呢？阅读顺序对设计师来说也太难了。其实阅读顺序是可以通过设计细节引导的，我们先来看图文结合设计的几种顺序。
图片设计的顺序无外乎4种，左图右文、左文右图、上图下文、上文下图。不同产品据其所表达侧重点的不同选择对应的的排列方式。
视觉重心是图片，对图片的要求稍微高点，图片没能吸引用户，对转化可能会产一定的影响。用户优先对图作出反馈，然后才会看到标题，所以图片具有一定的代表性。最适合的产品类型莫过于具有商品属性的，用户的视觉重心先看到商品图片；再就是使用频率最高的社交类产品，头像作为一种高识别度的载体，容易让人崩溃的是喜欢换头像的同学。可见左图右文设计的优势泾渭分明，适合的产品场景也显而易见。
视觉重心仍然是图片，但用户的阅读顺序是从左往右，先看标题文字，标题如果不吸引人，用户看到图片吸引人，还会产生二次转化，真正能产生转化的前提还得用户感兴趣才行。所以说这种设计方式特别适合资讯推荐流，只是特别适合，不是说资讯产品就不能采用其它方式。其实具体还是通过设计细节来权衡，下文会总结出设计细节模块再做详细的讲述。
作为区别于左右结构的又一种设计形式，在多图、大图、视频的封面设计中最多，聚焦到图片的视觉层级变得更高，图片的质量好不好，对引导用户是否产生阅读兴趣的影响很大。图片势必被赋予了更重要的意义，好多核心标题都被表达在了封面里。比较适合影像相册、艺术鉴赏、视频等类型的产品设计中。图片的质量很高，鉴赏性也很强。
用户的阅读顺序自上而下，相比上图下文的设计，标题被用户优先阅读的层级更高，但标题不是唯一的决定因素，也会受到图片的影响，因为大图的呈现往往是通屏，占据的比例很大，对用户的视觉冲击比较大。好处就是标题内容吸引到用户，占据用户的心智模型，会产生先入为主的优势。这么设计很适合资讯文章中的多图、短视频、大图呈现类产品形式。
古腾堡图表又叫对角线平衡，设计理念源于约翰内斯·古腾堡的古腾堡图表。在这个模式中眼睛通常会从左上角到右下角浏览，缺少注意力的右上角和左下角被叫做视觉盲点。阅读重力是由于视线趋向于从上到下，从左到右的眼动规律，左上角是第一视觉落脚点，右下角是最终视觉落脚点，所以右上角和左下角都是一个强烈的视觉盲点区域，大多数是容易被忽略的。古腾堡图表趋向于呈现用户的眼动规律体现出设计层级的重心。
Web易用性大师尼尔森（Jakob Nielsen）于2006年提出了F型视觉模型 ，他指出了用户在第一次观看页面时，视线会呈现F字形，由顶部开始从左到右水平移动，目光下移开始从左到右观察但是长度会相对短些，以较短的长度向下扫视，形成一个 F形状。很多页面的热力图和可以证实，但我们发现F字形的阅读顺序很容易受到设计层级影响，而且偏向网页端。
移动端经常会遇到双列的信息流设计，眼睛从左向右移动，在视线移到右上角后沿着斜对角向下方走，然后视觉再次向右移动，视觉移动的轨迹就像字母Z形状。Z字形趋向于在移动端，双列图文组合的设计类型，用户的视线来回切换，对沉浸式体验会产生一定的影响。
从图文结合设计的4种类型和用户的阅读顺序中发现，影响用户阅读顺序的并不局限在这些原则中。这些原则太容易被设计细节的引导变化而打破，同样是左图右文，设计引导形式的改变，就会影响到用户的阅读顺序。比如我们以左图右文的形式设计，左边的图片加上圆角、比例缩小、间距拉大、采用卡片设计等等方式，都可能会影响到信息层级的先后顺序。总结出以下几点影响视觉层级的设计细节。
卡片设计可以让信息层级显得茕茕孑立，瞬间脱颖而出。大大降低了受其它信息干扰的层级，移动通栏设计中四周卡片的形式独立层级更强，通栏卡片形式的层级次之，但如果卡片设计成两列就会呈现上面的Z字形布局。
Feed流之间的留白，在符合视觉的基础上，留白越多，信息呈现的转化效果越好，受到干扰的影响越小。这里的留白多表现为上下分隔之间的留白，留白大点，单条信息的沉浸感越强。
图片占据比例的大小，反馈出用户视觉聚焦的比重。图片比例越大，用户的视觉负担就越重，对文字的影响就越大。绚丽美艳的图集可以直切内容重心，图片比例大一点更能凸显优势，反之就需要降低比例，凸显内容。
图文结合除了上面说到的图片还有文字，文字排列的大小、颜色、对齐方式都能引导出不同的视觉呈现。还有通过增加注释来加强用户对内容的理解，图片表达出强烈视觉冲击力，图片背后的故事可以通过注释更多的带入。
线条作为使用最多的区隔上下文的分界线。用的少了，整个界面会显得傻傻分不清。用的多了，又会显得出手过重，不够简洁。所以线条一直都是最考验设计的元素之一。通栏线条分割线阻断性比较强，栏目标题的意味比较强；两边留出空隙的分割线加强了并列的延续性；留出图片只分割文字区域提升了用户的引导属性；线的开端处留出空隙通栏结尾，这样的线条加强引导用户操作进入详情。
圆角在设计中被引用的越来越多，使用圆角更友好。因为人眼趋向于更容易处理圆角，直角比较尖锐，生活中也有很多角容易磕碰到，现代的家居都需要做倒角。用户对圆角的接收程度更高，带上圆角似乎就代表了设计细节。直角传导给视线是静止的，而圆角的圆滑角度更容易引导视线传递。
在Feed流的设计层级里，还有更小号的元素，评论、分享、作者信息等元素。却起到了最核心的互动引导作用，内容裂变的价值在于产生互动传播。而用户的互动行为也是需要设计去引导的，这样更能凸显设计的意义。
用户眼动的阅读顺序受制于设计所呈现出来的视觉重心。图文结合的设计形式种类无外乎4种，利用用户的阅读顺序，通过设计细节的变化，改变视觉重心的引导层级，从而使得产品体验设计更符合产品定位，传递给用户的信息也更完善。
本文为作者独立观点，不代表鸟哥笔记立场，未经允许不得转载。
《鸟哥笔记版权及免责申明》 如对文章、图片、字体等版权有疑问，请点击 反馈举报
测一测
正确
正确
正确
正确
Powered by QINGMOB PTE. LTD. © 2010-2022 上海青墨信息科技有限公司 沪ICP备2021034055号-6
我们致力于提供一个高质量内容的交流平台。为落实国家互联网信息办公室“依法管网、依法办网、依法上网”的要求，为完善跟帖评论自律管理，为了保护用户创造的内容、维护开放、真实、专业的平台氛围，我们团队将依据本公约中的条款对注册用户和发布在本平台的内容进行管理。平台鼓励用户创作、发布优质内容，同时也将采取必要措施管理违法、侵权或有其他不良影响的网络信息。
一、根据《网络信息内容生态治理规定》《中华人民共和国未成年人保护法》等法律法规，对以下违法、不良信息或存在危害的行为进行处理。
1. 违反法律法规的信息，主要表现为：
1)反对宪法所确定的基本原则；
2)危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一，损害国家荣誉和利益；
3)侮辱、滥用英烈形象，歪曲、丑化、亵渎、否定英雄烈士事迹和精神，以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉；
4)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动；
5)煽动民族仇恨、民族歧视，破坏民族团结；
6)破坏国家宗教政策，宣扬邪教和封建迷信；
7)散布谣言，扰乱社会秩序，破坏社会稳定；
8)宣扬淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪；
9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序；
10)侮辱或者诽谤他人，侵害他人名誉、隐私和其他合法权益；
11)通过网络以文字、图片、音视频等形式，对未成年人实施侮辱、诽谤、威胁或者恶意损害未成年人形象进行网络欺凌的；
12)危害未成年人身心健康的；
13)含有法律、行政法规禁止的其他内容；
2. 不友善：不尊重用户及其所贡献内容的信息或行为。主要表现为：
1)轻蔑：贬低、轻视他人及其劳动成果；
2)诽谤：捏造、散布虚假事实，损害他人名誉；
3)嘲讽：以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述，以此来激怒他人；
4)挑衅：以不友好的方式激怒他人，意图使对方对自己的言论作出回应，蓄意制造事端；
5)羞辱：贬低他人的能力、行为、生理或身份特征，让对方难堪；
6)谩骂：以不文明的语言对他人进行负面评价；
7)歧视：煽动人群歧视、地域歧视等，针对他人的民族、种族、宗教、性取向、性别、年龄、地域、生理特征等身份或者归类的攻击；
8)威胁：许诺以不良的后果来迫使他人服从自己的意志；
3. 发布垃圾广告信息：以推广曝光为目的，发布影响用户体验、扰乱本网站秩序的内容，或进行相关行为。主要表现为：
1)多次发布包含售卖产品、提供服务、宣传推广内容的垃圾广告。包括但不限于以下几种形式：
2)单个帐号多次发布包含垃圾广告的内容；
3)多个广告帐号互相配合发布、传播包含垃圾广告的内容；
4)多次发布包含欺骗性外链的内容，如未注明的淘宝客链接、跳转网站等，诱骗用户点击链接
5)发布大量包含推广链接、产品、品牌等内容获取搜索引擎中的不正当曝光；
6)购买或出售帐号之间虚假地互动，发布干扰网站秩序的推广内容及相关交易。
7)发布包含欺骗性的恶意营销内容，如通过伪造经历、冒充他人等方式进行恶意营销；
8)使用特殊符号、图片等方式规避垃圾广告内容审核的广告内容。
4. 色情低俗信息，主要表现为：
1)包含自己或他人性经验的细节描述或露骨的感受描述；
2)涉及色情段子、两性笑话的低俗内容；
3)配图、头图中包含庸俗或挑逗性图片的内容；
4)带有性暗示、性挑逗等易使人产生性联想；
5)展现血腥、惊悚、残忍等致人身心不适；
6)炒作绯闻、丑闻、劣迹等；
7)宣扬低俗、庸俗、媚俗内容。
5. 不实信息，主要表现为：
1)可能存在事实性错误或者造谣等内容；
2)存在事实夸大、伪造虚假经历等误导他人的内容；
3)伪造身份、冒充他人，通过头像、用户名等个人信息暗示自己具有特定身份，或与特定机构或个人存在关联。
6. 传播封建迷信，主要表现为：
1)找人算命、测字、占卜、解梦、化解厄运、使用迷信方式治病；
2)求推荐算命看相大师；
3)针对具体风水等问题进行求助或咨询；
4)问自己或他人的八字、六爻、星盘、手相、面相、五行缺失，包括通过占卜方法问婚姻、前程、运势，东西宠物丢了能不能找回、取名改名等；
7. 文章标题党，主要表现为：
1)以各种夸张、猎奇、不合常理的表现手法等行为来诱导用户；
2)内容与标题之间存在严重不实或者原意扭曲；
3)使用夸张标题，内容与标题严重不符的。
8.「饭圈」乱象行为，主要表现为：
1)诱导未成年人应援集资、高额消费、投票打榜
2)粉丝互撕谩骂、拉踩引战、造谣攻击、人肉搜索、侵犯隐私
3)鼓动「饭圈」粉丝攀比炫富、奢靡享乐等行为
4)以号召粉丝、雇用网络水军、「养号」形式刷量控评等行为
5)通过「蹭热点」、制造话题等形式干扰舆论，影响传播秩序
9. 其他危害行为或内容，主要表现为：
1)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好影响未成年人身心健康的；
2)不当评述自然灾害、重大事故等灾难的；
3)美化、粉饰侵略战争行为的；
4)法律、行政法规禁止，或可能对网络生态造成不良影响的其他内容。
二、违规处罚
本网站通过主动发现和接受用户举报两种方式收集违规行为信息。所有有意的降低内容质量、伤害平台氛围及欺凌未成年人或危害未成年人身心健康的行为都是不能容忍的。
当一个用户发布违规内容时，本网站将依据相关用户违规情节严重程度，对帐号进行禁言 1 天、7 天、15 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号，或者滥用多个帐号发布违规内容时，本网站将加重处罚。
三、申诉
随着平台管理经验的不断丰富，本网站出于维护本网站氛围和秩序的目的，将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议，可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)