发布网友 发布时间:2022-04-23 01:29
共1个回答
热心网友 时间:2022-04-12 19:49
Ant Design是前端代码实现方案可不是搭建静态的界面这么简单,还包含动效的解决方案,也提供动效设计风格和原则。
众所周知蚂蚁集团的B端产品是一个庞大的系统,数量多且功能复杂,而且变动频繁,常常需要设计师和开发人员能快速做出工作上的配合。
同时这类产品中有存在很多类似的页面以及组件,根据原子设计理论可以得到一些稳定且高复用性的内容。随着这两年B端产品的逐渐白热化,越来越多的用户对更好的用户体验有了进一步的要求。带着这样的一个终极目标。
蚂蚁集团体经过大量项目实践和总结,逐步打磨出一个服务于企业级产品的设计体系——Ant Design。通过组件化设计规范,降低冗余的生产成本,让设计者专注于更好的用户体验。
『Ant Design设计原则是什么』
针对B端产品反复出现的一些设计体验等问题,Ant Design给出标准的设计原则,实现跨应用交互一致性的有效融合。依照这些原则使用Ant Design组件设计界面,既减少了不必要的认知成本,又能够提升设计的效率。
考虑到需要适应各种定制化的业务场景,设计原则具有一定的灵活性,万变不离其宗,通过了解设计原则的构建逻辑,高效组织信息、帮助建立用户与界面的互动等原则性要求,可以衍生出更具场景特性的设计方案。
①Ant Design设计原则的由来:
可以说Ant design的设计规范摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华原则,并做了理论之外最佳的设计实践。
其十大设计原则反过来是对书本理论的补充,我在看书的过程结合『Ant Design』能更好地理解那些原则的释义。每一个原则都用了大量通俗易懂的案例来补充说明,这也是为什么国内的企业一直以来都很喜欢使用这套组件的原因。
②Ant Design设计原则的适用范围:
1.我们先说说『Ant Design』的适用范围:
稍微了解Ant Design的小伙伴都知道,本系统是针对B端后台系统,承载媒介是PC端的浏览器。使用的人员主要包括:用户体验设计师、交互设计师、UI设计师、前端程序员等。
2.再说说『Ant Design设计原则』的适用范围:
顾名思义『设计原则』主要是针对设计师在创作页面时依照的标准。虽然『Ant Design的设计原则』是Ant Design系统的一部分,但是前文已经提到。
此原则是摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华,所以设计师可以把这些原则运用到任何的设计领域,并不要局限于企业后台系统的PC端产品。
为了方便大家理解,讲一个小故事。故事来自于《写给大家看的设计书》,作者有一年圣诞节收到一份礼物——一本关于植物的百科全书。
作者翻阅之后,发现其中有一颗叫约书亚树的树,造型奇特,自己从未见过。于是决定出门转转,然而发现外面到处都是这种树。故事到这里就完了。
可能大家会想,这个故事要讲一个什么道理呢?简单来说就是,当你手中有个锤子,满世界都是钉子。当你了解到下面要讲的十个设计原则后,你会发现它们处处都适用。
③Ant Design设计原则的内容:
十大原则如下:1亲密原则(Proximity)2对齐原则(Alignment)3对比原则(Contrast)4重复原则(Repetition)5直截了当(Make it Direct)。
6简化交互(Keep it Lightweight)7足不出户(Stay on the Page)8提供邀请(ProvideInvitation)9即时反应(React Immediately)10巧用过渡(Use Transition)。
『如何运用Ant Design的设计原则』:
对于一个初级设计师而言,想要了解UI用户体验等知识,学习Ant Design的设计原则算是比较快能上道的,因为Ant Design是吸取了很多前辈的精华,提炼而成的系统。
打个简单的比喻,对于设计师而言Ant Design就是设计师学习『视觉规范』,掌握『设计原则』最好的字典。
接下来我就给大家说说我是如何快速理解Ant Design的这10条设计原则并运用到工作当中。
Ant Design定义了10条设计原则,根据『席克定律』选项太多不易记忆,于是我找到了这些设计原则的共通性,将其归为4类,也就是大家只需记住四类设计原则,在工作中适当延展即可。