網(wǎng)頁(yè)設計UI應遵循的三大網(wǎng)站設計原則發(fā)布者：本站     時(shí)間：2021-12-15 11:12:18

隨著(zhù)技術(shù)的進(jìn)化，Web設計的藝術(shù)和技巧也在不斷進(jìn)化。新的技術(shù)創(chuàng )造了新的挑戰，而新的挑戰要求新的解決方案。我們通常工作在未知領(lǐng)域，需要給出全新的解決方案。 考慮到有限的Web設計歷史，我們必須超越當前的領(lǐng)域去回答更有挑戰性的問(wèn)題。為此，我們可以通過(guò)借鑒其他不相關(guān)領(lǐng)域的發(fā)展歷史，如音樂(lè )，從中尋求可以幫助我們解決問(wèn)題的方案。下面將列舉一個(gè)18世紀早期關(guān)于巴赫的一個(gè)小故事。

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

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

UI設計師需要做什么?

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

UI應遵循的三大網(wǎng)站設計原則,PS教程,

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

UI應遵循的三大網(wǎng)站設計原則,PS教程,

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

響應式設計，達到統一設計的目的

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

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

UI應遵循的三大網(wǎng)站設計原則,PS教程,

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

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

UI應遵循的三大網(wǎng)站設計原則,PS教程,

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

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

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

UI應遵循的三大網(wǎng)站設計原則,PS教程,

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

UI應遵循的三大網(wǎng)站設計原則,PS教程,

New York Magazine提供了一個(gè)好用、美觀(guān)的下拉式導航菜單，但你只能使用鼠標來(lái)點(diǎn)擊它。

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

下面列出了幾個(gè)注意事項

● 響應式地思考 即便你并不正在實(shí)現一個(gè)完全響應式設計，簡(jiǎn)單地用響應式的方式去思考將會(huì )對實(shí)現可用的、統一的設計大有幫助。

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

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

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

● 小心 交互行為不會(huì )在各種界面中得到統一支持。通過(guò)鼠標來(lái)完成的功能在觸摸設備上可能會(huì )有問(wèn)題。通過(guò)觸摸來(lái)完成的操作可能用鼠標就無(wú)法執行。但這并不意味者我們不能使用它們，只是我們應該清楚它們的使用限制。

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