理念處方箋04：設計，無邊界
時間：2023-09-17 12:06:01 | 來源：網(wǎng)站運營
時間：2023-09-17 12:06:01 來源：網(wǎng)站運營
理念處方箋04：設計，無邊界：
產(chǎn)品經(jīng)理：“超大屏的1920分辨率寬度用戶在逐漸上長，是時候消除設計邊界，讓網(wǎng)站擁有更大視野的設計了。”
設計師：“但當前主流頁面通常將內(nèi)容設置在1000像素寬度以內(nèi)，這是規(guī)則啊！”
UI新手在剛入行時首先會被告知的潛規(guī)則就是，頁面內(nèi)容一定要設計在800或1000像素寬度以內(nèi)，這個規(guī)則并沒有錯誤。但近幾年，隨著硬件和網(wǎng)絡的發(fā)展，網(wǎng)頁顯示的終端設備也在發(fā)生著快速的變化，移動端從方寸指間的手機到單手難持的iPad Pro，電腦端從寬屏到超寬屏。如果網(wǎng)頁設計仍固守著1000像素寬度的話，也就相當于放棄其它終端用戶的視覺美感。所以，寬屏大視野作為未來的一種趨勢是毋庸置疑的。
現(xiàn)代生活節(jié)奏的加快讓我們進入了讀圖時代，長篇累牘的文字讓人厭倦，需要圖片不斷刺激我們的眼球，于是各種各樣的圖鋪天蓋地地一般呈現(xiàn)在眼前。借鑒雜志的版式設計，網(wǎng)頁也開始使用高質(zhì)量的、高精度的圖片，能快速抓住人們的眼球，形成強大的視覺沖擊力，自然也為用戶創(chuàng)造生動的沉浸式體驗。這種從雜志排版衍生出的寬屏大視野給我展示了簡約卻有力的強視覺，開拓了設計思路，下面結合我自己的網(wǎng)站項目來具體分析。
從視頻網(wǎng)站的首頁就可以發(fā)現(xiàn)，頁面將標題欄、導航條、廣告位、推薦內(nèi)容等設置在1000像素寬度以內(nèi)，背景選擇白底平鋪，但在banner位的視覺設計上打通了1000像素圍墻，充分延展了1000像素以外的標準空間，達到1920像素的寬屏。另外，banner位的至多五張頁面內(nèi)容輪播的導航，也讓首頁的展示效果更加開闊豐滿。（見圖8）
另外，為了讓寬屏針對不同分辨率進行全畫幅自適應，采取了大圖平鋪自適應的視覺模式，整個視覺主打一張大而精美的背景圖，最明顯的好處便是具備極強的視覺沖擊力，尤其對于那些“情緒化用戶”，可以有效地引導視線，更能為其創(chuàng)造一個身臨其境的體驗。另外，導航等內(nèi)容設置雖被限定在1000像素寬度以內(nèi)，但通過瀑布流的呈現(xiàn)方式，能同時滿足大小屏用戶的功能使用，達到視覺和信息的雙豐收。最后，頁面頂部的交互按鈕和底部的可鏈接文字信息根據(jù)屏幕的寬度始終保持在1000像素以內(nèi)，頁面的純底背景可以根據(jù)屏寬自適應，1920和1024像素視覺效果展示效果如圖9所示。
在線咨詢