網(wǎng)站設(shè)計分析：UI應(yīng)遵循的三大網(wǎng)站設(shè)計原則

　　巴赫和《The Well-Tempered Clavier》1972年，巴赫完成了一部著作《The Well-Tempered Clavier》(《十二平均律鋼琴曲集》)，分上下兩卷，每卷各有24首前奏曲與賦格曲。現(xiàn)在它已被譽為西方音樂歷史中最重要作品之一。 在當(dāng)時，為12個主要的琴鍵分別譜曲是完全不可能的。而巴赫卻從整體上為全部的12個音作曲。正是他的這套《十二平均律鋼琴曲集》，最終向人們證明了“十二平均律”是可以用來作曲的，而且其效果之美妙，以前的人們從未曾領(lǐng)略過。

　　在這個過程，所采用的解決方案是重新定義了“合調(diào)”的概念。通過修改一定的間隔，使每個琴鍵稍稍偏離完美的音調(diào)，從而產(chǎn)生一種調(diào)音系統(tǒng)，允許人們在所有的琴鍵上演奏出合調(diào)的琴樂。犧牲少量的個體品質(zhì)以達到更完美的整體效果，被稱為“平均律”。 該案例雖與網(wǎng)站設(shè)計不相關(guān)，但目的是一樣的：使每個琴鍵都稍有缺陷，以便鍵盤整體表現(xiàn)完美。

　　UI設(shè)計師需要做什么?

　　最近幾年，針對多設(shè)備進行設(shè)計已成為Web設(shè)計領(lǐng)域最令人興奮的開發(fā)工作。以前主要關(guān)注網(wǎng)站是否可以在兩個不同瀏覽器上運行正常，現(xiàn)在則轉(zhuǎn)移到它是否可以在具有完全不同特性的多種設(shè)備上正常運行，這些設(shè)備具有不同的屏幕尺寸、不同的性能、不同的使用環(huán)境及不同的界面。 雖然響應(yīng)式設(shè)計和針對設(shè)備定制網(wǎng)站可以幫助我們制作出針對不同體驗的設(shè)計，但仍有很多時候我們必須做出統(tǒng)一的決策。這時，“平均律”的概念或許有些幫助。 該概念在UI設(shè)計中的應(yīng)用一個簡單的過程：為了針對一系列不同設(shè)備設(shè)計出好的體驗，我們必須允許某些界面出現(xiàn)偶爾的不完美。我們必須做出小小的妥協(xié)，以保證我們的設(shè)計可以很好地適應(yīng)其他的環(huán)境。 觸摸優(yōu)先設(shè)計 具有“平均律”特性的網(wǎng)站已經(jīng)將觸摸式界面應(yīng)有到了最近的桌面網(wǎng)站設(shè)計中。 在占用面積上，手指要大于鼠標(biāo)指針，所以手指需要更大的觸控區(qū)域。為了確保可用性，交互元素需要更大。當(dāng)交互元素的面積增大后，其他元素也需要相應(yīng)的增大以保持平衡。這就需要通過margin和padding兩個屬性來設(shè)定。

　　新版Gmail設(shè)計有大量的空白區(qū)域，對按鈕設(shè)定了額外的Padding。雖然它只是針對桌面的設(shè)計，但也可以很好地兼容觸摸設(shè)備。 iPad在觸摸界面和不同大小桌面屏幕之間搭建了橋梁。而iPad的流行加速了觸摸屏在桌面界面設(shè)計中的影響。如果你觀察一些剛經(jīng)過重新設(shè)計的著名產(chǎn)品，如Gmail，Twitter，你就會發(fā)現(xiàn)Web設(shè)計已有明顯的不同。他們看上去更“豐滿”。有更多的空白區(qū)域，按鈕有更多的Padding，上面的元素整體看來增大了不少。當(dāng)然，其他的因素也在發(fā)揮作用，比如桌面屏幕尺寸的穩(wěn)定增長。 當(dāng)為鼠標(biāo)提供了“過多”的空間，而對于手指來說，空間剛剛好時，我們的設(shè)計就算完成了。我們允許與某體驗的標(biāo)準(zhǔn)有稍稍的偏差，以獲得對所有可能體驗的更好支持。 有一點值得提出，對觸摸友好的UI對于使用桌面鼠標(biāo)的用戶來說，更易用。容易觸摸操控的按鈕，更容易被點擊。

