UI走查中95%的问题源于“间距不准”，而肉眼难以量化，导致沟通低效。DevTools（浏览器开发者工具）作为设计师与前端的“共同尺子”，能将页面视觉问题转化为可测量、可验证的技术事实。本文从设计师视角系统讲解如何用DevTools高效走查，希望可以帮到大家。

如果你经常参与 UI 走查，应该会有类似的体验：设计稿里一切工整、呼吸感刚刚好，到了线上页面，总有种说不出的别扭——按钮看起来有点胖，列表挤成一团，弹层莫名“顶头”——你明明感觉哪里不对，却很难说清楚问题到底在哪儿。

有一组数据挺扎心：在一次前端对UI 走查问题的统计中，“间距”占到了 95%、字体相关只有 3%、边框背景色等合计只有 2%。

换句话说，大部分“看着不舒服”，其实都跟间距有关系。但是间距很难通过肉眼直接量化，导致设计师走查费时、与前端沟通效率低，前端修改有时也是“跟着感觉来”、难以达到最优效果。

这也是为什么，我把 DevTools（开发者工具）当成 UI 走查的标配工具。

这篇文章，就想从一个设计师的视角，讲讲什么是 DevTools 、如何用 DevTools 做高效的 UI 走查，把实践中总结出的那一整套方法，汇成一条实际好操作的路径。

本文不涉及复杂的代码和技术概念，放心享用。

01 DevTools是什么

DevTools（Developer Tools，开发者工具）是现代浏览器自带的一套网页检查与调试工具，用于查看网页的结构、样式、脚本、网络请求和性能等信息。它能够实时展示页面背后的代码和布局，并允许用户在本地修改样式、观察变化。

DevTools 不是独立软件，而是浏览器内置功能。目前主流浏览器都提供了自己的 DevTools，包括Chrome、Safari、Firefox、Edge等。

DevTools 不是只给前端用的“黑客面板”，而是设计师与工程师之间的一把“共同的尺子”，它能让一个页面的“表面外观”变成“透明结构”：你可以在上面看到每一个元素的真实尺寸、间距、颜色和字体，可以在几秒钟内验证“到底是谁没对齐”，也可以通过临时修改样式，把你脑子里的改善方案可视化地呈现出来。

换句话说，它提供了一种把 UI 视觉现象与技术实现逻辑直接对应起来的能力。

02 开始使用

开始之前，第一步永远是把 DevTools 打开。最常用的方式是：

• 键盘党可以用 Command + Option + I或 F12
• 鼠标党可以直接在页面上右键 →「检查（Inspect）」

很多设计师第一次看到 Elements 面板时，会被大片的 <div> 吓到。

其实可以把它当作“页面骨架实时展开图”：每一层缩进就是嵌套关系，每个标签对应页面上的一个区域。

我们不需要懂它，只需要关注与UI走查密切相关的三个面板：样式Styles（样式规则）、计算样式Computed（最终计算值）、布局Layout（布局体系）。

如果你对英文属性名不够熟，可以在右上角齿轮按钮里，把语言切换到中文，这能降低学习成本。

03 从元素出发

要做 UI 走查，第一件事就是精准选中目标元素，常见方式包括：

方法一：用“选取器”在页面上点选

点击 DevTools 左上角的小箭头

在页面上移动鼠标，高亮所选区域，点击可锁定元素

适合复杂、多层嵌套的界面。

方法二：右键检查

hover到具体元素，右键 → 检查（Inspect）适合按钮、标题、图标等肉眼识别明显的元素

04 把间距「量」出来

既然 UI 走查里 95% 的问题都是”间距看着不对”，学会量间距是最划算的一件事。

有两个方法：

方法一：看 Box Model

要理解间距，首先要认识 Box Model（盒模型）——这是网页布局的基础概念，它将每个元素看作一个”盒子”，由内到外分为四层：content（内容区）、padding（内边距）、border（边框）、margin（外边距）。

DevTools 能将这个模型可视化展示，让你清楚看到每一层的数值，从而与设计稿进行比对，精准定位间距问题的根源。

方法二：hover 实时高亮

在页面或者元素Elements 面板中移动鼠标，页面对应区域会出现不同颜色的高亮框：橙色：margin、绿色：padding。

适合快速巡检整体布局。

05 查看元素样式的双视角

