首页 官网 后台 B 端产品一直都有不能即下即用的问题，所以今天分享下之前收集的国外可以直接试用的 14 个 SaaS 产品。这只是第一篇，后面会整理更多可试用的 B 端后台，大家可以收藏跟进后续文章。提醒下大家记得提前注册好国外邮箱，gmail 或者 google 邮箱都可，以下产品还是需要邮箱注册使用的。想做B端还不懂什么是SAAS？一篇最专业的扫盲科普（下）有了解和学习 B 端的同学必然都听说过 SAAS 这个词，这在 B 端行业是个非常重要的产品形式和分支。阅读文章 > 想做B端还不懂什么是SAAS？一篇最专业的扫盲科普（上）有了解和学习 B 端的同学必然都听说过 SAAS 这个词，这在 B 端行业是个非常重要的产品形式和分支。阅读文章 > SurveyMonkey（调查问卷平台）SurveyMonkey 是一种在线调查工具，可帮助进行问卷设计、数据分析和展示。可以随时编辑、修改或查询问卷调查结果。涵盖多种类型的 Q/A 模组，内建的题库模组设计包括单选题、复选题、填空题、下拉选单和评分量表等，可供使用者编制不同题型的题组。官网首页后台首页官网： https://zh.surveymonkey.com/SaaS 公司类型：B2B、B2CHubSpot（CRM 后台系统）HubSpot 是一家自媒体营销软件公司，其专注于 CRM、社交媒体营销、内容管理、网站分析和 SEO 的一体化服务平台。前期使用核心产品快速积累了大量客户，之后一直在挖掘这些客户让产品给客户创造新价值，建立了强大的 SaaS 商业模型平台。官网首页后台首页官网： https://www.hubspot.com/SaaS 公司类型：B2B、B2CShopify（电商平台）Shopify 是一站式 SaaS 的电商服务平台，为电商卖家提供搭建网店的技术和模版，管理全渠道的营销、售卖、支付、物流等服务。官网首页后台首页官网： https://zh.shopify.com/SaaS 公司类型：B2CSlack（聊天工具）Slack 是一种协作和聊天工具，其中功能包括聊天、群组管理、多种工具聚合、办公文件工具等一系列企业工作所需的内容。官网首页后台首页官网： https://slack.com/intl/zh-hk/SaaS 公司类型：B2BSalesforce（CRM 后台系统）Salesforce，一家客户关系管理(CRM) 软件服务提供商，总部设于美国旧金山，可提供随需应用的客户关系管理平台。官网首页后台首页官网： https://www.salesforce.com/SaaS 公司类型：B2BJira（OA 系统）Atlassian 提供的产品（例如 Trello 和 Confluence）可以改善软件开发、团队协作、项目管理和代码质量。官网首页后台首页官网： https://www.atlassian.com/zhSaaS 公司类型：B2BMailChimp（网站创建）MailChimp 是一家营销软件公司，拥有三大产品。其主要产品 MailChimp 是一个电子邮件营销平台 ，可让您安排自动电子邮件并跟踪其结果。除此之外，也可以创立自己的网站，用于售卖商品、日程安排等等。官网首页后台首页官网： https://mailchimp.com/SaaS 公司类型：B2B、B2CWix（网站创建）Wix 是一种网站创建工具，是提供给几乎没有网络开发经验的用户，用于更快创建自己的网站使用。官网首页后台首页官网： https://www.wix.com/SaaS 公司类型：B2B、B2CElastic NV（可视化数据展示）Elastic NV 是一个数据分析平台，可帮助用户使用搜索功能以不同方式探索数据。官网首页后台首页官网： https://www.elastic.co/cn/SaaS 公司类型：B2B、B2CSnowflake（可视化数据展示）Snowflake 是一种数据云，可为企业提供可视化数据的能力。Snowflake 在 2020 年的同比增长率为 273%。官网首页后台首页官网： https://www.snowflake.com/Saas 公司类型：B2BCanva（设计工具）Canva 提供的软件允许几乎任何人使用该平台的拖放功能创建精美的设计。官网首页后台首页官网： https://www.canva.cn/SaaS 公司类型：B2B、B2CMiro（协作工具）为办公团队提供在线协作白板工具，支持多人在线协作，可用于制作思维导图、看板、可视化表格、流程图等。官网首页后台首页官网： https://www.miro.com/SaaS 公司类型：B2B、B2CTerllo（协作工具）Atlassian 公司提供的产品，使用看板、卡片和清单来管理团队的项目或者任务。官网首页后台首页官网： https://trello.com/SaaS 公司类型：B2B、B2CInvision（协作工具）美国版蓝狐，Invision 是一款交互原型设计工具，并逐渐发展成为一种基于产品的沟通、协作平台。官网首页后台首页官网： www.invisionapp.com/SaaS 公司类型：B2B、B2C欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/14-saas-products
用户 首页 差异 我最近看了很多大厂/名企的改版复盘后，我发现一个很常用也很好用的设计思路，那就是：用户分层国内大厂的产品大多综合性越来越强，例如卖菜的打车 APP、做直播的音乐 APP、做家政的外卖 APP……为了满足用户需求的较大差异，页面设计不得不变得越来越臃肿。如果设计得好，产品看起来就会像便利店一样，感觉便利快捷。如果设计不好，产品看起来就会像杂货铺一样，整个乱七八糟；由于用户需求差异过大，如果只用一套界面作为首页，难度极高，也很可能导致所有用户都不满意。为了确保几类主流用户的体验，很多产品都会在设计上进行用户分层。简单来说，就是给不同的用户展示不同的页面。这个概念一点也不新，甚至对于信息型产品来说，给用户推荐不同的内容是最基本的。例如同样是视频网站用户，喜欢游戏的和喜欢追星的，看到的内容差异就很大。但是这种内容差异化，属于用户分层运营，并不需要多套设计方案，只要往一个页面塞不同内容就行了。今天我们要讲的，是用户分层设计，必须提供多套设计方案才行。用户分层设计不同于用户分层运营如果只是内容需求不同，用户分层运营就可以了，并不需要设计多套页面。但如果是用户习惯和常用功能上的差异，那就很难用同一套页面框架来应对了。举个例子，喜马拉雅会员购买页，已购和未购状态的就有差异。对于未购用户来说，这个页面主要是展示运营活动，吸引用户下单。而对于已购用户来说，这个页面主要是展示会员服务，并提醒用户续约。这两种状态，如果做简单点也可以合并成一套框架，把文案、按钮之类的换一换也行。如果做复杂了，有时会感觉比较难合并，合并后维护成本反而更高，得出两套设计方案。不同类型的产品对于用户分层设计，有不同的处理方式，大致可以分成以下三类：整体分层局部分层自主选择接下来我就用具体的案例，给大家讲一讲这三种用户分层设计方式：整体分层58 这个产品，有人说是找工作的，有人说是找房子的，还有人说是找家政维修的……以上这种差异，其实也还是可以通过用户分层运营来解决。但是 58 真正的复杂性在于，用户使用习惯的差异：预装型用户是被动地发现自己手机上有这么一个 APP，并不了解功能，需要首页能够快速展示其功能价值，并吸引留住用户。服务型用户把这个 APP 当功能型产品使用，打开时通常有明确的目的，例如找家政服务的。内容型用户把这个 APP 当信息型产品用，打开时目的不是特别明确，大部分时间在浏览查看，例如求职看岗位。58 自己的设计团队也意识到了用户差异的问题，于是设计了三套首页。虽然三套首页都用一些通用组件，底部也都是瀑布流，但是布局和模块都有差异。仔细看看，你会发现预装型首页模块更加丰富，能够更多地展示功能价值，吸引用户尝试使用。服务型首页功能模块更加精简，重点更突出，使用起来更加快捷方便。内容型首页强调信息的展示和社群入口，功能入口反而是露出最少的。局部分层作为投资理财类产品，蛋卷基金对于用户分层做得更细致。购买基金的用户之间，最大的差异是未购买过的用户和已购买过的用户，前者更需要学习引导，后者更需要了解行情。虽然这两大类里面，也还是有很多小类别，但这些是有办法用页面内的模块设计解决的。所以最终蛋卷基金只在信息展示区块进行用户分层设计，并没有做整体差异化。改版上线效果，也是很不错。自主选择前面说的案例，都可以根据渠道来源和使用记录来进行对用户进行自动归类，并进行差异化设计。但有些时候，用户的区别很难自动判断，这时就需要让用户自己选择了。例如智联招聘 APP，进去后就会让你选择身份，进去后的流程和界面完全不同。起点阅读 APP 也允许用户自主切换页面样式，提供了图墙和列表两种形式来展示信息。他们之所以不提供一个统一的方式，就是因为数据发现，这两种模式的数据表现一半一半。既然用户各有喜好难以找到好的统一方式，就干脆都放出来，让大家自主选择。总结大部分情况下，我们都是希望方案越少越好，所以会尽量在首页上满足各类人群的需求。但是对于一些用户群明显较为复杂的产品，进行用户分层设计，反而比统一方案更简单。如果真的遇到反复讨论都举棋不定的情况，那就可以考虑考虑使用用户分层设计了。想成为高薪的增长设计师，先学会用户分层！用户分层是用户运营中常见的一个概念，简单理解就是指将用户分为不同类型，并根据不同用户提供差异化的内容和服务。阅读文章 > 欢迎关注作者的微信公众号：「体验进阶」本篇来源：优设网原文地址：https://www.uisdc.com/user-stratification-design
首页 容器 官网 vivo 官网 APP是什么？vivo 官网 APP（下简称官网）作为 vivo 手机内置的应用，是提供 vivo 产品 / 服务 / 权益 / 资讯 / 社区的线上官方阵地，也是陪伴 vivo 用户「购机」至「换机」周期的重要角色。因此，官网的产品体验和设计品质，很大程度上决定了用户对 vivo 品牌的认知，保证官网设计品质，是保证 vivo 品牌正向认知的关键一环。vivo 官网 APP 首页为什么改版？随着业务的发展迭代，官网开始出现设计不统一、品质下降等问题，在首页表现得尤其明显，因此设计师发起了官网的设计升级，先从首页入手，提升首页界面的统一性和品质。基于用户&业务视角看「品质」优化首页容器是关键官网首页定位「精选」，聚合产品、权益、服务、社区等内容，满足用户需求。从用户视角看，首页存在 2 种场景：1. 头部搜索、金刚区为「明确目的场景」；2. 头部以下内容区为「无目的场景」。前者提供功能入口，满足用户明确的需求；后者展示内容，满足用户闲逛的需求。明确且固定的「功能入口」，经过长期认知培养，转化趋于稳定，优化空间较少；而时常更新的「内容」在呈现上的好坏，影响用户对 vivo 品牌的印象及浏览欲望，决定首页留存和转化。因此优化「容器」，使内容更好地呈现给用户，是本次设计升级的核心。从业务视角看，今年官网首页的内容运营将围绕「人-货-场」概念，通过分析用户（人）特征，将信息（货）推送给相应的用户，「场」是最后呈现信息的地方，即「容器」。业务方希望用更精简的容器规则去满足不同的「人-货」需求，做到「少样式」对「多场景」，构建内容展示标准，用更精简、易理解的样式，让用户聚焦到信息本身。乱，多，不全是首页容器的核心问题走查首页，发现如下 3 个问题：1. 容器样式乱首页容器样式多且乱，无章可循。需结合产品定位及功能诉求，梳理容器设计，定义标准。2. 信息冗余无效信息多，如「独立显示芯片」这种言之无物的信息，又如社区帖子密集的信息，都造成了信息过载。3. 信息展示不全首页经常出现信息不全的状态，对品质影响极大，用户无法获取有效信息。头部品牌的官方商城设计都崇尚「简洁」美学了解自身问题后，我们对各行业头部品牌的官方商城进行分析，以此了解行业设计趋势。1. 简洁的直观印象纵览他们的首页，扑面而来的是「简洁」，这是最直观的印象。2. 简洁从何而来深入分析其设计，可发现简洁背后 3 个核心共性：有限的容器：限制了基础容器样式的数量，最多不超过 3 种。有限的信息：限制内容在首页展示时的信息数量和信息容量。明确的优先级：图片是界面视觉焦点，辅以简洁的标题 / 价格 / 标签等文字信息，多数品牌去掉冗长的卖点。3. 简洁背后的意义「简洁」是美的，但信息精简、色彩素雅等特点也常被定性为「气氛弱」、「吸引力低」，尤其在销售领域。那为何这些品牌会将「简洁」的设计美学引入商城界面设计呢？这背后隐含消费者的认知心理。在追求功能性及性价比的消费领域，商品满足消费者物质层面需求，购买动机是功能、卖点、价格等利益点，因而在传统快消电商界面的设计中，更注重利益点、界面气氛对消费欲望的刺激。而在追求高品牌溢价的消费领域，商品满足精神层面需求，如身份&价值认同，购买动机围绕商品的设计品质、是否符合自己的社会属性等方面，过分强调利益点及界面气氛反而会影响品牌调性，使品牌优势被减弱。这类品牌商品的展示更聚焦在商品本身，「简洁」的设计美学就与品牌目标相得益彰。用「至简」的理念重塑vivo 官网 APP 首页用户认知规律、业务诉求及行业趋势的分析结果，都直指关键词「简洁」，它带来了逻辑严谨、规则明确、标准统一的有序体验，隐于简洁的表象之中，让用户更沉浸地体验内容。这种追求简洁表现、有序体验的理念，我们称之为「至简」，它将指导官网首页改版。1. 容器样式梳理基于「至简」理念，经过梳理和方案尝试，首页的基础容器被优化为 3 类：广告容器即传统意义上的 Banner，本次改版统一了首页所有 Banner 的规格、元素组成、文案排版，包括头部 Banner / 新品 Banner / 穿插 Banner。产品容器即展示产品的容器，新版的产品容器统一了信息架构的逻辑，文案限制在 3 阶之内，提供了「组合型」和「横排型」两种形式，对应不同的场景。组合型容器提供 2 种规格，拥有同样的信息量，根据业务需求自由组合。横排型容器提供 1 种规格，根据业务需求选择「横排」或「横滑」。内容容器即展示品牌、社区内容的容器。该容器统一使用上图下文的信息架构，可随场景进行不同形式的拓展。2. 信息展示优化梳理完容器类型后，对信息展示做进一步优化，解决「信息冗余」和「信息展示不全」的问题。产品信息以热销产品楼层为例：信息布局不合理导致手机型号展示不完整；可配置副标题但文案较多；通过颜色强调价格但价格并无优势。新版的信息做了如下优化：优化信息布局为手机型号腾出更多空间，保证展示完整；精炼副标题的核心卖点，转用限制字数的标签进行强调；不强调价格，引导用户关注产品及卖点。社区、品牌信息以社区楼层为例：首页社区楼层通过精选内容为官网社区引流，其定位是「入口」，旧版首页将社区内容直接平铺，露出了过多的信息，不符合定位的同时，也在首页造成信息冗余的问题。因此新版首页做了大幅度精简，只露出最核心的「标题/来源/互动情况」 信息，在有限的界面里露出更多的社区帖子。3. 视觉规则优化基于容器的优化策略，进一步制定了详细的视觉规则。官网首页由不同大小的容器组成，为了更科学地定义容器规格，引入了栅格。字体上，使用 OriginOS 的定制字体 — 汉仪旗黑，保证可读性及统一性。在设计界面时，在准确体现信息层级的前提下克制使用字号。如容器的文案展示，仅使用了 2 种字号，保持极致的统一和简洁。图形语言同样值得考究。官网的内容信息优先级更高，图形是辅助角色。因此图形设计更关注语义是否明确、元素是否统一、形式是否简洁，而不过分追求差异化。基于 vivo 品牌及产品体现出来的圆润亲近属性，对官网的卡片圆角、图标、标签、按钮等元素做了统一的设定，保证整体的协调一致。色彩体系也从 0 到 1 构建起来。过往迭代中，颜色使用仅凭执行设计师的个人感受，没有标准化。对此，基于 vivo 品牌蓝为官网重新定义标准色卡，包括常规色阶、材质色阶及灰色阶，系统指导颜色使用。基于新的容器规则及整体视觉规则，首页刷新后效果如下图。是结语，但不是结束本次 vivo 官网 APP 的首页改版，从预研、推动、落地到验证花费近半年时间，付出了相当「复杂」的努力。而我们的「复杂」，是为了给用户提供「至简」的设计品质和产品体验。但这并不是结束，首页改版后，将基于全新的设计语言，对全局界面进行翻新，全面提升官网设计品质。赋能 vivo 品牌，我们在路上。用3个国民级应用优化案例，分享我的改版思路以大厂的主流产品为优化实操对象，其实是一个很大的挑战，发现并优化其中存在的问题，对于理解用户体验设计有着巨大的帮助。阅读文章 > 欢迎关注作者微信公众号：「VMIC UED」本篇来源：优设网原文地址：https://www.uisdc.com/vivo-app-redesign
飞翔的企鹅
张大湿
落霞与孤鹜
