編者按：今天這篇譯文全程滿滿當(dāng)當(dāng)?shù)亩际歉韶?，包含超多的?shí)用經(jīng)驗(yàn)，比如讓元素在各個(gè)尺寸中保持邊界清晰的技巧，切片的專業(yè)方法，命名規(guī)則等，絕對(duì)值得每個(gè)UI設(shè)計(jì)師收藏起來(lái)！

如果你想讓你的排版擁有更令人愉悅的閱讀體驗(yàn)，其實(shí)只需要有針對(duì)性地對(duì)三個(gè)方面進(jìn)行調(diào)整就可以了。這些技巧不僅可以運(yùn)用于設(shè)計(jì)領(lǐng)域，哪怕你用在文本文檔排版上都能收到奇效！

第一、常見(jiàn)蜘蛛：蜘蛛其實(shí)就是搜索引擎用來(lái)訪問(wèn)頁(yè)面的程序，英文叫spider，也稱為機(jī)器人，英文為bot。有時(shí)候查看IIS日志就能看到各種蜘蛛訪問(wèn)網(wǎng)頁(yè)的情況，對(duì)網(wǎng)站的優(yōu)化起到一定的指導(dǎo)作用。當(dāng)蜘蛛訪問(wèn)一個(gè)網(wǎng)站時(shí)，會(huì)發(fā)出頁(yè)面訪問(wèn)請(qǐng)求并返回HTTP狀態(tài)碼，然后蜘蛛會(huì)把這些狀態(tài)碼存入自己的數(shù)據(jù)庫(kù)，為以后的各種計(jì)算做鋪墊。常見(jiàn)的蜘蛛有百度蜘蛛(Baiduspider)、雅虎蜘蛛(Mozilla)、微軟Bing蜘蛛(msnbot)、搜狗蜘蛛(Sogou+web+bot)、Google蜘蛛(Googlebot)等。一般情況下，IIS日志都會(huì)有顯示，站長(zhǎng)們應(yīng)該多花點(diǎn)時(shí)間仔細(xì)看下蜘蛛對(duì)自己網(wǎng)站的訪問(wèn)情況，然后對(duì)自己網(wǎng)站做出調(diào)整。

第二、文件存儲(chǔ)：文件存儲(chǔ)是搜索引擎的一個(gè)技術(shù)關(guān)鍵所在，同時(shí)也是面臨的一個(gè)挑戰(zhàn)。當(dāng)搜索引擎爬行和抓取完成后，會(huì)把這些數(shù)據(jù)存入原始頁(yè)面數(shù)據(jù)庫(kù)。在這個(gè)數(shù)據(jù)庫(kù)存放的數(shù)據(jù)和用戶在瀏覽器中看到的頁(yè)面是完全一樣的。每個(gè)URL都會(huì)有一個(gè)獨(dú)特的編號(hào)。除此之外，還要存儲(chǔ)各種計(jì)算權(quán)重所需要的數(shù)據(jù)，比如各種鏈接的關(guān)系，PR的迭代計(jì)算等。這些數(shù)據(jù)量是巨大的。很多網(wǎng)站不存在時(shí)，我們可以訪問(wèn)搜索引擎的快照頁(yè)面，這些頁(yè)面就是存在搜索引擎自己的數(shù)據(jù)庫(kù)中，與站長(zhǎng)網(wǎng)站本身的數(shù)據(jù)沒(méi)有關(guān)系，是獨(dú)立存在的。平時(shí)的快照更新、排名波動(dòng)都和搜索引擎的文件存儲(chǔ)有著直接的關(guān)系。

編者按：以下內(nèi)容摘自《美國(guó)視覺(jué)設(shè)計(jì)學(xué)院之完形設(shè)計(jì)》，新手可以多看這些法則，并運(yùn)用到你的設(shè)計(jì)過(guò)程中，防止自己做出甲方式審美的作品。

著名的室內(nèi)設(shè)計(jì)大師Charles Eames曾說(shuō)過(guò)，“細(xì)節(jié)并不只關(guān)乎它們本身，它們還構(gòu)成了設(shè)計(jì)。”的確，每一個(gè)網(wǎng)頁(yè)都是由無(wú)數(shù)的細(xì)節(jié)構(gòu)成，而其中的內(nèi)容也是同樣由這些細(xì)節(jié)連接組織到一起。不論是提供信息服務(wù)的網(wǎng)站，還是APP的官方宣傳頁(yè)，任何一個(gè)優(yōu)秀的網(wǎng)站都能夠經(jīng)受得起挑剔眼光的洗禮，從圖片到布局，從字體到架構(gòu)。

網(wǎng)頁(yè)設(shè)計(jì)的細(xì)節(jié)至關(guān)重要，因?yàn)檎撬鼈兘o用戶留下好印象，這些細(xì)節(jié)支撐起網(wǎng)站的良好體驗(yàn)，提高易用性。正如同Eames所說(shuō)，它們成就了設(shè)計(jì)，不注意細(xì)節(jié)會(huì)讓設(shè)計(jì)感流失。

