早期的设计主要靠感觉和审美，慢慢的设计越来越讲究方法论和心理学，以后还可以再加一种，那就是依靠数据，它将让每个人都能获益。本文将从什么是好的运营设计出发，分析运营设计师如何通过设计语言去帮助运营活动提升数据的思路与技巧。拓展阅读：如何高效完成运营设计？

早期的设计主要靠感觉和审美，慢慢的设计越来越讲究方法论和心理学，以后还可以再加一种，那就是依靠数据，它将让每个人都能获益。本文将从什么是好的 运营设计 出发，分析运营 设计师 如何通过设计语言去帮助运营活动提升数据的思路与技巧。

拓展阅读：

如何高效完成运营设计？大厂高手总结了这3个方面！ 前言 在现如今的社会中，每天都有各式各样的商战。

阅读文章 >

什么是好的运营设计？ 对于很多设计师来说，设计的好不好看？风格独不独特？专业表现力如何？在设计领域里有没有开创先河？可能是更看重的。而对于业务方来说，活动的数据好不好？市场反应如何？能否在此成功案例基础上建立一个成功的商业标准？是业务方更看重的。

设计师追求的是运营活动的设计品“质”，而业务方则更追求的是运营活动数据“量”，各有侧重点，但如果只纯粹的追求一面，那肯定是不确切的。好的运营设计，应该是“质”和“量”两者兼具，在保证设计专业性的同时运用视觉语言吸引用户参与活动，达到多流量、多曝光、多转化等目的，从而帮助业务提升商业价值，才称得上好的运营设计。简单讲，有“质”有“量”的设计才是好的运营设计。

运营设计应该关注哪些数据“量”？ 正常的 DAU、MAU、CTR、CVR、GMV，我们都需要理解这些数据代表的含义；但有一点需要注意，数据跟设计的影响关联度到底有多大，因为有的数据不一定是设计改动就会带来的，而是诸多其它因素变动导致的。那影响活动数据“量”的因素有很多，如投放渠道、投放时间、活动成本、产品价格，口碑、玩法以及页面的适配性、流畅度等等都有关系。

常见 数据指标 ：

用6个章节，帮你掌握常见的数据指标和数据分析模型 一文读懂设计师应该懂的数据指标和数据分析模型。

阅读文章 >

举个例子，用户的活跃数据，比如日活 DAU 与月活 MAU，往往跟内容与服务本身的质量有关系。设计很难影响到活跃度，用户并不怎么会因为你的设计，而特地跑过来瞄两眼，除非你的设计也是属于内容的一部分；所以这块需要你自己多想想，把其中的因果关系梳理清楚。所以，我们的更多精力，往往可以放在点击率 CTR 上，这个才比较能代表，你的设计是否能吸引到用户点击，是否能吸引到用户进入详情页消费。

那是不是提高了资源位/落地页的点击就一定能提高业务转化？

并不是，提高点击可以说是变相提高了曝光，意味着有更多的销售机会，但下单转化是受很多方面的因素影响的，单纯提高点击其实不一定能提高销售转化，但正如上所述，我们能通过设计上的一些小小的“技巧”来帮助业务创造更多的机会，正是我们运营设计的价值。所以对于运营设计来说，着重需要关注的是前两层，资源位和落地页的点击率 CTR。那今天我就举几个小例子，分享一下帮助业务创造更多机会的设计小技巧：

资源位 1. 版式结构

针对 banner 图中，左边放文案/商品哪种点击更好而进行测试

测试结果显示手机类新品广告是左边放商品，右边放文案的效果更好，具体原因是什么？我们可以先看看其他类目的测试情况。

其他类目包括美妆、家具以及虚拟类等等，均是左边放文案，右边放商品点击更高，这时我们再看看具体原因究竟是什么。

首先有一个前提，人类的阅读惯性是从左至右、从上至下的一个过程。对应我们的 banner 来说，自然是左边区域的信息更容易被用户接收得到。基于这个前提，我们再看回案例。

以上数据内容引自分期乐广告研究所

首先左边是推新品手机的广告，手机类有什么品牌，有什么新品上市，关注这块的用户都比较了解（品牌方早已有铺天盖地的宣传），这时先看图就知道是不是他们所需要的，也就是说左边放商品的识别成本更低，于是点击会更好；而其他类目或卖场活动由于品牌十分繁杂，缺少知名爆款，用户其实是很难会被商品图吸引的。用户更多是先看有什么优惠，然后再进去看看有没自己喜欢的，这时候左边放文案的识别成本更低，点击也就更高。因此不同类目的用户诉求不同，应根据用户的需求来决定版式形式。

2. 设计形式

之前商旅有一个系列化的运营活动-差旅图鉴城市篇，会根据不同城市属性，介绍优质的酒店内容，引导用户预订。为了能体现系列化，在设计上，采用相同的设计风格，以此来帮助用户培养活动心智。

广州篇上线之后，点击率不错并高于平均点击。但当北京篇上线后，数据呈现下滑趋势，而且低于平均数值。在合肥篇上线前，复盘了数据回落的原因：

1）视觉较为相似，容易引起用户视觉疲劳。

2）城市名太小，用户容易忽略，以为是同一个活动。因此合肥篇 banner 在设计形式上以极简的文字放大并突出城市名字再加上醒目的按钮来测试点击效果。

没想到合肥篇上线后，点击率飙升，并超过之前其他城市篇的点击数据，大大超出预期。当资源位点击率遇到瓶颈的时候，不妨试试改变下设计形式，说不定是一个突破口。

3. 动效

在实践中我们发现，用户对动态的元素关注度是最高的，其次是色彩最后是明度。

通过合理的优先级规划，可以有效的吸引用户注意力，让他们关注设计师想让他们关注的东西。在 banner 中，行动点按钮优先级最高，所以可以采用动态按钮，成为用户最关注的东西引导他点击。

我们在携程商旅的入口进行动效按钮的首次尝试，通过和过往 banner 平均点击率对比，动效可显著提升点击率。

落地页 在设计移动端的落地页面时，一定要注意首屏主图高度的设置。常规的主图一般高度都定在 600px-750px 左右，余下一屏能展现的内容区域有限。如果将头部高度缩短，从而用户也可以在首屏看到更多信息，引导用户有兴趣向下滑动。于是我们将主图高度缩减到 550px。

2. 分割线符号化

视觉分割线是一种布局元素，有助于将主图和内容区清晰划分。使用分割线的目的在于使布局变得清晰，更易于用户理解。我们将携程商旅的 logo 为基础图形进行创意演变，和分割线相结合，为品牌营销传播制造抓手的同时也能和其他竞品产生视觉差异化。

3. CTA 按钮位置

CTA，Call to Action，行为召唤，是一种营销术语。用普通人类语言说，就是通过一些形式（通常都是按钮）让用户采取下一步行动，通过提升点击率来进一步提升转化率。能够为产品带来正向价值的按钮（关注、支付、下单、订阅等）都是 CTA 按钮，因此，作为页面中的 CTA 按钮，优先级是最高的。

根据@Josh Clark 屏幕拇指原则，将按钮放在屏幕底部可以有效降低点击行为所消耗的成本。通常一屏内无法放满所有的内容，如果放在第二屏甚至长图末尾，对点击来说是大打折扣的。所以对于 CTA 按钮，一般都采用吸底处理。

3 月底上线的促开通「对公支付」的活动上，我们按照以上三点设计策略进行了落地页规范化设计，并在 CTA 按钮上增加了动态的效果有效的吸引用户注意，帮助页面提升点击率。

如何提高CTA按钮的点击率：

学会这3个方面，帮你提高CTA按钮的点击率 怎样设计 CTA 按钮，能够增加点击率和转化率呢？

阅读文章 >

落地页设计，常见的页面信息结构：主图+内容区，主图：主副标题+氛围图；内容区：模块平铺/叠加，做设计之前就需要对页面中的内容进行布局的规范化，包括 logo 位置尺寸等等，有助于我们更清晰的表现画面内容和层级的划分，给用户带来一致体验和品牌感知。

呈现效果

写在最后 无论是用数据指标做效果衡量，还是用数据指标进行问题判断和原因锁定，客观公正的态度和科学的实验方法都是最重要的。

数据相关的知识体系非常复杂，甚至需要有专职的数据分析师或用户研究员参与，文中列举的是一些基础的数据分析，或许不太全面，也是个人阶段性的心得总结，不足之处请多包涵，欢迎大家一起讨论。

欢迎关注作者微信公众号：「TripDesign」

大家好，这里适合你们聊设计的花生~配色想必是很多新手设计师和插画师都觉得比较难的一部分，的确，学习配色要靠长期积累，我们不仅要掌握色彩原理知识，还要多浏览学习优秀的配色，然后运用到实际的设计绘画的过程中，总结出自己的配色技巧和经验。今天就为大家推荐 5 个非常实用的色彩灵感网站，可以帮助我们更快的找到符合自己要求...

大家好，这里适合你们聊设计的花生~

配色想必是很多新手设计师和插画师都觉得比较难的一部分，的确，学习配色要靠长期积累，我们不仅要掌握色彩原理知识，还要多浏览学习优秀的配色，然后运用到实际的设计绘画的过程中，总结出自己的 配色技巧 和经验。今天就为大家推荐 5 个非常实用的色彩灵感网站，可以帮助我们更快的找到符合自己要求的 配色 方案，并提升对色彩的感知力和掌控力。

往期回顾：

配色找不到感觉？这个PCCS色彩体系帮你从根本上解决！ 可能很多小伙伴都有这样的感觉：对色彩的各项概念已经非常了解，日常积累了很多优秀的色彩搭配素材及作品，也有进行临摹训练，但是自己在面对一个新设计命题时，却依旧无法准确选出最贴合主题的颜色，各种配色试来试去都不是自己想要的感觉。

阅读文章 >

一、Adobe Color 网站直达： https://color.adobe.com/zh/create/color-wheel （需要魔法）

Adobe Color 是 Adobe 公司开发的专业色彩灵感网站。如果只看它的首页，会觉得它只能用来寻找和谐配色方案，但它有两项经常被忽略的色彩功能：探索和趋势。

Adobe Color 的“探索”功能可以让设计师按关键词搜索配色方案。比如在搜索框内输入 Cyberpunk，网站就会推荐很多相关的图像，并自动生成其的配色方案。配色方案可以下载为 JPG，右上角还有筛选器，可以按色卡、艺术作品、摄影照片来筛选内容。从绘画的角度来说，这种方式能帮助我们快速找到指定风格或场景的参考图片及配色方案，比自己先找参考图片、再提取照片配色更高效。