至于颜色、字体、行高等样式，可以从样式Style或者计算样式Computed查看。

视角一：样式Styles（全部规则）

Style面板显示了所有作用于当前元素的样式规则，包括颜色、字号、字重、字体、边框、阴影、圆角。

如果你发现同一个属性，比如font-size，出现了很多次，有的还被划上了删除线。也别奇怪，这代表有多个规则作用于它。

怎么找到哪个是真实的值呢？有两个方法：

一是Styles 面板里的规则，是按从上到下的优先级排列：越靠上的规则优先级越高。我们只需要从上往下找即可。被覆盖的会被划上删除线，不再生效，直接忽略就行。

视角二：Computed（最终值）

二是计算样式Computed面板。

它显示了元素最终的样式，更直观，更适合回答：最终字号是多少？行高值是多少？是否有透明度？宽高是多少？

并且可以勾选“组合”，将这些属性分组显示，分为Layout、Text、Appearance和Other。更易查找。

06 实时修改样式

DevTools 最强大的地方在于：你不仅能看到样式，还能立即修改它，实时预览效果——这让走查从”发现问题”变成了”提出方案”。

修改方式一：直接点击数值

在 样式Styles面板中，找到你想修改的属性（比如 font-size: 14px），直接点击数值部分，就能进入编辑状态。

步骤：点击数值（如 14px） → 输入新值（如 16px） → 按 Enter 确认，页面立即生效

适合快速微调单个属性。

修改方式二：上下键微调

选中数值后，无需手动输入，可以用键盘上下键进行微调：

• ↑ / ↓：每次增减
• 1Shift + ↑ / ↓：每次增减 10
• Option + ↑ / ↓（Mac）或 Alt + ↑ / ↓（Windows）：每次增减 0.1

适合精细调整间距、透明度等需要”试着来”的场景。

修改方式三：添加新属性

如果某个属性根本不存在（比如你想加个 border-radius），可以在 Styles 面板的任意规则块内：

点击空白处 → 输入属性名（如 border-radius）→ 输入值（如 8px） → 按 Enter 确认

页面立即应用新样式。

修改方式四：临时禁用某条样式

有时你不确定是哪条规则导致了问题，可以用”复选框”快速开关样式：

在 Styles 面板中，每条样式左侧都有一个复选框，取消勾选即可临时禁用该规则，观察页面变化。

适合排查”到底是哪条规则在捣乱”。

修改方式五：复制修改后的样式值

当你调整出满意的效果后，可以：

右键点击修改后的属性 → 选择”复制” → “复制声明”或”复制规则” → 粘贴到文档或发给前端

这样你就能把”视觉方案”转化为”技术语言”，大幅提升沟通效率。

注意：所有修改都是临时的，刷新页面后会恢复原样。DevTools 不会改动源代码，只是让你在本地预览效果。

07 状态模拟

许多 UI 缺陷只在 hover、active、focus 状态下暴露，例如：hover 时颜色未变化、点击态几乎无反馈、表单 focus 出现丑陋蓝框。

在 Styles 面板顶部点击 :hov，勾选对应状态即可模拟：hover、active、focus、visited……无需鼠标繁琐操作。

08 布局骨架

当你发现”每个元素单独看都没问题，但整体就是不顺眼”时，问题往往出在布局层级。

这时候，DevTools 的布局 Layout 面板就能派上用场——它能把页面背后隐藏的布局逻辑全部”照亮”。

点击右侧面板中的布局 Layout，会显示所有网格布局（Grid）和弹性盒子布局（Flexbox）。

Grid 网格布局视角

如果点击网格名称（或勾选复选框，或直接在元素Style面板中点击对应的 Grid 标签，三者是联动的），页面中会直接高亮显示网格区域，你可以看到：网格线与区域划分、网格线行号与列号、轨迹大小、区域名称、延长网格线（用于检查模块对齐效果）。

这对于排查”为什么这个卡片没对齐”特别有用。

Flexbox 弹性盒子布局视角

如果点击弹性盒子名称（或勾选，或直接在元素中点击对应的 Flex 标签，三者是联动的），页面中会高亮显示色块、框线，你可以看到：主轴方向（横向还是纵向）、子项的分布方式（居中、两端对齐等）、容器与子项的边界、哪个元素占用了过多空间。

你还可以：点击色块，修改框线颜色、点击定位图标，直接跳转到 样式 Styles 中的对应代码。

