手机端如何佳地呈现“提示框”?

您当前位置:站长素材 >>资讯>>技术资讯>>手机端如何佳地呈现“提示框”?

UI资讯 字体资讯 jquery资讯 PSD资讯 技术资讯 酷站资讯 主题资讯 模板资讯 logo资讯 图标资讯 矢量资讯 壁纸资讯

手机端如何佳地呈现“提示框”?

标签:手机端提示框

今天就来说一说手机端“提示框”?的用户体验,在电脑端,提示框很容易显现,一般用户用鼠标悬浮下就可以了。但是到了手机端,由于屏幕非常有限,而且没有鼠标悬浮的效果,就要好好考虑呈现提示框的佳方法了。

易识别 易点击 易阅读


手机端的提示框要容易让用户识别、点击、和阅读。提示框的外观和位置都有很大影响。


提示图标的识别和点击


大的图标一定比小的图标更容易识别和点击。所以,只要提示框图标的大小不干扰到页面布局,就越大越好。小的图标会给用户的点击带来阻碍。


下面这个例子错误的地方就在于:提示框图标放在文本旁边,太小不容易点击,另外如果增大尺寸,又会扰乱页面布局。







所以好的选择是,将图标放在文本框内部的右侧。文本输入框的高度一般比标题大,所以这样提示框图标也更大,而且不会影响用户输入。


不过下面这个例子仍然有缺陷:图标跟周围对比度低,不容易识别。







所以,给图标添上色彩,会增强对比度,有“按钮”的感觉。


现在这个提示框图标既容易识别也容易点击。





提示框的阅读



提示框不仅要阅读起来顺畅,在视觉上还要跟相关的输入框联系起来。


因此好采用一种跟输入框宽度一致的提示框。如果像下图左边一样,提示框出现在图标的正上方,就会出现被截掉的问题,因此要注意保持提示框跟文本框一致。









另外,为了保证视觉上提示框和输入框相关联,提示框要紧挨着输入框,并且指向图标,进一步表明这个提示框是属于哪个输入框的。


如果用户看完提示框内容,他们就会紧接着点击输入框输入内容。要确保用户点击其他位置时提示框消失,不妨碍他们的下一步动作。



提示框的视觉参考标准


在上文中的案例中我们提到,提示框的大小和位置是以输入框为基准的,这是因为输入框是大、显要的一个元素。以它为基准,可以创造视觉上的关联性和统一性。


那么对于其他组件元素,比如下拉菜单、勾选选项等,也可以作为视觉参照物。






如上图所示,提示框图标放在了下拉菜单的右边,并且高度一致。这样既不会干扰下拉菜单中的选项,在视觉上也显眼。


不同于一般输入框和下拉菜单的水平延伸,勾选组件在视觉上一般是垂直延伸的。因此我们不能把勾选组件的提示框放在右边,这样会干扰选项;也不能放在所有选项的下方,因为这种位置很容易被用户忽略。


因此好的方法是将提示框图标跟勾选项垂直水平上排列一致,并置于上方。这样视觉上产生关联性,用户也能根据问号和颜色识别出提示框的存在。


即使用户不小心点到了提示框,也不会产生负面的结果,只是让他们接收到帮助信息罢了。



提示框的目的


提示框的目的是让用户更顺畅地输入信息,但是并非所有用户都需要这层提示,因此提示框的设计要满足:需要提示的人能立刻找到提示,不需要的人则不必阅读多余的信息。









有些设计师会采用上图中的“提示”例子,即直接把信息放在文本标题下方。这样做的弊端就是,不仅破坏了页面布局,还会分散用户注意力。


用户的注意力是有限的,要保证用户体验尽可能顺畅,就不要让提示信息在默认状态下入侵整个页面布局。


                        
可匿名发表评论
0条评论
关于站长之家 - 联系我们(电话) - 广告服务 - 版权声明 - 友情链接 - 栏目地图 - 帮助说明

© CopyRight 2002-2018, CHINAZ.COM, Inc.All Rights Reserved.