专栏 | Ant Design 设计模式周周看· 10 月刊总结篇

元尧 / 2021-11-08 14:04:09

专栏 | Ant Design 设计模式周周看· 10 月刊总结篇
原创 元尧 长弓小子 今天
  图片  关注「长弓小子」看更多干货!



2021 年 6 月, Ant Design 推出设计周刊:《设计模式周周看》,我们会对 Ant Design 现有的设计资产和案例做全面的盘点,每周一篇文章介绍交互设计中最本质的设计模式,共 50+ 篇内容。

内容会发布在 Ant Design 官网上,我也会将其中的精华内容提取出来,以月报的形式发表在此公众号上,诚邀大家关注。

图片

   全文共 2196 字,阅读需要 8 分钟


图片

6-9 月,Ant Design 为你总结了与「用户输入」和「交互操作」相关的设计模式,可以阅读文章进行回顾:

6 月:专栏 | Ant Design 设计模式周周看· 6 月刊总结篇
7 月:专栏 | Ant Design 设计模式周周看· 7 月刊总结篇
8 月:专栏 | Ant Design 设计模式周周看· 8 月刊总结篇
9 月:专栏 | Ant Design 设计模式周周看· 9 月刊总结篇

10 月,Ant Design 继续为你带来与「交互操作」相关的 3 组设计模式:

行动号召按钮:让用户的点击更加顺畅

智能菜单:让菜单变得更加智能高效

结果预览:如何有效规避失败的结果







图片

1. 行动号召按钮

让用户的点击更加顺畅


   What · 是什么      

「行动号召按钮」是用来号召用户点击进行下一步的操作按钮 / 可点击的组件。

例如:很多产品首页的 “开始探索” / “立即购买” / “应用案例下载” 等按钮,点击后跳转到一个新的页面,进行下一步操作:


图片


   When · 什么时候用  

当你需要在界面中放置“完成”、“提交”、“确定”或“继续”等按钮时,可以使用这个模式。
其使用条件如下:



页面中即将进行下一步操作或最终确认的时候;

需要一个醒目的按钮提示用户结束当前流程的时候。希




   How · 如何用  



创建行动号召按钮时可以使用平台默认的按钮样式,或者使用更大的按钮样式(注意最好不要是一个链接),让它在页面中非常醒目,让用户可以快速找到并点击它。

最好使用文字按钮而不是图标,因为文字能让用户更好的理解,比如像“完成”、“提交”这样的按钮用文字会更清晰。





   Example · 案例补充  



案例:Google Play 商店中软件名称右下方的 “INSTALL(安装)” 按钮,放置的位置是软件名称的右下方,周围的空白区域较大,绿色与白色背景形成对比,且尺寸也很大,所以非常醒目 ,用户一眼就能看见并点击它:


图片





图片

2. 智能菜单

让菜单变得更加智能高效


   What · 是什么      

「智能菜单」是一种动态显示菜单项的设计模式,根据用户所处的不同上下文,提供不同的菜单选项,这是一种让菜单变得更灵活和高效的设计模式。

例如:macOS 日历的右键菜单项:


图片






   When · 什么时候用  


该模式带有极强的场景化和个性化,在这两种情景下会使用:



可预判操作:当在某些具体场景下可以较为清晰地预判用户的操作,可以将该操作添加到用户必定会触达的操作路径中,帮助用户更快地达成目的。


可预判内容:如果某些对象在操作上具备独特的内容属性,就可以对其菜单做个性化调整,会帮助用户更快看到有用的信息。





   How · 如何用  



可从以下两个方面进行考虑:

(1)预判该用户接下来可能发生的操作,并将该操作添加到菜单项中;


(2)根据具体场景,有针对性的修改作用在该对象上的菜单项,让这个菜单项包含对应动作的细节。




   Example · 案例补充  


案例:在 macOS 中,用户选中一批文件后,可以直接在右键菜单中为所选项目新建文件夹。这一功能的设计就是考虑到 macOS 用户整理文件的操作场景:用户在整理文件时,对一批文件的较高频操作就是新建一个文件夹来归档。常规流程是【建立新文件夹】>【选择一批目标文件】>【将其移入文件夹】,而 macOS 此处的设计调整了菜单原有的内容,将流程简化为一步,极大提高了操作效率。


图片



图片

3. 结果预览

如何有效规避失败的结果


   What · 是什么      

「结果预览」是一种在用户执行某个动作之前,为其显示操作效果的设计方法,可以为用户提供结果参考。

例如:宝马官网在用户选购时,可以对车的各种属性进行配置,并生成预览效果:

图片


   When · 什么时候用  

以下两种场景推荐使用:


操作过程繁杂:如果操作错误,会耗费大量时间或会付出极大的代价重新调整;


难以预测配置效果:图形 / 图像类的编辑和配置结果,在操作过程中很难预测,例如对照片应用一个滤镜后的效果。





   How · 如何用  



在用户提交操作之前,用图像或文本的操作结果预览显示将会发生什么,将用户关心的结果显示出来。





   Example · 案例补充  



案例一:微信广告配置效果预览,为用户提供广告配置结果的效果,以保证该条广告以正确的姿势传递给大众:



图片

案例二:打印文件时,电脑系统通常会为用户展示打印结果的预览,例如是否黑白打印、横排会竖排以及可以调整缩放比例等,以此来保证打印的结果是符合用户预期的,避免打印出来发现错误后还要重新打印:



图片




图片

2021 年期 Ant Design 设计周刊《设计模式周周看——Ant Design 为你讲透设计模式》,是由阿里巴巴蚂蚁集团的体验设计师: 元尧(知乎 @ 元尧)、闻冰(知乎 @ 空谷)、梓美(知乎 @ 梓美)、六六(知乎 @ 六六)主笔。

我们希望可以将这份周刊作为交互体验教案级别的内容呈现给大家。针对诸多不足,元尧真诚的欢迎大家向我们提出宝贵意见。

期待你的关注。
期待我们的共同进步。


   周刊发布途径:
Ant Design 官网:https://ant.design/index-cn
Ant Design 知乎专栏:# Ant Design 话题社区
Ant Design 知乎官方账号:@ AnT Designer
语雀 Ant Design 知识库:设计模式
站酷、人人都是产品经理、UI 中国:搜素 Ant Design
以及本公众号👇👇👇


 图片


   详解丨用户体验地图,应该这样用!

   详解|交互设计中的「可用性测试」!

   经验丨B端产品组件设计经验分享(一)




- END -

欢迎长按图片👇👇👇加我微信
带你加入设计师交流群
了解更多设计理念和设计方法

期待与你的交集!
「添加好友请备注:设计交流」


图片

图片
阅读 581

:,。视频小程序赞,轻点两下取消赞在看,轻点两下取消在看






----------------------------
本文由新墨整理并发布。转载来自互联网,若侵权则删除!
新墨5年开发经验,45名团队成员,上线已达100+产品,于北京和成都2个城市提供技术开发服务。致力于提供APP开发,小程序开发,微信开发,IOT物联网开发,电商系统开发,教育系统开发,H5开发,游戏开发,用户体验设计,课件设计

新墨官网地址:http://www.sinmore.com.cn/
新墨物联网站:http://www.sinmore.cn/
布鸽科技:http://www.buge.vip/

热门文章
最新文章
推荐文章