具有實(shí)驗(yàn)精神的設(shè)計(jì)師們遇到的一個問題是追求網(wǎng)頁的獨(dú)特與新奇時犧牲了用戶體驗(yàn)磨确。我們可以努力的方向就是找到兩者之間的平衡點(diǎn)。
標(biāo)準(zhǔn)化的和可預(yù)見的設(shè)計(jì)總有其一席之地。事實(shí)上敛熬，這類網(wǎng)頁是大部分內(nèi)容類網(wǎng)頁在各類終端屏幕上展現(xiàn)的最可能的解決方案垛膝。即便如此鳍侣，我們?nèi)匀粦?yīng)該不時地發(fā)揮創(chuàng)意思維打破規(guī)則，因?yàn)榫W(wǎng)頁設(shè)計(jì)從來就是科技吼拥、藝術(shù)與設(shè)計(jì)交叉融合的領(lǐng)域倚聚。
阿里媽媽MUX2015-07-12
響應(yīng)式設(shè)計(jì)讓網(wǎng)頁設(shè)計(jì)失去靈魂了嗎？我們能否既讓網(wǎng)頁是響應(yīng)式的凿可，同時又擁有靈魂惑折？
· 我們得到的
柵格系統(tǒng)、流動布局成為標(biāo)配給我們帶來了很多好處：
1枯跑、用戶在使用網(wǎng)頁時感到熟悉惨驶、輕松；
2敛助、制作原型（相對）快速粗卜、簡便；
3纳击、建站技術(shù)的高度標(biāo)準(zhǔn)化续扔；
4、快速的布局可以節(jié)約成本焕数；
5纱昧、嚴(yán)格的網(wǎng)格布局促成了響應(yīng)式設(shè)計(jì)；
這些標(biāo)準(zhǔn)化和組合技術(shù)帶來了巨大的價值堡赔，無數(shù)的個人和小企業(yè)使用這樣簡單砌些、吸引人（但不獨(dú)特）的網(wǎng)頁設(shè)計(jì)與世界分享他們的
品牌并從中獲益，然而這只是故事的一個方面加匈。
· 我們失去的
這些設(shè)計(jì)都開始變得如此相似存璃。
· 網(wǎng)頁設(shè)計(jì)雷同的原因
1. 版式布局（LAYOUT）
版式布局的局限性是網(wǎng)頁設(shè)計(jì)缺乏變化最突出與明顯的的原因之一。去除顏色雕拼，動畫纵东，視差滾動等等這類效果，你會看到一些基本布局統(tǒng)治了網(wǎng)頁設(shè)計(jì)啥寇。
2. 響應(yīng)式設(shè)計(jì)（RESPONSIVE WEB DESIGN）
終端設(shè)備變多導(dǎo)致網(wǎng)頁設(shè)計(jì)必須保證跨設(shè)備的用戶體驗(yàn)良好偎球。
基礎(chǔ)的洒扎、可變寬、可折疊柵格系統(tǒng)使響應(yīng)式網(wǎng)頁的設(shè)計(jì)過程更簡單（相比版式設(shè)計(jì)更靈活的網(wǎng)頁）從而解決跨設(shè)備問題衰絮。
3. 框架( FRAMEWORKS?)
Bootstrap與Foundation的流行導(dǎo)致許多設(shè)計(jì)師直接套用一模一樣的代碼庫袍冷、布局、甚至風(fēng)格猫牡。
4. 制作原型的工具與過程( PROTOTYPING TOOLS AND PROCESSES?)
多數(shù)原型制作工具鼓勵甚至迫使你使用標(biāo)準(zhǔn)的符合網(wǎng)格布局的方方正正的元素胡诗。
5. 高質(zhì)量的免費(fèi)照片與圖像(HIGH-QUALITY FREE PHOTOS AND GRAPHICS)
免費(fèi)好用的圖片庫成了設(shè)計(jì)師可以輕松獲得的資源，還有圖標(biāo)淌友、字體煌恢、樣式等等。
6. 設(shè)計(jì)趨勢(DESIGN TRENDS)
設(shè)計(jì)師的所見所聞影響了他們的設(shè)計(jì)震庭，網(wǎng)頁設(shè)計(jì)將這一點(diǎn)充分放大了瑰抵。結(jié)果就是許多設(shè)計(jì)師從同樣的網(wǎng)站獲得靈感，追趕同樣的潮流器联。
7. 你和我
上面所列的工具和資源都是很有價值的二汛，關(guān)鍵在于我們使用的方式。
· 如何挑戰(zhàn)現(xiàn)狀 - 一些例子
1. 讓布局變得奇怪
Phases Magazine：http://www.phasesmag.com
Phases Magazine的版式設(shè)計(jì)不同尋常拨拓，如果你覺得這樣的設(shè)計(jì)很奇怪习贫，那正是這個網(wǎng)站設(shè)計(jì)者想要達(dá)到的效果，與眾不同千元。
Curious Space：http://www.curiousspace.com
Curious
Space的想法與Phases
Magazine差不多苫昌，網(wǎng)站的滾動和斷點(diǎn)設(shè)置合理，體驗(yàn)良好幸海，同時在交互的過程中有一些小驚喜祟身，比如鼠標(biāo)hover住的圖片會被置于頂層，logo的字母部分會隨著滾動改變位置物独，最終變?yōu)檎R的兩行文字袜硫，自然地變成導(dǎo)航欄的logo。
Le Temps Dun Trajet：http://letempsduntrajet.fr/
這個網(wǎng)站也是一個有趣的例子挡篓，它沒有采用標(biāo)準(zhǔn)網(wǎng)格婉陷，但是排布沒有讓人感覺到分散，而有一種有意識的安排官研。
當(dāng)鼠標(biāo)hover到一張靜態(tài)圖片時秽澳，圖片會變成一小段影片并放大，整個版式也會發(fā)生有趣的變化戏羽。(去網(wǎng)站實(shí)際體驗(yàn)一下~)
2. 不使用方塊元素
Built By Buffalo：http://builtbybuffalo.com
Built By Buffalo是一個個人作品集網(wǎng)頁担神，在寬屏下設(shè)計(jì)師使用六邊形代替了方塊元素，而在窄屏下才使用方塊元素始花。
Anakin Design Studio：http://www.anakin.co/en
巨大的蒙版字設(shè)計(jì)大膽, 令人印象深刻妄讯，在對作品的展示部分也沒有選擇簡單的方塊縮略圖孩锡，而是在縮略圖中使用留白造成形狀的變化。
Fixate：http://fixate.it
For Better Coffee :http://forbetter.coffee
這兩個網(wǎng)頁使用了看似復(fù)雜的插畫元素亥贸，這些插畫元素與極簡化的趨勢形成了鮮明的對比躬窜，給品牌帶來了獨(dú)特的個性。
For Better Coffee以一顆咖啡豆變成一杯咖啡的歷程將整個滾動下拉貫穿起來炕置。
Happy Fun Corp :http://happyfuncorp.com
HappyFunCorp網(wǎng)頁的導(dǎo)航是由一整個首頁插畫形成的荣挨，看上去有點(diǎn)古怪。用戶點(diǎn)擊游樂場的一個部分時讹俊，那部分場景就會放大。
3. 不同的體驗(yàn)
Vasilis Van Gemert?:http://vasilis.nl
Vasilis Van Gemert的個人網(wǎng)頁讓每個菜單相互看上去重疊煌抒，并且每次進(jìn)入網(wǎng)頁時色彩主題都會不同仍劈，主要二級頁面也是一樣。
4. 創(chuàng)建一個獨(dú)特的視覺主題
另一個讓網(wǎng)頁看上去獨(dú)特的方法就是為整個頁面設(shè)定一個有趣的主題寡壮，制定了這個框架就可以跳出傳統(tǒng)的UI樣式贩疙。
當(dāng)然，這類設(shè)計(jì)并不適合所有類型的網(wǎng)頁况既；但是这溅，對于活動宣傳與小公司的網(wǎng)頁是行之有效的。
這個網(wǎng)頁采用了復(fù)古的未來主義風(fēng)格棒仍，它很好的證明了響應(yīng)式設(shè)計(jì)可以不那么平淡悲靴。
· 風(fēng)格獨(dú)特的網(wǎng)頁的問題
具有實(shí)驗(yàn)精神的設(shè)計(jì)師們遇到的一個問題是追求網(wǎng)頁的獨(dú)特與新奇時犧牲了用戶體驗(yàn)。我們可以努力的方向就是找到兩者之間的平衡點(diǎn)莫其。
· 網(wǎng)頁設(shè)計(jì)不死
標(biāo)準(zhǔn)化的和可預(yù)見的設(shè)計(jì)總有其一席之地癞尚。事實(shí)上，這類網(wǎng)頁是大部分內(nèi)容類網(wǎng)頁在各類終端屏幕上展現(xiàn)的最可能的解決方案乱陡。
即便如此浇揩，我們?nèi)匀粦?yīng)該不時地發(fā)揮創(chuàng)意思維打破規(guī)則，因?yàn)榫W(wǎng)頁設(shè)計(jì)從來就是科技憨颠、藝術(shù)與設(shè)計(jì)交叉融合的領(lǐng)域胳徽。
