leeking001

UX Internet Travel Other About me
leeking001
博客
微博
照片
电影
白社会
Facebook
Twitter
Linkedin
Google+

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

2009-11-23 by leeking001 | 用户体验 | 评论(4)

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

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

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

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

  1. 确认框: 常用于删除或批量操作,再次确认使用。交互规则:直接显示对话框,点击按钮后直接消失。
    标题:操作+目标,例如删除日志,删除照片专辑,解除好友关系……
    按钮:确定+取消
  2. 操作框: 常用于进一步操作,入口较小,但操作步骤较多时,比如加好友,设隐私等。交互规则:直接显示对话框,确认完毕后,变为通知框。
    标题:操作+目标,一般为入口的名字,例如新建照片专辑,修改真心话,添加选项……
    按钮:保存(行为)+取消,行为例如加为好友,添加,分享……
  3. 通知框: 常用于确认框和操作框的确认后,通知用户结果,一般只有一个按钮。交互规则:点击按钮立即消失,如果不点击按钮,1秒后渐隐消失。
    标题:沿用之前操作框的标题
    按钮:关闭
  4. 提示框: 常用于表单提交后的验证,通知用户哪些信息不完整或者操作步骤不对。多条信息提示使用1、2、3……的序号排列
    标题:提示
    按钮:确定
  5. 未保存提示框: 常用于表单未保存就跳转的提示,提示用户未保存信息是否需要保存。
    标题:未保存+目标,例如未保存日志,未保存个人档案,未保存隐私设置……
    按钮:保存+不保存+取消

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

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

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

4 条评论

  • 2009.12.11 13:39,大脸 发表评论:

    还不够全面,你所讨论的都是WEB界面内的对话框,也就是说在前端开发师的控制内的对话框.
    但实际上,web通常要考虑与浏览器对话框以及windows通用对话框的结合以及组合情况.
    简单而言,web界面内部的窗口因为缺乏像OS那样有统一管理的任务栏或者dock,无法对窗口进行重叠,所以其深度一般为1.
    但如果需要组合,那就是要考虑到与浏览器对话框与操作系统的对话框进行组合.
    同时也要考虑窗口的两种属性:无模式对话框,模式对话框.
    所以,在web界面上,对话框的设计规范不仅仅是上诉的几个情况,根据产品的复杂程度,同时在考虑一致性的情况下,在具体哪种对话框应该有所取舍.
    ————————-
    在前辈的博客上大放厥辞,还请前辈见谅.这只是晚辈的与此篇文章的共鸣之语.

    【回复】
    • 2009.12.11 21:58,leeking001 发表评论:

      高见,高见呐!我这里说的也是白社会这个产品的Dialog嘛,模态非模态这块确实给忽略了,哈哈,找个机会补上,多谢兄弟啦~
      ps:很喜欢你们的“优涩控”,很想知道你们都是哪的团体啊~

      【回复】
      • 2010.03.28 00:20,yusen 发表评论:

        如果把统一的“确定”换成主动作名”删除“”加好友“,这样应该可以减少一些用户的迷惑呢?

        【回复】
        • 2011.08.26 10:18,wbuild 发表评论:

          同意。

          【回复】
        (Required)
        (Required, will not be published)

        最近评论

        • 新冠快点结束吧!
        • 感受学习的力量!
        • [...] 原文地址:http://leeking001.com/?p=514 [...]
        • 阿萨德法师打发斯蒂芬
        • 看来是激动得手抖····
        • 我们公司是一家从事橡胶止水带,遇水膨胀止水胶,中埋式橡胶止水带,钢板止水带生产销售的厂家,为你提供外贴式橡胶止水带,遇水膨胀止水带成功橡塑致力于打造橡胶止水带知名品牌,严把遇水膨胀止水胶产品质量关,提供给客户值得信赖的橡胶止水带产品及中埋式橡胶止水带报价,做外贴式橡胶止水带行业的领军企业. 外贴式橡胶止水带 http://www.hengshuizhishuidai.com/
        • 恭喜! :em14:
        • [...] http://www.leeking001.com/?p=95 回复: 去除overflow:hidden就可以了, 不过出现了其他问题!! 回复: 不明白楼主啥意思。 二楼的强!! 很少见的无js的选项卡,收藏了。 回复: [...]
        • 还好zblog不经常更新。。哈哈 ——置百丈玄冰而崩裂,掷须臾池水而漂摇。
        • 不错,学习了!!!

        最近文章

        • Moto 360:一块安静的美电子表~
        • 微博(NASDAQ:WB) 新的开始!
        • 升/不升?烧/不烧?
        • Bubble Football In UDC
        • 莱州的海
        • 祭爱犬亮亮(2004.12-2013.7)
        • 为信息设计
        • 乔帮主,一路走好~
        • 更效率的信息设计
        • 电影
        © 2022 Leeking001 . Ported to Wordpress . Designed by Leeking001 . Powered by SAE . 京ICP备18021289号