详细解析网页对话框设计技巧

笑看贴狗

笑看贴狗

2016-02-17 02:09

下面图老师小编跟大家分享一个简单易学的详细解析网页对话框设计技巧教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

怎么了?除非你对某类对话框已司空见惯,否则遇到,第一反应往往是这样的?这种体验就像你明明急着去赶车,途中却不断被拦住塞传单一样。不能否认,它是一种打断,有时甚至会成为打扰。做为设计师,虽知打断暂不能杜绝,但不使之变为打扰,却是我们该努力做到的:

① 多次打断=打扰

隔一个小时打断你一下,你或者还可以忍受。若是1分钟内好几次打断你,想起来就抓狂吧?这也是Chrome为什么在判断此网页多次出现对话框打断用户后,出现这么一个禁止此页再显示对话框的选项。

详细解析网页对话框设计技巧,PS教程,图老师教程网

把握住一个原则:能不用对话框就尽量不要对话框。除非以下两种情况:

A.某个操作是具有很大风险的,或者不可逆的。

下面请你用此原则做判断,此对话框的出现是否合理:

在win7系统下,每删除一个文件都会出一个对话框请我确认是否删除

详细解析网页对话框设计技巧,PS教程,图老师教程网

(提示:一般的删除真的是不可逆吗?windows还有个回收站,从回收站找回又会费很大成本吗?)

B.无法预先避免,一定需用户确认的。

下面请你用此原则做判断,此对话框的出现是否合理:

活动已经结束,投票仍呈可点态,点击后对话框告知我一切都结束了

详细解析网页对话框设计技巧,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

概括一下,在准备设计一个对话框之前,请三思,打断真的有必要吗,值得吗:

详细解析网页对话框设计技巧,PS教程,图老师教程网

② 表意不清=打扰

A.问是/否还是确定/取消

先温习下语文:

详细解析网页对话框设计技巧,PS教程,图老师教程网

那么再回到我们的对话框:

情景1:用户点击了退出,为了避免用户是误操作,你再询问用户真的要退出,此时是用是/否还是确定/取消好?

详细解析网页对话框设计技巧,PS教程,图老师教程网

建议:

既然是点了退出,真想退出的概率还是远多过误操作的概率,那么,这里面就是有一个很强的是的,我要退出的前提在。

如果你接着出对话框问你是否要退出?用户可能会莫名其妙,我都点了退出了,你还在问我是否,我不已经选择了吗?

而用你确定要退出?就能给用户一个讯号,我们知道他选择了退出,这里只是一个再确认。

情景2:Chrome浏览器有一个功能,当你第一次打开一个外文站点,他要出一个对话框询问你的意见要不要翻译。这个时候该用是否来询问还是确定呢?

建议:

既然是第一次打开,我们无法判断用户是希望翻译还是不希望:现在英文普及度高,有些用户可能就是喜欢读原汁原味的,有些则希望看翻译领会大致意思即可。即便是同一个人,在不同时段,有时会希望看翻译后的网站,有时则会希望看原始网站。

不能揣测出用户的意思的时候,这里显然要用是否来做询问。这也是chrome现在的做法:

详细解析网页对话框设计技巧,PS教程,图老师教程网

B.所答该所问

详细解析网页对话框设计技巧,PS教程,图老师教程网

看到这里,你或者会有疑问,之前举的Chrome的例子,问是否需要翻译?答的是翻译/否啊,压根没出现是啊。请接着往下看

C.能否即不是是/否也不是确定/取消

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

详细解析网页对话框设计技巧,PS教程,图老师教程网

看来用明确的动词好像是好于确定的?

也不全是,当你在问题中提到的点很希望得到用户的注意,或者是这个操作不是几个字就能说清,需要在问题中详细描述时。此时用确定会更合适。

即在有些时候(上面已分析):

是/否也可演变为某具体动词/否;

确定/取消也可演变为某具体动词/取消的组合。

D.一定要用是否或确定做设问吗?

情景:用户读连载小说,连续阅读直到一需付费的章节,出现一对话框,提示你需要花30Q点购买才可以阅读,你会用下面的哪个对话框?

详细解析网页对话框设计技巧,PS教程,图老师教程网

对话框2,购买此章的button也起到了引导作用,又直观。可没用确定购买的问句,也没用确定的button,会有问题不?

可用性上看,没有问题。

那这里用对话框1和对话框2有什么区别?有优劣之分吗?

那再次咬文嚼字一下:刚才在区分是/否和确认/取消的时候,就已经说过在问确定之前,其实我们心中就已经有一个是前提了。

在现在这个情景下,用户不是在确定了购买意向,点击了购买后,然后弹出一个告知其更多信息,再次确定其是否真的购买的对话框。

而是用户在试读,读完一章又一章的免费章节,他其实都无法预料从哪一章就要开始收费了。

所以这个对话框的出现,是不含任何是的前提的,同时也是没有预期的。

此时陈述给用户一个事实,更偏向于一种告知。而写明购买此章的按钮更起到了一种建议和引导作用。

若问你确定.就像你还不清楚一个人是否有买房计划,也不清楚对方是否喜欢这个房子,就直接叫人家交钱一样。会略显唐突了。

咬文嚼字结束。如果你认同,那就严谨起来,让你的用户见到对话框时,说你好,而不是讨厌。

展开更多 50%)
分享

猜你喜欢

详细解析网页对话框设计技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页对话框设计技巧

现代网页设计时尚:网页中对话框窗口

Web开发
现代网页设计时尚:网页中对话框窗口

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

关于对话框

编程语言 网络编程
关于对话框

折叠对话框

办公软件
折叠对话框

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

将非模态对话框显示为模态对话框

设计创意
将非模态对话框显示为模态对话框

自绘对话框

C语言教程 C语言函数
自绘对话框

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

情感化设计的组成要素及实践案例

情感化设计的组成要素及实践案例

从优秀的iPhone游戏中学习设计策略

从优秀的iPhone游戏中学习设计策略
下拉加载更多内容 ↓