在這篇概述中,將帶你逐一回顧每個趨勢和漂亮的案例,他們將激發你在下個專案中的靈感。
1、出格佈局
圖1
2、單頁佈局
圖2
3、多欄佈局
圖3
4、巨型插圖和充滿活力的圖形
圖4
5、比以往更多的留白
圖5
6、社會設計元素
圖6
7、對話式導航
圖7
8、動態的tab
圖8
9、大搜尋框
圖9
10、為分類增加視覺效果
圖10
11、作者頭像
圖11
12、圖示與視覺提示
圖12
13、tag索引(替代tag雲)
圖13
14、在blog中使用插圖
圖14
15、水彩畫
圖15
16、手寫體
圖16
17、復古
圖17
18、用有機材質、磚瓦和攝影作品做背景
圖18
19、標記印章
圖19
20、價簽
圖20
21、絲帶
圖21
出格佈局
正如在幾個月前所做的40個創新設計佈局:出格佈局的展示那樣,我們正在觀察一種向更具個性和創新性佈局發展的強大趨勢。與使用傳統四四方方的盒狀佈局不同,設計師們正在嘗試新的訊息結構、呈現和表達方式。
在這些出格版面設計中,整體創意往往比具體內容更重要,也更令人難忘。儘管如此,可用性、版面和視覺設計也很少被忽視,並被謹慎地執行。創新佈局在大專案、網站設計機構和宣傳網站(如大公司的商業活動)中特別流行,但它也同樣流行於blog。
圖22
提到創意,可用和不可用設計之間的界限就非常模糊了;因此,可用性測試就顯得尤為重要,因為一項新的創意能打破網站故有的東西。通常,折中考慮創意、經典和傳統設計是一個不錯的主意,也就是說要設法去取得一個「堅不可摧」(甚至最終很單調)的可用設計與一個有創意但不可用設計之間的平衡。記住,創意需要時間來成長:重新思考、修改、調整、最佳化,最終整合到你的設計當中。
我們強烈鼓勵設計師打破傳統盒狀佈局的慣例,嘗試新方式和你大膽瘋狂的想法。施展你的才華吧!
圖23
圖24
圖25
圖26
圖27
圖28
單頁佈局
另一種設計師經常使用的、給訪客留下深刻印象的方式,就是所謂的單頁佈局:這種佈局使用一個單獨的頁面來呈現網站的內容。它不一定意味著這些設計就是極簡的(遵循「少即是多」原則)。而剛好相反,這種設計往往十分複雜,它包含了豐富的圖像和生動的動畫效果,因此需要加載一段時間。
圖32
當使用者點選了一個導覽選項,頁面隨之改變(部分變化),http://www.knowsky.com新的內容就出現在了顯示先前內容的區域。這種佈局中導航滑動和滾動的效果,由公共JavaScript庫來支援。
對使用者來說最主要的優勢來自於一個簡單的事實,即透過更少的滑鼠移動和點擊,來獲得使用者想要的資訊。由於這個方法非常新,對那些使用非傳統導航就會感到困惑的用戶來說是個好機會。有些種情況下,一個「靜態」版本可能會派上用場,甚至是必要的;例如你將不得不為搜尋引擎,和禁用了JavaScript的用戶提供另一個版本。
圖33
圖34
圖35
多欄佈局
多欄(3欄以上)不一定就是複雜的設計。從反面看,如果設計得當,多欄對訪客會十分有幫助,因為它們為可見的導航選項提供了更好的綜覽,從而使得用戶可以快速地找到他們想要的資訊。
過去幾年裡,我們見證了網站內容的爆炸,這降低了用戶在網站上所投入的注意力和時間(詳情查看ReadWriteWeb)。所以,難怪設計師們都開始嘗試尋找更簡潔的資訊呈現方式,既能讓訪客在網站上停留的時間盡可能的長,又能更簡單的找到內容。
圖36
實現此目的的方法之一,就是使用多欄相鄰的佈局。這個想法十分合理。螢幕解析度在最近幾年裡不斷增加(然而,像華碩Eee PC這樣的上網本得以廣泛使用的話,情況可能會有所改變),從而可以為用戶提供更多橫向空間,也能給設計師提供額外空間去填滿內容。
結果顯示:現在越來越多的設計師,採用越來越多的欄位在設計中。我們研究發現有向這些所謂多欄佈局發展的強大趨勢,通常在1000像素的螢幕中,寬度固定為850像素。多欄常被用在雜誌版面和大項目。在這些佈局裡,柵格常被用來確保結構平衡、層級和次序。
使用多欄佈局,主動留白以及各自內部欄之間的重要性不能被誇大。 (主動留白是故意留出空白,以便更好地表現頁面結構,強調內容的不同區域。)
為此,設計師常利用「Shneiderman的真言」(「先表達大局,隨後顯示細節」),先提供使用者一個功能概況,然後按需提供細節-稍後,當某個連結被點擊時(Mozilla Labs就是個最好的例子)。
圖37
圖38
圖39
圖29
圖30
圖31