2015年網(wǎng)站設(shè)計趨勢全預(yù)測
發(fā)布者:東郡網(wǎng)絡(luò) 時間:2015-01-10 15:49:42每年,網(wǎng)站設(shè)計都在快速進(jìn)步,每天幾乎都有新的設(shè)計出現(xiàn)。我可以想象得到,2015年將出現(xiàn)最好的網(wǎng)站,包括2014年已經(jīng)預(yù)測到的許多趨勢。隨著這些趨勢在2015年左右實(shí)現(xiàn),現(xiàn)在該是時候讓我們預(yù)測2015年可能出現(xiàn)的新趨勢了。
網(wǎng)頁設(shè)計趨勢的探討主要會在排版布局、色彩搭配、用戶體驗(yàn)和設(shè)計風(fēng)格中進(jìn)行。2014年設(shè)計趨勢的綜合指數(shù)比較高,每個部分都會有所涉及;而隨著用戶對網(wǎng)站使用體驗(yàn)的要求越來越“嚴(yán)苛”,我們有理由相信,2015年的重心會更傾向于“用戶體驗(yàn)”。
我們先分析一下明年會有哪些新趨勢,以及去年的哪些設(shè)計趨勢會得到延續(xù)和升華。
一、滾動翻頁更流行
今天出現(xiàn)的大多數(shù)新網(wǎng)站傾向于更長的頁面,并通過滾動方式翻頁。隨著移動設(shè)備越來越受歡迎,以滾動方式瀏覽顯示器上的內(nèi)容變得越來越常見,正代替點(diǎn)擊方式,特別是在設(shè)備的主頁面上。對于用戶來說,以滾動翻頁的方式獲得信息顯然比不斷地點(diǎn)擊按鈕更簡單。
主頁并非滾動翻頁越來越流行的唯一地方。隨著超長滾動網(wǎng)站(即一頁式網(wǎng)站)日益變得熱門,滾動帶來的好處也更多,除主頁面外的其他許多地方也開始出現(xiàn)這種模 式,比如有關(guān)網(wǎng)頁以及產(chǎn)品網(wǎng)頁等,它們都已成為展示各種內(nèi)容的簡單顯示方式。比如,蘋果iPhone 6的滾動翻頁方式已經(jīng)擴(kuò)展到許多地方,可以展示該產(chǎn) 品各種特點(diǎn)和性能。此外,iPhone 6網(wǎng)站也增加了一些流暢的動畫,讓滾動體驗(yàn)在視覺上變得更具吸引力。
二、講故事+互動
對于網(wǎng)站來說,擁有令人感到驚異的內(nèi)容總是非常關(guān)鍵,而利用這些內(nèi)容講故事更是一大優(yōu)勢。2015年的網(wǎng)站設(shè)計很可能聚 焦于如何為用戶講故事。比如,Space Needle(美國西雅圖地標(biāo)建筑太空針?biāo)?的網(wǎng)站非常漂亮,可以通過使用講故事的方式介紹 Space Needle的有關(guān)事實(shí),并以滾動翻頁的設(shè)計予以支持。Space Needle也證明2015年的另一種趨勢——互動。網(wǎng)站設(shè)計正添加更多 互動和動畫元素,以獨(dú)特和有吸引力的方式幫助介紹內(nèi)容。在網(wǎng)站設(shè)計中加入互動與動畫,可以為你的網(wǎng)站帶來令人驚訝的因素。比 如,Impossible Bureau網(wǎng)站的互動性就很強(qiáng),可以對你的滾動和懸停做出回應(yīng)。
三、大標(biāo)題背景圖像缺失
過去幾年中,網(wǎng)站設(shè)計中十分流行大標(biāo)題背景圖像,上面經(jīng)常有文字說明,這也是大多數(shù)訪客瀏覽網(wǎng)站時首先看到的東 西。而在大標(biāo)題背景圖像如此流行的情況下,你的網(wǎng)站如何能脫穎而出呢?采取相反措施。近來出現(xiàn)的一些網(wǎng)站逆勢而行,即沒有大標(biāo)題背景圖像。我猜,他們這樣 做不僅僅是不愿意追隨潮流,而且也在尋求提高網(wǎng)站的性能與速度。New Wave Company的網(wǎng)站就體現(xiàn)出這些特點(diǎn)。它使用大標(biāo)題歡迎訪客,大字體 集中在網(wǎng)頁中心,但標(biāo)題后面沒有大背景圖片。這是一種高雅的做法,效果并不次于其他使用大背景圖像的流行網(wǎng)站設(shè)計。
四、剔除非必要設(shè)計元素
有一種設(shè)計觀念認(rèn)為,當(dāng)所有非必要元素都被剔除后,網(wǎng)站設(shè)計才算完成。2015年,我認(rèn)為我們能夠看到這種觀念更 好地體現(xiàn)出來,因?yàn)楦嗑W(wǎng)站都在試圖通過剔除非必要設(shè)計元素實(shí)現(xiàn)網(wǎng)站設(shè)計的簡化。New Wave Company網(wǎng)站中剔除大背景圖像的做法就是最好例 證之一。另一個剔除非必要設(shè)計元素確保網(wǎng)站簡潔的最佳例證是Rareview Digital Agency網(wǎng)站,它也沒有使用大背景圖像標(biāo)題問候訪客。 設(shè)計師們實(shí)際上已經(jīng)消除了許多當(dāng)前網(wǎng)站上流行的設(shè)計元素,比如背景顏色、眾多圖片以及復(fù)雜布局等。相反,他們選擇更清晰、簡潔的網(wǎng)站設(shè)計,在注重設(shè)計、圖 片以及顏色的當(dāng)前網(wǎng)站中,這些設(shè)計不禁令人眼前一亮。
五、固定寬度的中心網(wǎng)站布局
過去幾年中,大多數(shù)網(wǎng)站都使用了以寬度為中心的網(wǎng)站布局,它可以讓圖片或視覺延伸部分在整個瀏覽器視口中全部 展現(xiàn)出來。在這種趨勢熱門前,大多數(shù)網(wǎng)站都是固定寬度的,內(nèi)容處于網(wǎng)頁中心,你可以看到網(wǎng)站兩側(cè)的終結(jié)部分。固定寬度趨勢似乎正以更現(xiàn)代的方式回歸,只是 網(wǎng)站及其內(nèi)容部分不再處于視口的邊側(cè),有些網(wǎng)站選擇最大寬度,以確保它們的內(nèi)容處于視口中心。Michele Mazzucco的網(wǎng)站就是如此。
六、專業(yè)高質(zhì)量自定義攝影
圖庫照片依然在設(shè)計中占有一席之地,但是對于大多數(shù)最新出現(xiàn)的網(wǎng)站來說,圖庫照片開始采取高質(zhì)量的專業(yè)攝影照 片,它們通常是獨(dú)一無二的,專為網(wǎng)站自定義拍攝的。使用自定義攝影比僅選區(qū)圖庫照片在設(shè)計方面取得了更大進(jìn)步,它讓你的網(wǎng)站獨(dú)一無二,其他網(wǎng)站無法使用同 樣的照片。比如,Grain and Mortar網(wǎng)站的自定義照片使用了該網(wǎng)站的大標(biāo)題,這展現(xiàn)出個性化效果,因?yàn)檎掌系娜撕娃k公場景都是在 Grain and Mortar真實(shí)存在的,畢竟沒有假辦公空間的圖庫照片!
七、彈出/滑出應(yīng)用式菜單
響應(yīng)式網(wǎng)站設(shè)計已經(jīng)流行了一段時間,可是直到近來,大多數(shù)網(wǎng)站設(shè)計重點(diǎn)都放在令網(wǎng)站在桌面設(shè)備上看起來更好,而 在手機(jī)或平板設(shè)備上看得過去即可。無論何種設(shè)備,響應(yīng)式網(wǎng)站設(shè)計正邁向更好體驗(yàn)。我們正看到這種設(shè)計元素向移動設(shè)備上轉(zhuǎn)移,并在更廣泛地使用。比如 24ways與Rawnet都展示了這種觀念,將類似應(yīng)用和響應(yīng)式菜單添加到整個網(wǎng)站中,而不僅僅有更小視口的設(shè)備上。在這種情況下,這兩家網(wǎng)站選擇靠左 或靠右的垂直菜單,而不是位于頂部的水平菜單,使用起來更像彈出/滑出應(yīng)用式菜單,這種技術(shù)允許網(wǎng)站應(yīng)用與響應(yīng)式設(shè)計出現(xiàn)在更小的視口上。
八、隱藏主菜單
這與上面討論過的彈出/滑出應(yīng)用式菜單很像,我期待更多網(wǎng)站可能向首次訪問網(wǎng)站的訪客隱藏主菜單。只有當(dāng)訪客準(zhǔn)備移動和點(diǎn) 擊相應(yīng)圖標(biāo)后,這些隱藏菜單才會顯示出來。這種響應(yīng)式設(shè)計技術(shù)正開始出現(xiàn)在網(wǎng)站設(shè)計中,而非僅僅小的視口中。Brian Hoff Design的新網(wǎng)站 就是最好的例子。他使用網(wǎng)站右上角的漢堡圖標(biāo)隱藏導(dǎo)航功能,直到訪客點(diǎn)擊它。過去2年,這種行為已經(jīng)逐漸被接受,訪客正習(xí)慣在網(wǎng)站應(yīng)用或手機(jī)應(yīng)用上如此操 作。他將這種模式應(yīng)用到網(wǎng)站上,無論視口多大,都可幫助確保網(wǎng)站簡介,功能完全。
九、強(qiáng)調(diào)性字體的排版設(shè)計
簡單的字體設(shè)計卻牽動著整個網(wǎng)頁的氛圍。預(yù)計近幾年,極簡風(fēng)格的網(wǎng)站設(shè)計會成為主流,因此網(wǎng)頁中文字內(nèi)容的數(shù)量也會相應(yīng)的減少,所展現(xiàn)的文字都是相對比較重要的內(nèi)容,而粗大的字體無疑是突出重點(diǎn)的最佳格式。不僅如此,強(qiáng)調(diào)性的字體設(shè)計結(jié)合大圖片背景能營造出雜志風(fēng)格的網(wǎng)頁設(shè)計,讓網(wǎng)站更加隨性自然。
十、非常大的字體
2014年,字體在許多網(wǎng)站設(shè)計中發(fā)揮重要作用,我未發(fā)現(xiàn)這種趨勢在短期內(nèi)改變的跡象??墒?015年,我看到網(wǎng)站中的 標(biāo)題和字體變得越來越大??鋸埖卣f,就連天上的飛機(jī)可能都能看到地面上的字。當(dāng)你訪問Tiny Giant的網(wǎng)站時,你會看到很大的字體。這實(shí)際上是一種 聲明,讓你很難錯過。大字體將繼續(xù)在2015年的網(wǎng)站設(shè)計中發(fā)揮重要作用,成為確保提高訪客視覺層次的方法。訪客首先會看到最大的字體,因?yàn)槟菚紫任?你的注意力。
十一、停不下來的頁面自適應(yīng)(響應(yīng)式)
如今移動端的用戶數(shù)量足以證明頁面自適應(yīng)的重要性,隨著各種智能化設(shè)備繼續(xù)不斷興起,自適應(yīng)更將成為設(shè)計師們需要研究的課題。和過去相比,響應(yīng)式網(wǎng)頁不僅要在未來適應(yīng)更多不同的分辨率,也要同時關(guān)注內(nèi)容流、斷點(diǎn)、相對單位,以及套嵌對象等內(nèi)容的設(shè)計,讓用戶真正享受到自適應(yīng)帶來的舒適感。
十二、卡片式設(shè)計
設(shè)計的內(nèi)在魅力被挖掘的越來越深入,網(wǎng)頁的邏輯條理關(guān)系也因此受到了大家的關(guān)注,卡片式設(shè)計就此崛起!
關(guān)于卡片式設(shè)計,也許最簡單的解釋就是一張撲克牌。一個圖案、一個文字,雖然內(nèi)容并不多,但能很清楚的表達(dá)出這張卡片的含義。不僅如此,設(shè)計師還應(yīng)該在此基礎(chǔ)上為用戶提供交互的機(jī)會,因?yàn)榭ㄆ皆O(shè)計反饋的不只是一條有價值的資訊,更需要讓用戶融入其中做更多的事。
十三、扁平化不再是風(fēng)格,而是一種手法
最值得一提的是2014年如火如荼的扁平化設(shè)計!
扁平化設(shè)計在近幾年的勢頭不言而喻,就連WIN8刮起的Metro風(fēng)也加入了以色塊為主的扁平效果。扁平化設(shè)計是指無論是色塊、圖片,又或是布局表現(xiàn)都去掉了陰影、漸變等擬物化元素,這樣的設(shè)計理念很符合時下的設(shè)計風(fēng)尚,將扁平化用到極致依然不失為一種非常好的設(shè)計。
但是,我們絕不能為了扁平化而扁平化!如果加個內(nèi)陰影就能讓網(wǎng)頁更有立體感和豐富飽滿,那我們?yōu)槭裁床贿@樣做呢?正如蘋果公司一直堅決推崇的:提煉一款偉大產(chǎn)品設(shè)計直至最干凈簡潔的狀態(tài),而并非定格它“必須的”風(fēng)格走向。
未來的扁平化運(yùn)用更傾向于是一種表現(xiàn)手法,比如你的設(shè)計可以是小清新風(fēng)格,也可以是歐美風(fēng)格,但這并不妨礙其中都使用了扁平化的手法。絕對的扁平化除了一些軟件級產(chǎn)品或是主打扁平化設(shè)計的作品之外,可能更適合作為提高設(shè)計水準(zhǔn)的工具。
十四、性能與速度
許多設(shè)計趨勢受需求驅(qū)動,以促使網(wǎng)站加載速度更快,消耗的寬帶流量更少。這篇文章中討論的大多數(shù)趨勢都可能需要減小網(wǎng)站, 為那些手機(jī)、平板設(shè)備或更慢網(wǎng)絡(luò)用戶尋找更快加載方式。網(wǎng)站設(shè)計師和開發(fā)者越來越強(qiáng)烈地意識到自己網(wǎng)站的權(quán)重,以及用戶如何與他們互動。響應(yīng)式網(wǎng)站設(shè)計已 經(jīng)幫助減輕這些擔(dān)憂。網(wǎng)速過慢以及設(shè)備類型等因素迫使設(shè)計師和開發(fā)者密切關(guān)注它們的文件和網(wǎng)站大小,網(wǎng)站加載速度在不同網(wǎng)速條件下也不盡相同。無需驚 訝,2015年需要加載速度更快、沒有滯后感的無縫網(wǎng)站。
十五、更優(yōu)雅的個性化微交互
首先說明一下關(guān)于“個性化”的理解。很多網(wǎng)站的通病是把當(dāng)下流行的元素和技術(shù),在不顧及實(shí)際體驗(yàn)的情況下統(tǒng)統(tǒng)搬到自己的網(wǎng)站上,一味的追求自認(rèn)的“個性化”設(shè)計方式,像這樣的外貌協(xié)會行為明顯已經(jīng)不符合如今的網(wǎng)頁設(shè)計趨勢了。
在未來的網(wǎng)頁設(shè)計領(lǐng)域,我們需要的是一種更優(yōu)雅的微交互反應(yīng)方式。比如鼠標(biāo)懸停時產(chǎn)生效果、便于快速訪問的隱藏導(dǎo)航,以及注冊頁面的彈出框等,這些小細(xì)節(jié)的設(shè)計看起來很不起眼,但能在用戶心里留下深刻的印象。
本信息來源于:東郡網(wǎng)絡(luò)
-
2020| 東郡網(wǎng)絡(luò)中秋、國慶放假通知
2020-09-30 -
開放的互聯(lián)網(wǎng)什么最重要——信任
2020-09-05 -
網(wǎng)站設(shè)計中如何逐塊實(shí)現(xiàn)網(wǎng)站布局?
2020-07-14 -
5G標(biāo)準(zhǔn)走向了各行各業(yè),將催生出新的數(shù)字生態(tài)產(chǎn)
2020-07-08 -
建黨99周年|永遠(yuǎn)跟黨走 奮斗新時代
2020-07-02 -
睿志集團(tuán)|十堰東郡網(wǎng)絡(luò)放假通知
2020-06-23 -
企業(yè)復(fù)工復(fù)產(chǎn)建議你安排做這幾點(diǎn)
2020-03-20 -
最新消息!十堰東郡網(wǎng)絡(luò)今天終于復(fù)工啦!
2020-03-18 -
2020年春節(jié)放假通知
2020-01-20 -
十堰東郡網(wǎng)絡(luò)中秋節(jié)放假通知
2019-09-12