　　微軟Metro風(fēng)格的設(shè)計受到了觸摸優(yōu)先思想的影響

　　響應(yīng)式設(shè)計，達到統(tǒng)一設(shè)計的目的

　　雖然關(guān)于響應(yīng)式設(shè)計的很多討論都是關(guān)于響應(yīng)式設(shè)計技術(shù)的，但響應(yīng)能力本身并不是最終目標(biāo)。它是達到目的的一種手段。設(shè)計具有響應(yīng)能力，是為了達到其他的一些目的�？赡転榱酥С植煌�的內(nèi)容，服務(wù)于低寬帶中傳輸?shù)膱D片，在更小的屏幕中更好地展示布局。也可能為了在大范圍不同的設(shè)備上提供統(tǒng)一的體驗。 搭載響應(yīng)式設(shè)計的火車，可以到達統(tǒng)一的用戶體驗設(shè)計的目的地。

　　Boston Globe網(wǎng)站在這方面做得很棒。

　　Boston Globe出色地將響應(yīng)式設(shè)計應(yīng)用到了大型網(wǎng)站中 響應(yīng)式設(shè)計策略可以使一個簡單的設(shè)計適應(yīng)用戶閱讀Boston Globe所使用的任何設(shè)備(即便是Apple Newton)。這不僅僅是前端工程師的功勞。配合使用Media Queries和JavaScript兩種技術(shù)，也可以達成這種效果。

　　移動優(yōu)先設(shè)計 之前的案例主要針對圖片設(shè)計，但“平均律”的概念應(yīng)該應(yīng)用于產(chǎn)品設(shè)計、用戶體驗、信息架構(gòu)中——幾乎設(shè)計的其他任何領(lǐng)域。讓我們看看產(chǎn)品設(shè)計及移動優(yōu)先的設(shè)計思想。 從移動設(shè)備角度出發(fā)開始設(shè)計過程，構(gòu)建可以滿足移動環(huán)境中各種限制的產(chǎn)品，你需要專注于產(chǎn)品的最重要元素上。正如Luke Wroblewski所表述的： “當(dāng)團隊進行移動優(yōu)先設(shè)計時，最終是要打造一種體驗，該體驗主要專注于用戶希望完成的最主要任務(wù)，沒有任何的繞彎子與界面碎片。這對于用戶體驗和商務(wù)都是有利的。” Twitter最近的一次改版驗證了這些原則。

　　新版Twitter采用了簡約化設(shè)計，在各種設(shè)備上具有一致的體驗。 Twitter改版的目標(biāo)之一是為了向用戶提供一致體驗，無論在電腦上還是在各種移動設(shè)備上。獲得一致的視覺和感受體驗對于UI來說是一個挑戰(zhàn)，但整個產(chǎn)品在不同設(shè)備上獲得一致的體驗則是更大的挑戰(zhàn)。針對這兩方面的挑戰(zhàn)，移動優(yōu)先設(shè)計可以幫我們實現(xiàn)。

　　在Twitter的改版中，我發(fā)現(xiàn)了一件很有趣的事，即移動體驗對整個產(chǎn)品設(shè)計的影響。例如，除了“Tweet”按鈕外，所有的動作按鈕均布置在“Home”、“Connect”、“Discover”、“Me”四個標(biāo)簽下面。該簡單化的設(shè)計在小屏幕設(shè)備中運行完美，四個項目也能在標(biāo)簽欄中融洽“相處”。 在桌面網(wǎng)站中，雖然新增了一些其他特性，但建立在移動版本基礎(chǔ)上的簡潔仍需存在。雖然桌面版本上有大量的空間來完成更多的復(fù)雜設(shè)計，但設(shè)計仍要有所約束、有更好的適應(yīng)性，以確保達到一致的多設(shè)備體驗。

