讓網(wǎng)頁(yè)在各式終端奏響美妙樂(lè)章發(fā)布者：本站 時(shí)間：2021-12-20 11:12:10
科技在進(jìn)步，網(wǎng)頁(yè)設(shè)計(jì)的技巧也在進(jìn)步。新的科技帶來(lái)了新的挑戰(zhàn)，因此，我們需要新的解決方案。有時(shí)，我們面對(duì)嶄新的未知領(lǐng)域，實(shí)在是毫無(wú)經(jīng)驗(yàn)，只能根據(jù)直覺(jué)去打造解決方案。而有時(shí)，我們?cè)谛骂I(lǐng)域面對(duì)的問(wèn)題有過(guò)去的影子，我們可以從歷史、別人的經(jīng)驗(yàn)中找到答案。
相對(duì)其他設(shè)計(jì)那漫長(zhǎng)而又榮耀的歷史，網(wǎng)頁(yè)設(shè)計(jì)的歷史有限，因此能給出的經(jīng)驗(yàn)也相對(duì)有限，而我們又不得不借鑒這段有限的歷史去解決近乎無(wú)限的問(wèn)題。雖然圖形設(shè)計(jì)和視覺(jué)傳達(dá)藝術(shù)的經(jīng)驗(yàn)我們也可以學(xué)習(xí)。但是網(wǎng)絡(luò)完全不一樣，我們不應(yīng)該被束縛，因?yàn)榫W(wǎng)絡(luò)的本質(zhì)是自由。如果我們能夠分析出問(wèn)題的因和果，分析出問(wèn)題的組成，那么問(wèn)題就好解決多了，世界上任何事物都有一定的規(guī)律，有章可循，我們可以向一切學(xué)習(xí)，獲取靈感，從而解決問(wèn)題。即使是音樂(lè)和心理學(xué)這種不相關(guān)的領(lǐng)域，我們也可以從其中找到解決問(wèn)題的答案。即使是約翰·塞巴斯蒂安·巴赫的樂(lè)章，其中也暗藏著迎接挑戰(zhàn)的方案。
本文我們將進(jìn)行一次歷史的穿越，讓那個(gè)時(shí)代偉大的藝術(shù)家巴赫來(lái)解決網(wǎng)頁(yè)設(shè)計(jì)中的問(wèn)題——網(wǎng)頁(yè)設(shè)計(jì)，該如何適兼容性不盡相同、特性各異的不同設(shè)備。
巴赫和他的十二平均律
1722年，巴赫收集整理了自己的鍵盤(pán)曲集，打算用此來(lái)為年輕的音樂(lè)家教學(xué)。這本曲集包含了48首曲子——從C到B有十二個(gè)音，十二種調(diào)性，每種調(diào)性包含了大調(diào)與小調(diào)。調(diào)式總和為24，而每一個(gè)調(diào)都寫(xiě)了前奏曲和賦格曲，共計(jì)48首。現(xiàn)在成為了西方音樂(lè)的主要規(guī)范，這是西方音樂(lè)史上總重要的作品之一。巴赫將此命名為平均律
你要知道巴赫時(shí)代的鋼琴是古鋼琴，和現(xiàn)代鋼琴不同，那時(shí)候的鍵盤(pán)現(xiàn)在看起來(lái)也很非常規(guī)。古鋼琴的發(fā)音原理是：通過(guò)羽毛管的撥子撥動(dòng)金屬弦發(fā)音，且擊弦后立即脫離琴弦的裝置，所以無(wú)法連續(xù)彈奏，一次只能彈一個(gè)鍵。在那樣落后的時(shí)代，想要將十二個(gè)大調(diào)彈奏的合調(diào)，是很艱難的。因?yàn)樵诎秃盏臅r(shí)代，所使用的調(diào)律法節(jié)本上是純律，這很不利于轉(zhuǎn)調(diào)。
想要改變物理規(guī)律很難，但是人類的觀察角度卻很容易轉(zhuǎn)變。問(wèn)題：無(wú)法和諧的彈奏。原因：1.鋼琴物理因素。2.彈奏無(wú)法合調(diào)。既然物理上改造鋼琴很難，所以巴赫換了一種角度來(lái)思考，他將問(wèn)題重新定義，主要致力于“合調(diào)”問(wèn)題的解決。巴赫將8度音程平均分為十二個(gè)半音。這樣，問(wèn)題就得以解決。這種折中的、系統(tǒng)性的解決方案被稱之為音律。
讓網(wǎng)頁(yè)在各式終端奏響美妙樂(lè)章,PS教程,
巴赫十二平均律中第一首前奏的開(kāi)頭部分(圖像來(lái)自：維基百科)
這種因巴赫而馳名的、可以用來(lái)解決問(wèn)題的音律系統(tǒng)被稱之為十二平均律，今天西方音樂(lè)的“均分律”和“平均律”有一些差異，但是他們的目標(biāo)是一致的：使每個(gè)按鍵略有差異(或者說(shuō)是略有瑕疵。，這樣就能合理利用全鍵盤(pán)。這是音樂(lè)上的實(shí)用主義。
那這跟界面設(shè)計(jì)有什么關(guān)系?
網(wǎng)頁(yè)設(shè)計(jì)近些年來(lái)最令人興奮的進(jìn)展是什么?是網(wǎng)頁(yè)設(shè)計(jì)對(duì)多設(shè)備瀏覽的支持。不再是那種支持多瀏覽器瀏覽的小把戲，而是支持不同特性設(shè)備瀏覽：不同的屏幕尺寸，不同的兼容性，不同的使用場(chǎng)景，不同的界面。
盡管響應(yīng)式設(shè)計(jì)網(wǎng)站以及具有設(shè)備針對(duì)性的網(wǎng)站能夠重新塑造設(shè)計(jì)，使之符合不同設(shè)備上的用戶需求。但這并不是萬(wàn)能的辦法，有時(shí)問(wèn)題依然會(huì)凸顯，我們依然要采取最妥當(dāng)?shù)臎Q定——這時(shí)，我們便可以借鑒平均律中的方法，將平均律作為一種隱喻，幫助我們解決設(shè)計(jì)問(wèn)題。
將這種概念應(yīng)用到界面設(shè)計(jì)中也非常簡(jiǎn)單：為了將優(yōu)質(zhì)的用戶體驗(yàn)提供給盡可能多的設(shè)備，就不得不做出犧牲，個(gè)別界面可能會(huì)“略有瑕疵”。小小的折中能夠使設(shè)計(jì)的適應(yīng)面更廣，應(yīng)用更多樣化。
觸摸至上的設(shè)計(jì)
這種折中的設(shè)計(jì)思維，可以體現(xiàn)在觸摸交互界面中，現(xiàn)在它以經(jīng)扎根于桌面網(wǎng)頁(yè)設(shè)計(jì)中了。
在觸摸交互界面中，手指作為定點(diǎn)設(shè)備，它比鼠標(biāo)的指針大得多，這就需要更大的觸摸對(duì)象。為了確保可用性，交互元素也需要更大。出于美學(xué)的考慮，相應(yīng)的需要增大內(nèi)邊距和外邊距。因?yàn)楦蟮慕换ピ匦枰蟮倪吘鄟?lái)保持一種視覺(jué)上的平衡感。
讓網(wǎng)頁(yè)在各式終端奏響美妙樂(lè)章,PS教程,
Gmail 在新設(shè)計(jì)中采用了很多留白區(qū)域，增大了按鈕的內(nèi)邊距，非常適合手指操作，盡管這是桌面版的設(shè)計(jì)。
按照以前的思維，觸摸交互界面和桌面界面涇渭分明，但iPad的出現(xiàn)以及流行使兩者之間的界線變得模糊，iPad為兩者“牽線搭橋”。iPad的觸摸設(shè)計(jì)影響了桌面界面設(shè)計(jì)?？梢粤粢庖幌伦罱烂娼缑嬖O(shè)計(jì)的主要作品，諸如Gmail，Twitter，以及一些CSS圖庫(kù)，你可以看到網(wǎng)頁(yè)上的設(shè)計(jì)開(kāi)始跟以前略有不同了。似乎元素看起來(lái)更…豐滿了。更多的留白區(qū)域，更大內(nèi)邊距的按鈕，總體來(lái)說(shuō)，就是元素更大了。當(dāng)然，日益增長(zhǎng)的桌面屏幕尺寸也是這一現(xiàn)象的原因之一。
這種設(shè)計(jì)，對(duì)于鼠標(biāo)操作來(lái)說(shuō)，可能元素排布不是很緊密，但是卻給拇指提供了充足的操作空間，防止了觸摸的誤操作。允許些許的不完美，以提供更普遍化的用戶體驗(yàn)。等等，聽(tīng)起來(lái)這論調(diào)怎么那么熟悉?沒(méi)錯(cuò)，這就是界面設(shè)計(jì)中的平均律!
我們要注意到，如果界面設(shè)計(jì)能夠適合手指的觸摸操作，那么該設(shè)計(jì)一般會(huì)更適合桌面上的鼠標(biāo)操作。易于觸摸的按鈕通常會(huì)更易于點(diǎn)擊。平衡來(lái)自混亂，完美來(lái)自些許的瑕疵，通過(guò)這種設(shè)計(jì)方式，在滿足觸摸交互體驗(yàn)的同時(shí)，也提升了桌面場(chǎng)景的體驗(yàn)。
讓網(wǎng)頁(yè)在各式終端奏響美妙樂(lè)章,PS教程,
微軟的Metro化設(shè)計(jì)語(yǔ)言以觸摸為主，達(dá)到了很好的交互性。
通過(guò)響應(yīng)式設(shè)計(jì)實(shí)現(xiàn)的普遍化設(shè)計(jì)
盡管關(guān)于響應(yīng)式設(shè)計(jì)的討論，很多聚焦于技術(shù)層面和響應(yīng)式概念的層面，但是“響應(yīng)能力”這個(gè)指標(biāo)不應(yīng)該是我們的目標(biāo)，只是我們?yōu)榱藵M足用戶需求的某種條件：只是我們對(duì)于不同內(nèi)容的呈遞所需要具備的工具;只是我們用來(lái)壓縮圖像大小的一種技術(shù);只是我們用來(lái)合理布局，更好的呈遞信息，以適應(yīng)小屏幕顯示的一種手段。
響應(yīng)式設(shè)計(jì)的核心目標(biāo)是為不同設(shè)備提供普遍化的體驗(yàn)。
掌握響應(yīng)式設(shè)計(jì)的過(guò)程，便是一種普遍化設(shè)計(jì)的訓(xùn)練，掌握了響應(yīng)式，我們便對(duì)設(shè)計(jì)的“平均律”有了更深層次的了解。Boston Globe的網(wǎng)站便是此理論的絕佳案例。
讓網(wǎng)頁(yè)在各式終端奏響美妙樂(lè)章,PS教程,
The Boston Globe 是響應(yīng)式設(shè)計(jì)的絕佳案例，適應(yīng)性很強(qiáng)。
響應(yīng)式設(shè)計(jì)策略簡(jiǎn)化了設(shè)計(jì)，一種設(shè)計(jì)便能滿足多用設(shè)備的閱讀需求，The Boston Globe的網(wǎng)站就很棒，用戶在任何設(shè)備上都可以獲取舒心的閱讀體驗(yàn)(即便是蘋(píng)果的牛頓古董計(jì)算機(jī)也能)。這不僅僅是一種前段技術(shù)。響應(yīng)式設(shè)計(jì)通過(guò)對(duì)media queries和JavaScript的巧妙運(yùn)用，讓設(shè)計(jì)具備更靈活的彈性，提高了設(shè)計(jì)的適應(yīng)能力。
這是一種可調(diào)節(jié)、均衡的設(shè)計(jì)。盡管極簡(jiǎn)主義設(shè)計(jì)極度有型，但我曾經(jīng)以為它只能在桌面上實(shí)現(xiàn)，而曾經(jīng)的移動(dòng)端界面設(shè)計(jì)，大多過(guò)于注重裝飾，顯得華而不實(shí)。將桌面上的設(shè)計(jì)風(fēng)格移植到多個(gè)平臺(tái)，以追求一致性的體驗(yàn)，這本來(lái)是一項(xiàng)艱巨的工程，但是響應(yīng)式設(shè)計(jì)橫空出現(xiàn)。設(shè)計(jì)師做了一點(diǎn)點(diǎn)權(quán)衡，在設(shè)計(jì)上進(jìn)行了調(diào)整，一種設(shè)計(jì)便能適應(yīng)多種應(yīng)用場(chǎng)景——你看，設(shè)計(jì)師也會(huì)彈奏十二平均律。
移動(dòng)優(yōu)先的設(shè)計(jì)
前面的案例大多和平面設(shè)計(jì)有關(guān)，但是平均律的思想可以為設(shè)計(jì)師所用，用來(lái)進(jìn)行產(chǎn)品設(shè)計(jì)，用戶體驗(yàn)設(shè)計(jì)，信息構(gòu)架——幾乎涵蓋了設(shè)計(jì)的各個(gè)領(lǐng)域。讓我們一起來(lái)看看在產(chǎn)品設(shè)計(jì)中的體現(xiàn)，以及移動(dòng)至上的設(shè)計(jì)理念。
如果你信奉“移動(dòng)優(yōu)先”，并以此為自己的設(shè)計(jì)理念，那么恭喜你，你的理念和平均律的思想不謀而合。只要你的設(shè)計(jì)流程圍繞移動(dòng)端展開(kāi)，并且設(shè)計(jì)能夠符合移動(dòng)應(yīng)用場(chǎng)景的苛刻條件，那么你的設(shè)計(jì)將具有一種簡(jiǎn)樸、實(shí)用的美感，因?yàn)榉浅Ｄ?，只包含產(chǎn)品最基本的元素。
正如 Luke Wroblewski 寫(xiě)的那樣：
當(dāng)一個(gè)設(shè)計(jì)團(tuán)隊(duì)進(jìn)行移動(dòng)優(yōu)先的設(shè)計(jì)時(shí)，設(shè)計(jì)成果將非常符合用戶的任務(wù)需求和預(yù)期。這種設(shè)計(jì)不會(huì)誤入歧途，而是直奔主題;這種設(shè)計(jì)不會(huì)像桌面上的界面設(shè)計(jì)一樣，不會(huì)有毫無(wú)意義的裝飾元素。無(wú)論是從用戶體驗(yàn)的角度，還是商業(yè)的角度，這都是一件好事。
當(dāng)這種設(shè)計(jì)從移動(dòng)端擴(kuò)散到各個(gè)平臺(tái)之時(shí)，便完成了優(yōu)良體驗(yàn)的多平臺(tái)、多設(shè)備覆蓋。這便是設(shè)計(jì)的十二平均律。最近Twitter的重設(shè)計(jì)便很好的闡述了這種設(shè)計(jì)策略。
讓網(wǎng)頁(yè)在各式終端奏響美妙樂(lè)章,PS教程,
New Twitter 簡(jiǎn)約的設(shè)計(jì)，多設(shè)備一致性的體驗(yàn)。
Twitter重設(shè)計(jì)的目標(biāo)之一便是打造計(jì)算機(jī)、手機(jī)多平臺(tái)的一致性體驗(yàn)。這對(duì)于界面設(shè)計(jì)來(lái)說(shuō)，可謂是一種挑戰(zhàn)。那么有沒(méi)有捷徑呢?有，移動(dòng)優(yōu)先的設(shè)計(jì)策略便能幫助我們迅速達(dá)成目標(biāo)。
我在Twitter的重設(shè)計(jì)上發(fā)現(xiàn)了有趣的一點(diǎn)，那便是移動(dòng)端的體驗(yàn)設(shè)計(jì)涵蓋(或者說(shuō)影響)到了各個(gè)平臺(tái)上。例如，除了Tweet 按鈕之外，用戶所有的操作均由四個(gè)標(biāo)簽展開(kāi)：“Home”、“Connect”、“Discover”、“Me”。為何?因?yàn)檫@種設(shè)計(jì)非常適合手機(jī)那種小屏。標(biāo)簽欄的四個(gè)元素便能實(shí)現(xiàn)大部分操作。
桌面版的網(wǎng)頁(yè)，便是以此為基礎(chǔ)，添加了更豐富的功能，但是依然有移動(dòng)版那種簡(jiǎn)化風(fēng)格的痕跡。盡管桌面版的界面空間非常大，元素非常多，但是為了移動(dòng)端的用戶體驗(yàn)，設(shè)計(jì)的很收斂，設(shè)計(jì)師懂得權(quán)衡，以便確保多設(shè)備間體驗(yàn)的普遍性。
小心設(shè)計(jì)的“狼音”
雖然平均律很好，但是在某些調(diào)式中會(huì)出現(xiàn)狼音，不過(guò)要肯定的是，狼音不是由于平均律引起的。何謂狼音?狼音是樂(lè)器自然共鳴引起的一種刺耳的哮聲，是樂(lè)器設(shè)計(jì)的必然結(jié)果。因此，音樂(lè)家給這種聲音起了一種很形象的名字：他們管它叫做“狼音”。
在界面設(shè)計(jì)中，當(dāng)我們把某些交互元素或者視覺(jué)元素移植到其他平臺(tái)時(shí)，某些問(wèn)題似乎不可避免。例如，桌面版的網(wǎng)頁(yè)設(shè)計(jì)必然包含鏈接，光標(biāo)操作并不是很費(fèi)力，那么移植到手機(jī)上后，你會(huì)發(fā)現(xiàn)鏈接很小，很不便于觸控?；蛘咦烂姘娴淖煮w大小屬性原封不動(dòng)的移植到了移動(dòng)端，用戶讀起來(lái)很吃力。再或者，懸停效果對(duì)于觸摸設(shè)備。這些都是界面設(shè)計(jì)中的狼音。
讓網(wǎng)頁(yè)在各式終端奏響美妙樂(lè)章,PS教程,
這篇文章的鏈接只適合鼠標(biāo)操作。當(dāng)用戶使用移動(dòng)觸摸設(shè)備進(jìn)行瀏覽時(shí)，此頁(yè)面的可用性降低了。
讓網(wǎng)頁(yè)在各式終端奏響美妙樂(lè)章,PS教程,
New York Magazine 的下拉式導(dǎo)航很實(shí)用，設(shè)計(jì)的很棒——但是僅僅適用于鼠標(biāo)操作。
結(jié)論以及實(shí)用建議
再重復(fù)一次，響應(yīng)式設(shè)計(jì)和移動(dòng)優(yōu)先策略是明智的選擇，能夠幫助我們解決上述問(wèn)題。如果我們能夠一勞便能永逸，又何必費(fèi)事的一個(gè)平臺(tái)一個(gè)平臺(tái)的設(shè)計(jì)?別忘了，設(shè)備的種類會(huì)越來(lái)越多，設(shè)計(jì)也要講究方法。
盡管我們現(xiàn)在已經(jīng)有了響應(yīng)式設(shè)計(jì)這種能夠“量體裁衣”的處理方式，但依然要學(xué)會(huì)思考，尤其當(dāng)設(shè)計(jì)需要跨越不同設(shè)別、不同平臺(tái)時(shí)，我們要借鑒古人平均律的思想，在概念上思考普遍、可達(dá)的設(shè)計(jì)該要如何實(shí)現(xiàn)。
除此之外，我們要注意的一點(diǎn)是，雖然響應(yīng)式設(shè)計(jì)能夠?qū)崿F(xiàn)多平臺(tái)體驗(yàn)的一致性。用戶不一定會(huì)有一致性的預(yù)期，也就是說(shuō)，有可能，用戶不會(huì)把一款應(yīng)用桌面版上的經(jīng)驗(yàn)當(dāng)成移動(dòng)版的預(yù)期。有時(shí)各個(gè)平臺(tái)之間的聯(lián)系性可能會(huì)非常模糊。至于要怎樣設(shè)計(jì)，是繼續(xù)使用響應(yīng)式設(shè)計(jì)?還是根據(jù)設(shè)備的特點(diǎn)打造截然不同的體驗(yàn)?這就仁者見(jiàn)仁，智者見(jiàn)智了。
需要記住的幾點(diǎn)建議：
? 響應(yīng)式的思考
即便你的設(shè)計(jì)形式上不完全遵循響應(yīng)式設(shè)計(jì)，但設(shè)計(jì)思想上要有“響應(yīng)式”的意識(shí)，因?yàn)榭捎眯院?、普遍性高的設(shè)計(jì)使我們共同追求。
? 要有觸摸至上的思想
如果一個(gè)按鈕的尺寸適合手指操作，那么這個(gè)按鈕同樣適合光標(biāo)操作。反之亦然嗎?不亦然。適合光標(biāo)操作的按鈕尺寸往往不適合手指操作。觸摸至上的設(shè)計(jì)思想能夠確保你的網(wǎng)頁(yè)或者應(yīng)用適應(yīng)不同的應(yīng)用場(chǎng)景。
? 要有普遍性的思想
老話說(shuō)的好,”早測(cè)試，常測(cè)試?！边@里的“測(cè)試”可以換成“思考”，如果有需求，那么早作打算，早點(diǎn)思考問(wèn)題，你的設(shè)計(jì)到底該要如何在不同設(shè)備上實(shí)現(xiàn)基本一致的功能。
? 要有移動(dòng)優(yōu)先的思想
移動(dòng)優(yōu)先的設(shè)計(jì)策略能幫助你思考：對(duì)于用戶來(lái)說(shuō)，什么是最基本的?什么又是最重要的?只要將設(shè)計(jì)的重心集中于最基本的特點(diǎn)，那么打造一致性體驗(yàn)將會(huì)很容易。
? 要謹(jǐn)慎
不同界面的交互特點(diǎn)不同。懸停狀態(tài)就是個(gè)例子。你不能用鼠標(biāo)來(lái)實(shí)現(xiàn)觸摸手勢(shì)操作。小心這些限制和約束。
尾聲
巴赫一直相信，鋼琴上的每一個(gè)鍵都可以隨意的彈奏、或者用來(lái)譜曲。他通過(guò)自己美妙的音樂(lè)證明了這一點(diǎn)，用方法制服了規(guī)則。
巴赫的平均律讓作曲家和音樂(lè)家的手指能夠隨心所欲的在鋼琴上跳動(dòng)。
我們每一位設(shè)計(jì)師都想要在網(wǎng)頁(yè)以及應(yīng)用上構(gòu)建偉大的用戶體驗(yàn)，讓設(shè)計(jì)超越媒介，在不同的設(shè)備上、不同的場(chǎng)景下表現(xiàn)出同樣的驚艷。我們每一位設(shè)計(jì)時(shí)都想讓我們的設(shè)計(jì)具備更好的可用性以及可達(dá)性。這是我們對(duì)用戶的責(zé)任所在。
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯(cuò)過(guò)
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強(qiáng)大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn)，優(yōu)秀的技術(shù)和設(shè)計(jì)水平，更放心
3. 全程省心服務(wù)，不必?fù)?dān)心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話：021-58370032
關(guān)鍵詞標(biāo)簽：上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開(kāi)發(fā)