傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)正在尋求改變，一個(gè)好的網(wǎng)頁(yè)設(shè)計(jì)變得越來(lái)越重要。今天我就和大家分享一篇關(guān)于網(wǎng)頁(yè)設(shè)計(jì)的好文章，教大家如何設(shè)計(jì)，把觀眾的視野引導(dǎo)到你的重點(diǎn)。

　　首先要有一個(gè)視覺(jué)點(diǎn)，引導(dǎo)或者聚集視線。點(diǎn)的形狀并不都是圓，或者一些具體的元素。

　　大小對(duì)比關(guān)系出現(xiàn)在整個(gè)頁(yè)面，所以小元素可以稱為點(diǎn)。大元素也可以叫點(diǎn)，是一個(gè)相對(duì)的名詞。事實(shí)上，當(dāng)頁(yè)面上出現(xiàn)一點(diǎn)點(diǎn)時(shí)，它可以很快吸引用戶的注意力。當(dāng)它再次出現(xiàn)時(shí)，用戶的注意力在觀察圖片時(shí)會(huì)分散。當(dāng)不同大小的點(diǎn)同時(shí)出現(xiàn)時(shí)，用戶會(huì)先關(guān)注較大的點(diǎn)，再關(guān)注較小的點(diǎn)。

　　左上：因?yàn)轭伾珜?duì)比和面積對(duì)比，視線會(huì)先集中在右邊鮮紅色的草莓上。點(diǎn)在這里是相對(duì)的，你可以把所有出現(xiàn)的元素看成點(diǎn)。但首先會(huì)有一個(gè)吸引用戶注意力的焦點(diǎn)；

　　右上角：點(diǎn)的焦點(diǎn)設(shè)計(jì)，中心位置讓用戶直接關(guān)注中心內(nèi)容；

　　左下角：這里的點(diǎn)甚至是頁(yè)面上的亮點(diǎn)。右邊沖出畫(huà)面的是騎手。這樣的表現(xiàn)打破了畫(huà)面的穩(wěn)定性，讓用戶關(guān)注到最先打破畫(huà)面的人物，也體現(xiàn)了戶外騎行的自然和冒險(xiǎn)；

　　右下：點(diǎn)的集中設(shè)計(jì)，中間的圓圈是點(diǎn)，兩邊的餐具是線，屬于典型的中心構(gòu)圖；

　　在實(shí)際應(yīng)用中，它可以分為：

　　相同的焦點(diǎn)

　　首先吸引人們注意力的元素。圖中的點(diǎn)在大小、顏色、形狀上都有明顯的對(duì)比。

　　三大亮點(diǎn)

　　意味著畫(huà)面中的點(diǎn)的形狀或細(xì)節(jié)與其他元素不同，成為畫(huà)面中的主要視覺(jué)。

　　左圖：以手繪黑白線條為主，利用原色食物形成畫(huà)面的視覺(jué)點(diǎn)，引導(dǎo)用戶跳躍式瀏覽；

　　右：中心點(diǎn)設(shè)計(jì)，視覺(jué)會(huì)聚焦的地方。大面積的留白讓畫(huà)面干凈，除了主產(chǎn)品，沒(méi)有其他元素干擾視線?；谌N不同的場(chǎng)景，向用戶推薦不同的產(chǎn)品；

　　當(dāng)你在設(shè)計(jì)時(shí)，

　　1當(dāng)畫(huà)面元素對(duì)比不明顯，整體視覺(jué)一般時(shí)：可以根據(jù)設(shè)計(jì)需要和活動(dòng)調(diào)整設(shè)計(jì)元素的大小或顏色，使要突出的點(diǎn)的對(duì)比更加突出。

　　當(dāng)版面文字過(guò)多時(shí)，用戶首先不知道看什么。這時(shí)可以嘗試處理主副本的字體和顏色，讓用戶的視線有一個(gè)焦點(diǎn)?；蛘呖梢試L試調(diào)整文字的層次，讓突出的突出，弱化的弱化。

　　第二，人物動(dòng)作設(shè)計(jì)很多，要手、眼、身、腳來(lái)完成！

　　行動(dòng)和行為的方向性。這種指向可以通過(guò)模型擺出的各種姿勢(shì)來(lái)體現(xiàn)，也可以通過(guò)調(diào)整模型元素的方向和位置以及排版來(lái)完成。在做一些以模型為主要元素的設(shè)計(jì)時(shí)，可以很好的利用模型的每一個(gè)動(dòng)作。在實(shí)際應(yīng)用中：

　　比如在表達(dá)一些體育活動(dòng)時(shí)，運(yùn)動(dòng)和活力是這類需求的主要切入點(diǎn)。在人物動(dòng)作的選擇上，盡量找一些動(dòng)作大、夸張的模特來(lái)滿足“動(dòng)”的基本要求。