这对于排查”为什么按钮挤在一起”或”为什么间距不均匀”非常有帮助。

09 响应式走查

DevTools 的“设备模拟”工具，让响应式问题无处可藏。

观察：导航是否撑开、文字是否过密、元素是否溢出、弹窗是否遮挡、按钮是否掉到底部……

并支持：切换设备型号、改变屏幕宽度、翻转屏幕方向。

10 走得更远一点

当你熟练掌握了 DevTools 的基础操作，你会发现自己开始好奇更深的问题：这些元素是怎么组织的？移动端怎么走查?能不能让 AI 帮我自动找问题？

这些问题没有标准答案，但值得探索。

移动端走查：H5 能用 DevTools，原生要用专门工具

移动端页面分两种：H5 网页和原生 UI。它们的走查方式完全不同。

如果是 App 内的 H5 页面（WebView），你可以通过真机调试，直接用 DevTools 查看。如果是原生 UI（比如 iOS 的 UIKit、SwiftUI），DevTools 就无能为力了，需要用专门的工具，比如 Lookin。

怎么判断一个页面是不是原生？

有几个简单的特征：文本无法长按选中、滑动非常顺滑、动画丝滑、左右滑返回手势明显（iOS）。如果”像网页但又不像网页”，那可能是混合页面——Native 外框 + 内嵌 H5。

AI 自动化走查：人机协作，而非完全替代

有团队已经在尝试用 AI 做自动化 UI 走查，比如让 AI 批量识别间距、颜色、字号等问题。

但目前来看，AI 更适合做”初筛”——它能快速找出明显的偏差，但最终的判断和决策，还是需要人来做。因为很多设计问题不是”对错”，而是”合不合适”。

未来，走查可能会变成这样：AI 先跑一遍，标出疑似问题；设计师再用 DevTools 逐一确认，给出具体的修改建议。这样既提高了效率，又保留了人的判断力。

11 写在最后

当你习惯了这种基于 DevTools 的走查方式，你会发现自己跟以前有一处很大的不同：过去你走查，是在“凭感觉找问题”，现在你走查，是在“用证据找原因”。

DevTools 不是让你变成前端工程师，而是让你能够理解界面背后的结构、逻辑和约束，并提供既符合体验、又便于实现的解决方案。

最终，UI 走查也会从一场“找谁背锅”的会，变成一场“让产品更好”的会——设计师和工程师坐在同一个 DevTools 界面前，说着同一种语言，指着同一份证据。而这，正是一个成熟团队应该拥有的样子。

转载：人人都是产品经理

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

一、网商银行模式

互联网金融贷款的流程和传统金融贷款流程一致，主要分为贷前调查，贷中审查和贷后检查三个部分，而在贷款过程中小微企业由于体量小并且缺乏抵押和担保，呈现出”时间短，资金少，频率高，需求急“的特点，因此小微群体相关数据也呈现出”少、散、乱“的特点，银行难以对小微企业进行有效风险评估，进而无法对小微企业进行放贷，而网商银行通过IT形式赋能贷前调查环节，有效分散放贷风险。

网商银行主要服务的是100万元以内的贷款需求，来自网店、路边店、经营性农户，是小微中的小微。而网商银行的四种数字化普惠金融模式分别是电商模式、码商模式、农村数字普惠金融模式和供应链金融模式。

1.1 农村模式助力生产端风险评估

农村数字普惠金融模式：农村模式和其他模式相比，由于农作物的生长状况检测难以量化，并且受客观因素影响较大，风险度量难度更大。网商银行以数据为媒介，把农村的交易、物流、支付等信息形成信用资产，形成农户自证+多方审核+卫星检测的信息获取渠道。网商银行通过大数据技术服务农户，通过卫星遥感技术对农户的数据进行分析，了解农户的信用状况和经营潜力，为其提供融资支持。此外，网商银行还提供农村金融服务，如保险、支付等，以满足农村居民的多样化金融需求。

政府将涉及农户可公开的数据资源，如农村土地确权、种植情况、农业补贴等与网商共享。运用数字技术，网商银行为县域农户建立专属的数字化风控模型，农村用户就此拥有了更精准的数字画像和更高的数字信贷额度。

