掌握表格的设计，就掌握 B 端设计的半壁江山，我们赶紧开始吧!　　1. 表格是什么，为什么重要?　　表格已经是现代电子计算机系统中重要的组成部分之一，从小学开始，我们就已经在电脑课上学习如何使用 Office Excel 来制作电子表格。　　那么我们为什么需要使用表格呢?因为我们有记录和查询数据的需求。　　在任何商业活动中，都会产生大量的数据信息，虽然我们发明了 SQL、Mysql 等数据库语言记录数据，但最原始的数据记录是没有可读性的。　　所以，为了让数据可以更好的展示，我们就必须借助可视性更强的图形工具，即电子表格。通过

　　虽然空状态对用户体验很重要，但它常常被忽略。良好的空状态设计能提升产品体验，有效留存用户，了解空状态的概念以及如何使用它们，可以有效提高产品的特色和价值。　　文章目录：　　什么是空状态?　　在产品设计过程中，设计师有很多机会创造愉悦和有意义的体验，其中一个经常被忽视的体验就是空状态。空状态是用户在使用产品时某个界面无法显示的时刻，即没有其他元素。　　以网购为例，回想一下常见的空状态情况：　　搜索商品却没有找到的状态　　查看商品时加载不出来或出错的状态　　购物车里没有商品时的状态　　地址管理页面

　　背景　　“时间”作为人机交互界面中经常出现的元素，本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现，关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的，这是出于怎样的考虑呢?今天我们就来聊一聊，如何在产品设计中把握“时间”显示的诀窍，让其在页面中发挥*的作用。　　“时间”元素的分类　　按照“时间”元素在页面中的出现场景和所起到的作用，可以大致归为以下几类：　　A. 事件的关键构成要素　　时间作为描述整个事件的重要组成部分，缺失后会对原本所要传达的内容产生

　　新闻阅读的现状　　vivo浏览器产品中，基于阅读模块的相关设计在关注度和方法论上都有所欠缺。线上的新闻阅读版式处理较陈旧，视觉体验较差，用户在使用过程中障碍较多。归根究底，由于整体的设计思路缺失，表面的调整一直是修修补补状态，没有根本解决阅读体验的问题。　　目的和价值　　了解了这样的背景情况后，我们提炼了此次新闻阅读优化的目的和设计价值：　　业务侧：提升浏览器阅读时长。提升新闻阅读效率。　　用户侧：带来沉浸且高效的阅读体验。　　设计价值体现在：优化新闻模块有助于提升用户浏览效率，固定时间用户可以

　　作为设计师，在拿到产品需求的时候，所要做的不仅仅是完成产品的设计工作，更重要的是要思考如何通过设计的的手段去推动产品背后的商业价值达到*化，提升视觉体验、增强用户的粘性以达到用户转化的目的。不需要我们设计的有多么复杂，可能是一个步骤的简化、一句打动人心的文案、贴心的提示、趣味的动效…　　「美团外卖」喊你回家吃*的午餐　　1. 产品体验：　　打开美团外卖APP，在每个店铺下方都有突出的满减提示，进入店铺详情页，在顶部和底部同样都有，选好商品后，商品的总价达到满减条件，就可以减掉对应的金额。　　2. 设计思

　　解读抖音中延长用户使用时间的案例　　抖音中的一个案例场景如下：　　前几天看抖音，被抖音的「刚刚看过」所惊喜，这个功能对于我来说就是魅力需求。　　过年期间一直频繁刷抖音看博主剪辑好的电视电影片段，经常遇到这样的场景，当我刷到电影片段后，勾起了我想继续看的欲望，会去主页找到与该视频相关的片段;　　到主页之后很难一下就找到刚才观看过的视频，需要返回记住该视频名称，然后去众多视频中挑选出来，特别耗费时间影响心情，一瞬间找不到就直接退出去刷别的视频了;　　从设计的角度剖析：「刚刚看过」我认为是「及时反馈

　　解读MOO音乐的极简设计　　由小良同学投稿，我们一起讨论并编辑完成，MOO音乐中的案例，场景如下：　　今天为大家带来的是MOO音乐中播放页面的设计解析。MOO音乐这个产品不知道大家有没有使用过，它是腾讯在18年末推出的一款音乐app，主要面向喜欢流行音乐与小众音乐的潮流年轻人。与主流音乐app不同，他没有过多复杂的功能模块，旨在打造沉浸感的听歌体验。我们今天就通过其播放页面的设计来看看：　　进入MOO音乐的播放页面，最直观的感受就是简洁。对比QQ音乐，MOO音乐在此页面中的各种元素与文字都非常少，控件数量也是屈指可数。