“趋势”则是从 Behance 和 Adobe Stock 中抓取最新的图像内容，提取其配色方案，并按时尚、UI、建筑、插画、风景、美食等进行分类呈现。如果你觉得的自己在色彩方面的感知力较弱，不如多到这里逛逛，既能迅速了解不同行业最新的色彩趋势，也可以获取高质量的配色灵感。

二、Color leap 网站直达： https://colorleap.app/home

Color Leap 是一个记录不同年代作品色彩的网站，包含公元前 2000 年至 20 世纪 60 年代间的 12 个年代。点击主页的年代标签，进入后可以找到多套符合时代特色的配色方案和代表作品。多了解不同年代的配色风格，可以加深我们对色彩含义的了解，提升对不同配色风格的掌控能力。

色彩时光机！可查询每个时代流行配色组合的 Color Leap 每个时代都有代表的文化和呈现样貌，如果对于一些绘画或摄影作品有研究，可能也会发现不同年代会使用的颜色也大不相同，当然这牵涉到许多层面，就不在本文深入探讨了。

阅读文章 >

三、Google Palette Art 网站直达： https://artsexperiments.withgoogle.com/artpalette/ （需要魔法）

Google Arts and Culture 和世界各地超 2000 间博物馆达成合作，拍摄它们馆内的艺术作品并上传网上用户欣赏。又在此基础上推出 Google Palette Art，利用电脑视觉演算技术分析并标记了这些作品的配色，让用户可以通过色卡来搜索艺术作品，

在 Google Palette Art 上可以随机生成一组 5 种颜色的方案，然后得到所有类似配色的作品推荐。颜色是可以修改的，每修改一次推荐的艺术作品也会随之改变。我们还可以自己上传图片，网站会提取其中的 5 种颜色并推荐类似的配色作品。

在 Google Palette Art 内我们不仅可以搜索配色灵感，提升艺术审美，还能了解作品背后的艺术知识。将鼠标悬停在作品卡片上，会有一个「更多详情」的选项，点击后会跳转到作品的介绍页，里面有作者信息。点击作者名称，就能跳转到艺术家主页，里面有艺术家的生平介绍、代表作品和作品故事。

四、Designspiration 网站直达： https://www.designspiration.com/

Designspiration 是一个类似 Pinterest 设计灵感网站，但它可以通过色彩搜索站内的 设计灵感 。Designspiration 会自动为每个作品生成一组色卡，点击色轮可以查所有使用类似配色的作品，包含插画、平面设计、摄影照片、建筑等多个方面。色卡的颜色可以独立调整，我们也可上传自己喜欢的作品，用这种功能查询所有类似配色的灵感。

spiration 在主页搜索栏右侧有一个调色盘小图标，点开后是一个调色板。我们可以在上面选择至多 5 种颜色，然后搜索以这种配色为主的所有灵感。这个网站非常适合刚开始学习设计或插画的小伙伴，如果在配色阶段被卡住了，可以先选一两种颜色进行搜索，过程中根据推荐的作品随时调整颜色，直到找到符合自己需求的配色。

五、Palettemaker 网址直达： https://palettemaker.com/

Palettemaker 是一个免费的在线配色预览网站，它可以随机生成配色方案，或者根据一种配色方案生成 100+ 配色灵感，以及将配色实时应用到不同的设计模板上，模板包括 UI 界面、插画、排版、图案等。

如果你突然有一个配色灵感，可以将其复制到 Palettemaker 当中，看看实际应用的效果如何。因为配色效果是实时呈现的，我们可以根据感觉一点点修改直至自己满意为止，然后在这个过程中总结色彩搭配的经验和技巧，积累多了对色彩掌握能力自然会有提升。如果是想迅速获得配色灵感，就可以使用它的 “Generator”功能，选一种颜色让 Palettemaker 推荐灵感，然后从中挑选自己喜欢的。

以上就是本期的色彩灵感网站推荐，非常适合设计师和插画师日常浏览使用。喜欢本期推荐的话请大家多多点赞收藏进行支持，我会更有动力为大家推荐干货知识。有关于本文或者设计的问题可以在评论区提出 ，我会第一时间回复~

推荐阅读:

看电影学审美！5款超实用的电影拉片资源 大家好，这里是和你们聊设计的花生~ 之前为大家推荐了 8 位 B 站上值得关注的电影拉片 UP 主，可以帮助大家了解电影拉片的基本知识。

阅读文章 >

2023年，让这20款AI工具帮你更高效地完成工作~ 2023年，让这20款AI工具帮你更高效的完成工作~ 大家好，这里是和你们聊设计的花生~ 2022年是AI技术大发展的一年，我都快记不清为大家推荐多少种AI工具了。

阅读文章 >

编者按：为什么所有的好莱坞科幻电影当中，用户界面看起来都是一样透明、蓝色 UI 乃至于全息投影？这种风尚是如何流行开的？它们对于未来的 UI 设计有影响么？

编者按：为什么所有的好莱坞科幻电影当中，用户界面看起来都是一样透明、蓝色 UI 乃至于全息投影？这种风尚是如何流行开的？它们对于未来的 UI 设计有影响么？目前 全息影像 发展到什么程度了？如果你厌倦了近期关于 AIGC 的持续热炒，不妨来看看 资深 UX 设计师 Daley Wilhelm 关于全息影像、未来 UI/UX 的探讨 。

AR 和 VR 诞生前，人类的视觉增强探索史 编者按：在 AR 和 VR 这类设备诞生之前，人类为了增强视觉进行了几千年的研究和探索，这些探索的产物如今成为了我们日常生活中稀松平常的事物，但是它们同样重要。

阅读文章 >

托尼史塔克像抓住真实物体一样握住虚拟物品

科幻电影喜欢炫耀技术的巨大飞跃。最新的《阿凡达》电影中，蜘蛛型自走机器人可以在数周内搭建一整座城市，在人体冷冻技术加持下，飞船可以将人类运送到数光年以外的地方。在詹姆斯卡梅隆的想象中，我们可以将记忆下载，上传到新的身体当中，所有这些极为先进的技术都是通过可触摸的、透明单色的的全息影像来进行控制的，而这个和好莱坞其他很多科幻电影中的界面如出一辙。

阿凡达

当我们透过科幻电影窥见未来的时候，我们看到的是无所不在的语音助手，超凡脱俗的可穿戴设备和大量的全息影像和3D交互。在这其中，不知道是出于何种原因，这些全息图几乎全都是蓝色的，漂亮地悬浮于桌面上方，每个路过的人都能看到。这种未来派的 UI 设计一直都令我困惑，因为它看起来很酷，但是实际并不实用。不过，好莱坞电影似乎极度痴迷于这种被蓝光包裹的未来科技。

星球大战中莱雅公主的全息投影

也许这种好莱坞设计公式源自于最早、最有影响力的科幻题材电影星球大战系列。星球大战当中许多科幻元素为后来者提供了灵感，而后续的很多作品会自然而然在前辈的基础上沿袭设计。《阿凡达》系列电影当中，对于蓝色全息影象就有着明显的偏爱。

什么是全息影像 我们先重新回顾一下好莱坞对全息影像的呈现形式。通常在电影当中，全息影像有两种形态，平面全息图和立体全息图。平面全息图其实早已出现，从平面的3D效果收藏卡到舞台上的初音未来全息图，都属于这种平面全息影像。而在科幻电影当中，投射到透明屏幕上的界面，也同属于这类。

初音未来

然而，立体全息影像则截然不同。顾名思义，它是立体的，占据空间体积的，那么我们要如何让光占据特定的空间，并且拥有三维立体的物体一样的「特征」？如何让光线停留在特定的地方而不是继续向前投射？

而这正是物理学家 Daniel Smalley 这样的人所研究的课题。受到星球大战中莱娅公主的立体投影的启发，他已经能够通过激光击中纤维素粒子，在空中形成立体的 3D 蝴蝶轮廓，这个技术上的飞跃意味着全息影像已经成为可能，但是距离钢铁侠手中可以交互、随着手掌转动的立体投影太远，实在是相形见绌。乐观点预测，我们有可能在 10 年内看到一些拥有体积感、尺寸更大的全息影像，但是现在它依然是科幻电影和小说里供人想象的未来。

最初打破常规的是《星际迷航》 值得注意的是，最初打破这种使用全息影像「惯性」的是早期的《星际迷航》系列的电影和剧集，影片中 设计师 采用了浓郁 60 年代设计语言的扎实显示屏。

然而此后剧集和电影重启的时候，又折返回去采用好莱坞的未来感全息 UI 界面，舰桥上悬浮着蓝色基调的全息影像 UI 界面，最新的 USS Discovery 当中，船员不再能够透过硬质屏幕和敌舰视频语音，所有人直接在全息影像频道里实时通话，还能便捷地进行战斗调动。

然而如果真的要细抠设定的话，USS Discovery 的剧情所在时间段相反发生在柯克船长掌舵之前的事情，但是看起来技术相反更加先进，不过星际迷航粉对此倒是有一番详细解释，只是实际上主要原因还是好莱坞影视产业的发展的必然结果。

好莱坞对于全息影像呈现的着迷是理所当然的，更加炫酷的视觉效果是必然的趋势。复古的黑蓝橙色如今也被蓝色和白色为主的色调所取代。

漫威电影重塑了范式

设计蜘蛛侠套装的界面就是经典的蓝白光影

漫威的科幻电影如今比以往任何时候都要主流。是的，这些包含令人难以置信的未来技术的超级英雄电影被归类为科幻。甚至雷神所使用的魔法也已经被堂而皇之被解释为「被误解的科学」，而这也进一步推动漫威将蓝白色全息投影界面普及到整个漫威扩展宇宙。

总部位于纽约的设计公司 Perception 是漫威电影中钢铁侠各色技术的创意源头。每当神盾局的尼克福瑞局长在和全世界领导人争论的时候，其实都是 Perception 的设计师在背后加班熬夜。当蜘蛛侠在设计战衣的时候，也是 Perception 的设计师建模渲染，并且操控哪些全息影像，而真正决定瓦坎达技术风格走向和未来感是否充足的，同样是 Perception 的工作人员。根据他们创意总监 John LePore 的说法：

「了解电影所处的是哪个阶段以及技术所属的阵营，对我们而言是很重要的。它是否属于军队？如果是，那么我们需要添加更加扎实和实用的感觉。它是否是量产并且市售的产品？如果是，那么它需要有更加友好的界面。它是否是钢铁侠那样专业人士所使用的设备？如果是，那么它所拥有的界面就会高度的个人化。」

案例研究：Tony Stark 的界面设计

钢铁侠打开了太多的标签页

钢铁侠 Tony Stark 是亿万富翁，天才发明家，花花公子，也是慈善家，但是他同样是一位专业的用户界面和用户体验设计师。他设计的界面是适合他自己的，并且有着非常具体的需求，但是由于他本身同时也是科技企业的负责人，这也意味着他所设计的界面会在更广阔的世界当中使用。