優(yōu)秀的網(wǎng)站有著不一樣的亮點(diǎn)，但一樣地專注細(xì)節(jié)：《這樣才過(guò)癮！2014年最佳網(wǎng)站評(píng)選結(jié)果出爐

接下來(lái)，我們一同看看這11款設(shè)計(jì)驚艷的網(wǎng)站。它們的好設(shè)計(jì)源于細(xì)節(jié)，有的界面雅致，有的交互出彩。深入揣摩這些案例，也許你的下一個(gè)網(wǎng)頁(yè)設(shè)計(jì)作品會(huì)非常強(qiáng)大。

THE SPEED OF BASECAMP’S PASSWORD VERIFICATION

Basecamp 是一個(gè)基于網(wǎng)頁(yè)的項(xiàng)目管理工具。正如同它的介紹，速度和效率是至關(guān)重要的。

這是網(wǎng)站的驗(yàn)證界面，設(shè)計(jì)師巧妙的事先隱藏了確認(rèn)的按鈕，只有當(dāng)你輸入了正確的驗(yàn)證碼之后，OK按鈕才會(huì)出現(xiàn)。這種措施不僅提高了網(wǎng)站的性能，還通過(guò)讓按鈕從無(wú)到有，將“驗(yàn)證碼正確”的概念具現(xiàn)化，觸動(dòng)用戶，增加成就感。

COLOPHON PRACTICED BY NEOTERIC DESIGN

在歐洲，在書(shū)中使用Colophons（題跋）可以追溯到15世紀(jì)的時(shí)候（中國(guó)就早很多了），不過(guò)這個(gè)網(wǎng)站是為了將其運(yùn)用到網(wǎng)站上去。這次，Neoteric Design分享了他們網(wǎng)站的制作筆記——各個(gè)部分的功能，從字體軟件到編程語(yǔ)言和內(nèi)容管理系統(tǒng)。如果訪客想知道一個(gè)網(wǎng)站是如何構(gòu)建起來(lái)的，那么這個(gè)帶題跋的筆記可以幫助用戶方便快捷得了解這個(gè)網(wǎng)站的構(gòu)建過(guò)程，滿足好奇心。

GW模式。（G=graphic,W=words）即為圖案＋文字模式。圖案經(jīng)常為一些可以表示“空白”隱
喻的圖案或者是自家應(yīng)用的吉祥物相關(guān)的圖案，抑或是可以為跟頁(yè)面引導(dǎo)相關(guān)的圖案。文字一般包含：標(biāo)題，說(shuō)明。標(biāo)題通常是解釋此處空白的原因，如
“Oops,地理定位被關(guān)閉啦，無(wú)法使用該功能哦”，“網(wǎng)絡(luò)出問(wèn)題啦”等，說(shuō)明則解釋出現(xiàn)此狀況的原因和解決辦法等。文案的風(fēng)格經(jīng)常根據(jù)產(chǎn)品的調(diào)性去設(shè)
計(jì)，有些走賣萌路線，有些走高冷路線，有些甚至走狂暴路線等等。鑒于此類型是一種最常見(jiàn)的類型，單純的包涵文字或單純包涵圖案的設(shè)計(jì)手法也歸納到GW模式
中。如下圖：

Navicon，也就是漢堡圖標(biāo)，已經(jīng)成為越來(lái)越多網(wǎng)頁(yè)設(shè)計(jì)導(dǎo)航模塊時(shí)的首選了。相比于傳統(tǒng)的導(dǎo)航欄，隱藏式菜單導(dǎo)航在設(shè)計(jì)和用戶體驗(yàn)上有著它獨(dú)到的地方。作為一個(gè)隨著移動(dòng)端設(shè)計(jì)發(fā)展而崛起的網(wǎng)頁(yè)設(shè)計(jì)元素，Navicon并沒(méi)有減弱它引導(dǎo)用戶的功能性，也沒(méi)有喪失它作為基礎(chǔ)網(wǎng)頁(yè)組件的重要性，還為設(shè)計(jì)師和開(kāi)發(fā)者提供了更大的創(chuàng)作空間。

如何正確使用Navicon取決于項(xiàng)目的實(shí)際狀況，相對(duì)保守的站點(diǎn)可能不會(huì)考慮這個(gè)選擇，而不少追求時(shí)尚簡(jiǎn)約、多平臺(tái)體驗(yàn)統(tǒng)一的新興網(wǎng)站可能會(huì)更加青睞Navicon，因?yàn)樽鳛閷?dǎo)航接口的它小巧而討喜，輕松配合大圖和時(shí)尚的網(wǎng)頁(yè)設(shè)計(jì)，并且隱藏起復(fù)雜的、零碎的導(dǎo)航內(nèi)容菜單。

Navicon很單調(diào)么？并非如此。借助額外的打開(kāi)過(guò)程動(dòng)效和抓人眼球的細(xì)節(jié)效果，Navicon擁有非常大的提升空間和設(shè)計(jì)可能性以及良好的用戶體驗(yàn)。更重要的是，它適用于各類導(dǎo)航：不僅可以清楚的傳達(dá)信息，而且有助于解決響應(yīng)速度方面的問(wèn)題，并且能夠促進(jìn)網(wǎng)頁(yè)在多平臺(tái)設(shè)計(jì)上的統(tǒng)一。