　　通知设计是双向的，关键是要保持适当的平衡。　　通知设计处在产品的外围，所以设计师倾向于将通知设计留到*。　　但它帮助用户实现目标的体验，产品设计过程中尽早处理通知设计将产生更好的结果，一起来看看如何深度执行通知设计。　　通知设计的基本原则　　进行通知设计时，需要牢记的基本设计原则是它必须协助(而不是阻碍)用户执行操作。　　通知的形式取决于以下几个关键因素：　　传达的信息类型　　信息是否需要用户操作　　信息的紧迫性(是否需要立即查看)　　一个设计良好的通知模型会考虑到可访问性，并具有适应不同语言的灵

　　最近团队尝试使用Figma构建一套适用团队的组件库与规范，发现Figma比Sketch的构建方式要更简单和更灵活，尤其是自动布局(Auto
Layout)和联级嵌套能极大提升组件库的设计灵活度;另外Figma插件库日新月异，能够有效提升组件库在构建过程中的效率。本文主要分享了我们团队在创建组件库中的一些经验方法。　　首先我们确定组件库框架包含哪些内容，这里主要针对ToB端的业务场景来进行演示。　　组件库框架　　B端业务组件库框架内容相比C端产品的要复杂且难以上手，除了对产品业务的理解和掌握之外，组件库到底有哪些内容?针对我们团队所

　　响应式网页设计 (Responsive web design)
虽然早已被提出，不过因为国内开发习惯和APP设计优先，日常工作使用这种布局方式的机会不多。　　国外网站使用这种布局方式较多，经过调研，结合尝试后，本文梳理了响应式设计的方法流程，记录问题与思考，帮助以后类似的项目开展更快。　　什么是响应式布局　　响应式布局常常和自适应布局搞混。其实通过下面的动图我们很容易能理解两者的区别。　　△ 响应式和自适应的区别，来源网上资料　　响应式布局：容器大小随窗口大小而变化。　　自适应布局：容器大小不随窗口大小而变化，边距随窗

　　阿里巴巴菜鸟裹裹中的「不打扰式」提醒　　菜鸟裹裹APP中的通知设计，我称它为「不打扰式」通知，现在一般的产品为了促进用户活跃度都会频繁push一些消息给用户，如果用户被通知里面的内容吸引，打开APP，就为该产品贡献了一个「日活」，虽然有些消息是比较有价值的，但是大部分还都是营销类消息，例如「XXX降价促销」、「iPhone
11立减600」、「*包包花呗付款24期免息」…　　由于所有产品几乎都采用这种方法来提高业务指标，用户们逐渐开始禁止了各种APP的通知权限，所以现在对于一些电商类型的产品来说，通知打开率已经成了一个很

　　逻辑架构　　网上搜一下关键字「B端」、「表单设计」，会搜到很多相关设计经验出来。不过大多数经验试图解决单个表单的布局和样式问题(比如标签栏和输入框是上下布局还是左右布局、左对齐还是右对齐)，而非多个表单之间的逻辑架构和衔接关系。然而一个页面不会无缘无故的出现，它承载了特定任务，特定任务是用户达成目标的其中一环，和其他任务(页面)环环相扣。需求不会脱离于场景单独存在。场景中的需求，需要场景化的解决方案。　　举个例子，某商家要进货，需要提供订货单(表单1)，包含商品列表(表单2)，收货信息(表单3)，开票信息

　　瑞幸咖啡APP的一处改版设计　　场景如下：用户在瑞幸咖啡app下单时，选择好商品并进入提交订单页面，此时可以在页面中选择要使用的优惠券，并且在进入这个页面时，已经为用户自动选择了优惠力度*的一张券，减少了用户的操作成本。　　说到这里其实也只是常规操作，这种设计已经很普遍了，但是让作者感觉惊喜的其实是优惠券右侧的一个「取消使用」的小按钮。　　在之前的旧版本中，是没有这个「取消使用」按钮的，可能有的朋友会说，默认选择一张优惠券才是比较好的设计方案啊，你怎么会因为这个功能惊喜?　　其实要理解他的*之处还是要

