刚开始,我们都不怎么了解Ant Design,之后我们上了一节有关Ant Design的课,了解到Ant Design是蚂蚁金服,蚂蚁金服是一个浙江蚂蚁小微金融服务集团有限公司。蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂,而且变动和并发频繁,常常需要设计与开发能够快速的做出响应。同时这类产品中有存在很多类似的页面以及组件,可以通过抽象得到一些稳定且高复用性的内容。

Ant Design的设计语言,首先是设计价值观,要知道每个后台制作的原则,先是亲密度的问题,我们一定要注意要是如果信息之间关联性越高,它们之间的距离就应该越接近。

接着是对齐,这是一个很小的细节问题,我们往往在视觉看上去是对齐了,实际并没有。如果页面的字段或段落较短、较散时,需要确定一个统一的视觉起点,对于文字来说,基本左对齐。对于表单还有数字技术右对齐。我们要是对不齐可以打开参考线,来解决。

对于对比简单的理解就是被选中的,增加视觉效果最有效方法之一,同时也能在不同元素之间建立一种有组织的层次结构,让用户快速识别关键信息。

设计是也少不了重复的,重复元素可以是一条粗线、一种线框,某种相同的颜色、设计要素、设计风格,某种格式、空间关系等。如:

蚂蚁金服研发团队组织架构 蚂蚁金服总部设计_蚂蚁金服研发团队组织架构


这个以线框来表示,文字格式重复。

直截了当非常直接,正如 Alan Cooper 所言:『需要在哪里输出,就要允许在哪里输入』。这就是直接操作的原理。不要为了编辑内容而打开另一个页面,应该直接在上下文中实现编辑,这样能使我们制作的效率提高。先做个示范:

蚂蚁金服研发团队组织架构 蚂蚁金服总部设计_类目_02


足不出户简单的成语,能在这个页面解决的问题,就不要去其它页面解决,频繁的页面刷新和跳转,就像在看戏时,演员说完一行台词就安排一次谢幕一样。还不如直接解决,举个例子:假如是二次确认覆盖层:避免滥用 Modal 进行二次确认,应该勇敢的让用户去尝试,给用户机会『撤销』即可。相当于你在删除时,没有直接删除,而是跳出一个框,问你是否确认

蚂蚁金服研发团队组织架构 蚂蚁金服总部设计_蚂蚁金服研发团队组织架构_03


还有一种情况就是直接删除的,它会提醒你成功删除,并提供用户撤销的按钮;用户进行下一个操作或者 3 分钟内不进行任何操作,撤销按钮消失,用户无法再『撤销』。

交互对于我们来讲是必不可少的,每一个页面都必须有交互性,这样才会使你的页面更加生动,也会使用户操作方便。比如:某个操作非常重要,就应该把它放在界面中,并实时可见。

蚂蚁金服研发团队组织架构 蚂蚁金服总部设计_蚂蚁设计_04


看到状态1,一眼就能看出比较明显的一点,可以提现它比较重要

看到状态2,用鼠标点击会改变它的颜色,鼠标悬停时,鼠标指针变为手型

看到状态三,鼠标点击后,和未点击前有明显的区分。

提供邀请有很多富交互模式都有一个共同问题,就是缺少易发现性。所以提供邀请是成功完成人机交互的关键所在。邀请就是引导用户进入下一个交互层次的提醒和暗示。它们有两种形态,一个静态一个动态。静态指通过可视化技术在页面上提供引导交互的邀请。动态指以响应用户在特定位置执行特定操作的方式,提供特定的邀请。

巧用过渡人脑灰质会对动态的事物会对移动、形变、色变等保持敏感。在界面中,适当的加入一些过渡效果,能让界面保持生动,同时也能增强用户和界面的沟通。

改善感知性能当无法有效提升实际性能时,可以考虑适当转移用户的注意力,来缩短某项操作的感知时间,改善感知性能。

及时反映也是必不可少的,我对它的理解就是,比如在搜索框打一个字,会发现下来框有许多结果,要是不够准确还可以多添加一些字,内容越详细,得出来的结果越高。上面的提供邀请强大体现在交互之前给出反馈,解决易发现性问题;在是巧用过渡的有用体现在它能够在交互期间为用户提供视觉反馈;而即时反应的重要性体现在交互之后立即给出反馈。也可以这么理解。虽然反馈太多(准确的说,错误的反馈太多)是一个问题,但是反馈太少甚至没有反馈的系统,则让人感觉迟钝和笨拙,用户体验更差。

信息量特别多,用户输入时,下拉列表会随着输入的关键词显示匹配项。 根据查询结果分类的多少,可以分为确定类目、不确定类目两种类型。

以上都是Ant Design的设计价值观,对于以上的10原则都是比较常规的设计页面,对于这些原则我们是否认真去观察过自己页面的价值观呢?