有了會員網(wǎng)站，人們希望看到滿足自己需求的內(nèi)容。根據(jù)用戶之前的選擇，Netflix擁有優(yōu)越的預(yù)測算法，可以提供他們最有可能觀看的電影和節(jié)目。像Medium這樣的網(wǎng)站會向人們展示他們登錄時可能喜歡的文章，這些文章都是基于他們以前讀過的和喜歡的內(nèi)容。
但個性化可能會走得太遠。廣告網(wǎng)絡(luò)算法已經(jīng)變得如此先進，他們有時甚至可以預(yù)測人們可能對購買感興趣的產(chǎn)品，即使他們沒有在網(wǎng)上搜索或以其他方式提到它。這種程度的預(yù)測有時會讓人覺得自己被監(jiān)視了。出于這個原因，UI設(shè)計者謹慎使用個性化是明智的。
網(wǎng)站最佳實踐：個性化改善用戶體驗
Netflix使用個性化來建議人們可能想要觀看的內(nèi)容。
個性化是一種常見的網(wǎng)站設(shè)計標準
Medium根據(jù)用戶以前的閱讀習(xí)慣和訂閱的出版物中的新內(nèi)容，在每個用戶的主屏幕上個性化顯示他們可能喜歡閱讀的文章。
網(wǎng)格
網(wǎng)格一直以來都是用戶界面設(shè)計的一部分，從上世紀90年代末基于表格的布局開始（盡管在那之前很久它們就被用于書籍和報紙等印刷布局）。當CSS因創(chuàng)建布局而流行時，開發(fā)了更優(yōu)雅的網(wǎng)格系統(tǒng)，最早的著名例子是960.gs網(wǎng)格。
網(wǎng)格為設(shè)計提供了視覺平衡和秩序，這使得人們更容易消費內(nèi)容。同時，網(wǎng)格可以為web布局提供很大的靈活性。大多數(shù)網(wǎng)格系統(tǒng)使用12或16根立柱，立柱之間有排水溝。一些使用基于網(wǎng)格的布局的網(wǎng)站使網(wǎng)格成為設(shè)計的一個顯著特征。相比之下，其他的則更加微妙，網(wǎng)格只有在仔細檢查后才會變得明顯（有時只有當實際網(wǎng)格覆蓋在設(shè)計上時）。
除了基于柱的布局網(wǎng)格之外，基線網(wǎng)格在web設(shè)計中通常用于以邏輯方式水平分隔元素。例如，在檢查正文和標題行之間的間距時，這一點在排版中最為明顯。基線水平網(wǎng)格間距與網(wǎng)頁設(shè)計中使用的垂直網(wǎng)格間距密切相關(guān)。
Web布局最佳實踐：網(wǎng)格為信息添加順序
基于網(wǎng)格的網(wǎng)頁設(shè)計以一種平衡和有組織的方式呈現(xiàn)內(nèi)容。
網(wǎng)格的使用是一個基本的網(wǎng)站布局
在網(wǎng)格設(shè)計中使用不同大小的內(nèi)容可以在保持內(nèi)容有序的同時增加視覺興趣。
雜志式網(wǎng)頁布局
新聞和期刊行業(yè)在很大程度上影響了網(wǎng)絡(luò)上雜志風(fēng)格的布局。在早期，它們大多出現(xiàn)在新聞網(wǎng)站和網(wǎng)絡(luò)雜志上。隨著時間的推移，他們在其他行業(yè)的人氣也在增長，現(xiàn)在他們出現(xiàn)在不同類型的網(wǎng)站上，包括電子商務(wù)網(wǎng)站和博客。
雜志風(fēng)格的版面包括一篇特色文章（或者有時是旋轉(zhuǎn)木馬或類似格式的多篇特色文章），以及主頁上的第二和第三篇文章。他們也傾向于有多個內(nèi)容欄，有時分為幾個部分。這些網(wǎng)頁布局適用于有大量內(nèi)容的網(wǎng)站，特別是那些每天添加新鮮內(nèi)容的網(wǎng)站。
雜志式網(wǎng)頁布局
雜志式的版面非常適合展示大量定期更新的內(nèi)容。
雜志式網(wǎng)頁設(shè)計與布局
不同的圖像形狀使這本雜志風(fēng)格的布局獨特而難忘。
單頁布局
單頁布局將站點的所有主要內(nèi)容放在一個網(wǎng)頁上。導(dǎo)航是通過滾動來完成的，通常帶有跳轉(zhuǎn)到特定區(qū)域的快捷方式，有時還帶有視差滾動效果。有時，他們可能會將次要頁面用于條款和條件、隱私策略或其他不屬于主要內(nèi)容的信息，但這不應(yīng)阻止將布局視為單個頁面。
對于內(nèi)容稀疏的網(wǎng)站，單頁網(wǎng)站布局是一個很好的解決方案。它們也是敘事內(nèi)容的完美選擇，比如交互式兒童讀物。
單頁網(wǎng)頁布局框架
單頁布局適用于敘述性內(nèi)容，導(dǎo)航提示（“向下滾動”和箭頭）的使用使設(shè)計更加用戶友好。
單頁網(wǎng)頁設(shè)計與布局
單頁布局是理想的敘事，如兒童故事。
F-和Z-模式
F-和Z-模式是指一個人的眼睛如何在頁面上移動，人們?nèi)绾螢g覽內(nèi)容。F-pattern在頁面頂部有突出的內(nèi)容，其他內(nèi)容沿著頁面左側(cè)在其下方對齊（大致呈“F”形）。Z模式在頂部有突出的內(nèi)容，在更下方有其他有價值的內(nèi)容。眼睛從頁面的右上角到左下角呈對角線繪制（大致呈“Z”形）。
旋轉(zhuǎn)木馬
內(nèi)容轉(zhuǎn)盤通常出現(xiàn)在網(wǎng)站的標題或英雄部分。它們通常包含圖像和文本，盡管有些可能只包含其中一個。它們用于在一個網(wǎng)站的一個部分中顯示多個內(nèi)容塊，而空間有限。
旋轉(zhuǎn)木馬的一些用途非常好。博客或新聞網(wǎng)站上的特色內(nèi)容非常適合旋轉(zhuǎn)木馬。產(chǎn)品、促銷和銷售也通常出現(xiàn)在電子商務(wù)網(wǎng)站的旋轉(zhuǎn)木馬中。雖然旋轉(zhuǎn)木馬通常出現(xiàn)在網(wǎng)頁頂部附近，但它們也可以在子部分中用于突出顯示相關(guān)內(nèi)容。它們是主頁內(nèi)容和特定類別內(nèi)容或產(chǎn)品的單獨頁面的流行選擇。
旋轉(zhuǎn)木馬是一種基本的網(wǎng)站布局格式
旋轉(zhuǎn)木馬允許在同一區(qū)域中顯示多個重要內(nèi)容。
網(wǎng)頁設(shè)計和布局：特色內(nèi)容的旋轉(zhuǎn)木馬
旋轉(zhuǎn)木馬非常適合在電子商務(wù)網(wǎng)站上展示特色產(chǎn)品。
永恒的Web布局最佳實踐
永恒的用戶界面設(shè)計是適應(yīng)性強，用戶友好。它適用于各種用例，今天看起來和10年前一樣好（再過10年也會一樣好），只需稍加修改。遵循網(wǎng)頁布局的最佳實踐，同時結(jié)合永恒的用戶界面設(shè)計元素，將產(chǎn)生一個網(wǎng)站，不看或感覺在短時間內(nèi)過時。它允許用戶界面設(shè)計師創(chuàng)造數(shù)字體驗，取悅用戶，實現(xiàn)品牌目標。
添加品牌總監(jiān)微信
總監(jiān)微信
復(fù)制成功
業(yè)務(wù)咨詢 何先生
業(yè)務(wù)咨詢 何先生
搜索感興趣的內(nèi)容
