1. Smart and compact navigation design

之前過(guò)大型的導(dǎo)航設(shè)計(jì)，隨漢堡圖標(biāo)又大行其道。可能對(duì)于漢堡菜單的隱藏式設(shè)計(jì)不夠明顯，傳統(tǒng)的導(dǎo)航設(shè)計(jì)又逐步回歸，不過(guò)在風(fēng)格上，倒是呈現(xiàn)出時(shí)髦而小巧的特點(diǎn)。這種導(dǎo)航在細(xì)節(jié)和體驗(yàn)上更加考究，更重要的是，小巧的布局和信息量的控制使得它一目了然，如果想要更多的導(dǎo)航信息則需要點(diǎn)擊「更多」按鈕。

Large scale navigation design was popular before, and then Hamburg icon became popular again. Maybe the hidden design of the hamburger menu is not obvious enough, and the traditional navigation design is gradually returning, but in style, it is fashionable and compact. This kind of navigation is more exquisite in details and experience. What's more, the small layout and information control make it clear at a glance. If you want more navigation information, you need to click the "more" button.

這種導(dǎo)航設(shè)計(jì)的優(yōu)點(diǎn)在于，它為下面的主要內(nèi)容留下了足夠的空間和焦點(diǎn)，又確保了導(dǎo)航本身的功能性。

The advantage of this navigation design is that it leaves enough space and focus for the following main contents, and ensures the functionality of the navigation itself.

而缺陷也同樣明顯，由于導(dǎo)航設(shè)計(jì)得過(guò)于小巧，可能會(huì)讓部分用戶感到困惑。就目前來(lái)看，這種導(dǎo)航適合單頁(yè)式的網(wǎng)站或者是訪問(wèn)量相對(duì)沒(méi)有那么大、個(gè)性十足的網(wǎng)頁(yè)，結(jié)構(gòu)復(fù)雜的網(wǎng)站就不適合這樣的設(shè)計(jì)趨勢(shì)了。

And the defect is also obvious, because the navigation design is too small, may make some users confused. At present, this kind of navigation is suitable for single page websites or relatively less visited and personalized webpages. Websites with complex structure are not suitable for this design trend.

下面的三個(gè)網(wǎng)站不同程度地運(yùn)用了這一設(shè)計(jì)趨勢(shì)：

The following three websites use this design trend in varying degrees:

在頁(yè)面的右側(cè)加入了一個(gè)黑色的垂直條，用一個(gè)小的暫停按鈕和小巧的動(dòng)態(tài)來(lái)吸引你切換頁(yè)面。小巧的導(dǎo)航被置于頁(yè)面部。

Add a black vertical bar on the right side of the page, with a small pause button and small dynamic to attract you to switch pages. Small navigation is placed at the bottom of the page.

這個(gè)網(wǎng)站采取了一個(gè)相對(duì)折中的方案，采用了側(cè)邊欄導(dǎo)航，而其中包含了 LOGO、漢堡圖標(biāo)和搜索按鈕，這樣保證了菜單的顯著，也保持了整個(gè)設(shè)計(jì)的簡(jiǎn)約性。當(dāng)你點(diǎn)開(kāi)漢堡圖標(biāo)的時(shí)候，會(huì)發(fā)現(xiàn)這里面真的隱藏著大量的鏈接，甚至包含了文章推薦。

This website adopts a relative compromise scheme, which adopts sidebar navigation, and includes logo, hamburger icon and search button, so as to ensure the prominent menu and keep the simplicity of the whole design. When you click the hamburger icon, you will find that there are a lot of links hidden in it, even including the article recommendation.

導(dǎo)航欄同樣置于側(cè)邊欄，不過(guò)是在左側(cè)，所有的鏈接都擺在明面上，但是從名稱(chēng)到樣式都非常的簡(jiǎn)約小巧。

The navigation bar is also placed in the sidebar, but on the left side. All the links are on the surface, but the name and style are very compact.

2. 有趣的圖層剪切效果

2. Interesting layer clipping effect

