首页

设计案例分享 | 人力资源模块界面设计

杰睿

 

产品定位
远东移动门户APP-人力资源模块包含收入证明、在职证明、假期管理、公租房、政策公示等,同时将互动信息在集团公告区互动展示,实现人员管理、交流协同化和一体化。使集团工作更便捷、高效,组织管理更透明化,合理化。
目标用户
远东移动门户APP面向和服务于公司全体领导和员工,是一个综合性、协同性的办公管理系统。本着操作便捷,办事方便高效,沟通及时有效的原则,界面友好易用、简洁美观。
设计风格
视觉方面,整体色调与公司logo及网站主色调红色保持一致。交互上,考虑到使用便捷、省时,提取主要功能按钮放在首页上方;同时,常用的业务模块集中展示,并做精细化处理。保证界面整体性和简洁统一,并做到有主有次,层次清晰。在布局上,做了两套方案供客户选择。第一套更大胆创新,第二套则相对中规中矩。

UI 设计|审美积累 | 拟物化风格(Skeuomorphism)

杰睿

拟物化是指把现实世界的材质、光影和结构带到数字界面中。木纹、金属、皮革、纸张等真实物体的质感,被细致地还原到屏幕上,让用户一眼就明白元素的意义与操作方式。它曾是iOS6之前移动端设计的主流风格,也一度被极简风格取代,但在如今的创意项目和品牌中,拟物化又以精致的小范围应用回潮。
核心特点:
强调光影、渐变、纹理和材质感
元素看上去像真实物体,有层次和触感
图标、按钮、卡片常带高光或阴影,突出立体效果
通过形象化隐喻帮助用户理解功能(例如垃圾桶图标表示删除)
 
适用场景:
游戏UI界面(卡牌、任务面板、背包系统等)
儿童类App、教育软件(通过形象化帮助理解)
复古、怀旧主题的官网或活动页
精致的产品展示页、品牌定制化网站
拟物化能带来强烈的情感共鸣,尤其在需要温度感和可玩性的界面中更显优势。但大面积使用容易产生信息冗余,对资源体积和加载性能也要求高。相比纯视觉风格,它更适合在重点组件、小范围点缀,作为界面亮点出现。
 

5aa03006-e211-49d4-90ee-c797a6caf109.png

9a878ddc-1587-41f1-96d0-a3efeeb6380c.png

85001f9c-4ff6-419f-b0d2-4511ae10546e.png

771615d3-923c-4e5b-b438-22214c0ecb9a.png

b8419aeb-fb14-4b7d-831a-21970dce1e40.png

c3bf255b-6cce-4245-9908-19120727d983.png

更多项目/合作请私信,支持定制设计服务
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

Google如何分组按钮——按钮组功能及其使用方法

杰睿

按钮组(ButtonGroup)是一个将多个按钮以可视化的方式组合在在一起的组件,帮助用户快速识别并操
作相关操作。在M3Expressive中,按钮组通过增强按钮间的交互、布局适配以及层级表现力,提升
了界面的灵活性。

DM_20250701224752_001.PNG


为什么要分组按钮?
现有的按钮只是简单地并排放置,缺乏任何链接交互或按钮之间的视觉统一。
拼中人。简单
Co
在Material3中,我们将按钮组定义为独立的组件,以实现更丰富的表现力和自适应的布局,并提出
了一种名为Connected Button Group的新形式来取代Segmentted Button的作用。
本文我们将了解新增按钮组的功能和使用方法。如果您想了解更多关于Expressive新增的Split Button

配置按钮组
DM_20250701224752_002.PNG
容器
按钮组可以包含各种元素,例如图标、文本按钮等,但其核心概念是"容器",它是一种更高级的结构,
包裹着这些元素并控制其布局和交互。因此,将按钮组理解为一个充当按钮容器的容器,而不是按钮的
集合,似乎更准确。


按钮组的类型
按钮组分为标准按钮组和联动按钮组。
DM_20250701224752_003.PNG
标准按钮组
使用标准按钮组将独立的操作按钮并排放置。
每个按钮都保持圆润的形状,并且按钮之间有一定的间距。在此组中,选定的按钮可以改变宽度或形
状,并且这种变化通常会影响相邻的按钮。整个按钮组被设计:为一个有机的整体。
一般适合展现保存、取消、删除等主要操作,并且按钮的大小和样式根据上下文灵活调整。


DM_20250701224752_004.PNG
链接按钮组
连接按钮组是一种主要用于允许选择多个选项的组件。现有的分段按钮将被连接按钮组取代。
按钮之间物理连接、共享边框或以一致的高度和宽度对齐。用户可以选择一个或多个按钮,并且只有选中的按钮会在视觉上突出显示。这种设计可以有效地传过达清晰的选择状态,而不会影响其他按钮。


它主要用于替代分段按钮的作用,例如过滤、视图切换和排序选项。

 

如何使用按钮组
DM_20250701224752_005.PNG
按钮组使您的产品更具表现力。
标准按钮组增加了相邻按钮之间的交互,使它们相互响应。选择标准组内的按钮时,会发生以下变化:
所选按钮的形状和宽度将会改变。
选定的切换按钮也会改变颜色。
相邻的按钮移动并暂时改变宽度。

 

