隱形的“按鈕”

鄭建鵬

按鈕是網(wǎng)頁(yè)構(gòu)成中的重要元素，一般而言，網(wǎng)頁(yè)中的按鈕可分為兩類(lèi)，一類(lèi)是具有提交功能的按鈕，這是真正意義上的按鈕；而另一類(lèi)則是鏈接性質(zhì)的按鈕，有人稱(chēng)之為偽按鈕。具有提交功能的按鈕一般都具有標(biāo)準(zhǔn)化的形態(tài)，其創(chuàng)意較為常規(guī)，而偽按鈕則常常是某些文字鏈接在網(wǎng)頁(yè)中被設(shè)計(jì)成按鈕的樣式，其創(chuàng)意形式較為多樣。在這些所謂的偽按鈕中，許多網(wǎng)站采用極簡(jiǎn)化和透明化的處理方法，以幾何圖形（大多數(shù)為方框）加文字的方式進(jìn)行按鈕形態(tài)設(shè)計(jì)。表面上看，按鈕只是網(wǎng)站背景圖形（大多數(shù)為模糊圖像）上的一短行文字，而鼠標(biāo)劃過(guò)時(shí)，其圖形內(nèi)的背景即變得更為不透明，所以我們稱(chēng)之為隱形按鈕。一個(gè)好的按鈕設(shè)計(jì)應(yīng)具備美觀醒目、誘導(dǎo)人點(diǎn)擊的特質(zhì)，而隱形按鈕的透明特色使文字鏈接同頁(yè)面大背景圖形融為一體，無(wú)鼠標(biāo)接觸時(shí)畫(huà)面和諧一體，有鼠標(biāo)碰觸時(shí)又會(huì)使畫(huà)面跳脫，凸顯重要內(nèi)容。

TheDistance是一家從事數(shù)字設(shè)計(jì)的創(chuàng)意機(jī)構(gòu)，先后為Google、Magento、Apple、Windows等公司開(kāi)發(fā)應(yīng)用程序或手機(jī)軟件。其網(wǎng)站首頁(yè)背景圖片為一面斑駁粗獷的磚墻，紅磚與水泥的搭配展現(xiàn)公司創(chuàng)意的質(zhì)樸、純粹，體現(xiàn)網(wǎng)站關(guān)注用戶(hù)切身體驗(yàn)的設(shè)計(jì)理念。磚墻上一排白熾燈管組成“TheDistance”的字樣。下方則為配合室內(nèi)環(huán)境與白熾燈管，設(shè)計(jì)了一排三個(gè)分別為綠色、藍(lán)色和粉紅的不同顏色的霓虹燈線(xiàn)形方框，內(nèi)有文字“Ecommerce”“Mobile App”和 “Marketing”。無(wú)鼠標(biāo)點(diǎn)擊時(shí)，三個(gè)方框?yàn)橥该骶€(xiàn)框，鼠標(biāo)碰觸時(shí)則成為有相應(yīng)底色的色塊。

相比透明清晰的頁(yè)面大圖片，模糊化的圖像處理作為隱形按鈕的背景更為常見(jiàn)。背景模糊化更容易激發(fā)人們的探索欲望，更會(huì)在心理上產(chǎn)生點(diǎn)擊按鈕一看究竟的沖動(dòng)。模糊圖像可以是圖像產(chǎn)生的變焦效果，也可以是給圖片添加蒙版。Charles-Axel Pauwels是一家從事工業(yè)設(shè)計(jì)、產(chǎn)品設(shè)計(jì)和界面設(shè)計(jì)的機(jī)構(gòu)，其網(wǎng)站首頁(yè)采用了焦點(diǎn)模糊的背景圖片，在圖片之上有居中的三行文字，最上為設(shè)計(jì)師姓名，文字最大最醒目，中間滾動(dòng)出現(xiàn)設(shè)計(jì)業(yè)務(wù)介紹，“Industry Design”“Product Design”和“UI Design”交替呈現(xiàn)，最下一行為三個(gè)方形按鈕，鼠標(biāo)劃過(guò)時(shí)，方框內(nèi)呈現(xiàn)白色背景，文字則由原先的白色變?yōu)楹谏?/p>

變焦圖片作為背景使人們無(wú)法識(shí)別圖片內(nèi)容，進(jìn)而使背景之上的文字按鈕成為視覺(jué)中心，保證了視覺(jué)信息充分、完整和集中的傳達(dá)。而添加了半透明蒙版的圖片雖然會(huì)轉(zhuǎn)移瀏覽者的部分注意力，但也會(huì)讓頁(yè)面內(nèi)容豐富和生動(dòng)許多，按鈕內(nèi)容同蒙版下的背景圖片相映成趣，呈現(xiàn)二者相互補(bǔ)充烘托的互動(dòng)狀態(tài)。Verbal Visual是紐約一家數(shù)字設(shè)計(jì)機(jī)構(gòu)，“以數(shù)字設(shè)計(jì)激勵(lì)行為并改善世界”是機(jī)構(gòu)的愿景與理想。機(jī)構(gòu)網(wǎng)站首頁(yè)為灰色蒙版下的辦公環(huán)境照片與白色、橘紅色配合的文字。居中編排的主頁(yè)文字與按鈕文字相對(duì)于灰色蒙版照片來(lái)說(shuō)，簡(jiǎn)潔質(zhì)樸而醒目。尤其是鼠標(biāo)移至下方按鈕時(shí)，其文字會(huì)呈現(xiàn)橘紅色，這與首頁(yè)上方的橘紅色方塊相互映照，成為首頁(yè)的兩個(gè)亮點(diǎn)。在網(wǎng)站的作品展示頁(yè)面里，依然延續(xù)著灰色蒙版與橘紅色文字的搭配，一暗一亮，一冷一熱，背景與主體相得益彰。

