信息架構(gòu)與柵格系統(tǒng)

當(dāng)你查看任何卡片式設(shè)計的時候，你是無法忽視整個設(shè)計中貫穿始終的柵格系統(tǒng)。每一個卡片的邊緣都在整個設(shè)計中成為一套更大的柵格系統(tǒng)的一部分，他們在尺寸和間隙上保持著一致性與和諧性。

隨著移動互聯(lián)網(wǎng)的發(fā)展，我們越發(fā)要關(guān)注移動頁面的性能優(yōu)化，今天跟大家談?wù)勥@方面的事情。

首先，為什么要最移動頁面進(jìn)行優(yōu)化？

縱觀目前移動網(wǎng)絡(luò)的現(xiàn)狀：

當(dāng)瀏覽網(wǎng)站時，我們喜歡看頁面設(shè)計展示出干凈、清爽的對比。對比達(dá)到了一個重要的目的——它使內(nèi)容可讀，并毫不費(fèi)力地在頁面上指導(dǎo)用戶。這是一個最基本的設(shè)計概念，只是很奇怪，有些網(wǎng)站似乎就是不明白。

沒有足夠的對比度的話，不管是顏色或整體展示，一個網(wǎng)站看起來，在最好的情況下，也會讓你覺得有點(diǎn)兒丈二和尚摸不著頭腦，在最壞的情況下，將會使頁面完全不可讀。

來自 Medium 的設(shè)計師在這篇文章中預(yù)測了2016年最值得關(guān)注的設(shè)計趨勢，而老牌設(shè)計博客Designmodo 對此也有自己的看法。新的技術(shù)和新的設(shè)計趨勢會在2016年逐一涌現(xiàn)，但是總體上來說，它依然會沿著2015的大趨勢來逐步演變?？梢灶A(yù)見到的是，2016年會有更多的網(wǎng)站使用視頻背景，更多基于Material Design 風(fēng)格的界面設(shè)計，幻燈片式的界面切換也會繼續(xù)火熱下去。

Designmodo 對2016年預(yù)測的設(shè)計趨勢有11種，其中許多確實(shí)和Medium “所見略同”。兩相印證，應(yīng)該能讓你看的更明白。

今天我們來聊聊如何理性的進(jìn)行設(shè)計，談?wù)?/span>產(chǎn)品經(jīng)理和設(shè)計師在工作的過程中怎么樣把幾何學(xué)融入到作品中。幾何設(shè)計學(xué)的由來設(shè)計本來就是一種理性的科學(xué)門類，審美因人而異，只有言之有理的設(shè)計才能說服別人，運(yùn)用幾何學(xué)的手法就是設(shè)計師的利器之一，科學(xué)的設(shè)計并不會限制你的創(chuàng)意，它只會幫助你的作品成為精品的必要手段之一。

從古至今，人類從自然界中得到過無數(shù)的啟示，其中就包含黃金分割。這個從貝類完美的生長方式中提煉出的曲線，改變了所有人的審美。

今天我們來聊聊如何理性的進(jìn)行設(shè)計，談?wù)?/span>產(chǎn)品經(jīng)理和設(shè)計師在工作的過程中怎么樣把幾何學(xué)融入到作品中。幾何設(shè)計學(xué)的由來設(shè)計本來就是一種理性的科學(xué)門類，審美因人而異，只有言之有理的設(shè)計才能說服別人，運(yùn)用幾何學(xué)的手法就是設(shè)計師的利器之一，科學(xué)的設(shè)計并不會限制你的創(chuàng)意，它只會幫助你的作品成為精品的必要手段之一。

從古至今，人類從自然界中得到過無數(shù)的啟示，其中就包含黃金分割。這個從貝類完美的生長方式中提煉出的曲線，改變了所有人的審美。

在設(shè)計網(wǎng)站的時候，圖片資源會在很大程度上幫助你設(shè)置站點(diǎn)，以及顏色，排版或者更多內(nèi)容的基調(diào)。如果圖片視覺元素沒有和設(shè)計正確的結(jié)合，他很可能會破壞你原本想呈現(xiàn)的感覺。

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

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

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

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

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

eWebDesign

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

Sampedro

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

用圖像創(chuàng)造場景感，增強(qiáng)用戶的真實(shí)體驗(yàn)，近些年來，圖片作為背景填充整個屏幕的設(shè)計越來越廣泛，曾經(jīng)只有時尚潮流網(wǎng)站或者攝影類站點(diǎn)才會特別依賴富有沖擊力的圖像，但是現(xiàn)在幾乎任何類型的網(wǎng)站都有可能采用這種大圖片作為背景，特別是企業(yè)品牌宣傳、產(chǎn)品介紹等等。

在設(shè)計網(wǎng)頁過程中，需要用到大量的圖片，而且找到的圖片大多風(fēng)格迥異、無品牌感，那么如何找到合適而又能正確地應(yīng)用圖片呢？