1、 Pretreatment process

要讓網(wǎng)站能在同類產(chǎn)品中脫穎而出，就一定要設(shè)計獨特，且能夠傳遞出全新的服務(wù)和遠景。這就需要設(shè)計師針對用戶和市場進行研究和探索，利用色彩和形狀等元素作為設(shè)計的突破口，通過尋求不同的組合方式，完成整個設(shè)計。

To make the website stand out in similar products, it must be unique in design and be able to deliver a new service and vision. This requires designers to research and explore for users and the market, using color, shape and other elements as a breakthrough in the design, by seeking different combinations to complete the whole design.

二、草稿和線框圖

2、 Drafts and wireframes

在設(shè)計初期，設(shè)計師可以構(gòu)建幾個簡單的布局，每種布局都有著不同的側(cè)重點和優(yōu)勢。然后，將不同的構(gòu)思和不同的部分構(gòu)建成獨立的頁面，通過分析和研究用戶的注意力主要集中的哪些信息。由于整體結(jié)構(gòu)不用包含很多元素，所以只需要繪制大概的線框圖就可以。通過手繪的方法呈現(xiàn)腦中的構(gòu)思，可以幫助設(shè)計師更好地琢磨和研究整個網(wǎng)頁設(shè)計。

In the early stage of design, designers can build several simple layouts, each with different emphasis and advantages. Then, different ideas and different parts are built into independent pages, through the analysis and research of which information the user's attention focuses on. Because the overall structure does not contain many elements, it only needs to draw a general wireframe. Through the hand-painted method to present ideas in the mind, designers can better ponder and study the whole web design.

三、UI設(shè)計

3、 UI design

接下來就是網(wǎng)頁設(shè)計中關(guān)鍵的過程——UI設(shè)計。UI設(shè)計部分我們會著重看看首屏設(shè)計，因為首頁是與用戶互動密切的頁面。

Next is the key process of web design UI design. In the UI design part, we will focus on the first screen design, because the home page is closely interactive with users.

首屏設(shè)計需要包含公司名稱、Slogan和引動用戶向下滾動瀏覽的箭頭，另外我們還可以為搭配色彩明亮、引人矚目的背景(這主要是根據(jù)網(wǎng)站的定位和方向而定)。其次，我們可以采用幾何圖形、漸變色彩、動效設(shè)計等，營造出豐富的層次感，使畫面變得更加生動有趣。

The first screen design needs to include the company name, slogan and the arrow that moves the user to scroll down. In addition, we can also match the bright and eye-catching background (mainly depending on the positioning and direction of the website). Secondly, we can use geometric graphics, gradient color, dynamic effect design to create a rich sense of hierarchy, so that the picture becomes more vivid and interesting.

四、色彩的選取

4、 Color selection

色彩的選取是整個設(shè)計中有趣的部分，設(shè)計師可以根據(jù)和需求確定幾種不同的配色方案，在其中挑選出對比度和協(xié)調(diào)度較高的組合。然后在具體的順序和搭配上玩出多種花樣，制作出能一下子就吸引用戶眼球的色彩搭配，但這需要持續(xù)地嘗試和探索，才能成功。

Color selection is an interesting part of the whole design. Designers can determine several different color schemes according to the brand and demand, and select the combination with higher contrast and coordination. Then in the specific order and collocation to play a variety of patterns, to make a color match that can attract the user's attention at once, but it needs to continue to try and explore, in order to succeed.

五、添加動畫效果

5、 Add animation

網(wǎng)站添加動畫效果，能讓各種元素之間的互動和聯(lián)系變得更加自然。一個優(yōu)秀的動效設(shè)計，能讓產(chǎn)品變得更加友好，更容易抓住用戶的眼球，而且還不會讓用戶分心。

Adding animation to the website can make the interaction and connection between various elements more natural. An excellent dynamic design can make the product more friendly, easier to catch the eyes of users, and will not distract users.

在網(wǎng)頁設(shè)計中，每個網(wǎng)頁設(shè)計師都希望能夠設(shè)計出能一下子抓取用戶眼球的網(wǎng)頁，奈何當(dāng)網(wǎng)站出來的時候，總覺得差那么一點點。要想設(shè)計出好的網(wǎng)頁，不妨從以上幾種方法入手，或許你會有意想不到的收獲。

In web design, every web designer hopes to design a web page that can catch the eyes of users all at once, but when the website comes out, it always feels a little worse. If you want to design a good web page, you might as well start with the above methods. Maybe you will get unexpected results.