DM_20250701224752_006.PNG
仅在重要的交互时使用形状变化。
您可以使用不同的按钮类型、宽度和颜色组合来强调重要元素,并在视觉上对相关按钮进行分组。默认
情况下,标准按钮组中的所有按钮应具有相同的尺寸(XS到XL)和形状(圆形或方形)。
·只有在英雄时刻,您才应该在群体中使用不同尺寸。
?混合尺寸并不常用。
仅当选择按钮或需要添加含义或对比时才应使用不同的形状。
区当选择这边以而安添加古文现对比的才应使用个问的形状。

 

DM_20250701224752_007.PNG
可以使用一组链接的按钮在类似的操作之间切换。
链接按钮组可帮助用户选择选项、切换视图或对齐页面上的元素。它们的行为与标准按钮组类似,但不
会影响相邻的按钮。链接按钮组应取代已弃用的分段按钮。

 

DM_20250701224752_008.PNG

如果按钮内容彼此关联且可选,请使用链接按钮组。在购物应用中,链接按钮组用于选择商品的容量,
因此,密切相关的操作在链接按钮组中效果更佳。

DM_20250701224752_009.PNG
使用一组链接按钮来实现单选或多选模式。
对于使用切换按钮的单选或多选模式,应使用链接按钮组。如果所有按钮均不可切换,则不应使用链接
按钮组。

 

DM_20250701224752_010.PNG

一组链接按钮被配置为填充其所在页面或区域的宽度,这会导致内部按钮的宽度也随之增加。在宽屏
上,建议设置最大宽度,以防止按钮组过宽。

 

DM_20250701224752_011.PNG
可以根据窗口大小手动调整按钮的宽度、大小和填充。
按钮组应在布局中移动到一行,并且不应换行。您可以垂直堆叠多个按钮组,以使项目保持紧密排列,
但按钮组之间不能进行垂直交互。


手动调整图标按钮的宽度时,避免将其拉伸得太宽。

 

DM_20250701224752_012.PNG

您还可以根据窗口大小手动调整一组按钮的大小、形状和填充。
在小窗口中,最好使用较小、较窄的按钮来容纳按钮组中的所有按钮,而在较大的屏幕上,最好使用较
大、较宽的按钮来有效地填充可用空间。
灵活按钮或按钮组会根据窗口大小自动调整其宽度。

DM_20250701224752_013.PNG

必须在布局和设备之间保持一致的层次结构。
当窗口变大时,您应该利用颜色和大小等属性来确保每个按钮保持其视觉层次。例如,主要操作按钮在
所有窗口尺寸下都应保持最大、最宽且视觉上最突出。

 

DM_20250701224752_014.PNG

根据屏幕的大小,按钮应该在荣单中隐藏或重新显示。
在小窗口中,您可以将按钮组末尾的按钮设置为折叠成荣单,然后在窗口大小增加时重新显示。建议将
荣单放置在按钮组的末尾。按钮组外部的按钮不受按钮组行为的影响。


DM_20250701224752_015.PNG
在标准组中,当您按下一个按钮时,相邻的按钮也会改变宽度...
按下按钮时,其宽度和形状会发生变化。在标准按钮组中,按皮下按钮也会影响相邻按钮的宽度。相比之
下,在链接按钮组中,只有按下的按钮会改变形状,其他按钮丑不受影响。

 

DM_20250701224752_016.PNG

所选按钮应改变形状以实现视觉区分。
选定的按钮应从圆形变为方形,或从方形变为圆形。

 

链接按钮组和分段按钮之间有什么区别?
虽然两者的功能相同,但可以说它们被纳入了一个按钮组,以实现富有表现力的交互。
DM_20250701224752_017.PNG
链接到现有分段按钮的一组按钮。
分段按钮也允许单选或多选,但其配置相对固定,并且视觉呈现受到限制。
链接按钮组在调整按钮的大小、颜色和形状方面提供了更大的灵活性,其视觉交互也得到了增强,例如
根据选择状态改变形状。按钮以连接形式排列,并且只有选中的按钮才会在视觉上突出显示,从而提供
清晰的反馈。
Expressive在这种灵活性和表现力的基础上,逐渐减少分段按钮的的使用,转而采用链接按钮组作为替
代。

综上所述
DM_20250701224752_018.PNG
按钮组是实用的组件,能够直观地将相关操作分组,并为用户提供清晰的上下文。它们旨在直观地展示
按钮之间的关系,并根据屏幕尺寸或具体情况灵活操作,从而在不同界面上提供一致的体验。标准按钮
组有利于实现交互和层级结构,而链接按钮组则有利于清晰的选择结构。然而,形状、尺寸设置以及响
应式设计需要精细的设计。
Material3取代了现有的分段按钮,并提出将一组按钮作为独立组件,以实现富有表现力的UI组合。
这种设计超越了简单的按钮排列,全面考虑了交互、布局和层级,指明了提升整个产品一致性和可用性
的方向。

 

软件开发设计 | 怎么用‘信息架构思维’提升设计效率?

杰睿

“设计的首要任务,不是美观,而是帮助人们理解复杂信息。” ——《信息架构:超越Web设计》
很多人做官网时习惯直接上设计稿,但我想分享一下: 最近做一个企业官网,先用了信息架构思维,结果不仅让老板很满意,后续内容更新也省心了很多。
 
