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

2021-04-22

4870

0

什么是系统性设计？

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

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

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

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

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

系统性设计的统一感

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

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

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

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

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

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

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

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

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

系统性设计的差异感

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

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

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

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

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

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

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

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

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

系统性设计的等级感

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

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

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

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

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

总结

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

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

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

0

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

收藏

全部评论

您还没登录

登录 / 注册

暂无留言，赶紧抢占沙发

热门资讯

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

学员采访丨师兄师姐用行动告诉你思想决定高度！...

【配色技巧】国外流行的7种不同领域配色风格...

游戏UI是什么东西？游戏UI设计的基本原则和一些思考...

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

文字太多PPT应该如何排版？

UI设计面试作品集到底应该怎么做？

什么叫用户体验设计师？

UI和UE学哪个更有前途？

保定设计培训学校排名怎么样？

热门标签词

漫画速度线手怎么画五官比例影视后期培训班推荐漫画特效线 0基础学习ui设计裙子褶皱 ui设计培训学校动漫女生画法动漫俯视脸 3d游戏建模漫画少女的眼睛画法漫画眼睛原画师真实收入马克笔

绘学霸是国内专业的CG数字艺术设计线上线下学习平台，在绘学霸有2D绘画、3D模型、影视后期、动画、特效等数字艺术培训课程，也有学习资源下载，还有行业社区交流。学习、交流，来绘学霸就对了。

绘学霸iOS端二维码

IOS下载

绘学霸安卓端二维码

安卓下载

绘学霸微信小程序二维码

小程序

版权声明

本网站所有产品设计、功能及展示形式，均已受版权或产权保护，任何公司及个人不得以任何方式复制部分或全部，违者将依法追究责任，特此声明。

热线电话

17688437870

咨询时间：9:00～21:00

在线客服

联系网站客服

客服微信：17688437870

公司地址

中国·广州

广州市海珠区晓港中马路130号之19

Copyright © 2008 -2020 CGWANG广州市王氏教育科技有限公司版权所有电信与信息服务业务经营许可证：粤B2-20201042 广播电视节目制作经营许可证编号：（粤）字第04146号粤ICP备09115880号

绘学霸客户端（权限暂无，用于CG资源与教程交流分享）

开发者：广州王氏软件科技有限公司 | 应用版本：Android：6.0，IOS：5.1 | App隐私政策> | 应用权限 | 更新时间：2020.1.6