　　左圖：模特角色伸開(kāi)雙臂的動(dòng)作中，握球的左手位置正好放在文字上，文字顏色為白色，讓用戶第一時(shí)間關(guān)注到那部分內(nèi)容。在右手所示的位置，有一個(gè)扶地的動(dòng)作，而且這個(gè)動(dòng)作還巧妙的結(jié)合了推薦商品，讓用戶可以直觀的瀏覽和關(guān)注。

　　右：褶皺上方，圖中模特的動(dòng)作有一絲“炫耀”的意味，向用戶展示他的8塊腹肌(嘻嘻)。第二，字符顯示的拳頭指向也使用戶的視覺(jué)焦點(diǎn)接近屏幕左側(cè)的文字。在第二個(gè)屏幕中，模型眼睛顯示的方向正好指向正確的內(nèi)容。

　　當(dāng)你在設(shè)計(jì)時(shí)，

　　1.在選擇大型模型時(shí)，首先要考慮的是，在使用模型作為主要視覺(jué)元素時(shí)，模型的動(dòng)作是否要結(jié)合文案和構(gòu)圖的需要。然后選擇或拍攝適合活動(dòng)目的且有方向的動(dòng)作素材；

　　2使用模型素材時(shí)，充分利用模型的動(dòng)作、表情、眼神的視覺(jué)方向，根據(jù)瀏覽軌跡將合適的內(nèi)容排列到正確的位置。

　　3.眼睛的作用意味著模型在具體內(nèi)容上有明確的方向。當(dāng)你看著我，當(dāng)我看著你，當(dāng)你看著它，當(dāng)人們注意到視線的運(yùn)動(dòng)時(shí)，注意力的焦點(diǎn)就會(huì)相應(yīng)地調(diào)整。

　　在實(shí)際應(yīng)用中：

　　當(dāng)你用不同的眼睛觀察事物時(shí)，其實(shí)你的眼睛有指向目的的作用。人們會(huì)在你眼睛所指的方向關(guān)注過(guò)去。它意味著用戶的眼睛跟隨模型或元素的方向，并注意指定的信息。這是一種利用模特的眼睛來(lái)吸引用戶注意力的方式。

　　左：人物向上的眼睛引導(dǎo)用戶先把注意力集中在人物的上半身，然后順著人物向上的眼睛去關(guān)注人物上方的四條信息。

　　左圖：人物的正面、向上、右眼都是引導(dǎo)用戶的眼睛到相應(yīng)的信息。

　　當(dāng)你在設(shè)計(jì)時(shí)，

　　1按照模特臉部的方向和眼睛所指的方向，將重要和次要信息排列到相應(yīng)的位置。這意味著用戶的眼睛正朝著所示的方向看。

　　不要忽視模特的表情，這也很重要。想象一下，當(dāng)你想表達(dá)一幅天真爛漫的畫(huà)面時(shí)，你選擇的模特表情僵硬，眼神呆滯，好像欠了500的工資。是不是看起來(lái)很傻？

　　三，上下左右中間前后左右！

　　方向，用來(lái)表示某個(gè)位置。箭頭、直線、斜線都有明確的方向性，是引導(dǎo)用戶視線的好元素。它不僅具有清晰的方向性，而且可以分層分離圖片和空間信息。在某些場(chǎng)景中，最有方向性的元素是各個(gè)方向的箭頭。它是一個(gè)提示用戶和暗示動(dòng)作的設(shè)計(jì)元素。

　　在實(shí)際應(yīng)用中：

　　如果想指出需要注意的地方，最好的辦法就是使用線條和箭頭的指向，可以方便的引導(dǎo)用戶的視線。

　　左：線條有明顯的指向性和節(jié)奏感。直線有男性的特點(diǎn)，力量大，相對(duì)穩(wěn)定。曲線有柔和平滑的印象；

　　左：垂直線，具有清晰的上下指向功能。

　　當(dāng)你在設(shè)計(jì)時(shí)，

　　1在時(shí)尚和服裝的設(shè)計(jì)要求上，靈活運(yùn)用短、短線元素，可以幫助你加強(qiáng)文字層次，修改畫(huà)面細(xì)節(jié)，提示權(quán)重。不同的線條有不同的視覺(jué)。比如粗線條給人強(qiáng)烈的男性印象；曲線給人柔和優(yōu)雅的感覺(jué)；

　　2使用線條、短線、箭頭元素時(shí)，一定要加入，以指向清楚為目的。不要為了加而加。

　　第四，萬(wàn)柳叢中的一點(diǎn)紅色，誘導(dǎo)聚焦和凸顯

　　楊柳中的一點(diǎn)點(diǎn)紅色，從這句話折射出顏色的方向性。它的優(yōu)點(diǎn)是直接使主體在成千上萬(wàn)個(gè)元素的干擾下脫穎而出，立即抓住用戶的視覺(jué)。

