广州总部电话:020-85564311
广州总部电话:020-85564311

广州网站建设-小程序商城开发-广州小程序开发-企业微信开发公司-网站建设高端品牌-优网科技

19年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

B端主题色必须蓝色?不用蓝色有什么后果?
发布日期:2024-11-05 11:04:48 浏览次数: 871 来源:交互设计学堂

你有没有发现,几乎所有的B端产品都是蓝色?


尤其是大厂B端设计系统,国内就不用说了,哪怕是国外那些比较“个性”一点的,基本都是蓝色。


AntDesign / ArcoDesign / TDesgin


IBM Carbon Deisgn system / Altlassian Design system


甚至就连淘宝这种橙色的电商,商家后台的主题色是蓝色。



拼多多的商家后台宁愿左上角顶着一个格格不入的大logo,下面的UI都要用蓝色。



再看看阿里云,一个纯粹的B端产品,顶导航的logo和高亮色都是橙色,除此之外主题色还是蓝色。而且为了避免橙蓝对比过于强烈,故意选了一个偏暗的蓝色。



难道设计B端产品,除了蓝色就没别的选择了吗?


紫色在国外也用得不少,不过也都是偏蓝的紫色,可以看成蓝色的衍生品。


Clickup


钉钉最近也为AI换上了紫色:



然而除了蓝色和紫色之外,B端产品确实极少用其它颜色。


虽然也不是没有例外,就比如我自己最常用的公众号后台和小商店后台,都是微信家的,一个绿色一个橙色。



微信的B端设计比较特殊,我猜测可能是因为B端对微信来说不太重要,于是让C端设计师设计B端产品所导致的。好在,微信的这些B端后台并不复杂,主题色特殊点也影响不大。


但是对于比较复杂复杂的B端产品来说,用这种主题色还是有风险。阿里云宁愿给导航和页面分2套主题色,都不愿换掉蓝色主题色,背后肯定是有不得已的原因。


接下来,我就给大家分享一下3点我认为比较大的原因。


原因1:提示不明显


B端产品,都是处理很严肃的业务问题。

例如,有工作任务逾期了,一定要用红色或橙色标识出来,让员工看到后赶紧完成。不然员工总忘记完成工作,这公司还怎么运作下去?



但如果产品的主题色就是红色或橙色,那么提示色的提示效果就没了。甚至可能随便一个按钮,都比提示信息更抢眼。


这个问题有什么解决办法呢?


如果能确保主题色没有提示色显眼,会好一些,但这个就对设计师的要求比较高了。



原因2:状态不清晰


前面说的提示只是一种状态,而很多B端产品有多种状态。


例如成功状态一般都用绿色,警示状态一般用橙黄色。而蓝色,因为没什么特殊的含义,就用在进行中之类不太重要的状态。



如果B端产品用绿色作为主题色,成功状态就没那么清晰了。



如果B端产品用黄色作为主题色,警示状态就没那么清晰了。



这个问题有没有办法解决呢?


如果确保主题色没有代表状态的颜色那么显眼,最好还有点色相上的偏差,就好一些。



原因3:高亮色不清晰


在UI设计里,经常给文字和图标加高亮色,作为悬停态或选中态。



但这种设计,要求高亮色明度不能太高,文字和图标默认态的颜色也不能太深。不然就会像下图这样,高亮色加上去后反而削弱了对比度。



蓝色或紫色通常本身明度不会太高,放到文字或图标上不会出大问题。


但黄色和绿色,因为本身明度偏高,不太适合用在文字或图标上。



这个问题也不是没办法解决,像是闲鱼就是把黄色用好的典型案例。诀窍在于,主题色只用作背景或装饰,不会用在文字和图标上。



这就会导致设计难度上升,而且很多B端组件库提供的配色规则不能直接用,得大改。


B端产品通常讲究的是实用,何必在视觉上多费些没必要的成本呢?


总结一下


B端产品主题色如果不选蓝紫色,确实麻烦许多,难怪绝大部分B端产品都绕不开这类颜色了。


B端产品如果logo不是蓝紫色,UI主题色却要用蓝紫色,确实会比较麻烦。如果产品比较简单,或许可以任性。但如果是复杂的产品,或许UI主题色改用蓝紫色会轻松点。

优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询