接下来，我们按照时间顺序来看看 Tony Stark 的用户体验设计，以及它们在漫威宇宙中的演变。

钢铁侠1（2008） 除了制造 MK I 的阿富汗山洞，这是 Tony Stark 的工作区域技术含量最低的版本。很多跑车被放置在这里，桌面上的 Mac 显示器显示着繁复的界面，他可以透过语音来命名人工智能 Jarvis 辅助操作：

他还有一支笔一样的交互工具，方便他将屏幕上的设计文件直接拖放到桌子上，以全息影像的方式呈现，并且可以与之交互：

在 2023 年这种技术还无法实现。而其中最科幻的部分，就是他可以直接用手抓取，或者将特定的组件挑选出来，揉碎删除。

Tony Stark 的这种展现方式，和如今的 HoloLens 2 在 AR 触觉领域的探索类似，也许我们和这样的交互方式已经非常接近了。

钢铁侠2（2010） 在第二部当中，Tony Stack 在国会听证会上，突然拿出的全透明手机，同样出自 Perception的设计，而这种想法也一度让现实世界中的科技企业感到兴奋，三星甚至专门参考电影中的内容，起草了一些关于透明手机的专利文件。

在这个场景中，Tony 使用这个手机直接入侵了现场的电子设备。

Perception 设计了一款带有透明玻璃的咖啡桌，Tony 轻拍两下即可启动，整个交互逻辑和我们日常使用触摸屏是高度一致的，滑动，缩放，虚拟键盘，当然，还有典型的蓝色透明界面：

其实这类投影触摸屏本身并不算什么新鲜技术，它们可以使用摄像头、AI 感知来确定指尖的位置。另外，在发现新元素的场景当中，Tony 大量使用了手势交互来操控立体全息影像：

钢铁侠3（2013） 在《钢铁侠3》当中，传统显示器彻底被淘汰了。Stark 的实验室中，所有的信息呈现都已经使用全息影像了。这使得 Jarvis 所控制的投影区域比以往任何一部都要大。

在这一部当中，Stark 使用全息影像重现了整个爆炸犯罪现场，在此过程中，Tony 穿行在全息影像中，使用极其详尽的数据分析寻找线索，找到罪魁祸首，他甚至不得不跳到工具箱的顶部，才能鸟瞰整个镜像，与此同时，大量的辅助信息的窗口、新闻报道和数据在空中交错，提供信息支持。

使用整个房间来作为全息影像的载体是惊艳的，我们没有除此之外更好的范例，这中技术也许可以借助如今的虚拟现实技术来进行类比，但是全息影像无疑更加惊艳。

复仇者联盟（2012）之后 进入新阶段之后，Stark 大厦当中每个屏幕都已经是交互式的全息影像了。即使是离开自家实验室，在神盾局的天空母舰上，基于透明屏幕的平面全息影像也无处不在。

近期上映的《黑豹2》当中，Shuri 的实验室里面也全都是全息影像，有2D的也有3D课交互式的。

瓦坎达的普通民众使用的个人终端也不是我们熟知的智能手机，他们使用的是 Kimoyo 念珠手串，接听电话进行沟通的时候，这个小巧的念珠会让信息以3D全息影像的形式呈现出来。

为什么好莱坞偏爱全息影像

《银翼杀手2049》中的超大型全息影像

电影当中为什么会使用全息影像和透明界面？问题的答案其实是显而易见的。全息影像在体验上更加直观，比起在手机上来回切换要更加令人愉悦，即使沟通的对象和你不在一个星球上，也同样可以面对面地进行沟通，这种无视空间且直观的沟通方式，毫无疑问是炫酷的。

为什么是透明的界面和蓝色的光影？除了因为本身看起来足够具有科技感，而且也便于拍摄。但是从用户体验的角度来审视，全息影像受到如此青睐也是符合逻辑的。

这种科幻美学符合预期 不管全息影像在好莱坞是如何衍生出如此多丰富多彩的呈现，它现在已经成为了未来技术的一个代名词。《银翼杀手》《星际迷航》《阿凡达》全都是针对未来的幻想，科幻作品所描绘的未来生活方式，无论好坏，都已然成为客观存在的、大众对于未来的共同想象，它们就是我们对于未来的期许。Pamela Sargent 将这种现象称为「思想文学」，这些虚构发明一直被我们重述，我们才能不断想象、发明和验证，将之带入现实。

不受传统屏幕限制 Tony Stark 在电影中使用全息影像的妙处在于，所有的界面几乎已经不用受到传统屏幕的限制，除了可以随意变大变小，它们还能脱离传统屏幕的存在，被拖拽出来，在全息影像中，随意放置和缩放 ，这也是为什么 Tony 可以肆无忌惮地打开如此之多的界面窗口。

而立体的全息影像则开辟了新的可能性。如果我们都可以像瓦坎达人一样使用全息影像聊天，那么原本高度依赖线下执行的任务，很大概率可以在线上完成了，比如购物。相比于使用 VR 和 AR 来预览商品和效果，全息影像所提供的效果会更进一步，这才是真正革命性的变化。而在《钢铁侠3》中，Tony 借助全息影像查看犯罪现场，就是立体全息影像的绝佳演示。

值得一提的是，即使最终能落地，全息影像并非全是优点，有很多务实的问题有待解决。

透明度界面其实有问题 通常，我们认为内容通透干净清晰是一个优点，但是全透明的载体，无论是2D的屏幕还是3D的空间之下，所有的信息都是一览无遗的，毫无隐私可言，无论你在做的是什么事情，都会彻底地向所有人展示。除此之外，这种高度通透的视觉信息，有很大概率会造成视觉疲劳，在光照充足的区域，全息影像要如何呈现，同样是一个非常具体务实的问题，如果无法解决高亮度情况下的信息呈现，那么全息影像就只能存在于暗室当中了。

针对全息影像优化 如今依然有网站还没有针对移动端屏幕进行优化，甚至没有针对如今流行的高清屏幕进行优化。在全息影像开始发展、走向民用之后，会逐渐开始形成设计标准，那么咱们的数码设备、网站、内容都需要在这个标准下有意识地兼容才行。

手势交互的遗漏 全息影像是需借助手势来进行交互的。但是，我们目前尚且没有掌握所有的 iPad 手势，又谈何全息影像的交互呢？如果这项技术最终在现实世界流行开来，那么我们需要面对它相对陡峭的学习曲线。与此同时，即使具备了成熟的全套交互操作，能够像 Tony Stark 一样进行交互的人毕竟还是少数，多数人可能依然需要借助一些工具来更好地和全息影像进行交互，包括但不限于键盘和鼠标这些传统的交互工具。

结语：全息影像是未来吗？ https://image.uisdc.com/wp-content/uploads/2023/02/2466635606.mp4

 

电影中一直在使用平面全息影像和立体全息影像，因为它们在大荧幕上看起来很赞，为用户提供了颇为不错的视觉享受。这种交互式、透明的蓝色界面已经透过好莱坞，成为了未来设计的代名词。如果科幻作品代表了我们对于未来的愿景，那是不是全息影像就是设计的未来方向？

或许是。从我们目前在 VR 和 AR 领域的探索来看，用户的确非常想触摸虚拟屏幕，用户也想像 Tony Stark 一样操作虚拟物品，就像我们上面提到的 Microsoft HoloLens 2 那种混合现实交互的前进方向。实际上，现在的技术人员也在尽力借助产品来弥补虚拟环境下的感官体验，对于如今的 VR 设备而言，手持控制器是必不可少的，用户要靠它们获得触觉反馈。

当下我们所拥有的技术是远落后于科幻作品的，但是指向这个方向的研究，是一直在推进的，起码我们现在已经攻克了一部分全息影像的可用性问题。

一、如何看待被小需求覆盖的工作日常？方法有两种，第一就是对日常工作情况分析，第二就是找出产生问题的原因一个设计师一般同时负责多个项目，多个产品老师同事提了不计其数的小需求，有的需求太小，一点挑战都没有，没有价值，做了对自己没有提升，许多设计师觉得自己做小项目没有价值，实则上是设计师自己的视角局限导致看问题比较片面...

一、如何看待被小需求覆盖的工作日常？ 方法有两种，第一就是对日常工作情况分析，第二就是找出产生问题的原因

一个设计师一般同时负责多个项目，多个产品老师同事提了不计其数的小需求，有的需求太小，一点挑战都没有，没有价值，做了对自己没有提升，许多设计师觉得自己做小项目没有价值，实则上是设计师自己的视角局限导致看问题比较片面，没有认识到自己实际的价值。

每个设计师都觉得没有空间展现自己无限创造力、才华和艺术品味，感觉这一身的艺术细菌都被浪费了

我们常常认为我们是固定的，世界是可塑的，但大多数情况下，世界是固定的，我们是可塑的。

所以我们应该改变心态，认真对待小需求也能够提升个人能力，展现创造力和逻辑性。此外，调整工作方式，从解决问题的本质出发，认真分析问题，想清楚如何解决，不再随意思考随性设计从而产生随机结果。

工作需求很琐碎，如何制作完整吸睛的作品集？ 前言 我们今天讲一下如何整理自己的作品集，好多人呢辛辛苦苦工作一年了，完了之后发现没有什么拿的出手的东西，今天做一点需求，明天做一点需求，做的东西零零散散的，发现没有什么可提取出来的，最后到总结的时候抓头挠腮的。

阅读文章 >

二、怎么解决这种情况，有哪些门道？ 我们是不是经常遇到这样：

但不管是什么需求，都需要设计师明确业务流程，在了解业务基础上才能够梳理清晰思路。

1. 分析目标用户，了解用户人群

当我们拿到一个需求的时候，我们需要对业务有所基本的认知，以买保险为例，完成投保的步骤分为以上四步，用户首先进入到保险首页，浏览保险列表页面，点击查看保险详情，最后决定购买保险完成投保。

用户人群：目标用户人群中，男性用户占比较高，且大部分处于婚育年纪的家庭车主，上有老下有小，生活的重担和家庭责任使他们具有较高的风险意识，注重品牌效应，追求品质，但大部分并不了解自身需求。

现存问题：不知道应该买哪种保险？性价比高吗？适合全家购买吗？理赔方便吗？是官方平台吗？有哪些保障权益？

2. 横向拓展功能矩阵，竖向梳理全流程

我们还需要对用户行为有个基本面的了解。投保四个步骤分别对应什么样的用户行为？根据用户行为去做出什么样的设计决策呢？这个时候就需要设计师们做进一步的思考了。

横向拓展思考，梳理产品框架。引入场景建立基本认知。提供辅助决策，产生价值认同。帮助用户做决策驱动，激励转化。

