關(guān)注趨勢本質(zhì)上就是關(guān)注未來可能存在的形態(tài)。很多營銷需求和優(yōu)秀設(shè)計(jì)趨勢是相互關(guān)聯(lián)的，兩者之間的關(guān)聯(lián)更像是一種動(dòng)態(tài)的同步。
很多時(shí)候趨勢并不一定是全新的東西，它們往往是服務(wù)于當(dāng)下和未來的需求，有很多趨勢存在了一些年頭，它們?cè)诂F(xiàn)在發(fā)揮著作用，但是在未來可能會(huì)發(fā)揮更大的效用。所以，當(dāng)我們?cè)诓榭催@些設(shè)計(jì)趨勢的時(shí)候，需要注意，它們必須是服務(wù)于用戶，服務(wù)于品牌和企業(yè)。
更多設(shè)計(jì)趨勢：
的確，極簡主義一直在某種程度上流行，但是 2022 年出現(xiàn)的新極簡主義的浪潮，比起傳統(tǒng)的極簡主義設(shè)計(jì)更加在意用戶注意力的吸引。這種新極簡主義的設(shè)計(jì)會(huì)采用更加大膽、 生動(dòng)、明亮的色彩來填補(bǔ)留白，這種設(shè)計(jì)使得設(shè)計(jì)保持簡約的同時(shí)，更加富有調(diào)性，在簡約的框架下制造一種別樣的華麗，營造令人亢奮的氛圍。
干凈清晰、生動(dòng)的新極簡主義風(fēng)格在品牌推廣的過程中也更加受歡迎，大量的留白和跳脫的視覺焦點(diǎn)讓整個(gè)視覺更加抓人眼球，也使得品牌給人的感知更加新鮮獨(dú)特。
新極簡主義風(fēng)格，對(duì)比度在深色主題下得到了進(jìn)一步的提升。
這種設(shè)計(jì)并不意味著傳統(tǒng)的極簡主義已經(jīng)被用戶拋棄，很多企業(yè)依然會(huì)青睞更加傳統(tǒng)的單色極簡主義設(shè)計(jì)，不過其中多少會(huì)增加一些明亮的色彩作為點(diǎn)綴。
從 1950 年開始，粗野主義就是年輕化、反叛、反主流、標(biāo)新立異的設(shè)計(jì)風(fēng)格。在過去的幾十年當(dāng)中，這種設(shè)計(jì)風(fēng)格一直隨著時(shí)代的發(fā)展而自我迭代，新粗野主義更加強(qiáng)調(diào)創(chuàng)造力、 大膽前衛(wèi)的新奇元素，而這也正好符合很多品牌對(duì)于新奇性的追求，它可以瞬間抓住用戶的注意力。不過，這種風(fēng)格的使用需要控制好程度，否則很容易失控。
粗野主義經(jīng)久不衰的秘訣是什么？是未經(jīng)打磨、粗糲而原始的素材，它讓觀看者忍不住想要改進(jìn)它，這種未完成的原始感會(huì)在情感上吸引觀眾，這在營銷上是無價(jià)的優(yōu)勢。
粗野主義在設(shè)計(jì)上并非看起來那么粗糙，相反它更加需要高度的專業(yè)性來控制它粗野的程度。設(shè)計(jì)師需要敏銳地感知到觀看者改進(jìn)地欲望，讓設(shè)計(jì)粗野而不低級(jí)，原始而不拙劣。
新粗野主義柔糅合了極簡主義和大膽地排版，它依賴看似粗野地視覺沖擊：高對(duì)比度、粗糲地陰影，撞色、 簡約的背景、不對(duì)稱的布局、 未經(jīng)修飾的照片，新粗野主義偏好基礎(chǔ)款的加粗字體，跟注重可讀性而不是舒適所制造的視覺吸引力。
這個(gè)網(wǎng)站就是一個(gè)典型的例子：
這一趨勢在絕大多數(shù)的趨勢排行榜當(dāng)中，都占據(jù)首位。隨著技術(shù)的進(jìn)步，用戶和數(shù)字媒體之間的交互正在增加，引人入勝的交互已經(jīng)不僅僅停留在響應(yīng)式設(shè)計(jì)當(dāng)中，如今它已經(jīng)開始關(guān)注心理和生理的邏輯，開始全方位地調(diào)動(dòng)視覺、聽覺、 嗅覺、觸覺、味覺乃至于運(yùn)動(dòng)體感。
這種趨勢旨在幫助用戶體驗(yàn)真實(shí)地感覺，在完成交互地基礎(chǔ)上，觸發(fā)用戶地情緒反應(yīng)和生理反應(yīng)，熱氣騰騰地餡餅視頻讓人垂涎，游戲中虛擬地對(duì)手讓人腎上腺素激增。
交互所制造地參與感，在某種程度上是實(shí)際地物理產(chǎn)品地替代物，用戶可以從不同角度來縮放查看產(chǎn)品，了解細(xì)節(jié)，選擇尺寸，挑選顏色。
交互過程中，手指和屏幕之間地觸摸交互開始變得豐富，開始變得有意味，它成為了用戶和虛擬世界之間溝通地橋梁，開始有游戲地樂趣，有更具設(shè)計(jì)感地交互環(huán)節(jié)。用戶也可以根據(jù)自己地喜好，對(duì)界面進(jìn)行更多樣的個(gè)性化處理。
具有參與感的交互是我們的未來。
2022 年是疫情開始后的第三年，隔離使得人們對(duì)于照片所呈現(xiàn)出的故事和情感，有著更為強(qiáng)烈的情緒反應(yīng)。在極簡主義設(shè)計(jì)當(dāng)中，富有表現(xiàn)力的人物照片是最為流行的元素之一，這類照片搭配上簡短的文字，簡練的口號(hào)，一些帶有宏大敘事特質(zhì)的文字引用，時(shí)常能夠更好地營造出故事感。
不用擔(dān)心主屏頁面太長沒人看，只要隨著用戶滾動(dòng)，故事會(huì)隨之逐步展開，用戶可以在照片、 標(biāo)題、視頻、動(dòng)畫和文本地指引下，看到整個(gè)故事有步驟地呈現(xiàn)。
在這當(dāng)中，富有表現(xiàn)力的人物照片是吸引用戶注意力的關(guān)鍵要素。
另外就是頁面的 Banner 的部分，強(qiáng)調(diào)主題和內(nèi)容的標(biāo)題文本，是用戶從屏幕上獲取的重要信息之一。
如今的用戶越來越偏好在詳細(xì)閱讀內(nèi)容之前，快速瀏覽一下全局的做法，這也使得 Scrollytelling（滾動(dòng)敘事：通過滾動(dòng)觸發(fā)音頻、視頻、 動(dòng)畫效果的一種技術(shù)）這種漸進(jìn)式敘事方式，可以像電影一樣將故事呈現(xiàn)在用戶眼前。
Scrollytelling 適合大量的內(nèi)容呈現(xiàn)，比如對(duì)于公司和產(chǎn)品的描述，對(duì)于數(shù)據(jù)呈現(xiàn)或者認(rèn)知要求較高的內(nèi)容，它適合學(xué)習(xí)和記憶性內(nèi)容的呈現(xiàn)。
3D 圖形設(shè)計(jì)正在越來越流行，因?yàn)樗_實(shí)是吸引用戶注意力的最主要的工具之一。3D 圖像無論有多么奇異，它本身都會(huì)被認(rèn)為是有真實(shí)感的，明確的體積，精致的建模，所有的一切都令人著迷。很多時(shí)候，用戶停留在有3D元素的頁面上，是為了更細(xì)致的欣賞。
3D 圖形設(shè)計(jì)的趨勢從來都沒有減退，它正在進(jìn)入更多的領(lǐng)域，甚至進(jìn)入了品牌推廣的領(lǐng)域。3D 動(dòng)畫圖標(biāo)比過去更能吸引用戶的注意力。
我們通常說的抽象插畫，指的是帶有明確幾何特征的插畫，它們被廣泛地應(yīng)用于網(wǎng)站和 APP，在社交媒體和包裝設(shè)計(jì)中也越來越多的存在。
抽象插畫之所以會(huì)如此成功，是因?yàn)樗鼈兇蠖嘤兄说纳鷦?dòng)色彩和良好對(duì)比度，視覺上的美感和極簡主義的風(fēng)格特質(zhì)，它們成為視覺的焦點(diǎn)，為整個(gè)設(shè)計(jì)提升視覺。
抽象插畫在品牌營銷場景下的應(yīng)用也很多，它們?cè)谶@個(gè)時(shí)候是貼合品牌推廣的訴求的：通過色彩和形式來吸引用戶來關(guān)注品牌的形象和名稱。
這種趨勢的特別之處是其中的文本字體元素是完全獨(dú)立的。這些文本不僅僅是用來傳遞信息的，它們還充當(dāng)著拉升頁面視覺效果的重要作用，它們結(jié)合動(dòng)畫和交互，成為頁面中醒目的亮點(diǎn)。
超大字體的優(yōu)點(diǎn)在于，它和很多設(shè)計(jì)風(fēng)格是相得益彰的，加粗的大字體在極簡主義風(fēng)格的頁面上不會(huì)顯得突兀，在元素豐富的頁面上，同樣可以起到優(yōu)秀的點(diǎn)綴作用。這些文本內(nèi)容可以和纖細(xì)和小尺寸的元素協(xié)同，而后者則襯托出它本身的醒目。
超大文本字體的另一個(gè)好處是有效地減少網(wǎng)頁上的圖像的使用，縮短加載時(shí)間，提升移動(dòng)端的可用性。
這種設(shè)計(jì)元素最重要的，是選擇易讀且符合品牌調(diào)性的字體。
這么多年來，我們看到來這么多的趨勢，很多趨勢是一以貫之持續(xù)出現(xiàn)，有的趨勢則如同流星一樣一閃而逝。好的趨勢不斷迭代升級(jí)，并且持續(xù)存在，但是最重要的，始終是那些選擇合理的方案，并且堅(jiān)持改進(jìn)設(shè)計(jì)，讓趨勢服務(wù)于終端的產(chǎn)品和用戶的設(shè)計(jì)師。
讓趨勢服務(wù)于你，不要盲目地追趨勢！
作者：陳子木
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
無論作為設(shè)計(jì)師還是普通瀏覽者，大家觀看一個(gè)網(wǎng)站時(shí)最先接觸到的就是網(wǎng)頁的頭部區(qū)域，這部分內(nèi)容為網(wǎng)站的其他各個(gè)方面設(shè)定了基調(diào)，在網(wǎng)頁設(shè)計(jì)中起著非常關(guān)鍵的作用。
尤其是如今簡潔設(shè)計(jì)比較盛行，多數(shù)時(shí)候把頭部內(nèi)容設(shè)計(jì)好就變成了吸引用戶眼球最好的辦法。網(wǎng)頁設(shè)計(jì)師在設(shè)計(jì)網(wǎng)站頭部時(shí)投入了大量精力，同時(shí)要兼顧創(chuàng)造力和實(shí)用性。根據(jù)一項(xiàng)Google的研究，用戶只需要短短數(shù)秒就可以形成對(duì)一個(gè)網(wǎng)站的看法，甚至有些觀點(diǎn)是在令人難以置信的1秒內(nèi)形成的。用戶對(duì)品牌的了解就是從這么短的時(shí)間內(nèi)開始的。
在通常網(wǎng)頁設(shè)計(jì)中，首頁上方的整個(gè)空間都被視為頭部區(qū)域。作為人們?cè)诩虞d網(wǎng)站后的最初幾秒內(nèi)看到部分，頭部信息起到了一種邀請(qǐng)作用，它應(yīng)該提供有關(guān)網(wǎng)站的基本信息，以便用戶能夠在幾秒內(nèi)了解網(wǎng)站的主要內(nèi)容。
如果以招聘活動(dòng)站點(diǎn)為例，整個(gè)頭部區(qū)域設(shè)計(jì)要明確傳達(dá)企業(yè)形象，及本次招聘活動(dòng)的特點(diǎn)。給瀏覽者一個(gè)強(qiáng)烈的視覺印象，企業(yè)已向你發(fā)出邀請(qǐng)，我們對(duì)人才十分渴求，等等信息… 如果有線上線下活動(dòng)同時(shí)參與，那么在整體風(fēng)格上盡量保持一致。
網(wǎng)頁頭部的任務(wù)是給用戶提供一些基本問題的答案：代表什么品牌，提供什么服務(wù)等等。如果我們?cè)趦?nèi)容上引起了用戶情感上的共鳴，那么就是正確的設(shè)計(jì)。
那么主要元素通常包括：
在設(shè)計(jì)網(wǎng)站頭部內(nèi)容時(shí)，從思維層面來講沒有任何東西會(huì)限制你的創(chuàng)造力，它應(yīng)該是令人難忘的、簡潔和兼具實(shí)用性的，是一個(gè)可以展示創(chuàng)造性的開放領(lǐng)域。
下面讓我們一起來看看頭部內(nèi)容設(shè)計(jì)的一些技巧。
1. 關(guān)于尺寸
對(duì)于網(wǎng)頁頭部圖片的大小是沒有統(tǒng)一的答案。有時(shí)候設(shè)計(jì)師希望提供相對(duì)固定的數(shù)字，但網(wǎng)頁設(shè)計(jì)最大的難點(diǎn)之一是很難確保每個(gè)屏幕尺寸的有效性。即使兩個(gè)屏幕的尺寸相同，分辨率也可能不同，因此用戶看到的內(nèi)容也不一定完全一樣。
因此，我們不要拘泥于精確的像素概念，最好遵循經(jīng)驗(yàn)積累的常識(shí)規(guī)則。
頭部的高度本著不干擾內(nèi)容感知的基本原則。對(duì)于一些展示信息資源的頁面，較小的頭部區(qū)域是一個(gè)不錯(cuò)的選擇，而對(duì)于落地頁或者企業(yè)客戶首頁，頭部區(qū)域可能會(huì)更大，而且多數(shù)大客戶會(huì)有主視覺單屏展示頁。
如果某些網(wǎng)頁，例如落地頁頭部內(nèi)容較長的情況下，最好在首屏給下一屏內(nèi)容露出一些空間，這樣用戶就可以意識(shí)到下一頁還有內(nèi)容，引導(dǎo)用戶滾動(dòng)。
2. Logo展現(xiàn)
當(dāng)一個(gè)人發(fā)現(xiàn)自己在陌生網(wǎng)站上，總是習(xí)慣于從屏幕的左上角開始瀏覽網(wǎng)站。盡管設(shè)計(jì)師有時(shí)候認(rèn)為打破常規(guī)的布局也可以帶來不錯(cuò)的效果，但是多數(shù)用戶如果他們常規(guī)位置找不到預(yù)期的信息，將會(huì)不假思索地認(rèn)為這個(gè)頁面是難用的和不規(guī)范的，需要花費(fèi)很多的努力才能理解。這就要看你的設(shè)計(jì)目的和受眾群體能夠接受哪些程度的變化，我們今天主要說大多數(shù)受眾。
Logo ——與居中或右側(cè)放置相比，用戶更容易記住那些 Logo 放在左邊的品牌。如果你使用的是圓形 Logo，那么可以把它居中放置，盡管它的有效性仍然比放在左側(cè)要低。
3. 吸頂導(dǎo)航欄
吸頂導(dǎo)航，換句話說就是「粘性標(biāo)題」，當(dāng)你滾動(dòng)頁面時(shí)，導(dǎo)航區(qū)在頁面中跟隨，現(xiàn)在成為一個(gè)網(wǎng)頁設(shè)計(jì)標(biāo)準(zhǔn)。如果不違反網(wǎng)站整體設(shè)計(jì)理念，請(qǐng)將導(dǎo)航欄吸頂固定。無論是PC端還是移動(dòng)端設(shè)計(jì)，這都是一個(gè)好的選擇：
可根據(jù)頁面內(nèi)容展示要求，向下滾動(dòng)時(shí)調(diào)整導(dǎo)航背景透明度，盡量少的影響內(nèi)容展示同時(shí)使頁面看起來更生動(dòng)和通透。還可以在滾動(dòng)時(shí)簡化導(dǎo)航欄樣式或高度，使用戶能找到但又不過于搶眼。
總之，固定導(dǎo)航欄有助于提升用戶體驗(yàn)，保持用戶導(dǎo)向并給予了他們更多控制權(quán)。
3. 關(guān)于圖片的應(yīng)用
頭部內(nèi)容所用圖片可以選擇直接和要表達(dá)的業(yè)務(wù)相關(guān)性很強(qiáng)的，例如招聘類網(wǎng)站使用招聘場景圖片；也可以選擇中性感覺的例如辦公場景、城市風(fēng)景類圖片進(jìn)行虛化降低清晰度或明度來突出前景內(nèi)容；
高質(zhì)量圖片——攝影對(duì)于網(wǎng)頁設(shè)計(jì)師來說是一個(gè)強(qiáng)大的工具。它可以講述一個(gè)故事，喚起用戶的情感，并鼓勵(lì)訪問者進(jìn)一步滾動(dòng)。對(duì)于那些有強(qiáng)烈沖擊力的圖片的網(wǎng)站，試著做一個(gè)透明的標(biāo)題，它可以更好地顯示圖像，并保留了主要鏈接。
輪播圖片——如果客戶給了幾張代表該企業(yè)業(yè)務(wù)的出色照片，這種方式就沒錯(cuò)！企業(yè)希望用戶可以滾動(dòng)瀏覽一組精美的高分辨率圖像。
插畫——網(wǎng)站的頭部圖片必須能引起讀者的共鳴，建立起人與人之間的聯(lián)系。如果圖片是獨(dú)特的且易于辨認(rèn)，即使是從網(wǎng)站標(biāo)題中剪切出來，效果也會(huì)很好，可以利用當(dāng)今的插圖潮流來實(shí)現(xiàn)這一點(diǎn)。
4. 視頻或動(dòng)畫
當(dāng)然我們也不能只關(guān)注靜態(tài)圖片，添加視頻也是最有效的網(wǎng)站頭部創(chuàng)意之一。如果可能的話，嘗試著在頭部內(nèi)容中添加主題視頻材料，很多網(wǎng)站利用在背景中添加短視頻來吸引用戶，盡可能以最好的方式展示他們的公司或產(chǎn)品。
△ 華夏幸福校招官網(wǎng)首頁動(dòng)畫，撥云見日的效果加上中式剪紙風(fēng)格的運(yùn)用，將公司各業(yè)務(wù)線融合到幾個(gè)轉(zhuǎn)輪中，產(chǎn)生了故事性的動(dòng)畫場景。
如果想要使設(shè)計(jì)更具吸引力、生動(dòng)和令人難忘的另一種方法是添加動(dòng)畫。它可以使網(wǎng)站頭部內(nèi)容變得非?？?。以每季校園招聘企業(yè)站點(diǎn)為例，各大公司對(duì)應(yīng)屆生群體的追逐，很大程度上體現(xiàn)在對(duì)該群體審美和喜好的迎合上，年輕有活力的動(dòng)畫或視頻元素絕對(duì)是吸引眼球的不二之選。
當(dāng)然不一定只有滿屏大型動(dòng)畫，一般動(dòng)畫越復(fù)雜面積越大占用流量越多，客戶打開延遲也影響觀感。這時(shí)候我們可以根據(jù)功能不同，設(shè)計(jì)一些交互性的動(dòng)畫，去提升客戶使用感受，盡量不影響網(wǎng)頁打開速度。
5. 移動(dòng)端頭部設(shè)計(jì)
網(wǎng)頁頭部不可能只顯示PC端的網(wǎng)頁上，還應(yīng)該正確顯示在移動(dòng)端的網(wǎng)頁上。因此，在近年的設(shè)計(jì)中，網(wǎng)頁必須具有響應(yīng)性，并且能夠很好地適應(yīng)各種移動(dòng)設(shè)備，這樣才能帶給用戶完整的設(shè)計(jì)體驗(yàn)。
移動(dòng)設(shè)備的日常使用廣泛性早已影響網(wǎng)站設(shè)計(jì)，即使在PC中，也有一些細(xì)節(jié)看起來像是面向移動(dòng)設(shè)備的網(wǎng)站設(shè)計(jì)。例如，Banner和漢堡包菜單都起源于移動(dòng)設(shè)計(jì)。
移動(dòng)端有著與PC端不同的屏幕尺寸和操作方式，很多時(shí)候需要設(shè)計(jì)師在一開始就考慮到兩種界面的適應(yīng)情況，比如在PC上頂部一條的導(dǎo)航，到移動(dòng)端就演變?yōu)橐粋€(gè)漢堡包菜單。而原本PC頁面中展開顯示的內(nèi)容，在移動(dòng)端會(huì)向下層延伸，首層界面成為一個(gè)內(nèi)容聚合頁。
網(wǎng)站是以頭部內(nèi)容為先導(dǎo)的，它就像是一張獨(dú)特的名片。因此，我們?cè)谠O(shè)計(jì)網(wǎng)站時(shí)，盡可能最大限度地關(guān)注該區(qū)域。
最后還要提醒大家，一定記得定期更新網(wǎng)站頭部內(nèi)容哦！以校園招聘大客戶為例，大多數(shù)企業(yè)都會(huì)在每年春秋兩季的招聘旺季更新其招聘主題風(fēng)格，以保持網(wǎng)站的新鮮感和時(shí)效性。
以上只是在工作中的一些點(diǎn)滴體會(huì)，微不足道。感恩能在UXD集體中不斷成長。
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
網(wǎng)站設(shè)計(jì)之一：怒馬！超實(shí)用的單頁網(wǎng)站設(shè)計(jì)指南（附大量資源）
網(wǎng)站設(shè)計(jì)之二：旅游網(wǎng)站設(shè)計(jì)分析！教你10個(gè)小技巧
網(wǎng)站設(shè)計(jì)之三：實(shí)例教學(xué)！如何將極簡風(fēng)格的原則運(yùn)用到網(wǎng)站設(shè)計(jì)中？
網(wǎng)站設(shè)計(jì)之四：另辟蹊徑談創(chuàng)新！提升網(wǎng)站設(shè)計(jì)形式的幾種方法
網(wǎng)站設(shè)計(jì)之五：經(jīng)驗(yàn)分享：移動(dòng)網(wǎng)站設(shè)計(jì)應(yīng)該避免的“七宗罪”
網(wǎng)站設(shè)計(jì)之六：4000 字快速回顧20多年的網(wǎng)頁設(shè)計(jì)發(fā)展史！
網(wǎng)站設(shè)計(jì)之七：騰訊出品！2021-2022設(shè)計(jì)趨勢報(bào)告：動(dòng)態(tài)篇
網(wǎng)站設(shè)計(jì)之八：為什么千萬別隨便學(xué)國外的極簡設(shè)計(jì)？
網(wǎng)站設(shè)計(jì)之九：高手出品！2020~2021年UI界面設(shè)計(jì)趨勢
網(wǎng)站設(shè)計(jì)之十：如何做好網(wǎng)頁頭部內(nèi)容設(shè)計(jì)？來看 58 設(shè)計(jì)師的總結(jié)！
設(shè)計(jì)趨勢可以塑造一切，從設(shè)計(jì)師的創(chuàng)作方式到用戶界面設(shè)計(jì)，再到從網(wǎng)站到包裝設(shè)計(jì)的未來迭代。
讓我們深入探討2022年的一些頂級(jí)網(wǎng)頁設(shè)計(jì)趨勢。我們將著眼于 2021年末開始出現(xiàn)的趨勢，這些趨勢是為來年奠定基礎(chǔ)的，以及一些即將流行的趨勢設(shè)計(jì)。
有趣、樂觀的設(shè)計(jì)
時(shí)尚的形狀、顏色，甚至是面孔都可以帶來很多樂趣。設(shè)計(jì)師正在使用網(wǎng)頁設(shè)計(jì)趨勢，為從網(wǎng)站的所有內(nèi)容提供有趣、樂觀的設(shè)計(jì)。這些設(shè)計(jì)的共同點(diǎn)是它們?yōu)槭澜缱⑷肓艘稽c(diǎn)額外的快樂。
充滿樂趣和樂觀的圖像具有面孔、較輕的字體，以及散發(fā)出積極情緒的顏色。為了充分利用這一趨勢，請(qǐng)考慮更輕的元素，并避免選擇較重的字體或顏色。
黑白配色方案
黑白配色方案是今年最鮮明、最美麗的設(shè)計(jì)趨勢。沒有顏色，你可以在限制范圍內(nèi)思考和設(shè)計(jì)。
大膽和實(shí)驗(yàn)性的排版
在2022年，沒有錯(cuò)誤的排版方式。大粗體字體——甚至襯線字體——無處不在。在玩這種網(wǎng)站設(shè)計(jì)趨勢時(shí)，請(qǐng)考慮字體將如何響應(yīng)以及如何最大限度地對(duì)訪問者產(chǎn)生影響。
三維設(shè)計(jì)元素
雖然2020年和2021年有很多設(shè)計(jì)師網(wǎng)站處理完整的3D 設(shè)計(jì)，但新興趨勢是將3D元素與更扁平的整體美感結(jié)合起來。
具有3D風(fēng)格的元素可能包括陰影、動(dòng)畫或圖層效果，以創(chuàng)建深度和維度。
三維設(shè)計(jì)也延伸到視覺敘事?？紤]如何以突出景深和陰影的方式捕捉您的故事或產(chǎn)品。
近乎野獸派
野蠻主義是人們想要加入的網(wǎng)站設(shè)計(jì)趨勢，但對(duì)于大多數(shù)項(xiàng)目來說，它過于苛刻和尖銳。
這些設(shè)計(jì)使用了許多相同的鮮明效果。不是單色字體，更容易看到襯線是常態(tài)。即使有一些明顯的邊界和線條，元素之間也有足夠的空間。沒有太多的裝飾或其他視覺效果，只留下顏色和文字來真正承載這些項(xiàng)目。
滾動(dòng)文本元素
雖然總是希望文本元素可讀，但它們也可以是動(dòng)態(tài)的。滾動(dòng)文本元素——通常使用超大字體、幾個(gè)詞、在一個(gè)位置——可以增加對(duì)關(guān)鍵詞的強(qiáng)調(diào)并激發(fā)用戶的興趣。
輪廓字體是一種流行的選擇，保持可讀性的關(guān)鍵是使用簡短、常用的單詞或短語。
玻璃態(tài)
玻璃態(tài)的第一個(gè)展示于2020年末和2021年初的新態(tài)，并演變成現(xiàn)在流行的更完整的玻璃效應(yīng)。
正是您可能想的那樣：設(shè)計(jì)元素的外觀讓人聯(lián)想到玻璃?？赡苡型该鞫取⒗涞蚬鉂傻脑?。
設(shè)計(jì)師們一直在Dirbbble上以一種主要方式使用這種風(fēng)格，并找到了網(wǎng)站設(shè)計(jì)的方法。
更多漸變
漸變是不斷出現(xiàn)的設(shè)計(jì)趨勢。2021年，設(shè)計(jì)中的大部分漸變出現(xiàn)在背景中。
到 2022 年，漸變將采用兩種新形式：
1) 用于文本顏色填充（例如上面的示例）以提供最大的影響和強(qiáng)調(diào)
2) 作為用其他線條填充插圖或圖標(biāo)以創(chuàng)建紋理深度效果
沒有圖像的主頁
無需圖像即可設(shè)計(jì)，您將在 2022 年緊跟潮流。
使用不同類型的用戶界面或設(shè)計(jì)技巧來充分利用沒有圖像的主頁。在此處的示例中，Kirifuda 使用了漂亮的黑白配色方案，在文本元素之間具有疊印效果。超大的排版和手寫風(fēng)格的字體有助于將它們?nèi)诤显谝黄稹?
分屏美學(xué)
分屏美學(xué)重新奏效。幾年前的趨勢當(dāng)時(shí)出于可用性和響應(yīng)的原因而起作用，現(xiàn)在它更像是一種新設(shè)計(jì)。
這些視覺效果可以包括水平或垂直分割的屏幕，每一切面有不同的功能。
交互式字體
在屏幕上與您一起移動(dòng)的文本是交互式字體背后的支柱。在大多數(shù)情況下，這可以使用懸停狀態(tài)，盡管您可以嘗試一些其他更復(fù)雜的效果。
在考慮交互式文本元素時(shí)，請(qǐng)考慮可讀性和理解力。文本效果只有在其中的文字仍然可讀和可理解的情況下才有效。
包容性設(shè)計(jì)
設(shè)計(jì)師正在努力打造一個(gè)更具包容性的網(wǎng)絡(luò)，它幾乎在所有發(fā)布的內(nèi)容中都有體現(xiàn)。從圖像到語言再到替代文本，沒有理由不嘗試讓您的項(xiàng)目更加包容所有人。
包容性延伸到種族、性別中立、文化、可及性和能力。共同的主題是您的網(wǎng)站應(yīng)該以這樣的方式組合在一起，以便任何想要訪問內(nèi)容的人都可以訪問內(nèi)容，并且人們也可以在屏幕上看到他們可以與之相關(guān)的其他人。
結(jié)論
就網(wǎng)站設(shè)計(jì)趨勢而言，新的一年已經(jīng)開始以非凡的方式爆發(fā)。如何將這些元素合并到現(xiàn)有項(xiàng)目中是作為設(shè)計(jì)師該考慮的問題。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
看完這一波網(wǎng)頁 UI 類設(shè)計(jì)，再也不愁接下來該如何做設(shè)計(jì)創(chuàng)新了。
這是今年出鏡率比較多的一種設(shè)計(jì)風(fēng)格，不管你是在 Dribbble 還是 Behance 上都能見到它的影子。這種風(fēng)格設(shè)計(jì)最大特點(diǎn)：形式感、聚焦、簡約而不簡單。
當(dāng)然還可以是將線圈與文字疊加圖片，有一種層疊縱深布局感受。
又或者說圖形只是作為裝飾作用。
純文字版式在今年版式中出鏡率也是相當(dāng)之高，包括深圳設(shè)計(jì)周官網(wǎng)也幾乎都是幾個(gè)大字排版。其實(shí)我們仔細(xì)思考，將文字放大處理，有點(diǎn)圖形化的意思。
上圖是典型的文字圖形化，將文字轉(zhuǎn)化成線性設(shè)計(jì)。
圖文混合設(shè)計(jì)風(fēng)格大膽、新穎，讓人眼前一亮。這種版式布局一般會(huì)出現(xiàn)在設(shè)計(jì)工作室網(wǎng)站居多一些，追求形式感與觀賞性。
圖文混合設(shè)計(jì)，不光只是圖片與文字混合排版，還可以是圖標(biāo)與文字、粗字體與細(xì)字體之間的混合穿插。
圓形設(shè)計(jì)趨勢一直都存在，在網(wǎng)頁設(shè)計(jì)中出鏡率高也是毋庸置疑的事情。畢竟圓形本身自帶超強(qiáng)親和力、聚焦。設(shè)計(jì)用它可以解決很多枯燥的版式，讓畫面瞬間活了起來。
還可以將文字處理成圓形，與圓形圖相呼應(yīng)。
文字輪廓化版式今年出鏡率尤其之高，將文字輪廓化設(shè)計(jì)處理，減輕了文字的視覺重量感，更像是將文字線條化設(shè)計(jì)處理。
文字輪廓化設(shè)計(jì)還可以用在背景，作為設(shè)計(jì)裝飾效果。
玻璃質(zhì)感設(shè)計(jì)趨勢，也是今年最火的設(shè)計(jì)風(fēng)格之一。那么它在網(wǎng)頁出鏡率也是在下半年開始逐漸多了起來，也許是設(shè)計(jì)師發(fā)現(xiàn)這種質(zhì)感細(xì)膩與折射光透露出的細(xì)節(jié)之美。
線無疑是圖形里面運(yùn)用較多的，今年發(fā)現(xiàn)很多網(wǎng)頁中都加了線條作為版式裝飾，或者就是純線條版式設(shè)計(jì)，讓人眼前一亮，原來還可以這樣玩。
線條在這里作用明顯，除了美學(xué)設(shè)計(jì)裝飾之外，它還用作信息層級(jí)區(qū)分。
圖與線疊加
純文字版式
圖文混合
圓形版式
文字輪廓化
玻璃質(zhì)感
使用線條
文章來源：站酷 作者：功夫UX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
對(duì)于大多數(shù)網(wǎng)頁設(shè)計(jì)師來說，你的成品需要在各種類型和尺寸的設(shè)備上進(jìn)行外觀和工作，這是顯而易見的。創(chuàng)建多個(gè)設(shè)計(jì)來實(shí)現(xiàn)同一目標(biāo)的日子已經(jīng)一去不復(fù)返了。
這一切都?xì)w結(jié)為選擇響應(yīng)式或自適應(yīng)設(shè)計(jì)模型，以實(shí)現(xiàn)任何規(guī)模的一致網(wǎng)站設(shè)計(jì)。
但是響應(yīng)式和自適應(yīng)之間有什么區(qū)別？它們真的只是一回事嗎？讓我們來看看并解釋你需要知道的一切。喜歡記得關(guān)注UI范，每天更新，打造你的知識(shí)武器庫！
1.與設(shè)備無關(guān)的設(shè)計(jì)的兩種方法
2.響應(yīng)式設(shè)計(jì)
現(xiàn)在比以往任何時(shí)候都更重要的是，我們正在設(shè)計(jì)旨在沿著不同體驗(yàn)的梯度觀看的作品。響應(yīng)式網(wǎng)頁設(shè)計(jì)為我們提供了一條前進(jìn)的道路，最終讓我們能夠“為事物的潮起潮落而設(shè)計(jì)”。
而這正是我們目前關(guān)于響應(yīng)式網(wǎng)站的思想學(xué)派的起點(diǎn)。
無論設(shè)備或?yàn)g覽器如何，該設(shè)計(jì)都適用于任何視口尺寸。
響應(yīng)式設(shè)計(jì)對(duì)搜索引擎友好（谷歌甚至推薦它）。
允許設(shè)計(jì)中的很多精確度，以便設(shè)計(jì)師可以調(diào)整任何或每一個(gè)細(xì)節(jié)。
高度移動(dòng)友好的設(shè)計(jì)選項(xiàng)。
與你可能用于網(wǎng)站項(xiàng)目的大量主題、網(wǎng)站構(gòu)建器和工具兼容的常見設(shè)計(jì)實(shí)踐。
該設(shè)計(jì)將具有統(tǒng)一和無縫的外觀，這將提升整體用戶體驗(yàn)。
320 像素
480 像素
760 像素
960 像素
1,200 像素
1,600 像素
自適應(yīng)設(shè)計(jì)最常見的用途是將舊設(shè)計(jì)轉(zhuǎn)換為更適合移動(dòng)設(shè)備的設(shè)計(jì)。這并不是說它不會(huì)發(fā)生在新的開發(fā)中。
5.自適應(yīng)設(shè)計(jì)的優(yōu)點(diǎn)
由于配置錯(cuò)誤，您在設(shè)計(jì)時(shí)可能會(huì)遇到一些不太常見的設(shè)備（例如平板電腦）的問題。
自適應(yīng)設(shè)計(jì)可能是勞動(dòng)密集型的，需要更多的開發(fā)時(shí)間和成本。
由于內(nèi)容重復(fù)，搜索引擎在使用自適應(yīng)網(wǎng)站時(shí)會(huì)遇到更多困難。
有一個(gè)偷偷摸摸的現(xiàn)實(shí)，你設(shè)計(jì)同一個(gè)網(wǎng)站六次。
文章來源：站酷 作者：UI范
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
大多數(shù)網(wǎng)頁設(shè)計(jì)是以目標(biāo)為導(dǎo)向，也就是網(wǎng)頁做出來能為用戶提供什么、能解決用戶的哪些問題。例如電商網(wǎng)站的終極目標(biāo)是賣出更多的商品，資訊類網(wǎng)站的目標(biāo)是讓用戶能更多地閱讀最新訊息，目標(biāo)不同，兩類網(wǎng)站在設(shè)計(jì)上也會(huì)有截然不同的差異。
在設(shè)計(jì)上，電商網(wǎng)站會(huì)更注重頁面氛圍的營造，把紅紅火火的促銷氛圍搞起來，用戶看到會(huì)更興奮。
在電商網(wǎng)站中，設(shè)計(jì)重點(diǎn)放在幫助用戶瀏覽店鋪并輕松找到特定商品上，放在詳情頁上用盡可能好的方式展示商品；付款流程也經(jīng)過簡化和仔細(xì)計(jì)算(例如某寶最近更新的訂單頁把價(jià)格聚集在一起)，因此用戶不需要經(jīng)過太多思考就能快速下單購買。
網(wǎng)頁中炫酷的視覺效果能讓用戶印象深刻，但效果實(shí)現(xiàn)需要付出更成本。能明確知道什么時(shí)候更簡潔的視覺效果能讓整個(gè)設(shè)計(jì)變得更好，能讓用戶專注于正確的事情，這一點(diǎn)很重要。
有時(shí)候在網(wǎng)頁中添加過多元素，會(huì)分散有價(jià)值的信息，用戶也難以識(shí)別他們想看的內(nèi)容。
對(duì)齊和對(duì)稱是頁面保持平衡的重要因素。對(duì)齊既保證了布局統(tǒng)一，又將有聯(lián)系的元素緊密連接起來；對(duì)稱營造一種平衡的感覺，元素整齊有序。
網(wǎng)站的登錄注冊(cè)頁往往都設(shè)計(jì)得很簡潔，有大面積的留白處理，只保留關(guān)鍵的信息輸入框，這樣用戶能更專注于輸入內(nèi)容。
在宜家網(wǎng)頁中，清晰的視覺層級(jí)結(jié)構(gòu)以及留白的運(yùn)用讓整個(gè)頁面看起來非常整潔有序。好的結(jié)構(gòu)能讓用戶知道他們?cè)诳词裁?，留白提供了視覺上的緩解作用，有助于引導(dǎo)用戶的注意力。
格式塔原理基本上定義了我們感知事物的六種不同的認(rèn)知規(guī)則。在網(wǎng)頁設(shè)計(jì)中，這意味著需要以一種合理的方式來安排元素，幫助用戶從整體上理解設(shè)計(jì)。
設(shè)計(jì)中需要考慮不同元素的對(duì)齊關(guān)系、相似元素或按鈕的排放位置、一組信息要如何展示、列表類信息該如何展示…
另一個(gè)重要的原則是希克定律，也就是向用戶展示的選項(xiàng)越多，做出決定需要的時(shí)間就越長。因?yàn)槲覀兊拇竽X需要考慮和分析所有選擇，然后再選出最好的選擇，當(dāng)選擇太多時(shí)，這就會(huì)成為一個(gè)問題。
這就像我們?cè)诓蛷d里點(diǎn)菜一樣，如果拿來一個(gè) 20 頁的菜單，我們可能會(huì)從頭到尾把這 20 頁全看了，仍然不知道該點(diǎn)哪個(gè)，然后又把這個(gè) 20 頁的菜單重新翻一遍。去餐廳吃飯是件放松高興的事，我們肯定不想在點(diǎn)餐上給自己帶來壓力，這樣吃飯的樂趣也會(huì)大打折扣。
如果需要填寫很長的表單，考慮將長表單拆分成幾個(gè)短的問題，讓用戶按步驟依次作答，避免一下看到過多問題給用戶帶來負(fù)擔(dān)。
網(wǎng)頁設(shè)計(jì)需要知道面對(duì)的用戶是誰、他們想獲取什么、想處理什么問題以及他們是想法是什么等等。
對(duì)最終用戶的印象越清晰，越有可能創(chuàng)造出成功的設(shè)計(jì)，就像設(shè)計(jì)一個(gè)面向兒童的網(wǎng)站與設(shè)計(jì)一個(gè)供老年人使用的網(wǎng)頁會(huì)完全不同。所以在一開始，要先學(xué)會(huì)把自己的觀點(diǎn)先放在一邊，傾聽目標(biāo)用戶的意見，然后再慢慢驗(yàn)證自己的想法。
抖音千人千面的推薦機(jī)制，能為用戶精準(zhǔn)推送他們感興趣的內(nèi)容，把握住了用戶的興趣，產(chǎn)品才能越來越受歡迎。
排版需要長期的積累和沉淀，如何合理地安排頁面中的品牌標(biāo)識(shí)、圖片、文字等元素，是始終需要考慮的事。比如不管網(wǎng)頁設(shè)計(jì)的目標(biāo)是什么，或者選擇什么樣的視覺效果，在選擇字體時(shí)我們總要考慮字體的粗細(xì)、大小或?qū)Ρ榷鹊纫蛩亍?/span>
根據(jù)設(shè)備不同，最佳字體的選擇可能會(huì)發(fā)生變化。在移動(dòng)端設(shè)計(jì)中，文字可讀性是首要的，屏幕越小越要保證信息的可讀性。
網(wǎng)頁的導(dǎo)航設(shè)計(jì)和信息架構(gòu)共同構(gòu)成了產(chǎn)品的主干，讓用戶能夠了解產(chǎn)品和功能并找到需要的信息。
無論信息的長短如何，合理的層級(jí)結(jié)構(gòu)有助于在產(chǎn)品中創(chuàng)建邏輯結(jié)構(gòu)，以便用戶可以查找信息。導(dǎo)航能反映出產(chǎn)品架構(gòu)，這樣用戶無需花費(fèi)大量精力，就能輕松找到主要信息和功能。
點(diǎn)擊按鈕之后會(huì)切換到哪一頁、怎么返回到當(dāng)前頁、點(diǎn)擊哪些按鈕頁面不跳轉(zhuǎn)。架構(gòu)流程不僅自己要明確，更需要用戶看得懂。
咱們前面提到，如果面臨的選擇太多，就需要經(jīng)過大量思考，這樣用戶很可能會(huì)變得有壓力甚至困惑。其實(shí)這里面還包含著另一層意思，過多的選擇會(huì)增加用戶的認(rèn)知成本。
只有降低認(rèn)知成本，才不會(huì)給用戶帶來過多壓力，才能快速做出判斷。在網(wǎng)頁大框架已經(jīng)設(shè)計(jì)好的基礎(chǔ)上，降低認(rèn)知成本的地方往往更在于細(xì)節(jié)。
準(zhǔn)確拿捏細(xì)節(jié)。在面包屑導(dǎo)航中，鼠標(biāo)懸浮上去是一種狀態(tài)，點(diǎn)擊后又是一種狀態(tài)；選中的標(biāo)簽與未選中的標(biāo)簽在顏色上做出區(qū)分；當(dāng)前頁碼重點(diǎn)突出的同時(shí)，告知用戶前后頁碼還支持左右切換。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
在千禧年來臨之前，我們首先開始在單一視圖屏幕中進(jìn)行UI設(shè)計(jì)，這類屏幕在當(dāng)時(shí)最流行的尺寸是640x480。大多數(shù)時(shí)候，我們甚至沒有考慮讓屏幕滾動(dòng)，而是在特定區(qū)域或文本局部區(qū)塊中設(shè)置了內(nèi)部滾動(dòng)條。毋庸置疑，當(dāng)時(shí)的大部分網(wǎng)頁也是用Flash或HTML創(chuàng)建的，并帶有用于布局的表格。那是在智能手機(jī)出現(xiàn)之前，隨著事物的發(fā)展，我們經(jīng)歷了第一個(gè)向“響應(yīng)式”設(shè)計(jì)的根本轉(zhuǎn)變。我們已經(jīng)走了很長一段路，CSS已得到長足的發(fā)展，“響應(yīng)式”網(wǎng)頁設(shè)計(jì)從2010年開始才真正獲得了專有工具。
圖表來源: https://www.webdesignmuseum.org/web-design-history
隨著CSS3的發(fā)布，我們獲得了對(duì)“媒體查詢”（Media Queries）的訪問權(quán)限（譯者注：隨著移動(dòng)互聯(lián)網(wǎng)的興起,我們需要適配多種移動(dòng)端設(shè)備,這就需要用到Media Queries，即“媒體查詢”），此后不久，Ethan Marcotte在2009年底創(chuàng)造了“響應(yīng)式設(shè)計(jì)”一詞。十多年來，我們一直使用“響應(yīng)式網(wǎng)頁設(shè)計(jì)” (RWD) 創(chuàng)建網(wǎng)頁布局，作為一種網(wǎng)頁設(shè)計(jì)方法，僅需基于一種屏幕尺寸進(jìn)行設(shè)計(jì)，“響應(yīng)式”使我們的設(shè)計(jì)能夠適配各種設(shè)備和屏幕尺寸。
在早期，當(dāng)移動(dòng)電話還不兼容媒體查詢或JavaScript時(shí)，“移動(dòng)優(yōu)先”和”漸進(jìn)式增強(qiáng)”的概念就成為了非常流行的方法，當(dāng)時(shí)有很多CSS完全不受支持。
用我們今天的話來說響應(yīng)式設(shè)計(jì)，我們認(rèn)為頁面的布局要適配整個(gè)瀏覽器、屏幕大小和那些需要投射到整個(gè)布局上的限制。當(dāng)需要設(shè)計(jì)從桌面端調(diào)整為移動(dòng)設(shè)備屏幕所需的尺寸時(shí)，我們使用“媒體查詢”來更改整個(gè)頁面布局。
很快，使用這種“響應(yīng)式”設(shè)計(jì)方法可能會(huì)被認(rèn)為與使用表格進(jìn)行頁面布局一樣過時(shí)—就像我們?cè)?0年代所做的那樣。
我們通過基于viewport（視口）的“媒體查詢”獲得了許多強(qiáng)大的工具，但我們也缺乏很多適配的可能性，因?yàn)椤懊襟w查詢”是一個(gè)適用于整個(gè)頁面的通用解決方案，并且對(duì)每個(gè)用戶來說都一樣。我們?nèi)狈憫?yīng)“用戶需求”的能力，也缺乏將“響應(yīng)式”樣式注入“組件”本身的能力。
當(dāng)我們談到組件時(shí)，這里指的是頁面上的“元素”，這些元素可以由其它“元素”的集合組成。例如卡片、橫劃卡或推薦模塊之類的UI內(nèi)容，每個(gè)“塊”都由各種更小的“構(gòu)建塊”組成。這些組件拼湊在一起構(gòu)成我們的網(wǎng)頁。我們可以使用 global viewport information（全局視口信息）來設(shè)置這些組件，但它們?nèi)匀粺o法擁有自己的風(fēng)格。當(dāng)我們的設(shè)計(jì)系統(tǒng)是基于“組件”的而不是基于“頁面”的時(shí)，這使得它變得更加困難。
好消息是這個(gè)生態(tài)系統(tǒng)正在發(fā)生變化，而且它正在迅速變化，這需要我們進(jìn)行一些思維轉(zhuǎn)變：考慮如何設(shè)計(jì)和定義組件樣式以及它們?nèi)绾芜m應(yīng)周圍環(huán)境。
CSS正在不斷發(fā)展，“響應(yīng)式”網(wǎng)頁設(shè)計(jì)的新時(shí)代即將到來。從目前的情況來看，自從我們第一次引入 “響應(yīng)式網(wǎng)頁設(shè)計(jì)” (RWD) 以來，僅僅10多年的時(shí)間，這個(gè)生態(tài)系統(tǒng)已經(jīng)準(zhǔn)備好迎接CSS發(fā)生一些相當(dāng)大的改變。
讓我們深入研究一下可以期待哪些類型的變化，這會(huì)如何改變我們的設(shè)計(jì)方法，以及我們?nèi)绾慰紤]界面設(shè)計(jì)。
簡單來說，我們可以期待新的基于偏好的“媒體查詢”來幫助我們更好地“響應(yīng)”用戶。它們將使我們能夠根據(jù)用戶自己的特定偏好或需求來設(shè)定網(wǎng)頁樣式。這將使我們能夠根據(jù)用戶的體驗(yàn)偏好來調(diào)整用戶體驗(yàn)。
這絕不是一個(gè)完整的列表，但能給你一些想法，這些基于偏好的“媒體查詢”可能包括：
這些將幫助我們構(gòu)建更具活力和個(gè)性化的網(wǎng)頁體驗(yàn)，專門滿足我們用戶的專屬需求，尤其是那些希望網(wǎng)站易于訪問的用戶。更進(jìn)一步說，這些基于偏好的“媒體查詢“尊重任何用戶已經(jīng)在操作系統(tǒng)設(shè)置的偏好。舉個(gè)例子，當(dāng)用戶的操作系統(tǒng)偏好設(shè)定為“減少動(dòng)效”時(shí)，他們很可能不喜歡你頁面上的超級(jí)華麗的介紹、加載或飛入的動(dòng)畫動(dòng)效。我們應(yīng)先尊重他們的偏好，并為其他人提供“動(dòng)效增強(qiáng)”的體驗(yàn)。
另一個(gè)流行的媒體查詢是@prefers-color-scheme（配色偏好設(shè)定），它允許我們根據(jù)用戶的偏好和操作系統(tǒng)中的設(shè)置將我們的設(shè)計(jì)更改為“亮色模式”或“暗色模式”。這不依賴于用戶需要手動(dòng)來更改“暗色模式”，它會(huì)自動(dòng)發(fā)生。
CSS 中最令人興奮的新興領(lǐng)域之一是“容器查詢”（container queries），通常也稱為“元素查詢”。從基于“頁面”的“響應(yīng)式”設(shè)計(jì)到基于“容器”的“響應(yīng)式”設(shè)計(jì)的轉(zhuǎn)變對(duì)發(fā)展“設(shè)計(jì)系統(tǒng)”的作用價(jià)值不容低估，盡管今天使用它并不安全，但重要的是要了解其發(fā)展方向。
簡而言之，“容器查詢”將允許我們基于“父級(jí)容器”而不是整個(gè)頁面來設(shè)置規(guī)則。這意味著任何組件都更加獨(dú)立，與現(xiàn)代設(shè)計(jì)系統(tǒng)保持一致，真正成為“即插即用”模塊，可以轉(zhuǎn)移到任何頁面或布局，而且無需根據(jù)新環(huán)境重新考慮所有內(nèi)容。
“容器查詢”為我們?nèi)绾我?guī)劃、設(shè)計(jì)和構(gòu)建特定組件提供了一種更加動(dòng)態(tài)的方法，因?yàn)榻M件本身擁有它的響應(yīng)信息。
甚至Ethan Marcotte自己也表達(dá)了為什么“容器查詢”如此重要，我們應(yīng)該研究一下。
由于各種“形態(tài)因素”（form factors）的變化和擴(kuò)展，例如新的屏幕類型，可折疊屏，我們需要“媒體查詢”來考慮這些場景。在這里提到的所有內(nèi)容中，請(qǐng)記住，這是最具實(shí)驗(yàn)性的，并且只是一項(xiàng)正在進(jìn)行的工作，仍在嘗試解決我們可能遇到的任何復(fù)雜問題，同時(shí)考慮未來“形體因素”可能會(huì)如何發(fā)展。
在可折疊屏場景中，原型中有一些“媒體查詢”可以讓你定位屏幕跨度以及我們?nèi)绾巫寖?nèi)容根據(jù)新環(huán)境進(jìn)行適配。例如，你可以在一個(gè)屏幕上放置一個(gè)收起的側(cè)邊欄（或菜單），并允許內(nèi)容在另一個(gè)屏幕上展開并隨頁面滾動(dòng)。
我知道你在想什么，我們已經(jīng)從事網(wǎng)頁設(shè)計(jì)并使用“響應(yīng)式”來進(jìn)行網(wǎng)頁設(shè)計(jì)10余年了。我們對(duì)其相當(dāng)滿意，那么為什么要改變呢？如果我們真的以終局視角來看響應(yīng)式設(shè)計(jì)，那么它就是關(guān)于個(gè)人用戶的用戶體驗(yàn)設(shè)計(jì)。我們正朝著一個(gè)與每一位個(gè)體用戶高度相關(guān)的時(shí)代邁進(jìn)。我們的網(wǎng)頁體驗(yàn)應(yīng)該去適應(yīng)用戶的需求偏好。隨著設(shè)計(jì)系統(tǒng)的發(fā)展以及我們?nèi)绾蝿?chuàng)建更便攜的網(wǎng)頁，諸如“容器查詢”之類的工具將變得非常有意義。
配圖：CSS 將基于各個(gè)層級(jí)來確定用戶的最佳體驗(yàn)
考慮到這一點(diǎn)，這意味著我們現(xiàn)在可以使用基于頁面的媒體查（包括跨越屏幕的細(xì)微差別）來設(shè)計(jì)宏觀布局；使用容器查詢的組件設(shè)計(jì)微觀布局；使用基于用戶偏好的媒體查詢，根據(jù)用戶獨(dú)特的偏好和需求定制用戶體驗(yàn)。
對(duì)于新的響應(yīng)式設(shè)計(jì)，有許多新概念正在被原型化和概念化-請(qǐng)看下面的延伸閱讀。所有這些協(xié)同工作的方式需要我們從根本上轉(zhuǎn)變我們對(duì)設(shè)計(jì)和用戶獨(dú)特體驗(yàn)的看法。我們需要更加適應(yīng)這樣一個(gè)事實(shí)：即我們的設(shè)計(jì)不是靜態(tài)的，不僅在布局上，還有在用戶可獲得的體驗(yàn)中，我們需要學(xué)會(huì)在這種模糊性中做出計(jì)劃。網(wǎng)頁和設(shè)計(jì)的未來變得越來越復(fù)雜，我們需要適應(yīng)和挑戰(zhàn)自己，理解“新響應(yīng)式”體驗(yàn)的意義。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加：ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
導(dǎo)語：提起中后臺(tái)，除了高效、靈活和強(qiáng)大之外，不可忽視的還有它的海量數(shù)據(jù)。海量數(shù)據(jù)的篩選與呈現(xiàn)，直接決定決策人員的效率高低。本文作者主要是結(jié)合自己在實(shí)際工作中遇到的表格設(shè)計(jì)問題，針對(duì)Web端數(shù)據(jù)呈現(xiàn)方式之一，表格的設(shè)計(jì)進(jìn)行探討。
表格，是一種常見的信息組織整理手段。常用來展示、保存、對(duì)比分析、排序、篩選 、歸納等，是最清晰、高效的數(shù)據(jù)展現(xiàn)形式之一，由內(nèi)、外兩部分組成。
說完表格的組成，接下來將會(huì)從易讀性和易操作性兩個(gè)方面來分析下表格設(shè)計(jì)。
表格的組成，也可以看作行與列的自由組合，這種組合賦予了表格多樣性的特點(diǎn)。行與列構(gòu)成了單元格的長與高，不同的長高會(huì)有疏密之分，充實(shí)與透氣之感。
B端中后臺(tái)通常會(huì)對(duì)應(yīng)不同的角色及場景需求，根據(jù)目的及信息主體的不同，讓用戶根據(jù)自己的需求來定義表格的展示列及列的順序，也可以通過行與列的顯隱變化，來更好的滿足信息的傳達(dá)。
但需要注意的是系統(tǒng)應(yīng)記住用戶上一次的自定義列設(shè)置，減少用戶重復(fù)操作。對(duì)于列的選擇，應(yīng)盡量減少列的數(shù)量，既要展示用戶必要信息，又要避免出現(xiàn)用戶無關(guān)數(shù)據(jù)，以免信息冗余，影響信息閱讀效率性。對(duì)于用戶需要的非重點(diǎn)、輔助性信息可以通過入口提供的方式來解決。
默認(rèn)排序，應(yīng)從用戶目的出發(fā)，遵循用戶查看數(shù)據(jù)的習(xí)慣，尊重?cái)?shù)據(jù)之間的關(guān)聯(lián)性，設(shè)計(jì)用戶查看、操作數(shù)據(jù)的路徑，而非隨機(jī)排列。
B端中后臺(tái)中的表格展示的數(shù)據(jù)多且雜，這就要為用戶先一步對(duì)數(shù)據(jù)進(jìn)行梳理歸納，提高用戶獲取信息速度。
為便于對(duì)數(shù)據(jù)進(jìn)行對(duì)比分析，一般需要在原始數(shù)據(jù)的基礎(chǔ)上給出差值、升降變化、平均值、總計(jì)等數(shù)據(jù)處理結(jié)果，減少用戶二次加工數(shù)據(jù)的過程，提升用戶閱讀信息的效率。
數(shù)據(jù)匯總展示
在表頭或者表尾分別提供了總計(jì)的數(shù)據(jù)，方便用戶進(jìn)行快速查閱。
數(shù)據(jù)對(duì)齊展示
常用對(duì)齊方式有數(shù)字右對(duì)齊，文字左對(duì)齊，混合型文本左對(duì)齊，列標(biāo)簽的對(duì)齊方式與數(shù)據(jù)的對(duì)齊方式保持一致。這樣能形成的視覺邊界線，便于視線的流動(dòng)，從而快速提升數(shù)據(jù)的瀏覽、對(duì)比效率。
空數(shù)據(jù)展示
B端中后臺(tái)數(shù)據(jù)類型較多，對(duì)于空數(shù)據(jù)，切忌不要與數(shù)據(jù)為“０”進(jìn)行混淆，對(duì)于空數(shù)據(jù)通用做法是用“－”表示，而不是什么都不顯示，會(huì)讓用戶誤以為是沒有數(shù)據(jù)還是“0”數(shù)據(jù)。
最好做法就是為空數(shù)據(jù)做出釋義，可以加在“列標(biāo)簽”的名詞解釋文案中。
數(shù)據(jù)的關(guān)鍵屬性標(biāo)識(shí)展示
對(duì)于用戶重點(diǎn)關(guān)注的數(shù)據(jù)狀態(tài)、上升和下降等，可以用符號(hào)進(jìn)行標(biāo)識(shí)，幫助用戶快速定位到目標(biāo)信息。
在有限屏幕內(nèi)，有限的內(nèi)容展示區(qū)域內(nèi)，閱讀豐富且繁多的表格時(shí)，用戶不得不拖動(dòng)橫向或縱向滾動(dòng)條來閱讀信息。
固定表頭、固定列和固定分頁，能夠讓用戶明白當(dāng)前單元格內(nèi)信息的屬性而不至于不知道該信息的意思。
固定表頭
在固定的小區(qū)域內(nèi)滾動(dòng)會(huì)非常局促，而且區(qū)域滾動(dòng)和全屏滾動(dòng)同時(shí)存在時(shí)體驗(yàn)也很不好。固定表頭可幫助用戶識(shí)別信息，在全屏滾動(dòng)上去后固定表頭，有利于用戶向下翻屏?xí)r能夠便利的閱讀數(shù)據(jù)。
固定列
固定列的內(nèi)容可視業(yè)務(wù)及目標(biāo)用戶的訴求而定，一般采用方法是固定比較重要信息，方便用戶進(jìn)行數(shù)據(jù)定位與對(duì)比，最好可以讓用戶自定義，滿足不同用戶訴求。
固定分頁
分頁處理目前有放在上部、下部或上下部均有，需要根據(jù)場景來選擇。分頁固定目的是為了省去用戶需要翻到頂部或底部進(jìn)行操作的麻煩。
特別是可以自定義每頁的數(shù)量和需要橫向拖動(dòng)數(shù)據(jù)查看，這就需要把分頁固定在底部，方便用戶橫向拖動(dòng)滑條查看信息和進(jìn)行翻頁操作。
在Web端中的表格，涉及到跨頁的數(shù)據(jù)操作時(shí)，分頁會(huì)帶來不便。
但往往受限于數(shù)據(jù)加載的壓力，這種情況在大廠中尤其突出，加載數(shù)據(jù)都是億量級(jí)別的，在Web端和手機(jī)端都需要實(shí)時(shí)下載數(shù)據(jù)的終端，我們通常做法就是提供分頁展示數(shù)據(jù)來緩解服務(wù)器的壓力。
表格中的的數(shù)據(jù)內(nèi)容超過一定“數(shù)量”時(shí)需要提供翻頁功能，而這個(gè)“數(shù)量”是由表頭的數(shù)據(jù)的高度、表格的行間距、目標(biāo)用戶群體的顯示設(shè)備的配置等因素來決定。
原則上整張表不要超過一屏，考慮到每個(gè)用戶的使用習(xí)慣，我們一般提供可以讓用戶自定義每頁的顯示的數(shù)量，相比于跨屏翻頁而言，向下滾屏?xí)憷?，也更符合瀏覽信息路徑。
表格全屏展示是非常有必要的：
在大量的表格信息中，如果沒有篩選查找信息簡直猶如大海撈針，而表格跟篩選是不分家的。
說到表格一定會(huì)說到篩選，篩選也就是數(shù)據(jù)過濾，常在數(shù)據(jù)量較大的場景中使用，其目的是通過關(guān)鍵字搜索和條件篩選能夠幫助用戶快速的找到所需要的信息內(nèi)容。
對(duì)于表格外部篩選，如果有時(shí)間會(huì)單獨(dú)出一篇詳情介紹。這里不展開詳細(xì)說。
篩選根據(jù)篩選功能的位置不同，可分為表外篩選和表內(nèi)篩選。
在信息列數(shù)較多的情況下，數(shù)據(jù)的選擇就尤為重要。當(dāng)鼠標(biāo)指針懸停在表格列或行時(shí)，給予視覺狀態(tài)的變化提示，可以讓用戶捕捉到所在的位置，而不至于視覺上的錯(cuò)行，能夠降低人的心理壓力和增加掌控感。根據(jù)數(shù)據(jù)選擇功能分為單個(gè)選擇和批量選擇。
單個(gè)選擇
鼠標(biāo)指針懸停在整行時(shí)應(yīng)與默認(rèn)態(tài)有所區(qū)分。當(dāng)標(biāo)識(shí)選中行或選中行的數(shù)量，選中行可操作的命令狀態(tài)須同步，明示當(dāng)前行可操作的命令或反饋當(dāng)前已選行的數(shù)量。
批量選擇
提供選擇當(dāng)前頁部分行、選擇全部行、取消選擇全部行三種功能；狀態(tài)反饋分為半選態(tài) 、未選態(tài)、全選態(tài)共三種。
對(duì)于數(shù)據(jù)的操作，主要針對(duì)表格內(nèi)部來說。表格操作大體可分為顯性操作和隱形操作。
顯性操作
指操作選項(xiàng)顯示在行內(nèi)，優(yōu)點(diǎn)是明顯直觀，可以根據(jù)列表上的信息做出快速的判斷并且高頻發(fā)生的操作。
適用列數(shù)較少的列表。但弊端是信息過載，尤其是列數(shù)較多，可展示列數(shù)會(huì)隨操作數(shù)增加而減少，同時(shí)誤操作率較高。對(duì)于危險(xiǎn)系數(shù)比較高的操作，也不建議采用這種設(shè)計(jì)。
隱性操作
當(dāng)鼠標(biāo)懸?；螯c(diǎn)擊時(shí)才顯示其他低頻、高危的操作選項(xiàng)，優(yōu)點(diǎn)是界面簡潔明快，信息密度低，可以幫助頁面突出更加重要的信息，可減輕空間壓力，減少干擾。
弊端是增加用戶的點(diǎn)擊次數(shù)和提高了操作門檻。列數(shù)較少的表格不適用隱性操作。
為方便用戶對(duì)數(shù)據(jù)進(jìn)行再次整合分析、統(tǒng)計(jì)分析等，可提供數(shù)據(jù)下載功能及多種下載格式。
對(duì)于B端中后臺(tái)來說，表格顯示最多就是兩種情況：一種就是表格有數(shù)據(jù)，這種最容易解決，有數(shù)據(jù)就顯示相應(yīng)數(shù)據(jù)；還有一種表格是沒有數(shù)據(jù)，也就是空表狀態(tài)，這也是讓很多設(shè)計(jì)師容易忽略掉的頁面。
空表分兩種：可創(chuàng)建和純展示
可創(chuàng)建
是用戶有創(chuàng)建訴求，數(shù)據(jù)是由用戶或系統(tǒng)產(chǎn)生的，可創(chuàng)建分兩種：
純展示
沒有創(chuàng)建訴求的，數(shù)據(jù)是系統(tǒng)產(chǎn)生的，不是由用戶創(chuàng)建的，直接告之暫無數(shù)據(jù)。
看上去平淡無奇的數(shù)據(jù)表格，其實(shí)是非常重要的，通過合理的組織架構(gòu)和呈現(xiàn)方式，使原本枯燥的數(shù)據(jù)呈現(xiàn)出生命力，這是一件很神奇的事。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
為什么了解網(wǎng)頁布局很重要？網(wǎng)頁布局在很大程度上決定了網(wǎng)站的訪問者將如何與網(wǎng)頁內(nèi)容進(jìn)行交互。
這里將介紹一些常見的網(wǎng)頁布局形式，例如卡片式、分屏布局、網(wǎng)格布局……一起來看看吧！
卡片式布局被Pinterest、臉書和推特等網(wǎng)站所使用，它非常適合在新聞網(wǎng)站和博客上使用，因?yàn)榭ㄆ讲季挚梢栽陧撁嫔戏胖么罅績?nèi)容，同時(shí)又保持每部分內(nèi)容各不相同。
卡片式布局主要有兩種形式：
網(wǎng)頁中每個(gè)卡片的尺寸相同，卡片的排列非常標(biāo)準(zhǔn)，例如Dribbble的網(wǎng)頁布局；
使用不同尺寸的卡片組成頁面的布局，卡片間沒有固定的排序，例如Pinterest、花瓣的頁面布局。
當(dāng)兩個(gè)元素在頁面上具有相等的權(quán)重時(shí)，分屏布局是一種流行的設(shè)計(jì)選擇，并且通常用于文本和圖像都需要突出顯示的設(shè)計(jì)中。
分屏設(shè)計(jì)特別適合電子商務(wù)網(wǎng)站上的產(chǎn)品頁面。產(chǎn)品圖片需要在頁面上突出顯示，但價(jià)格、規(guī)格、購物車按鈕等信息也要顯示。
隨著移動(dòng)設(shè)計(jì)的盛行，大標(biāo)題排版變得流行起來。大號(hào)字體在標(biāo)題中特別流行，在一些網(wǎng)站的正文中也能看到。
較大的文本更具可讀性，可以改善使用體驗(yàn)。另外它還提供了強(qiáng)大的視覺效果，因此這種布局在極簡主義設(shè)計(jì)中特別受歡迎。
個(gè)性化算法推薦可以根據(jù)每個(gè)人的喜好量身定制數(shù)字體驗(yàn)。人工智能技術(shù)的發(fā)展讓算法變得更易用，能精確分析用戶的喜好。
根據(jù)用戶之前的訂閱習(xí)慣，Netflix可以為用戶個(gè)性化推薦他們最有可能觀看的電影。
像Medium這樣的網(wǎng)站會(huì)基于用戶以前閱讀和喜歡的內(nèi)容，向他們展示很多同類型的文章。
網(wǎng)格為設(shè)計(jì)提了視覺上的平秩序感，以一種平衡且有組織的方式呈現(xiàn)內(nèi)容，使內(nèi)容更易于人們使用。
在網(wǎng)格設(shè)計(jì)中使用不同大小的內(nèi)容可以在保持內(nèi)容有序的同時(shí)增加視覺吸引力。
雜志和期刊的布局方式影響了網(wǎng)絡(luò)雜志的版面設(shè)計(jì)。這些網(wǎng)頁布局很適合有大量內(nèi)容的網(wǎng)站，尤其是每天都需要更新內(nèi)容的網(wǎng)站。
單頁布局將網(wǎng)站的所有主要內(nèi)容放在一個(gè)網(wǎng)頁上，通過滾動(dòng)完成導(dǎo)航，有時(shí)還使用視差滾動(dòng)效果。
對(duì)于內(nèi)容稀疏的網(wǎng)站，單頁布局是一個(gè)很好的解決方案。同時(shí)它也是內(nèi)容敘事的完美選擇，比如交互式兒童讀物。
F型和Z型布局是指用戶的視線如何在頁面上移動(dòng)，即用戶如何掃描內(nèi)容。F型布局有非常明確的視覺層次結(jié)構(gòu)，因此適合內(nèi)容更多的頁面。
Z型布局將視線吸引到頂部，然后沿對(duì)角線方向向下延伸到底部，然后再次延伸。
在設(shè)計(jì)中，不對(duì)稱會(huì)產(chǎn)生動(dòng)態(tài)化的視覺沖擊力。大多數(shù)情況下不對(duì)稱是由于圖像和文本間無法平衡而造成的。
由于不對(duì)稱會(huì)產(chǎn)生動(dòng)態(tài)的、充滿活力的視覺印象，因此對(duì)那些想要傳達(dá)這種形象的品牌來說是非常有用的。
這種布局的優(yōu)點(diǎn)在于完全專注于內(nèi)容，沒有視覺上的混亂。
干凈簡單的布局幾乎適用于任何類型的網(wǎng)站。許多優(yōu)雅的網(wǎng)站都可以被認(rèn)為是“簡潔的”，無論它們包含什么設(shè)計(jì)形式。
導(dǎo)航標(biāo)簽適合用于包含少數(shù)項(xiàng)目的菜單，否則導(dǎo)航會(huì)顯得很混亂。
輪播內(nèi)容包含圖像和文本，通常出現(xiàn)在網(wǎng)站的頂部，用來突出顯示內(nèi)容。
好的網(wǎng)頁設(shè)計(jì)具有很強(qiáng)的適應(yīng)性并且對(duì)用戶來說始終是友好的。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
無論作為設(shè)計(jì)師還是普通瀏覽者，大家觀看一個(gè)網(wǎng)站時(shí)最先接觸到的就是網(wǎng)頁的頭部區(qū)域，這部分內(nèi)容為網(wǎng)站的其他各個(gè)方面設(shè)定了基調(diào)，在網(wǎng)頁設(shè)計(jì)中起著非常關(guān)鍵的作用。
尤其是如今簡潔設(shè)計(jì)比較盛行，多數(shù)時(shí)候把頭部內(nèi)容設(shè)計(jì)好就變成了吸引用戶眼球最好的辦法。網(wǎng)頁設(shè)計(jì)師在設(shè)計(jì)網(wǎng)站頭部時(shí)投入了大量精力，同時(shí)要兼顧創(chuàng)造力和實(shí)用性。根據(jù)一項(xiàng)Google的研究，用戶只需要短短數(shù)秒就可以形成對(duì)一個(gè)網(wǎng)站的看法，甚至有些觀點(diǎn)是在令人難以置信的1秒內(nèi)形成的。用戶對(duì)品牌的了解就是從這么短的時(shí)間內(nèi)開始的。
在通常網(wǎng)頁設(shè)計(jì)中，首頁上方的整個(gè)空間都被視為頭部區(qū)域。作為人們?cè)诩虞d網(wǎng)站后的最初幾秒內(nèi)看到部分，頭部信息起到了一種邀請(qǐng)作用，它應(yīng)該提供有關(guān)網(wǎng)站的基本信息，以便用戶能夠在幾秒內(nèi)了解網(wǎng)站的主要內(nèi)容。
如果以招聘活動(dòng)站點(diǎn)為例，整個(gè)頭部區(qū)域設(shè)計(jì)要明確傳達(dá)企業(yè)形象，及本次招聘活動(dòng)的特點(diǎn)。給瀏覽者一個(gè)強(qiáng)烈的視覺印象，企業(yè)已向你發(fā)出邀請(qǐng)，我們對(duì)人才十分渴求，等等信息… 如果有線上線下活動(dòng)同時(shí)參與，那么在整體風(fēng)格上盡量保持一致。
網(wǎng)頁頭部的任務(wù)是給用戶提供一些基本問題的答案：代表什么品牌，提供什么服務(wù)等等。如果我們?cè)趦?nèi)容上引起了用戶情感上的共鳴，那么就是正確的設(shè)計(jì)。
那么主要元素通常包括：
在設(shè)計(jì)網(wǎng)站頭部內(nèi)容時(shí)，從思維層面來講沒有任何東西會(huì)限制你的創(chuàng)造力，它應(yīng)該是令人難忘的、簡潔和兼具實(shí)用性的，是一個(gè)可以展示創(chuàng)造性的開放領(lǐng)域。
下面讓我們一起來看看頭部內(nèi)容設(shè)計(jì)的一些技巧。
1. 關(guān)于尺寸
對(duì)于網(wǎng)頁頭部圖片的大小是沒有統(tǒng)一的答案。有時(shí)候設(shè)計(jì)師希望提供相對(duì)固定的數(shù)字，但網(wǎng)頁設(shè)計(jì)最大的難點(diǎn)之一是很難確保每個(gè)屏幕尺寸的有效性。即使兩個(gè)屏幕的尺寸相同，分辨率也可能不同，因此用戶看到的內(nèi)容也不一定完全一樣。
因此，我們不要拘泥于精確的像素概念，最好遵循經(jīng)驗(yàn)積累的常識(shí)規(guī)則。
頭部的高度本著不干擾內(nèi)容感知的基本原則。對(duì)于一些展示信息資源的頁面，較小的頭部區(qū)域是一個(gè)不錯(cuò)的選擇，而對(duì)于落地頁或者企業(yè)客戶首頁，頭部區(qū)域可能會(huì)更大，而且多數(shù)大客戶會(huì)有主視覺單屏展示頁。
如果某些網(wǎng)頁，例如落地頁頭部內(nèi)容較長的情況下，最好在首屏給下一屏內(nèi)容露出一些空間，這樣用戶就可以意識(shí)到下一頁還有內(nèi)容，引導(dǎo)用戶滾動(dòng)。
2. Logo展現(xiàn)
當(dāng)一個(gè)人發(fā)現(xiàn)自己在陌生網(wǎng)站上，總是習(xí)慣于從屏幕的左上角開始瀏覽網(wǎng)站。盡管設(shè)計(jì)師有時(shí)候認(rèn)為打破常規(guī)的布局也可以帶來不錯(cuò)的效果，但是多數(shù)用戶如果他們常規(guī)位置找不到預(yù)期的信息，將會(huì)不假思索地認(rèn)為這個(gè)頁面是難用的和不規(guī)范的，需要花費(fèi)很多的努力才能理解。這就要看你的設(shè)計(jì)目的和受眾群體能夠接受哪些程度的變化，我們今天主要說大多數(shù)受眾。
Logo ——與居中或右側(cè)放置相比，用戶更容易記住那些 Logo 放在左邊的品牌。如果你使用的是圓形 Logo，那么可以把它居中放置，盡管它的有效性仍然比放在左側(cè)要低。
3. 吸頂導(dǎo)航欄
吸頂導(dǎo)航，換句話說就是「粘性標(biāo)題」，當(dāng)你滾動(dòng)頁面時(shí)，導(dǎo)航區(qū)在頁面中跟隨，現(xiàn)在成為一個(gè)網(wǎng)頁設(shè)計(jì)標(biāo)準(zhǔn)。如果不違反網(wǎng)站整體設(shè)計(jì)理念，請(qǐng)將導(dǎo)航欄吸頂固定。無論是PC端還是移動(dòng)端設(shè)計(jì)，這都是一個(gè)好的選擇：
可根據(jù)頁面內(nèi)容展示要求，向下滾動(dòng)時(shí)調(diào)整導(dǎo)航背景透明度，盡量少的影響內(nèi)容展示同時(shí)使頁面看起來更生動(dòng)和通透。還可以在滾動(dòng)時(shí)簡化導(dǎo)航欄樣式或高度，使用戶能找到但又不過于搶眼。
總之，固定導(dǎo)航欄有助于提升用戶體驗(yàn)，保持用戶導(dǎo)向并給予了他們更多控制權(quán)。
3. 關(guān)于圖片的應(yīng)用
頭部內(nèi)容所用圖片可以選擇直接和要表達(dá)的業(yè)務(wù)相關(guān)性很強(qiáng)的，例如招聘類網(wǎng)站使用招聘場景圖片；也可以選擇中性感覺的例如辦公場景、城市風(fēng)景類圖片進(jìn)行虛化降低清晰度或明度來突出前景內(nèi)容；
高質(zhì)量圖片——攝影對(duì)于網(wǎng)頁設(shè)計(jì)師來說是一個(gè)強(qiáng)大的工具。它可以講述一個(gè)故事，喚起用戶的情感，并鼓勵(lì)訪問者進(jìn)一步滾動(dòng)。對(duì)于那些有強(qiáng)烈沖擊力的圖片的網(wǎng)站，試著做一個(gè)透明的標(biāo)題，它可以更好地顯示圖像，并保留了主要鏈接。
輪播圖片——如果客戶給了幾張代表該企業(yè)業(yè)務(wù)的出色照片，這種方式就沒錯(cuò)！企業(yè)希望用戶可以滾動(dòng)瀏覽一組精美的高分辨率圖像。
插畫——網(wǎng)站的頭部圖片必須能引起讀者的共鳴，建立起人與人之間的聯(lián)系。如果圖片是獨(dú)特的且易于辨認(rèn)，即使是從網(wǎng)站標(biāo)題中剪切出來，效果也會(huì)很好，可以利用當(dāng)今的插圖潮流來實(shí)現(xiàn)這一點(diǎn)。
4. 視頻或動(dòng)畫
當(dāng)然我們也不能只關(guān)注靜態(tài)圖片，添加視頻也是最有效的網(wǎng)站頭部創(chuàng)意之一。如果可能的話，嘗試著在頭部內(nèi)容中添加主題視頻材料，很多網(wǎng)站利用在背景中添加短視頻來吸引用戶，盡可能以最好的方式展示他們的公司或產(chǎn)品。
△ 華夏幸福校招官網(wǎng)首頁動(dòng)畫，撥云見日的效果加上中式剪紙風(fēng)格的運(yùn)用，將公司各業(yè)務(wù)線融合到幾個(gè)轉(zhuǎn)輪中，產(chǎn)生了故事性的動(dòng)畫場景。
如果想要使設(shè)計(jì)更具吸引力、生動(dòng)和令人難忘的另一種方法是添加動(dòng)畫。它可以使網(wǎng)站頭部內(nèi)容變得非常酷。以每季校園招聘企業(yè)站點(diǎn)為例，各大公司對(duì)應(yīng)屆生群體的追逐，很大程度上體現(xiàn)在對(duì)該群體審美和喜好的迎合上，年輕有活力的動(dòng)畫或視頻元素絕對(duì)是吸引眼球的不二之選。
當(dāng)然不一定只有滿屏大型動(dòng)畫，一般動(dòng)畫越復(fù)雜面積越大占用流量越多，客戶打開延遲也影響觀感。這時(shí)候我們可以根據(jù)功能不同，設(shè)計(jì)一些交互性的動(dòng)畫，去提升客戶使用感受，盡量不影響網(wǎng)頁打開速度。
5. 移動(dòng)端頭部設(shè)計(jì)
網(wǎng)頁頭部不可能只顯示PC端的網(wǎng)頁上，還應(yīng)該正確顯示在移動(dòng)端的網(wǎng)頁上。因此，在近年的設(shè)計(jì)中，網(wǎng)頁必須具有響應(yīng)性，并且能夠很好地適應(yīng)各種移動(dòng)設(shè)備，這樣才能帶給用戶完整的設(shè)計(jì)體驗(yàn)。
移動(dòng)設(shè)備的日常使用廣泛性早已影響網(wǎng)站設(shè)計(jì)，即使在PC中，也有一些細(xì)節(jié)看起來像是面向移動(dòng)設(shè)備的網(wǎng)站設(shè)計(jì)。例如，Banner和漢堡包菜單都起源于移動(dòng)設(shè)計(jì)。
移動(dòng)端有著與PC端不同的屏幕尺寸和操作方式，很多時(shí)候需要設(shè)計(jì)師在一開始就考慮到兩種界面的適應(yīng)情況，比如在PC上頂部一條的導(dǎo)航，到移動(dòng)端就演變?yōu)橐粋€(gè)漢堡包菜單。而原本PC頁面中展開顯示的內(nèi)容，在移動(dòng)端會(huì)向下層延伸，首層界面成為一個(gè)內(nèi)容聚合頁。
網(wǎng)站是以頭部內(nèi)容為先導(dǎo)的，它就像是一張獨(dú)特的名片。因此，我們?cè)谠O(shè)計(jì)網(wǎng)站時(shí)，盡可能最大限度地關(guān)注該區(qū)域。
最后還要提醒大家，一定記得定期更新網(wǎng)站頭部內(nèi)容哦！以校園招聘大客戶為例，大多數(shù)企業(yè)都會(huì)在每年春秋兩季的招聘旺季更新其招聘主題風(fēng)格，以保持網(wǎng)站的新鮮感和時(shí)效性。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn
