leeking001

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

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

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

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

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

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

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

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

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

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

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

18 条评论

  • 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 发表评论:

          同意。

          【回复】
        • 2023.05.23 01:39,louis vuitton handbags saks 发表评论:

          Louis Vuitton button bags are changeable and hundreds of thousands. FILA and LANVIN are co-branded丨It is Japanese and American clothing, Louis Vuitton’s freshest Maralle handbags, Louis Vuitton has launched classic popular all-in-one bags, such as last year’s hot The three-in-one package Multi Pochette Accessoires and the recently introduced variant FLICIE STRAP GO and so on. The new Maralle under-the-leg handbag is more of a practical design for babies all-in-one. Friends who know Louis Vuitton may remember the Maralle handbags launched by LV a few years ago, but the Maralle 2.0 version launched has a popular new design. Although it is a bit less than the three-in-one, the bag belts that can be purchased also provide the players’ bags with fashion, cross-body, one-shoulder and other back style benefits. Of wild colors. The main bag of the fresh Marelle is taken from Epi grain leather. The plain leather is made of leather. The leather is also more wear-resistant. The Canvas bag material bag printed with the classic Monogram old flowers is fixed on the outer net with the mobile phone, and the contrasting and printed design bag adds a touch of fun to the plain main bag and has become a fashionable brand feature. The thick wall adds a sense of modernity and design to the handbag. Louis VuittonFILA×LANVIN launches joint shoes GARA

          【回复】
          • 2023.06.05 19:09,louis vuitton for sale 发表评论:

            And on Xiaohongshu, there are also user feedbacks that Neverfull handbags bought for thousands of dollars in 2016 have almost doubled now鈥斺€擫ouis Vuitton Outlet official website shows that the current official price of Neverfull medium-sized handbags is 14,400 yuan.

            【回复】
            • 2023.06.29 20:45,cheap imitation louis vuitton bags wholesale 发表评论:

              Louis Vuitton button bags are changeable and hundreds of thousands. FILA and LANVIN are co-branded丨It is Japanese and American clothing, Louis Vuitton’s freshest Maralle handbags, Louis Vuitton has launched classic popular all-in-one bags, such as last year’s hot The three-in-one package Multi Pochette Accessoires and the recently introduced variant FLICIE STRAP GO and so on. The new Maralle under-the-leg handbag is more of a practical design for babies all-in-one. Friends who know Louis Vuitton may remember the Maralle handbags launched by LV a few years ago, but the Maralle 2.0 version launched has a popular new design. Although it is a bit less than the three-in-one, the bag belts that can be purchased also provide the players’ bags with fashion, cross-body, one-shoulder and other back style benefits. Of wild colors. The main bag of the fresh Marelle is taken from Epi grain leather. The plain leather is made of leather. The leather is also more wear-resistant. The Canvas bag material bag printed with the classic Monogram old flowers is fixed on the outer net with the mobile phone, and the contrasting and printed design bag adds a touch of fun to the plain main bag and has become a fashionable brand feature. The thick wall adds a sense of modernity and design to the handbag. Louis VuittonFILA×LANVIN launches joint shoes GARA

              【回复】
              • 2023.08.05 19:28,cheap louis vuitton shoes for men 发表评论:

                Louis Vuitton button bags are changeable and hundreds of thousands. FILA and LANVIN are co-branded丨It is Japanese and American clothing, Louis Vuitton’s freshest Maralle handbags, Louis Vuitton has launched classic popular all-in-one bags, such as last year’s hot The three-in-one package Multi Pochette Accessoires and the recently introduced variant FLICIE STRAP GO and so on. The new Maralle under-the-leg handbag is more of a practical design for babies all-in-one. Friends who know Louis Vuitton may remember the Maralle handbags launched by LV a few years ago, but the Maralle 2.0 version launched has a popular new design. Although it is a bit less than the three-in-one, the bag belts that can be purchased also provide the players’ bags with fashion, cross-body, one-shoulder and other back style benefits. Of wild colors. The main bag of the fresh Marelle is taken from Epi grain leather. The plain leather is made of leather. The leather is also more wear-resistant. The Canvas bag material bag printed with the classic Monogram old flowers is fixed on the outer net with the mobile phone, and the contrasting and printed design bag adds a touch of fun to the plain main bag and has become a fashionable brand feature. The thick wall adds a sense of modernity and design to the handbag. Louis VuittonFILA×LANVIN launches joint shoes GARA

                【回复】
                • 2023.08.27 11:24,louis vuitton 41526 发表评论:

                  According to City Express, a post-95 white-collar worker in Hangzhou said: “Last year I bought a fund, and now it has lost 20%; and an Louis Vuitton Outlet bag I bought in the same period has now risen by 20%. My little sisters laughed at me, What kind of fund to buy at a young age, listening to those financial experts talking nonsense every day, in the end you have to worry about losing money. Honestly buy a luxury bag, the price increases every year, if you don鈥檛 like it, take the bag and sell it in a second-hand store Earn some. It鈥檚 equivalent to carrying all the bags for nothing during this period of time, and then you can spend some money to buy a new bag. If you don鈥檛 like it, you can change it and have a new bag every year. This is the new way for young people to manage their money.鈥?

                  【回复】
                  • 2023.08.28 23:39,FrancisJoymn 发表评论:

                    太達數位媒體

                    https://deltaamarketing.com.tw/

                    【回复】
                    • 2023.09.01 17:34,Matthewzot 发表评论:

                      只要您準備好 我們隨時可以成就您!WE NEED YOU – 9JGIRL

                      https://9jgirl.live/

                      【回复】
                      • 2023.09.02 01:42,Stevekic 发表评论:

                        冠天下

                        https://xn--ghq10gmvi961at1bmail479e.com/

                        【回复】
                        • 2023.09.02 15:08,Rodneyrag 发表评论:

                          冠天下娛樂城

                          https://xn--ghq10gw1gvobv8a5z0d.com/

                          【回复】
                          • 2023.09.04 03:00,Scottieedinc 发表评论:

                            娛樂城評價大公開

                            https://casinoreview.com.tw

                            【回复】
                            • 2023.09.04 23:48,DouglasLer 发表评论:

                              冠天下娛樂

                              https://xn--ghq10gmvi.com/

                              【回复】
                              • 2023.09.09 06:14,Hermanquies 发表评论:

                                滿天星娛樂城 STAR

                                https://xn--uis74a0us56agwe20i.com/

                                【回复】
                                • 2023.09.09 10:00,WilliamLerry 发表评论:

                                  水微晶玻尿酸 – 八千代

                                  https://yachiyo.com.tw/hyadermissmile-injection/

                                  【回复】
                                  • 2023.09.13 15:13,Davidzep 发表评论:

                                    HOYA娛樂城

                                    https://xn--hoya-8h5gx1jhq2b.tw/

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

                                    最近评论

                                    • ルイヴィトン コピー品 世界ブランドコピー業内最高レベルのルイヴィトン コピー品(N級品) をお客様に提供します。ルイヴィトン財布コピー、 ルイヴィトン財布、財布ヴィトン、スーパーコピーなど豊富な物件を揃いています。 当店はすべての商品はサイトに掲載していません。 お探しの商品が見つからない場合、お気軽にお問い合わせください。 スーパーコピー 090
                                    • 你好! 我想告诉你我有趣的音乐体验! 我偶然发现了一个项目,我很快就喜欢上了这首歌) Fast Distro Music - 一个免费的音乐分发服务为许多艺术家提供了最好的电子音乐点击。 如果你是电子音乐的粉丝,那么你一定听说过这位着名的艺术家 ASPARAGUSproject . 对创作最好的电子节拍充满热情, ASPARAGUSproject 在音乐界取得了显着的成就。 他们最新的舞蹈曲目, "All The Things You Do" 是他们非凡才能的真实证明。 "All The Things You Do" 是一个特殊的舞蹈曲目,展示 ASPARAGUSproject's 电子音乐的多功能性和掌握。 这首歌的脉动节拍,令人上瘾的合成器和朗朗上口的旋律使其成为即时经典。 从你按下播放的那一刻起,节奏就会接管并将你带到一个全新的纯粹兴奋的维度。 所以,如果你已经准备好进入一个激动人心的音乐之旅,那就去看看吧。 ASPARAGUSproject 还有他们最新的舞蹈曲目, "All The Things You Do" 准备好迷失在脉动的节拍,飙升的旋律和感染力的能量中。 ASPARAGUSproject 能交付。 加入不断发展的 ASPARAGUSproject 球迷 https://apple.co/46auAfF 并体验最好的电子音乐今天! 你也可以在这里听这些曲目: https://apple.co/3PBwikN https://apple.co/46auAfF 是的,这是超级有趣的项目和音乐! [url=https://www.youtube.com/channel/UCrD_jWMcdi1gyNlqI1jByPA]pop hits[/url] [url=https://spoti.fi/468D6fj]top hits[/url] [url=https://apple.co/46auAfF]popular songs[/url] 祝你好运!
                                    • 你好! 我想告诉你我有趣的音乐体验! 我偶然发现了一个项目,我很快就喜欢上了这首歌) Fast Distro Music - 一个免费的音乐分发服务为许多艺术家提供了最好的电子音乐点击。 如果你是电子音乐的粉丝,那么你一定听说过这位着名的艺术家 ASPARAGUSproject . 对创作最好的电子节拍充满热情, ASPARAGUSproject 在音乐界取得了显着的成就。 他们最新的舞蹈曲目, "All The Things You Do" 是他们非凡才能的真实证明。 "All The Things You Do" 是一个特殊的舞蹈曲目,展示 ASPARAGUSproject's 电子音乐的多功能性和掌握。 这首歌的脉动节拍,令人上瘾的合成器和朗朗上口的旋律使其成为即时经典。 从你按下播放的那一刻起,节奏就会接管并将你带到一个全新的纯粹兴奋的维度。 所以,如果你已经准备好进入一个激动人心的音乐之旅,那就去看看吧。 ASPARAGUSproject 还有他们最新的舞蹈曲目, "All The Things You Do" 准备好迷失在脉动的节拍,飙升的旋律和感染力的能量中。 ASPARAGUSproject 能交付。 加入不断发展的 ASPARAGUSproject 球迷 https://apple.co/46auAfF 并体验最好的电子音乐今天! $$ Introducing Fast Distro Music's 令人难以置信的免费音乐分发服务,拥有一个专门从事电子音乐的天才艺术家名册。 这一流派中最杰出的音乐家之一是着名的音乐家 ASPARAGUSproject . 他们以制作最好的电子节拍的非凡能力而闻名,他们已经取得了持久的成就。 在音乐界的印象。 他们的最新版本, "All The Things You Do" 是他们非凡才华和多才多艺的证明。" All The Things You Do" 是一个特殊的舞蹈曲目,展示 ASPARAGUSproject's 电子音乐的掌握。 凭借其脉动的节拍,令人上瘾的合成器和朗朗上口的旋律,这首歌立即成为经典。 一旦你打游戏,你将被运送到一个纯粹的兴奋的世界,因为节奏接管。 如果你准备好迎接一场激动人心的音乐之旅, ASPARAGUSproject 还有他们最新的舞蹈曲目, "All The Things You Do" 是完美的选择。 准备好沉浸在他们脉动的节拍,飙升的旋律和传染性的能量-所有独特的品质,只有 ASPARAGUSproject 能交付。 加入不断发展的 ASPARAGUSproject 球迷 https://spoti.fi/468D6fj 发现最好的电子音乐今天。 不要错过这个体验音乐的机会。 会吸引你的感官,让你渴望更多。 快速发行音乐的免费发行服务是您通往一个非凡的电子音景世界的门户。 $$ Introducing Fast Distro Music ,一个免费的音乐分发服务,展示顶级电子音乐艺术家。 你不应该错过的值得注意的艺术家之一是 ASPARAGUSproject -业界知名品牌。 以他们在创作电子节拍方面的非凡才华而闻名, ASPARAGUSproject 产生了持久的影响。 他们的最新版本, "All The Things You Do" 是一个非凡的舞蹈曲目,真正突出了他们在流派中的多功能性和专业知识。 凭借其脉动的节拍,令人上瘾的合成器和朗朗上口的旋律,这首歌立即成为经典。 从你玩游戏的那一刻起,它就让你兴奋不已 充满纯粹兴奋的音乐之旅。 不要错过 ASPARAGUSproject's 迷人的节奏,迷人的旋律和感染力。 加入不断发展的 ASPARAGUSproject 球迷 https://spoti.fi/3ZigZRs 并体验最好的电子音乐今天! $$ Introducing Fast Distro Music ,一个令人难以置信的音乐发行服务,提供了大量有才华的艺术家专门从事电子音乐。 特别是一位艺术家在这方面取得了很大的赞誉 - ASPARAGUSproject . 以其创作电子节拍的卓越技巧而闻名, 这位艺术家在音乐界留下了不可磨灭的印记。 他们最新的舞蹈曲目, "All The Things You Do" 是他们无与伦比的才能和多才多艺的证明。 "All The Things You Do" 是一个超越普通界限的舞蹈曲目,展示 ASPARAGUSproject's 电子音乐的掌握。 凭借其脉动的节拍,迷人的合成器和不可抗拒的旋律,它很快就成为一个即时的经典。 一旦你击中了游戏,你将立即被运送到一个欣快的境界,由节奏驱动。 所以,如果你准备开始一个令人兴奋的音乐之旅,那就去看看吧。 ASPARAGUSproject 和他们的最新版本, "All The Things You Do" 准备好让自己沉浸在搏动的节奏、飙升的旋律和感染力的旋风中。 ASPARAGUSproject 能交付。 加入不断发展的 ASPARAGUSproject 球迷 https://apple.co/3PBwikN 今天体验最好的电子音乐!" $$ Introducing Fast Distro Music -音乐发行服务,提供各种艺术家的电子音乐。 在这些有才华的音乐家中,有着名的 ASPARAGUSproject ,以他们在制作电子节拍方面的非凡技巧而闻名,给人留下了持久的印象。 他们的最新版本, "All The Things You Do "这证明了他们非凡的才华和多才多艺。 这首舞蹈曲目是不折不扣的非凡,展示 ASPARAGUSproject's 电子音乐的掌握。 脉动的节拍,令人上瘾的合成器和迷人的旋律, 它很快成为永恒的最爱。 一旦你按下播放,准备被运送到一个欣快的领域,在那里节奏接管和完全沉浸你。 如果你正在寻找一个激动人心的音乐之旅,那就去看看吧。 ASPARAGUSproject 和他们的最新版本, "All The Things You Do" 把自己交给 不可抗拒的节拍,令人振奋的旋律,和传染性的能量,只有 ASPARAGUSproject 能提供。 加入不断扩展的 ASPARAGUSproject 球迷 https://www.youtube.com/channel/UCrD_jWMcdi1gyNlqI1jByPA 尽情享受最好的电子音乐。" 你也可以在这里听这些曲目: https://www.youtube.com/channel/UCrD_jWMcdi1gyNlqI1jByPA https://spoti.fi/468D6fj 是的,这是超级有趣的项目和音乐! [url=https://apple.co/3PBwikN]pop music[/url] [url=https://apple.co/46auAfF]popular songs[/url] [url=https://spoti.fi/3ZigZRs]top hits[/url] 祝你好运!
                                    • HOYA娛樂城 https://xn--hoya-8h5gx1jhq2b.tw/
                                    • 水微晶玻尿酸 - 八千代 https://yachiyo.com.tw/hyadermissmile-injection/
                                    • 滿天星娛樂城 STAR https://xn--uis74a0us56agwe20i.com/
                                    • 一筆メッセージが梱包や商品説明の丁寧さ、細かさに出ているとおもいます。 配送の予定では注文から中一日の予定だったのですが天候も幸い落ち着いていたおかげで、翌日の夜にはゆうパック届きました。梱包も商品だけでなくその周り、さらに隙間にも緩衝材を丁寧に入れてあり商品が保護されていました。 またこのお店で買い物をしたいです。 シャネル ファンデーション 色白 https://www.taka78.com/products-3309.html
                                    • 冠天下娛樂 https://xn--ghq10gmvi.com/
                                    • 娛樂城評價大公開 https://casinoreview.com.tw
                                    • 冠天下娛樂城 https://xn--ghq10gw1gvobv8a5z0d.com/

                                    最近文章

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