一般來(lái)說(shuō)，網(wǎng)頁(yè)設(shè)計(jì)師都極少關(guān)注表單設(shè)計(jì)，這使得大多數(shù)表單看起來(lái)都差不多，普通至極，毫無(wú)特色。本文中的這些案例化腐朽為神奇，將枯燥的表單頁(yè)面設(shè)計(jì)的多姿多彩。一起來(lái)看一下吧。

還記得那篇備受好評(píng)的《向左走、向右走？表單元素設(shè)計(jì)大揭密》嗎？讓很多網(wǎng)頁(yè)設(shè)計(jì)師第一次認(rèn)識(shí)到表單設(shè)計(jì)的一些魔鬼細(xì)節(jié)。那么今天再來(lái)看看實(shí)際中的一些新穎案例吧。本文收集了一大批優(yōu)秀的聯(lián)系表單設(shè)計(jì)，希望對(duì)你有所啟發(fā)。

Contact Page from Café Evoke

Bold Contact Page from Mixd

Signup Form from Involvio Orientation

Sliding Contact Page from Whoa Nelly Catering

Submission Form from Dear Mum

Clean Contact Page from Mud

Minimal Contact Form from Eduardo Nunes

Dark Minimal Contact Form from group94

Clean Contact Form from Littlelines

Contact Form from Mostly Serious

移動(dòng)至上是當(dāng)今的大背景。交互設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)都不得不顧慮手機(jī)的”感受”，移動(dòng)互聯(lián)網(wǎng)方向的創(chuàng)業(yè)如同雨后春筍般出現(xiàn)，而有關(guān)移動(dòng)端的Logo怎么設(shè)計(jì)？看看這里吧。

網(wǎng)頁(yè)設(shè)計(jì)中，切圖輸出是指設(shè)計(jì)師將手邊繪制完成的原始圖稿轉(zhuǎn)換成網(wǎng)頁(yè)用的圖片格式、并交由下一位人員網(wǎng)頁(yè)排版的重要步驟。選擇適合的圖片格式不但可以將讓設(shè)計(jì)得到合理的顯示效果、甚至還可以有效的控制圖檔的檔案大小，節(jié)省下載時(shí)間、有效的減少服務(wù)器的負(fù)擔(dān)。

以設(shè)計(jì)師最常用的 Photoshop 以及 Illustrator 為例，都提供了「儲(chǔ)存為網(wǎng)頁(yè)用…」的功能。與默認(rèn)的存盤模式不同，在這個(gè)模式中，軟件提供了仿真圖文件輸出的質(zhì)量調(diào)整、檔案大小控制等針對(duì)網(wǎng)頁(yè)圖文件需求的選項(xiàng)：

相信許多人都知道網(wǎng)頁(yè)設(shè)計(jì)中最常用的格式不外乎 JPG、GIF、PNG 等格式，但并非所有的人都知道他們之前的實(shí)際差別跟到底何時(shí)該選擇何種格式。經(jīng)常發(fā)生的情況是，選擇 GIF 后的輸出結(jié)果看起來(lái)變得很糟，于是 PNG （24）似乎突然間風(fēng)行了起來(lái)，不論圖檔尺寸是不是因此多了好幾倍。

JPEG

由于舊型計(jì)算機(jī)系統(tǒng)以及文件系統(tǒng)的限制，計(jì)算機(jī)檔案文件名與擴(kuò)展名被規(guī)定為 8.3 的格式，因此 JPEG 的附檔名被縮寫為 .JPG。JPEG可以說(shuō)是人們最熟悉的圖檔格式了，相信在數(shù)字相機(jī)普及的現(xiàn)在，幾乎每臺(tái)數(shù)字相機(jī)、照相手機(jī)都可以（甚至只能）輸出 JPEG 格式的圖檔。JPEG是一種很典型的使用破壞性壓縮（lossy compression）的圖檔格式，也就是說(shuō)使用者每次進(jìn)行 JPEG 的存檔動(dòng)作后，圖檔的內(nèi)容都會(huì)遭到破壞，這個(gè)特性在肉眼辨識(shí)下并不明顯，但卻可以有效的降低圖檔的檔案大小。

我們總是會(huì)聽到 “少即是多”。
有時(shí)，剝離了所有的噱頭和幻想的元素從布局和專注于核心設(shè)計(jì)的原則出發(fā)，就會(huì)得到一個(gè)更美觀的網(wǎng)頁(yè)設(shè)計(jì)。
這篇文章向我們展示了一些極簡(jiǎn)主義的網(wǎng)站示例。

Yaron Schoen

Dan Cassaro

Dodge & Burn

Friends of The Web

Color Grade It

Simon Foster

Nudge

Johann Lucchini

Paravel

（接上篇）

7. 圖片使用

增加圖片可能會(huì)降低轉(zhuǎn)化率。我做過幾次A/B測(cè)試，發(fā)現(xiàn)主頁(yè)的可點(diǎn)擊圖片會(huì)降低總注冊(cè)量（甚至計(jì)算30天內(nèi)回訪也是如此，已排除先前訪問數(shù)據(jù)）。我覺得Pinterest知道這個(gè)道理，所以不會(huì)讓用戶在諸如“申請(qǐng)邀請(qǐng)碼”頁(yè)面（http://pinterest.com/landing/）跳過關(guān)鍵動(dòng)作。