常见误区:先做视觉稿就等于高效? 我一开始也以为先画页面就能快,但很快发现:
客户需要的核心内容没地方放;
产品介绍和解决方案反复修改,页面结构被打乱;
不同人理解的信息优先级不一致,沟通成本陡增。
这些都源于没有先规划信息架构
 
书里有句话点醒我:“信息架构要在任何设计和开发动作之前完成,它是产品内容的支撑结构。”
于是我用了三步:
 
1)卡片分类:把所有需要展示的内容拆成卡片 比如:品牌故事、主营业务、核心优势、合作伙伴、联系方式…… 然后和客户、团队一起做小型卡片分类工作坊,用他们的语言重新组合、排序。
结果:信息对他们自己来说也清晰了,不再互相矛盾。
 
2)搭建组织系统:用树状图规划内容结构 书中提到:“组织系统是支撑信息环境的骨架。” 我把卡片分类结果转成树状架构,先理清首页→一级栏目→二级页面的层级关系,确认每一层放哪些信息。 这一步让后续页面数量、导航设计都一目了然。
 
3)定义导航与标签系统:把内容变成用户可点可找的路径 我没直接用专业术语,而是用客户和用户能懂的标签命名栏目,比如把“公司介绍”改成“关于我们”,把“解决方案”明确细分成“产品服务”、“行业案例”等。
结果:用户可以根据直觉快速定位需要的信息。
 
别把信息架构当成一次性工作 官网内容常更新,要定期复盘:
旧页面是否有信息冗余?
用户搜索数据体现的新需求有没有覆盖?
新增内容如何融入原有架构?
持续维护信息架构能让官网始终保持清晰可用。

0a28130e045582a19f36d5e3fc28490bc8d1a60d26cd56-UPbQAi_fw1200.png

4d711bd2632f511ff6bb73fec0aadd04033886642943c4-iG1VgU_fw1200.png

616cefcf4098c151805e496866e7f9ee6ab173551d19e5-VpdjG6_fw1200.png

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

7天信用卡免费试用的理由

杰睿

哪种客户获取模式更可取——免费试用还是免费增值?

这是 SaaS 领域最古老、最激烈的争论之一。

答案当然是“视情况而定”……但最近我看到越来越多的公司开始使用需要信用卡支付的7天免费试用服务。Outseta 过去两年也一直沿用这种模式,而此前我们使用了近四年的免费增值模式。 

开门见山地说——这种模式并不总是受到潜在客户的青睐,但它往往是最好的模式。尤其是对于小型、白手起家的公司而言。 

无论您是创始人还是客户,本文都会讨论此模型的优点和缺点;我希望您能够更充分地理解这​​些决策的细微差别。

数据——转化率、潜在客户量和新客户 

我职业生涯的大部分时间都在尝试这些客户获取模式,但现在我也能掌控所有客户的数据,因为他们也在尝试这些模式。我每周都会和创始人讨论免费试用版和免费增值版的问题。

虽然情况确实如此,但以下数据专门针对 Outseta——我专注于我们自己的数据,因为我可以证明其干净度,并且我已经在一段时间内获取了等效的样本量,其中业务中的许多其他因素尽可能保持一致。我们的数据所讲述的故事也反映了我在广大客户数据中看到的情况。 

我正在对 3000 多个免费增值注册和 3000 个免费试用进行比较。

转化率

  • 免费增值到付费:7.25%
  • 7天试用信用卡需支付:35%

这里需要注意的是,这两种模型的实际转化率实际上更高——我特意将“转化”计算为转化后30天仍为付费订阅者的用户。这能更准确地衡量谁真正成为了客户。它过滤掉了忘记取消试用的用户,以及那些提前注册试用产品但实际上并没有成为客户意图的用户。

虽然7天试用模式的转化率比免费增值计划高出4到5倍,但值得注意的是,这也带来了很大的阻力——很多潜在客户根本不愿意为了注册免费试用而掏出信用卡。毫无疑问,这种模式下的注册量会比较少。

潜在客户数量

与我们提供免费增值产品时看到的情况相比,7 天试用模式的注册率达到了 43%。

这些是我根据我们自己的实验可以分享的最重要的数据点,所以让我们推断出其影响。

新付费客户

  • 100 个免费增值注册 X 7.25% 转化率 = 7 个客户
  • 43 次免费试用 x 35% 转化率 = 15 个新客户

通过放弃免费增值模式并采用需要信用卡的 7 天免费试用模式,我们能够有效地将增长率翻一番。

虽然这是事实,但这个故事和话题还有更多值得思考的地方。

历史背景

2017 年推出 Outseta 时,我们最初采用的是免费增值模式,用户最终会超过一些使用门槛,转而使用付费方案。我们的想法是给用户足够的时间将 Outseta 集成到他们的产品中,而我则致力于构建一个尽可能最方便用户的获取模式。

这就是我所接受的思想流派——我喜欢这种模式,我希望有一天我们能够回到这种模式。

话虽如此,随着人们对 Outseta 的兴趣日益增长,我们很快发现支持量也随之增长。我们花费了大量时间来支持不付费的客户——其中许多客户我们投入了数月的时间,结果却眼睁睁地看着他们放弃或完全关闭他们的项目。 

