官网 用户 产品 官网作为连接产品/企业与用户的第一道门，给到用户的第一印象至关重要。官网就像一个会自述的虚拟人物，我们通过视觉设计赋予它形象，它用符合人设性格的话术，向用户介绍产品/企业。怎样的形象、表述能获取用户好感及信赖，从而建立长期合作关系呢？更多Gtech UED干货：用C端的方法，从3个方面提升B端产品的用户体验！在如今用户为王的时代，用户体验成为一种新的品牌竞争力。阅读文章 > 我们先看下不同公司的云产品官网设计：这 4 个“形象”，除了颜色和 logo 不同，风格都是一样的，语气措辞也大同小异。如果我们拿掉 logo、去掉颜色是怎样的效果？大家是否能在第一时间辨别是哪家公司的官网？话说回来，这几个网站的设计质量都是行业内的较高水准，但同质化严重。是我们被固化思维了吗？是只有这样的 3D 科技风（或是 2.5D 拟 3D)才能体现云平台的产品特点吗？阿里站在行业的前端领跑，凭借其强大的技术实力和设计实力在前几年就开始将其产品官网、APP 的视觉风格逐步 3D 化，并有了阿里动物园大家族，其核心的产品都拥有了形象化 3D IP 形象。在他们领跑的同时，其他大厂不甘落后，纷纷改版意图赶超，久而久之同质化的问题就越来越明显。子曰：“三人行，必有我师焉；择其善者而从之，其不善者而改之。”借鉴学习是很正常的事情，但是在借鉴的同时更应该体现自己的特点，否则就变成了“copy 不走样“了。比如说现在被大量运用的轻拟物 3D 图标，图标风格酷炫科技有质感，但却大大削弱了识别性。由于单个图标本身复杂度就很高，在看的时候大脑就需要去解读识别其含义，当多个图标同时出现的时候，更是造成了识别超负荷。我们单对比下面两组图标，第一组识别度会更高，大多立体图形的轮廓形态不一，彩色占比高，增加了丰富度和对比度；再看第二组图标，大多图标立体形态都是正方体、长方体、圆柱体，相对规整，且彩色占比较少，图标的层次感和丰富度就不足，这样识别度就降低了。《设计师要懂心理学》这本书中提及：要让某个物体易于识别，就用简单的几何图形来画它。这会让构成物体的几何离子更明显，从而使人更快、更轻松地识别该物体。多用二维元素，少用三维元素。大脑以二维形式接收人眼观察到的信息，因此屏幕上的三维图形可能会减慢识别和理解的速度。轻拟物立体图标可以用，但需适量，切忌过犹不及。云产品的官网设计趋同化是一个比较明显可见的例子，此类官网都属于软件服务类产品官网，其他常见官网类型还有企业官网、电商官网（B2C\B2B\C2C\D2C\O2O）、门户网站、综合服务型网站等等。一、万能的 “3W1H”法则在任何事情开始之前，我们都要找到方法和思路，帮助我们顺利的推进项目，这里我又要拿出万能法则了，这是一个基本思路，“3W1H”=What、When、Why、How。What设计官网的目的是什么？你要做的是什么类型的官网？目标用户是谁？他们想要在网站上获取什么信息？When目标用户何时会想要访问网站，存在几种可能触发的场景？Why目标用户为什么会访问网站？为什么没有促成转化？How用户如何搜索到该网站？如何在网站上快速找到有价值的信息？如何操作使用？好的设计是能捕捉到用户心智的设计。设计不仅需要有强逻辑性，还需要明白用户为何使用、如何使用。我们需要了解用户每次每个行为背后的动机和认知是如何的。想他所想，才可以帮助产品/企业最大程度的触达用户。二、官网设计 SOP我们根据以往经验的总结，沉淀了一套官网设计的标准流程，同时针对产品类官网我们定义了一套标准化官网模版，面对矩阵式的家族产品，都可以套用该模版以保证其统一性和搭建效率。那我们以公司企业官网的改版案例带入来看看如何去做官网的视觉升级以及官网设计的标准流程。1. 洞察 & 创意① 项目背景GTech 佳应科技是数字化零售与电商技术服务商，业务遍布中国、新加坡、马来西亚及印尼等多个国家。公司旗下的 SpeedShop 系列产品，其中 speedshop commerce 是企业级电商业务平台，为全球品牌量身打造，助力品牌业务 DTC 全球化拓展；还有 B2B 数字化平台，助力企业实现端到端、全链路营销闭环和业务运营在线化。随着公司产品线的战略调整以及公司业务的不断发展，原有官网设计及内容架构已经无法承载及精确传递新的企业发展蓝图，我们需要通过全新的品牌传达，来迭代用户对我们的品牌认知。② 竞品分析公司分为产品部门和项目实施部门，从产品定位来看，竞品公司是 shopline、shopify、bigcommerce 等 SaaS 建站公司，从项目来看，竞品公司是商派、百盛、伯俊等 IT 项目公司。我们分别对其进行了视觉及网站结构、内容的分析，从而得出以下结论：第一，是清晰有条理的内容及网站结构，明确的传达出公司产品能力及项目实施能力，抓住差异化的点去突出描述，让用户能够明确认识到我们与他们的不同之处，从而帮助及推动用户做选择；第二，是商业化产品是公司核心价值的体现，我们所有的产品都支持多语言，官网的视觉语言也需要与国际接轨。③ 用户画像从访问意图上来看，可简单分为两类：寻求合作、浏览了解。不同用户在网站上浏览的重点是不同的，对于面试者，他们关注公司介绍及业务范围，在面试时更加有的放矢，同时也考察是否符合自己的求职目标。对于公司员工，需要关注公司的产品动向，最新战略。对于核心用户-中小企业及大企业客户，需要通过官网上的业务范围和产品功能介绍，去和自己公司的需求进行匹配，同时会查看客户案例及背书，当基本符合诉求的时候就会发起咨询，所以官网上的意图传递需要精准明确。④ 企业/产品理念我们访谈了公司了领导层及产品负责人，对齐了大家对公司及产品的定位及发展愿景，提炼出了 3 个关键词“国际化、商业化、数智化”，同时会作为企业官网的底层内核。⑤ 设计趋势我们可以轻易的从网上获取到近些年的网站设计趋势，比如新极简主义、超大文本排版、交互式网站、以 3D 场景或者动画展示为主题、抽象插画（以图形、符号为主）、流体渐变、弥散柔光、玻璃风格等等，在了解了这些形式之后，我们结合实际需要展示的内容以及后续维护的灵活性、拓展性，去进行方案设计。⑥ 头脑风暴企业官网与市场部、产品部、销售部息息相关，我们邀请了相关同事一起进行“头脑风暴”，另外我们还组织了一场外援脑暴，邀请了合作公司的几位同事在线参与，目的是想了解，用户究竟想要在我们的官网上看到哪些内容，优先级是怎样的？内部诉求「你希望在官网展示哪些内容，并进行优先级排序」「选出能体现企业文化的图片」「你心中好的企业官网是怎样的？哪些官网你觉得设计的很棒？」外部诉求「你希望在官网看到哪些内容，并进行优先级排序」「哪些内容或是数据让你产生兴趣，并想与我们进一步联系」「你觉得官网上还缺少什么内容吗？」所有的 idea 收集完成后，我们需要聚合、提取出有价值有共性的点进行后续的方案设计的。⑦ 产出概念经过各种维度的调研之后，需要将提炼出的关键字、代表色融入到设计中，更直观的进行比对。我们用 2 周的时间产出了 3 稿方案进行全公司范围的投票，加之领导层的投票，最终一锤定音。定稿设计解析「颜色」旧版的视觉语言以天蓝色、彩色插画进行构建，对于专业度、国际化、数智化的感知力不足，新版的配色使用深蓝、黑、白、浅灰，深蓝色所传达的是“冷静、睿智、专业”的；黑色更增加了“神秘而炫酷”的科技感，白色、浅灰用以调和深蓝和黑色的压抑感，让整体视觉平衡且具有呼吸感。「框架」我们定义了一套标准化官网模版，保证矩阵式的家族产品官网的统一性和搭建效率。模版不会限制风格，每个产品在框架结构层根据规范，使用统一的文字层级、栅格系统、组件布局、交互规则，视觉层都可以根据产品定位发散设计，确保让每个产品都能有个性化的差异设计，从而提升辨识度。2. 设计 & 定义① 制定框架市场部的同事会根据讨论提供最终的网站结构图。② 内容文案网站结构确定后，需要填充每个页面的内容，并且对于文案进行反复斟酌，我们需要根据预设的人物性格，进行情感化表达。清晰明确的语言表达能够让用户更容易理解；情感化的措辞更加亲切，能拉近与用户的距离；全站统一的文案，能让用户感受到一致的体验和专业性。好的文案和内容，就像是在官网的框架（骨架）之上赋予血肉之躯。另外，我们提供中、英文双语，要考虑语境去翻译文字，使得不同国家的用户都能准确理解官网所传递的信息。*下图为产品市场部的同事在 wiki 上维护的官网内容。③ 设计排期与此同时，设计会在 wiki 上建立设计排期表，市场部的同事将页面内容准备好的时候，Content 列会标记为“DONE”，此时设计师可以进行排期，将页面设计状态更新为“DONE”时，前端工程师就可以开始了。这样，项目相关者可以看到每个页面的设计和开发负责人、设计起始时间，开发起始时间，使得官网项目的管理更加有序直观。④ 定义规则明确页面适配规则主流的 PC 屏幕宽度是 1280px～1920px，我们以 1200px 作为页面版心进行设计，自适应布局到移动端，移动端的设计需要注意尽量不要过长，突出核心内容，次要信息可以折叠或者通过横向滑动查看。明确每个页面的交互动效网站的设计，从点到面再到点，从视觉到交互事无巨细。比如页面滚动时文字和图片如何展示、按钮的交互、轮播 banner 的切换效果及速度等等。设计师首先需要了解你所想要的动效能否被实现，并将你想要的效果传达给开发，达成一致。简单说下基础动效，这个最常用最实用。在 css 里 animation-name 定义要使用哪种动画关键帧，animation-delay 是设置动画开始之前的延迟时间，animation-direction 定义了播放动画的方向，animation-duration 定义了动画的持续时间，animation-iteration-count 定义动画的播放次数，animation-timing-function 定义的是动画的变速效果。我们前端目前是引用了 animate.css，js 文件会控制标记了 animation 的元素进入到 viewport（视口）时，元素自下而上渐显展示。在设计师具备基础知识的情况下，再去跟前端沟通想要的效果，会事半功倍。3. 上线 & 验证① 设计走查设计稿一般会分批次交付，开发也是在第一批设计交付的时候开始正式加入，第二批设计稿完成前第一批交付的就开发完成上到开发环境，设计师在此时就可以开始走查，一些全局性的问题在此时提出，后续再开发的时候就可以避免重复修改，也能提前和开发磨合想法，这样后期的效率会提升很多。走查过程中我们会在 wiki 建立走查表，如下：② 网站埋点需要注意的是，中国 PIPL《个人信息保护法》出台之后，如果继续按照以往的认知使用 GA 分析工具，那你就可能会涉及数据出境的问题了。因为 GA 的数据中心在中国没有布点，那我们通过 GA 获取的用户行为数据，最终就是存储到境外的数据中心，这也就造成了前面说的问题。所以为了不要给公司带来不必要的麻烦，我们可以使用国内的第三方埋点服务商。③ 发布上线发布之前，我们需要检查走查表上记录的问题是否都被解决，并且协同市场同事再进行最后一次的文案复查，一切就绪之后就可以提交上线申请。网站正式上线之后也需要第一时间再全部 review 一遍，避免发布过程中产生了 bug 或数据遗漏。④ 数据复盘网站上线后，我们需要对比改版前后的数据变化，利用数据分析发现问题并着眼于用户访问过中的流失点，进行持续的运营调整和设计调整。网站改版总结期望这次的网站升级更为精准的将公司战略传达至用户，并建立“国际化、商业化、数智化”的企业形象，让用户形成认知，并产生价值认同，从而提升企业的行业影响力。以上就是我们做官网升级全流程，静态网站的设计相对动态网站的流程简单很多，动态网站比如内容型的知乎这种内容平台，用户需要注册登录、发布问答、评论等功能型的网站，或是品牌电商官网有标准的购物、售后流程。除了网站的视觉效果设计，交互体验的设计会花费更多的时间与精力。写在最后设计师并不只是在“设计”，不要只流于表面，要对内在进行深层的探索与思考，才能让设计更有价值。官网的设计及升级也不仅仅是设计师的事情，需要跨部门协同开发、运营一起，分工明确，各自的工作计划、进度都公开透明，可供任何相关者查阅。最后，在做任何设计之时，请问问自己以下几点我们做到了吗？做足功课，才能高瞻远瞩不盲目跟随趋势，寻求差异化，出奇制胜不要为了设计而设计，符合企业/产品内核最重要让你的设计不言而喻美好的设计源于我们的热爱，以及足够的了解。让我们做出更有灵魂的设计吧！欢迎关注作者微信公众号：「Gtech UED」本篇来源：优设网原文地址：https://www.uisdc.com/company-website-design
首页 官网 后台 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
官网 用户 方式 项目背景如大家所知，企业的招聘方式基本固定为社招与校招两种，而社招渠道比较宽泛，如多个招聘平台的招聘信息、猎头寻人、人脉内推等，而校招的渠道却比较单向，基本都是在毕业季前，在大学内宣讲、学校内搭建招聘展位等，由于时间较固定且频率不高，所以 58 之前并未搭建校招官网。来自于《2021 年度企业招聘渠道效果与趋势调研报告》但是，由大易发布的《2021 年度企业招聘渠道效果与趋势调研报告》指出，相比 2018 年，企业搭建专属招聘官网的比例已经从 41.4%上升到了 80.2%，71.8%的企业建设私域渠道的目的是提升候选人体验，企业开始跳出以「hr 为中心」的视角，转向「以人才为中心」，时时刻刻照顾候选人的应聘体验。所以搭建 58 的校招官网也是势在必行。两分钟底层法则的应用英国形象大师罗伯特·庞德曾说，这是一个两分钟的世界，你只有一分钟向人们展示你是谁，还有另外一分钟让他们喜欢你，如何在短暂的时间，屏幕大小的空间里，吸引到与企业志同道合的人，是我们此次升级的设计标准。1. 静态背景降低动态场景下的焦虑感我们调研了几个拥有独立校招官网的大厂，信息架构逻辑大体一致，区别较大的就是头屏的展示方式是采用静态还是动态，然而这个也是我们项目内争执比较大的点，依据两分钟底层法则，动态视频的吸引力必定是大于静态的图片，而视频的加载时长的无法控制会很大程度的影响用户体验，现有某个大厂的头屏视频就是很明显的样例，在网络状况不佳的时候，头部的灰色背景带来了焦虑感。怎么弥补用户这几秒的焦虑呢？我们把不可控的几秒变成可控的温馨画面，在视频加载中头屏展示图片，加载完成后开始自动播放视频，这样头部视频的方案得以保留。2. 极致的交互体验形式通过竞品分析得知，为了保障信息的连贯性，首页大多都采用平铺的方式展示信息，在某个模块下会通过简单的交互展示更多的信息。虽然设计上模块鲜明，但是对于用户是一次性的信息输入，无法快速集中获取某个模块的信息，所以为了更好的做到信息架构分明，我们首页采用分屏+微动效的交互方式，每屏只向用户展示一个信息，做到沉浸式信息浏览，同时这种方式也在一定程度上提升了品质感，如特斯拉品牌官网也是采用同样的交互方式。分屏效果展示二级页面，则采用大图背景样式，内容在固定区域内滑动，增加官网高级感设计语言定义每个企业都有一个品牌宣传色，为了保持 58 的企业识别性，我们保留橘色为主色，同时橘色也可以更好地传递企业秉持的温暖的概念。其次，依据 90 后、00 后这些 z 时代背景下的用户喜好，他们更注重品质、时尚，惊喜，内容等，针对这些关键词，我们采用了如下设计方式：1. 复杂内容视觉化58 的业务体系是复杂且庞大的，按以前的滑屏的交互方式很难有一个整体且直观的感受，那如何在简化的同时更直观、更整体呢？我们采用了当前流行的 3D 立体方式，打造了 58 的业务矩阵空间，这是个可以无限拓展的空间，对于目标明确的求职者可以快速查看某个品牌的介绍。2. 加大视觉反差在福利模块，为了突出福利内容本身，大胆采用灰色背景图片，同时增加不同形状的小面积色块做视觉的调和及内容类型区分。在成长故事模块 hover 状态下，由原先的彩色照片变为橘色背景与黑白照片搭配，用户的视觉焦点可转为内容本身。点击后的故事详情页采用杂志式的排版，弹窗的样式减少用户的跳出感。3. 图片增加故事性为更加深入内容，我们单独拍摄了一套极具故事性的员工形象照，拉近用户与照片中人物的距离，增加用户的沉浸感，照片主要围绕氛围感、接地气、传染力展开拍摄。4. 标题化文案经调研点击率高的内容，在标题文案结构上都做了很好的设计，所以文案优化也是我们设计语言的一部分。在标题中准确提炼用户感兴趣的信息，并打造每个故事之间的差异性，从而抓住不同用户的味蕾。总结通过 2022 届校招季，我们收集了用户流程下的一些数据，首页-职位列表页-职位详情的 UV 得出流程漏斗下的转化率以及按钮点击转化率，与往年相比有了很大的提升。最后再提一下英国形象大师罗伯特·庞德的话：两分钟的世界，你只有一分钟向人们展示你是谁，还有另外一分钟让他们喜欢你。然而当下 VR 科技的快速发展及应用，部分大型企业已经在官网首屏采用 VR 技术展示公司及企业文化，未来的可能性还有更多可探索的空间，说不定不久后可以用裸眼 3D 效果，给用户更加趋于真实的感受呢。大厂实战！vivo官网APP首页改版设计过程复盘vivo 官网 APP是什么？阅读文章 > 欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/58-website-upgrade
官网 都是 花瓣 大家好我是花生。Figma 封禁中国企业大疆（DJI）企业账号的事这两天在设计圈持续发酵，个中详情大家相必都有所了解。究其根源，此次封禁并非 Figma 本意，而是在美国政府制裁名单这样的政治因素影响下，作为美国企业的 Figma 不得已为之。但事件已经发生，并对中国的设计行业造成了较大的冲击。虽然目前制裁的只有大疆，但是很多中国企业为了规避风险，纷纷选择将 Figma 上的文件迁出。幸而国内的同类对标产品即时设计、MasterGo 等对这次事件反应迅速，纷纷上线 Figma 文件导入功能，帮助企业和设计师应对难关。即时设计和 MasterGo 针对 Figma 事件发出的公告Figma 封禁大疆事件引起设计圈的普遍忧虑，担心未来会有其他设计产品受政治因素影响对中国用户进行封锁，这样的担忧不无道理。今天为大家盘点梳理 5 款我了解到的中国大陆本土或者已明确表态不受政治因素影响的办公和设计类工具，它们可以很好的替代现在的一些知名设计办公产品，且都是免费使用的，希望为你的工作提供更多的选择。C4D 与 BlenderC4D 由德国公司 Maxon 的研发运营，是当下最热门的 3D 软件，它集 3D 建模、动画、模拟和渲染于一体，功能强大。C4D 相对于 Maya、3D Max 等 3D 软件要更简单易学，且搭载了 VRay、Arnold、RedShift 等多个渲染器，能在较短时间内渲染出极具质感的作品，几乎可以达到以假乱真的地步。C4D 渲染作品，来源：Behance @Danny Liu说到未来最有可能超越 C4D 成为最热门产品的 3D 软件，无疑就是 Blender 了。Blender 是托管在 blender.org 上的开源项目，供所有人永久免费使用，而且支持中文简体。它的程序轻便，只有 200 多 M，但建模、渲染、动画、模拟等功能一应俱全，比 C4D 更加简单易学。Blender 渲染作品，来源：Behance @林 溢鑫推荐 Blender 作为 C4D 的替代， 一是 Blender 的确好用且免费，二是 2022 年 3 月 9 日 Blender 在其官网上发布了关于俄乌战争的声明，声明中表示 Blender 将捍卫艺术家和开发者的自由，坚持为每个人服务的原则，不会对俄罗斯地区的用户访问 Blender 进行封锁。开源的特性加上官方这样开放坚定的态度，我们可以放心选择 Blender 而不必担心它会受政治因素影响。网站链接：https://www.blender.org/从准备入门到跨过门槛：3D神器Blender 教程来了！@嘉文钱：大家好，我又来了我发现最近的几次更新，都是因为我开始熟练了新的「玩具」比如上次的 Procreate以及这一次的 3D 制作神器「搅拌机」为什么我要学做 3D？阅读文章 > Eagle 与 Billfish相信不少设计师都已经选择 Eagle 作为自己收集这整理灵感的资源库了，它可以接受图片、视频、音频、字体、文本文档、PSD、Ai、BLENDER 等 40 多种类型的文件，搭配浏览器插件使用实现拖拽保存图片，非常便捷。Eagle 实行买断制，试用期 30 天，购买后激活序列码即可解锁终身使用。Eagle 是一款本地软件，本身没有云同步功能，需要搭配其他云盘使用。Eagle 程序主界面及其功能想使用免费素材管理工具的设计师，可以试试Billfish ，这是苏州长嘴鱼软件有限公司开发的一个素材管理工具，它的功能与 eagle 一样非常全面，而且完全免费。目前 Billfish 处于一个高速发展阶段，未来能否在云同步等功能上更加全面并超越 eagle 还是非常值得期待的。网站链接：https://www.billfish.cn/Billfish 官网非常活跃 Billfish 论坛，在上面你可以与开发人员直接沟通Pinterest 与花瓣Pinterest 和花瓣都是设计师非常熟悉的设计灵感网站了，或许很多设计师还是感觉花瓣没有 Pinterest 优秀，但是放在特定的背景下看，有花瓣这样属于我们自己的设计资源网站还是非常珍贵的。2022 年 2 月花瓣发布了最新一版的 UI：下线了体验不佳的广告，网站整体视觉更加透气高级；升级了搜索逻辑和算法，帮助用户更快更精准的寻找素材；上线了花瓣 Pro、10W+可商用源文件等新功能。从 2011 年成立至今，花瓣网经历了数次更迭改进，内容和功能都越来越专业强大，相信未来发展也会越来越好。网站链接：https://huaban.com/Pinterest 主界面花瓣网 2022 年 2 月更新的最新版 UINotion 与 wolaiNotion 是一款号称“第二大脑”的笔记工具，能实现笔记、知识库和任务管理的无缝衔接协作，在云笔记领域非常热门。Notion 可以嵌入图片、网页、文档、视频等多种类型的文件，并将内容以块（Block）的形式呈现，可以通过拖拽实现内容自由排版；拥有无限层级，互相之间可以嵌入和链接，非常灵活。但是 Notion 没有汉化版本，它的程序界面及官网教程都是英文，即便 B 站上有很多博主出了详细的使用教程并免费分享知识库模板，但是设计师想自己熟练使用还是难度的。网站链接：https://www.wolai.com/其实国内就有一款完全对标 Notion 的云笔记工具——wolai。wolai由上海我云网络科技公司出品，它的功能与Notion并无差别，且使用界面和官网教程都是中文。wolai官网上提供现有模板供免费下载，如果想自己搭建知识空间，可以跟随官网上详细的教程指引进行操作，非常友好。对想自己构建完整知识框架但又无法熟练运用notion的小伙伴，wolai绝对是不二之选。wolai 官网wolai 官网上的帮助中心，内容相当细致丰富Microsoft Office 与 WPS Office作为办公软件界的王者，Microsoft Office 的地位和功能毋庸置疑。但还是那句话，放在特殊背景下，自己有的才是最好的。作为 2022 年北京冬奥会协同办公产品，WPS Office 在领域深耕已经三十多年，针对我们国家自己用户需求发展出的功能越来越全面强大，针对企业和政府开发的服务也越来越完善，在某些方面来说相比 Microsoft Office 并不逊色。Microsoft Office 与 WPS Office 高低之以持续多年，但时移世易，它们的竞争关系或许已经翻开新的篇章了。网站链接：https://www.wps.cn/WPS Office 官网及其应用矩阵总结自俄罗斯和乌克兰的战争爆发后，西方国家在政治、经济、艺术、文化、商业等方面对俄罗斯实行的种种制裁和封锁，早已令“无国界”这个词面目全非，设计行业也不能幸免。2018 年美国制裁中兴通讯事件也给我们留下了深刻的教训，依靠别人终究不安全，唯有自己拥有才最可靠。在不同领域有用中国自己的同类产品可以进行替代一个必然的趋势，设计行业也不例外。今天即时设计、MasterGo 能很好的代替 Figma，这是值得庆幸的。相信未来会有更多优秀的国产办公设计工具出现，让我们不必再担忧设计行业也被“卡脖子”。今天推荐的 5 款可免费使用的办公和设计工具，希望对大家有帮助，如果你有其他觉得不错的国产设计工具，欢迎在评论区分享哦~更多相关知识Figma封禁大疆账户！国产软件的春天来了？就在上周六，刷微博时一条微博引起了我的关注：这则消息很快引起了轩然大波，有网友在评论质疑消息可靠性后，很快博主贴出了Figma 官方发给大疆的通稿，并表示向大疆朋友确认了消息属实。阅读文章 > 5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！大家好我是花生~现在一提到字体资源，大家最关注的点肯定是能不能免费商用吧？阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/5-commonly-used-software-replacement
首页 容器 官网 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
在路上
飞翔的企鹅
表哥
落霞与孤鹜