而在对农户进行用户画像时，网商银行除了政府提供数据之外还通过卫星照片（通过卫星系统得到这个地块过去一个月甚至一年所有的信息）、通过光谱识别农作物，目前可识别出水稻、玉米、小麦、苹果等主要农作物。农户在手机端圈定自己的地块后，可通过与农业机构记录的土地信息交叉比对验证，实现农户信息认证。网商银行则通过了解农户的种植情况和生长趋势，并结合气候、地理位置、行业景气度等因素，并且通过农商平台如淘宝等平台的交易信息，利用风控模型预估产量和产值，给予农户精准的授信支持。此外，卫星遥感除了可以助力农作物识别及产量产值估计外，还能自动识别汛期等灾害下农户的受灾情况，协助金融机构定向纾困。

网商以5到7天为周期，实时更新卫星影像和识别结果，监测农作物长势，判断作物所处的育苗期、拔节期或收购期等阶段，进而分析农户插秧、打药、追肥以及收割时期的不同资金需求，进而进行授信额度的调整，例如农户授信额度是20万，农户向网商银行申请5万元的贷款，可申请贷款额度就是15万，但是农户在种植过程中网商银行检测到其种植表现不佳，作物生长情况不佳，那么在农户申请打药贷款时，可申请贷款额度就会下降到10万，进而实现贷款额度的动态调整。

1.2 供应链模式聚焦渠道端风险评估

在传统供应链中，经销商和零售商的资金实力越强，对品牌的市场拓展的支撑相应也越强，其本身业务发展的可持续性和健康度也越高。超过70%的品牌经销商都有强烈的资金需求。这由经销商业务模式决定。分解品牌供应链结构，可以发现，经销商处于品牌商和零售终端之间，上有品牌商，下有零售商。

经销商向品牌商采购贷订货时，需预付货款，品牌商基于订单排期生产发货。在向下游零售商铺货时，通常来说，体量较大的零售商与经销商还存在结算账期。

故一般来说，经销商只能垫款进货。遇到销售旺季，除了进货垫款，还要承担库存周转、人工成本和市场营销等费用，因此经销商资金压力倍增。在数字化技术蓬勃发展前，传统供应链金融无法快速满足此时的经销商资金需求。比如过去存在着尽调时间过长、流程复杂、覆盖度有限和授信方案调整慢等问题。

网商银行发布数字供应链金融综合解决方案——大雁系统，通过“1+N²”形式，接入核心企业品牌为其上游供货商、下游经销商、末端小微群体和终端门店，提供高效、便利和风险可控的金融工具服务。

这套解决方案体系包括合同贷、采购贷、加盟商贷、发薪贷，网商贴、票据付、云资金和回款宝等一系列数字金融产品矩阵，目的是解决各行业核心品牌上下游供应链中小微企业的供货回款、采购订货、铺货回款和发薪加盟等生产经营全链路的金融需求。

网商银行通过构建各行业的细分品类的行业研究知识库，将风控授信策略细化到行业品类粒度，以量化手段叠加行业经验的方式，高度把握客户经营周转需求。

在网商银行与旺旺合作过程中，由于疫情之后，二级经销商基本都随着市场规律逐步减少，很多一级经销商直接到终端零售，这也意味着，销售周期拉长，一级经销商资金周转时间更长了，但对于品牌方来说这是供应链的进步，取消了中间二级经销商，更有利于产品的推广。但同时对于一级经销商来说，没有二级经销商则更容易出现资金链断裂的问题。

尤其到了年节，必须牢牢把握住市场的关卡，旺旺经销商需要大量进货，常常会面临备货、仓储的压力，而经销商则因为没有抵押物，在银行贷不了款，流动资金成为了供应商拓展市场的最大难题。

“大雁系统”借助网商银行风控技术模型，与行业特征、淡旺季、以及不同地区消费者的消费习惯等多重因素结合，还能根据商户动态需求快速做出反应、满足其临时提额和更低利率的需要。而且每到新品上市，旺季的时候，额度都会上升，还有对应的补贴和扶持计划。

1.3 电商+码商模式赋能销售端风险评估

1.3.1电商模式：

网商银行背靠阿里，在电商平台上与小微店家合作，通过对电商平台数据的挖掘和分析，获取店家的经营状况、销售额、用户评价等信息，为其提供贷款服务。通过电商平台数据的评估，网商银行可以了解店家的信用状况，从而为其提供融资支持。