學(xué)會(huì)通過(guò)圖層控制來(lái)營(yíng)造充滿視覺(jué)吸引力的設(shè)計(jì)，會(huì)讓你在設(shè)計(jì)的時(shí)候如虎添翼。通過(guò)控制不同圖層的元素互動(dòng)，可以創(chuàng)造令人著迷的視覺(jué)效果。

Learn to create a visually attractive design through layer control, which will make you more powerful in design. By controlling the interaction of elements in different layers, you can create fascinating visual effects.

值得慶幸的是，以往令人撓頭的各種設(shè)計(jì)效果，現(xiàn)如今對(duì)于網(wǎng)頁(yè)前端而言已經(jīng)是小菜一碟了。越來(lái)越成熟的前端技術(shù)讓圖層的控制和管理更加得心應(yīng)手。近，為的圖層相關(guān)的技術(shù)，是圖層剪切的效果，這種效果指的是將部分元素切除為前景中的元素騰出位置。

Fortunately, the various design effects that used to make people scratching their heads are now a piece of cake for the front end of the web page. More and more mature front-end technology makes layer control and management more handy. Recently, the most popular layer related technology is the effect of layer clipping, which refers to the removal of some elements to make room for the elements in the foreground.

這種圖層剪切效果幾乎適用于任何類(lèi)型的網(wǎng)站和設(shè)計(jì)，被裁剪的部分可以是任意大小、位置的，而使用這一效果的訣竅在于控制元素之間的協(xié)同，前景的元素要和背景的元素之間完美地配合起來(lái)。

This kind of layer clipping effect is suitable for almost any type of website and design. The clipped part can be of any size and position. The key to use this effect is to control the coordination between elements. The foreground elements should be perfectly matched with the background elements.

被裁剪的部分應(yīng)該和整個(gè)設(shè)計(jì)的信息傳達(dá)息息相關(guān)，和設(shè)計(jì)目標(biāo)保持一致。比如，它應(yīng)該能夠輔助導(dǎo)航，引導(dǎo)視覺(jué)，幫助用戶獲取信息，促進(jìn)功能，幫助用戶理解信息。

The cut part should be closely related to the information transmission of the whole design and consistent with the design goal. For example, it should be able to assist navigation, guide vision, help users get information, promote functions, and help users understand information.

3. 快速剪輯的視頻

3. Fast clip video

設(shè)計(jì)師一直在借助視頻來(lái)呈現(xiàn)設(shè)計(jì)，講述故事。不過(guò)，在視頻內(nèi)容的呈現(xiàn)上，千變?nèi)f化，目前的做法，是使用快速剪輯或者加速之的視頻，來(lái)快速地呈現(xiàn)豐富的內(nèi)容。毫無(wú)疑問(wèn)，這樣的方式不僅貼合了如今用戶注意力集中時(shí)間短的現(xiàn)狀，而且更好地保持用戶的參與度。

Designers have been using video to present design and tell stories. However, in the presentation of video content, there are many changes. At present, the most popular method is to use fast editing or accelerated video to quickly present rich content. There is no doubt that this way not only fits the current situation of users' short concentration time, but also keeps users' participation better.

快節(jié)奏的視頻剪輯，好處在于更加快速的信息展現(xiàn)。用戶在瀏覽的時(shí)候能夠很快弄明白視頻要呈現(xiàn)的內(nèi)容，整個(gè)視頻的循環(huán)速度也更快，也能夠更好的促進(jìn)用戶和網(wǎng)站的交互。

The advantage of fast-paced video clip is faster information display. Users can quickly understand the content of the video when browsing, and the whole video cycle speed is faster, which can also better promote the interaction between users and the website.

濟(jì)南網(wǎng)站建設(shè)今日就給大家?guī)?lái)這些精彩內(nèi)容，更多的精彩內(nèi)容請(qǐng)點(diǎn)擊：http://www.sun2007.cn/進(jìn)行詳情查看，我們續(xù)會(huì)有更多精彩內(nèi)容等您

Jinan website construction will bring you these wonderful contents today. For more wonderful contents, please click: http://www.sun2007.cn/ Check the details, we will have more wonderful content waiting for you