竖向梳理全流程。用户使用流程包括了点击买保险入口、进入浏览保险列表、查看产品详情页、用户投保完成。而影响用户行为的因素有三点：

提供可持续被感知的动机，吸引潜在的用户，利用保险应用场景引入到用户生活当中，给予用户基础认知 将复杂的保险内容简洁化，降低用户认知门槛，让用户清晰了解到产品是否适合自己 当用户被动机吸引进入到投保页面后，驱动用户做出决策需要建立在信任基础上，用户首次接触新产品时会选择熟悉的品牌，结合信用背书，让二者产生连接，增强产品可信度 此外，保险产品具有一定的周期性的，我们不仅需要考虑用户行为上的痛点，还要思考产品周期对用户决策的影响。

3. 了解覆盖保险周期

用户所处的保险阶段分为：新手期、决定期、犹豫期、复购期，处于不同保险阶段的用户对于保险内容有不同的诉求，需要在框架和内容上去适配他自身的认知和意愿。与市场营销、产品运营策略相结合相关案例分析。

三、实际案例分析 1. 在上个版本的续保详情页存在了几个问题：

当前详情页无法得知购买的是哪个保险，保险的特点和客户群体不清晰 用户不清楚什么时候到了续保阶段，以及为什么会欠费 信息层级不突出，文案信息冗杂，增加了用户了解产品内容的压力 续保详情页和其他页面视觉差异不大，引起用户视觉疲劳 根据以上的问题，可以给出对应的优化点：

突出保险本身的优势，强调已保障天数 明确费用计算规则，确保费用清晰明了 加强保单与缴费明细的内容主次层级对比，强化产品信息 统一保险页面设计风格 相关展示：

再来看个例子，下面是个保险复购期间续保 H5 优化。

在上个版本存在的问题是：

用户无法得知距离保险失效还剩多少天。 产品升级前后对比弱，升级的内容无法有效并且直观地感知。 设计风格上和投保详情页不一致，无法从品牌上传递信任感。

根据以上问题，可以给出对应的优化点：

明确失效保险名称以及天数的关键信息 强化升级前后的对比，从内容信息上强化视觉展示 这个页面要跳转到详情页，所以没必要展示全部内容，信息在一屏内展示完成 视觉上统一设计风格 同样，弹窗也有可以优化的地方

突出保险额度和关键的保险信息 增加已有多人完善信息，让用户产生从众心理 把完善内容包装成用户福利，只有幸运用户才可以享有 其他页面需要保持统一的设计风格

四、这些对我们有什么启示呢？ 产品工作流程：

产品设计流程：

无论是接到一个大的项目还是日常小需求的维护，设计师都应该多去从业务流程去思考产品的痛点，找到业务流程中每个步骤间设计目标，对工作不同阶段要有清晰的认识。运用设计方法了解我们的用户、了解产品核心诉求。

欢迎关注作者微信公众号：「产险设计事务所 PIDO」

前言在如今多终端、多设备尺寸的加持下，多屏设计就成了商业设计中不可缺少的一部分，为了让所用界面的视觉表现出统一性和一致性、同时在不同系统及不同尺寸的设备上保持良好的用户体验，栅格系统就显得尤为重要，它能辅助设计师制定界面排版布局的方案，以网格的形式将多元素/内容链接在一起，很好做到多平台、多尺寸的适配，让设计美感...

前言

在如今多终端、多设备尺寸的加持下，多屏设计就成了商业设计中不可缺少的一部分，为了让所用界面的视觉表现出统一性和一致性、同时在不同系统及不同尺寸的设备上保持良好的用户体验，栅格系统就显得尤为重要，它能辅助设计师制定界面排版布局的方案，以网格的形式将多元素/内容链接在一起，很好做到多平台、多尺寸的适配，让设计美感、工作效率都得到很大的提升。

一些优秀的产品都在使用栅格去规范界面信息的排版布局，虽然它只是传统设计方式的一部分，但只要不嫌麻烦，就可以使用 栅格系统 解决很多设计布局的问题。不少设计师都知道栅格的重要性，但碍于对其一知半解，以至于在设计中总有些无从下手，本文笔者将从浏览过的大量文章结合自身工作经验对栅格做出系统化的总结，希望能帮助初/中级设计师对栅格有一个更深的认识。

更多 栅格设计 干货：

用7大章节，帮你从零开始学会栅格系统 前言 现如今随着设备尺寸的多种多样，产品在设计过程中需要适配到更多尺寸，布局方案与栅格系统的搭配使用，可以很好的做到跨平台跨尺寸适配，极大的提升设计效率。

阅读文章 >

一、栅格的定义及重要性 1. 栅格的来源

栅格的概念来源于平面设计中的“网格”，早在 13 世纪，法国建筑师 Villard de Honnecourt 创作了一张图表，试图实现“和谐的设计”，这也是继黄金比例之后，第一次将网格与其结合在一起，以此产生固定比例的页面布局。

在 18 世纪工业革命大规模生产的开始，随着报纸、传单等主流印刷品的兴起，设计师们需要解决“将不同的信息传达给不同的人群且能自然浏览、还要防止不同部分争夺读者的注意力”的问题时，栅格的雏形已然显现出来。

20 世纪初，设计师们发现使用网格辅助设计印刷作品，可让排版布局更加清晰、信息传递也更加有效，由此演变成了平面设计中的一种方法。

20 世纪中期，约瑟夫·米勒-布罗克曼著作了《平面设计中的网格系统》一书对设计界影响至今。

由此不难发现，不管是前几个世纪的印刷刊物、还是如今的互联网产品界面布局，栅格都可以作为组织信息的工具，帮助设计师实现一致、和谐的信息布局效果。

2. 什么是栅格

栅格和网格的英文都以“Grid”来表示，其本质是为了给版面提供一个基本设计框架，这也是为实现有组织的设计其中方法之一，在平面设计中称之为“网格”，而在网页/移动端中更多称为“栅格”。

栅格是根据平面中的网格发展而来，通过一定的规律、合理的设置基准线来规范界面中的元素（文本/图像），让每个区域能够相对独立却又能相互关联，形成整个界面，最终呈现出清晰易读的信息布局。

3. 为什么要使用栅格

首先对用户来说，使用栅格能让内容布局具有规律性，通过定义留白、对齐、分割等各种比例关系，不仅能降低用户认知成本，还能让信息的展现更加清晰，有效提升用户的浏览、接收效率。

其次对于研发团队，栅格通过统一的标准规范对设计师进行约束，协同产出一致性的视觉效果，避免了一人一个样式的混乱场面，同时减少了部分细节上的沟通，提高决策及产出效率。在开发过程中，程序员通过有规可循的设计规律，可对部分组件及模块进行封装调用，不仅高度还原设计效果、还能提高开发效率。

另外，在设计 Web 界面时，使用栅格系统能一稿适配电脑、平板、手机等不同的设备尺寸，合理兼容多端、多系统下的自适应效果。

二、栅格系统的组成 栅格系统并没有我们想象的那么复杂，它主要由网格、列、水槽、边距、总宽、容器盒子等组成，只要清楚它们之间的相互关系以及定义即可，下面我们将一一了解：

1. 网格（Gird）

网格（Gird）是由基本单位「单元格」构成，也被称为最小单元格，而栅格则是由一系列规律的网格组成，通常情况下，我们会使用 8 作为作为栅格中的最小单位，以此进行增量。为什么用 8 为基础倍数呢？

首先作为偶数，程序进行单位换算后可被整除，避免像素出现小数点；其次，8 为增量单位既不会显得琐碎、也不会让内容过于分散，当界面中所有元素都以 8 为倍数时，其元素大小、间距都有规可循，之前笔者曾写过一篇「间距」类的文章，感兴趣的伙伴可以去看一下。

5000字干货！超详细的保姆级间距设计规范 编者注：UI设计中的间距到底是什么，有什么作用，如何合理有效地使用？

阅读文章 >

2. 列（Column）

列（Column）指的是栅格数量，如 12 栅格有 12 个列、24 栅格就是 24 个列，主要用来对齐内容。通过栅格的列数来控制版面的呼吸感及节奏感，列数越多、内容排版越精细，反之列数越少、内容排版就越疏松。

3. 水槽（Gutter）

水槽（Gutter）是指列与列之间的间距，通过留白以实现界面中的信息元素分割及版式呼吸感。水槽的宽度对设计风格会存在一定影响，水槽越大留白就越多、其呼吸感就越好，反之留白就越少、内容也会变的较为紧凑。

4. 边距（Margin）

边距（Margin）是指界面内容到屏幕边缘的距离，主要用来控制核心内容的展示边界，所以是禁止放置任何内容的（部分浮窗、返回顶部按钮、右侧吸附边栏除外）。边距值的大小会直接影响到栅格区域空间，这点大家自行理解即可。

5. 栅格总宽（Container）

栅格总宽（Container）是指所有列加所有水槽再加上两侧边距的总和，即整个栅格系统的总宽度。

6. 容器盒子（Col-n）

容器盒子（Col-n）是指布局信息的版面区域，通常设计师在设定好基础栅格后，会根据实际情况去定义一块内容需占用几个列的宽度并形成容器，后续在设计过程中，会将文字、图片、按钮等元素约束在限定的容器宽度以内形成复用组件，最终组合拼装成完整的设计方案。

三、栅格系统制作流程 1. 设计栅格宽度

在设计 Web 端界面时设计师需要先根据实际使用场景确定好布局后，再来设定栅格区域，如下列布局：

屏幕宽度并不等于栅格的宽度，大多数情况下，我们会基于 1920、1440 这两个尺寸来定义设计稿的宽度，但真正放置信息内容的区域并非设计稿尺寸，需要做到多平台、多尺寸显示器的适配，通常会将栅格宽度定义在 1024px~1400px 之间。例如：常见的 1024px、1200px、1280px、1400px 等，可满足绝大多数主流显示器，如果栅格宽度超过 1400px，在很多笔记本电脑上浏览页面时，会出现左右滚动条，体验非常不友好。

2. 选择栅格列数

① 12 栅格

12 列栅格很常见，一些业务信息分组较少的商业网站、门户网站等使用的就是 12 栅格，它能够被 2、3、4、6 整除，很容易满足信息较为复杂的等分布局场景。另外，针对不对称布局的容器组合也能将信息体现的很和谐，如双栏布局使用 4+8、3+9 栅格，三栏布局使用 2+8+2、3+3+6 栅格等，变化较为灵活。

② 24 栅格

24 列栅格适合信息量大、分组多且多样复杂的使用场景，很多视觉区域较大、需要精细化布局的 B 端 Web 设计采用的就是 24 栅格，相比 12 栅格，有更多的区域划分空间，其布局的灵活性也更强。