如何設(shè)計(jì)一個(gè)靠譜的Navicon：《數(shù)據(jù)告訴你真相！漢堡圖標(biāo)并非最佳菜單方案》
深入了解不同的導(dǎo)航模式：《交互基礎(chǔ)知識(shí)科普！帶你認(rèn)識(shí)最熱門(mén)的12種導(dǎo)航模式》

接下來(lái)，我們通過(guò)一系列的網(wǎng)頁(yè)設(shè)計(jì)，來(lái)深入了解Navicon和隱藏式菜單導(dǎo)航的魅力。

eWebDesign

大圖背景和視差強(qiáng)化了網(wǎng)站視覺(jué)，Navicon菜單按鈕在右上角，點(diǎn)擊打開(kāi)你會(huì)看到一個(gè)設(shè)計(jì)非常細(xì)致的導(dǎo)航菜單。

Sampedro

時(shí)尚的照片放置與網(wǎng)頁(yè)的頁(yè)頭，配合著時(shí)髦的Slogan吸引著用戶全部的吸引力。隱藏的導(dǎo)航欄是個(gè)理想的解決方案，它讓用戶將注意力從復(fù)雜的導(dǎo)航轉(zhuǎn)移到內(nèi)容上。

為什么傳統(tǒng)的標(biāo)注方法讓人難受？

沒(méi)錯(cuò)，Markman 是傳說(shuō)中的標(biāo)注神器，看起來(lái)也確實(shí)方便快捷，但是當(dāng)一個(gè)頁(yè)面中，要同時(shí)標(biāo)注間距、大小、顏色和字號(hào)時(shí)，過(guò)多的信息一齊扔給工程師，就會(huì)讓人有些抓狂。比如這樣：

編者按：今天@十萬(wàn)個(gè)為什麼 同學(xué)的譯文討論了當(dāng)下最熱門(mén)的11種設(shè)計(jì)模式，每種模式都有特別深入的講解以及對(duì)應(yīng)的APP范例，全是多年沉淀下來(lái)的通用型設(shè)計(jì)經(jīng)驗(yàn)，絕對(duì)是百里挑一的干貨。

任何移動(dòng)應(yīng)用，若沒(méi)有用戶起初和持續(xù)不斷的輸入，就什么也不會(huì)發(fā)生。因此，移動(dòng)產(chǎn)品設(shè)計(jì)師、開(kāi)發(fā)者和產(chǎn)品經(jīng)理要了解最佳的輸入方式，這點(diǎn)至關(guān)重要。盡管移動(dòng)應(yīng)用——還有使用它們的用戶——通常都很獨(dú)特，但仍有很多通用模式（新舊都有）用來(lái)解決這一特殊問(wèn)題。

移動(dòng)應(yīng)用的設(shè)計(jì)中，最容易被忽視的地方就是空白或者異常情況的設(shè)計(jì)。從傳統(tǒng)PC時(shí)代web的異常頁(yè)面如404，502等頁(yè)面的設(shè)計(jì)體驗(yàn)遷移過(guò)來(lái)，移動(dòng)應(yīng)用的空頁(yè)面，網(wǎng)絡(luò)故障頁(yè)面等展示也有相似的設(shè)計(jì)模式。從以前的純文本的排版設(shè)計(jì)，到后來(lái)404成為設(shè)計(jì)師們
展示圖形創(chuàng)意的舞臺(tái)，移動(dòng)應(yīng)用的空白情況頁(yè)面的設(shè)計(jì)也從純文本提示到后來(lái)精彩紛呈。然而在移動(dòng)應(yīng)用的設(shè)計(jì)中，空白頁(yè)面的的作用不僅僅在于給用戶以溫柔或者
精彩的提醒，安撫用戶焦急或是疑惑的情緒，更重要的是，空白情況頁(yè)面可以引導(dǎo)用戶去填補(bǔ)“空白”。人都是害怕空虛寂寞冷的，當(dāng)你面對(duì)一個(gè)空虛寂寞冷的頁(yè)面
的時(shí)候，善意的指點(diǎn)迷津的一些語(yǔ)言和畫(huà)面告訴你咱們還是可以有方法來(lái)填補(bǔ)你的寂寞空虛冷，這時(shí)候，用戶的操作行為就會(huì)被觸發(fā)，潛移默化中指引用戶完成填補(bǔ)
空白的工作，那么，無(wú)論從用戶個(gè)體的活躍度上還是整體的留存率，活躍度上，你設(shè)計(jì)的空白頁(yè)面做到了拉升的作用，對(duì)電商產(chǎn)品和社交產(chǎn)品等來(lái)說(shuō)，這些頁(yè)面可謂
是自己展示產(chǎn)品調(diào)性，曝光功能，加深引導(dǎo)的黃金地段。