
在(zai)過去的几年里,随着PC屏幕的加宽加大和(he)移動設備小屏的出現,網站設計風格也随之发生(sheng)了重大的轉變。在未來,追求更(geng)強的視覺(jue)感受、更細腻的用戶體驗,更前沿(yan)的技術應用(yong),將網(wang)站設計又推向(xiang)了一個新的高度。我們必须相信(xin),2015年全球設計會更(geng)倾向於用戶體驗,那麼就讓(rang)我們分(fen)享一下,未來那些具有满满创意(yi)和高端品(pin)位的網站設計趨勢吧。
1. 響應式布局(ju)將席卷各(ge)種互聯網

无论是傳統互聯網時(shi)代的桌面端應用,還是移動互聯網浪潮中的手(shou)機端革新(xin),抑或是当下(xia)正在加速推進的物聯網生態(tai)建設,用戶與数字内容的交(jiao)互都必然要(yao)通過某類硬件設備的屏幕進行信息呈現和展示。相比之下,網站技(ji)術相對於(yu)傳統软件或移動APP應用而(er)言,擁有一(yi)項天然(ran)的跨平臺優勢,即只要終端設備上预(yu)裝有浏覽器(qi)程序,用戶就能够直接(jie)打開並访問網頁内(nei)容,无需额(e)外安裝或繁琐的部署(shu)流程。
我們通過響(xiang)應式布局技術的應用,可以讓同一個網站根據用戶所使用設備的屏(ping)幕(mu)大小差异,灵活展示出(chu)相應的(de)不同布局方式和内容呈現方案,这種自適應的(de)設計理(li)念讓用戶在桌面、平(ping)板、手機等多終端設備上(shang)的交互體驗變得更加完(wan)美和流畅。
2. 充满整屏的震撼設計

實际上,从網頁設計(ji)的发展(zhan)趨勢來看,目前大多数的網站仍然采用在屏幕兩侧留(liu)少許空(kong)白的傳統網頁設計方式,这種(zhong)布局已成為行業的普遍做法。進(jin)入2015年以后,我們將看(kan)到更多的(de)網站會采用充满整屏的震撼設計理念,為浏覽者带來(lai)不一樣的視覺冲擊體驗(yan)。
3. 主导航點擊(ji)的(de)滚動翻頁,更注重(zhong)用戶體(ti)驗

随着移動互聯(lian)網的普(pu)及,用戶體驗更倾向於越“懒”越(yue)好。在(zai)移動(dong)設備上,滑屏上下滚(gun)動的浏覽方式更受用(yong)戶欢迎,而PC傳統的點擊鏈接打開頁面的方(fang)式(shi),也(ye)在逐步向(xiang)滚動翻頁的方式轉變。
在当前的(de)網站建(jian)設實践中,越(yue)來越多的方案正在从傳統的多頁面架構策劃逐步轉向單頁(ye)面长滚動的設計模式。在这種新(xin)的(de)交互方式下,用戶點擊頁面(mian)顶端的主导航(hang)時,不再會跳轉到全新的独立頁面(mian),而是通過上下滚屏的方(fang)式實現内容的(de)分段展示和翻頁切换。这樣的設計方法能够在初次(ci)访問時將整個網頁内容一次性加载(zai)完成,確保用戶(hu)在浏覽各個模块和信息段落時保持(chi)流畅的體驗,完全无需等(deng)待其他頁面的加载過程。
4. 高清大圖(tu)和視頻背景的應用,要大還是更大


設計師們最終選(xuan)擇了尊重人性的設(she)計理念。人類(lei)作為視覺敏感動物,这一生理特征決定了信息(xi)呈現的優先(xian)級。大(da)圖相(xiang)比小圖能够更加有效地吸引眼球,小(xiao)圖則比純文字更容易激发阅讀興(xing)趣,而这些静態内容的吸引力,远不及動態視頻所(suo)產生(sheng)的注意力效應。
从用戶體(ti)驗的(de)角度出发,現代網頁設計越來越多地采用高清大圖(tu)或視頻作為網頁背景(jing),辅以精煉簡洁的文字内容(rong)。这種(zhong)設計方式正在逐渐形成行(xing)業趨勢,成(cheng)為網站建設的主流選(xuan)擇。許多追(zhui)求完美視覺呈現(xian)的設計者,甚至不惜投入大量時間去搜尋由專業摄影師拍摄的真實(shi)高清圖片,作(zuo)為設計素材應用到網站(zhan)中。这種做法(fa)几乎已經成為他們吸引和抓住(zhu)浏覽者視覺注意力的核心策略和杀手锏。
5. 扁平化風格和個性鮮明的字體設計

