技術(shù)的革新帶動(dòng)了設(shè)計(jì)行業(yè)的的迅猛發(fā)展，這使得設(shè)計(jì)師和開(kāi)發(fā)者有了更廣闊的的探索天地。而網(wǎng)站設(shè)計(jì)也越發(fā)不再那么循規(guī)蹈矩，許多團(tuán)隊(duì)和公司都做了很多思考和創(chuàng)意。所以在我們適應(yīng)著現(xiàn)代設(shè)計(jì)潮流的同時(shí)，不妨也來(lái)看看現(xiàn)階段網(wǎng)頁(yè)設(shè)計(jì)大致的趨勢(shì)和風(fēng)格吧。我不敢大言不慚的說(shuō)這就是當(dāng)下網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì)，這只是本人對(duì)當(dāng)下網(wǎng)頁(yè)設(shè)計(jì)做出的一些小總結(jié)。希望這樣的歸類總結(jié)能給你帶來(lái)更多的思路和想法。
The technical innovation has driven the rapid development of the design industry, which makes the designers and developers have a wider exploration of heaven and earth. The website design is also more and more less too observant of conventional standards., many teams and companies have done a lot of thinking and ideas. So when we meet the modern trend of design at the same time, can also look at the present stage Webpage design general trends and styles. This is the Webpage design trends I dare not boast without shame, some small summary this but I made on the current Webpage design. Hope and classified can give you more ideas and thoughts of this.
1.全屏網(wǎng)頁(yè)設(shè)計(jì)(Full Screen Design)
所謂設(shè)計(jì)不分家，近年來(lái)平面設(shè)計(jì)里“純凈”“留白”等概念也被互聯(lián)網(wǎng)設(shè)計(jì)吸取，為了更簡(jiǎn)單明了的突出主體，提供更舒適的感官感受，很多網(wǎng)站開(kāi)始采用全屏網(wǎng)頁(yè)設(shè)計(jì)，利用精心挑選設(shè)計(jì)的漂亮背景，加上合理的頁(yè)面布局，視覺(jué)沖擊力大可很好的吸引觀者注意。通常頁(yè)面內(nèi)的文字內(nèi)容不會(huì)特別多(所出現(xiàn)的少量文字加上精美的排版將會(huì)變得更加吸引人)，主要以圖片展示為主。這個(gè)樣子的網(wǎng)站多用于攝影團(tuán)隊(duì)或個(gè)人作品集展示會(huì)比較常見(jiàn)。雖然簡(jiǎn)單養(yǎng)眼，但是承載信息有限，公司部門的主頁(yè)很少見(jiàn)這樣的設(shè)計(jì)。
The design does not break up, in recent years the plane design in "pure" "blank" concept has also been Internet design drawing, in order to highlight the main body is more simple, more comfortable sense perception, many sites began to use full screen Webpage design, using carefully selected beautiful background design, plus a reasonable page layout, visual impact stress can be good to attract audience attention. Usually within the page text content is not much more special (a small amount of characters appear together with the exquisite layout will become more attractive), mainly in the picture shows the main. Like this web site is for personal photography team or works show more common. Although simple seductive, but the information bearing Co., Ltd. Department home page is very rare to find such a design.
2.響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)(Responsive Web Design)
現(xiàn)在越來(lái)越多用戶都擁有多種終端：臺(tái)式機(jī)，筆記本，平板電腦，手機(jī)，能夠適應(yīng)不同尺寸顯示屏的網(wǎng)頁(yè)是現(xiàn)在的潮流，甚至是未來(lái)很長(zhǎng)一段時(shí)間的設(shè)計(jì)趨勢(shì)。那么響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就是來(lái)解決這個(gè)問(wèn)題的。這種特別的開(kāi)發(fā)方式能保證網(wǎng)頁(yè)適應(yīng)不同的分辨率，讓網(wǎng)頁(yè)要素重組，使其無(wú)論在垂直的平板電腦還是智能手機(jī)上，都能達(dá)到好的視覺(jué)效果。
Now more and more users have a variety of terminal: desktop, laptop, tablet computer, mobile phone, can adapt to different size display Webpage is the trend now, even the future design trend for a long period of time. Then the response type Webpage is designed to solve the problem. Development of this particular can guarantee Webpage adapt to different resolution, let Webpage elements reorganization, so in terms of vertical tablet computer or mobile phone, can achieve the best visual effects.
創(chuàng)新互聯(lián)UEO營(yíng)銷型網(wǎng)站建設(shè)(http://jinyejixie.com/iueo/)的這個(gè)頁(yè)面為例，除了多終端的多樣化，我們還可以看到我們的電腦屏幕，手機(jī)屏幕都在不斷變大，而在對(duì)未來(lái)生活的預(yù)測(cè)、概念設(shè)計(jì)里，“屏幕”這個(gè)產(chǎn)物更是被運(yùn)用到多種新平臺(tái)上。例如微軟發(fā)布的“未來(lái)生活概念視頻”里，廚房、室內(nèi)墻壁、辦公室玻璃墻面都成為了交互平臺(tái)。所以我們可以發(fā)現(xiàn)，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)所具備的良好的適應(yīng)性和可塑性，在未來(lái)的網(wǎng)頁(yè)設(shè)計(jì)里將占有舉足輕重的位置。
Luxuries construction China UEO marketing type website (http://jinyejixie.com/iueo/) this page as an example, in addition to the diversity of terminals, we can also see the computer screen, mobile phone screen is larger, while in the future life prediction, concept design, "screen" this product is applied to the new platform a variety of. For example Microsoft released "the future life concept video" in the kitchen, office, indoor walls, glass walls have become interactive platform. So we can find, in response to the type Webpage design has good adaptability and plasticity, will play a decisive role in the Webpage occupy position design in the future.
3.扁平化設(shè)計(jì)(Flat Design)
扁平化設(shè)計(jì)可以說(shuō)是去繁從簡(jiǎn)的設(shè)計(jì)美學(xué)。去掉所有裝飾性的設(shè)計(jì)，可以說(shuō)是對(duì)之前所推崇的擬物化設(shè)計(jì)的顛覆。我們不能妄加評(píng)論說(shuō)這是好還是不好，只能說(shuō)它提供了一種新的設(shè)計(jì)思維。扁平化設(shè)計(jì)是否會(huì)成為將來(lái)的趨勢(shì)我們也無(wú)法回答，盡管褒貶不一，備受爭(zhēng)議，但是就現(xiàn)在來(lái)說(shuō)它是當(dāng)下的一種潮流。
The flat design can be said to be the design aesthetics from simple to complex. Remove all decorative design, can be said to be respected by the prior quasi physical design subversion. We can not make improper comments say it is good or not, only that it provides a new design thinking. Whether the flat design will become the future trend we can not answer, although mixed, controversial, but for now it is a kind of tide current.
4.視差滾動(dòng)設(shè)計(jì)(Parallax Design)
視差設(shè)計(jì)可以說(shuō)是近年來(lái)網(wǎng)頁(yè)設(shè)計(jì)中的一大突破，也備受推崇。視差滾動(dòng)是讓多層背景以不同速度滾動(dòng)，以形成一種3D立體的運(yùn)動(dòng)效果，給觀者帶來(lái)一種獨(dú)特的視覺(jué)感受。
Can be said that the parallax design is a major breakthrough in recent years Webpage design, is the most respected. Parallax scrolling is to layer background rolling at different speeds, to form the motion performance of a 3D stereo, give us a unique visual experience.
除此以外，鼠標(biāo)滾輪的流暢體驗(yàn)，讓用戶在觀看此類網(wǎng)站時(shí)有一種控制感，簡(jiǎn)單來(lái)說(shuō)這是有響應(yīng)的交互體驗(yàn)。就好像童年看到走馬燈，轉(zhuǎn)動(dòng)它你就能看到人物動(dòng)起來(lái)，還能欣賞故事。視差滾動(dòng)設(shè)計(jì)的趣味也在于此。所以無(wú)論是網(wǎng)站還是電商商品宣傳頁(yè)都經(jīng)常采用視差設(shè)計(jì)，吸引眼球也很受用戶喜愛(ài)。
In addition, the mouse wheel flow experience, let users have a sense of control in the viewing of this website, it is a simple response to the interactive experience. Just like the childhood to see the lantern, rotate it and you can see people move up, can enjoy the story. Parallax scrolling design interest also lies in this. So whether a site or electric commodity propaganda page often use parallax design, attract eyeball is welcomed by users.
5.無(wú)限滾動(dòng)模式(瀑布流)
有一些網(wǎng)站內(nèi)容很多，但他們并沒(méi)有簡(jiǎn)單分頁(yè)，而是采用的是一種垂直瀑布流的方式布局。將那些內(nèi)容垂直排布，當(dāng)用戶縱向滾動(dòng)時(shí)，內(nèi)容會(huì)不斷更新好像永無(wú)止境。這樣的瀑布流很早之前就開(kāi)始流行，最早采用該布局的是pinterest。這樣的滾動(dòng)頁(yè)面就大大減少了分頁(yè)的數(shù)量，個(gè)人認(rèn)為對(duì)于這類信息量大，每日更新數(shù)據(jù)快的網(wǎng)站是比較不錯(cuò)的方案。
There are a lot of website content, but they are not simple paging, but uses a vertical waterfall flow layout. The contents are vertically arranged, when the user vertical scrolling, will be regularly updated as the world without end. This waterfall flow very early before the beginning of the epidemic, the earliest the layout is pinterest. Scrolling a page that greatly reduces the paging number, personally think that for such a large amount of information, updated daily data fast website is a good program.
6.滾動(dòng)偵測(cè)網(wǎng)頁(yè)設(shè)計(jì)(Scrollspy)
利用CSS的實(shí)現(xiàn)將導(dǎo)航欄固定在網(wǎng)頁(yè)頂部(大多數(shù)是頂部，當(dāng)然也有側(cè)面或底部)，并將版面內(nèi)容按照導(dǎo)航順序垂直或橫向排布，使得用戶點(diǎn)擊相應(yīng)導(dǎo)航tab時(shí)頁(yè)面自動(dòng)滑到相應(yīng)頁(yè)面，而若點(diǎn)擊內(nèi)容，導(dǎo)航也將隨之改變。這樣的網(wǎng)頁(yè)設(shè)計(jì)頁(yè)面基本不會(huì)跳轉(zhuǎn)，每一個(gè)tab所指向的頁(yè)面內(nèi)容也基本一屏顯示完整，所以在頁(yè)面呈現(xiàn)的內(nèi)容上會(huì)有所局限。為不影響布局一般也會(huì)伴隨自適應(yīng)。
Using CSS to achieve the navigation bar is fixed on the top of Webpage (most are at the top, but the side or bottom), and the page content according to vertical or horizontal navigation order arrangement, the user clicks on the corresponding navigation tab pages automatically slide to the corresponding page, and click the content, navigation will be changed. Webpage design page will not jump like this, the content of the page for each tab to a display screen is basically complete, so in the page content will be limited. In order not to affect the general layout will also be accompanied by an adaptive.
滾動(dòng)偵測(cè)式的網(wǎng)頁(yè)會(huì)給設(shè)計(jì)師帶來(lái)了很大挑戰(zhàn)——要在有限空間內(nèi)保證內(nèi)容呈現(xiàn)的完整性，故設(shè)計(jì)師會(huì)在版面上下足功夫。而這類網(wǎng)站結(jié)構(gòu)和視差設(shè)計(jì)有異曲同工之處，所以我們發(fā)現(xiàn)很多網(wǎng)站會(huì)結(jié)合兩者，給觀者帶來(lái)不一樣的視覺(jué)感受和用戶體驗(yàn)。
Detection of rolling Webpage will pose a challenge -- to ensure the integrity of content presentation in the limited space to the designers, so designers in the layout under foot. And have different approaches but equally satisfactory results in this kind of website structure and parallax design, we found that many site will combine the two, bring us not the same visual experience and user experience.
7.網(wǎng)頁(yè)的風(fēng)格化設(shè)計(jì)(The style design of Webpage)
現(xiàn)在的網(wǎng)頁(yè)早已不再像過(guò)去受諸多條件和技術(shù)限制了。其呈現(xiàn)方式頗為豐富。風(fēng)格從清新到復(fù)古，插畫(huà)手繪到擬真設(shè)計(jì)，無(wú)奇不有。無(wú)論是版面版式，還是設(shè)計(jì)元素，用標(biāo)新立異這個(gè)詞形容絕不為過(guò)。根據(jù)自己撇到的冰山一角，提一下對(duì)我感觸最深的變化：
Now Webpage already no longer affected by many conditions and technical limitations. The presentation is quite rich. Fresh from the retro style of illustration, hand-painted to virtual design, Nothing is too strange. Both the layout format, or design elements, using the word to describe a school is new in order to be different. According to his left to the tip of the iceberg, mention to me the deepest feelings change:
(1)注重字體設(shè)計(jì)(Pay attention to the font design)
近年來(lái)很多設(shè)計(jì)師將字體設(shè)計(jì)也融入了網(wǎng)頁(yè)設(shè)計(jì)中，并作為設(shè)計(jì)的一個(gè)重要元素提升整個(gè)網(wǎng)頁(yè)品味。通過(guò)使用CSS3設(shè)計(jì)師可以擁有許多自定義的字體，這給網(wǎng)頁(yè)的視覺(jué)設(shè)計(jì)也增加了一個(gè)重要的設(shè)計(jì)思路。
In recent years, many designers will design into the Webpage design, and as an important element of the design Webpage taste. By using the CSS3 designer can have many custom font, this to the visual design Webpage also adds an important design ideas.
(2)豐富靈活的動(dòng)畫(huà)(The flexible animation)
Html5和flash的廣泛應(yīng)用，讓網(wǎng)頁(yè)的交互動(dòng)畫(huà)變得更加生動(dòng)有趣。
Wide application of Html5 and flash, let the interactive animation Webpage become more lively and interesting.
通過(guò)觀察這些趨勢(shì)如何影響現(xiàn)代網(wǎng)站設(shè)計(jì)，或許可以為網(wǎng)頁(yè)設(shè)計(jì)師帶去指引，發(fā)散出新想法。
By observing how these trends affect the modern web design, may Webpage designers bring new ideas to guide, divergence.
(3)平面設(shè)計(jì)感的加強(qiáng)(Strengthen the sense of graphic design)
網(wǎng)頁(yè)設(shè)計(jì)隨著設(shè)備和技術(shù)的革新，早已突破了過(guò)去單一框架的限制，變得更加靈活。所以就頁(yè)面風(fēng)格更多地開(kāi)始向平面設(shè)計(jì)靠近，許多頁(yè)面設(shè)計(jì)得極賦海報(bào)和雜志的版式感。時(shí)尚而富有沖擊力。
Webpage design with the equipment and technology innovation, has already exceeded the past single frame's limit, to become more flexible. So the page style more and more close to the plane design, many design very Fu posters and magazine format. Fashionable and full of impact.
雖然設(shè)計(jì)師和開(kāi)發(fā)者都需要和市場(chǎng)接軌并跟上潮流的腳步，但是所謂的潮流是當(dāng)下的，未來(lái)確是未知的。我們的確需要保證自己不被行業(yè)趨勢(shì)甩到隊(duì)尾，但更重要的是在浪潮中適應(yīng)和學(xué)習(xí)。
Although designers and developers need and the market and keep up with the trend of the footsteps, but the trend is present, the future is unknown. We really need to ensure they do not be industry trends thrown to the rear, but more important is to adapt to the tide and learning.