Fondation recherche médicale是法國(guó)一家從事醫(yī)學(xué)科研研究的基金組織，2014年該組織針對(duì)阿爾茨海默病（俗稱(chēng)老年癡呆癥）發(fā)起了一次“I remember”的宣傳活動(dòng)，以獲取全社會(huì)對(duì)老年癡呆癥患者的關(guān)注?！癷-remember.fr”即為這次活動(dòng)的配合網(wǎng)站。網(wǎng)站被設(shè)計(jì)為一個(gè)巨大的記憶收集庫(kù)，“人們可以不斷在網(wǎng)站上上傳你的記憶，以保證網(wǎng)站會(huì)不斷延續(xù)下去，而不會(huì)慢慢消失”。網(wǎng)站創(chuàng)意本身即在警示人們老年癡呆癥患者的痛苦與掙扎。在視覺(jué)形象上，網(wǎng)站好似蒼茫的宇宙天穹，而人們上傳的記憶就是蒼穹中的一粒粒塵埃。無(wú)數(shù)的塵埃組合、排列、環(huán)繞，組成一幅起伏的宇宙星云圖。首頁(yè)的按鈕部分不再是簡(jiǎn)單的方形線(xiàn)框，而變?yōu)橛梢蝗α鲃?dòng)的塵埃環(huán)繞的十字小圓環(huán)。鼠標(biāo)沒(méi)有接觸按鈕時(shí)，周?chē)鷫m埃如星云般散落四方，而一旦鼠標(biāo)靠近并接觸按鈕，塵埃便立刻匯集成一條清晰明亮的規(guī)則圓環(huán)，一靜一動(dòng)，一散一聚，讓網(wǎng)站的趣味性立增。

讓“按鈕”隱形是實(shí)現(xiàn)網(wǎng)站設(shè)計(jì)簡(jiǎn)潔化的有效手段之一，它尤其適用于那些使用了大背景圖片的網(wǎng)站。整齊干凈的網(wǎng)站首頁(yè)上，一兩個(gè)規(guī)則的或圓或方的圖框配合印刷文字，可隱可現(xiàn)，有效吸引瀏覽者的注意力。雖然對(duì)于這種設(shè)計(jì)是否屬于“按鈕”尚有爭(zhēng)議，但它制造的“輕輕點(diǎn)擊，打開(kāi)世界”的情境與期待無(wú)疑讓瀏覽者很是受用。

鏈接

hyperakt.com

Hyperakt設(shè)計(jì)工作室網(wǎng)站。極其簡(jiǎn)單的首頁(yè)設(shè)計(jì)，純黑色網(wǎng)站背景，白色字體，居中編排，網(wǎng)站標(biāo)題、副標(biāo)題和按鈕三級(jí)內(nèi)容，按鈕文字字體最小，由白色長(zhǎng)方形線(xiàn)框包圍，鼠標(biāo)移至其上時(shí)，文字與背景的顏色實(shí)現(xiàn)反轉(zhuǎn)。

www.derpixelist.de

意大利一間名為Derpixelist的設(shè)計(jì)公司。首頁(yè)是黑色背景中一個(gè)正對(duì)鏡頭的頷首低頭的紋身男人形象。居中排列的頁(yè)面主體業(yè)務(wù)介紹文字下是一個(gè)長(zhǎng)方形的線(xiàn)框按鈕。綠色是網(wǎng)站的主點(diǎn)綴色，左上角的公司Logo以綠色背景展現(xiàn)，按鈕在鼠標(biāo)觸動(dòng)時(shí)也會(huì)呈現(xiàn)綠色背景。

www.b2s.nl/decibel2014

荷蘭Decibel戶(hù)外音樂(lè)節(jié)2014年活動(dòng)網(wǎng)站。網(wǎng)站的背景是幾段音樂(lè)節(jié)現(xiàn)場(chǎng)的動(dòng)感視頻，充滿(mǎn)激情的畫(huà)面和豐富的色彩是網(wǎng)站的主要特點(diǎn)。頁(yè)面下方有兩個(gè)并排的方框按鈕，邊框配合頁(yè)面色調(diào)為紅黃漸變。鼠標(biāo)移至按鈕區(qū)域時(shí)，方框即由透明變?yōu)榧t黃漸變背景，同頁(yè)面色調(diào)保持一致。

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

西門(mén)子“Mobility”綜合解決方案活動(dòng)網(wǎng)站。網(wǎng)站首頁(yè)背景為城市生活場(chǎng)景：繁忙的河道、疾馳的列車(chē)、來(lái)回穿梭的人群，“Mobility”作為頁(yè)面標(biāo)題顯示于頁(yè)面中心，其下設(shè)計(jì)了四個(gè)大型透明按鈕，分別代表了城市管理、城際交通、移動(dòng)通訊以及城市物流。無(wú)鼠標(biāo)接觸時(shí)，按鈕為方框，鼠標(biāo)移至該區(qū)域時(shí)則變化為藍(lán)色網(wǎng)狀背景。

www.minuteofsilence.com.au

澳大利亞Anzac Day活動(dòng)網(wǎng)站。Anzac Day是澳大利亞重要節(jié)日之一，是為悼念澳大利亞與新西蘭士兵在一戰(zhàn)中的巨大犧牲。首頁(yè)為滿(mǎn)屏的黑色背景，白底黑字的網(wǎng)站Logo居于頁(yè)面中央上部，其下排列兩個(gè)線(xiàn)框文字按鈕。鼠標(biāo)移至按鈕區(qū)域后，左側(cè)則出現(xiàn)土黃色塊，在滿(mǎn)屏的黑與白中營(yíng)造出一絲溫暖。endprint