这種(zhong)設計風格的(de)特點是:簡約大氣、易讀性強、網(wang)站體积小、打開速度快、浏覽更順畅。苹果从(cong)iOS6到iOS7的升(sheng)級,就打破了原先以界面(mian)裝飾和特效為主的設計風格,而推(tui)出了更注重可用性和用戶體驗的扁(bian)平化設計風格,随后windows8的诞生也采用了扁平化(hua)設計。在巨头們(men)的引领下(xia),这種設計(ji)趨勢很快風靡全球(qiu)。
在当(dang)代扁(bian)平化設計理念的具體應用中,個性(xing)鮮明的字體(ti)最能彰顯網站的大氣程度。設計(ji)師們會采用反色、高亮、更大的設計手法,去突出標題或重(zhong)要文(wen)字,讓浏覽者在視覺層級的清晰引(yin)导(dao)下,充分感受到簡約而(er)不簡單的網站設計理(li)念。
6. 一秒(miao)之内的内容载入動画
自(zi)从HTML5和CSS3技術面世(shi)之后,網頁設計(ji)领域迎來了技術革(ge)新。設計師們逐渐突破純(chun)静態網站設計的局限,開始尋求更加(jia)灵動的(de)視覺呈現方式。
在当(dang)代網頁設計實践中,設計(ji)趨勢已逐步(bu)轉向采用CSS3動画技術來處理(li)頁(ye)面内容的载入效果呈現。这類動(dong)画通常在1秒的(de)時間窗口内完成,能够為浏覽者创造一種高端的視覺體驗和品(pin)牌(pai)印象。CSS3技術本身支持硬件加(jia)速特(te)性,这一特(te)點使得動画過程在執行時顯得非常平滑(hua)流畅,避(bi)免了帧率波動的問題(ti)。
虽然一些低版本浏覽器(qi)並不支持CSS3,但在未來的更新换(huan)代中,似乎都(dou)不是問了。
如果你在初(chu)次访(fang)問時並未觀察到,可以尝試重(zhong)新刷(shua)新当前頁面,以便完整體(ti)驗頁面内容从左右兩侧依(yi)次飞入的動画效果演示。
7. 若隐若現的幽灵按钮

在数字(zi)化產品設計领域(yu)中,注重用戶體驗的(de)核心要素之一是(shi)強化用戶交互設計,而用戶點擊動(dong)作作為最常见的交互方式之一,直接(jie)影響用戶的操作流(liu)畅度。
这種(zhong)按钮(niu)並没有特別复雜的設計,但在實际應用中(zhong)一般會(hui)采用反色高亮效果,並設計為半透明状態,这即能讓按钮充分吸引用戶視線,又能很好的與(yu)頁面融為(wei)一體,形成視覺上的协調統一。当(dang)用戶(hu)鼠標滑過或點擊按钮時,通(tong)常還伴有若隐(yin)若現的背景色變幻,給人(ren)一種夢幻體驗。
8. 用一段講演式的設計(ji)與用戶互(hu)動

真正優秀的網站建(jian)設實践中(zhong),内容為王(wang)的理念始終占據核心(xin)地位。当代網站設計者們致力於將重點内容精準(zhun)浓縮至一幅静態圖像、一段簡洁動画,或結合交互元素形成具有講演特質的設計呈(cheng)現(xian),这已成為行(xing)業追求的发展方向。
当用戶在浏覽網(wang)站時,如果在鼠標悬停的瞬間能(neng)够触发注释弹窗的(de)動画效果,或者当鼠標移動到頁面特定區域時(shi)出現高亮渐變的(de)視覺動画,这樣的(de)交互設計往往能够給访問者带來惊讶(ya)感,讓用戶產生(sheng)深刻印(yin)象,