隱形的“按鈕”

鄭建鵬

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

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