于B端，我想刚开始很多同学就直接拿Ant Design套套界面，因为公司要求并不高，随后字节Arco Design也推出了对应的模版和规范，能让我们快速作出一个不出错的方案。
但是随着公司对B端越来越重视，这些模版显然就太烂大街了。公司、市场的要求显然不止于此，我们的设计追求也不止于此。
那么我们如何才能摆脱套模版，提高界面的精致度，提升界面的交互体验呢？
其实很简单，王阳明先生告诉我们知行合一，知是行之始行是知之成。我们如何才能提升B端界面端精致度？
第一，需要知道什么是好的设计；
第二，需要不断的去实践去练习，缺一不可。
本文先和大家谈谈知的层面，提高我们的眼界，下面就和大家分享一些不错的B端产品，大家有时间可以去慢慢体验。
PS：作为B端设计师，一定要去多拆解竞品，多研究好的产品，别面试的时候，面试官问你研究的B端产品是什么，你只知道阿里云、腾讯云、百度云哦！
1、Hubspot
做B端的同学，尤其是做CRM的同学应该都知道Salesforce，他是全球最大的 CRM（客户关系管理） 工具公司。
Hubspot同样是提供客户管理相关的应用，虽然成立相对Salesforce晚，但是在市场上也占有一席之地。
从设计的角度来看，他的界面风格更加简洁舒适，从体验上来看和国内的CRM系统完全不同，其体验更加自然和舒适。
这种风格大家看了有没有觉得很熟悉呢？
大家在去看看 GoDoddy , Airbnb ，Zillow,是不是发现风格有一点类似，大家可以对比国内产品去拆解下他们的交互细节有什么不同，完成同样的任务他们采用的方案有何不同，相信你会有很多的收获。
国外的界面看着总让人觉得很舒适，仅仅是因为克制的设计、中性灰使用得好吗？当然不是，是因为英文本身就是图形化的文字。
如果翻译成中文，你会发现好像不是特别理想。
这个样子拿给领导过稿，怕是分分钟被拍死，因此我们还是需要多看看国内优秀的产品。
2、神策
神策的设计，我想B端的朋友不陌生吧，国内产品中他的设计一直是我们的参考对象。
不同于其他产品，他的体验门槛比较低，注册后就可以去体验他的demo，也没有试用期限，参考对象从可视化报表，到界面交互均能找到参考。
不过当你参考一次后发现，做出来的界面怎么还是少了一些灵魂，虽然界面风格上了一个台阶，但为什么用户还是觉得产品难用。
3、项目管理类
这里不得不和大家推荐项目管理类产品了，这类产品是专门给互联网公司的开发团队使用，他们都是专业用户，同时这些都是提高他们工作效率的工具，因此这些产品投入的成本更高，优化得更好，拆解他们的产品，就是直接观看高手的成长之路。
Jira
Jira是Atlassian公司出品的一款事务管理软件，JIRA的界面效果交互都非常不错。大型互联网公司如LinkedIn、Facebook、eBay等内部都在使用Jira。
同时他也是国内项目管理类产品的学习研究对象，因此大家可以通过文章、B站、界面截图，自己申请体验等方式全面的进行体验。
同时也可借助群的力量，调研下有使用Jira的小伙伴，看看他们在使用中有什么问题，下面是我收集Jira网页版和本地配置版的问题截图，这些都来自不同角色的真实体验，会更有分析的价值。（这部分截图涉及到公司的数据，同时数量多不太方便打码，就不分享给大家了。）
当然国内的项目管理类产品也得去看，我们要对比哪里做得好，哪里还需要改进。国内的有Worktile、Gitee、Tower、Ones、PingCode、TAPD、Teambition，这些产品不管从视觉还是体验都非常不错，大家一定要去体验。
5、文档管理类产品
通过不断对竞品进行拆解，你已经不是当初那个小白了，你的行业认知，方案设计能力应该赶超了一大波人。
成长的同时，又发现你设计的界面，不太精致，少了些温度，这时候推荐你看文档管理类产品。
WPS
第一个和大家推荐的是WPS，界面简洁，配色舒适。 
飞书
在管理类的软件中，不得不提飞书的管理界面，从设计到使用体验，他给我的感觉终于不是那么千遍一律，用组件库搭建起来的感觉。
他开始有了温度，开始注重品牌感的打造，用户的引导，符合品牌调性的插画。
对一些体验的细节进行优化，比如传统的编辑都是放在页面顶部，它采用了离光标更近的位置。 
根据菲兹定律，光标当前的位置和目标位置的距离D越短，所用的时间越短，具体好不好用，欢迎大家在评论区留言哦。
6、概念稿
到这时候如果你觉得线上的产品太禁锢思维，那么推荐你看看dribbble、behance，搜索data、web、dashboard等关键词，去看看有没有新的灵感。
我的花瓣收集了一部分，如果不嫌弃，可以去看看，顺藤摸瓜应该可以找到很多不错的设计。
图片标题
7、画重点
如何提升B端界面的精致度？
第一，要知道什么是好的设计，多拆解国内外优化的B端产品。
第二，多在工作中时间，有时间多做ABC方案，锻炼自己的方案设计能力，多踩一些坑，时刻保持学习能力，慢慢就成长了。
文章来源：UI中国 作者：风筝KK
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
从挑选出的828件作品中，排名前十的作品中9件为B端设计，另一件作品也是B端产品C端化的产物。其中：
B端界面设计占比476/828，57.4%；
C端界面设计占比180/828，21.7%；
视频动效作品占比223/828，26.9%；
能看出其中的比重关系，B端设计再次大火，为什么是再次？因为B端设计之前火过，只不过没有赶上一个好的时代，在C端设计风光的十年里而忽略了其存在。随着C端市场饱和与数字化的浪潮下，实体经济、To B 、To G的产业再次迎来了它的曙光。视频动效的作品占比也已超过C端界面设计，相信今年视频动效作品占比还会再次提升。
追波年度最佳作品
追波年度最佳作品来自大家最熟悉的UI8团队中的Tran Mau Tri Tam ，作者来自越南西贡，最佳作品截止目前355K浏览量，2933个赞。
为什么看似平平无奇的作品却能获得追波年度最佳作品呢？既不是C端也不是纯B端的作品，更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮，你可以理解它就是一个平面作品，一个字体加几何形体构建的作品，为了丰富画面的层次，让画面更加的活泼采用了多彩加几何色块，让标题阅读有停顿感和呼吸感。faster底部的横线让它从标题文字中脱颖而出，这种使用线条突出重要信息的设计也是今年追波设计流行趋势之一。
MetroUI是Windows8的界面设计语言，在2010年至2013年间曾经风靡一时，那也是移动互联网的发展元年，现在国家推行实体经济、数字化带动To B 、To G 的发展元年，通过几何色块（MetroUI）实现B端产品与C端设计风格的传承与衔接，你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风，毛玻璃的多彩高斯模糊渐变风，年度作品当之无愧。
最后来看下按钮的设计，正常的按钮要么文字加色块，要么左图标加右文字，它设计成左文本加右图标，更加注重信息的可读性和易读性，也体现B端设计重功能和交互体验，视觉点到为止的设计理念。
下面我们来欣赏年度最佳作品里面的流行趋势吧。
易读性（停顿感）
字体三原则：可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章，肯定设计文章的内容可读性更好。易识性是用在字体设计上，不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每位设计师都息息相关，因为我们都需要编排文本。当我们小时候写作文时，不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感，更加适合用户阅读。
通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容，丰富文本内涵。比如情侣间表达爱意时会输入文本，“我爱你”、“我Love你”、“我ai你”、哪个更加会有情感共鸣呢？不言而喻，相信你心中已经有答案了。
曲线
在标题文字上添加曲线来突出重要文案是2021追波最流行的趋势之一，第一个设计目的就是突显文字，其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中，签字的文本都是手写体的感觉，手写体对比电脑的机械字体会带有一种人文气息，也会让两者之间产生一种对比、矛盾。
除了突显文本外，曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试，通过真实用户眼睛浏览界面显示对应的热点图。
多彩高斯渐变风
多彩高斯渐变风是从色彩的角度来传达和丰富画面的，多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程，多彩渐变多为冷暖对比来制造画面的冲突，需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。
多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新，给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上，为了更好的传达信息需要去设计与内容相匹配的视觉风格。
B端界面设计
侧边栏Sidebar
B端设计的火爆带动了B端相关模块设计，更多的人也愿意尝试B端相关模块设计，侧边栏作为产品架构中重要的导航系统，好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果，也是受限于PC屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。追波的B端产品设计已经不再是假大空概念设计，而是一套实用美观可落地的设计。
仪表盘设计
仪表盘设计是一个很好的隐喻，想象一下开摩托车或汽车主驾驶前面的屏幕，汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态，大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据，团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同，自定义的仪表盘也各有差异。重要的是突显数据和业务状态，需要分层级系统性去思考和设计。
流程设计
复杂的事情简单化，简单的事情标准化，标准的事情流程化，流程的事情自动化。流程设计是每一个企业核心功能和业务，可自定义的管理流程系统搭建也是B端产品设计的难点，需要对业务高度抽象，让每一个业务人员可自定义的流程才是好的流程设计。
B端C化
B端C化是B端产品设计的视觉表现力慢慢往C端产品设计的视觉靠齐，国内B端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外，由于业务的发展，B端产品也开始移动化、智能化，国内主流还是通过小程序、H5来实现B端产品C端化。
轻代码化
轻代码化是一种低代码赋能无代码的方式，弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时，又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统，轻松实现多元业务场景的数字化管理。
轻代码化将功能进行打包，升级成全局可以用的配置，技术人员配置好后，业务人员在应用编辑时直接选择使用模版，绑定对应的变量即可使用。
界面设计技巧
人文气息
为什么人加色块的组合方式能流行起来？还是B端行业流行带动的。B端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外，还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起，这种人文气息和价值观已经就不言而喻了。
当然企业也需要进行营销，抓人眼球。几千年来的遗传证明了，人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。
这种风格更适合大公司，国内的一些手机厂商OPPO、VIVO等也会通过手机+背景+人物来体现科技与人文的结合，而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。
毛玻璃效果
毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的顺应当下UI扁平化的设计趋势。苹果Mac OS Big Sur系统的图标、界面中运用了大量毛玻璃和半透明元素，界面更扁平。至于C4D三维彩色玻璃的视频教程可以在B站搜索“透光艺术-C4D创建彩色玻璃的4个技法”，完全能满足UI设计师。当然还有一个好消息就是Mac用户可以享有OC一年免费的使用权，具体安装购买方法可以上“某宝”就可以轻松搞定，真香。
轻拟物
轻拟物这几年一直流行，在UI设计中趋于稳定的位置。从写实到扁平再到轻拟物，其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光（环境光）五个部分的处理。写实三维的图标等设计更适用于简洁的画面中，扁平等设计更适用于复杂一点的界面中，比如B端产品界面中的功能图标。轻拟物可使用的范围更广，效果更佳。Sketch、Figma软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。
简洁设计
简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则，在B端产品界面中更加需要简洁设计，我们最熟悉的Sketch软件界面已经是相当的简洁了。回到现实当需求功能不断增加，产品界面的编排如何取舍，如何保证界面的简洁是设计师需要深度思考的问题？如何与上级沟通？该功能是否可做可不做？是否需要埋点用数据说话？如果只是一味竞品有我们就需要有，功能不断累加只会让界面越来越重。
几何图形
几何图形和几何插画有异曲同工之妙，几何图形多为产品界面和宣传内容的抽象，产品界面的几何图形多为占位符形式，加上色彩和几何色块让其成为一个整体。B端产品视觉设计C端化的进程中，几何图形、几何色彩不失为最好的突破口，相信今年追波B端产品的视觉设计一定会更上一个台阶。
几何图形另一个场景化的地方就是品牌，作为一名UI设计师一定会经历从图标到几何图形到品牌设计的过程，品牌设计的技巧基本还是以几何图形为主，至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。
暗黑设计
暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大，如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳，提高在夜间使用的可读性。
在设计暗黑主题时，不能为了突显视觉上的逼格，而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design给出了暗黑主题的设计准则，即正文和背景之间的对比度应至少为15.8:1。按照此标准设计，可读性都还不错。这里介绍一个插件“Stark”（Figma、Sketch、XD、Chrome插件）用来测试界面的对比度。
模块化（组件化）
为什么叫模块化，而不叫组件化，组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面，但在B端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提，是否有从0到1搭建B端产品组件的经历是设计师一生中最宝贵的经验之一，它能提高设计师的系统化思维、逻辑思维和抽象思维能力。
产品模块化设计就是将产品分成几个部分，也就是几个模块，每一部分都是具有独立功能，具有一致的连接接口和一致的输入、输出接口的单元，相同种类的模块在产品族中可以重用和互换，相关模块的排列组合就可以形成最终的产品。通过模块的组合配置，就可以创建不同需求的产品，满足客户的定制需求 。
插画
插画作为设计的一大品类，不同的插画师都有自己擅长的风格，本质是都有自己的个性，但是在产品设计中更多是需要共情、共性来讲故事，表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合，插画不会过时，而是需要结合当下和产品找到最匹配的设计风格。
几何插画
几何插画算是插画简化的一种表现形式，人和物的形态不再写实，而是抽象成几何图形拼凑的感觉，同时保留人物形态的神韵。加上几何色块与人物交互形态的表现，传达出简洁、科技的现代感。难点还是在人物形态的表现上，平时多练习练习速写还是很有必要的。
线面插画
线面插画最近一两年非常流行，准确的说是非常适合。首先线面插画主要是由线条和块面组合而成，用块面表现人物形态时某些结构会表现不出来，这时候用线条简单勾勒后，结构就会清晰明了。其次当线面插画运用在界面上时，可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时，还能保持界面的干净整洁。
动效
微交互
界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计，微交互和动效设计是绕不开的，UI界面设计通过微交互反馈告知用户当前正在发生的事情，所处的状态。细微的动效更能调动用户情绪，取悦用户。C端产品微交互和动效已经很成熟了，一部分功劳来自iOS系统原生自带的效果。B端产品的微交互和动效更多还是在学习海外产品，还需要给前端工程师灌输微交互和动效的设计价值，共同打造产品体验细节。
Mg动画
Mg动画需要很好的节奏感、韵律，每一个场景动画都需要其中的元素进行连接变化，让转场动画更加自然，MG人物动画通过点线面的动效变化让画面更加有趣、自然，通过粒子效果让特定场景无限循环会让人更加印象深刻。
三维
三维图标
MacOS Big Sur系统图标的更新带动了三维图标的流行，三维图标的应用场景还是需要有较大留白空间的界面，因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上？设计师应该保持开放多元的视角。设计本身也在不断的演化融合，存在即合理。合适最重要，它们都会有适合自己的场景和设计价值。
轻三维
为什么轻三维在界面设计中占有一席之位？一个是设计师不断追求差异化的产物。另一个是更好的表现内容，并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素，比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等，这些都是用户日常使用系统软件常见的元素，通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角，结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加，特别是当下流行的毛玻璃效果，玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光，局部的渐变色或环境光更加出彩。
P4D（PS+C4D）
P4D是PS加C4D的设计表现技法，也是视觉设计的最后一个环节，通过PS对C4D的渲染图片进行调色，利用PS的调色技巧可以很好的解决C4D打灯光的瑕疵，还可以利用PS强大的合成功能，将渲染图片与图片素材进行合成，来表现画面的视觉度，当然三维软件比较难实现的水、粒子、烟花等效果，也可以通过PS的后期合成来实现，这也是P4D的强大之处。
卡通IP
卡通IP设计最近三四年技术的迭代已经慢慢的走上成熟，卡通IP也从传统的纯PS手绘技法，转到C4D建模—角色绑定—MD衣服制作—OC渲染—PS（静态）/AE（动态）调色。
卡通IP火的本质更适合做营销，相比于品牌或Slogan，卡通IP具有亲和力和画面感。随着各种手办行业大热，受互联网大厂影响下，卡通IP已经是互联网B轮以上公司的标配了。如果团队中没有这样能力的人，也可以通过绘制好二维，一套三维IP可以选择外包完成。
对于UI设计师来说学习是有成本的，暂时并不是必备技能，如果喜欢完全可以学习，从设计差异化的角度来看三维视觉确实有一定的竞争力。
三维动画
C4D三维场景动画通过构建实物和场景模拟生活中的现实场景，会让用户体验真实感，三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感，未来在AR/VR领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中C4D软件对于域、动力学还是有一定的优势。
文章来源：UI中国 作者：RaDesign
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在终端APP中，动画非常常见，它可以辅助视觉制造焦点，同时也可以让用户交互更加顺滑，但动画的实现却是设计师和研发群体的一个痛点。如何辅助设计师设计高性能炫酷的动画、如何将设计师设计的动画准确无误的还原到终端APP上是业界不断探索和解决的问题。
图1 传统动画实现流程图
当前最好的动画设计软件是Adobe After Effects（简称AE），从AE动画制作到终端APP呈现，传统的实现方式如图1所示，有三大痛点：实现成本高、沟通成本高和性能难以保证。
近几年，业界诞生了像Lottie、SVGA这样的动画工作流解决方案，虽然在一定程度上提升了生产效率，但存在AE支持能力有限、动画性能难以保证、配套工具支持有限的问题。
PAG（Portable Animated Graphics）是腾讯PCG发布器中台自主研发的一套完整的动画工作流解决方案，助力于将AE动画方便快捷的应用于各平台终端。PAG的流程图如图2所示，设计师在AE上设计出动画后，可以通过导出插件导出pag文件，同时PAG提供了桌面端预览工具，支持实时预览效果，在确认效果后，通过运行配置上线，各平台终端可以通过PAG SDK加载渲染pag动画。
图2 PAG动画工作流流程图
与Lottie、SVGA相比，PAG增加支持了服务端。除此之外，如图3所示，PAG动画方案在导出动画文件大小、AE特性支持和可编辑性方面具有较大的优势。
图3 PAG和Lottie对比图
和Lottie、SVGA实现不同的是，PAG不依赖平台端渲染接口，可以实现各平台的渲染一致性。PAG与Lottie、SVGA的矢量能力支持如附表1《AE特性能力支持》所示。
无论是PAG还是Lottie、SVGA，所支持的AE特性仅仅是AE众多特性中的很少的一部分，这在一定程度上限制了设计师的创造力。针对这个问题，PAG新增了BMP预合成的导出方式，支持导出所有AE特性，适用于不可编辑的场景。其原理如图4所示，在合成的层面将渲染结果截取成图片，然后进行视频编码。
图 4 BMP预合成原理图
针对视频不支持透明通道而动画需要包含透明通道的问题，在编码的层面扩展了透明通道的支持，如图5所示。
图6 PAG矢量和BMP预合成混合导出
针对导出动画和AE设计动画存在偏差的问题，PAG导出插件增加了使用了不支持AE特性提醒功能，如下图7所示。
图7 PAG导出面板
在预览界面，同样有不支持特性的提示，如图8所示。
图8 PAG导出面板预览窗口
在使用AE设计动画的过程中，设计师可以方便快捷的提前查看使用了那些不支持直接导出的AE特性，换种实现方式或者导出成BMP预合成，有效的解决了设计动画和导出动画存在偏差的问题。
在AE动画设计的过程中，PAG导出面板提供了一键设置BMP预合成的方法，如下图9所示。需要提示的是，一旦设置了BMP预合成，该合成中的文本和图片将不能再被用户编辑。
图9 BMP 预合成设置
由于BMP预合成可能会影响到可替换图片的数量，PAG同时会实时更新可替换图片的数量给设计以提示。
在用pag设置的素材中，经常会遇到用户填充的图片与默认占位图尺寸不一致的情况，在导出面板中PAG增加图片填充的四个规则，如图10所示：
图10 可替换图片填充设置
其中：
不缩放：画面不缩放，从左上角位置开始裁剪
黑边：在保持高宽比的情况下缩放到设备的可用屏幕大小，图像不发生变形，如果图片尺寸和填充区域比例不一致，会出现黑边，为默认填充模式
拉伸：不保持宽高比填充，会发生失变形
裁剪：在保持高宽比的情况下缩放到完全填满可用的屏幕大小
具体效果如图11所示。
图11 图片填充效果图
PAGViewer支持桌面端预览PAG文件动画效果，如下图所示。支持查看动画文件中包含有多少个可编辑文本和可编辑图片，且支持设计师本地填充素材，实时预览填充效果，无需等待上线后才能确认真实效果。图片占位图支持填充图片或视频，如果PAG文件内置了音频文件，支持播放音频效果。具体效果如图12所示。
图12 PAG效果预览
在pag动画实际使用的过程中，PAG经常遇到的问题是设计师辛辛苦苦设计的动画在终端上性能表现不佳，需要进行返工优化，同样的问题在使用Lottie方案时候也会存在。
除了效果预览，PAGViewer还增加了性能展示面板，可以很方便的看到pag动画的基本信息，如时长、帧率、尺寸、bmp预合成的数量，图层总数等，还有量化的性能指标，定量的评估pag文件的性能，如图13所示，方便设计师进行针对性的优化，而不需要等到上线前才会暴露性能问题。具体效果如图13所示。
图13 PAG性能展示面板
目前PAG方案已经广泛应用于腾讯公司内外几十款产品中，涵盖了众多的国民级应用。
总结下来，PAG目前主要使用在以下几大场景：
图15 UI动画场景
设计师设计出动画文件后，研发只需要替换预设的文本内容即可，并且文件体积非常小。
图16 贴纸动画场景
图17 照片/视频模板场景
PAG支持将内置的图片作为占位图替换，并保留所有动画效果。因此可以将整个PAG动画设计成一个模板，把预设的占位图替换成用户选取的照片，自动套用效果生成视频。全程可以让设计师自由批量生产模板，无需研发介入。
仍然基于图片替换原理，PAG也支持将占位图替换为视频，实现视频模板功能。
图18 智能剪辑场景
智能剪辑是围绕用户上传的视频内容，生成定制化的模板，模板本身是不固定的，可以从多个PAG文件组合而成，类似活字印刷。设计师可以利用这个特性，构建自己的特效组件库，然后对接AI的识别能力，根据一定规则组合得到无限数量的模板效果，可以做到一键出片。这块目前的典型应用场景是王者荣耀的周战报功能，随机生成游戏高光时刻视频。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
本文从What和How两个部分阐述如何输出清晰有效的设计方案，为大家建立系统的设计思路提供帮助。
很多初入职场的设计师在审美和平面图形基础上都比较扎实，对软件的操作也出神入化，单个方案的界面视觉表现完成度和细致度也没有太大问题。但却往往在实际输出项目方案的时候碰到瓶颈，方案反复地修改还不尽人意，设计能力无法得到质的提升，晋升的脚步也从而停滞。
本文从What/How两个部分循序渐进地阐述如何输出清晰有效的设计方案，希望给大家一些建立系统性设计思路的启发，帮助大家更好地输出设计方案，为决策设计方案提供更有力的参考。
WHAT: 什么是清晰有效的设计方案
首先我们需要对清晰有效有一个整体的认知。所谓清晰，从字面上理解是指看得很清楚、明朗，设计层面来说就是方案能做到方向明确，方案明了。而有效字面上指的是有效果，有效力，从设计层面来说就是输出的方案可以解决存在的问题，能达到设定的目标以及可以切实落地。
清晰和有效的考量维度是不一样的：清晰更多是针对设计这一环节，在于不同方向/方案的差异度和侧重点；而有效则更多需要联合设计上下游（用户/产品/开发）。对于优秀的设计方案来说两者相辅相成，缺一不可。
接下来我们来详细拆解什么是清晰和有效。
1.清晰 - 方向明确，方案明了
——————————
很多设计师对方案输出的数量有个认知误区，认为设计方案越多越好，可以给老板、合作方更多选择，往往不假思索地用大量的时间输出所有可能的方案，并拿出来让别人评审，认为把所有的可能性列出来就不会错，这正是对方案清晰性缺乏认知的表现。
在设计最初期，不要着急动手输出界面，先结合目标（近期目标和远期目标）综合考量，系统性地思考有哪些途径达到目标，确保所有实现手段的方式都有考虑到，并且可以整合途径一致、方向近似的方案。对差异性不大的方案进行合并划归，才能在合理范围内整理出具有不同思考维度与目标侧重的提案方向。前期规划思考的深度决定了方案的广度，只有清晰的思考方案才会创造无限的可能。
用案例来让大家对清晰这个定义有更具象的认知：
相册小程序Logo这个需求的目标是需要突出相册元素，并强化品牌识别度。
这是设计师输出的Logo提案初稿，虽然输出了28个方案之多，但没有设计思路的规划，想到哪就画到哪，很多方案是重复的，还有一些方案在设计初期就应该Pass，设计的整个细致度也不够充分。
于是设计师对设计方向重新进行规划整合，按照输出形式重新规划了分类。
按照分类筛选出四个可以继续优化的方案。并且拿着四个不同方向的方案去汇报。最终确定D方案。
我们重新回顾一下这个需求，28个方案 VS 4个方案，设计师需要的不是尽可能输出多方案的能力，方案越多可能表示你在错误的道路上越走越远，需要的是通过前期系统的思考能一次把方案做对的能力。
2. 有效 - 解决存在的问题、能达到设定的目标、可以落地的方案
——————————
很多设计师拿到产品需求会立即动手，认为满足了产品这个角色提的需求便是好的设计输出，或者把方案出的天花乱坠，当产品或者其他角色提出不同意见就会觉得他们不懂什么是好的设计。这些现象大多是因为设计师在项目前期没有正确思考和评估这个需求本身需要解决什么问题、方案能否达到团队共同设定的目标，以及方案是否能平稳落地这三个维度。
解决存在的问题—从问题出发
我们在实际输出方案的时候，不能从产品经理的需求文档开始，而是要把考量维度更前置，从项目现有的问题出发。这个问题的搜集包括外部用户的反馈，内部团队的声音，但需要注意的是用户的反馈不一定是真正的问题，需要做到筛选和甄别。比如新发布一个版本可能会碰到的一个情况是很多用户打一星反馈说界面太难看太丑，这种属于用户感受，我们可以再深挖一下用户觉得丑的原因，是不是改变了太多用户习惯，但又没有给用户真的带来更好的体验和更多的收益。
能达到设定的目标—从目标启动
问题还需要结合目标一起考虑，解决问题的思路并不完全等同于目标，目标是大家一起制定的未来产品的发展方向。比如我们新发布的版本里面新加了一个Tab改变了用户习惯，大批用户投诉，但如果这个新Tab是符合我们目标的，我们不能为了短期解决用户投诉把这个Tab下掉，应该继续观察用户在这个使用过程中碰到了什么问题，解决实际操作中碰到的问题。
用案例来让大家对问题和目标有更具象的认知：
我们需要优化QQ空间的为空界面，首先我们梳理下现网存在的问题，风格整体比较老旧，很多图形表意不明确，新出模块就会有新风格，所以存在很多不统一的地方，空间整个业务有一百多个为空界面，导致开发也不清楚到底应该怎么用，用什么，所以很长一段时间是处于乱用的状态。
接着我们梳理了这次优化的目标：
1 界面统一，用户能对表意感知明确（解决现网问题）
2 强化QQ的品牌
3 做成基础组件，保证复用性
4 低成本开发
确定了优化目标以后我们没有马上急于尝试风格，而是先遍历了所有为空异常页，整合了所有场景最后梳理出八种情况，这八种情况可以覆盖所有的为空场景，梳理整合场景是目标1、3、4能实现的前提。
然后我们基于这八个场景来输出设计风格，要低成本开发，所以这里没有考虑加动画，用企鹅剪影结合具体的场景来表意，不仅强化了品牌，也能做到表意清晰明确。图形定好以后我们马上也输出了规范，Push给对接的开发同学方便调用。
在输出方案过程中，始终都要紧紧贴合问题和目标，避免无效设计。
能落地的方案—技术可以实现
在输出设计方案的时候，设计师需要考虑到开发成本是什么，需要消耗多少资源去实现这个需求，最低成本达到目标的路径是什么。如果有些方案开发成本很大却收益价值却很小，我们就需要斟酌它是否仍有执行的必要。避免一味的追求设计效果不去对齐成本、人力，最后也只会是设计的自嗨。
用案例来让大家对清晰这个定义有更具象的认知：
产品提了好友生日推送礼物的需求，目标是想用生日这一比较温情的场景去设计专门的祝福页，用来提升写操作和大盘活跃。我们需要设计送给用户的礼物卡片，从实现手段的难易规划了三个方向：
A 手势交互但开发难度大: 3D手势交互动画
B 趣味动图且开发成本适中：局部小动画
C 静态但开发成本低：全静态视觉，复用已有开发流程
最后团队对齐了人力成本，决定采用方案C，把设计精力放在本身卡片的表现上。
HOW: 如何输出清晰有效的设计方案
那如何才能输出清晰有效的设计方案呢？设计方案归根结底是思维方式的具体体现，输出清晰有效的设计方案最核心的点在于体系化的思考方式，我总结了一下几点：
1 拓宽边界
——————————
拓宽边界需要设计师站在更高的视角和有更广的视野，把设计从表现和执行抽离往前后延展，在整个设计过程中往前去挖掘需求和规划产品结构，往后做到把控和沉淀，能站在上下游各维度去Review整个项目，只有站在更全局的视角审视，才能跳出片面设计的维度。
2 转换视角
——————————
从不同的视角看待问题，学会拆解问题和解决问题，从产品/开发不同的角度来全盘看整个产品，分析这个需求的投入产出比是不是足够，是不是能达到目标（包括设计目标和产品目标）。设计、产品、开发从来都不是对立的，都是不同角色为了整个产品发力。
举个例子，产品同学觉得输出的方案不好看，是在用感性表达，我们可以尝试继续拆解不好看背后的原因，比如是不是核心内容不够突出、担心按钮转化率等，一开始就抱着产品不懂设计这种想法是没有办法解决问题的。
还有一个就是用户同理心，很多时候我们不能只站在设计师和产品的角度看待用户反馈的问题，比如新功能内部团队觉得很厉害，但实际门槛太高，用户根本不知道怎么操作，而我们长期体验这个产品反而忽略了产品的易用性。
3 结构思维
——————————
我们在启动项目的时候，不要单点去看要在某个页面要做什么改动，而是从问题入手，和产品同学对齐好目标，结合设计理念，最后找到发力点在哪里，循序渐进，这样很大程度上能避免项目的反复，对设计流程的准确把控也是输出优秀设计方案的基础。
举一个日常生活的例子帮助大家理解，比如我的问题是长得丑，我的目标是要变得更年轻漂亮，我的理念就是改善体型和优化五官，最后找到具体的发力点比如晚上不吃晚饭，去美容院打美容针、学会怎么化妆等。
4 认知创新
——————————
有些新设计师对设计创新的认知还停留在是去做一些创造世界、改变世界的事情，认为创新就是把原项目进行翻天覆地的改变，初入职场会觉得负责的业务和项目都很小，没有什么意思，其实创新的维度有很多，包括设计工作流程的优化、还有从小的问题点着手去深挖和思考，找到合适的解决方案并打磨细节给用户创造惊喜。摆正心态才能做对事做好事。
5 及时复盘
——————————
完成项目以后需要不断的总结方法，遇到的问题，除了技法层面的提升，更重要的还包括思考层面的提升。学会去总结之前踩过的坑，避免重复性的问题，比如你的输出一直存在层级不清晰的问题，那么你需要关注后续输出的界面里大模块之间以及元素之间的层次是否还存在这个问题。可以犯错误，但是尽量避免总是犯同样的错误，这样才能加速成长的脚步。
写在最后
进入互联网公司工作之前，我们对设计的理解更多停留在表现层面，所以对好设计的判断标准更多是好不好看、喜不喜欢。当进入互联网公司后，随着工作经验的积累，我们会发现设计不只是狭义地使用软件绘制图形，背后需要很强的逻辑和系统思考的能力、结构化的思维、沟通能力等，需要我们不断的学习补齐自己的短板，及时转换职场心态。
文章来源：站酷 作者：腾讯ISUX
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
有了解和学习 B 端的同学必然都听说过 SaaS 这个词，这在 B 端行业是个非常重要的产品形式和分支。
虽然它重要，但新手对这东西的理解充满了让人遗憾的扭曲。比如常见的误解式提问，Saas 应该怎么设计？适用哪些设计风格？
……
所以我从最底层的技术层面，来解析 Saas 到底是什么，在未来你再也不用担心对这个词汇一知半解，无法正常参与业务讨论了。
讲解什么是 Saas，或者刚刚图例出现的 Paas、laas 是什么，首先要认识一个问题，一个需要联网的软件，是如何落地的，需要哪些前提条件。
通常，我们可以把一个普通的联网产品要正式上线并使用，需要满足 9 个层级的条件，我们简称 “9层塔”，分别是：
下面，我们根据每个大层级来解释一下，它们分别都是什么。
1.1 基础设施层
基础设施层是一切网络服务的根基，由现实世界的硬件组成，是所有技术、代码、数据的运行基础。
层1：网络（Networking）
即基础的互联网电信宽带服务，通过电信运营商在各地搭建联网用的设备，并使用线缆相互连接，满足数据的物理传输可能。
比如你想要在家上网冲浪（非移动上网），最基础的条件是就是购买和开通宽带服务，通过接入光纤的形式，实现从家中连接到互联网世界的可能。
层2：服务器（Serves）
服务器，本质上也是一台电脑。有了联网的条件，我们就要把网络接入到这台 “电脑” 上，让它来完成各种数据的处理和存储。
但不管它能做什么，要做什么，首先你得先有这台设备，不然后续的工作都无从谈起，所以服务器指的就是用来完成后续工作的电脑设备。
层3：存储（Storage）
存储就是硬盘，你想要运行的任何程序、代码，还是想要收集的数据，都需要容纳的地方，那就是硬盘空间。存储就是关联到服务器的硬盘，是数据存储的物理环境。
之所以硬盘被独立出出来，而没有把 CPU 内存这些拿出来，是因为数据的存储和安全（物理上）是网络服务的重中之重。CPU、内存、电源坏了，替换就可以，硬盘损坏导致数据的丢失是无论如何不可能接受的。
所以，工程师们开发了非常多特殊的技术来保障存储的稳定和安全。
1.2 技术应用层
技术应用层，就是具备了网络、服务器、硬盘以后，让这些基础设施充分发挥作用和能效的相关技术。
层4：虚拟化（Virtualization）
虚拟化是个比较抽象的概念，它是一种资源利用的技术，让服务器最大化的利用和分配自己的资源。
比如一台服务器，有8核心、8G内存、8G存储，如果卖个一个客户运行一个程序，那么很可能这个这个程序日常只使用一个核心的算力，1GB内存，1G不到的存储，剩下的算力资源不就浪费了嘛？
于是，虚拟技术就可以把这台服务器切割成 8 台 “虚拟机” 卖给 8 个这样的客户。让他们在这台设备上运行 8 个不同的程序，并根据它们各自使用的消耗灵活分配 CPU 和内存资源。
所以，今天如果你想要搭建一个网站，云服务商出售的 “虚拟主机”，就是在实体服务器主机上切割出来的一部分。这样客户省钱了，商家利润率也更高了！
层5：操作系统（OS）
每台电脑都有自己的操作系统，我们熟知的 Windows、Mac OS等等。如果硬件没有搭载操作系统，那它们就只是一堆工艺精密的废铁。
对于服务器来说也是，任何服务器想要正常运行，都必须搭载相关的服务器操作系统，有了基本的系统，我们才能创建程序，让服务器去运行我们想要的功能。
前面提到的虚拟机，就允许同一台服务器通过虚拟技术运行多个系统。
层6：中间件
中间件也是个比较复杂的技术概念，它是个独立系统软件服务程序，是软件的直接面向对象（而不是服务器），是一种支撑软件。
举个不太严谨的例子，我们常规的逻辑是一个程序对应一台服务器（或虚拟机），但真实情况往往是一个程序会关联好几个服务器和不同的系统，来完成不同的网络服务。正常情况下，你需要对每个服务器和系统进行适配。
而中间件的作用就是帮助你省掉这个麻烦的步骤，让你只需要对接唯一的翻译和话事人，他会帮你向不同的任务对象传达你的要求。
层7：程序环境（Rumtime）
程序环境，就是编译代码用的环境。我们常听说的 C 语言、C++、PHP、Java、.Net 等编程语言，都需要安装一个对应的运行环境。
许多热衷电脑游戏的同学一定很熟悉游戏第一次启动触发的 Java 安装界面，那就证明这个游戏中运用到了 Java 的代码，如果你没有 Java 的运行环境，那么它们就无法生效。
1.3 产品表现层
层8：应用（Application）
在这个系统下，应用程序指的不是你在自己电脑手机上安装的程序。而是安装在服务器上运行的程序，不管是后端程序还是前端程序。
它们需要使用某些特定的程序语言来编写，并运行在上面所说的对应环境中。我们所说的后端开发，通常就是开发服务器所运行的程序的程序员。
层9：数据（Data）
这个词放在这里可能有比较大的歧义，数据实际上就是使用这个程序所产生出来的数据，而不是单指数据库（数据库也是环境的一部分）。
比如你打开一个网站注册了账号，上传了头像，那么这些信息就是使用程序所额外产生的数据，它是项目正常运作的必然产品。
1.4 SaaS 到底是什么
理解上面的9个层级的内容是什么，我们就可以看下面这张图表了。
SaaS 全程 Software-as-a-Service，翻译叫 “软件即服务”，讲人话就是 “卖联网软件” 的。
前面提的 9 个层级，除了最后一层数据是我们普通人可以负责的，其它每个层级都需要对应的开发和工程师来负责对吧，那么我们普通人还是企业就不能使用网络软件服务了嘛？
这肯定是不符合事物发展规律的。
SaaS 的存在，就是让用户不用管什么服务器、代码、中间件这些有的没的高深玩意，直接让你在浏览器或本地客户端上直接使用这款联网软件，并创建对应的数据信息。
换句话讲，只要这个软件是联网的，且软件本身的功能就是服务的核心（划重点：社区电商类软件的服务显然不是软件功能本身），它就是 SaaS。SaaS 既可以免费，也可以是通过批量出售软件功能的使用权来赚取收益。
免费情景：
微软：如果你使用了基于 Web 的电子邮件服务（例如 Outlook、Hotmail 或 Yahoo!Mail），那么你已经使用一种形式的 SaaS。
https://azure.microsoft.com/zh-cn/overview/what-is-saas/
付费情景：
在 B 端的语境下，SaaS 通常就是指制作一个面向商业用户的联网软件，然后批量出售这个软件的使用权。它并没有特指这个软件必须是 CRM、ERP、HRM 还是商用 HMI……
所以明白了嘛，SaaS 只是一个商业形式或技术形式的统称，它根本没有具体的设计规范或者学习方法，完全根据业务的实际需求和场景决定。
最后，再问你们一个问题，你们现在负责的项目是 SaaS 嘛？
在 9 层塔中，SaaS 是完全制作好软件让用户直接上手使用的软件，而 PaaS 和 IaaS 就不一样。
2.1 PaaS
PaaS 全文 Platform as a Service，是平台即服务的简称。这属于完全技术化的服务，是非程序员的一般用户难以参与到的业务类型了。
即服务商提供了基础的 7 层服务，只要用户购买了这些使用权，那么就可以直接在这个基础上编写或安装运行的程序进行使用了。
比如全球最大的开源 CMS 博客程序 WordPress，是由 PHP+MySQL 编写的，如果要创建这样的网站，就可以直接购买符合程序对应环境的服务器，再进行安装部署即可。
2.2 IaaS
IaaS 全文 Infrastructure as a Service，就是用户只购买一个完全空白的虚拟主机，类似你购买了一台硬盘格式化后完全空白的虚拟电脑。
用户可以自己选择安装什么样的系统，编写什么样的中间件，最后再搭建自己的框架。这适合定自定义要求更高的用户，完全根据自己的需要 DIY 项目的服务器功能。
2.3 Hosting
Hosting 则是比 IaaS 更进一步的服务，从原本的虚拟服务器升级到了完整的服务器。
也就是说，在一些特定业务环境下（比如特殊的数据安全要求），用户需要购买完整的服务器硬件使用权，从原本的合租换成整租。
所以，Hosting 就是服务器托管的意思，用户向一些服务商购买了完整的服务器硬件使用权和联网功能，然后远程进行控制和使用。而商家负责硬件层面运维，防止服务器断电、断网、损坏、过热、故障等一系列硬件问题。
2.4 Co-location
九层塔中，我们其实还省略了一个更底层的环节 —— 数据中心。
数据中心是一个物理名词，在今天指的是大规模的服务器数据设备安置和运行的空间。比如苹果的云上贵州，就是典型的数据中心。
Co-location 的服务也叫场地出租，就是数据中心的商家，把数据中心的物理空间使用权租用给用户，用户自己购买服务器或商家的（不是临时租用）放进去，再借助数据中心的网络和其它基础服务实现服务器的正常运转。
这个概念大家简单理解就可以，我就不多做介绍了。
所以，九层塔中包揽了不同层级数量的技术，就可以形成不同的服务，每一级服务有各自的优缺点，是由项目的实际情况决定的。
相信看完前面的介绍大家已经知道，SaaS 等服务是建立在联网的基础之上的，也就是说，除了可以独立运行在你客户端里的本地软件，还包含更多需要联网的软件，或者干脆运行在远程服务器主机上的软件。
这是一个发展的过程……
最早的软件安装是我们到软件店里购买软盘、光盘，回到家里的电脑安装，这些软件往往只在本地运行，是不需要联网的孤岛。
随着互联网行业的发展，孤岛渐渐被消除，联网上传和获取数据越来越普及，甚至，软件都不需要再下载和安装，直接用浏览器就可以访问使用。
这种模式，就催生了软件的开发维护与服务器、网络的硬件运行进行了分工，一般的产品开发团队专注在软件应用层面的开发工作，而把网络、远程服务交给其它商家，并付费购买。
这样不仅带来更高的效率，而且降低了各自的成本，实现了多方的共赢。
所以，我们再来理解云服务这个词就很容易了，云就是网络，云服务就是基于联网实现的各种软硬件服务的总和。
除了远程的虚拟机、中间件、数据库外，还有远程计算、渲染、CND加速、直播分流等等。
这也是为什么云服务会成为互联网发展的基础，因为它实在太重要了，几乎所有互联网公司都无法脱离云服务带来的支持。
这也是为什么各个大厂纷纷投入云服务的赛道中，因为这是互联网的基建和命脉之一，拥有非常广阔的前景与市场。而在马太效应强者越强的现实环境下，头部的厂商拥有更好的机群、技术、人员，可以大幅度降低运作成本，提供更优质但价格更低廉的服务。
虽然云服务在今天不可或缺，价格也越来越有优势。但是，并不是所有企业都一定要选择购买外部的云服务，这就是我们要理解的另一个课题 —— 私有化部署。
云服务再怎么便捷，也有一个缺陷，那就是数据是存储在别的商家、企业的服务器中，有一定的数据安全隐患。
虽然数据安全是云服务的最基本保障，但很多对数据隐私、安全极度重视的企业，是不愿意承担任何外部风险的。所以他们就会通过自建本地服务器（私有云）的方式，实现从网络、硬件到软件全局私有化的部署。
也就是说，服务器机房是自己公司的，网络是自己迁进机房的，服务器自己买的，环境、虚拟化、数据库自己搭建的，后端程序也是自己写的，最后电脑手机上运行的客户端，是连接这些服务器的。
哦对了，当然这些硬件日常的维护也要由自己公司的运维负责……
这样的成本高嘛？非常高。但类似国企、银行、证券、国防、政府机关等机构，对数据的安全性是异乎寻常的执着的，他们是有足够的动力划出预算来确保数据的私密与安全，用来运行自己内部的 B 端系统。
这也是为什么这些机构从一开始就拒绝使用 Figma 这种公有云端软件，尤其是服务器在国外的。
再问下一个问题，私有化部署，就意味着这个环节中所有步骤全是自己搞定嘛？
当然不可能，因为应用这个层面，有时候不是想开发就开发得出来，或者成本实在超出了预算。因为私有化的主要目标是数据安全，但不是应用的工具一定得个性化定制。
比如在即时设计官网的价格页面，就可以看到 “私有部署” 这个选项。它的实际作用，就是允许客户在自己的服务器上安装它，让内部的员工使用设计软件时是同步到公司指定的服务器而不是官方的公共服务器中，满足客户的数据隐私需求
注：这例子大家讨论最多适合理解，非恰饭
所以，了解完上面的概念，你也就大概能明白什么是云服务，什么是私有化。如果需要在工作中碰到更细节的名词还是概念，可以再进一步做理解。
文章来源：UI中国 作者：超人的电话亭
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
综合监管平台是对自然资源管控的一个OA系统。主要功能是对国土资源相关业务的监测、评估和统计，将各专项规划实现“多规融合”，从而优化城市自然资源配置，做好国土空间规划统筹。
为什么要有设计规范
1、多个设计师同步设计
我们部门有2名UI设计师，所以在我们同时画同一个项目界面时，为了保持整个设计的统一，就需要我们设定设计规范。
2、设计与前端之间的沟通
与设计同理，开发人员参照统一的设计规范写页面，可避免同一系统中出现设计控件混乱的情况，从而提高开发效率、减少沟通成本、减少返工率。
3、在公司内部复用
在公司内部，设计规范可运用在多个项目中，从而减少开发的工作量、提高开发效率。
建立设计规范前的工作
从产品经理手中接到原型图，首先是与产品经理的沟通，包括客户需求、设计风格的确定、页面内容的布局等等，关于设计尺寸，因为我们客户用的是1920*1080分辨率的电脑，所以设计就基于1920*1080尺寸来做；但有时会基于1440*900的尺寸来设计，然后上下适配1920*1080和1366*768。所以设计尺寸要根据具体情况而定。
页面框架
a、主体框架分为四个区域：顶栏、左侧栏、页签、主体内容
b、主体内容上、左边距为10px，默认显示一屏高度，超出的内容加上下滚动条
c、页面中的各个组件根据不同屏幕分辨率采用自适应
如何建立设计规范
1、颜色规范
后台系统主色调大多运用蓝色，这是因为蓝色往往围绕着科技、安全、信任等等，很符合业务场景，比如智慧城市、智慧医疗、智慧交通等。但是蓝色用多了也会让人感觉没有新意、审美疲劳，所以在色调这块，后台系统可以采取皮肤功能的扩展，做两套配色好的皮肤供客户选择，这样避免了因客户的不满而一次次的修改，从而提高工作效率。
2、文字规范
因为我们面向的客户多为政府工作人员，且年纪稍长，所以字号要比平常的网页设计要稍大一些；常用字体，中文：微软雅黑，英文或阿拉伯数字：Arial；行间距=字体+8px。
3、按钮规范
按钮是用户与系统间交互的一个重要触点，用于特定触发事件的发生。按钮类型可分为线性按钮、面型按钮、文字按钮、图标按钮、图标+文字按钮，按钮状态分为常规、悬停、按下、禁用。按钮的宽、高、曲率、文字离边框的间距需要在规范中写明。
4、表单规范
在后台系统中，表单多用于登录注册、搜索框、选择器、信息录入等。表单类型可分为输入框、下拉框、时间选择框、单选框、多选框等等，表单状态分为默认、输入/选中、填写完成/已选择、不可填写/不可选、错误提示。对于必填表单，需在标签前后或输入框后增加“红色*号”。输入框的高度、曲率需要在规范中写明。
5、表格
此图为可进行单选或批量选择、排序、表头分组和带有冻结列的复合型表格：
a、固定列表格：对于屏幕无法展示完全的内容，可以采用冻结重要列的方式，然后横向加滚动条左右滑动
b、可对数据进行排序：升序和降序
c、文字类字数限制：重要字段全部显示，其他文字信息超出宽度以“...”代替，鼠标悬停时显示全部内容
d、对齐方式：文字信息左对齐，因为人的阅读习惯是由左到右、由上到下的，此外在主从型列表中，采用左对齐错开文字，可使用户一目了然，降低视觉噪音；数据信息右对齐，因为数字单位个十百千万...是由右向左，方便比较数据大小
文章来源：站酷 作者：Alice冰冰
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
本文是参考国内交互设计标准网站及用户行为研究实现的用户体验设计规范，用于后台设计，网站设计等。
涉及到的产品越多，产品统一性越强，实现信息同频，开发和设计快速了解信息
一个项目中会涉及到多种按钮，甚至一个页面中也会涉及到多种不同功能的按钮，这个就需要把同一类型或同一功能的按钮，它们的位置统一。减少用户学习成本。
因为如果同一样的功能按钮在不同的变换位置的话会打乱用户已经形成的习惯，增加其学习成本。（尽量采取以下情况的一种）
帮助说明的表现形式有很多种，但不管选那种整个项目要保持统一，一些特殊情况除外，固定一个位置，可以方便用户在最短的时间内，快速完成此项操作和获取内容。
权重是为了突出有效信息，也能在不同元素建立一种有组织的层次结构，让用户快速识别关键信息。
为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断，来突出其中一项相对更重要或者更高频的操作。
突出的方法，不局限于强化重点项，也可以是弱化其他项。
但是在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断
表单在遵守操作流程的情况下，让用户涉及到的操作从易到难，让用户有填下去的动力。
排序规则
（1）有“有默认项”的选项；
（2）有“选项”的选项；
（3）只输入“数字”的选项；
（4）“添加图片”“修改”等涉及复杂操作的选项；
（5）“备注”“商品卖点”等选择。
左右排版的时候将“重要必填项”先在从左边（纵向排列）开始排版（排版时仍按照我们的从简到难的规则）
注：当“必填项”比“非必填项”多时，排版上要考虑，就按照次序，左边排满，再排右边。
在使用Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。
注：当悬浮在“客户”所在的文字链单元格时，鼠标
【指针】随即变为【手型】，单击即可跳转。
当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。
注：在移动端尤其适用。
鼠标移入按钮附近，即可激活Hover 状态
当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』
状态一：普通的浏览模式，不区分可编辑行和不可编辑行；
状态二：鼠标悬停时，『指针』变为『手型』，编辑区域底色变黄，出现『Tooltips』提示单击编辑；
状态三：鼠标点击后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。
当『易读性』为主，同时又要突出操作性的『易编辑性』时，可使用『文字链/图标编辑』
状态一：在可编辑行附近出现文字链/图标；
状态二：鼠标点击『编辑』后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。
当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』
注：编辑模式在不破坏整体性的前提下，可扩大空间，以便放下『输入框』等表单元素；其中，在Table 中进行编辑模式切换时，需要保证每列的不跳动。
减少负担，增加轻量化的操作
注：删除的操作是谨慎的，系统在不打断当前操作的时候给出二次提醒确认。
填写表单的条件反馈。
注：不需要提交后才出现提示，输入及时给用户反馈
完成整个操作后的提示以及系统提示
注：重要的，文字多于15个字以上不适合放在toast里面提示。
提供下一步操作的入口
不仅要提示他发生了什么，还能引导他怎么做，甚至能让他一步到位直接跳转到要进行下一步操作的页面去操作
当页面没有按钮时，提供明确的入口。
最后，关于后台的用户体验设计规范就总结到这里啦。
文章来源：站酷 作者：chaih
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
之前总结了B端表单页设计的一些问题，其中信息录入是比较重要的部分，信息录入中选择录入是最为常用及复杂的组件，平时工作中遇到的相关问题也是最多的，此次针对选择录入常用组件的应用场景和交互规则进行总结
选择录入的类型比较多，可以简单的分为两大类即
基础选择组件：单选/多选/开关/下拉选择
复杂选择组件：时间/日期/穿梭框/级联选择/树形选择等
B端表单业务场景比较多，很多场景具有通用性，有的场景却有一定的独立性，需要了解场景及用户的需求和组件的适用性才能提高用户操作体验和效率
一.单选框
单选框(Radio)是表单中比较常用的控件，它通常被用来从一组互斥的相关选项中选择一个单独的选项。
当点击一个未选中的单选名时，它会被选中，其他按钮为未选中状态。英文命名Radio来源于旧收音机上的按钮，用于旧收音机不同频道的切换，当一个按钮被按下时，其他按钮会弹起，使被按下的按钮处于唯一被选择状态的按钮。
使用场景
1.当用户需要在一组互斥的选项中进行单一选择时使用单选框；如果要进行多个选择，推荐使用多选框。
2.当选项数目在2-7个之间时使用单选框；如果选项超过7个，推荐使用下拉框。
3.如果有两个含义相反的选项，如“同意”和“不同意”，“接受”和“拒绝”等，建议使用一个多选框或者开关勾选为同意，不勾选为不同意。
4.如果每个选项都有同等的优先级，没有推荐选项时，使用单选框；如果需要向用户推荐某个选项，可以使用下拉框。
5.如果提供给用户的选项很熟悉，看了第一个选项就能预见到所有的内容，如“周一”，那么后边的选项是“周二到周日”等，这种情况下就不需要将所有的选项都展示出来，可以使用下拉框来简化界面。
交互逻辑
1.选项的设置，在设计单选框的选项时，要充分考虑用户的实际情况，给出的选项要覆盖到所有的情况。应该满足“互斥”的原则，因此选项之间要避免存在交集，同时也要注意选项覆盖要全面，不能出现遗漏。
例如，要考虑到用户不进行选择的情况，这时需要提供一个“无”的选项。给出的选项有可能都不符合用户的情况，如果所有的选项用户都可能不会选，就需要提供一个“其它”选项。
2.默认选项，一般情况下为第一个选项，需要选择最安全，最有可能的选项作为默认选项，提前预判用户的选择，提升用户选择效率。
3.选项排序会影响用户选择效率，所以需要遵循一定的原则。按照逻辑顺序，选择概率由高到低；或者按照复杂程度排序，由简单到复杂；也可以按照操作后风险排序，将最安全的操作放在前边，由风险最低到最高进行排序
4.排列对齐方式，竖直排列相对于水平排列而言，容易读取和定位，可以提高用户的浏览效率，所有的选项进行左对齐，不用受制于选项的标签文字长短，但竖直排列会占用较多的垂直空间；水平排列要注意每个选项之间的间距，间距尽量大一点，要不然用户会分不清单选按钮的文字到底是在前边，pc端水平空间比较大，所以相对而言，水平排列的方式更加常用。
5.交互区域，单选框的面积较小，用户在点击的时候会比较困难。可以通过扩大点击区的交互区域来提高易用性，将标签文字也设置为可点击，增加操作区域的面积，方便用户操作
6.文字标签，每个选项的文字都要简洁明了的表达该选项所代表的含义。一般使用短语而不是句子，因此不需要以句号来结尾。尽量保证每个文字标签用语的表达的一致性，不要出现有的用名词，有的用动词的情况。如果需要解释说明，可以在选项下方使用单独一行文字。如果标签文字无法进行精简，必须使用多行文字，将单选按钮与文字顶对齐
7.交互状态，每个选项都有选中和未选中两种情况，每种情况对应了3种交互状态，分别为默认、悬浮和禁用。
二.多选框
多选框的交互定义是帮助用户完成从若干个互斥的选项集合当中选取一个或者多个选项的任务，多选框多用于表单中。传统意义上，多选框是方形，单选框是圆的，用户已经形成这种习惯认知，所以尽量避免使用特殊形状
使用场景
1.当用户需要在一组互斥的选项中进行多个选择，完成N选n的任务，使用多选框
2.当选项数目在3-7个之间时使用多选框；如果选项超过7个，推荐使用下拉选择
3.当选项数量为一个，包含“是”和“否”的逻辑，也可叫单个多选框 比如常见的用户协议页面，通常采用单个多选框。
交互逻辑
选项排序/对齐方式/交互区域/文字标签等逻辑与单选框基本一致
1.选项的设置，因为所有选项处于外露状态，所以超过7个时建议使用下拉选择器，避免选项过多难以展示
2.默认选项，相对单选框，默认选择在多选框中并不常见
3.提交操作，单个多选场景中，提交时必不可少的，可以是确认按钮或是其他方式；下拉选框中为了提高效率也可不用确认，点击空白处即确认选择。
4.排列对齐方式：纵向排布，适用于选项内容较多或信息长度差异较大的情况；横向，适用于选项数量多且内容简短的情况
5.特殊状态：相对于其他控件，多选有了两个较为特殊的状态“半选中”“禁用(已选)”
1）半选中状态是全选状态的一种特殊状态，依附于全选状态，所以当多选框中存在全选时才可能出现半选状态，同时还需要有选中状态的子项，全选半选状态属于【父级】状态，交互的逻辑是状态的变化是随时体现的，所以【子级】状态的变化，作为【父级】状态也应该随之变化，这样父子级联动才会有半选中状态的出现。
2）禁用状态有未选禁用和已选禁用，未选禁用一般是该条数据不满足条件无法选中进行操作。而已选禁用一般用户的权限不足无法进行操作，通常展示出来只是为了让用户了解到有此操作。
应用场景
1.复杂选择器
复杂选择器中常常会用到多选框，可以明确展示选项的选择状态，需要注意的是多选框可以承载的半选，全选状态所对应的关系，是否符合业务场景。在实际工作中，我曾遇到过父级选择影响子级但是子级无法影响父级的多选场景，不符合常规的多选习惯，但是在实际业务场景中真实存在。
2.权限设置
在很多权限设置/流程设置的页面中，常常会用到多选框，需要注意的是各个场景中选中，取消，默认，重置等不同状态下，页面的变化，状态扭转时交互逻辑的合理性和易用性。
3.表格多选
表格页面情况多且复杂，对于勾选有两种形式一种是勾选多选框，一种是点击行数据选择，需要明确哪一种更适合当前的业务场景。另外表格的中最多的功能即是全选操作或是部分选择操作，需明确操作后对整个表格的影响
三.开关
开关用于两种相对对立的状态的切换,多用于「开/关」「启用/停用」等，不同于单选和多选开关是一个即时性的操作，这也导致开关使用的特殊性。开关能明确的展示当前的功能状态，让用户能高效的进行跳转操作。
使用场景
1.用于对流程的快速开启，如表格中开启或关闭某条数据/功能
2.权重较高的功能或设置，如配置表单的停用/启用，用户权限的启用/停用
3.用于开启/关闭全局权限，后设置其他功能的操作，如业务规则的设置等
交互逻辑
1.开关 配有对应的文字说明，开启/关闭某种功能或权限
2.开关具有联动性，通过开关去控制下层功能的操作
3.开关的每一次变更状态都要有相应的反馈，辅助用户进行状态判断
四.下拉选择
下拉选择B端业务中最常用的组件，且下拉选择的类型也比较广，一般有下拉单选，下拉多选，下拉级联，下拉树等基本场景是可选项过多时，会使用下拉选择器对所有选项进行整合方便用户高效录入信息。选项层级建议不超过 三层且需要有一定的逻辑排序，通常包括触发器和下拉面板两个部分当选项数量过多的时候，建议增加「搜索」功能。
下拉选择结构
1.标签文本：选择器标题，明确选择内容
2.选框：与文本框类似，需有一个外边框，为可操作的热区范围，主要功能是与下拉菜单进行联动
当选项较多的时候，多选框会配上搜索功能，目的是为了让用户快速找到对应的选项，而形式主要有以下两种
3.右侧标识(可选)：每个选框右侧的图标，都是选框类型的象征。常见的是下拉箭头，默认朝下；展示选项列表时，箭头朝上。
4.占位符：保持暗提示的简洁，避免把暗提示作为选择器的辅助说明，默认占位文字，格式为「请选择xxx」
5.回显值：回显值通常包括两种类型
1）当下拉单选，一般采用纯文本回显即可
2）当下拉多选，需要同时展示多个选中项，因此在录入框中采取Tag形式，使单个选项也可以点击删除形成完整的闭环
6.选项：下拉选择一般针对选项数超过5个
内容：1）选框 + 文本 + 副文本； 2）选框 + 文本； 3）文本 + 副文本； 4）文本。除了选项内容的不同，形式中也有较为复杂的，重点分析级联选择和树：
1)树展示，可选择的数据是一个树形结构时，例如公司层级、学科系统、分类目录等，树结构中可以自由选择子节点和根结点。
2)级联展示，针对的一般是有所属关系的选项且所属关系比较明确，层级一般3-5级，选择到最末子级才能完成选择一般是由大到小进行选择，选项数量上3>2>1，比如省市县选择
3)分组展示,选项过多时考虑使用的方式，使用分割线将同一类选项进行划分，用户选择时会思考从大的分类到具体的选项。但选项过多则还是建议用树结构
7.选项面板：承载所有可选择的选项列表，在选项数量过多时会对下拉菜单的高度进行限制，即设置下拉菜单的最大高度，当超过最大高度时，出现滚动条。面板相当于一个容器可以根据业务需求承载复杂的形式 例如tab分类、锚点、字母定位等，
选择器状态
默认（Default
悬停（Hover
1.未选择，若选框有搜索功能则光标变成文本输入状态，若没有搜索功能则光标变成小手（示例
2.已选择，选择后悬停状态下全部清空的功能，不是所有场景下配置该功能， 要考虑实际业务中是否需要清空
激活（Active
1.未选择，点击框体激活下拉面板，单选一般是勾选后自动关闭面板，多选则需要点击面板以外确认关闭面板
2.已选择，若是已选择再次激活，需要将已选择的选项高亮，再次点击已选选项则取消选择；选项热区，一般将整行作为热区扩大点击范围，方便用户操作。
禁用（Disable
1.选框禁用，用户无法激活，选框置灰，在设计工程中需要将禁用于正常状态之间拉开差距，这样用户能快速识别
2.选项禁用，表示该选项无法被选择，不影响整个选择器的功能，只用将该选项置灰即可，光标置入时会变成Not allowed
回显规则
单选，多数单选选择后下拉面板自动收起，回显选择的选项，选项回显时有一些特殊情况如存在极端情况文案过长则结尾用「…」展示， hover 显示「文字提示气泡」；或者选项中存在主文本副文本，考虑实际业务场景回显时可只显示主文本。
多选，以Tag形式展示已选择项使单个选项也可以点击删除形成完整的闭环；存在的极端情况是当选项过多时的展示效果，一般有两种形式撑开高度和选项融合
1）撑开高度，一般用在需要完全展示选择项同时可快速调整已选项的场景中，通过改变录入框的整体高度来展示完整的选型，撑开的高度能在表单中实现一些疏密变化，一般也不会无限撑开，会有一定的限制，并且在右侧增加滚动条。
2）选项融合，对选项展示不作要求的场景中可根据文本框的宽度进行选项融合，展示具体的选项数量即可，这样能最大程度的保证表单的的整齐，让选择器的适配性更高。
3）省略展示选项，以文本形式展示，鼠标hover气泡展示全部选项信息
问题思考
何时用下拉选框，何时用弹窗选择？
大部分情况下，单选优先用下拉选框，用户比较高效的完成选择，同时也可以明确自己的选择。而多选场景中对于选项数量可控，选项复杂度较低的可以用下拉选框。但是对于选项结构复杂，内容过载，用户频繁的滚动容易造成误操作影响选择的准确性和高效性，此时会考虑使用弹窗，且多选弹窗一般需要配有搜索区，选项区，已选区。需要注意的是，已选项在弹窗内的显示以及回显形式。多选弹窗一般可以比较直观的展示已选项，所以可以采用省略展示选项的方式。
选择搜索如何显示？
如下弹窗选择中，对于数量和层级比较复杂的选择项，搜索是很有必要的，对于搜索结果的展现形式不同的场景可能会有不同，用户使用搜索一般是对于选项比较明确，所以推荐搜索结果展示末级，用户可以更高效的做出选择，避免复杂的层级关系干扰。
五.时间与日期选择器
两种类型
1.时间点选择，选定某一个时间/日期点，B端时间点选择的业务场景较少
2.时间段选择，选定某一个时间范围，一般有开始时间和结束时间，时间段的应用一般是在数据筛选的场景中
确定时间类型后，要考虑时间粒度，时间粒度分为年、季、月、周、天、时、分、秒，B端图表页面中针对年度、季度、月度的筛选时很常见的，需要结合场景选择时间粒度。
日期选择器中一般是通过点击让用户选择时间，除了让用户点选外，时间选择器还会提供一些快捷选项例如“今天、本周、本月，本季度“等。选择后回显的时间显示格式有多种如“2022-01-01”“2022年01月01日”“2022.01.01”“20220101”“2022年01月01日”平台需要确定统一的样式，避免增加用户的认知成本。
时间段选择，常见两种形式分段式和连体式，在不同的平台都有应用，在交互上的区别分段式需要用户点击两次分别选择开始时间和结束时间，连体式是用户点击一次调起时间选择时间段，相对而言连体式操作更便捷，但是分段式理解更简单，连体式存在一定的认知成本，总体上来说其实区别并不大，平台需要建立统一的标准，这样能形成较为统一的体验和习惯。
选择器在实际工作中应用广泛，B端业务复杂，总会遇到各种新的场景，总结会有不足不全之处，欢迎大家一起探讨交流。
文章来源：站酷 作者：MuMu鱼
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
分享此文一切功德，皆悉回向给文章原作者及众读者.
用户体验是用户对产品价值的整体感受，其中包括用户感受到的产品价值以及用户感受到的操作体验。不要让用户思考，这是每个设计师所追求的。这篇文章举了大量的例子，来跟大家一起进行产品细节洞察分析。感兴趣的朋友一起来看看吧。
对于B端，我想刚开始很多同学就直接拿Ant Design套套界面，因为公司要求并不高，随后字节Arco Design也推出了对应的模版和规范，能让我们快速作出一个不出错的方案。
但是随着公司对B端越来越重视，这些模版显然就太烂大街了。公司、市场的要求显然不止于此，我们的设计追求也不止于此。
那么我们如何才能摆脱套模版，提高界面的精致度，提升界面的交互体验呢？
其实很简单，王阳明先生告诉我们知行合一，知是行之始行是知之成。我们如何才能提升B端界面端精致度，第一需要知道什么是好的设计；第二需要不断的去实践去练习，缺一不可。
本文先和大家谈谈知的层面，提高我们的眼界，下面就和大家分享一些不错的B端产品，大家有时间可以去慢慢体验。
PS：作为B端设计师，一定要去多拆解竞品，多研究好的产品，别面试的时候，面试官问你研究的B端产品是什么，你只知道阿里云、腾讯云、百度云哦！
做B端的同学，尤其是做CRM的同学应该都知道Salesforce，他是全球最大的 CRM（客户关系管理） 工具公司。
Hubspot同样是提供客户管理相关的应用，虽然成立相对Salesforce晚，但是在市场上也占有一席之地。
从设计的角度来看，他的界面风格更加简洁舒适，从体验上来看和国内的CRM系统完全不同，其体验更加自然和舒适。
这种风格大家看了有没有觉得很熟悉呢？
大家在去看看 GoDoddy , Airbnb ，Zillow,是不是发现风格有一点类似，大家可以对比国内产品去拆解下他们的交互细节有什么不同，完成同样的任务他们采用的方案有何不同，相信你会有很多的收获。
国外的界面看着总让人觉得很舒适，仅仅是因为克制的设计、中性灰使用得好吗？当然不是，是因为英文本身就是图形化的文字。
如果翻译成中文，你会发现好像不是特别理想。
这个样子拿给领导过稿，怕是分分钟被拍死，因此我们还是需要多看看国内优秀的产品。
神策的设计，我想B端的朋友不陌生吧，国内产品中他的设计一直是我们的参考对象。
不同于其他产品，他的体验门槛比较低，注册后就可以去体验他的demo，也没有试用期限，参考对象从可视化报表，到界面交互均能找到参考。
不过当你参考一次后发现，做出来的界面怎么还是少了一些灵魂，虽然界面风格上了一个台阶，但为什么用户还是觉得产品难用。
这里不得不和大家推荐项目管理类产品了，这类产品是专门给互联网公司的开发团队使用，他们都是专业用户，同时这些都是提高他们工作效率的工具，因此这些产品投入的成本更高，优化得更好，拆解他们的产品，就是直接观看高手的成长之路。
Jira是Atlassian公司出品的一款事务管理软件，JIRA的界面效果交互都非常不错。大型互联网公司如LinkedIn、Facebook、eBay等内部都在使用Jira。
同时他也是国内项目管理类产品的学习研究对象，因此大家可以通过文章、B站、界面截图，自己申请体验等方式全面的进行体验。
同时也可借助群的力量，调研下有使用Jira的小伙伴，看看他们在使用中有什么问题，下面是我收集Jira网页版和本地配置版的问题截图，这些都来自不同角色的真实体验，会更有分析的价值。（这部分截图涉及到公司的数据，同时数量多不太方便打码，就不分享给大家了。）
当然国内的项目管理类产品也得去看，我们要对比哪里做得好，哪里还需要改进。国内的有Worktile、Gitee、Tower、Ones、PingCode、TAPD、Teambition，这些产品不管从视觉还是体验都非常不错，大家一定要去体验。
通过不断对竞品进行拆解，你已经不是当初那个小白了，你的行业认知，方案设计能力应该赶超了一大波人。
成长的同时，又发现你设计的界面，不太精致，少了些温度，这时候推荐你看文档管理类产品。
第一个和大家推荐的是WPS，界面简洁，配色舒适。
在管理类的软件中，不得不提飞书的管理界面，从设计到使用体验，他给我的感觉终于不是那么千遍一律，用组件库搭建起来的感觉。
他开始有了温度，开始注重品牌感的打造，用户的引导，符合品牌调性的插画。
对一些体验的细节进行优化，比如传统的编辑都是放在页面顶部，它采用了离光标更近的位置。
根据菲兹定律，光标当前的位置和目标位置的距离D越短，所用的时间越短，具体好不好用，欢迎大家在评论区留言哦。
到这时候如果你觉得线上的产品太禁锢思维，那么推荐你看看dribbble、behance，搜索data、web、dashboard等关键词，去看看有没有新的灵感。
我的花瓣收集了一部分，如果不嫌弃，可以去看看，顺藤摸瓜应该可以找到很多不错的设计。
风筝KK的花瓣：https://huaban.com/boards/76913106
如何提升B端界面的精致度？
第一，要知道什么是好的设计，多拆解国内外优化的B端产品。
第二，多在工作中时间，有时间多做ABC方案，锻炼自己的方案设计能力，多踩一些坑，时刻保持学习能力，慢慢就成长了。
文章来源：站酷 作者：风筝KK
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com