对于一个小型的、自力更生的团队来说,这不可能是更大的资源浪费。 

我们故意矫枉过正,在短时间内进行了不提供免费增值产品或免费试用的实验——我之前写过这方面的文章。我不推荐直接付费模式,因为我认为买家应该有机会在购买前先试用一下软件。

通过7天免费试用但需要信用卡支付的模式,我们找到了一个绝佳的折中方案。它让客户有机会试用我们的软件,使我们的增长率翻了一番,也让我们节省了大量之前浪费在非付费客户身上的时间。这让我们能够投入更多时间在产品和付费客户身上。

顾客:这不是掠夺性的,而是为了更好地为您服务

虽然听起来很美好,但我明白,很多客户并不热衷于这种需要信用卡支付的短暂试用期。作为一名软件买家,我当然更希望有无限的时间来评估产品,而不用掏出信用卡!谁会不喜欢呢?

但买家常常会误以为这是一种掠夺性的客户获取模式,公司希望你忘记取消试用,这样他们就有机会向你收费。这真是大错特错!

事实上,我们明确地试图避免这种情况——它会导致高流失率和退款。发生这种情况时,没有人是赢家。为了解决这个问题,我们:

  • 明确告知您将在 7 天后付款,但您可以随时取消
  • 我们会发送提醒电子邮件,告知您试用期何时到期
  • 如果某人的试用意外转换,我们始终提供退款

我们时不时会收到一些咄咄逼人的邮件——通常是有人要求我们让他们无需信用卡即可注册,或者有人要求我们提供非常长的试用期(通常为3-6个月)。我会礼貌地拒绝这些请求,并花时间解释我们的理由。 

偶尔,我们会收到“嗯,你肯定不想做我们的生意”这样的回复——再说一遍,这完全是错误的。我可以肯定地告诉你,我们确实想做你的生意。但当有人注册 Outseta 时,我们承诺帮助他们通过我们的产品取得成功。 

我们做了很多同等价位其他公司做不到的事情——我们会接听您的电话;如果您需要技术支持,我们经验丰富的软件工程师将竭诚为您服务。我们不会把您的问题交给无法解决的初级员工——我们为此感到自豪,并相信 Outseta 平台上将会有更多成功的项目上线。

所以,我们并非不想与您合作,而是我们刻意缩小了我们的范围,更好地服务于一小部分愿意放下卡片的人。如果您愿意,您可以加入这个群体——选择权在您手中。

我们对您做出了相当大的承诺,因此我们同意要求您对我们做出小的承诺。

虽然我并不是说这是“正确”的方法,但我经常看到的替代方案也值得考虑。 

许多提供免费增值产品或延长试用期的公司都得到了风险投资的支持——从扩大支持团队到价格上涨,您不可避免地会以其他方式感受到其影响。

还有很多公司干脆选择打开闸门,提供糟糕的支持——他们只帮助那些有巨大潜力的客户,而让其他所有人都有令人沮丧的支持体验。 

我们经常听到的最后一句话是:“我得先赚钱,才付钱给你。” 作为一名白手起家的创始人,我完全理解并欣赏这种说法——但这也不是商业运作的常态。商业就是把时间、精力,当然还有金钱,投入到一个想法上,希望能够盈利。它并非毫无风险。 

这里的重点很简单——总有取舍。虽然 7 天免费试用模式可能感觉不太利于客户获取,但它让我们能够以其他方式更加贴近客户。

创始人:关键在于找到合适的

我希望更多的创始人认识到,你的业务中有些部分应该针对客户进行优化,而你的业务中有些部分也应该针对你的业务进行优化。

您需要找到适合您的情况的内容。

例如,我们可以在 Outseta 再次提供免费增值产品——就初始产品评估而言,这是一种更利于客户的获取模式。但之后,我们可以将实际产品的价格提高三倍——免费增值模式带来的额外曝光度和更高的价格点,使我们能够提供我们引以为豪的客户服务。

哪种场景对客户更友好? 

总是会有一些付出和收获。

许多创始人(和客户)也经常问我试用期有多长,并说“7 天根本不够”。

我已经尝试过很多次了。我给创始人的反馈是,较短的试用期几乎总是更好的选择,除非你的业务运营模式具有某种周期性——用户需要特定的时间段来有效地评估你的产品。 

否则,延长试用期只会滋生拖延,让人缺乏真正评估产品的紧迫感。7天后和14天后收到的延长试用请求数量一样多——我测试过,结果一致。

“试用”应该是给某人一个尝试你的产品的机会——它并不是邀请人们只在方便的时候才开始付款。

我经常会这样回复潜在客户:

我们的 7 天试用期旨在帮助您主动评估我们的产品。如果您准备好开始评估,请随时开始试用。

事实是,如果您真正坐下来思考这个目标,您绝对可以在 7 天内评估几乎任何产品是否适合您的需求。

人性化很重要。我一直会花时间分享我们采用这种模式的原因,以及免费增值产品和延长试用期为何会给我们的业务带来问题。每次我分享这些内容时,收到的反馈都非常积极。这或许反映出我们主要向其他创始人销售产品(他们也能理解我们的处境),但每次分享我们的理念时,收到的真诚理解的回复数量总是让我惊喜不已。