电商模式的核心，是依托淘宝、天猫、支付宝等电商生态，利用大数据、云计算等技术手段整合用户历史交易数据、信用数据等，作为授信依据，再根据用户需求提供相应的贷款产品。电商模式打通了阿里巴巴、淘宝、天猫、支付宝的后台数据，极大地降低了信息不对称问题，同时网商银行建立了一系列智能风控模型，利用这些后台数据实现对平台小微企业和小微经营者的批量化信贷审核、放款。

申请贷款的条件是店家要满足年满18周岁、淘宝店铺近两个月内持续有效经营，有有效交易量、店铺信用良好等基本要求。用户在网商银行官网或手机APP完成提交资料、签署合同等步骤即可获得授信额度，最快3分钟收到账款，在贷款正常使用过程中，无需支付利息之外的其他费用，贷款期限最长24个月。授信额度根据申请者的信用情况动态调节。

1.3.2 码商模式：

网商银行与线下小店合作，通过收钱码的使用，获取小店的交易数据，并结合社交网络数据、地理位置数据等进行分析。基于这些数据，网商银行能够准确评估小店的经营状况和潜力，为其提供个性化的金融服务。

传统放贷流程中银行需要评估企业的经营情况，通过调查企业的利润表、现金流表、资产负债表等表单衡量企业经营状况，并且需要企业有相应的担保物或者担保人进行风险担保，而码商模式则通过收款码以及地理位置等客观信息即可进行风险评估。

顾客通过扫描支付宝收钱码向线下小微经营者付款，资金即时到达店家账户,同时网商银行通过共享支付宝平台数据获得店家的收款信息。网商银行基于大数据处理等技术，对店家收付款信息的交易有效性、客户类型、营业周期和经营属性等数据进行甄别处理，预测店家整体的经营能力，并利用多样化的风控模型，为店家建立专属的信用评估体系并且店家通过支付宝收钱码收到的款项笔数越多、金额越大，相应获得的授信额度越高，随着经营的持续，授信额度随之动态匹配。

使用收钱码的小微经营者，使用30天后，连续30天有3笔有效收款就有机会获得贷款资格，如果经营者同时有电商贷资格，或使用过借呗，使用码商模式借款则会更容易。经营者在初期，额度相对较低，但随着经营时间的持续，额度会随收款的增加而提升。网商银行基于电商模式的风控能力和经验创建了多套针对性风控措施，能有效识别经营属性、判断交易有效性、预测商家经营能力，甚至能够在1秒钟内通过转账关系链判断出是个人还是个体经营者，排除虚假交易，并在支付数据基础上结合商圈人流、同类商家经营状况等综合纬度，给用户一个最合理的授信额度。

网商银行发现，沿街的门店，在遇到修地铁、铺设管道等市政变化时，通常会影响未来几个月的经营情况，所以将店铺的地理位置与地图数据进行匹配，结合周边的市政信息、地标建筑、人流情况、买家结构、同类商家情况等，通过复杂的模型处理，能够在几秒钟内计算出店铺未来6个月的经营潜力和风险。

二、数字赋能供应链金融的作用

2.1.满足用户长尾需求或被排斥的需求

网商银行利用多个场景构建风险防控模型，利用多方数据来评估客户的信用状况，对贷款人风险进行有效评估，通过评估风险大小决定给予贷款人的授信额度，贷中网商银行通过实时监测客户的交易数据和行为数据及时发现潜在的风险信号，由此解决传统贷款模式中传统银行因为小微企业风险难以度量而不对小微企业进行放贷的问题，满足了大量小微企业的贷款需求。

2.2.推动关键活动和业务流程创新

网商银行也利用IT技术赋能贷前、贷中、贷后三个环节，实现了对贷款流程的赋能，推动贷款业务流程创新。

网商银行贷前利用数据分析和自动化审批流程，网商银行通过构建“310”模式，即3分钟申请，1秒钟放款，0人工参与，实现贷款审批的快速处理，提高审批效率，缩短客户等待时间。

贷中网商银行通过实时监测客户的交易数据和行为数据，例如在农村模式中可以通过卫星技术定期检测作物生长情况，可以及时发现潜在的风险信号，进行风险预警和风险管理，减少不良贷款风险。

网商银行通过对贷后数据的分析和反馈，可以了解贷款产品的绩效和风险情况，优化产品设计和风险控制策略，提高业务的效益和稳健性。

转载：人人都是产品经理

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