注意頁(yè)面底部的輪播圖插件。它們是不可點(diǎn)擊的，所以用戶不會(huì)從注冊(cè)啟動(dòng)頁(yè)跳轉(zhuǎn)走。從我的經(jīng)驗(yàn)來(lái)看，如果這些圖片可點(diǎn)擊，該頁(yè)面的郵件地址提交率估計(jì)會(huì)下跌5%。我過去測(cè)試過登出頁(yè)面的可點(diǎn)擊圖片與不可點(diǎn)擊圖片，在每種情況下，不可點(diǎn)擊圖片的轉(zhuǎn)化率都要高5%-7%，而且測(cè)試組用戶與控制組用戶的質(zhì)量是保持一致的。

圖片同樣可以用來(lái)提高轉(zhuǎn)化率。網(wǎng)絡(luò)營(yíng)銷的其中一個(gè)說(shuō)法是“有雞就有點(diǎn)擊”(Chicks get clicks)（“色情有市場(chǎng)”的粗俗說(shuō)法）。咨詢公司ion interactive為一家游戲公司做了一次測(cè)試，發(fā)現(xiàn)下面的設(shè)計(jì)的轉(zhuǎn)化率比沒有強(qiáng)調(diào)巨乳的同款設(shè)計(jì)竟然高出了35%。

提要：千萬(wàn)不要將所有建議照單全收,做出一個(gè)四不像網(wǎng)站。你應(yīng)該將此看作測(cè)試網(wǎng)站的技巧工具箱，了解對(duì)你的產(chǎn)品與用戶而言使用這些技巧的優(yōu)點(diǎn)與缺點(diǎn)何在，以及如何使它們符合你的宏觀產(chǎn)品愿景。

“優(yōu)化注冊(cè)轉(zhuǎn)化率”這個(gè)話題可以扯出一本百科全書的篇幅來(lái)。因此我會(huì)花大量筆墨來(lái)闡述。在此先提醒你們，這將是一篇長(zhǎng)文。。（譯者注：差不多等于一章書了，所以拆分成上中下三篇）

我認(rèn)為優(yōu)化注冊(cè)轉(zhuǎn)化率的方法概括起來(lái)主要就是兩大類：

第一大類，站內(nèi)優(yōu)化。包括網(wǎng)頁(yè)設(shè)計(jì)/文案/布局等。這是個(gè)值得深入探討的話題，這也是后面一類方法的基礎(chǔ)。

第二大類，訪問來(lái)源優(yōu)化。有許多種方法可以提升訪問來(lái)源的轉(zhuǎn)化效果（比如SEO，郵件，社交網(wǎng)絡(luò)，等等），對(duì)此我不會(huì)太多展開。但從“訪問來(lái)源→用戶最終轉(zhuǎn)化頁(yè)”之間的過程優(yōu)化同樣很重要。討論站內(nèi)轉(zhuǎn)化率優(yōu)化不

可能拋開訪問來(lái)源。因?yàn)樵缭谟脩暨M(jìn)入落地頁(yè)之前就已經(jīng)要開始優(yōu)化轉(zhuǎn)化率了。

當(dāng)下社會(huì)，“Flat Design”設(shè)計(jì)方式似乎已經(jīng)成為網(wǎng)頁(yè)和交互設(shè)計(jì)的潮流。Flat design指的是網(wǎng)頁(yè)設(shè)計(jì)者在設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，常常使用圖片投影，細(xì)微的紋理，純色漸變，簡(jiǎn)潔的設(shè)計(jì)布局和對(duì)比強(qiáng)烈的排版，這些設(shè)計(jì)類似于Win8和Metro UI的界面。本文收集了20個(gè)極好的Flat Design網(wǎng)頁(yè)設(shè)計(jì)案列，請(qǐng)您欣賞。

LayerVault

在莎士比亞那個(gè)時(shí)代，觀眾是非常不給面子的，品味也不是很高，簡(jiǎn)而言之，那時(shí)的觀眾是一群沒有耐心、根本不懂文學(xué)的群眾。

他們辛勤的工作一天后，他們來(lái)劇院想要找點(diǎn)樂子和刺激，沒錯(cuò)，他們想要的就是娛樂。
莎士比亞之前的劇作家往往不受待見，有時(shí)候觀眾甚至?xí)鹊共?、砸?chǎng)子，因?yàn)樗麄冇X得戲劇太爛了，根本無(wú)法讓他們感受到一絲一毫的樂趣，而且也抓不住他們的心。

莎士比亞就在這種大環(huán)境下崛起，雖然有著極高的藝術(shù)涵養(yǎng)，卻能得到貧民窟的贊歌，他的策略就是：用情節(jié)、用戲劇抓住觀眾的注意力 。
他的作品短小精悍，戲服華麗，音樂優(yōu)美，對(duì)白幽默詼諧、構(gòu)思精巧。

時(shí)至今日，科技創(chuàng)新日新月異，文明高速發(fā)展，然而，現(xiàn)在的觀眾，依然還是沒有耐心，正如莎士比亞時(shí)代的觀眾一樣。

打造焦點(diǎn)的幾條小建議

　單頁(yè)網(wǎng)站是非常好的靈感來(lái)源，這些網(wǎng)站界面簡(jiǎn)潔、主題突出、設(shè)計(jì)精美，有創(chuàng)意的動(dòng)態(tài)效果，帶給訪客強(qiáng)烈的視覺沖擊。這種形式的網(wǎng)站需要把內(nèi)容都放在一個(gè)頁(yè)面中，只有重要內(nèi)容才會(huì)展現(xiàn)在屏幕中。下面收集了20佳優(yōu)秀的單頁(yè)網(wǎng)站作品，通過這些網(wǎng)站，你能夠很好的了解和學(xué)習(xí)單頁(yè)形式的網(wǎng)站設(shè)計(jì)。

Belgian Boat Show