最后,或许也是最重要的一点,刻意缩小我们的圈子绝对帮助我们建立了有效的口碑和推荐。我们投入在43家公司的时间比投入在100家公司的时间还要多。我们经常被告知,我们提供的贴心客户体验和服务水平是许多其他软件公司所不具备的。这很难量化,但口碑是最有效的营销策略。

收入优化并不是一切

关于免费试用与免费增值主题的文章大多集中在收入优化上——毫无疑问,这些都是客户获取模式。

我的观点是,这其中往往还有更多内容——你使用的模式需要适合你的业务。我在本文开头就说过,我喜欢我们最初的免费增值模式。它对用户非常友好,在 Outseta 早期,它最大限度地增加了我们产品的曝光人数。

但企业的需求是有季节变化的——过去几年,需要信用卡的 7 天试用模式非常适合我们的业务。 

这并不意味着我不会对免费增值模式回归的那一天感到兴奋;事实上我相信那一天终将到来。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

干货分享 | 5分钟教你读懂一个网站的组织系统

杰睿

“组织系统定义了信息是如何被分组、标记和结构化的,是信息架构的核心。” ——《信息架构:超越Web设计》
一个网站找不找得到东西,往往不是页面不够漂亮,而是它的“骨架”出了问题。
 
5分钟教你读懂一个网站的组织系统 别急着吐槽“这个网站太乱了”,我们可以先快速看清它的底层组织逻辑。 看懂之后,你不仅能找信息更快,还能像信息架构师一样,判断它为什么难用
 
第一步:识别组织系统的类型 书中提到,常见的有 3 种组织系统
层级式(Hierarchical):像树状结构,从大类一路往下找小类。
 举例:淘宝、京东,首页 > 分类 > 品类 > 商品详情页
标签式(Tag-based):通过关键词给内容打上标签,便于横向查找。
 举例:豆瓣、小红书的“标签页”或搜索推荐
数据库式(Database/Faceted):通过多种维度筛选内容。
 举例:招聘网站,按职位、地点、薪资、公司规模多维度组合筛选
 
第二步:判断它靠什么组织内容?
是按照主题组织?(如内容型网站)
按照功能任务组织?(如工具型系统)
还是按照部门/组织结构?(很多B端网站喜欢这样,用户却常常迷路)
书中提醒我们:“你用什么标准组织内容,决定了用户能不能第一眼看懂结构。”
 
第三步:尝试“逆向走访” 挑一个你想找的内容,看你是怎么点进去的 → 你靠的是主导航?搜索?标签?推荐? → 点进后路径清晰吗?有没有绕圈?
这个路径,就是它的“组织策略是否有效”的实战测试。
 
小贴士:在信息架构里,结构不是设计出来的,是选出来的。 你要先了解网站内容的本质、用户的需求,然后再选择适合的组织方式,而不是反过来。
 
温柔总结 读懂一个网站的组织系统,就像看清了一座城市的交通图。 结构清晰,信息才不会堵车;逻辑顺畅,用户才不会绕路。
 
你印象最深的是哪个“特别难找东西”的网站?
欢迎来评论区吐槽/分享,也许我们可以一起改出一个好用的结构图
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

用户体验设计公司审美积累 | 玻璃拟态(Glassmorphism)

杰睿

玻璃拟态是一种通过“毛玻璃”质感制造层次感的视觉风格,它的核心在于“透明而不完全透明”。背景虚化、低饱和的色彩叠加、加上一点高光和边缘描边,让界面看起来像一块块悬浮的玻璃板——清透、未来感强,但又保有一定的视觉秩序。
7df7e3223582989.684a7395c616e (1).png

0ad857ded1430e96cc8c7a17025625f7.jpg

7e79fef9154d6be3a90c416a6dcb9ec8.jpg

8bda27c807087832014ff681b4f578a1.jpg

f067704e7b4e83b329943439238218df.jpg

f2071624b91b0cbfa1246626441abc37.jpg

original-309d218b2f7b012fb02eb381a05267ee.jpg

original-a7522c880d731d08fb11b59f18fa1167.jpg

original-fe5850f5a7494ce96760d5de0e970057.jpg

风格关键特征:
背景虚化(blur)+ 半透明遮罩,制造玻璃质感
常用渐变色、霓虹色或轻微光感增强视觉层次
元素之间有明显的空间关系,但不会很立体
字体通常保持清晰锐利,和背景形成对比
常见应用场景:
桌面系统、操作中心(如 macOS、Windows 11 控制面板)
创意型产品落地页、品牌官网、视觉呈现型App
智能设备界面,尤其适用于现代感、科技感产品
使用体验观察: 玻璃拟态视觉效果很抓人,但落地门槛不低: 对背景图、模糊参数、颜色对比的控制要求很高,做不好容易显得“脏”或“花”。另外,它对性能也有一定要求(移动端大面积使用会拖慢加载)。 所以更适合用于重点视觉区域、卡片容器、导航面板,而不是整套系统大面积通用。
实操建议:
结合深色背景或渐变背景更容易出效果
注意文本清晰度,可加暗影或颜色叠加提升可读性
你在哪个产品里看到过让你惊艳的玻璃拟态设计?欢迎分享案例,一起挖掘它的高效用法~
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

Hannah & Henry 如何通过产品页面优化将收入提高 45.67%

