2010年網(wǎng)頁設(shè)計(jì)，網(wǎng)站設(shè)計(jì)趨勢(shì)！

在過去的幾個(gè)月中，我們分析了無數(shù)的網(wǎng)絡(luò)設(shè)計(jì)，觀察新出現(xiàn)的趨勢(shì)，重許多設(shè)計(jì)決策和編碼解決方案的優(yōu)點(diǎn)。在這篇文章中，我們提出 2009年網(wǎng)頁設(shè)計(jì)趨勢(shì)：最近的事態(tài)發(fā)展，新的設(shè)計(jì)元素和新的圖形方法。我們還討論這些趨勢(shì)可以用一些美麗的例子和現(xiàn)在的情況。你有沒有錯(cuò)過任何在本概述近期的發(fā)展？讓我們?cè)谠u(píng)論中知道！

本文只包括了超過25個(gè)，我們已經(jīng)在過去10個(gè)月確定的趨勢(shì)。第二部分將在下周公布。我們將涵蓋新布局，新辦法和新的視覺設(shè)計(jì)元素。請(qǐng)繼續(xù)收看。

2010年網(wǎng)頁設(shè)計(jì)趨勢(shì)

讓我們先來看一看，我們發(fā)現(xiàn)的主要趨勢(shì)細(xì)看，發(fā)現(xiàn)和觀察到的最后幾個(gè)月。在本概述中，您會(huì)發(fā)現(xiàn)每個(gè)趨勢(shì)和更加美好的例子，可以激發(fā)你在你的下一個(gè)項(xiàng)目的審查。

1. 壓花 凸版

   

2. 豐富的用戶界面

   

3. PNG透明度

   

4. 大字體

   

5. 字體更換（sIFR那樣，等）

   

6. 模態(tài)框

   

7. 媒體塊

   

8. 該雜志看

   

9. 旋轉(zhuǎn)木馬（幻燈片）

   

10. 簡(jiǎn)介塊

    

現(xiàn)在讓我們進(jìn)入細(xì)節(jié)，并采取在上文提出的趨勢(shì)每個(gè)一探究竟。

1。凸版

最意想不到的，我們已經(jīng)觀察到的趨勢(shì)之一，是在過去幾個(gè)月出現(xiàn)了凸版（事實(shí)上是按字母）在網(wǎng)頁設(shè)計(jì)。也許是這種趨勢(shì)的最重要的原因是簡(jiǎn)單的事實(shí)，這種技術(shù)到現(xiàn)在已經(jīng)很少使用。凸版是用于各種風(fēng)格和各種網(wǎng)站和各種專題，特別是經(jīng)常使用在產(chǎn)品設(shè)計(jì)和在線服務(wù)的網(wǎng)站。

?

2。豐富的用戶界面

令人高興的是，在現(xiàn)代的網(wǎng)站和Web應(yīng)用程序的用戶界面變得更美麗，更實(shí)用。在過去的一年中，這些應(yīng)用的用戶體驗(yàn)大大改善，在豐富和響應(yīng)的用戶界面，與傳統(tǒng)的桌面應(yīng)用程序產(chǎn)生了巨大的相似之處。 AJAX和Flash是用來為用戶提供廣泛的動(dòng)態(tài)互動(dòng)，他們所期望的先進(jìn)，成熟，專業(yè)的解決方案。

特別是，我們已經(jīng)看到在過去一年更白的空間，更多和更填充各種設(shè)計(jì)元素的空間。我們還指出，許多現(xiàn)代用戶界面顯示直觀的線索，傳達(dá)一個(gè)用戶與系統(tǒng)交互的狀態(tài)。例如，在被點(diǎn)擊，活動(dòng)經(jīng)常改變它們的外觀按鈕從“正常”到“按下”外觀（如在 Newspond.com 和 Quicksnapper.com），確認(rèn)并提供用戶與系統(tǒng)交互的即時(shí)反饋。除此之外，越來越多的服務(wù)現(xiàn)在可以由用戶進(jìn)行個(gè)性化：對(duì)我們來說，這是一個(gè)明確信號(hào)， 自適應(yīng)用戶界面是在2009年來。