需要注意的是，24 栅格因列的数量比较多，很多时候列宽无法被精准整除，不过相差的像素数值极小，往往无法被用户肉眼觉察，无伤大雅。栅格本身的目的就是为了保持视觉效果的协调与统一，并非为了死磕某个像素，特殊情况区别对待即可。

③ 5 栅格

5 列栅格一般用在移动端设计中，因设备屏幕的横向空间有限，所以很少使用，例如：针对“金刚区”的 5 图标（一行）、10 图标（两行）的规范化排版。如果想进一步追求后续的灵活性、避免奇数的不便，也可将 5 列栅格拆分成 10 列，布局、视觉效果基本能保持一致。

其实在实际设计中，设计师们大多会使用间距来规范界面的排版与布局，相比 5 列栅格会更灵活、更便捷。

3. 定义水槽与边距

水槽就是列的间隔，其定义方式可以延用间距系统的制定标准，以 8px 为最小单位进行推导，如 S=8px、M=16px、L=24px、XL=32px、XXL=40px、...等，这样更容易保持视觉的一致性，最终到底使用哪个值没有绝对的要求，这还需要根据产品的调性及设计风格来决定，水槽的数值越大，页面的留白间隙就越多。

当我们确定好内容区宽度、水槽宽度及数量后，计算出列宽（上述有提到不一定整除）并将整体进行居中显示，两侧即自动形成边距。

四、栅格与响应式的结合 1. 自适应与响应式

① 自适应

自适应布局是为了让网页内容根据不同终端来自行适配布局，设计师需要制定好同一设计稿的变化规则，程序员在开发时创建多个布局，对不同的终端分别提供一套独立的前端代码，系统就能自行判断当前访问的是 PC 端、平板还是手机。我们可以做一个测试，对自适应网页窗口的宽度进行调整，就会发现每经过一个断点时，页面的元素位置就会发生改变，呈现出不同的布局效果。需要明确的是，当窗口宽度未达到下一个断点之前，元素不会随着窗口的调整而变化。

自适应效果因需要前端为每个终端提供独立的代码，固开发成本较高，在设计时，元素的大小、位置变化不必太过复杂，只需保留必要的功能入口即可。

② 响应式

响应式没有自适应那么多的控制，前端只需通过一套代码即可无缝衔接电脑端、平板和手机，可多端同步生效，其开发成本及设计成本都相对较低，适应性更强。响应式布局最典型的就是当页面窗口宽度发生变化时，元素的大小随时都在发生变化，特别是图片的伸缩、整行文字的长短变化尤为明显。

2. 栅格行为变化

① 固定栅格

将自适应关联到栅格上，简单来说，就是页面宽度在变化过程中未达到下一个断点时，栅格的列与水槽宽度不变，页面布局不会产生变化。当达到预设断点，栅格的列数与水槽会相应增加或减少，页面右侧的内容也会随之增减，但元素之间的尺寸与间距依然是固定的。

固定栅格的适配规则简单，实现成本也相对较低，但是因为在拉伸过程中边距的不固定性，局限了其适用范围，一般只适合用在内容居中、上下结构布局类型的产品中。需要注意的是，在过大或过小尺寸的屏幕上，比例可能会显的不够协调。

② 流动栅格

流动栅格的边距、水槽宽度是固定不变的，在达到下一个断点前，列的数量也不会增加，列宽会跟随页面宽度左右伸缩，变化规则不一定是最小单位（8px）倍数，内容元素也会随着页面宽度的变化而变化，以保持页面内容始终充满屏幕的可用空间。

我们可以将流动栅格的视觉呈现方式称之为响应式弹性布局，这种布局的兼容性很高，能很好的适应多端设备及不同的屏幕分辨率。对于不同尺寸的卡片混排也能平滑过渡，不会显得突兀，例如：图像、视频、类容编辑器、数据可视化等，除断点变化外，内容元素的缩放不会改变页面的排版布局。

③ 混和栅格

绝大多数的网站使用的都是流动栅格，但一些后台管理系统及工具型界面设计为了使布局既有固定的宽度、也有流动的宽度，就会采用混合栅格的形式。

混合栅格的灵活性很高，特别是内容较为复杂的产品会显的更加友好，在不同分辨率的屏幕上都能达到理想的视觉效果。不过对于开发来说，规则相对复杂，实现成本较高。

五、部分问题及处理方式 1. 水槽中不要留下元素

这里所说的并非水槽中不能存在内容，而是不要将单个元素或元素的边缘置于水槽内，否则就会参差不齐，违背了栅格的目的。如果你的元素过大，就让他跨越栅格，到达下一个列的右侧边缘。

2. 栅格不一定整除

虽说设计师对于每一个像素的的追求都很执着，但大部分情况下栅格都是无法整除的，而相差的像素也无法被用户以肉眼觉察。我们需要理解的是，栅格的目的是为了保持视觉的协调与统一，而非像素级的精确。

举个例子，以 1920px 的宽度、12 栅格为例，内容区宽度可以是 1000px、1200px、1400px、1600px...，每一次内容区宽度的变化都要将栅格的列宽重新调整，永远无法将栅格每次整除，即便偶尔也是例外。

3. 栅格区域外的内容

栅格是为了规范内容，并不是所有的内容都需要栅格。大多数情况下我们只需要将主要内容区域遵循栅格系统即可，其他部分如固定导航、侧边悬浮栏、右下角弹窗...等不一定要跟随屏幕尺寸或内容的变化而变化。

4. 合理的打破栅格对齐

对齐在栅格系统中的地位可谓是举足轻重，不过在一些特殊场景中不必为了对齐而对齐，在不影响视觉效果的前提下，可以根据实际情况合理的打破对齐。

如下图中的照片墙，利用极小的间距将一些宽度不同的照片排列在一起，虽然没有同栅格的列宽对齐，但我们第一眼很容易将这些照片联想成一个整体，同时又能轻松的单独区分开来，也不会影响整体布局。

5. 子父级模块对齐父级

在部分场景中，当我们以卡片的形式将多个内容形成一个信息组，这时可以忽略子级元素的对齐方式，父级卡片遵守栅格对齐即可。

六、结语 栅格系统能为设计提供便捷，有助于设计效率的提升，很多设计师都会去关注栅格为什么重要，却容易忽略栅格在实际项目中的使用原则，同时还要伴随一些限制条件，所以并没有平常想象的那么简单。

本篇文章提供了栅格系统的基础知识，希望能够抛砖引玉，帮助大家解决在使用过程中遇到的常见问题，让栅格更好的服务于设计，若有不足之处，欢迎补充。

万字干货！从4个方面完整解析栅格设计 关于界面栅格的攻略，延展到适配方式。

阅读文章 >

欢迎关注作者微信公众号：「能量眼球」

一、前言在设计工作中，竞品分析是很常见的一种调研方式，多看多体验产品可以帮我们拓宽更多的设计思路和眼界，而不仅仅是靠凭空想象和“我感觉是这样…”来做判断搞方案，本文简单分享自己在体验产品过程中的理解和思考。更多产品细节：10个产品细节剖析，看看高手是如何做设计的！

一、前言 在设计工作中，竞品分析是很常见的一种调研方式，多看多体验产品可以帮我们拓宽更多的设计思路和眼界，而不仅仅是靠凭空想象和“我感觉是这样…”来做判断搞方案，本文简单分享自己在体验产品过程中的理解和思考。

更多 产品细节 ：

10个产品细节剖析，看看高手是如何做设计的！ 作为 UI 设计师来说，体验总结是必不可少的日常习惯，灵感的来源离不开对优秀设计的探索。

阅读文章 >

二、社交产品赛道 此次分享聚焦在陌生人社交赛道，围绕“发现-连接-破冰”的陌生人引力公式来拆解分析一些社交 app 是以怎样的方案来帮助用户完成这个社交行为链。（来自 ISUX 发布过的陌生人引力公式）

1. 探探：上传照片场景化

使用场景：

探探以颜值社交为核心，主要玩法是刷卡式社交，比较依赖于用户照片，所以在整个产品体验流程中都会不时的引导用户上传照片这一行为；例如在浏览照片、编辑资料、特权奖励的流程中都采取了不同方式进行引导。

设计思考：

探探将上传照片的场景具像化，在编辑资料的照片模块，使用最好看的旅行照、独一无二的才艺、我的宠物和生活照等文案，这样的设计可以引导用户上传不同类型的照片来丰富个人画像和人设，建立吸引力，以及用户之间的共同点和联系；还能暗示一些不好意思或不想上传人像自拍照的用户上传一些生活照，丰富产品的用户照片池。

2. 探探：资料百分比完成度

使用场景：

在资料编辑界面，探探将待完善的个人资料信息分模块标明完成度百分比，奖励用户完成 100%时可以提升曝光。

设计思考：

这种完成度百分比的方式通常在一些电商运营活动中会出现，探探把这种百分比的方式运用到资料编辑的不同信息模块下，这样做可以分散用户完善资料的压力（就像大目标拆成小目标一样，小目标更容易去实现和行动）

3. CP：标签生成个人介绍动态

使用场景：

在新用户初次进入 CP 时，会让用户选择一些个人标签，选择完成后，会将个人标签自动生成一段自我介绍作为动态发布。

设计思考：

这个是我在体验中觉得非常 nice 的一个功能，通过提取用户标签形成个人介绍动态，不至于新用户和不喜欢发动态的用户主页光秃秃一片，而且对比纯标签来说，一段口语化的文字表达更有亲和力和交流感，吸引其他陌生人产生兴趣打招呼。（我在 soul 中深有体会，因为在 soul 没有发布任何动态，好几次都会被问主页怎么什么都没有～）

4. umi 星球：录制声音词卡选择

umi 这个产品目前还没有太大用户量，是一个初创产品，但是产品的差异性和设计感很好，值得借鉴。

使用场景：

在录制自己的声音时，umi 会有一些词卡选择，用户可以根据词卡内容来录制声音。

设计思考：

现在很多陌生人社交 App 中都不止局限在文字上的形象展示，用户通过录制声音可以更加丰富的展现自己；声音的表达一是音色氛围、二是语音内容；umi 在内容上提供了词卡，照顾到用户可能会不知道录制什么的茫然，根据产品目标群体选取的都是一些挺符合年轻人审美的句子，像经典影视台词、情感文字、文学作品，比较文艺有意思，不会那么土味和 low～ 渲染产品充满艺术感和年轻的调性。我觉得同类的产品是可以借鉴一下思路的。

5. umi 星球：随机昵称

使用场景：

在新用户注册时，umi 可以随机生成昵称让用户选择。

设计思考：