杰睿

Hannah & Henry是一家澳大利亚电商品牌,专营时尚婴儿尿布包。在本案例中,我们将探讨他们如何应对这一挑战,并将收入提升 45.67%。

认识汉娜和亨利

Hannah & Henry 不仅仅是一家电子商务商店——它是一个源于母亲愿景的激情项目。 

该公司由Elaine创立,她是一位两个孩子的母亲,渴望将个人风格与实用功能完美融合。她致力于打造一系列能够体现自身风格和价值观的尿布包,这促成了Hannah and Henry的诞生。Hannah and Henry对品质、耐用性、可持续性和客户满意度的执着追求,为他们的电商之路树立了高标准。

该品牌的使命是为父母提供设计师和日常婴儿配件的融合,使其无缝融入他们的生活。

挑战

产品详情页是电商网站流量的重要入口。然而,他们却难以提高这些关键页面的转化率。

由于大多数访问者跳过主页并直接进入产品页面,因此挑战在于大规模优化这些页面。 

现在,想象一下,你想为你的产品页面写一个有创意的标题和摘要。假设效率最高,这个过程至少需要10分钟才能完成一页。 

以 Hannah 和 Henry 为例,他们有 134 个产品页面。如果乘以 10 分钟(134 x 10),就是 22 个小时,几乎相当于连续工作三天。这看起来有点吓人,对吧?

解决方案:智能产品页面优化器

如今,在人工智能的帮助下,智能产品页面优化器等工具正在改变产品页面优化的世界。 

Hannah 和 Henry 节省了 3 天的工作时间,因为 AI 仅用几分钟就为他们完成了此产品页面更新。 

该工具利用人工智能来: 

  • 提出引人注目的口号

  • 创建引人入胜的描述,并且 

  • 确定最佳产品评论。 

除此之外,该工具还可以运行 A/B 测试,以找出最适合你的受众的版本。Hannah & Henry 决定测试其产品页面的多个版本,探索不同的标语、产品描述和评论组合。 

原始版本作为对照,同时引入添加元素的变体以观察其影响。

查看控制版本(又名版本 A):

Hannah 和 Henry 产品页面的控制版本

B 版包含一个口号和一个产品描述:

Hannah 和 Henry 产品页面版本 B

C 版包含评论、口号和产品描述: 

Hannah 和 Henry 产品页面 C 版

最后,版本 D 包含一条评论和一句口号(但没有产品描述):

Hannah 和 Henry 产品页面版本 D

结果

包含评论、口号和产品描述的版本 C表现优于控制版本,收入增加了 45.67% 。 

这表明了为观众定制内容以吸引更多客户并推动转化的重要性。

总结

Hannah & Henry 的经历提醒我们,产品页面在将品牌价值与受众联系起来方面发挥着关键作用。 

他们的故事凸显了当今先进的人工智能工具所带来的机遇。他们利用 OptiMonk 的智能产品页面优化器提升了客户体验,将普通的网站访问变成了一次探索育儿之道的愉悦之旅。

为成功做好准备:为高增长企业建立实验计划

杰睿

Dollar Shave Club 最近投资了一款顶级的 A/B 测试工具。我们聘请了 Conversion 来指导 Dollar Shave Club 的实验项目,并希望通过该工具获得积极的投资回报。在三个月内,我们启动了足够多的成功实验,不仅收回了该工具的全部成本,还支付了我们每年的服务费。从那时起,我们得以扩展该项目的权限,与 Dollar Shave Club 的内部团队紧密合作,加快了速度,并构建了一个以洞察力为导向的项目,为业务各个领域的决策提供信息。

机会

作为男士美容领域的全球领导者,Dollar Shave Club (DSC) 深知创新和实验的重要性。 

事实上,DSC 的领导团队非常热衷于实验,以至于决定构建自己的内部测试工具 - 但这带来了一些无法预料的复杂情况:

由于启动新测试需要工程资源,DSC 团队不得不在开发新功能和启动新实验之间做出选择。这导致优先级排序只能靠猜测,结果往往是大型项目获得优先考虑,而规模较小、容易实现的测试机会则被搁置。 

结合其他相关问题,这意味着该计划和工具都没有产生最初希望的影响。 

DSC 运营副总裁 Tsega Ortega 认为,如果企业想要成功进行实验,就必须放弃内部工具,转而投资外部测试工具。 

考虑到已经进行的大量投资,再加上外部工具的大量成本,该提议在内部遭到了很大的反对。 

该项目具有很高的知名度,风险很高,因此 Tsega 必须能够立即显示该工具的积极投资回报率。 

不幸的是,我们很快就发现,测试工具本身提供的服务不足以使该计划成功——这就是我们介入的地方:

实施转换的短期目标是推动直接影响并从测试工具投资中获得积极的投资回报。 

从长远来看,我们的任务是促进整个企业采用实验,同时利用实验来产生重要的客户洞察,这些洞察可以在整个企业传播,以发掘新的机会并加速增长。 

克服惰性

作为一家以客户为中心的企业,Dollar Shave Club 渴望了解用户不断变化的需求和愿望,它已经进行了一些非常强大的基础研究,我们可以利用这些研究来指导我们工作的第一步。 

