修改导语：怎样做好列表页的信息展现，让用户能够愈加明晰地获取信息，在供给用户更好的视觉和运用体会时，推进用户的下一步操作？你能够运用多种办法，如留白、切开等，树立合理的视觉展现结构。本文作者便做了相应总结，一同来看一下。在列表页规划信息时，面临多种视觉结构时该选用哪种比较适宜的疑问，考虑以下了问题：用户是怎样有用认知信息？信息运用哪种视觉容器，能更好体现不同信息之间联系的意图，以及在阅览与运用时能带给用户更好的体会？由于手机屏幕尺度有限，怎样再添加屏效？笔者接下来会按以下办法来叙述：为什么需求信息收拾；列表页信息安排办法有哪些；规划留意；总结。一、为什么需求信息收拾？考虑一下在界面中，当信息以一种无序的摆放，和信息以结构化的摆放比较，为何大多数的界面都挑选了后者。规划师在规划信息怎样在界面展现时，都在考虑怎样运用户更快了解然后发生下一步操作，本篇文章剖析与总结了信息怎样经过有用结构化展现，来掩盖各种场景，运用户体会愈加流通，来和读者一起讨论。用户怎样认知信息？用户在看到界面的时分，会无意识在考虑“哪里最重要”，接着就会考虑“与它有相关的信息有哪些？”等等问题，所以咱们在规划界面时，应经过树立适宜的视觉层级以及不同信息之间的联系，来处理用户所遇到的问题。1）树立层级：首要经过字体、字体巨细、粗细、色彩来差异层级（文章经过会结合详细实例来解说）。2）树立联系：为了传达信息之间的联系，比方说上部属联系：菜单栏标签A与标签下方的内容a便是上部属联系，能够经过视觉上的安排与空间上的安排进行规划。视觉上的安排：视觉上感触信息之间的联系首要是经过挨近性、相似性、连续性，一起布景等办法。空间上的安排：单页面空间里，人一般有从左至右、从上至下的阅览习气的次序。二、列表页信息安排办法有哪些？1）列表页单个容器内信息的组成部分有标题、辅佐信息、图片/icon、控制按钮、提示信息等。标题与辅佐信息在信息层级上，一般经过规划规范的不同字号、色彩和粗细来差异层级。信息联系上首要运用格局塔原理之一——挨近规律，进行信息分组。 挨近性原理是指：物体之间的相对间隔会影响咱们感知它们是否以及怎样安排在一同。相互挨近（相对其他物体）的物体看起来归于一组，那些间隔较远的就不是。辅佐信息在运用时，为了进步屏效会有字数最长约束规范，当逾越期，选用的缩略办法有：结束切断、中心切断。结束切断：当逾越约束时，逾越字数常用“…”来代替躲藏内容，比方段略文本常选用办法。中心切断：保存最初和结束，在文字结束规范字数处切断，除了缩略文本外，还关于过长且称号前部分类似的信息，经过结束部分的文字进行差异。辅佐信息：也还能够经过不同的对齐办法与标题文字进行差异，展现内容一般是来对跳转的二级界面进行解说阐明，防止用户关于标题的发生误解，而发生的不点击行为或许误操作。控制按钮：一般是提示用户，这部分是可点击交互的模块，不是静态信息。所以操作提示一般可作为中性、或活跃操作暗示。操作提示可分为：按钮、按钮加文字、文字或没有，可依据内容意图选用对应办法，比方说，当在营销活动时，可选用：文字：“当即购买”、或许文字“当即购买”?icon，或许内容区信息过多可选用：icon，或许不必按钮暗示，由于卡片的结构办法现已暗示用户可点击的操作行为。2）多个容器的安排办法 在列表页，当多个容器平铺在一个界面时，内容之间的差异首要经过明晰信息所属容器，然后到达差异与安排不同信息的意图，常用的办法有：留白：运用了不同的间隔来安排不同的信息，其所带来的阅览的沉溺感强。线：首要经过明晰了容器的鸿沟，然后到达信息差异的作用。色彩容器：比较于用线，色彩色彩会更显着来差异不同的容器自身。卡片：运用容器构成独立主题，来差异信息，适用于信息层的多的，能更杰出卡片内的信息。布景切开：使多样的信息能安排成模块，进步视觉信息功率。详解（信息安排办法实际运用时，常常是混着运用，但笔者为了更好叙述，以下叙述是独自适用的事例）：1. 留白经过留白来切开不同的容器，首要是运用上述提到的挨近行规律。归于同一容器内的信息，相对间隔就会近一些，不同容器的信息就会相对远些，比方说：阿里云盘页面。留白来安排容器在被阅览时，用户留意力将更多的放在信息上，而更少会留意到容器的存在，只要单个容器在滑动时才干看到容器鸿沟，阅览时的沉溺感更强。 视觉上带来的感触也是简练的，信息呈现的更偏扁平。留白运用的办法：1）容器的结构有信息?留白、或许留白?信息的巨细，减少留白面积，进步屏效。2）留白?信息?留白，这是最常见的运用办法。当留白切开的容器内信息层级较多时，一般会用“图/icon”来安排每个容器的信息，容器之间的留白间隔要大于信息与“图/icon”的间隔，一般来说，大于等于2倍间隔时，才会发生比较明晰的差异。在考虑到留白巨细时，“图/icon”内部或许会呈现白色部分过多等极限状况，其成果或许会运用户在阅览时，关于信息所属容器发生歧义，比方说：产品列表页。留白作为固钉的适用：将页面元素钉在可视规模。当页面内容过长，需求翻滚页面时，这部分内容对应的操作或许导航需求在翻滚规模内一直展现。比方说：支付宝基金排行页面“挑选按钮容器”。当页面信息层级过多时，留白会跟着信息层级的增多而增多，屏效也会随之下降，假如减少留白面积，信息的结构又会呈现不明晰，所以或许会运用第二类安排办法。2. 线为了防止上述问题，也会经过切开线来明晰容器鸿沟，以到达差异不同容器的意图。线切开有：直线、虚线、文字?直线。水平直线切开容器结构：容器?线、线?容器、线?容器?线（留意：线在容器内部，顶对齐或许底对齐）。一般为了到达更少招引用户留意力意图，通常用较浅的色彩，更轻量的切开款式。在营销界面运用时，则或许不会这样运用。部分线切开容器，部分切一般适用于子层级或更小层级的差异。 线切开容器作为固钉的运用的事例有微信的：当定制群数量逾越一屏时，“折叠顶置谈天”的容器就固定在来底部，用线来明晰差异不同容器。3. 虚线切开为了减轻直线在阅览时招引留意力的现象，特别但容器在许多容器高度较小，假如都选用了显着的切开线，虚线切开或许是更少涣散用户留意力的安排办法。但常见的界面里用直线切开较多，笔者以为：1）虚线在生活中一般常用于暗示可裁剪的部分，所以关于虚线的感知比较于直线，会运用户发生其它了解。 比方说：B站年度常识共享官评选界面。2）当运用虚线后，怎样差异于直线的运用规矩，特别是其它组件现已运用直线的状况下。笔者剖析假如会运用虚线时，或许就作为特定时刻点呈现的功能模块，而且会在必定时刻后消失，而不是与直线相同作为常呈现的切开办法。3）当容器内信息以文本为主时，当虚线选用部分切开，对齐文字最初而不是界面边际时，虚线反而没有起到差异容器的作用，看起来像是阶段的切开。带文字的切开线：可分为居中，或许左对齐、右对齐，比方说支付宝“基金转化页面”。营销页面会转化运用，比方说：京东的百亿补助界面。4. 色彩容器在留白界面运用色彩明晰能展现了信息所属容器，信息在色彩容器里具有了一个一起的布景，视觉层级上更能招引用户的留意力，在运用时要考虑色彩运用的意图。展现同级但更重要的信息，与留白差异。比方说：微信“顶置谈天”。展现重要信息，比方说：支付宝基金“持仓页面”。也常用于偏营销页面的表头，来引导界面信息。比方说：支付宝基金的“新发基金”正告提示，当某个页面需求向用户显现正告的信息时。在交互行为上，色彩也常用于选中状况。
5. 卡片容器结构：四周留白?卡片容器，最根底的卡片容器，可承载文字、列表、图片、阶段，常用于概览页面。卡片的模块明晰的展现了容器的视觉鸿沟，用户很简单差异不同的信息，在体系概览页面常常和栅格进行合作。卡片分区可承载一个层级分区、多个层级列表等结构。比较于上两个信息展现办法、卡片会更简单辨认卡片内容。卡片的巨细依据信息来设定规范款式，比方说支付宝“出资热门”，把热门信息，用一致的卡片来承载不同的热门信息。卡片由于设定了规范款式，假如是选用轮播切换内容，卡片以下跟从内容在轮播时就不会发生颤动，比方说支付宝：用固定的卡片巨细，来承载不同的banner页面。卡片在承载信息上：支撑多样的内容的装备，且信息之间的分类强 在考虑款式时，当考虑了到信息的极限状况，假如不同卡片放置不同类型的内容，卡片内的留白肯能会有不相同的状况，跟着产品展现信息的增多或许改变，都能够放在容器内，可拓展性性强。卡片在与用户的交互上。点击区域变大、用户操作更便利。能够对卡片或许卡片内部信息进行更杂乱的手势操作，比方说对卡片进行拖动等手势。卡片容器在结构上，四周多了一段布景留白。卡片与上述安排办法，屏效相对来说下降，一起在页面中，容器都运用相同规范的卡片款式时，容器的巨细一般都会依据极限承载最多、最少信息的为规范，所以部分卡片容器承载信息就会相对较少，所以就会发生不同程度的留白。比方说：微信读书页面。怎样在运用时添加屏效呢？不同信息选用不同规范的容器巨细，比方说支付宝的界面。由于屏幕有限，所以考虑逾越屏幕的办法，将信息叠起来，比方说上述提到的容器内轮播等。6. 布景切开比较留白能依据内容进行模块化分类，进步模块功率，且能够作为规范使用到其他页面上。比照卡片容器，布景切开面积相对来说并不是固定的，且左右两头没有留白，横向能承载更多的信息，需依据场景挑选适宜的办法。三、规划弥补在规划时要防止歧义，信息规划时的结构要坚持一致性，优先选用先已有的办法，假如某个新功能不运用，或许版别全新迭代时，再运用新的安排办法，更重要的是了解规划方针，不要盲目运用。关于着重：本文章虽然是从留白到切开线在到卡片，叙述的办法是越来越着重信息，但是在实战中，比较着重信息来到达杰出信息层级的作用，“调低”不重要的信息所到达的作用，反而会更好。由于全都着重等于没有着重。四、总结本文谈及到的是大类的信息安排办法的结构化办法，提到的也是运用留意，去考虑为什么运用这种办法，其实不同安排办法，在用户阅览时所带给用的阅览与运用体会也是不相同的，我们假如考虑到其它方面也欢迎在谈论区弥补。参阅：《交互规划精华4》《认知与规划——了解UI规划的原则》《移动使用UI规划形式》Antdesign本文由 @奶茶是有剧毒的 原创发布于人人都是产品司理，未经许可，制止转载题图来自 Unsplash，根据 CC0 协议