不知道大家有没有这种感受，就是每次下载一个新的 app 注册时，想名字都好累，脑子一片空白，特别是有一些产品还不让名字重复，就要反复的尝试替换；在umi里可以选择系统随机提供的名称，整个注册流程更快、降低用户操作成本，不容易在这个阶段导致用户流失；而且提供的名字都是一些挺有意思的名字哈哈哈，让用户比较能接受，例如“天炉座5688”“仙女座1277”…

想起来自己体验过的一个 社交产品 忘了叫什么名字了，自动起名“土豪的猎豹”外加一个大黄狗搞笑表情包头像（拴 Q，一进直播间都喊欢迎猎豹哥哥哈哈哈)，说真的头像和昵称在虚拟世界还蛮有存在感的，在大家都不认识的情况下不自觉地会有把头像和昵称当成是对方形象的这种心理暗示；没有绝对说哪种类型是好的，只是采取自动生成头像和昵称的方案最好根据品牌调性来设计。

6. cp：互动任务排序

使用场景：

产品的定位是主打线上转线下的恋爱社交；双方互相欣赏后自动变成七天 cp，开启 cp 空间，可以打卡完成任务增加亲密度。

设计亮点：

cp 空间的任务排序和任务内容设计很有意思，从关系角度来说是“陌生人-破冰-好感-确定关系-热恋”的流程来排序的，循序渐进的拉近两个陌生人之间距离，促进关系的建立。 从恋爱场景的角度是“线上-线下-线上”的流程，契合产品线上转下恋爱的定位。 从用户心理层面进行任务内容设计，例如刚开始先做几个用户成本比较低的小任务破冰，然后就是互看照片（前边的几个小任务也可以说是为看照片做个铺垫，看照片我觉得挺真实正常的，换位思考一下，在不了解的情况下，现在线上交友选择性多，大家很难在不知道对方是什么样子的情况下付出那么多的时间成本陪聊进一步突破），照片互看后的任务内容设计围绕关系升温逐渐转线下确定恋爱关系… 优化方向：

cp 空间的任务打卡方式过于单一，只能通过发动态来完成，缺少仪式感，促使用户做任务的动力稍显薄弱，可以适当的增加一些有意思的玩法和视觉效果，除了能促进用户活跃度以外，从业务角度来说有可能开辟更多的付费渠道。 cp 空间在对话框里的呈现太像系统通知，可以增加一些对话感，强调人与人的互动；例如通过修改任务邀请文案“xx 邀请你一起…”、“xxx想和你一起cp…”；或者通过一些动效来增加趣味性和cp氛围。 7. Soul：酒馆猜拳社交破冰

使用场景：

用户在聊天过程中，可以通过酒馆猜拳来问答式聊天，完成社交破冰。

设计思考：

Soul 主打灵魂、兴趣三观社交，所以用户互相聊天了解的过程是很重要的，而在与陌生人联系上后，却不知道怎么聊天，容易陷入无话说、尴尬、以及不舒服的盘问式对话。酒馆猜拳是我使用过程中觉得体验的还不错的破冰玩法，双方 souler 通过猜拳你来我往的互问互答，在答题的过程中逐渐放开自己，延伸捕捉出更多的话题，降低交流门槛，到后面可能不需要猜拳问答，也能有很好的聊天氛围。

优化方向：

这种破冰方式在其他的一些社交应用中也有看到过类似的，soul 做的更加细致一些，但我认为还有一些能优化的点就是：一将提问的问题归个类，这样可以更快的找到目标问题，而不用反复刷新问题，找好半天，没有合适的问题，让对面一直等着，当然这一块 soul 这么做也有可能是想减少用户操作路径和层级吧。

8. Soul：亲密度标识建立关系

使用场景：

soul 在跟对方聊天达到一定时间后，会出现的一个“soulmate"标识，互动的时间越久，这个标识就会依次点亮，表示两人已经建立了关系亲密度。在“cp”、“qq”中也有这样的亲密度标识运用。

设计思考：

soul 的亲密度标识采取字母”soulmate“，一是很好的与品牌元素进行结合；二是通过亲密度点亮，能表明自己付出了更多的时间成本，跟对方的聊天比其他陌生人更久有更多话题，以这种方式可以一定程度上拉近两个陌生人之间的关系。我觉得这种亲密度标识在陌生人社交、情侣、crush、闺蜜这些关系中的用户会比较适用。

9. 探探：趣味测试+发送话题

使用场景：

在聊天场景中，探探提供真相测试玩法，邀请对方一起做测趣味测试或接受对方的测试邀请，可以根据测试结果查看双方的匹配度，根据测试内容还可以提取相关话题发送给对方，是一个社交破冰的玩法

设计思考：

探探的这个趣味测试玩法，兼顾趣味性和社交性；我体验比较好的一点是所有问题的测试结果以一种更舒适友好的表达方式来表达，不会觉得某一个答案就是不好的而违心去选择，这会让用户没有压力的选择真实的内心答案完成“真相测试”；其次就是在测试结果页将问题和选择自动生成一段文案，用户可以发送给对方来展开聊天互动。对于有些内敛或不太会表达的用户来说，这样子的破冰更加自然和容易接受，以此降低用户破冰心理压力。

三、结语 陌生人社交产品下又有不少细分赛道，像这两年出现比较多的的语音派对交友、虚拟社交，可以单独进行分析；因为我目前的工作是在社交赛道，平时会比较多看和分析这类产品（其他类型也会看），后续会继续更新日常产品体验和设计思考，今天的分享就先到这里了。

[link ]

一、前言在设计工作中，竞品分析是很常见的一种调研方式，多看多体验产品可以帮我们拓宽更多的设计思路和眼界，而不仅仅是靠凭空想象和“我感觉是这样…”来做判断搞方案，本文简单分享自己在体验产品过程中的理解和思考。更多产品细节：10个产品细节剖析，看看高手是如何做设计的！

一、前言 在设计工作中，竞品分析是很常见的一种调研方式，多看多体验产品可以帮我们拓宽更多的设计思路和眼界，而不仅仅是靠凭空想象和“我感觉是这样…”来做判断搞方案，本文简单分享自己在体验产品过程中的理解和思考。

更多 产品细节 ：

10个产品细节剖析，看看高手是如何做设计的！ 作为 UI 设计师来说，体验总结是必不可少的日常习惯，灵感的来源离不开对优秀设计的探索。

阅读文章 >

二、社交产品赛道 此次分享聚焦在陌生人社交赛道，围绕“发现-连接-破冰”的陌生人引力公式来拆解分析一些社交 app 是以怎样的方案来帮助用户完成这个社交行为链。（来自 ISUX 发布过的陌生人引力公式）

1. 探探：上传照片场景化

使用场景：

探探以颜值社交为核心，主要玩法是刷卡式社交，比较依赖于用户照片，所以在整个产品体验流程中都会不时的引导用户上传照片这一行为；例如在浏览照片、编辑资料、特权奖励的流程中都采取了不同方式进行引导。

设计思考：

探探将上传照片的场景具像化，在编辑资料的照片模块，使用最好看的旅行照、独一无二的才艺、我的宠物和生活照等文案，这样的设计可以引导用户上传不同类型的照片来丰富个人画像和人设，建立吸引力，以及用户之间的共同点和联系；还能暗示一些不好意思或不想上传人像自拍照的用户上传一些生活照，丰富产品的用户照片池。

2. 探探：资料百分比完成度

使用场景：

在资料编辑界面，探探将待完善的个人资料信息分模块标明完成度百分比，奖励用户完成 100%时可以提升曝光。

设计思考：

这种完成度百分比的方式通常在一些电商运营活动中会出现，探探把这种百分比的方式运用到资料编辑的不同信息模块下，这样做可以分散用户完善资料的压力（就像大目标拆成小目标一样，小目标更容易去实现和行动）

3. CP：标签生成个人介绍动态

使用场景：

在新用户初次进入 CP 时，会让用户选择一些个人标签，选择完成后，会将个人标签自动生成一段自我介绍作为动态发布。

设计思考：

这个是我在体验中觉得非常 nice 的一个功能，通过提取用户标签形成个人介绍动态，不至于新用户和不喜欢发动态的用户主页光秃秃一片，而且对比纯标签来说，一段口语化的文字表达更有亲和力和交流感，吸引其他陌生人产生兴趣打招呼。（我在 soul 中深有体会，因为在 soul 没有发布任何动态，好几次都会被问主页怎么什么都没有～）

4. umi 星球：录制声音词卡选择

umi 这个产品目前还没有太大用户量，是一个初创产品，但是产品的差异性和设计感很好，值得借鉴。

使用场景：

在录制自己的声音时，umi 会有一些词卡选择，用户可以根据词卡内容来录制声音。

设计思考：

现在很多陌生人社交 App 中都不止局限在文字上的形象展示，用户通过录制声音可以更加丰富的展现自己；声音的表达一是音色氛围、二是语音内容；umi 在内容上提供了词卡，照顾到用户可能会不知道录制什么的茫然，根据产品目标群体选取的都是一些挺符合年轻人审美的句子，像经典影视台词、情感文字、文学作品，比较文艺有意思，不会那么土味和 low～ 渲染产品充满艺术感和年轻的调性。我觉得同类的产品是可以借鉴一下思路的。

5. umi 星球：随机昵称

使用场景：

在新用户注册时，umi 可以随机生成昵称让用户选择。

设计思考：

不知道大家有没有这种感受，就是每次下载一个新的 app 注册时，想名字都好累，脑子一片空白，特别是有一些产品还不让名字重复，就要反复的尝试替换；在umi里可以选择系统随机提供的名称，整个注册流程更快、降低用户操作成本，不容易在这个阶段导致用户流失；而且提供的名字都是一些挺有意思的名字哈哈哈，让用户比较能接受，例如“天炉座5688”“仙女座1277”…

想起来自己体验过的一个 社交产品 忘了叫什么名字了，自动起名“土豪的猎豹”外加一个大黄狗搞笑表情包头像（拴 Q，一进直播间都喊欢迎猎豹哥哥哈哈哈)，说真的头像和昵称在虚拟世界还蛮有存在感的，在大家都不认识的情况下不自觉地会有把头像和昵称当成是对方形象的这种心理暗示；没有绝对说哪种类型是好的，只是采取自动生成头像和昵称的方案最好根据品牌调性来设计。

6. cp：互动任务排序

使用场景：

产品的定位是主打线上转线下的恋爱社交；双方互相欣赏后自动变成七天 cp，开启 cp 空间，可以打卡完成任务增加亲密度。

设计亮点：

