Ant Design蚂蚁设计理念

                                                Ant Design蚂蚁设计理念
  空间布局是体系视觉设计的起点,和传统法人平面设计的不同之处在于,UI界面空间要基于【动态、体系化】的角度出发展开。我们受到建筑界大师柯布西耶的模度思想的启发,基于【秩序之美】的原则,探索UI设计中的动态空间秩序,形成了Ant Design的界面布局方式,为设计者构筑具备理性之美的布局空间创造了条件。在中后台视觉体系中定义布局系统,我们建议从5个方面出发:1、统一的画板尺度  2、适配方案  3、网络单位  4、栅格

5、常用模度。
统一的画板尺度
无论是做任何的网页或是后台网站画板的尺度是必须要统一的,这样会避免出现一系列的问题所以统一的画板尺度很重要。
适配方案
在常用的布局当中左右布局和上下布局是最为常用的,左右布局最常布局的做法就是在左边输入一些内容文字右,右边可能就会放一些图标或是图片作为装饰。
在这里插入图片描述
上图就是一张左右分割布局的一个板式图,这张板式图是呈左右强弱的排版进行布局的,这样看起来就会比较不平衡这只是个人视觉上不同的感触而已,但比较上下布局版块来说左右布局的视觉感官不如上下布局的视觉流畅自然。
网络单位
Ant Design 通过网络体系来实现视觉体系的秩序。网络的基数为8,不仅符合偶数的思路同时能够匹配多数主流的显示设备。通过建立网络的思考方式,还能帮助设计者快速实现布局空间的设计决策同时也能简化设计到开发的沟通损耗。
栅格
Ant Design采用24栅格体系。以上下布局的结构为例,对内容区域进行24栅格的设置,对开发者而言栅格是实现动态布局的手段,而设计师对于栅格的理解源自平面设计中的栅格。在具体落地中视角的不同就容易造成偏差,最终影响还原度,继而增加沟通成本,Ant Design的设计师通过4点来实现设计过程中和工程师的沟通:
1、清晰的定义动态 2、尽量保持偶数思维 3、关键数据的交付(Gutter、CoIumn) 4、区块的定义要从couIumn开始到coIumn结束。
常用模度
蚂蚁中后台涵盖了大量的不同类型和量级的产品,为了帮助不同设计能力的设计者们在界面布局上的一致性和韵律感,统一的设计到开发的布局语音,减少还原损耗,Ant Design提出了UI模度的概念。在大量的实践中,我们提取了一组可以用于UI布局空间决策的数组,他们都保持了8倍数的原则、具备动态的韵律感。经过验证,可以在一定程度上帮助我们更快更好的实现布局空间上的设计决策。
在这里插入图片描述
如上方内容所示一样这张后台网站都是统一的画板尺度减少了不必要的出现的某一些问题,适配方案是根据上下左右的布局进行的一个搭配没有出现左右强弱的视觉问题看起来也没有什么视觉上的不流畅和不自然的视觉感官,常用的模度具备上方所述内容的动态的韵律感其实布局对于设计师来说只是一个思路上的一个方案而已,不一样的网页有不一样的布局风格,有的严谨有的松弛也有些是青纯可爱的,布局方式不一样里面排版的内容也不一样有的只适配与左右布局的方式不适用于上下布局的方式(就比如登录页面和注册页面这两种页面就只适用于上下布局的板式)就像这张登录页面他
在这里插入图片描述
的布局板式就是一个上下布局的一个板式设计,

猜你喜欢

转载自blog.csdn.net/weixin_44619280/article/details/89957042