　　钉钉支持了全国14万所学校、600万名教师、1.3亿学生在线上课，相当于全国一半的学生，他们分布在全国30多个省份，从最发达的北上广深，到相对偏远的农村山区。我们也从大年初二开始在家上班，升级功能、优化体验、紧急扩容，就是为了学生们有课上，有作业做。　　△ 疫情期间上课情况　　当然我们的学生们也非常努力，一个小女孩被记者拍到在妈妈的摊位案板下上网课，台上是生活，台下是希望。在偏远山区，山村姐妹路边上寻找信号上网课，信号不强，梦想不断。600万老师也变身网红直播上课，湖北武汉的一名女老师，在自己的婚礼当天，

　　顶部导航和左侧导航的用法　　顶部导航：顾名思义导航在顶部，这也是目前网站最常见的主导航模式。顶部导航一般会含有个人中心和一些功能入口。　　顶部导航常作为一级导航。　　如下图猫眼PC网站，顶部导航包含首页、电影、影院、演出、榜单、热点和商城等导航功能模块。　　如果导航里面存在二级导航则可以聚合在下拉菜单里面，鼠标hover出现下拉菜单，点击下拉菜单里面的选项，进入对应的功能界面。如下图所示的ant
design导航组件，鼠标hover出现二级导航，导航里面还进行了分组。　　侧边栏导航：多用于二级导航(相对于顶部导航

　　由于B端产品的复杂多样，我们今天所要讨论的不单单局限于弹窗这一种控件的设计，而是一个「泛弹窗」的话题，透过弹窗去分析理解其他类型信息展示的业务逻辑。　　从宏观上讲，目前B端设计中信息展示的控件可以分为三类：弹窗、抽屉、新建页。在这三种展示形式中，我们需要明白它们四类分别是什么、有哪些、在什么场景中使用、以及在优缺点和适应的不同业务，这样可以更好的为我们设计服务。　　什么是弹窗　　1. 弹窗的定义：　　弹窗是一种中断用户当前操作并对其进行补充、或者对当前操作进行强制反馈的交互形式。　　一般需要用户进

　　背景　　问题来自一次旁听：开关状态切换前后，除了开关控件的UI状态，开关说明是否应该也有反馈差异?我觉得还挺有意思的。　　小L：开关打开和关闭可以通过开关控件的UI反馈,所以开启前后说明文案没有差别也不会让用户不理解.　　小W：开关打开前后说明文案没有差异，只通过UI状态反馈真的已经让用户清楚的知道开启的状态吗?　　△ 开关状态切换开关说明的无差别反馈　　那么为了更好的帮助用户理解开关操作生效与否，开关状态切换还需不需要额外的反馈，如我们讨论中的开关说明是否还需要差异反馈?　　思考　　我们查阅了material d

　　在产品运营中，「引流」一词频繁出现。为了引流，搞个闪屏广告、展示在首页banner位、优化一下SEO、做竞价推广，想必大家都有听过。　　那么，你知道「导流」吗?导流的价值又是什么?有哪些技巧能做好导流呢?今天，我们就来看看传闻中的导流设计。　　什么是导流　　导流，是通过借助一个产品的用户群向另一个产品导入流量，从而实现相互成就。说到这里大家可能有点懵，这和引流有什么区别?其实，二者是相辅相成的对应关系，一个给予一个接受。以微信与微视为例。今年初大热的微视红包，就是借助了微信高频带低频而被人们广为知晓的。微

　　在线音乐平台的现状　　15年国家出台了在线音乐最严版权令，而「版权」的存在直接影响了各平台的乐库资源，从而影响了用户使用在线音乐产品最基础的核心诉求：我想搜个歌听。关于「版权」之争赛段的结果已经尘埃落定，包含QQ音乐在内的三大腾讯系音乐产品(Q音/酷狗/酷我)基本获得了胜利。而晚了Q音8年上线的网易云音乐，虽然在版权之争并不占优势，但却更早的开始关注音乐平台的社交功能，并通过网易门户引流和体验口碑吸引了大批用户。　　带着社区与情怀概念杀入top排行榜的网易云音乐，预示着在线音乐平台从工具到完整生态的衍变进

　　如何让自己的产品在保证基本的可用性和易用性的同时，还能让界面看起来柔和、更富有亲和力?一个产品能留住用户的虽然是内容本身的质量与吸引力，但一个小小的细节却能够阻止用户的流失，成为内容转化的*一道防线，让人眼前一亮，值得借鉴。　　「腾讯动漫」趣味的icon动效　　1. 产品体验：　　个人中心的性别切换以重量级的功能展示在一级页面，点击切换男女图标，以动画的效果过渡切换;　　性别切换的同时，根据不同性别，首页的推荐内容也随之更换。　　2. 设计思考：　　性别icon通过动态的方式切换， 动态比静态更加吸引眼球，增