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

2016-02-17 02:09 7 1 收藏

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

【 tulaoshi.com - 平面设计 】

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

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

① 多次打断=打扰

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

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

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

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

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

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

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

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

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

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

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

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

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

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

② 表意不清=打扰

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

先温习下语文:

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

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

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

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

建议:

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

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

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

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

建议:

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

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

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

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

B.所答该所问

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

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

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

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

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

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

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

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

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

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

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

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

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

可用性上看,没有问题。

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

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

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

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

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

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

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

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

来源:http://www.tulaoshi.com/n/20160217/1577515.html

延伸阅读
无模式对话框与有模式对话框不同的是在创建后其他窗口都可以继续接收用户输入,因此无模式对话框有些类似一个弹出窗口。创建无模式对话框需要调用 BOOL CDialog::Create( UINT nIDTemplate, CWnd* pParentWnd = NULL );之后还需要调用 BOOL CDialog::ShowWindow( SW_SHOW);进行显示,否则无模式对话框将是不可见的。相关代码如下: void CYo...
在Java Swing编程中,程序员还可以自定义对话框,一般可以从JDialog类来继续。下面给出一个对话框类的代码: class HelpAbout extends JDialog implements ActionListener { JavaWord mainFrame; JButton okButton; javax.swing.Timer myTimer; int Counter=0; public HelpAbout(JavaWord...
(1) 参数 typedef struct { DWORD lStructSize; HWND hwndOwner; HWND hInstance; COLORREF rgbResult; COLORREF * lpCustColors; DWORD Flags; LPARAM lCustData; LPCCHOOKPROC lpfnHook; LPCTSTR lpTemplateName; } CHOOSECOLOR, *LPCHOOSECOLOR; (2) API...
使用有模式对话框时在对话框弹出后调用函数不会立即返回,而是等到对话框销毁后才会返回(请注意在对话框弹出后其他窗口的消息依然会被传递)。所以在使用对话框时其他窗口都不能接收用户输入。创建有模式对话框的方法是调用CDialog::DoModal()。下面的代码演示了这种用法: CYourView::OnOpenDlg() {       ...
标签: PS PS教程
      横轴代表像素本身的两度,竖轴代表新调节的亮度。中间的直线代表目前输入与输出之间的关系。可以单击某个Channels,进行Curves设置,或按Shift键选择两个以上的Channels.     在图像中准备要调节亮度的地方按下鼠标,一个圆出现在Curves对话框中的直线上。拖动这个圆即可调节图...

经验教程

127

收藏

62
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部