@布莱恩臣 ：iPhone X 在 2017 年上市以来，全面屏手机就开始逐渐普及。iPhone 8 的 4.7 寸屏幕到目前最新机型 iPhone 11 的 6.1 寸屏幕，以及 Pro Max 系列的 6.5 寸，各种各样的刘海屏、水滴屏、挖孔屏、折叠屏等等屏幕方式随之出现，物理 Home 键都被舍弃改成虚拟按键，甚至是没有虚拟按键的手势滑动操作。
而这些手机都有一个共同的特点，就是屏幕尺寸越来越大。屏幕尺寸变大后，手握手机的方式和界面交互操作方式也随之改变，那对于设计而言，是否也应该随之进行改变呢？
想单手点击屏幕的操作，需要手足够灵活进行一轮操作才能够到屏幕上方，过程中稍有不慎，手机随时会砸地上。作者的手机屏幕已经修了几次，差不多赶上一台二手机的价格了。
在 2013 年，国外设计师 Steven Hoober 发表了一篇《手机界面设计》的研究报告中，对一千三百名手机使用者进行量化研究数据：
据当时研究的数据可以看出，有近半的用户是单手使用手机（现在肯定不止）。当用户单手操作的时候，实际拇指可以触摸到的区域是如下图这样的。绿色区域是拇指的正常操作区域，黄色区域是拇指能触碰到的最大限度范围，红色区域是触摸比较困难的区域。
然而这份研究报告的数据是在 2013 年发布，当时还没有全面屏的出现，如果把上面研究结论的区域，套用到如今的手机屏幕尺寸上，顶部的红色区域会占更大比例。以 iPhone 11 尺寸比例作为参考，如下图：
拇指可操作范围大约在 3 分之 2 的区域，可见想要触碰到红色区域是有一定难度的。也正是因为这份报告只适合当时的手机市场情况，在当今已经不适用了，因此需要重新去考虑如何为大屏幕手机进行界面设计。
根据 2020 年手机UX设计趋势，大屏幕设计将会成为热点。根据数据报告中有说明，2018 年 10 月使用大屏手机的用户比例是16.3%，到 2019 年 12 月，该数据已经上升到 41%，并且会在未来更多新机型的出现中持续上涨。
那随着大屏幕手机的普及，就意味着设计师在设计界面的时候，要为大屏幕手机的使用场景进行界面调整，避免用户难以使用的体验问题。以下是我整理的一些设计建议方案：
1. 头部区域设计更高
通过将标题栏的信息区域放大，尽量把主要操作内容向拇指区域靠近。
2. 常用导航与操作居于底部
比起导航栏放在顶部，更适合大屏幕手机的方式是将导航和重要操作尽量往屏幕底部放置。
3. 手势操作页面切换与返回
抖音和 Instagram story 等短视频应用界面都是通过手势滑动屏幕的方式，对页面进行切换，操作的学习成本很低，而且主要操作也在屏幕底部。这种操作方式也会在今年越来越多地被使用。
4. 提示弹窗从底部升起
常用的弹窗，很多是设计在屏幕中间弹出，为了适配大屏幕，不妨尝试从底部弹出，关键选项都能轻松选择，提高转化率。
5. 使用大卡片
屏幕尺寸变大以后，使用整张大卡片可以让用户浏览内容更专注，大面积的配图和留白，也能提高用户的点击欲望。
除此以外，作为手机厂商，在发布大屏幕手机的时候，就有对界面操作做了一些对应系统级的设计调整，比如界面下拉悬停，键盘单手模式，屏幕边缘滑动返回等等。
大屏幕尺寸已经是趋势，屏幕大意味着内容可以更大限度地得到展示，有利于产品提供更多的服务，不再纠结首屏无法展示完主要内容。在这个信息爆炸的时代，用户也不再满足于小屏幕的浏览方式。可以说，大屏幕已经是无法改变的趋势。与其担心问题到来，设计师更应该思考如何去适应产品的快速迭代，不断更新自己的设计思维模型，更全面思考问题，产出更合理、体验更好的设计方案。
希望本文内容可以对你有所启发。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
手机及小程序界面设计之一：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之六：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之八：如何适配iPhone X？来看滴滴出行的实战案例复盘！
中国互联网公司的迅速发展正在推动着整个软件行业的审美革命，在 C 端产品市场逐渐饱和的情况下，互联网大厂正在将资本逐步转移到 B 端市场的广阔蓝海中。“B 端 C 端化”的设计理念也应运而生，认为可以用 C 端的模式和思维来进行 B 端产品的设计。
除了刚刚有说到的资本慢慢向 B 端市场的蓝海转移，还有一点就是中国互联网环境的迅速发展，智能手机的大范围普及，工作人群的年轻化，使得人们已经熟练的掌握了各种软件的使用，并且在快速迭代的产品中慢慢变得挑剔、谨慎。
并且不断优化迭代的互联网软件产品也在无形中为用户完成了底层认知的搭建，一些功能、操作、交互逻辑已经深入人心，用户也已经被教育成了”高玩”。
所以如今一些新型 B 端产品的设计理所应当的在用户体验五要素中最贴近用户的结构层、框架层和表现层中与一些 C 端产品在一定程度保持了一致，这种设计理念其实也很好的解决了传统软件的复杂、门槛高、难用等痛点，很大程度降低了用户的认知成本和学习成本，把高效、简单、易用的工具带到大家的日常工作中。
对这个概念的理解我认为是：”B 端产品在使用体验和视觉感受这两个方面和 C 端产品接近”。这是我们设计师需要特别关注的，传统的思维中，大多数设计师会认为 B 端是给公司内部人员或者商家使用的，只是一个管理系统，并不需要太过于精细，至于体验也是停留在“能用就行”的程度。但是在我看来不管是 C 端还是 B 端，其实它的使用对象都是“人”，应该要遵循人们对于事物的认知和一系列复杂的人体工程学操作习惯。两者都需要关注用户在使用时的体验感受，顺畅的使用流程、清晰的信息展示和高效的行为效率，以及有效的引导都能够快速的帮助用户完成目标任务。无论是 C 端设计还是 B 端设计，满足这些条件无疑可以给用户带来更好的体验。
但是也不能以偏概全的认为 C 端的设计思维可以完全复用过来。B 端产品的场景其实比 C 端产品还是要复杂的多，应该说是各有各的侧重点，思维和设计模式上不能完全照搬，下面我就先说说它们各自的不同处，再举例带你看看 B 端产品在哪些方面可以向 C 端产品借鉴学习。
1. 使用者不同
B 端使用者多是同一个组织集体，以群体为单位进行协同。比如：老板、部门主管、员工或商户。而 C 端使用者相对比较单一，目标用户群体即是主要使用人群，使用目标、偏好、个性比较明确。
2. 业务不同：
B 端业务大多数会存在多重维度、场景，使用场景跟业务紧密相关，同一个系统不同角色使用时的业务处理和所关注的数据信息，侧重点会有很大的不同，需要全局考虑。不同角色使用产品的流程差异大，需要不同业务上更专业的解决方案。而 C 端业务一般维度比较单一，业务逻辑相对固定，任务路径和展示内容比较单一。
3. 价值主张不同：
B 端注重效率、成本、管控、数据分析等。追求产品的稳定性、业务的增长性，保证产品性能和技术上的安全性。而 C 端注重用户的体验、使用简单、有乐趣。
4. 产品思维不同：
B 端产品多数基于服务思维，工具化思维，更加理性；更多的是帮助 B 端用户提高效率，完成业务目标。而 C 端多数为产品化思维，游戏化思维，更感性，更多的是娱乐和情感的满足。
5. 产品形态不同：
B 端产品注重业务的梳理，多数会用到图表、表格、模型，多数产品形态偏向更垂直行业或更专业的面板形态。而 C 端更注重用户的感受，会用到很多夸张的动效，炫彩的颜色。
1. 结构层
结构层确定各个将要呈现给用户的选项的模式和顺序。结构层是用来设计用户如何到达某个页面，并且要考虑他们完成事情之后能够去哪里。
具体在 B 端产品的表单交付场景下可以体现出，以前的 B 端表单往往过于冗长，借鉴 C 端一些注册场景的设计，把表单拆分成 3 步内的行为步骤，减少用户的疲惫感提升体验。
2. 框架层
产品的框架层包括：按钮、控件、照片、文本区域的位置。框架层是用于优化页面设计布局的。
具体在 B 端产品的列表页可以体现出，列表页中整体的按钮、文本区域的位置、搜索和筛选的布局设计其实与 C 端产品中的商品详情页是类似的，遵循用户的阅读顺序和视觉焦点来进行设计。
3. 表现层
视觉、听觉、（触觉）的体验设计。多体现在一些情感化的设计也被运用在了 B 端产品中。
反观现在 C 端产品的一些设计风格和流行趋势，有哪些可以运用在 B 端产品的设计中呢？
1. 3D 化
B 端因为对数据的展示有较强的需求，用户在使用过程中提高效率的判断纬度也包括信息数据的获取效率，而 3D 的视觉在数据可视化层面有着天然的优势，可以帮助用户更快速的理解数据维度所表达的核心价值。近年来网速等硬件设施的升级也为 3D 化视觉带来可落地的基础，设计师也尝试在产品设计中融入更多的 3D 化元素。
2. 情感化
人们对传统 B 端产品的印象往往是觉得它们比较枯燥、呆板的，如今一些新型的 B 端产品的设计理念也试图在抛开用户对于产品的这种既定印象，所以很多产品在往一些娱乐化、IP 化的方向尝试，并且都达到了一些比较好的效果，未来在这方面的思考和尝试只会越来越多。
3. 个性化
B 端产品的同质化严重，所以 B 端产品也需要从一些产品定位去定制更加富有个性的品牌基因，可以让用户产生对产品的感情，达到从同类产品中能够脱颖而出的目标。
不管是 B 端还是 C 端，目的都是为了解决业务场景中遇到的问题，使用对象都是人，都应该站在“人性”的角度考虑问题，有人说 B 端产品一般都不注重设计，C 端产品的设计更能满足设计师对美的追求，我只能说它们的侧重点不同，C 端更注重视觉感受，要做到在视觉表现的感性层面吸引用户，而 B 端其实更为复杂，需要做到底层的强大数据处理能力，产品的专业性包括交互、视觉的吸引力，这样才能从众多产品中得到用户的认可并脱颖而出。设计师还需要不断打磨细节和优化体验来吸引和留住用户。
所以说“B 端 C 端化”也只是在某些方面通用，但核心侧重点不同，不能以偏概全、一概而论，但可以借鉴与参考，B 端产品也可以做的很精彩。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
Cs界面设计之二：如何区别B端与C端的产品设计差异？我总结了26条对比！
我发现很多新人设计师和我当年一样，有一个误区，认为做C端就是比做B端更好。尤其如果能做知名C端产品，想想都开心。
△ by Chris Ota @ Dribbble
我作为一个两者都做过的大厂设计师，想要总结一下自己多年的经验和观察。如果你还在犹豫选择做C端还是做B端，或者担心做B端不好，无论你是UX还是UI甚至是PM，都一定要用心看看：
P.S. 本文不能代表所有情况，只能代表很大一部分典型状态。
领导和客户，哪个更难搞定？
我觉得领导更难搞定。
很简单，如果作为一个基层设计师，你不知道自己有多少层领导，例如设计层、项目层、产品层、公司层甚至集团层…
而且，每一层可能还有不止一位领导。
更可怕的是，他们之间的意见可能统统不一样…
这还不包括一些与你意见相左的平级队友…
而方案评审有时还逐层递进，每一层改一次。好像升级打怪一样，你还统统无法拒绝。
经常是A、B、C、D方案随机组合各遍，最后发现又回到了原点…很多情况下，C端大公司里做设计，时间就是这么被消耗掉的。
那B端就好些吗？
不但要应付本公司的领导，而且还要应付对方的领导，层级还岂不是更多了？
并不是这样。
虽然领导数量变多了，然而金主经常只有一个——甲方公司内，即能够审批是否为该项目付费的领导。
对于B端公司来说，做项目的目标特别明确，那就是——能不能让甲方爽快给钱。
只要钱给够了其它都好说，不像C端公司那样，考虑的东西特别多：口碑、留存率、转化率、活跃度…
也就是说，即便本公司领导不喜欢你的方案，但只要金主爸爸喜欢了，一般就不会有什么问题，毕竟谁也不会和钱过不去。
当然，甲方内部自己意见不统一的情况也是有的，但一般外包项目都会有比较明确的负责人，所以很多时候也不会太复杂。
很多C端公司不重视汇报，很难开一次正儿八经的进度报告会。因为就那么几个人，反正办公室里抬头不见低头见，何必整那些“形式主义”。
甚至设计规范什么的，意思意思就好了，反正大家翻来覆去也就那么点页面，文档做精致了给谁看？
B端就不一样了。
一整个项目下来，真正和甲方面对面的机会不多，所以每次都一定要特别隆重：
明明只需要一个步骤，恨不得拆分成两个，一定要让金主爸爸感觉服务到位、物超所值，最好是能够多给点钱。
在C端公司工作，你会发现你学的那些设计流程根本用不上几个，因为绝大多数需求都小得跟拧螺丝钉差不多了。
当然，你申请C端工作的时候，作品集里的项目流程一环不能少，得整得跟造火箭一样。
C端公司通常不求数量，更求质量。自家产品的流量来之不易，必须长期迭代维护，才能不被竞争对手超越了。
结果需求越来越细，设计方案可以为要不要圆角、标题字体要不要大1号、留白要不要多2个像素之类的小问题争论半天…
B端就不一样了，就跟做饭店一样，讲的是翻台率。项目能够1个月搞定，就绝对不要拖到1个半月。
最好是永远不要迭代，一次过审，尽快拿钱收工走人。
至于细节问题，只要刚好够忽悠甲方那就够了，多一点都是浪费。
C端产品有点像快销时尚，隔一段时间就得改个版。也不是因为之前有什么问题，就是给用户换换口味，刺激一下他们的“消费欲”。
而且每推出一个新功能时，界面上最好是设计得有点个性，生怕用户感觉不够新奇，没有点击欲。
B端就不一样了，经常是项目一次性交付，只要不出问题就几乎不迭代。
甲方已经把价格压得这么低了，还追求什么个性风格？还不如全部组件化，一套规范搞定N个界面。不容易出错，还能把成本降到最低。
这句话不难理解，可以从前面的内容就可以推理而来。
C端追求个性，需要不断推陈出新，从感官上刺激用户，那么视觉设计的工作就不会少。
而由于C端产品的需求大多以局部迭代为主，少有大改或者从零到一的机会，所以交互上可以发挥的余地多少有些限制。
△ by Anton Mikhaltsov @ Dribbble
B端常用组件化设计，需要个性化的地方不多，很多后台页面甚至完全不需要视觉设计。
而且很多B端公司会将同一套视觉风格用到不同的项目中，顶多换个色调、改个首页风格。
而拼凑组件的工作，通常交互设计师就可以解决。
△ by Tom Koszyk for EL Passion @ Dribbble
最后说一点，我认为C端与B端没有高下之分，就看个人取舍。
但要注意的是，一旦你选择了其中一个，以后再换方向可能就没那么容易了，所以做选择是要谨慎。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
Cs界面设计之二：如何区别B端与C端的产品设计差异？我总结了26条对比！
经常在网上看到「B 端产品 C 端化」的讨论。
一开始我以为这个概念是说 B 端产品以前做得太差了，但随着竞争越来越激烈，以后也要像 C 端产品那样注重用户体验，更加轻量化、趣味性和人文关怀才行。
当时我还挺不以为然，感觉像是噱头或者自嗨。
把用户体验做好虽然重要，但是这对 B 端公司的实际业务（钱）未必有什么直接影响。
因为对于绝大部分客户来说，功能、效率和价格才是真正的硬指标，而且光是能找到能同时满足这三点的产品就很不容易了！
然而，我最近刚开始参与一个 B 端项目，为了做竞品调研，我试用了国内外十多款产品（国外为主）。
做完之后，我深刻反思了自己过去对「B 端产品 C 端化」的理解还是太肤浅。
其实 B 端产品 C 端化，并不是因为传统的 B 端产品没 C 端好用（不是这么比的）。
其实关键还是获客模式的转变。
传统的 B 端产品是销售驱动，销售人员通过电话、上门拜访等形式促使客户下单。
一旦成功卖出，只要后续的服务不太差，客户就没必要更换迁移。
现在 B 端市场越来越大、行业信息越来越透明、客户的判断能力越来越强，传统销售模式开始变为互联网营销。
B 端产品在网上发布信息并投放广告，吸引客户自己前来试用并购买，只需提供少量客服人员即可。
这与以往的 B 端业务模式有很大不同，所以就需要变革。
所谓「B 端产品 C 端化」，表面上是学习 C 端的用户体验，背后的真正意图是要学习人家 C 端的互联网获客能力。
我发现 B 端产品的 C 端化程度，和他们的互联网广告投放力度成正相关。
例如我在油管上经常受到 Monday、GoDaddy 这两款 B 端产品的轮番轰炸。
先不说好不好用（毕竟我也不是目标客户），我发现他们用起来真的很有「C 端感」，和传统的 B 端产品果真不一样。
倒不是什么“轻量化、趣味性和人文关怀”，而是因为他们在我打开网站的那一刻，就开始不断吸引我探索使用。
我拿 GitLab 和 Monday 的官网首页对比一下，也许你就能感受到了：
前者像是一板一眼的「老实人」，后者则像是对你笑眯眯的「绿茶妹」，高下立判。
“轻量化、趣味性和人文关怀”这些东西，并不足以打动用户试用和购买，顶多只能算是「低段位」手段。
只有「高段位」手段，才能让用户不自主地地被吸引，心甘情愿地掏钱。
可是要做到「高段位」真的很不容易，我今天就总结几个技巧吧～
1. 直接坦诚
遇到两个陌生人：一个打官腔又遮遮掩掩的；另一个说话友善接地气又诚实，你会更喜欢哪个？
可能大多数人跟我一样会喜欢第二个。
C 端化做得好的 B 端产品，会把自己的产品预览图直接放到首页供人观看，而不是搞一张概念图外加一堆高大上的广告词。
前面放过的那张案例，这里也可能拿来用：
GitLab 的官网画了一些很抽象的概念图，写了一些很抽象的描述，给人感觉很模糊。
Monday 的官网明确把自己的业务类型列了出来供用户选择，还把每种业务对应的图标和展示方式画了出来，感觉很明确清晰。
2. 有效互动
遇到两个健身房销售：一个上来就说一个劲地介绍服务；另一个则先确认你平时的健身习惯，再根据你的情况介绍服务，你会更愿意听谁说话？
我肯定更喜欢第二个。
C 端化做得好的 B 端产品，不是简单地展示信息，而是先了解用户，再根据用户的需求提供不同的信息甚至服务。
Zendesk 的网站，会把自己的功能列出来给用户，给的图像和描述又很抽象，毫无互动感。
而 Asana 会让用户选择自己需要的功能，并直接给出具体案例的界面展示图。
3. 降低门槛
遇到商场逛街时遇到两个陌生餐馆，一家在二楼；另一家在一楼，你会愿意尝试哪家？
肯定是第二个。
很多 C 端化做的好的 B 端产品，会把表单用弹窗的样式放在产品上面，让用户感觉只要填写完就能立即使用了。
比起 Trello，Smartsheet 只是在表单展示了一下产品内部，就让用户感觉门槛低了好多。
即便 Smartsheet 的新用户后面发现背后那张图真的这是一张图而已，要填的一点不少，但这时都已经快填完了……
4. 循序渐进
两家陌生的两家餐厅都把菜单摆出来了，一家的菜单写得密密麻麻；另一家的菜单虽然菜品不多，但是推荐菜品和菜式分类很清晰，你会更愿意尝试哪家？
我相信很多人都会更愿意尝试后者。
C 端化做得好的 B 端产品，不会太在意自己的产品是不是看起来功能齐全，而是更在意用户是否能够很好的理解产品，不要造成心理负担。
上图来源：Figma 这些交互细节，B 端设计也值得借鉴
Sketch 和 Figma 的属性面板在功能上其实没有很大的差异，但是后者看起来却清晰简洁许多，对新用户更加友好。
B 端产品 C 端化这个理念其实很好，但如果被误以为只是向 C 端学习用户体验那就可惜了。
用户体验只是手段，关键目的是在没有销售人员参与的情况下，如何从互联网获客。
这次的经验的提醒我，以后如果再看到一些很火概念，不要简单的从表面理解，而是要站在决策者的角度，多思考背后的真实意图。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
Cs界面设计之二：如何区别B端与C端的产品设计差异？我总结了26条对比！
“组件”是平台级产品非常重要的组成部分，设计组件不仅可以节约设计和开发成本，更是设计理念的约束性体现。但是，随着平台级产品业务场景的复杂度不断增加，过往沉淀的设计组件的交互模式和视觉形式，却跟不上业务发展的诉求。因此，我们思考：如何建立和迭代一个优秀的组件库——不仅能保持良好的普适性，解决全平台产品的体验一致性的问题；并且能够保持各个业务线的特色和定制化需求，即所谓平台级组件的“和而不同”。
随着近两年业务的发展，早期沉淀的组件渐渐无法满足业务诉求，一部分组件的使用率和覆盖率很低。
因此我们决定对贝壳平台组件进行一次全新的升级。我们的目标不仅是针对“基础组件”进行优化，保持其良好的通用性，达到“和”的目的；更希望能够承载业务线（二手房、新房和租房）更多体验场景的需要，做到服务于业务的“不同”。
为了更好的实现升级目标，我们思考了以下几个问题：
1. 设计组件库的使用人员有哪些不同的角色？他们的诉求是否有区别？
在我们眼里，设计组件是对设计工作的一种管理，而设计工作从产出到落地的完整链条上，主要有三种角色的人群：
贝壳平台设计师和各个业务线设计师：平台设计师穷举组件使用场景的同时，提炼业务诉求，帮助业务线设计师通过组件更省时省力的高效完成设计工作。
开发团队：通过设计师的输出，明确组件开发的具体框架和自由度（例如按钮颜色是否支持不同业务自定义等）
产品团队：通过设计组件文档明确设计的标准，在各角色有共同标准的认知下，需求中可使用组件搭建的部分无需重复提需求，节约各方成本。
因此，设计师需要产出的并不是一份简单的组件库源文件，而是一份以不同角色合作伙伴的视角，都能看得懂的设计组件表达文档。
△ 图 1 给设计、产品和开发不同的文件样式
2. 组件真的是越多越好吗？
我们给出的结论是：面面俱到反而无从下手。在做设计组件时，大多数同学都会有患得患失的心理，认为组件足够多，就可以应对更多的使用场景，规范也足够细致和统一。
但是这是一个比较理想的状态，过于低微的颗粒度下，设计反而会失衡。这里的失衡是指，创新和规范之间的平衡被打破，显然不是我们想要的。并且平台级组件库是具备再生和持续发展的生长能力的，因此不必一味追求数量。
3. 采用什么方法可以合理的控制组件的质量和数量，挑选出通用度高的组件呢？
我们优先梳理了贝壳平台流量 TOP30 的核心关键页面，依据数据圈定范围，然后进行组件的整理。如下图，我们发现使用率最高的前十名组件，按照降序排列依次为：tabs 选择>Navbar>房源卡片（业务通用组件）>经纪人展位（业务通用组件）>按钮>通知与提示>弹层>搜索框>操作菜单>标准悬浮球。
△ 图 2 贝壳平台流量 TOP30 页面组件应用情况
这样，我们就可以按照以上优先级，优先设计和代码化使用频次较高的组件。
我们将贝壳原有组件库的全部组件打散，重新定义后分成三大类别：
平台基础组件：指不具有业务属性的元件及基础组件，例如：按钮/表单/列表/搜索栏/系统反馈弹层/操作栏/Navbar 等。
业务通用组件：指横跨多业务，但在不同的业务场景中略有变化，有公共元件可提炼，例如：经纪人展位/房源卡片。
业务特性组件：指只属于某一业务应用范畴的组件，无公共元件可提炼，但是在单一业务线复用率较高。
组件的明确分类，可以帮助我们在日后每当有新增组件时，以统一的标准和原则进行归纳和整理。
除了优化平台基础类型的组件外，我们还对其中使用频率很高的业务通用组件——房源列表进行了优化。
房源列表是在贝壳平台通常以线性结构呈现的。用户通过纵向扫读来获取房源宏观信息，横线浏览来了解单个房源条目的细节信息并进行相关操作。它在二手房、新房、租赁、海外等等业务线，都会经常被使用到。贝壳平台原房源列表样式，由于业务的发展，需要展示的信息逐步增多，依次罗列在列表中，导致展示效率变低，无吸引用户的亮点，最终导致用户对房源列表的“决策效率降低”。
而想要提升决策效率，并且优化后的列表能够在各个业务线使用，我们先要了解，在不同业务场景中，房源卡片都要展示哪些内容？这里我们应用到了先前研究得出的结论——用户浏览房源列表的心智模型。
△ 图 3 用户浏览房源的心智模型
在心智模型的指导下，我们进行了“元素穷举”。
△ 图 4 元素穷举
得到了具体展示哪些元素后，我们开始思考，一个包容性强的列表底层结构应该是什么样子？经过几次的反复推敲和尝试，我们得出如图所示的三层结构：容器背板层、可交互操作层、内容展示层。
△ 图 5 房源列表的三层结构
容器背板层：它是承载列表内部所有内容的盒子，我们在这一层，定义了容器的形状，圆角等属性，使它成为一个统一的底层模版。
可交互操作层：这一层放置的是用户关于列表可进行的全部操作，例如关注，查看 VR 图片等。并且，我们针对具体每一种操作行为，定义了统一的交互方式。
内容展示层：这一层涵盖所有用户可以查看的具体信息，包含房源标题、楼盘名称、房源详细信息和价格的动态浮动变化信息。
通过三个层次的划分，我们可以清晰的定义每个层次的具体的职责是什么，这有利于我们后期面对复杂业务场景和海量信息内容时，可以更好的去归纳和组织信息的呈现。
在完成了元素穷举和结构分层之后，我们绘制了一个基础框架模版，如下图：
△ 图 6 房源列表基础框架
然后我们将不同业务线的具体细节信息，嵌入模版中，设计成各个针对不同业务和不同场景使用的房源列表。带着这样的设计结果，我们与业务线的产品经理和设计师同学进行了一次深入的探讨，并且确定可推行迭代的节奏。
综合 14 天数据，二手房改版后，CTR 由原来的 44.65%提升到 51.35%。这对于房源列表来说，是非常难得的。
△ 图 7 改版后的数据结果
以上就是本文的全部内容，相信大家已经掌握了 C 端组件库建立的基本方法，这里我们总结一下组件库的创建流程：
△ 图 8 C 端组件库的创建流程
组件库是每一位用户体验设计师，在日常工作中积累的设计资产。组件要做到“和而不同”，“和”是指用规范化的底层容器，将抽离出复用率高的元素包裹起来，形成体验一致，交互一致的封装模块。“不同”是指，每条业务线可以根据自身具体的使用场景，去定义各自在内容展示层要展示的元素，保证了一定的自由度和各自生长的能力。
房源列表在贝壳平台首页已经上线有半年左右的时间了，通过改版，用户使用房源列表时的决策效率有一定程度的提升，业务覆盖也逐步扩大。在研发老师的协同下，实现了 Native 和 Flutter 组件的封装，大大缩短了开发时长，从而提升了产品整体的研发效率。
希望能给同样正在建立组件库的设计师同学们带来一些启发，贝壳用户体验团队也会继续致力于更多业务特性组件的深挖，期待你的关注。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
Cs界面设计之二：如何区别B端与C端的产品设计差异？我总结了26条对比！
说到网格的应用，我们可以追溯到很远。古埃及人在他们的雕刻和绘画中描绘的人物遵循了一个规则，将比例标准定为人的拳头，一个站立的人物从地面到头顶测量为 18 个拳头。
公元 1040 年，首次在中国出现活字印刷，主要采用的是泥活字。在西方，金属活字印刷术在 1450 年左右出现，而古腾堡圣经在 1455 年左右的发行将是出版界的第一个重大里程碑。金属类型的文字更加充分利用了网格。
到了 1917 年，网格在荷兰风格派运动中最为明显，由艺术家 Theo van Doesburg 和 Piet Mondrian 领导。他们将画布限制在相交的垂直和水平线条和原色上。
1919 年，德国的包豪斯学校成立，他们主张的简洁实用的设计理念同样用到了网格的概念。像著名的包豪斯国际象棋，它的棋子都是正方形和长方形等简单的几何形体，可以紧密地组合在一起，以便紧凑地存放。
1950 年代，一种崭新的平面设计风格终于在瑞士形成。这种风格的设计，力图通过简单的网络结构和近乎标准化的排版方式，达到设计上的统一性。这种风格一直到现在影响了很多网页和平面设计师。
随着第二次世界大战的结束，一种新的消费主义出现了。经济快速发展，广告业的繁荣逐渐兴起。保罗·兰德作为美国第一个应用瑞士平面设计风格商业艺术家，他以企业品牌标志设计及商业广告设计而闻名，网格在这种新的广告形式中发挥了重要作用。
今天我们要聊的是关于网页设计的网格系统。说起来很简单，但其实里面包含了很多复杂的概念。网页设计的第一步就是如何进行布局。标题、导航、按钮放在哪？每个元素之间的间距是多少？这些都离不开页面布局。作为网页设计的基础，页面布局可以极大地影响用户阅读的流畅度和直观度。在聊页面布局前，我们需要先普及一些概念。
页面布局是网页上所有视觉元素的排列。通过页面元素的有序排列，可以建立元素间的关系，从而更好地引导用户体验。作为网页设计的关键组成部分，布局决定了页面哪些元素最受关注，以及页面的视觉整体平衡。总之，一个好的页面布局可以将用户的注意力引向正确的方向。先将他们吸引到最重要的元素上，然后按照重要性顺序阅读余下部分。
要实现良好的页面布局，最好的办法就是应用网格系统。网格是设计的骨架，可以帮助我们对齐，有序组织页面内容。通过正确使用网格，我们不会随意地把元素放到页面里，而是明确地知道将这些元素放到哪些合理的位置上，有助于提高设计效率和设计质量。无论是 PC 端还是移动端设计，通过网格都将对我们做出有指导性的设计决策并为用户创造更好的体验。
网格由几个部分组成，分别是 Column (列)、Gutter (槽)和 Margin (边距)。它们在一起构成了屏幕的水平宽度。
接下来通过几个图例来详细解释下。
列(Column)是跨越内容区域的垂直部分。在网页设计中列越多，网格就越灵活。列的宽度由设计师自己来决定，传统做法是在 PC 端网页上使用 12 个，Pad 端使用 8 个，移动端使用 4 个。列宽一般定义为 60~80px。列宽是影响实际内容宽度的关键因素。
槽(Gutter)是列与列之间的间隙。槽的作用是将每个模块的内容进行纵向分割。较宽的槽更适合较大的屏幕设备，可以通过更宽的槽去拉开页面的间距，使页面信息展示的更加舒展。
边距(Margin)是内容与屏幕左右边缘之间的空间。更宽的边距更适合更大的屏幕，因为它们会在内容的周边创建更多的空白。
介绍了以上 3 个概念，我们可以利用 8pt 网格系统来对页面进行分割。8pt 网格系统，使用 8 的增量来调整页面元素的大小和间距。也就是说，页面中的高度或宽度、边距或填充都是 8 的倍数。
有没有想过我们在做移动端界面设计的时候为什么选用特别小的画板，但我们的显示设备却非常大？
比如，我们用 375×812 的尺寸来进行设计 iphone X，但其实 iphone X 的实际尺寸是 1125×2436，是我们设计尺寸的 3 倍。
因为设计尺寸会以 2 倍或 3 倍的像素进行渲染，比如 iphoneX 就是以 3 倍尺寸进行渲染，iphone8 或 iphoneXR 会以两倍尺寸进行渲染。所以我们在进行设计的时候可以采用 1 倍最小尺寸进行设计，以适配到不同设备的不同尺寸。因此，1pt 可以分别转换为 @1x（1 倍尺寸）、@2x（2 倍）和 @3x（3 倍）大小的 1px、4px 或 9px。
所以我们设计一个 16pt 的图标，导出@2x 或者@3x 的尺寸应该是 32px、48px
使用偶数来调整元素大小或元素间的间距可以很好的适配到各种尺寸的屏幕。比如在@1.5x 尺寸下，如果用奇数来定义元素尺寸或间距，就很容易出现半个像素的情况。5px 在 1 倍尺寸中导出为 1.5 倍尺寸就容易出现半格像素的情况。之所以选择 8，也是因为大部分的屏幕尺寸是可以被 8 整除的，这样就很容易适配。此外在 PC 端没有使用 2 或 4，是因为其颗粒度太小，不便于设计师进行操作；用 8 的倍数来设计还有一个好处就是避免我们在设计中过于纠结。
基于 8pt 网格的排版系统。字体的大小可以设计成不同的尺寸，但它们的行高要尽量是 8 的倍数。
在网页端设计时，很少会遇到几倍尺寸的输出，所以通常情况下都以像素为单位，这样的话就是 8px 的倍增。我们就可以把间距或者元素定义成以 8 的倍增不同尺寸。
例如：
small = 8px
medium = 16px
large = 24px
x-large = 32px
……
普及了上述概念后，我们一起进一步了解下页面的布局，页面布局大体分为几类：固定布局、流动布局、自适应布局、响应式布局。
固定布局，顾名思义就是页面的整体宽度是固定的，不会随着浏览器的拉伸变化而变化。这种页面相对死板单一，但对于设计师来讲相对容易设计，也易于开发。
流动布局，它会随着浏览器窗口的大小而变化，但是它变化的逻辑是以模块的百分比来定义的。无论浏览器的宽度是多少，流动布局都会填满页面的宽度。其次流动布局不需要像响应式布局那么多样性的变化。它在极大或极小的页面宽度上会存在一些缺点。比如页面很宽，内容可能会被拉伸得太长，单个文字段落可能会在单行上贯穿页面。相反，小屏幕上的多列布局也可能对内容来说过于拥挤。
自适应布局可以理解为是固定布局的一个升级版，举个例子，当页面内容为 960px，此时页面无论再往多宽拉伸，页面内容始终显示 960 宽度。如果缩小宽度到一个临界值时，比如 960px 以内，页面就会缩小到它的第二个宽度，假设是 640，以此类推。这个临界值我们称之为断点。
响应式布局结合了流动布局和自适应布局。随着浏览器宽度的增加或减少，响应式布局将像流动布局一样进行变化。同时，如果浏览器宽度超出了某个临界点，也就是断点，那么页面布局也会发生改变。通常，响应式布局是为了能够兼容网页端、平板端和移动端等不同设备进行设计的，这样会给用户带来更好的浏览体验。
最后用图例展示下如何利用网格系统在网页设计上进行页面布局。
在 figma 上的设置如图：
我们可以设置好列数，定义好列宽和槽宽来决定页面的实际宽度。
在网页设计上使用网格系统浅层价值是为了让页面布局有章可循，使页面看起来更加统一，深层价值其实是为了做自适应布局，让页面在不同宽度下适配到不同的设备上。
这里我也创建了 4 种不同尺寸的网页端网格系统，供大家参考，大家也可以根据自己的实际情况去建立自己的网格。
https://www.figma.com/community/file/1076073453929437640/8pt-web-grid
最后推荐一款 sketch 智能布局网格的插件，喜欢的同学附件进行下载。
切记，在实际项目中，尽可能灵活的使用网格，不必拘泥于 8pt 的单位，但尽量保持在偶数范围。
参考文献：
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
配图取自文章《以B端产品为例，帮你深入浅出掌握「设计系统」》
设计系统 = 设计价值观和原则+设计规范+场景定义+工具包
设计系统是在设计价值观和原则、设计标准指导下的各种共享的设计模式和组件资产，是将产品设计团队联合在一起共同打造的一套质量和效率上都有所保障的可行性解决方案，能够解决产品视觉、交互体验一致性的问题、帮助传达统一的品牌认知。帮助团队快速完成产品迭代和功能开发！
问题 1:
随着业务的拓展，产品和项目数量不断增加，发展中期设计和交互上不一致性的问题浮出水面，需要采取措施确保产品或产品线之间保持统一的品牌传达、外观和体验，以满足用户预期并向其传达统一的品牌认知。
问题 2:
无统一的设计规范和交互原则，没有统一的 UI 组件库和代码库，各团队设计和前端需花费大量资源陷入低质量沟通协作和重复造轮子，拖慢产品和项目设计和开发节奏。
问题 3：
产品项目数量 vs 产品设计师，人员配比严重不足的情况下，团队的设计师们无法从杂/乱/急的日常需求中剥离出来，影响构建产品壁垒的质量和速度。
产品侧：
保证可复用模块的交互体验的一致性。如同一个产品类型不同分支多个团队完成的时候，可以保证产品团队使用同一份设计规范快速完成产品原型设计。
设计侧：
把设计师逐渐从不必要、重复性劳动中解放出来，节约出来的时间和精力放到更多有价值的工作上去。更多去关注对用户需求和业务逻辑的深入挖掘，如果每个设计师都具备产品用研、交互、组件化等一条龙能力，才能体现 tob 产品设计师的价值，才不会被别人称作是拖拽组件的“工具人”。
开发侧：
形成开发资产，可以提升研发效率，降低维护成本。开发工程师无需再重复开发同一个组件，只需要去组件库里调用即可，配合业务逻辑，高效完成界面开发。做到开箱即用。
测试侧：
标准化的设计规范，是测试人员最喜欢看到的。1 是 1，2 是 2 的设计准则，提升了测试效率。例如，设计规范规定弹窗 footer 区按钮组居右，那么测试人员只要测到不居右，就可以给产品提优化建议了。
主流设计系统-他山之石可以攻玉！
无需犹豫，直接基于现有的优秀的开源设计系统。
设计系统的打造不必从 0-1 构建， 例如：Ant Design 业界优秀的开源设计系统，我们完全可以站在前人的肩膀，最终生产出符合达观品牌、业务特性的设计系统。
1. 原子理论设计介绍
首先原子设计理论并不是什么高大上的规则。最早是由国外前端开发工程师 Brad Frost 提出的，他从化学元素周期表中得到启发，发现在化学世界中，所有的物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物。根据他的理论，设计体系主要包含 5 个层面：原子、分子、组织、模板、页面。
原子理论设计不是一个线性的过程， 它更像是一个心理模型，来帮助我们把用户界面看作是一个连贯的整体，同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。下面，让我们更深入的了解每一个概念哦～
2. 原子层(Atoms)：
原子是物质的基础组成部分，是构成设计系统的最基础元素。
在界面中以「元素」的形式存在，例如：颜色、文字、图标、分割线、间距、圆角、间距、阴影等。
简单概述下来就五个字：色、形、质、构、质；
3. 分子(Molecules)层
在界面中，分子就像是一个由 UI 元素组成的相对简单的组织。如：按钮、弹窗、搜索框等。
以按钮为例，它的组成元素包含了文字、色块、图标和间距。这些抽象的原子从毫无关联组合成一个分子，图标和文字互相配合传达意义，颜色定义了按钮的特性，间距为按钮定义了一个尺寸和规范。
4. 组织(Organisms)层
分子+原子组合成更复杂和可扩展性的模块，这个称之为组织（区块组件），如：列表操作区块、列表展示区块、表单区块、数据统计卡片区块。
以表单为例，一个表单我们可以通过数量的组合，以及间距的调整，元素的增减，在界面中表达不同的场景和含义。
5. 模板(Templates)层
由原子+分子+组织构成的更复杂更具拓展性的模块，如：分组表单页、页面级表单、详情页、列表页、异常页、dashborad。
本质就是线框图，模版在设计系统承载的作用就是保证设计方案在原型阶段的多样性。专注于页面的底层的内容结构，页面中的信息是占位作用，而不是页面的最终内容。
6. 页面(Pages)层
带业务逻辑的场景案例如：标注详情场景、抽取详情场景、权限管理场景。页面将真实内容应用于模板；
页面是模板的具体实例，填充了真实的内容（图片、文字等）后形成页面，也就是常说的带交互逻辑的「视觉稿」即为高保真原型图，将占位符替换为有代表性的真实内容，使设计系统有了生命。在模版的基础上进行优化和完善就形成了页面最终的设计方案。
误区 1：设计体系就是设计规范或者组件库吗？
许多人认为设计系统就是单个代码库、组件库、设计规范，但实际上他们不是一个层次的东西，准确来说设计体系包含设计规范，组件库也是建立在设计体系内的，组件库是记录和共享设计模式的工具，就是设计体系工具化和表现层的部分；
误区 2：设计体系的存在扼制了组织内创造力，会替代掉设计师？
抛出这个问题，是因为经常在不同的场合听到“设计系统是扼杀设计师的创造力”之类的观点，我个人是很难认同这个的，对 design system 的最大误解就是限制设计师的想象力。首先设计系统本身就是一个庞大且复杂的设计观集合，需要调动整个团队的想象力和创造力，最终达到一个统一共识才有可能被实施和执行；
好的设计系统可以通过流程和机制促进创造力的，而且好的设计资产可以帮助大家从不必要的、重复的劳动时间内节省出来，当然也不能过度依赖过往的沉淀资产，把自己定位为设计系统的创造者，而不是使用的工具人，不断的创造和贡献好的解决方案被整个组织采用，就不必再担心那些即将沦为沉没成本的过往设计与技术资产的限制。不会替代掉设计师，反而是一个企业内部尊重设计师价值的开始！是企业对设计文化的认可！
误区 3：设计系统是一劳永逸的吗？
设计体系是动态的，永远是随着组织需求和用户需求而变化的，一切说自己已经完成了设计体系的建设的人都是错误的，都是将静态的设计规范曲解成了设计体系。
误区 4：设计系统由少数人员生产，我们负责用就行了？
正确管理机制：少数人负责管理，多数人参与贡献；避免你做、我用模式，这种生产消费模式非常内卷；避免如：我一个设计师为啥要用你的规范；这规范做的太垃圾用处不大，我才不用，用你做的规范；我苦逼做业务，你晋升拿结果的负面心态；
设计系统也不是简单的靠少数的人 1-2 个月用爱发电就能完成的，设计系统是一群人，对一种做设计文化的认可，每个与之相关的人都应该是设计体系的贡献者与布道者！
当然设计体系也容易出现一些缺点，这些问题需要设计体系的构建者们去摸索去克服；
尽管有一系列潜在的问题，但总的来说设计体系带来的收益是大于这些投入的，总的来说方向是没错的，下一个关键问题是：我们如何去建立一个更优秀的设计体系。
今天就跟大家分享到这了，一点拙见，设计系统的话题这个我们分三期跟大家进行交流，如有兴趣，铁子们可以加个关注
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