這兩個(gè)例子證明了Web應(yīng)用程序設(shè)計(jì)人員付出更多人關(guān)注在其中的功能，提出并試圖改善與更多的互動(dòng)和響應(yīng)解決方案的用戶體驗(yàn)方式。

?

3。 PNG透明度

巴紐透明度，雖然由Internet Explorer 6不支持，似乎已經(jīng)獲得了對(duì)過去一年的現(xiàn)場(chǎng)人氣。顯然，設(shè)計(jì)師正在試圖更好地融入實(shí)際的內(nèi)容和背景圖像是一個(gè)風(fēng)格，是在印刷媒體上經(jīng)常出現(xiàn)，例如，雜志的惡習(xí)。在大多數(shù)情況下，半透明的背景突出在一個(gè)網(wǎng)頁的整體背景，旨在強(qiáng)調(diào)一個(gè)重要的設(shè)計(jì)元素，如標(biāo)題或聲明。 PNG透明有時(shí)被用于模態(tài)框的背景以及。

去年，我們描述了各種方法中，可以 在網(wǎng)頁的透明度得到創(chuàng)意設(shè)計(jì)和許多設(shè)計(jì)師似乎與他們的工作這些技術(shù)實(shí)驗(yàn)。有趣的是，經(jīng)常使用的透明度，無論是在頁眉或頁腳的設(shè)計(jì)，但 一些設(shè)計(jì) 超越的。

?

4。巨型印刷術(shù)

我們介紹了一些優(yōu)秀的大字體的例子 以前 職位。 2009年，大字體應(yīng)仍受歡迎。特別是，設(shè)計(jì)機(jī)構(gòu)，投資組合，產(chǎn)品的網(wǎng)站和在線服務(wù)，將使用大字體來傳達(dá)他們的網(wǎng)站最重要的信息。

這些設(shè)計(jì)元素的字體大小往往超出36像素，而且在許多情況下是相當(dāng)昂貴的字體用來達(dá)到觀眾。總體而言，設(shè)計(jì)人員更密切地關(guān)注印刷細(xì)節(jié)，如領(lǐng)導(dǎo)，行高和字體的選擇。后果：網(wǎng)站更美麗，更一致，并期待扎實(shí)可靠。

?

5。字體替換

作為設(shè)計(jì)師更注重排版，他們更注重的是為在網(wǎng)站的正文字體。雖然如黑體，宋體，格魯吉亞和Verdana經(jīng)典無疑是占主導(dǎo)地位，我們觀察到輕微的趨勢(shì)走向字體替換（例如，與sIFR那樣）。

有趣的是，這些字體通常在網(wǎng)站的無縫設(shè)計(jì)集成，他們幾乎從來沒有使用過為了自己，或者只是為了“升級(jí)”的網(wǎng)站版式。設(shè)計(jì)師正試圖融合漂亮的印刷字體和逮捕的視覺設(shè)計(jì)，以提高網(wǎng)站的外觀和改善用戶體驗(yàn)。

?

6。模態(tài)盒（燈箱）

模態(tài)框（對(duì)話框窗口）在本質(zhì)上是對(duì)彈出窗口的第二代。他們作為一個(gè)用戶友好代替經(jīng)典的JavaScript支持用戶通過窗口和重點(diǎn)網(wǎng)站的最重要方面的關(guān)注。模態(tài)窗口總是由用戶觸發(fā)的動(dòng)作（如簽約或登錄），并出現(xiàn)在頂部的主要內(nèi)容，就像是一個(gè)普通的桌面應(yīng)用程序窗口。模態(tài)窗口往往以非常微妙的方式：他們往往是半透明和有一個(gè)“關(guān)閉”按鈕。

?

7。媒體塊

