2016-11-08
antdesign 笔记
写在前面
同事给我推荐了这个良心网站，给我扫了个盲。是蚂蚁金服团队出的一个后台管理类的pc交互规范。地址：https://ant.design/
模式
1.导航：侧边栏、顶部
（1）侧边导航：可拓展性强且易于切换，但是占用左侧屏幕空间。适用于偏后台管理的网页。
（2）顶部导航：在顶部更容易看到，但是会占用顶部空间且导航数量不能过多。适用于浏览性比较强的网页。
当顶部导航层级超过2层，两种导航方式结合，第3层需要通过侧边导航的形式展示。
（3）面包屑：两种导航方式都可以用。可以表示详细的来的路径，也可以只表示当前位置（本页标题）。
2.表单
（1）tips：
（1.1）为初级用户／偶尔访问的用户提供白话作为『标签』；为领域专家提供专业术语作为『标签』。
（1.22）当需要用户提供敏感信息时，通过『输入提示』来说明系统为什么要这么做。
（2）交互
（2.1）在一个语句中，可以穿插填空项。
（2.2）可以拼接两个关联性很强的输入框。
（2.3）未输入足够内容便禁用主按钮的办法，需要在输入框不多于3个的时候使用。否则输入框太多会造成疑惑。
（2.4）信息校验：不要等到用户提交以后再校验，提供及时校验。一个表单很长且出现多个错误的时候，在顶部说明一共有几处错误。
（2.5）对其：
文字放在输入框左侧，文字右对其：节约纵向空间、较快速地完成填写。
文字放在输入框左侧，文字左对其：节约纵向空间，填写慢下来，认真填写。
文字放在输入框上侧，文字左对其：超级快速地完成填写。
3.列表
（1）悬停显示详细信息：使用『悬停』触发时，移入时设计约 0.5 秒的延时，然后激活详情气泡；移出时，立即关闭详情气泡。
（2）嵌入表格：列表中，可以一个完整独立的表格来对列表中的某一项进行说明，通过点击唤出。
（3）双面版选择器：用户通过点击，在列表的一侧（一般为右侧）查看该列表项大量的详情信息。
（4）分页器与无限加载：需要频繁操作、跨页操作、倾向显示所有信息时，使用无限加载。
4.表格
属于列表的一种，常用于展示和操作结构化数据。
（1）筛选：可多选、可单选。如果多选，需要有确定、清空的按钮。
（2）状态点：用状态点的不同颜色表示状态。
（3）跨页选数据：可以把选好的数据都罗列在顶部，像一个个选好的标签。并且可以在顶部快速取消选择。
（4）固定按钮组：需要列表数量多、操作频繁、操作可以统一的情况下，才出现。
（5）某一项内容过长，hover出现一个小气泡显示全部信息。
（6）编辑：
方式一：进入新页面进行编辑。（适用于列表没有展示所有的信息，详细信息更为复杂的时候。）
方式二：将本行切换至编辑态，直接在本行上进行编辑。（适用于列表信息已经展示完全，编辑信息的方式不复杂的情况）
方式三：右侧有一个编辑状态的开关，默认状态就是编辑态，但是也可以将开关关闭。（此时易编辑性比易读性更重要，适合快速频繁的编辑。）
方式四：悬浮层编辑，在需要编辑的信息旁边有一个编辑图标，点击图标唤出编辑浮层。（适用于列表中只有单独信息需要编辑，而且悬浮层会遮挡上下文，上下文对于修改信息不重要时可以选用。）
（7）对齐：数字右对齐（有小数点按小数点对齐），其余的左对齐。
5.表格：复杂数据
（1）左右切换数据
方式一：左右加小箭头：在最顶上的一排数据标题左右两侧，加两个小箭头，可以通过点击箭头来左右拓展信息。
方式二：横向滚动条：加横向滚动条，但是要注意左侧的表头始终固定。
（2）用户自定义列表显示项：当信息太多时，给用户一个多选的下拉菜单，用户自己勾选希望在下方列表中展示的信息。
（3）带图标和图表，图标如上升、下降的箭头。图表如走势图等。
（4）二维表格：横向和纵向都有数据标题。
6.高级搜索
（1）常规型：在搜索框的右侧有一个“高级搜索”，点击后展开一个可选填的表格。
一 交互：1.点击“高级搜索”展开；2.添加高级搜索项之后，有“搜索”、“清空”选项；3.如果之前填写了一些高级筛选项，后来将高级筛选项收起，那么已选的筛选项要展示在外面，并提供“清空”选项。
二 排列：横向排列一排不要超过3个，顺序尽量按照列表里面的顺序，特别重要的筛选项可以往前提。
（2）字段型：附加的搜索条件不可以自己填写，都是直接选择字段。
第一：字段可以只有一组，也可以有多组。
第二：对于信息特别多的一组字段，可以展开和收起，可以对字段进行搜索和首字母筛选。
第三：每一组字段可以单独选择自己是单选还是多选，多选的直接在标题旁边标明（多选）。
规范
1.三大特性
（1）微创新
尝试优化现有控件的一些交互细节使之更贴近用户在使用场景下的心里预期。
（2）集成创新
把现有的组建进行组合和集成，形成优势互补。
2.十大原则
（1）亲密性
纵向排列：1.将元素之间的间距分为大、中、小三种（24px\16px\8px），一个页面中，关系紧密的元素用小一些的间距。2.在需要分隔的元素之间，加横线。
横向排列：要放在栅格上来排列，保证灵活性。
（2）对齐
数字：右对齐更容易辨别大小
表单：冒号对齐
文案：不论是一级标题还是二级标题，都最好有一个统一的视觉起点，不要随意缩进
（3）对比
主次：通过颜色之类的方式，标明谁是主要操作。但是系统并不总是带有倾向性，有时候可以不推荐任何一个，完全让用户来做选择。
总分：标明母子关系
状态：体现启用、停用之类的状态区别
（4）重复
文案、空间形式、线条等任何元素的复用都是重复，可以降低学习成本，并且告诉用户这些相似的元素它们是一组的。
（5）直截了当（不要为了编辑一个内容而打开另一个页面）
页内编辑：1.如果易编辑性非常不重要，那“编辑”的小篮字都不要出现，用户单击才知道可以编辑。2.一般情况下，在信息旁边有“编辑”的小篮字或者图标，用户点击后，直接进入编辑态。3.有的列表编辑状态下的呈现方式和查看状态差别很大，要注意跟用户解释清楚刚刚发生了什么。
利用拖放：这是一个很直接的操作方式。1.可以通过文字描述或者hover时出现的拖放图标来说明这个功能。2.列表拖放时，只允许一个方向上的拖放。
（6）足不出户（能在这个页面解决的事就不要到下个页面去）
覆盖层：1.二次确认。用 toast反馈带撤销选项或者小气泡型的二次确认窗口，来进行二次确认。不要随便来大弹窗。2.详情，hover出现详情的气泡浮层。3.tab切换，也算是一种低成本展示信息的方式（打断感弱）
嵌入层：在页面中通过某些交互操作展开详细信息。
虚拟页面：跑马灯、无限加载等，也是比较自然不跳转的方式来展示更多信息。
流程处理：1.渐进式页面，每完成一步，不是页面跳转，而是页面中的元素结构发生变化，引领用户进入下一步。2.配置流程，左侧是选择器，右侧将左侧的选择结果呈现出来，直观易理解，不用让用户经过页面跳转之后才能确认自己选择的结果。3.弹层上的步骤条，弹层上的翻页跳转感比较轻，步骤性强用户更轻松。
（7）简化交互（让用户实际的鼠标操作更方便，弄清哪里是可点击的，点击区域更明确更大等）
可见：用户需要的操作，直接展示或者hover时出现，让他知道这是可操作的。
交互过程中的便捷设计：在用户hover后出现的“点击复制”小气泡等
热区：pc上的在按钮附近hover也点亮按钮，暗示可点击。手机上区分好热区并展示清楚
（8）提供邀请（通过视觉可见、交互反馈等方式告知用户可进行的交互操作）
静态：1.普通文字说明。2.漫游引导，在用户首次登陆时出现少量『探索点』，当用户点击『我知道了』，能快速切换到下一个探索点。
动态：1.悬停邀请，悬停时内容发生变化，如图片上出现按钮或者将可点击的文字变蓝。2.推论邀请，比如点赞以后，浮出小气泡用户可选择点赞。
（9）巧用过渡
上下文联系：在页面转换中和谐过渡
解释刚刚发生了什么：在删除、修改等操作后，页面会发生变化，通过动效解释刚刚发生了什么
改善感知性能：用动效让用户感觉性能更好。
（10）及时反馈
查询：1.搜索时下拉列表即时展示搜索建议字段。分为确定类目和不确定类目两种。当该网站只有3种类别的信息时，属于确定类目。2.在搜索框输入文字后，实时展示搜索结果，搜索结果按照上方的搜索字段变化而调整，无需按下搜索键。
反馈：1.实时预览：例如密码安全性展示条。2.加载中，各种浮层、富列表展示、加载中百分比等。3.刷新：自动实时刷新（刷新的内容高亮3秒）、点击刷新（顶部显示有3条新内容）。
3.设计基础
（1）排版
标点：一般使用全角中文标点。完整的英文整句、特殊名词、数字用半角英文标点。
空格：中文和英文之间、两个中文链接之间、数字和符号之间需要空格（百分比和度例外）。
标签:
全文链接 8热度