　　左上：人物慢慢撕碎的紅色內(nèi)容成為用戶關(guān)注的第一焦點(diǎn)，面無(wú)表情的人物給畫(huà)面造成一種詭異恐怖的感覺(jué)。

　　右上角：科比的湖人黃首成為視覺(jué)焦點(diǎn)，引導(dǎo)用戶關(guān)注他經(jīng)典的鄧蘭動(dòng)作。

　　左下角：紅線的使用提示用戶繼續(xù)向下瀏覽，零散細(xì)長(zhǎng)的短紅線自由無(wú)序地放置在頁(yè)面的主要內(nèi)容上，使用戶的視覺(jué)焦點(diǎn)集中在這些線所指示的內(nèi)容上。

　　右下：紅色和黑色的對(duì)比使得人物左側(cè)的紅色更加明顯。

　　在實(shí)際應(yīng)用中，可以分為兩種情況：

　　同樣的歸納

　　面對(duì)大幅面的文字、元素、圖像信息，人的眼睛需要引導(dǎo)，色彩是最直白的形式之一。

　　通過(guò)對(duì)色彩的合理運(yùn)用，強(qiáng)調(diào)最重要的信息，最大化色彩對(duì)比度。如果色彩的引導(dǎo)輔以元素指向和動(dòng)作指向，那么色彩指向的影響會(huì)更大。

　　左：是典型的青紅搭配。整體顏色的綠化，讓頁(yè)面底部的紅色瓶子凸顯出來(lái)。用戶按照瀏覽習(xí)慣從上到下看完之后，視線就固定在這個(gè)紅色的元素上。

　　右：在圖片的左右兩側(cè)分別放置明亮的、對(duì)比鮮明的色塊，讓用戶的眼睛隨著這些色塊一起移動(dòng)，既激活了圖片，又豐富了整體效果。

　　通過(guò)上面的例子，色彩感應(yīng)的效果類似于配色中的點(diǎn)睛之筆色彩。用對(duì)比色和互感色展示你想突出的東西。把所有人聚集在一起

　　當(dāng)圖片中有兩種以上的顏色時(shí)，用戶的眼睛會(huì)首先聚焦在對(duì)比度強(qiáng)、面積大的突出顏色上，然后找到另一種顏色，然后瀏覽全部。

　　通過(guò)上面的例子，色彩聚合的核心功能是對(duì)你想要突出的內(nèi)容進(jìn)行高亮、對(duì)比、聚焦，讓用戶留在這里閱讀你想要傳達(dá)給他們的信息。

　　當(dāng)你在設(shè)計(jì)時(shí)，

　　1.當(dāng)主要內(nèi)容用對(duì)比強(qiáng)烈的補(bǔ)色突出時(shí)，這種對(duì)焦方式更有效；

　　2如果圖片中有多種顏色，可以用顏色的面積將頁(yè)面上出現(xiàn)的所有信息分級(jí)到一個(gè)重要的級(jí)別。

　　第五，設(shè)計(jì)中有很多留白，主角旁邊面積大

　　消隱，一種常見(jiàn)的強(qiáng)制神器，突出了主角的本質(zhì)招數(shù)。如果以上方法都是在做加法設(shè)計(jì)，那么留白實(shí)際上就是在做減法設(shè)計(jì)。當(dāng)引導(dǎo)元素周圍有大量空白時(shí)，眼睛會(huì)從整個(gè)頁(yè)面的復(fù)雜環(huán)境中毫無(wú)阻礙地首先找到設(shè)計(jì)元素。

　　在實(shí)際應(yīng)用中：

　　留白是留下主角、留白、層次、約束的簡(jiǎn)單設(shè)計(jì)方法?？瞻椎摹鞍住敝傅氖强瞻椎摹鞍住保皇穷伾??？瞻资侵改硞€(gè)區(qū)域沒(méi)有冗余元素，周圍有大面積空白的狀態(tài)。

　　左：面向產(chǎn)品的主題，只有幾個(gè)信息頁(yè)，圍繞產(chǎn)品進(jìn)行大規(guī)模的空白處理，使產(chǎn)品形式和細(xì)節(jié)更加集中。同時(shí)，留白的處理也提升了品牌的品質(zhì)和氣質(zhì)。

　　右：整頁(yè)有很多空白頁(yè)。除了一些平面的設(shè)計(jì)元素，主畫(huà)面以“白色”的形式出現(xiàn)。

　　當(dāng)你在設(shè)計(jì)時(shí)，

　　1.有效的留白可以改善框架，讓主角被凸顯的更加突出；

　　2.敢留白：大量的留白會(huì)讓頁(yè)面有空間感，不會(huì)被頁(yè)面內(nèi)容的密集所惡心。

