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条评论

  1. 大脸
    2009-11-23 at 1:39 下午

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

  2. leeking001
    2009-11-23 at 9:58 下午

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

  3. yusen
    2009-11-23 at 12:20 上午

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

  4. wbuild
    2009-11-23 at 10:18 上午

    同意。

  5. louis vuitton handbags saks
    2009-11-23 at 1:39 上午

    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

  6. louis vuitton for sale
    2009-11-23 at 7:09 下午

    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.

  7. cheap imitation louis vuitton bags wholesale
    2009-11-23 at 8:45 下午

    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

  8. cheap louis vuitton shoes for men
    2009-11-23 at 7:28 下午

    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

  9. louis vuitton 41526
    2009-11-23 at 11:24 上午

    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.鈥?

  10. FrancisJoymn
    2009-11-23 at 11:39 下午

    太達數位媒體

    https://deltaamarketing.com.tw/

  11. Matthewzot
    2009-11-23 at 5:34 下午

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

    https://9jgirl.live/

  12. Stevekic
    2009-11-23 at 1:42 上午

    冠天下

    https://xn--ghq10gmvi961at1bmail479e.com/

  13. Rodneyrag
    2009-11-23 at 3:08 下午

    冠天下娛樂城

    https://xn--ghq10gw1gvobv8a5z0d.com/

  14. Scottieedinc
    2009-11-23 at 3:00 上午

    娛樂城評價大公開

    https://casinoreview.com.tw

  15. DouglasLer
    2009-11-23 at 11:48 下午

    冠天下娛樂

    https://xn--ghq10gmvi.com/

  16. Hermanquies
    2009-11-23 at 6:14 上午

    滿天星娛樂城 STAR

    https://xn--uis74a0us56agwe20i.com/

  17. WilliamLerry
    2009-11-23 at 10:00 上午

    水微晶玻尿酸 – 八千代

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

  18. Davidzep
    2009-11-23 at 3:13 下午

    HOYA娛樂城

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

发表评论

最近评论

  • If you are going for best contents like myself, just visit this web page daily since it offers quality contents, thanks
  • การแทงบอลมีต้นกำเนิดมาตั้งแต่สมัยต้นของการประลองบอลในประเทศอังกฤษ ซึ่งเริ่มต้นจากกรุ๊ปแฟนบอลที่เดิมพันกันในหมู่เพื่อนฝูง ถัดมาก็ปรับปรุงเป็นธุรกิจขนาดใหญ่ในลักษณะของเจ้ามือโต๊ะบอล และในยุคดิจิทัลเดี๋ยวนี้ การพนันบอลออนไลน์ ได้เปลี่ยนเป็นแนวทางที่นิยมที่สุด ด้วยความสะดวกแล้วก็รวดเร็วทันใจของเทคโนโลยี
  • Вывод из запоя в Рязани является востребованной медицинской услугой, направленной на стабилизацию состояния пациента после длительного употребления алкоголя. Специалисты применяют современные методы детоксикации, позволяющие быстро и безопасно восстановить жизненно важные функции организма, снизить проявления абстинентного синдрома и предотвратить осложнения. Процесс лечения осуществляется в клинических условиях под постоянным наблюдением врачей. Подробнее можно узнать тут - вывод из запоя недорого рязань
  • Simply desire to say your article is as amazing. The clarity in your post is just nice and i can assume you are an expert on this subject. Well with your permission allow me to grab your feed to keep up to date with forthcoming post. Thanks a million and please carry on the rewarding work.
  • Выбор техники зависит от клинической картины, переносимости препаратов, психоэмоционального состояния и горизонта планируемой трезвости. Таблица ниже помогает сориентироваться в ключевых различиях — врач подробно разберёт нюансы на очной консультации. Подробнее тут - https://kodirovanie-ot-alkogolizma-vidnoe7.ru/kodirovka-ot-alkogolya-v-vidnom/
  • Swapped SOL for USDC on Raydium Swap last night. Solana’s speed and AMM liquidity make it a DeFi beast. Low fees are a bonus! Anyone else trading here? What’s your go-to strategy?
  • 주간 200건 이상의 링크 업데이트를 통해 최신 링크모음을 유지했습니다.
  • An impressive share! I have just forwarded this onto a co-worker who has been conducting a little research on this. And he actually ordered me dinner simply because I discovered it for him... lol. So let me reword this.... Thank YOU for the meal!! But yeah, thanx for spending time to talk about this subject here on your internet site.
  • Такая схема позволяет комплексно воздействовать на организм и уменьшить риски осложнений. Исследовать вопрос подробнее - http://narkolog-na-dom-v-krasnodare14.ru
  • LIGACOR merupakan plaform game slot online terbaik di Indonesia dengan peluang menang lebih mudah sehingga LIGACOR menjadi game slot online nomor 1 di Indonesia

最近文章

  • Au top Téléchargement de l’application SpinBetter pour PC sept des jeux en compagnie de recevoir avec largent PayPal sans aucun
  • Black Thirst position because of the step one×dos Gambling review play slot jade treasure on the web for free!
  • 50 Freispiele exklusive Einzahlung sofortig zugänglich 2025
  • Possess Greatest Local casino Excitement with Development Betting
  • 50 Free Spins SpinBetter bonus d’inscription Sans nul Classe Tours Gratuits Avec Instrument A Sous
  • Lord of Ocean kostenfrei zum 50 kostenlose Spins keine Einzahlung hart swarm besten geben abzüglich Anmeldung 2025
  • Correct real online slots real money Fortune Incentives, September 2025
  • Appareil a dessous Ramses Book Casino Spintropolis Pas de bonus de dépôt : Courez gratuitement !
  • Emoji Riches Slot Comment 2025 Totally free Gamble Demo
  • Cops N Bandits, kostenlose Spins keine Einzahlung Fruit Vs Candy Play For Free, In wahrheit Money Offer 2024!
© 2025 Leeking001 . Ported to Wordpress . Designed by Leeking001 . Powered by SAE . 京ICP备18021289号