【产品设计】58的系统性设计，让我收获不小

2021-04-22

2431

什么是系统性设计？

初级设计师做页面设计，虽然单页看起来都很好，但是不同页面之间缺乏统一性，一到开发就有很多问题要解决。

中级设计师做组件设计，保证一个组件可以在各个页面调用，既有统一性，又减轻了开发成本。

高级设计师做模块设计，从一套模版中，可以出现各种衍生样式，以不变应万变。

而设计复杂产品的系统性设计，就是需要更多地使用模块设计，而不是组件、页面设计。

当然，系统性设计不是单纯的模块化这么简单，但这么解释方便理解。

系统性设计的统一感

统一性是用户体验最基本的原则之一。

一款产品不论设计得有多惊艳，如果信息布局和操作方式五花八门七零八落，就一定不会好用。

这就好比一栋大楼里的电梯在每一层的按键区都应该长一样那么理所当然。

对于一个可以无限拓展的系统来说，要维持统一性肯定是有挑战的。

例如一个租房页面吸底栏，对于不同的用户和经纪人的展示不同，有的可以在线聊，有的又不能…而且你永远不能预料以后是不是还会出现其它状态。

而 58 的解决方法不错，新方案让不同类型的房源和不同用户视角的吸底栏都具有很高的统一性。

这样的框架想必可以容纳很多的可能性，除非特别必要，以后不需要频繁重新构思样式。

在一个庞大的系统中，统一性不但能够方便用户习惯使用，也能够方便我们设计和开发人员进行维护。

然而有些地方，却要在统一的基础上强调差异感，以方便用户辨识。

系统性设计的差异感

要在系统性设计中表达差异感，颜色是趁手的武器。

很多大企业，例如 Adobe，都喜欢用形态类似但颜色不同的图标，来表示自己的产品：

这样，既可以让人感觉这些图标都是同一个系列，又能一眼看出并记住他们之间的差异。

但是，使用颜色来强调差异感有一个非常大的限制，那就是人眼能够识别的颜色非常有限！

红橙黄绿蓝青蓝紫，这就已经差不多了。实在不行，勉强把黑白灰紫红加上，就已经负担很大了。

所以说，颜色只能用来区分主要的大类。而要增加更多细分类别，还是得辅助图形和文字。

58 原来的提醒模块，原本没有做任何类别区分，除了文字之外长得差不多。

经过改版之后，用三种颜色区分三大类别，让用户能够快速辨识。

而且在统一的信息布局下，让房源提醒展示房源图片，用户相关提醒展示用户头像，多名用户相关提醒展示多名用户头像…差异性更加自然，切中要害。

系统性设计的等级感

任何一个有人存在的庞大系统，都肯定有等级体系。

因为等级体系可以帮助内部更好的优化提升，帮助外部快速筛选出可信赖的信息。

例如 VIP 用户的相框就是和普通用户不一样，这样才能够体现出等级感。

58 这次改版也在等级感上下了功夫，主要是针对不同房源设计了一套既统一又能体现等级感的分享图。

三个等级的信息布局相差无几，却通过颜色、描述和奖章来体现出不同的信赖/尊贵程度。

总结

不得不说，58 这次改版，真的有明显进步，为他们点赞 👍

你对系统性设计有什么想法？欢迎留言交流～

转载声明：文章来源于网络，不作任何商业用途！

免责声明：本文内部分内容来自网络，所涉绘画作品及文字版权与著作权归原作者，若有侵权或异议请联系我们处理。

全部评论

您还没登录

暂无留言，赶紧抢占沙发

【产品设计】58的系统性设计，让我收获不小

全部评论

热门资讯

ui设计培训四个月骗局大爆料，你听过吗？

视觉设计和交互设计两者区别是什么？

成长日记｜刚刚，最新毕业班学员薪资表公布，月入8K+不是问题！...

设计师必备技能ps是什么意思？

【UI设计】UI设计师快速上手B端设计指南

【平面设计】如何做出高端的logo设计

游戏UI的就业前景怎么样？

设计软件ps难学还是c4d难学？

从用户的反馈找到设计灵感的方向

学设计和编程哪个比较好？

热门标签词