　　3.使用最簡(jiǎn)單的元素：不添加不必要的設(shè)計(jì)元素，給用戶帶來(lái)視覺(jué)干擾，只保留核心和必要的關(guān)鍵元素，對(duì)關(guān)鍵元素進(jìn)行詳細(xì)描述。

　　六，一二三四五六七，7654321

　　數(shù)字定向，序列的方向性。大多數(shù)人都有這樣的經(jīng)歷，看到數(shù)字1就要找數(shù)字2。在一些需求中，當(dāng)用戶的眼睛需要用視覺(jué)來(lái)畫(huà)的時(shí)候，數(shù)字要作為頁(yè)眉，這樣用戶的眼睛才能在頁(yè)面中合理的跳轉(zhuǎn)。

　　在實(shí)際應(yīng)用中：

　　數(shù)字元素的使用經(jīng)常出現(xiàn)在目錄頁(yè)、開(kāi)發(fā)歷史或產(chǎn)品安排中。

　　左上角：魯尼的踢腿動(dòng)作和方向正好指向右邊的內(nèi)容區(qū)，數(shù)字代表的表頭指示用戶一個(gè)一個(gè)讀或者分開(kāi)讀。

　　左下角：產(chǎn)品周圍很大一片空白區(qū)域，讓主角最先被注意到。右側(cè)白色標(biāo)題號(hào)突出產(chǎn)品折扣。右：數(shù)字是用來(lái)指示用戶繼續(xù)往下讀的。黃色和黑色形成強(qiáng)烈對(duì)比。

　　當(dāng)你在設(shè)計(jì)時(shí)，

　　1.做時(shí)尚搭配需求時(shí)，可以用數(shù)字來(lái)引導(dǎo)產(chǎn)品的順序；

　　2.當(dāng)使用數(shù)字作為元素時(shí)，數(shù)字的大小和字體應(yīng)該作為一個(gè)整體來(lái)控制。數(shù)字一定不能影響主要內(nèi)容。當(dāng)然，如果以數(shù)字為主要內(nèi)容，就要盡量突出數(shù)字的直觀性。

　　七、動(dòng)得太多是吵，靜得太死是悶

　　運(yùn)動(dòng)就是畫(huà)面的靜止和運(yùn)動(dòng)。動(dòng)態(tài)元素在整個(gè)靜態(tài)頁(yè)面中對(duì)用戶更有吸引力。當(dāng)然這包括頁(yè)面上的gif圖片，視覺(jué)元素的動(dòng)態(tài)表達(dá)等等。

　　在實(shí)際應(yīng)用中：

　　動(dòng)作的表現(xiàn)可以利用人物的動(dòng)作，產(chǎn)品的動(dòng)作，gif圖來(lái)完成動(dòng)作的執(zhí)行。但是，在同一個(gè)屏幕的頁(yè)面中，最好不要同時(shí)移動(dòng)三個(gè)以上的元素，因?yàn)槊恳粋€(gè)動(dòng)作都會(huì)引起人們的視覺(jué)噪音，如果移動(dòng)太多，必然會(huì)分散用戶的注意力。使溝通的主要內(nèi)容，弱化。

　　當(dāng)你在設(shè)計(jì)時(shí)，

　　1.瞬間讓元素動(dòng)態(tài)：給元素添加運(yùn)動(dòng)模糊；給圖片添加飛行元素，如紙屑、紅包、斜線等。

　　雙動(dòng)頁(yè)面還可以利用流行的h5、視差滾動(dòng)等技術(shù)，根據(jù)用戶的鼠標(biāo)滾動(dòng)，使頁(yè)面中不同的元素相應(yīng)出現(xiàn)；

　　八、文案設(shè)計(jì)的構(gòu)思，與主題密切相關(guān)，有內(nèi)涵

　　文案，用文字引導(dǎo)用戶創(chuàng)造畫(huà)面感。

　　上圖是我下班路上取的酒店名字。好名字真的很讓人難忘。

　　在實(shí)際應(yīng)用中：

　　相比較而言，文字雖然沒(méi)有色彩那么真實(shí)，沒(méi)有人物動(dòng)作那么明顯，但卻是最能進(jìn)入人心的形式。

　　左：設(shè)計(jì)師像土豪一樣，完全找到了文案和形象的切入點(diǎn)，結(jié)合漫畫(huà)表現(xiàn)，畫(huà)出的形象生動(dòng)地展現(xiàn)了一些土豪的“英氣”。

　　對(duì)：頂減50%，不遺余力。設(shè)計(jì)師通過(guò)文案的發(fā)散，畫(huà)出了一個(gè)燃燒的機(jī)器，仿佛襯托出了全場(chǎng)的感覺(jué)。