隐形的“按钮”

郑建鹏

按钮是网页构成中的重要元素，一般而言，网页中的按钮可分为两类，一类是具有提交功能的按钮，这是真正意义上的按钮；而另一类则是链接性质的按钮，有人称之为伪按钮。具有提交功能的按钮一般都具有标准化的形态，其创意较为常规，而伪按钮则常常是某些文字链接在网页中被设计成按钮的样式，其创意形式较为多样。在这些所谓的伪按钮中，许多网站采用极简化和透明化的处理方法，以几何图形（大多数为方框）加文字的方式进行按钮形态设计。表面上看，按钮只是网站背景图形（大多数为模糊图像）上的一短行文字，而鼠标划过时，其图形内的背景即变得更为不透明，所以我们称之为隐形按钮。一个好的按钮设计应具备美观醒目、诱导人点击的特质，而隐形按钮的透明特色使文字链接同页面大背景图形融为一体，无鼠标接触时画面和谐一体，有鼠标碰触时又会使画面跳脱，凸显重要内容。

TheDistance是一家从事数字设计的创意机构，先后为Google、Magento、Apple、Windows等公司开发应用程序或手机软件。其网站首页背景图片为一面斑驳粗犷的砖墙，红砖与水泥的搭配展现公司创意的质朴、纯粹，体现网站关注用户切身体验的设计理念。砖墙上一排白炽灯管组成“TheDistance”的字样。下方则为配合室内环境与白炽灯管，设计了一排三个分别为绿色、蓝色和粉红的不同颜色的霓虹灯线形方框，内有文字“Ecommerce”“Mobile App”和 “Marketing”。无鼠标点击时，三个方框为透明线框，鼠标碰触时则成为有相应底色的色块。

相比透明清晰的页面大图片，模糊化的图像处理作为隐形按钮的背景更为常见。背景模糊化更容易激发人们的探索欲望，更会在心理上产生点击按钮一看究竟的冲动。模糊图像可以是图像产生的变焦效果，也可以是给图片添加蒙版。Charles-Axel Pauwels是一家从事工业设计、产品设计和界面设计的机构，其网站首页采用了焦点模糊的背景图片，在图片之上有居中的三行文字，最上为设计师姓名，文字最大最醒目，中间滚动出现设计业务介绍，“Industry Design”“Product Design”和“UI Design”交替呈现，最下一行为三个方形按钮，鼠标划过时，方框内呈现白色背景，文字则由原先的白色变为黑色。

变焦图片作为背景使人们无法识别图片内容，进而使背景之上的文字按钮成为视觉中心，保证了视觉信息充分、完整和集中的传达。而添加了半透明蒙版的图片虽然会转移浏览者的部分注意力，但也会让页面内容丰富和生动许多，按钮内容同蒙版下的背景图片相映成趣，呈现二者相互补充烘托的互动状态。Verbal Visual是纽约一家数字设计机构，“以数字设计激励行为并改善世界”是机构的愿景与理想。机构网站首页为灰色蒙版下的办公环境照片与白色、橘红色配合的文字。居中编排的主页文字与按钮文字相对于灰色蒙版照片来说，简洁质朴而醒目。尤其是鼠标移至下方按钮时，其文字会呈现橘红色，这与首页上方的橘红色方块相互映照，成为首页的两个亮点。在网站的作品展示页面里，依然延续着灰色蒙版与橘红色文字的搭配，一暗一亮，一冷一热，背景与主体相得益彰。

Fondation recherche médicale是法国一家从事医学科研研究的基金组织，2014年该组织针对阿尔茨海默病（俗称老年痴呆症）发起了一次“I remember”的宣传活动，以获取全社会对老年痴呆症患者的关注。“i-remember.fr”即为这次活动的配合网站。网站被设计为一个巨大的记忆收集库，“人们可以不断在网站上上传你的记忆，以保证网站会不断延续下去，而不会慢慢消失”。网站创意本身即在警示人们老年痴呆症患者的痛苦与挣扎。在视觉形象上，网站好似苍茫的宇宙天穹，而人们上传的记忆就是苍穹中的一粒粒尘埃。无数的尘埃组合、排列、环绕，组成一幅起伏的宇宙星云图。首页的按钮部分不再是简单的方形线框，而变为由一圈流动的尘埃环绕的十字小圆环。鼠标没有接触按钮时，周围尘埃如星云般散落四方，而一旦鼠标靠近并接触按钮，尘埃便立刻汇集成一条清晰明亮的规则圆环，一静一动，一散一聚，让网站的趣味性立增。

让“按钮”隐形是实现网站设计简洁化的有效手段之一，它尤其适用于那些使用了大背景图片的网站。整齐干净的网站首页上，一两个规则的或圆或方的图框配合印刷文字，可隐可现，有效吸引浏览者的注意力。虽然对于这种设计是否属于“按钮”尚有争议，但它制造的“轻轻点击，打开世界”的情境与期待无疑让浏览者很是受用。

链接

hyperakt.com

Hyperakt设计工作室网站。极其简单的首页设计，纯黑色网站背景，白色字体，居中编排，网站标题、副标题和按钮三级内容，按钮文字字体最小，由白色长方形线框包围，鼠标移至其上时，文字与背景的颜色实现反转。

www.derpixelist.de

意大利一间名为Derpixelist的设计公司。首页是黑色背景中一个正对镜头的颔首低头的纹身男人形象。居中排列的页面主体业务介绍文字下是一个长方形的线框按钮。绿色是网站的主点缀色，左上角的公司Logo以绿色背景展现，按钮在鼠标触动时也会呈现绿色背景。

www.b2s.nl/decibel2014

荷兰Decibel户外音乐节2014年活动网站。网站的背景是几段音乐节现场的动感视频，充满激情的画面和丰富的色彩是网站的主要特点。页面下方有两个并排的方框按钮，边框配合页面色调为红黄渐变。鼠标移至按钮区域时，方框即由透明变为红黄渐变背景，同页面色调保持一致。

www.siemens.com.tr/i/Assets/mobility

西门子“Mobility”综合解决方案活动网站。网站首页背景为城市生活场景：繁忙的河道、疾驰的列车、来回穿梭的人群，“Mobility”作为页面标题显示于页面中心，其下设计了四个大型透明按钮，分别代表了城市管理、城际交通、移动通讯以及城市物流。无鼠标接触时，按钮为方框，鼠标移至该区域时则变化为蓝色网状背景。

www.minuteofsilence.com.au

澳大利亚Anzac Day活动网站。Anzac Day是澳大利亚重要节日之一，是为悼念澳大利亚与新西兰士兵在一战中的巨大牺牲。首页为满屏的黑色背景，白底黑字的网站Logo居于页面中央上部，其下排列两个线框文字按钮。鼠标移至按钮区域后，左侧则出现土黄色块，在满屏的黑与白中营造出一丝温暖。endprint