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

　　首先要有一個視覺點，引導或者聚集視線。點的形狀并不都是圓，或者一些具體的元素。

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

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

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

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

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

　　在實際應用中，它可以分為：

　　相同的焦點

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

　　三大亮點

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

　　左圖：以手繪黑白線條為主，利用原色食物形成畫面的視覺點，引導用戶跳躍式瀏覽；

　　右：中心點設計，視覺會聚焦的地方。大面積的留白讓畫面干凈，除了主產(chǎn)品，沒有其他元素干擾視線。基于三種不同的場景，向用戶推薦不同的產(chǎn)品；

　　當你在設計時，

　　1當畫面元素對比不明顯，整體視覺一般時：可以根據(jù)設計需要和活動調(diào)整設計元素的大小或顏色，使要突出的點的對比更加突出。

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

　　第二，人物動作設計很多，要手、眼、身、腳來完成！

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

　　比如在表達一些體育活動時，運動和活力是這類需求的主要切入點。在人物動作的選擇上，盡量找一些動作大、夸張的模特來滿足“動”的基本要求。

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

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

　　當你在設計時，

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

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

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

　　在實際應用中：

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

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

　　左圖：人物的正面、向上、右眼都是引導用戶的眼睛到相應的信息。

　　當你在設計時，

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

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

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

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

　　在實際應用中：

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

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

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

　　當你在設計時，

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

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

　　第四，萬柳叢中的一點紅色，誘導聚焦和凸顯

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

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

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

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

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

　　在實際應用中，可以分為兩種情況：

　　同樣的歸納

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

　　通過對色彩的合理運用，強調(diào)最重要的信息，最大化色彩對比度。如果色彩的引導輔以元素指向和動作指向，那么色彩指向的影響會更大。

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

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

　　通過上面的例子，色彩感應的效果類似于配色中的點睛之筆色彩。用對比色和互感色展示你想突出的東西。把所有人聚集在一起

　　當圖片中有兩種以上的顏色時，用戶的眼睛會首先聚焦在對比度強、面積大的突出顏色上，然后找到另一種顏色，然后瀏覽全部。

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

　　當你在設計時，

　　1.當主要內(nèi)容用對比強烈的補色突出時，這種對焦方式更有效；

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

　　第五，設計中有很多留白，主角旁邊面積大

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

　　在實際應用中：

　　留白是留下主角、留白、層次、約束的簡單設計方法?？瞻椎摹鞍住敝傅氖强瞻椎摹鞍住?，而不是顏色。空白是指某個區(qū)域沒有冗余元素，周圍有大面積空白的狀態(tài)。

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

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

　　當你在設計時，

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

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

　　3.使用最簡單的元素：不添加不必要的設計元素，給用戶帶來視覺干擾，只保留核心和必要的關(guān)鍵元素，對關(guān)鍵元素進行詳細描述。

　　六，一二三四五六七，7654321

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

　　在實際應用中：

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

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

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

　　當你在設計時，

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

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

　　七、動得太多是吵，靜得太死是悶

　　運動就是畫面的靜止和運動。動態(tài)元素在整個靜態(tài)頁面中對用戶更有吸引力。當然這包括頁面上的gif圖片，視覺元素的動態(tài)表達等等。

　　在實際應用中：

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

　　當你在設計時，

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

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

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

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

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

　　在實際應用中：

　　相比較而言，文字雖然沒有色彩那么真實，沒有人物動作那么明顯，但卻是最能進入人心的形式。

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

　　對：頂減50%，不遺余力。設計師通過文案的發(fā)散，畫出了一個燃燒的機器，仿佛襯托出了全場的感覺。