表单按钮文字的传达效果

2016-02-17 05:03 5 1 收藏

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的表单按钮文字的传达效果教程,一起来看看吧!超容易上手~

【 tulaoshi.com - 平面设计 】

概括起来,所有表单都可以用OK/Cancel按钮解决问题。但如果能更明确表单场景,帮助用户建立对点击结果的期望,传达效果更直接。比如注册表单最后,用确定, OK能告诉用户表单填写完成,但在提交注册表单肯定是注册用户,所以如果用现在注册, Register now则能更的传达此时按按钮的结果。

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

同样道理,举最常见的blog评论表单例子。不少设计师blog评论表单按钮都是发表、确定发表、发表评论、发言完毕等类似说法,可见大家都有共识,普通的确定, OK放这真不合适。具体哪个标记最好?比较规矩的应该是发表评论,但我更倾向于点击发表类似略带强迫性的语气。

另外从场景上分析,我认为英文submit并不适合单独做评论表单按钮的标记,因为submit只有提交的意思,比较恰当的是submit comment。再举搜索例子,几乎所有搜索功能按钮都是搜索,但是我们会看到谷歌是Google搜索,而百度是百度一下,无非都在强化自己的品牌营销。进一步分析,Google的图片、视频、地图搜索按钮分别是搜索图片、搜索视频、搜索地图,整条产品线类似。而百度的新闻、网页、贴吧、MP3、图片、视频搜索全部是百度一下,只有百度知道用搜索答案。

表单按钮文字的传达效果,PS教程,图老师教程网

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

从实际效果来看,搜索首页百度一下大大提升了百度的品牌价值,但整条产品线都百度一下是否恰当?我认为Google的方案更优越,因为给用户建立了更清晰的期望。相应看了下腾讯的Soso、网易的Youdao,都没做类似考虑。

其实,我觉得Soso的搜索按钮用搜搜就一举两得,干嘛还搜索啊,太俗了。

表单按钮文字的传达效果,PS教程,图老师教程网

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

延伸阅读
标签: Web开发
html head meta http-equiv="Content-Type" content="text/html; charset=gb2312" title非常不错的纯CSS表单显示效果 - 站在巨人肩膀上/title style type="text/css" body{ font-family: verdana,font-size: 12px;color: #FFFFFF;background-color:#ffffff} .en1 { font-size: 10px;font-family: Verdana } .input1{ font-family: verdana;backg...
标签: Web开发
Agenda BODY { FONT-SIZE: 9pt; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; } A { FONT-SIZE: 9pt; TEXT-DECORATION: none; color: #000000 } A:hover { TEXT-DECORATION: none; color: #000000 } A:link { TEXT-DECORATION: none } A:visited { TEXT-DECORATION: none } BR { FO...
标签: Web开发
虽然CSS样式的学习需要我们动手多实践,需要多做案例,思致思考,但有时候注意资料的收集与整理也是非常重要的,在实际开发中往往会起到事半功倍的效果。 一、按钮样式  Example Source Code .buttoncss {     font-family: "tahoma", "宋体";     font-size:9pt; color: #003399;   &nbs...
标签: Web开发
一、按钮样式 .buttoncss { font-family: "tahoma", "宋体"; /*www.52css.com*/ font-size:9pt; color: #003399; border: 1px #003399 solid; color:#006699; border-bottom: #93bee2 1px solid; border-left: #93bee2 1px solid; border-right: #93bee2 1px solid; border-top: #93bee2 1px sol...
最终效果图 制作工具:Photoshop CS 制作过程: 1、新建一个文件,设置宽度为10厘米,高度为8厘米,分辨率为300像素。 2、选择工具箱中的“文字工具”,在其属性栏中设置合适的字体、字号,在画面中输入文字,效果如图01和02所示。 图01 图02 3、选择工具箱中的“自定形状工具”,在图像中加入形状,效果如...

经验教程

509

收藏

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