1、 Pretreatment process

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

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

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

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設計

3、 UI design

接下來就是網頁設計中關鍵的過程——UI設計。UI設計部分我們會著重看看首屏設計，因為首頁是與用戶互動密切的頁面。

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.

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

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

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

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

網站添加動畫效果，能讓各種元素之間的互動和聯系變得更加自然。一個優秀的動效設計，能讓產品變得更加友好，更容易抓住用戶的眼球，而且還不會讓用戶分心。

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.

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

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.