这项研究——一项针对男性个人护理购物者的家庭和店内定性民族志研究——得出了两个核心见解。 

  • 男性美容购物体验中存在很多惯性:除非有充分的理由,否则男性不太可能更换品牌。 
  • 这种惰性也会影响到购买习惯:大多数男性都会购买现成的美容产品,并且不愿意转向在线订购。 

这意味着 DSC 不仅要说服潜在客户更换品牌(这本身就是一个很大的要求),还要说服这些客户改变他们的购买习惯。 

我们知道这会很困难——改变根深蒂固的行为总是一场艰苦的战斗——但凭借在行为科学方面的丰富专业知识,我们有信心能够产生预期的影响。

解决方案

自 2012 年成立以来,Dollar Shave Club 利用病毒式营销做出了巨大努力,打造了一个有趣、易于交流且深受喜爱的品牌。  

不幸的是,当我们进行研究以了解网站的情感基调和品牌感觉时,我们发现这种趣味性根本没有转化为数字体验。 

这是一个大问题。 

 

控制:漏斗中的原始副本是非对话式的,与 DSC 的品牌语调不符

《哈佛商业评论》的研究表明,与企业有更情感联系的顾客转化率更高,而且会花费更多钱(平均 52%)。

哈佛商学院关于情感共鸣影响的数据

因此,我们假设,如果我们能够改善漏斗的情感共鸣,我们就可以增加用户与品牌的情感联系,从而增加我们产生的订阅数量。 

在我们的第一次实验中,我们选择调整漏斗前两个步骤的副本,从清晰但正式的语气转变为更具对话性的语气。 

 

 

变化:漏斗中的新副本轻松且具有对话性,与 DSC 的品牌语调更加匹配。

值得强调的是:这种小规模的测试正是之前会被屏蔽的那种。然而,当我们用这个版本的漏斗模型与原始版本进行A/B测试时,它的订阅量增加了5.24%。 

这有力地证明了小型测试可以产生的影响。 

更重要的是,这次测试的经验——情感共鸣是业务转化的关键因素——迅速在整个组织内传播开来。如今,所有新的体验都遵循严格的风格指南,以确保始终保持轻松诙谐、对话式的风格。 

碎片化奖励

我们的研究表明,另一个可能富有成效的杠杆是感知价值:如果我们能够找到一种方法来提高产品的感知价值,我们就有更好的机会说服用户改变他们的品牌和购买习惯。 

当我们对订阅漏斗进行启发式分析时,我们注意到大多数产品都是以捆绑销售的形式呈现的。虽然这种做法看起来不错——图片也很美观——但它违反了行为设计的一个众所周知的原则: 

一次性成本和碎片奖励。 

通过把成本集中在一起,你就能最大限度地降低它们被感知的重要性(就像撕掉创可贴一样)。通过细分奖励,即将它们拆分开来,并分别强调每个奖励,你就能增加每个奖励的关注度,从而提高整体感知价值。 

我们认为这是一个提高 DSC 订阅服务感知价值的机会,因此我们决定重新设计某些页面元素:具体来说,我们单独分离出每种产品,并包含作为每种单独产品一部分的物品的要点清单。 

 

在对照组(左图)中,产品和功能被集中显示。在变体组(右图)中,每个产品(及其功能)被拆分并单独显示。

然后,我们在 A/B 测试中将此新版本的页面与原始版本进行比较,结果订阅数量增加了 11.2%。

这本身就是一个巨大的成果,但是当我们分析这次测试的数据时,我们意识到还有很大的改进空间……

迭代以产生影响

虽然转化率显著提升,但我们发现很多用户仍然使用“更改您的选择?”链接在不同页面之间来回切换。这被称为“跳跳跳”(pogosticking),从用户体验的角度来看,这通常是一个不好的迹象。

 

虽然订阅量有所增加,但进一步分析显示,‘pogosticking’ 用户的比例高于预期。

在这种情况下,pogosticking 表明用户来回查看不同产品如何影响价格。 

为了解决这个问题,我们在原始测试的基础上进行了迭代,创建了一个新版本,从一开始就明确了捆绑折扣 - “您有资格享受 15% 的 Handsome 折扣”(另外,请注意这个有趣的折扣名称,与 DSC 的品牌完美契合)。 

我们还想了解移除默认复选框对用户体验的影响,以及如何帮助用户理解优惠信息。因此,我们创建了第二个变体,取消了一些最初选中的产品。 

然后,我们在 a/b/c 测试中将这两个变体与之前的获胜者进行对比。 

 

在第一个版本(中间截图)中,我们添加了文案,以帮助阐明捆绑折扣。在第二个版本(右侧截图)中,除了阐明优惠之外,我们还取消了默认复选框的勾选。

正如预期的那样,第一个版本将转化率额外提高了 1.5%。更令人印象深刻的是,第二个版本(取消选中复选框)将订阅数量提高了 6.8%。 

这意味着,通过两次实验(最初的拆分测试及其迭代),我们能够将订阅转化率提高 17% 以上。 

结果

在我们合作的最初三个月里,我们就能够产生足够的额外收入来支付我们服务和测试工具一整年的成本。 

事实证明 Tsega 的信念是正确的——保证了爱尔兰获得积极的回报。 

在顺利实现初始目标后,我们随后的任务是将工作范围扩大到远远超出最初的范围。 

