鄭建鵬

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

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

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

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

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

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

鏈接

hyperakt.com

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

www.derpixelist.de

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

www.b2s.nl/decibel2014

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

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

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

www.minuteofsilence.com.au

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