隨著越來越多的寬帶互聯(lián)網(wǎng)接入，用戶現(xiàn)在可以瀏覽到更多的能力比他們幾年前一對(duì)夫婦，設(shè)計(jì)人員可以利用這個(gè)機(jī)會(huì)以一種更有吸引力的內(nèi)容和令人難忘的方式。因此，難怪許多產(chǎn)品網(wǎng)站使用媒體塊的視頻和screencasts（對(duì)于這個(gè)目的）。這種元素的主要優(yōu)點(diǎn)是，可以迅速有效地溝通的內(nèi)容，使用戶更方便地消費(fèi)信息。

用戶只是靠在椅子上欣賞節(jié)目，他們得到的一切向他們解釋，一步一步，而不必點(diǎn)擊，搜索描述或?qū)W習(xí)導(dǎo)航。這些電影通常很短，直接到這一點(diǎn)，他們大多是正式的，但可以?shī)蕵?，太?/p>

但請(qǐng)確保影片是一 替代 陳述（而不是主要或唯一！）您的網(wǎng)站內(nèi)容。并不是每一個(gè)用戶有寬帶接入互聯(lián)網(wǎng)，而不是每個(gè)用戶愿意觀看視頻（例如，因?yàn)樗蛩赡苡幸慌_(tái)收音機(jī)或音樂播放的背景），而不是每個(gè)用戶有Flash和JavaScript安裝在他或她機(jī)器。

?

8。該雜志看

一個(gè)有趣的博客設(shè)計(jì)的發(fā)展是各種技術(shù)的適應(yīng)通常在傳統(tǒng)的發(fā)現(xiàn)（印刷版）媒體。該網(wǎng)頁上的職位安排，使用的排版，插圖，甚至文本對(duì)齊往往類似于從傳統(tǒng)的印刷技術(shù)。 基于網(wǎng)格的設(shè)計(jì) 漸受歡迎，但也可用于投資組合，產(chǎn)品的網(wǎng)頁和博客大多大，他們幾乎從來沒有出現(xiàn)在公司網(wǎng)站或網(wǎng)上商店。

?

9。旋轉(zhuǎn)木馬（幻燈片）

旋轉(zhuǎn)木馬基本上幻燈片導(dǎo)航，其中的內(nèi)容垂直或水平旋轉(zhuǎn)（因此命名為“旋轉(zhuǎn)木馬”）。要旋轉(zhuǎn)的導(dǎo)航，用戶需要點(diǎn)擊兩（通常是左/右或上/下箭頭）切換元素之一。根據(jù)元素的切換選擇，內(nèi)容是在預(yù)期的方向旋轉(zhuǎn)。

而不是通過網(wǎng)站為自己喜愛的故事各款點(diǎn)擊，用戶可以快速瀏覽或不必要的不垂直滾動(dòng)鼠標(biāo)移動(dòng)可用的故事。其結(jié)果是：用戶節(jié)省時(shí)間，他們的注意力集中在傳送帶大幅的內(nèi)容，而不是與瀏覽器交互。這些幻燈片導(dǎo)航通常用于娛樂網(wǎng)站和大型博客，但設(shè)計(jì)者也使他們的投資組合中加以利用，以展示在一個(gè)更加互動(dòng)的方式開展工作。

?

10。簡(jiǎn)介塊

該網(wǎng)站的左上角區(qū)域是頁面上最重要的區(qū)塊，因?yàn)樗テ饛穆每妥铌P(guān)注的。因此，它可以完美的地方網(wǎng)站的權(quán)利還有最重要的信息，從而確保讀者獲取信息盡快。

事實(shí)上，這正是許多設(shè)計(jì)師在做什么。無論是一個(gè)Web應(yīng)用，公司設(shè)計(jì)，網(wǎng)上服務(wù)或組合，設(shè)計(jì)師們正推動(dòng)他們的口號(hào)，并簡(jiǎn)要介紹到頁面頂部，使用的是強(qiáng)大的，生動(dòng)的版式，使一個(gè)良好的第一印象。有些介紹很短，有的很長(zhǎng)，在兩種情況下，他們通常采取了大量的空間，在布局的寬度和250至400像素，高度為這些引進(jìn)塊的尺寸。請(qǐng)注意，雖然，引進(jìn)塊幾乎從未出現(xiàn)在博客，很少在網(wǎng)上商店。