在移动产品的消息模块设计中，「一键已读」早已不是简单的 “清除未读标记” 功能，而是产品平衡用户信息管理效率与核心业务体验的关键设计点。随着产品功能的多元化，不同平台对「一键已读」的设计不再局限于 “有无” 或 “文字 / 图标” 的选择，而是根据消息类型细分、用户操作习惯、产品业务属性做了更精细化的场景适配：部分产品实现了按分类一键已读，部分增加了二次确认与智能筛选，还有些产品将该功能与消息免打扰、折叠做了联动设计。

随着生成式 AI、智能体（Agent）技术的全面普及，人工智能正从工具属性向产品核心架构深度渗透，最新行业数据显示，超 60% 的企业已将 AI 技术融入产品全链路设计，95% 的头部科技公司正加大智能体验的研发投入。AI 不再是产品的附加功能，而是重构用户体验的核心驱动力，如何让复杂的智能技术转化为用户可感知、可掌控、可信赖的体验，成为 UX/UI 设计的核心命题。作为深耕智能产品体验设计的专业团队，我们落地超 300 个 AI 产品设计项目，沉淀出从体验设计到数据指标落地的全流程方法论，助力产品实现技术价值与用户体验的双向赋能。

用户体验地图是产品设计中聚焦用户视角的核心可视化工具，能清晰呈现用户与产品、服务的全流程互动体验，帮助团队挖掘痛点、找准优化方向，实现以用户为中心的设计与决策。本文从基础认知、制作落地到实际应用，全方位拆解用户体验地图的核心逻辑与实操方法，让这一工具真正成为产品体验升级的有效抓手。

用户体验是外卖 APP 的核心竞争力，流畅的点餐流程直接影响用户留存与复购。用户体验地图作为核心设计工具，能从用户视角拆解体验问题、挖掘优化机会，让产品设计从 “功能驱动” 转向 “需求驱动”。本文以外卖 APP 核心点餐流程为案例，拆解体验地图的定义、制作与落地优化全流程，让这一工具成为体验升级的实操抓手。

做设计时，我们总免不了陷入这样的纠结：两个按钮样式哪个更精致？新的图标风格要不要替换原有体系？评论区里永远有人喊着 “A 更高级”“B 更简洁”，但如果设计决策只停留在 “好看与否” 的评判，终究会偏离用户体验的核心。

很多时候，提升产品的服务转化率，并不需要大刀阔斧的改版。那些看似不起眼的 UI/UX 细节调整，反而能带来立竿见影的效果。我整理了 10 个经过实践验证的黄金技巧，帮你低成本优化设计，让用户愿意留下来、愿意完成转化。

在 UI 设计入门阶段，掌握系统原生控件的定义、用法和设计规范，是搭建合规且易用界面的基础。随着 iOS26 对设计风格的更新，不少控件的形态、功能边界和使用场景都发生了变化。本文将以 iOS26 官方组件库为标准，全面拆解核心系统级控件，帮新手快速理清控件分类与设计要点，避开常见误区。

•  

  沟通方式：

  感性沟通——传达“我能让你变得很有品位”的概念，向他们兜售一个关于“理想之家”的筑梦工具；
•  

  设计目标：

  希望能第一时间抓住用户眼球，让用户感知到这是一家高级的公司；
•  

  风格调研：

  在本地用户投票调研中拿到了不俗的票数，说明成功地引发了用户“共鸣”；
•  

  差异化：

  在普遍SaaS网站中，风格比较独特鲜明；
•  

  总结：

  通过大面积的留白、克制的和风配色、以及严谨的网格系统和锐利的直角，去传递产品的专业与品位，旨在先与用户建立情感共鸣。

   

   

•  

  沟通方式：

  理性沟通——传达“我们很厉害”的概念，告诉用户我们在卖一个“解决方案”；
•  

  信赖感强：

  蓝色主色搭配黄色的辅助色，配合线条插画，是日本SaaS网站建立用户信任的“标配”元素；
•  

  风格清晰：

  明确的SaaS风格，降低用户认知成本，同样在本地用户投票调研中拿到了不俗的票数；
•  

  总结：

  符合日本主流SaaS网站的设计范式，开门见山地展示了软件的核心功能、客户案例墙、增长数据，通过“理性沟通”，用最快的速度告诉用户“相信我，我能帮你解决问题”；