这项更广泛的职责的一部分涉及审核DSC现有的实验能力。我们运用PACET框架来识别DSC现有实验设置中的任何瓶颈和障碍。在此基础上,我们与DSC的内部团队密切合作,弥补任何不足,并在必要时提供技能提升。 

此次职责扩展的另一个要素是将实验的影响扩展到整个业务。一方面,我们只是利用实验来优化订阅之外的其他关键增长指标,例如货币化和留存率。另一方面,我们确保实验能够指导所有业务部门的决策——从市场营销到产品,从工程到设计。 

总而言之,该计划取得了巨大的成功。 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

两个 Instapage 定价页面 A/B 测试:我们测试了什么?我们学到了什么?

杰睿

定价页面 A/B 测试

 

 

过去,Instapage 网站团队会分别测试主页的标题、客户徽标、推荐等内容。之后,还会测试图片和 MP4 动画。毫无疑问,每次测试都会揭示一些有趣的见解。但主页的 A/B 测试是一回事,因为它是你的在线店面,人们可以从网上的各种渠道访问它。

然而,定价页面需要用户进行更多的搜索——他们必须在进入任何其他网站页面后点击导航标题。

对于这些受众,我们仍然希望了解用户与页面的互动情况,以及哪种版本能带来更多免费试用注册和企业演示请求。今天的文章将重点介绍这些实验。

我们为什么要对定价页面进行 A/B 测试?

 

定价页面最能引起我们网站访客的兴趣。毕竟,潜在客户需要向公司分享一些重要信息,例如价格和功能,才能开始使用像 Instapage 这样高端的产品。

此外,定价页面是客户旅程的关键部分。对漏斗进行测试和实验至关重要,以寻求可以提高转化率或改善客户体验的改进方法。

实验#1:页面布局

 

我们测试了一种布局变体,用于展示自助服务和企业计划之间的功能比较。Instapage 网站自最近重新设计以来,一直保留着原来的定价页面布局。该变体是为重新设计而创建的额外模型。

我们以 70/30 的比例(70% 访问原始页面,30% 访问变体页面)对所有访问该页面的访客进行了测试,这样可以让大量访客与变体页面进行互动,并生成具有统计意义的数据。通过跟踪与转化操作相关的目标,我们可以判断改版是否对目标产生了影响。

这是原始页面设计(请注意并排的长功能列表):

定价页面 A/B 测试 Instapage 原版

以下是针对原始版本测试的变体(请注意如何根据客户计划分离出功能):

定价页面 A/B 测试 Instapage 变体

(注意:上面的截图来自之前的测试,与我们当前的实时定价页面不同。内容可能不匹配,不应反映 Instapage 的当前定价和计划选项。)

最初的假设是什么?

 

我们最初的设想是,重新设计后,Instapage 的各个套餐功能将更容易被访客看到,并新增一个企业版专属功能。当然,这次测试的目标是增加免费试用注册量,以便新用户能够全面评估 Instapage 平台。此外,我们也希望提升转化率,并增加企业版的咨询量。

结果向我们展示了什么?

 

结果表明,原始版本在所有用户群体中的表现都优于变体版本。我们将受众群体划分为四个用户群体(新用户、回访用户、自然流量和付费流量),以确定用户在站内行为方面是否存在显著差异。

除了免费注册转化目标外,我们还分析了页面停留时间、退出时间和跳出率:

定价页面 A/B 测试 Instapage 变体

实验 #2:并排功能比较

 

我们的第二个定价页面实验是我们原始设计显示并排功能比较方式的变体。

最初,定价页面将最受欢迎或差异化程度最高的功能显示在页面顶部。然而,大多数其他功能都被隐藏了,但访客仍然可以点击按钮显示完整列表,进行并排比较。团队决定进行一项调查,看看仅显示这些顶级功能时,用户是否有足够的信息来注册免费试用。或者,如果在长列表中显示所有功能,是否会提高转化率。

我们到底测试了什么?

 

我们测试了原始布局(来自重新设计和实验 1),并使用了一个在页面加载时显示所有功能的变体。同样,我们进行了 70/30 的受众比例划分,并等待页面显示足够的数据,以便将其作为性能的显著指标。我们还保留了与上一个实验相同的免费试用注册目标。

最初的假设是什么?

 

我们最初的假设是,如果我们向用户展示精简版的功能列表,就能提供足够的信息,让用户注册免费试用,而不会让访客感到不知所措。我们预计原始设计的效果会优于版本,但也想挑战我们的假设,并对前面提到的四个受众群体的用户行为感兴趣。此外,团队也很好奇,全面展开的并排功能比较是否会影响我们收到的企业演示请求数量。

结果向我们展示了什么?

 

本次实验的初步结果表明,变体略胜原版。为了确认测试结果,我们分析了跳出率、页面停留时间和转化率等其他性能指标,以确保变体胜过原版:

定价页面 A/B 测试 2 Google 优化数据

结论

 

当前版本的定价页面采用的是扩展视图,所有功能都并排比较。如果没有对页面进行拆分测试,Instapage 团队不可能得出如此自信的结论。

您可以访问定价页面,查看 Instapage 套件的完整功能列表并申请演示。或者,立即获取您自己的定制演示。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档