cp 空间的任务排序和任务内容设计很有意思，从关系角度来说是“陌生人-破冰-好感-确定关系-热恋”的流程来排序的，循序渐进的拉近两个陌生人之间距离，促进关系的建立。 从恋爱场景的角度是“线上-线下-线上”的流程，契合产品线上转下恋爱的定位。 从用户心理层面进行任务内容设计，例如刚开始先做几个用户成本比较低的小任务破冰，然后就是互看照片（前边的几个小任务也可以说是为看照片做个铺垫，看照片我觉得挺真实正常的，换位思考一下，在不了解的情况下，现在线上交友选择性多，大家很难在不知道对方是什么样子的情况下付出那么多的时间成本陪聊进一步突破），照片互看后的任务内容设计围绕关系升温逐渐转线下确定恋爱关系… 优化方向：

cp 空间的任务打卡方式过于单一，只能通过发动态来完成，缺少仪式感，促使用户做任务的动力稍显薄弱，可以适当的增加一些有意思的玩法和视觉效果，除了能促进用户活跃度以外，从业务角度来说有可能开辟更多的付费渠道。 cp 空间在对话框里的呈现太像系统通知，可以增加一些对话感，强调人与人的互动；例如通过修改任务邀请文案“xx 邀请你一起…”、“xxx想和你一起cp…”；或者通过一些动效来增加趣味性和cp氛围。 7. Soul：酒馆猜拳社交破冰

使用场景：

用户在聊天过程中，可以通过酒馆猜拳来问答式聊天，完成社交破冰。

设计思考：

Soul 主打灵魂、兴趣三观社交，所以用户互相聊天了解的过程是很重要的，而在与陌生人联系上后，却不知道怎么聊天，容易陷入无话说、尴尬、以及不舒服的盘问式对话。酒馆猜拳是我使用过程中觉得体验的还不错的破冰玩法，双方 souler 通过猜拳你来我往的互问互答，在答题的过程中逐渐放开自己，延伸捕捉出更多的话题，降低交流门槛，到后面可能不需要猜拳问答，也能有很好的聊天氛围。

优化方向：

这种破冰方式在其他的一些社交应用中也有看到过类似的，soul 做的更加细致一些，但我认为还有一些能优化的点就是：一将提问的问题归个类，这样可以更快的找到目标问题，而不用反复刷新问题，找好半天，没有合适的问题，让对面一直等着，当然这一块 soul 这么做也有可能是想减少用户操作路径和层级吧。

8. Soul：亲密度标识建立关系

使用场景：

soul 在跟对方聊天达到一定时间后，会出现的一个“soulmate"标识，互动的时间越久，这个标识就会依次点亮，表示两人已经建立了关系亲密度。在“cp”、“qq”中也有这样的亲密度标识运用。

设计思考：

soul 的亲密度标识采取字母”soulmate“，一是很好的与品牌元素进行结合；二是通过亲密度点亮，能表明自己付出了更多的时间成本，跟对方的聊天比其他陌生人更久有更多话题，以这种方式可以一定程度上拉近两个陌生人之间的关系。我觉得这种亲密度标识在陌生人社交、情侣、crush、闺蜜这些关系中的用户会比较适用。

9. 探探：趣味测试+发送话题

使用场景：

在聊天场景中，探探提供真相测试玩法，邀请对方一起做测趣味测试或接受对方的测试邀请，可以根据测试结果查看双方的匹配度，根据测试内容还可以提取相关话题发送给对方，是一个社交破冰的玩法

设计思考：

探探的这个趣味测试玩法，兼顾趣味性和社交性；我体验比较好的一点是所有问题的测试结果以一种更舒适友好的表达方式来表达，不会觉得某一个答案就是不好的而违心去选择，这会让用户没有压力的选择真实的内心答案完成“真相测试”；其次就是在测试结果页将问题和选择自动生成一段文案，用户可以发送给对方来展开聊天互动。对于有些内敛或不太会表达的用户来说，这样子的破冰更加自然和容易接受，以此降低用户破冰心理压力。

三、结语 陌生人社交产品下又有不少细分赛道，像这两年出现比较多的的语音派对交友、虚拟社交，可以单独进行分析；因为我目前的工作是在社交赛道，平时会比较多看和分析这类产品（其他类型也会看），后续会继续更新日常产品体验和设计思考，今天的分享就先到这里了。

[link ]

前言在如今多终端、多设备尺寸的加持下，多屏设计就成了商业设计中不可缺少的一部分，为了让所用界面的视觉表现出统一性和一致性、同时在不同系统及不同尺寸的设备上保持良好的用户体验，栅格系统就显得尤为重要，它能辅助设计师制定界面排版布局的方案，以网格的形式将多元素/内容链接在一起，很好做到多平台、多尺寸的适配，让设计美感...

前言

在如今多终端、多设备尺寸的加持下，多屏设计就成了商业设计中不可缺少的一部分，为了让所用界面的视觉表现出统一性和一致性、同时在不同系统及不同尺寸的设备上保持良好的用户体验，栅格系统就显得尤为重要，它能辅助设计师制定界面排版布局的方案，以网格的形式将多元素/内容链接在一起，很好做到多平台、多尺寸的适配，让设计美感、工作效率都得到很大的提升。

一些优秀的产品都在使用栅格去规范界面信息的排版布局，虽然它只是传统设计方式的一部分，但只要不嫌麻烦，就可以使用 栅格系统 解决很多设计布局的问题。不少设计师都知道栅格的重要性，但碍于对其一知半解，以至于在设计中总有些无从下手，本文笔者将从浏览过的大量文章结合自身工作经验对栅格做出系统化的总结，希望能帮助初/中级设计师对栅格有一个更深的认识。

更多 栅格设计 干货：

用7大章节，帮你从零开始学会栅格系统 前言 现如今随着设备尺寸的多种多样，产品在设计过程中需要适配到更多尺寸，布局方案与栅格系统的搭配使用，可以很好的做到跨平台跨尺寸适配，极大的提升设计效率。

阅读文章 >

一、栅格的定义及重要性 1. 栅格的来源

栅格的概念来源于平面设计中的“网格”，早在 13 世纪，法国建筑师 Villard de Honnecourt 创作了一张图表，试图实现“和谐的设计”，这也是继黄金比例之后，第一次将网格与其结合在一起，以此产生固定比例的页面布局。

在 18 世纪工业革命大规模生产的开始，随着报纸、传单等主流印刷品的兴起，设计师们需要解决“将不同的信息传达给不同的人群且能自然浏览、还要防止不同部分争夺读者的注意力”的问题时，栅格的雏形已然显现出来。

20 世纪初，设计师们发现使用网格辅助设计印刷作品，可让排版布局更加清晰、信息传递也更加有效，由此演变成了平面设计中的一种方法。

20 世纪中期，约瑟夫·米勒-布罗克曼著作了《平面设计中的网格系统》一书对设计界影响至今。

由此不难发现，不管是前几个世纪的印刷刊物、还是如今的互联网产品界面布局，栅格都可以作为组织信息的工具，帮助设计师实现一致、和谐的信息布局效果。

2. 什么是栅格

栅格和网格的英文都以“Grid”来表示，其本质是为了给版面提供一个基本设计框架，这也是为实现有组织的设计其中方法之一，在平面设计中称之为“网格”，而在网页/移动端中更多称为“栅格”。

栅格是根据平面中的网格发展而来，通过一定的规律、合理的设置基准线来规范界面中的元素（文本/图像），让每个区域能够相对独立却又能相互关联，形成整个界面，最终呈现出清晰易读的信息布局。

3. 为什么要使用栅格

首先对用户来说，使用栅格能让内容布局具有规律性，通过定义留白、对齐、分割等各种比例关系，不仅能降低用户认知成本，还能让信息的展现更加清晰，有效提升用户的浏览、接收效率。

其次对于研发团队，栅格通过统一的标准规范对设计师进行约束，协同产出一致性的视觉效果，避免了一人一个样式的混乱场面，同时减少了部分细节上的沟通，提高决策及产出效率。在开发过程中，程序员通过有规可循的设计规律，可对部分组件及模块进行封装调用，不仅高度还原设计效果、还能提高开发效率。

另外，在设计 Web 界面时，使用栅格系统能一稿适配电脑、平板、手机等不同的设备尺寸，合理兼容多端、多系统下的自适应效果。

二、栅格系统的组成 栅格系统并没有我们想象的那么复杂，它主要由网格、列、水槽、边距、总宽、容器盒子等组成，只要清楚它们之间的相互关系以及定义即可，下面我们将一一了解：

1. 网格（Gird）

网格（Gird）是由基本单位「单元格」构成，也被称为最小单元格，而栅格则是由一系列规律的网格组成，通常情况下，我们会使用 8 作为作为栅格中的最小单位，以此进行增量。为什么用 8 为基础倍数呢？

首先作为偶数，程序进行单位换算后可被整除，避免像素出现小数点；其次，8 为增量单位既不会显得琐碎、也不会让内容过于分散，当界面中所有元素都以 8 为倍数时，其元素大小、间距都有规可循，之前笔者曾写过一篇「间距」类的文章，感兴趣的伙伴可以去看一下。

5000字干货！超详细的保姆级间距设计规范 编者注：UI设计中的间距到底是什么，有什么作用，如何合理有效地使用？

阅读文章 >

2. 列（Column）

列（Column）指的是栅格数量，如 12 栅格有 12 个列、24 栅格就是 24 个列，主要用来对齐内容。通过栅格的列数来控制版面的呼吸感及节奏感，列数越多、内容排版越精细，反之列数越少、内容排版就越疏松。

3. 水槽（Gutter）

水槽（Gutter）是指列与列之间的间距，通过留白以实现界面中的信息元素分割及版式呼吸感。水槽的宽度对设计风格会存在一定影响，水槽越大留白就越多、其呼吸感就越好，反之留白就越少、内容也会变的较为紧凑。

4. 边距（Margin）

边距（Margin）是指界面内容到屏幕边缘的距离，主要用来控制核心内容的展示边界，所以是禁止放置任何内容的（部分浮窗、返回顶部按钮、右侧吸附边栏除外）。边距值的大小会直接影响到栅格区域空间，这点大家自行理解即可。

5. 栅格总宽（Container）

栅格总宽（Container）是指所有列加所有水槽再加上两侧边距的总和，即整个栅格系统的总宽度。

6. 容器盒子（Col-n）

容器盒子（Col-n）是指布局信息的版面区域，通常设计师在设定好基础栅格后，会根据实际情况去定义一块内容需占用几个列的宽度并形成容器，后续在设计过程中，会将文字、图片、按钮等元素约束在限定的容器宽度以内形成复用组件，最终组合拼装成完整的设计方案。

三、栅格系统制作流程 1. 设计栅格宽度

在设计 Web 端界面时设计师需要先根据实际使用场景确定好布局后，再来设定栅格区域，如下列布局：

