寫在前面的廢話近年來ui設(shè)計(jì)的流行趨勢(shì)可謂你方唱罷我登場(chǎng)，好不熱鬧，但如果一種ui設(shè)計(jì)模式僅僅是好看，那么它一定不會(huì)長(zhǎng)久，永不過時(shí)的模式唯一的重要條件之一就是用戶友好性，并且無(wú)論設(shè)計(jì)趨勢(shì)如何變化，它都能適應(yīng)，例如基于網(wǎng)格系統(tǒng)的設(shè)計(jì)布局，這些經(jīng)典的ui設(shè)計(jì)模式是一切ui設(shè)計(jì)潮流的基礎(chǔ)?？ㄆ讲季挚ㄆ皆O(shè)計(jì)最早流行于等網(wǎng)站，這種設(shè)計(jì)一般比較適用于新聞網(wǎng)站或者博客類網(wǎng)站，因?yàn)榭梢苑胖么罅康膬?nèi)容，同時(shí)又能保持每一個(gè)卡片上的內(nèi)容都清晰可見。顧名思義，所謂卡片式就是各種大小的類似紙片的卡片樣式，一般主要有兩種設(shè)計(jì)模式，一種是所有尺寸相同的卡片均勻的鋪在頁(yè)面上，如的首頁(yè)布局，另一種則是瀑布流的卡片布局，就是把大小不同的卡片排列成有序的列，卻沒有不同的行，例如，或者國(guó)內(nèi)的花瓣網(wǎng)?？ㄆ降牟季忠?yàn)閷?nèi)容分開，易于用戶分辨查看內(nèi)容，因此往往效果很好，而且對(duì)于設(shè)計(jì)新手來說，也很容易上手。當(dāng)然還有卡片式設(shè)計(jì)除了這兩種主流的用法，還有一些特別的方式，比如，采用了近視差滾動(dòng)導(dǎo)航全屏幕卡。分屏布局分屏式的布局最早開始于2013年，在2016年開始流行。當(dāng)兩塊元素在頁(yè)面中具有相等的權(quán)重時(shí)，分屏式布局是給不錯(cuò)的選擇，不過一般都是并排而不是垂直排布，用于圖文搭配并需要突出文字時(shí)，通常會(huì)把文字覆蓋在圖片上一部分，這樣可以帶來簡(jiǎn)約精致的質(zhì)感，當(dāng)然在分屏布局下，文字與圖片的結(jié)合也有很多種方式，暫不一一列舉。大字體大字體的應(yīng)用可以追溯到很久以前，但是隨著移動(dòng)端ui的興起，大字體的廣泛應(yīng)用才開始普及。大字體作為標(biāo)題是特別突出的（廢話），并且，它還能帶來極佳的視覺沖擊體驗(yàn)，它能在頁(yè)面中沒有多少其他元素的情況下，獨(dú)自撐起場(chǎng)面，相當(dāng)壯觀。啊放錯(cuò)圖了個(gè)性化這是一個(gè)老調(diào)重彈的話題，人工智能可以根據(jù)每個(gè)人的喜好為用戶提供不同的數(shù)字體驗(yàn)，例如奈飛（包括其他閱讀訂閱類網(wǎng)站）可以預(yù)測(cè)用戶想看的電影并自動(dòng)推薦到用戶的列表。但是個(gè)性化也有負(fù)面效應(yīng)，那就是即使用戶沒有搜索或以其他方式操作時(shí)，有時(shí)人工智能也可以預(yù)測(cè)人們可能感興趣的東西。這種預(yù)測(cè)水平有時(shí)會(huì)使人感到被監(jiān)視。因此，UI設(shè)計(jì)人員應(yīng)謹(jǐn)慎使用個(gè)性化設(shè)置。（這個(gè)作為ui設(shè)計(jì)人員要怎么注意？也許是弱化推薦內(nèi)容，在用戶需要被推薦時(shí)，恰當(dāng)?shù)娘@示在正確的地方，我猜的噢）網(wǎng)格系統(tǒng)凡是學(xué)ui設(shè)計(jì)的，沒有沒了解過網(wǎng)格系統(tǒng)的，這種排版方式甚至可以追溯到還沒有網(wǎng)絡(luò)，只有印刷出版物的時(shí)代。網(wǎng)格系統(tǒng)為視覺提供了平衡感和順序，使內(nèi)容更易于閱讀，同時(shí)網(wǎng)格使布局設(shè)計(jì)具有了更大的靈活性，大多數(shù)的網(wǎng)格系統(tǒng)都是12列或者16列，有些網(wǎng)站的布局有明顯的網(wǎng)格特征，而有的網(wǎng)站看起來似乎并沒有網(wǎng)格，但實(shí)際上在做設(shè)計(jì)的時(shí)候，這些都是在網(wǎng)格系統(tǒng)的范圍內(nèi)完成的，因此這樣的布局一般更美觀，更合理。雜志風(fēng)格的布局出版物的排版有時(shí)也會(huì)影響到互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)布局方式，選擇在各種網(wǎng)站上都可以看到類似的布局，例如電商網(wǎng)站和博客。雜志的版面布局一般會(huì)有一條特色文章作為突出，以及后面的第二和第三條，有時(shí)內(nèi)容也會(huì)分成多列或者幾個(gè)部分，這些方式非常適合web端的ui布局設(shè)計(jì)，尤其是每天需要更新內(nèi)容的網(wǎng)站。單頁(yè)布局單頁(yè)布局是指把所有內(nèi)容放在單個(gè)頁(yè)面上，導(dǎo)航是通過滾動(dòng)完成的，通常使用快捷跳轉(zhuǎn)控件跳轉(zhuǎn)到指定的部分，對(duì)于內(nèi)容不多的網(wǎng)站，單頁(yè)布局是個(gè)不錯(cuò)的選擇，也可以用來設(shè)計(jì)故事敘述類的頁(yè)面（如互動(dòng)式兒童讀物）。F型和Z型F模式和Z模式是指你喲元素的排版位置來引導(dǎo)用戶視線閱讀順序的一種設(shè)計(jì)方式，F(xiàn)型布局主要在于突出頂部?jī)?nèi)容，左下方為頁(yè)面輔助內(nèi)容，大致看約等于F字樣。Z型布局在于內(nèi)容的對(duì)等性，即從上至下所有的元素模塊是一樣的權(quán)重，從上至下沿Z字形排列。F模式在總體視覺上更具有層次感，適用于內(nèi)容較多的頁(yè)面，而當(dāng)頁(yè)面內(nèi)容元素權(quán)重對(duì)等的情況下，則Z模式更合適。不對(duì)稱布局顧名思義，不對(duì)稱的含義就是不對(duì)稱（廢話），不對(duì)稱的設(shè)計(jì)會(huì)產(chǎn)生更具有動(dòng)態(tài)的視覺沖擊效果。不對(duì)稱的布局方式一般是用極不平衡的圖像和字體來設(shè)計(jì)完成的，還可以加入別的，如不對(duì)稱的背景來加強(qiáng)這一效果。不對(duì)稱的設(shè)計(jì)會(huì)產(chǎn)生動(dòng)態(tài)的充滿活力的視覺印象，因此對(duì)于想要達(dá)到此類形象的產(chǎn)品來說，是再合適不過了。簡(jiǎn)潔的布局嚴(yán)格來說，這個(gè)說法并不是排版的一種方式，而是一種理念，簡(jiǎn)潔的布局流傳已久，他們的優(yōu)點(diǎn)也顯而易見，那就是將關(guān)注點(diǎn)更多的聚焦在內(nèi)容上，不給用戶造成視覺上的影響。干凈簡(jiǎn)單的布局適合任何設(shè)計(jì)頁(yè)面，無(wú)論是網(wǎng)格布局，不對(duì)稱，還是分屏布局，都可以貫徹這一理念，許多高端大氣上檔次，低調(diào)奢華有內(nèi)涵的網(wǎng)站，都是這樣來的。寫在后面的廢話不會(huì)過時(shí)的ui設(shè)計(jì)模式從來都是具有適應(yīng)性和用戶友好性的屬性，無(wú)論是過去還是未來，只需在這些經(jīng)典設(shè)計(jì)模式上注入當(dāng)下設(shè)計(jì)潮流即可完成一個(gè)好的設(shè)計(jì)。公眾號(hào)不知設(shè)計(jì)院每天分享一篇國(guó)外優(yōu)質(zhì)設(shè)計(jì)翻譯文章及靈感視頻，歡迎關(guān)注。完全免費(fèi)素材下載網(wǎng)站