　　小心有“狼” 在巴赫之前的調(diào)音系統(tǒng)中，被同時演奏出的不和諧間隔的音符會產(chǎn)生側(cè)耳、咆哮般的聲音。音樂家把這種聲音稱為“狼嚎”。 在界面設(shè)計中，當(dāng)針對某一種體驗設(shè)計的視覺或交互元素轉(zhuǎn)移到另一種體驗環(huán)境中就會失效，那么我們稱這種元素為“狼”。回想一下，你曾經(jīng)費力地用手指點擊一個很小的針對鼠標(biāo)設(shè)計的鏈接，還有痛苦地在移動設(shè)備、觸摸設(shè)備上閱讀著字體很小的文本，而這些設(shè)備上的界面元素只依靠鼠標(biāo)點擊。這些都是UI上的“狼”。

　　這些文章的鏈接只依靠鼠標(biāo)完成交互。當(dāng)在觸摸式的移動設(shè)備中瀏覽時，它們的可能性就會減低。

　　New York Magazine提供了一個好用、美觀的下拉式導(dǎo)航菜單，但你只能使用鼠標(biāo)來點擊它。

　　注意事項 響應(yīng)式設(shè)計，提供針對設(shè)備的特定體驗，確實可以解決很多此類問題。如果我們能調(diào)整一個按鈕的大小以適應(yīng)某一特定的環(huán)境，那么我們就不必接受這種笨重、顧及全局的方法。但是我們需要支持的設(shè)備數(shù)量只會增加，定制所有可能的方案即將變得不合理。 即便我們可以在執(zhí)行層面定制完美的設(shè)計，但仍有必要在概念層面考慮一下可調(diào)節(jié)的、可統(tǒng)一訪問的設(shè)計。

　　下面列出了幾個注意事項

　　● 響應(yīng)式地思考 即便你并不正在實現(xiàn)一個完全響應(yīng)式設(shè)計，簡單地用響應(yīng)式的方式去思考將會對實現(xiàn)可用的、統(tǒng)一的設(shè)計大有幫助。

　　● 觸摸優(yōu)先式思考 針對手指點觸設(shè)計的按鈕，同樣可以用鼠標(biāo)來點擊。但針對鼠標(biāo)設(shè)計的按鈕，用手指觸控時就會顯得太小了。觸控優(yōu)先式設(shè)計，可以確保你的網(wǎng)站和應(yīng)用很好的遷移到其他環(huán)境中。

　　● 統(tǒng)一式思考 正如“早測試，經(jīng)常測試”一樣。在設(shè)計過程中，應(yīng)該盡早并經(jīng)常思考你的設(shè)計如何成功運行在不同的設(shè)備之上。

　　● 移動優(yōu)先式思考 移動優(yōu)先設(shè)計，可以讓你專注于那些關(guān)乎你成功的事情上。保持對最重要特性的關(guān)注，在不同設(shè)備上實現(xiàn)統(tǒng)一的體驗就變得更加容易了。

　　● 小心 交互行為不會在各種界面中得到統(tǒng)一支持。通過鼠標(biāo)來完成的功能在觸摸設(shè)備上可能會有問題。通過觸摸來完成的操作可能用鼠標(biāo)就無法執(zhí)行。但這并不意味者我們不能使用它們，只是我們應(yīng)該清楚它們的使用限制。

　　希望用戶可以在不同的設(shè)備上使用我們的網(wǎng)站和應(yīng)用時獲得完美的體驗。也希望我們的勞動成果可以在盡可能多的環(huán)境中可用。

服務(wù)器租用/服務(wù)器托管中國五強！虛擬主機域名注冊頂級提供商！15年品質(zhì)保障！--億恩科技[ENKJ.COM]