屏幕宽度并不等于栅格的宽度，大多数情况下，我们会基于 1920、1440 这两个尺寸来定义设计稿的宽度，但真正放置信息内容的区域并非设计稿尺寸，需要做到多平台、多尺寸显示器的适配，通常会将栅格宽度定义在 1024px~1400px 之间。例如：常见的 1024px、1200px、1280px、1400px 等，可满足绝大多数主流显示器，如果栅格宽度超过 1400px，在很多笔记本电脑上浏览页面时，会出现左右滚动条，体验非常不友好。

2. 选择栅格列数

① 12 栅格

12 列栅格很常见，一些业务信息分组较少的商业网站、门户网站等使用的就是 12 栅格，它能够被 2、3、4、6 整除，很容易满足信息较为复杂的等分布局场景。另外，针对不对称布局的容器组合也能将信息体现的很和谐，如双栏布局使用 4+8、3+9 栅格，三栏布局使用 2+8+2、3+3+6 栅格等，变化较为灵活。

② 24 栅格

24 列栅格适合信息量大、分组多且多样复杂的使用场景，很多视觉区域较大、需要精细化布局的 B 端 Web 设计采用的就是 24 栅格，相比 12 栅格，有更多的区域划分空间，其布局的灵活性也更强。

需要注意的是，24 栅格因列的数量比较多，很多时候列宽无法被精准整除，不过相差的像素数值极小，往往无法被用户肉眼觉察，无伤大雅。栅格本身的目的就是为了保持视觉效果的协调与统一，并非为了死磕某个像素，特殊情况区别对待即可。

③ 5 栅格

5 列栅格一般用在移动端设计中，因设备屏幕的横向空间有限，所以很少使用，例如：针对“金刚区”的 5 图标（一行）、10 图标（两行）的规范化排版。如果想进一步追求后续的灵活性、避免奇数的不便，也可将 5 列栅格拆分成 10 列，布局、视觉效果基本能保持一致。

其实在实际设计中，设计师们大多会使用间距来规范界面的排版与布局，相比 5 列栅格会更灵活、更便捷。

3. 定义水槽与边距

水槽就是列的间隔，其定义方式可以延用间距系统的制定标准，以 8px 为最小单位进行推导，如 S=8px、M=16px、L=24px、XL=32px、XXL=40px、...等，这样更容易保持视觉的一致性，最终到底使用哪个值没有绝对的要求，这还需要根据产品的调性及设计风格来决定，水槽的数值越大，页面的留白间隙就越多。

当我们确定好内容区宽度、水槽宽度及数量后，计算出列宽（上述有提到不一定整除）并将整体进行居中显示，两侧即自动形成边距。

四、栅格与响应式的结合 1. 自适应与响应式

① 自适应

自适应布局是为了让网页内容根据不同终端来自行适配布局，设计师需要制定好同一设计稿的变化规则，程序员在开发时创建多个布局，对不同的终端分别提供一套独立的前端代码，系统就能自行判断当前访问的是 PC 端、平板还是手机。我们可以做一个测试，对自适应网页窗口的宽度进行调整，就会发现每经过一个断点时，页面的元素位置就会发生改变，呈现出不同的布局效果。需要明确的是，当窗口宽度未达到下一个断点之前，元素不会随着窗口的调整而变化。

自适应效果因需要前端为每个终端提供独立的代码，固开发成本较高，在设计时，元素的大小、位置变化不必太过复杂，只需保留必要的功能入口即可。

② 响应式

响应式没有自适应那么多的控制，前端只需通过一套代码即可无缝衔接电脑端、平板和手机，可多端同步生效，其开发成本及设计成本都相对较低，适应性更强。响应式布局最典型的就是当页面窗口宽度发生变化时，元素的大小随时都在发生变化，特别是图片的伸缩、整行文字的长短变化尤为明显。

2. 栅格行为变化

① 固定栅格

将自适应关联到栅格上，简单来说，就是页面宽度在变化过程中未达到下一个断点时，栅格的列与水槽宽度不变，页面布局不会产生变化。当达到预设断点，栅格的列数与水槽会相应增加或减少，页面右侧的内容也会随之增减，但元素之间的尺寸与间距依然是固定的。

固定栅格的适配规则简单，实现成本也相对较低，但是因为在拉伸过程中边距的不固定性，局限了其适用范围，一般只适合用在内容居中、上下结构布局类型的产品中。需要注意的是，在过大或过小尺寸的屏幕上，比例可能会显的不够协调。

② 流动栅格

流动栅格的边距、水槽宽度是固定不变的，在达到下一个断点前，列的数量也不会增加，列宽会跟随页面宽度左右伸缩，变化规则不一定是最小单位（8px）倍数，内容元素也会随着页面宽度的变化而变化，以保持页面内容始终充满屏幕的可用空间。

我们可以将流动栅格的视觉呈现方式称之为响应式弹性布局，这种布局的兼容性很高，能很好的适应多端设备及不同的屏幕分辨率。对于不同尺寸的卡片混排也能平滑过渡，不会显得突兀，例如：图像、视频、类容编辑器、数据可视化等，除断点变化外，内容元素的缩放不会改变页面的排版布局。

③ 混和栅格

绝大多数的网站使用的都是流动栅格，但一些后台管理系统及工具型界面设计为了使布局既有固定的宽度、也有流动的宽度，就会采用混合栅格的形式。

混合栅格的灵活性很高，特别是内容较为复杂的产品会显的更加友好，在不同分辨率的屏幕上都能达到理想的视觉效果。不过对于开发来说，规则相对复杂，实现成本较高。

五、部分问题及处理方式 1. 水槽中不要留下元素

这里所说的并非水槽中不能存在内容，而是不要将单个元素或元素的边缘置于水槽内，否则就会参差不齐，违背了栅格的目的。如果你的元素过大，就让他跨越栅格，到达下一个列的右侧边缘。

2. 栅格不一定整除

虽说设计师对于每一个像素的的追求都很执着，但大部分情况下栅格都是无法整除的，而相差的像素也无法被用户以肉眼觉察。我们需要理解的是，栅格的目的是为了保持视觉的协调与统一，而非像素级的精确。

举个例子，以 1920px 的宽度、12 栅格为例，内容区宽度可以是 1000px、1200px、1400px、1600px...，每一次内容区宽度的变化都要将栅格的列宽重新调整，永远无法将栅格每次整除，即便偶尔也是例外。

3. 栅格区域外的内容

栅格是为了规范内容，并不是所有的内容都需要栅格。大多数情况下我们只需要将主要内容区域遵循栅格系统即可，其他部分如固定导航、侧边悬浮栏、右下角弹窗...等不一定要跟随屏幕尺寸或内容的变化而变化。

4. 合理的打破栅格对齐

对齐在栅格系统中的地位可谓是举足轻重，不过在一些特殊场景中不必为了对齐而对齐，在不影响视觉效果的前提下，可以根据实际情况合理的打破对齐。

如下图中的照片墙，利用极小的间距将一些宽度不同的照片排列在一起，虽然没有同栅格的列宽对齐，但我们第一眼很容易将这些照片联想成一个整体，同时又能轻松的单独区分开来，也不会影响整体布局。

5. 子父级模块对齐父级

在部分场景中，当我们以卡片的形式将多个内容形成一个信息组，这时可以忽略子级元素的对齐方式，父级卡片遵守栅格对齐即可。

六、结语 栅格系统能为设计提供便捷，有助于设计效率的提升，很多设计师都会去关注栅格为什么重要，却容易忽略栅格在实际项目中的使用原则，同时还要伴随一些限制条件，所以并没有平常想象的那么简单。

本篇文章提供了栅格系统的基础知识，希望能够抛砖引玉，帮助大家解决在使用过程中遇到的常见问题，让栅格更好的服务于设计，若有不足之处，欢迎补充。

万字干货！从4个方面完整解析栅格设计 关于界面栅格的攻略，延展到适配方式。

阅读文章 >

欢迎关注作者微信公众号：「能量眼球」

大家好，我是灰色执照~很开心在过年期间又开发出了一款非常便利的设计神器：NB Earth 这是一款可以快速制作可视化地球的工具，无需下载任何软件，打开网站你就可以直接生成各种类型的地球。你还可以在地球上增加标注、在地球上增加路径动画。往期神器：三维地图绘制神器 NB MAP 升级了！

大家好，我是灰色执照~很开心在过年期间又开发出了一款非常便利的设计神器：NB Earth 这是一款可以快速制作可视化地球的工具，无需下载任何软件，打开网站你就可以直接生成各种类型的地球。你还可以在地球上增加标注、在地球上增加路径动画。

往期神器：

三维地图绘制神器 NB MAP 升级了！可支持下载区县、乡镇地图！ 大家好，我是灰色执照~ 经过一段时间的努力，NB Map 又发布新版本了！

阅读文章 >

软件体验地址： https://www.nbchart.com/lab/lab.php

打开网站后，你会看到 6 种不同形式的地球，鼠标点击就可以进入对应的预设效果。

相关操作你也可以直接看这个视频教程：

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

这就是软件的主界面了，他总共可以分为 4 个操作区域，方便你添加数据，修改细节：

软件主要可以生成以下效果：

效果 1：飞线图

飞线图常用于制作网络攻击、数据传输……

输入对应的经纬度后，就可以生成点、四棱锥形状的标注、线条、文字以及地面上的水波纹动画。所有的参数都可以自己调整，比如点的位置、颜色、是否带动画、线条的样式……

效果 2：旅游路径动画

如果你需要像朋友展示某一次旅行要去的地方，相信 NB Earth 会给你带来非常清晰直观的效果。

如果你是乘坐火车出行，同样可以把轨迹线条调整成紧贴地球：

效果 3：柱状图

可以直观的在地球上展示柱状图数据。

上图为 2022 年各省的人口数据

效果 4：科技感地球

我试着尝试模拟了一下 github 首页科技感地球的效果。因为软件可以自行上传地表贴图，制作点状的地形贴图后很容易实现非常精美的地球可视化效果。

效果 5：光柱柱状图

由于柱状图的样式可以调节，为了增强科技感，你能够将柱状图设置成发光的形式。

不得不说，这种外发光的柱状图还是挺炫酷。

由于云层可以自己上传贴图，如果想要制作这种 2 层嵌套的科技感地图，也是同样十分方便

好了，以上就是我这款软件的具体介绍了，更多详细的内容等待你自己去探索吧，今天的文章到这里就要结束了，希望你喜欢我的作品。开发不易，点个赞吧~

更多 可视化设计 神器：

数据可视化神器！帮你一秒生成三维地图的免费工具NB Maps 大家好，我是灰色执照。

阅读文章 >

可视化神器第二弹！一秒生成三维饼图的免费工具NB PIE 大家好，我是灰色执照~ 很开心又和大家见面了。

阅读文章 >