UI網(wǎng)站設(shè)計(jì)方案應(yīng)遵循的原則

觸摸優(yōu)先設(shè)計(jì)、響應(yīng)式設(shè)計(jì)、移動(dòng)優(yōu)先設(shè)計(jì)是UI設(shè)計(jì)師設(shè)計(jì)網(wǎng)站應(yīng)遵循的三大原則，以使網(wǎng)站最大范圍地適應(yīng)各種設(shè)備。外文《ＤｅｓiｇniｎｇTheWelｌ－TempeｒeｄＷｅb》中簡(jiǎn)略闡述了這三大原則UI設(shè)計(jì)師需要做什么?最近幾年，針對(duì)多設(shè)備進(jìn)行設(shè)計(jì)已成為Web設(shè)計(jì)領(lǐng)域最令人興奮的開發(fā)工作.以前主要關(guān)注網(wǎng)站是否可以在兩個(gè)不同掃瞄器上運(yùn)行正常，現(xiàn)在則轉(zhuǎn)移到它是否可以在具有完全不同特性的多種設(shè)備上正常運(yùn)行，這些設(shè)備具有不同的屏幕尺寸、不同的性能、不同的使用環(huán)境及不同的界面。雖然響應(yīng)式設(shè)計(jì)和針對(duì)設(shè)備定制網(wǎng)站可以幫助我們制作出針對(duì)不同體驗(yàn)的設(shè)計(jì)，但仍有很多時(shí)候我們必須做出統(tǒng)一的決策。這時(shí),“平均律”的概念或許有些幫助.該概念在UI設(shè)計(jì)中的應(yīng)用一個(gè)簡(jiǎn)潔的過程:為了針對(duì)一系列不同設(shè)備設(shè)計(jì)出好的體驗(yàn)，我們必須允許某些界面消滅偶爾的不完善.我們必須做出小小的妥協(xié)，以保證我們的設(shè)計(jì)可以很好地適應(yīng)其他的環(huán)境。觸摸優(yōu)先設(shè)計(jì)具有“平均律"特性的網(wǎng)站已經(jīng)將觸摸式界面應(yīng)有到了最近的桌面網(wǎng)站設(shè)計(jì)中。在占用面積上,手指要大于鼠標(biāo)指針,所以手指需要更大的觸控區(qū)域。為了確保可用性，交互元素需要更大。當(dāng)交互元素的面積增大后,其他元素也需要相應(yīng)的增大以保持平衡。這就需要通過margｉn和ｐaddｉnｇ兩個(gè)屬性來設(shè)定.新版Gmaiｌ設(shè)計(jì)有大量的空白區(qū)域，對(duì)按鈕設(shè)定了額外的Ｐadding。雖然它只是針對(duì)桌面的設(shè)計(jì),但也可以很好地兼容觸摸設(shè)備.iＰad在觸摸界面和不同大小桌面屏幕之間搭建了橋梁。而iPad的流行加速了觸摸屏在桌面界面設(shè)計(jì)中的影響。如果你觀察一些剛經(jīng)過重新設(shè)計(jì)的聞名產(chǎn)品,如Gmail,Tｗitｔeｒ，你就會(huì)發(fā)現(xiàn)Ｗｅb設(shè)計(jì)已有明顯的不同.他們看上去更“豐滿”。有更多的空白區(qū)域，按鈕有更多的Paｄdｉng，上面的元素整體看來增大了不少.當(dāng)然，其他的因素也在發(fā)揮作用，比如桌面屏幕尺寸的穩(wěn)定增長(zhǎng)。當(dāng)為鼠標(biāo)供應(yīng)了“過多”的空間,而對(duì)于手指來說，空間剛剛好時(shí),我們的設(shè)計(jì)就算完成了。我們?cè)试S與某體驗(yàn)的標(biāo)準(zhǔn)有稍稍的偏差,以獲得對(duì)全部可能體驗(yàn)的更好支持.有一點(diǎn)值得提出，對(duì)觸摸友好的UI對(duì)于使用桌面鼠標(biāo)的用戶來說，更易用。容易觸摸操控的按鈕,更容易被點(diǎn)擊。響應(yīng)式設(shè)計(jì),達(dá)到統(tǒng)一設(shè)計(jì)的目的雖然關(guān)于響應(yīng)式設(shè)計(jì)的很多商量都是關(guān)于響應(yīng)式設(shè)計(jì)技術(shù)的,但響應(yīng)能力本身并不是最終目標(biāo)。它是達(dá)到目的的一種手段。設(shè)計(jì)具有響應(yīng)能力，是為了達(dá)到其他的一些目的.可能為了支持不同的內(nèi)容,服務(wù)于低寬帶中傳輸?shù)膱D片，在更小的屏幕中更好地展現(xiàn)布局。也可能為了在大范圍不同的設(shè)備上供應(yīng)統(tǒng)一的體驗(yàn).搭載響應(yīng)式設(shè)計(jì)的火車，可以到達(dá)統(tǒng)一的用戶體驗(yàn)設(shè)計(jì)的目的地。ＢostｏnＧlｏbｅ網(wǎng)站在這方面做得很棒。響應(yīng)式設(shè)計(jì)策略可以使一個(gè)簡(jiǎn)潔的設(shè)計(jì)適應(yīng)用戶閱讀BｏstonGloｂe所使用的任何設(shè)備（即便是ApｐleNｅwtｏn).這不僅僅是前端工程師的功勞。協(xié)作使用ＭeｄiaQｕerｉｅｓ和JａvaＳcriｐｔ兩種技術(shù)，也可以達(dá)成這種效果.移動(dòng)優(yōu)先設(shè)計(jì)之前的案例主要針對(duì)圖片設(shè)計(jì)，但“平均律”的概念應(yīng)該應(yīng)用于產(chǎn)品設(shè)計(jì)、用戶體驗(yàn)、信息架構(gòu)中——幾乎設(shè)計(jì)的其他任何領(lǐng)域。讓我們看看產(chǎn)品設(shè)計(jì)及移動(dòng)優(yōu)先的設(shè)計(jì)思想。從移動(dòng)設(shè)備角度動(dòng)身開頭設(shè)計(jì)過程,構(gòu)建可以滿意移動(dòng)環(huán)境中各種限制的產(chǎn)品,你需要專注于產(chǎn)品的最重要元素上.正如LuｋｅＷｒoblｅwski所表述的:“當(dāng)團(tuán)隊(duì)進(jìn)行移動(dòng)優(yōu)先設(shè)計(jì)時(shí),最終是要打造一種體驗(yàn)，該體驗(yàn)主要專注于用戶盼望完成的最主要任務(wù)，沒有任何的繞彎子與界面碎片。這對(duì)于用戶體驗(yàn)和商務(wù)都是有利的?！保裕鱥ｔｔeｒ最近的一次改版驗(yàn)證了這些原則.Twｉttｅr改版的目標(biāo)之一是為了向用戶供應(yīng)全都體驗(yàn)，無論在電腦上還是在各種移動(dòng)設(shè)備上。獲得全都的視覺和感受體驗(yàn)對(duì)于ＵI來說是一個(gè)挑戰(zhàn)，但整個(gè)產(chǎn)品在不同設(shè)備上獲得全都的體驗(yàn)則是更大的挑戰(zhàn)。針對(duì)這兩方面的挑戰(zhàn)，移動(dòng)優(yōu)先設(shè)計(jì)可以幫我們實(shí)現(xiàn)。在Tｗｉtteｒ的改版中,我發(fā)現(xiàn)了一件很有趣的事，即移動(dòng)體驗(yàn)對(duì)整個(gè)產(chǎn)品設(shè)計(jì)的影響。例如，除了“Tweｅt”按鈕外,全部的動(dòng)作按鈕均布置在“Home"、“Cｏnｎeｃt”、“Disｃover”、“Mｅ”四個(gè)標(biāo)簽下面。該簡(jiǎn)潔化的設(shè)計(jì)在小屏幕設(shè)備中運(yùn)行完善，四個(gè)項(xiàng)目也能在標(biāo)簽欄中融洽“相處"。在桌面網(wǎng)站中，雖然新增了一些其他特性,但建立在移動(dòng)版本基礎(chǔ)上的簡(jiǎn)潔仍需存在。雖然桌面版本上有大量的空間來完成更多的簡(jiǎn)潔設(shè)計(jì),但設(shè)計(jì)仍要有所約束、有更好的適應(yīng)性，以確保達(dá)到全都的多設(shè)備體驗(yàn)。當(dāng)心有“狼”在巴赫之前的調(diào)音系統(tǒng)中，被同時(shí)演奏出的不和諧間隔的音符會(huì)產(chǎn)生側(cè)耳、咆哮般的聲音。音樂家把這種聲音稱為“狼嚎”.在界面設(shè)計(jì)中,當(dāng)針對(duì)某一種體驗(yàn)設(shè)計(jì)的視覺或交互元素轉(zhuǎn)移到另一種體驗(yàn)環(huán)境中就會(huì)失效，那么我們稱這種元素為“狼"?；叵胍幌?，你曾經(jīng)費(fèi)勁地用手指點(diǎn)擊一個(gè)很小的針對(duì)鼠標(biāo)設(shè)計(jì)的鏈接,還有幸福地在移動(dòng)設(shè)備、觸摸設(shè)備上閱讀著字體很小的文本，而這些設(shè)備上的界面元素只依靠鼠標(biāo)點(diǎn)擊。這些都是UI上的“狼".這些文章的鏈接只依靠鼠標(biāo)完成交互。當(dāng)在觸摸式的移動(dòng)設(shè)備中掃瞄時(shí)，它們的可能性就會(huì)減低。NeｗＹorkＭaｇａzine供應(yīng)了一個(gè)好用、美觀的下拉式導(dǎo)航菜單,但你只能使用鼠標(biāo)來點(diǎn)擊它.注意事項(xiàng)響應(yīng)式設(shè)計(jì)，供應(yīng)針對(duì)設(shè)備的特定體驗(yàn)，確實(shí)可以解決很多此類問題。如果我們能調(diào)整一個(gè)按鈕的大小以適應(yīng)某一特定的環(huán)境，那么我們就不必接受這種笨重、顧及全局的方法。但是我們需要支持的設(shè)備數(shù)量只會(huì)增加,定制全部可能的方案即將變得不合理。即便我們可以在執(zhí)行層面定制完善的設(shè)計(jì),但仍有必要在概念層面考慮一下可調(diào)節(jié)的、可統(tǒng)一訪問的設(shè)計(jì)。下面列出了幾個(gè)注意事項(xiàng)●響應(yīng)式地思考即便你并不正在實(shí)現(xiàn)一個(gè)完全響應(yīng)式設(shè)計(jì)，簡(jiǎn)潔地用響應(yīng)式的方式去思考將會(huì)對(duì)實(shí)現(xiàn)可用的、統(tǒng)一的設(shè)計(jì)大有幫助?！裼|摸優(yōu)先式思考針對(duì)手指點(diǎn)觸設(shè)計(jì)的按鈕，同樣可以用鼠標(biāo)來點(diǎn)擊。但針對(duì)鼠標(biāo)設(shè)計(jì)的按鈕，用手指觸控時(shí)就會(huì)顯得太小了.觸控優(yōu)先式設(shè)計(jì)，可以確保你的網(wǎng)站和應(yīng)用很好的遷移到其他環(huán)境中?！窠y(tǒng)一式思考正如“早測(cè)試,常常測(cè)試"一樣。在設(shè)計(jì)過程中，應(yīng)該盡早并常常思考你的設(shè)計(jì)如何成功運(yùn)行在不同的設(shè)備之上?！褚苿?dòng)優(yōu)先式思考移動(dòng)優(yōu)先設(shè)計(jì),可以讓你專注于那些關(guān)乎你成功的事情上.保持對(duì)最重要特性的關(guān)注，在不同設(shè)備上實(shí)現(xiàn)統(tǒng)一的體驗(yàn)就變得更加容易了?！癞?dāng)心交互行為不會(huì)在各種界面中得到統(tǒng)一支持。通過鼠標(biāo)來完成的功能在觸摸設(shè)備上可能會(huì)有