在過去的幾年里,隨著PC屏幕的加寬加大和移動設(shè)備小屏的出現(xiàn),網(wǎng)站設(shè)計風格也隨之發(fā)生了重大的轉(zhuǎn)變。在未來,追求更強的視覺感受、更細膩的用戶體驗,更前沿的技術(shù)應(yīng)用,將網(wǎng)站設(shè)計又推向了一個新的高度。我們必須相信,2015年全球設(shè)計會更傾向于用戶體驗,那么就讓我們分享一下,未來那些具有滿滿創(chuàng)意和高端品位的網(wǎng)站設(shè)計趨勢吧。
1. 響應(yīng)式布局將席卷各種互聯(lián)網(wǎng)
不論是傳統(tǒng)互聯(lián)網(wǎng),還是移動互聯(lián)網(wǎng),甚至未來將會普及的物聯(lián)網(wǎng),都需要通過一個設(shè)備屏幕將信息展示給用戶,網(wǎng)站相對軟件或APP的一個好處就是可以輕松跨平臺應(yīng)用,只要設(shè)備上安裝有瀏覽器,用戶就可以打開網(wǎng)頁。那么,如何讓同一個網(wǎng)站可以在PC電腦、pad平板、手機、谷歌眼鏡、iWatch . . . 等各種設(shè)備的屏幕上完美展示呢?這就是響應(yīng)式布局席卷全球的原因了。
我們通過響應(yīng)式布局,可以讓同一個網(wǎng)站根據(jù)設(shè)備屏幕大小,展示出不同的布局方式,這讓用戶體驗變得更加完美。也許你認為響應(yīng)式布局還存在一些無法完全普及的原因,比如仍占有大量用戶的IE8并不支持響應(yīng)式,國內(nèi)的一些搜索引擎更傾向于PC和移動端分別建兩個不同的網(wǎng)站等。但無論如何,很快,這種布局方式將不再是趨勢,而是常態(tài)。
2. 充滿整屏的震撼設(shè)計
實際上,目前大多數(shù)的網(wǎng)站仍然采用在屏幕兩側(cè)留少許空白的網(wǎng)頁設(shè)計方式。在2015年,我們將看到更多的網(wǎng)站會采用充滿整屏的震撼設(shè)計,給瀏覽者帶來不一樣的視覺沖擊。當然,這樣的設(shè)計只有在大屏幕上瀏覽,才能感受到設(shè)計師們的功底。
3. 主導航點擊的滾動翻頁,更注重用戶體驗
隨著移動互聯(lián)網(wǎng)的普及,用戶體驗更傾向于越“懶”越好。在移動設(shè)備上,滑屏上下滾動的瀏覽方式更受用戶歡迎,而PC傳統(tǒng)的點擊鏈接打開頁面的方式,也在逐步向滾動翻頁的方式轉(zhuǎn)變。
實際上,越來越多網(wǎng)站建設(shè)方案正在從之前的多頁面策劃,向一個長頁面策劃的方式轉(zhuǎn)移,點擊頁面頂端的主導航也不再是跳轉(zhuǎn)到新頁面,而是上下滾屏進行翻頁。這樣的設(shè)計可以一次性將網(wǎng)頁加載完成,用戶在瀏覽過程中非常順暢,無需再等待其他頁面的加載。在這種設(shè)計思路中,設(shè)計師們還可以加入一些流暢的動畫特效,讓頁面滾動和內(nèi)容顯示更具視覺沖擊力。
4. 高清大圖和視頻背景的應(yīng)用,要大還是更大
設(shè)計師們終于還是遵從了人性的特點,人類是視覺敏感動物,不得不承認,大圖總是比小圖更吸引我們的眼球,小圖比文字更容易讓我們產(chǎn)生閱讀興趣,但這些卻都不如一段視頻更能引起我們的注意。
所以,從用戶體驗的角度出發(fā),使用高清大圖或視頻作為網(wǎng)頁背景,再輔之些許精煉文字的設(shè)計方式,也在逐漸形成趨勢。那些追求完美的設(shè)計者們,甚至不惜花時間去搜尋由專業(yè)攝影師拍攝的真實高清圖,來作為設(shè)計素材,這幾乎成為他們抓住瀏覽者視覺的殺手锏,這種美妙的設(shè)計是讓一個網(wǎng)站脫穎而出的最簡單的方式。
5. 扁平化風格和個性鮮明的字體設(shè)計
這種設(shè)計風格的特點是:簡約大氣、易讀性強、網(wǎng)站體積小、打開速度快、瀏覽更順暢。蘋果從iOS6到iOS7的升級,就打破了原先以界面裝飾和特效為主的設(shè)計風格,而推出了更注重可用性和用戶體驗的扁平化設(shè)計風格,隨后windows8的誕生也采用了扁平化設(shè)計。在巨頭們的引領(lǐng)下,這種設(shè)計趨勢很快風靡全球。
在扁平化設(shè)計中,個性鮮明的字體最能彰顯網(wǎng)站的大氣程度,設(shè)計師們會采用反色、高亮、更大的設(shè)計手法,去突出標題或重要文字,讓瀏覽者感受到簡約而不簡單的網(wǎng)站設(shè)計理念。
6. 一秒之內(nèi)的內(nèi)容載入動畫
自從HTML5和CSS3技術(shù)面世之后,設(shè)計師們就不再滿足于純靜態(tài)的網(wǎng)站設(shè)計了,當然他們也不喜歡在網(wǎng)頁上使用Flash這種重量級的動畫,因為影響頁面打開速度,且蘋果系統(tǒng)也不支持。
新的設(shè)計趨勢更傾向于使用CSS3動畫,來處理頁面內(nèi)容載入時的效果,這大概只需要1秒的時間,帶給瀏覽者一種高端的視覺體驗。CSS3技術(shù)可以支持硬件加速,這會讓動畫過程顯得非常平滑,它們往往會被設(shè)定只播放一次,以免在用戶翻屏瀏覽時給閱讀造成困擾。
雖然一些低版本瀏覽器并不支持CSS3,但在未來的更新?lián)Q代中,似乎都不是問了。
假如你之前沒有注意,你可以再刷新一下這個頁面,體驗下內(nèi)容從左右兩側(cè)飛入的動畫效果。
7. 若隱若現(xiàn)的幽靈按鈕
注重用戶體驗的要素之一是注重用戶交互,而用戶點擊動作是最常見的交互方式之一。為了吸引用戶點擊,并給他們一個完美的點擊過程體驗,幽靈按鈕成為了設(shè)計師們追捧的對象。
這種按鈕并沒有特別復雜的設(shè)計,但它一般會采用反色高亮效果,并設(shè)計為半透明狀態(tài),這即能讓按鈕吸引用戶視線,又能很好的與頁面融為一體。當用戶鼠標滑過或點擊按鈕時,通常還伴有若隱若現(xiàn)的背景色變幻,給人一種夢幻體驗。
8. 用一段講演式的設(shè)計與用戶互動
真正好的網(wǎng)站,無疑是內(nèi)容為王的,把這些重點內(nèi)容濃縮到一幅圖、一段小動畫中,形成一個講演式的設(shè)計,成為未來網(wǎng)站設(shè)計者們的追求,這的確可以有力的提升用戶體驗度。
如果再加入鼠標懸停時彈出注釋的動畫效果,或者鼠標移到頁面某個部分的高亮漸變動畫,就更能讓用戶做出驚訝的表情,這真是個酷炫的網(wǎng)站!
建站咨詢熱線
4006123011