技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> 信息和交互 --> 交互规范实例――白社会Dialog规范

交互规范实例――白社会Dialog规范

浏览:1676次  出处信息

    交互规范是什么:在产品设计初期,在进行了部分功能的交互设计之后,将用户与界面之间的交互行为总结归纳出来,并加以延展,从而形成的设计规范。交互规范可以帮助我们统一现有的交互设计,并可以指导接下来的交互设计。

    我们就拿 白社会 中的Dialog规范举个例子:

    

     以上是目前网站比较常见的提示框,它最初是模拟windows提示框出现的,让用户在使用中更加容易接受。

    首先,我们根据用途,将Dialog分为以下5类,并且尽量详细的定义Dialog的使用用途、交互规则、文字和按钮规则:

    

  • 确认框: 常用于删除或批量操作,再次确认使用。交互规则:直接显示对话框,点击按钮后直接消失。

         标题:操作+目标,例如删除日志,删除照片专辑,解除好友关系……

         按钮:确定+取消

  • 操作框: 常用于进一步操作,入口较小,但操作步骤较多时,比如加好友,设隐私等。交互规则:直接显示对话框,确认完毕后,变为通知框。

         标题:操作+目标,一般为入口的名字,例如新建照片专辑,修改真心话,添加选项……

         按钮:保存(行为)+取消,行为例如加为好友,添加,分享……

  • 通知框: 常用于确认框和操作框的确认后,通知用户结果,一般只有一个按钮。交互规则:点击按钮立即消失,如果不点击按钮,1秒后渐隐消失。

         标题:沿用之前操作框的标题

         按钮:关闭

  • 提示框: 常用于表单提交后的验证,通知用户哪些信息不完整或者操作步骤不对。多条信息提示使用1、2、3……的序号排列

         标题:提示

         按钮:确定

  • 未保存提示框: 常用于表单未保存就跳转的提示,提示用户未保存信息是否需要保存。

         标题:未保存+目标,例如未保存日志,未保存个人档案,未保存隐私设置……

         按钮:保存+不保存+取消

  •     由于是模拟windows控件出现,我们也不能忘了快捷键,以方便键盘流的使用~

         快捷键: 支持键盘的enter操作框上的主操作,一般为”确定”"保存”等,支持键盘的esc操作框上的取消/关闭操作,一般为”取消”"关闭XX”等。

        这样,一个关于Dialog的交互规范就定义完了。

    QQ技术交流群:445447336,欢迎加入!
    扫一扫订阅我的微信号:IT技术博客大学习
    © 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

    京ICP备15002552号-1