近兩年，微軟、蘋果、華為、三星等企業(yè)紛紛將網(wǎng)站轉(zhuǎn)換為響應(yīng)式網(wǎng)站，響應(yīng)式建站逐漸成為行業(yè)主流。不過(guò)很多設(shè)計(jì)師對(duì)響應(yīng)式網(wǎng)站的概念和交互并沒(méi)有深入的領(lǐng)悟，導(dǎo)致在網(wǎng)站建設(shè)中，出現(xiàn)了響應(yīng)式網(wǎng)站效果不佳的現(xiàn)象。在設(shè)計(jì)響應(yīng)式網(wǎng)站過(guò)程中，你踩過(guò)哪些坑呢？
請(qǐng)點(diǎn)擊此處輸入圖片描述
網(wǎng)站在所有平臺(tái)的激活方式都一樣？
對(duì)于所有設(shè)備，無(wú)論他們需要怎樣的輸入方式，都需要用戶以某種方法來(lái)激活某個(gè)頁(yè)面。對(duì)于鼠標(biāo)，就是點(diǎn)擊；對(duì)于觸控設(shè)備，就是滑動(dòng)；對(duì)于鍵盤，就是敲擊。還有聲音、在空中揮動(dòng)手臂等激活方法。很多設(shè)備往往提供多種交互方式。對(duì)于各種設(shè)備，其共同點(diǎn)就是必須通過(guò)激活動(dòng)作來(lái)完成某件事。
我們?cè)?jīng)假設(shè)所有人都使用鼠標(biāo)。當(dāng)鼠標(biāo)移至上面時(shí)顯示內(nèi)容，移開(kāi)后則隱藏內(nèi)容。當(dāng)內(nèi)容只有通過(guò)鼠標(biāo)操作才能顯示的話，那對(duì)于沒(méi)有鼠標(biāo)的觸控設(shè)備該怎么辦呢？不同設(shè)備要有不同的解決方案。下面看看這個(gè)下拉菜單。
請(qǐng)點(diǎn)擊此處輸入圖片描述
當(dāng)鼠標(biāo)停在主菜單項(xiàng)上，子菜單便出現(xiàn)。此外，你還可以點(diǎn)擊它打開(kāi)該鏈接?，F(xiàn)在，你在觸摸設(shè)備上敲擊該菜單項(xiàng)，會(huì)發(fā)生什么？子菜單出現(xiàn)了嗎？鏈接激活了嗎？?jī)烧叨及l(fā)生了？還是發(fā)生了其他事情呢？在iOS上，其他事情發(fā)生了。你第一次敲擊該鏈接時(shí)，子菜單出現(xiàn)了，即引發(fā)了鼠標(biāo)停在主菜單項(xiàng)上的事件。但你需要再敲擊一下這個(gè)鏈接，才能打開(kāi)它。
我們可以針對(duì)不同的輸入設(shè)備定義不同的交互方式，但更好的辦法是確保默認(rèn)的交互方式適用于所有設(shè)備。
一個(gè)網(wǎng)站布局通用所有設(shè)備？
直到最近，很多建站公司都是這樣設(shè)計(jì)網(wǎng)站的：在頂部放上帶有Logo的Banner圖和導(dǎo)航，將子導(dǎo)航放在左邊，右邊放一些小部件，頁(yè)腳放在底部。當(dāng)所有這些完成后，我們?cè)侔褍?nèi)容塞在中部的小小空間中。這就好像我們對(duì)我們的內(nèi)容很不自信，嘗試提供一些用戶可能會(huì)喜歡的其他東西。
我們應(yīng)該專注于中間的部分，保證它正常工作，看起來(lái)美觀、具有可讀性。確保所有人理解它，發(fā)現(xiàn)它有用。
一旦你完成了內(nèi)容部分，你可以自問(wèn)一下，該內(nèi)容確實(shí)需要一個(gè)Banner？Logo？子導(dǎo)航？它必須要有一個(gè)導(dǎo)航嗎？它確實(shí)需要所有的這些小部件嗎？顯然最后一個(gè)問(wèn)題的答案是“不”。我不理解這些小部件有什么用。在我看來(lái)，沒(méi)有任何小部件更美觀。
請(qǐng)點(diǎn)擊此處輸入圖片描述
從內(nèi)容開(kāi)始著手，可以幫助我們找出很多有趣的解決方案。例如，Logo確實(shí)需要放在每頁(yè)的頂部嗎？在很多網(wǎng)頁(yè)中，放在頁(yè)腳部分效果可能更好，如在數(shù)字類型的導(dǎo)航中，或在注冊(cè)頁(yè)面中。子導(dǎo)航中的很多鏈接放在主要內(nèi)容區(qū)域的效果可能更好。
當(dāng)觀看頁(yè)面布局時(shí)，主要導(dǎo)航比主要內(nèi)容更重要嗎？大部分情況下，并不是。我通常認(rèn)為導(dǎo)航屬于頁(yè)腳內(nèi)容，在頁(yè)面頂部放一個(gè)“跳轉(zhuǎn)”鏈接可以把訪問(wèn)者引導(dǎo)至導(dǎo)航處，也可獲得導(dǎo)航，并將其顯示在頂部。
我們需要考慮更多的使用場(chǎng)景
在響應(yīng)式Web設(shè)計(jì)時(shí)代，我們需要很多新的、聰明的解決方案。根據(jù)不同的屏幕大小和設(shè)備對(duì)它進(jìn)行優(yōu)化，之后再針對(duì)特殊屬性進(jìn)一步優(yōu)化，如鼠標(biāo)的使用，針對(duì)胖手指的設(shè)計(jì)。我們不僅僅為使用筆記本的CEO設(shè)計(jì)，還為在火車上或使用免費(fèi)Wi-Fi的人設(shè)計(jì)。
請(qǐng)點(diǎn)擊此處輸入圖片描述
現(xiàn)在的網(wǎng)站設(shè)計(jì)與以前已大不同。固定、單一的交互方式已不再適用。我們的設(shè)計(jì)過(guò)程需要新的起點(diǎn)。除了上文提到的，還有很多。就拿我們常用的表單來(lái)說(shuō)吧，它足夠用一系列文章來(lái)講述。希望大家在設(shè)計(jì)過(guò)程中，可以創(chuàng)新出更多好方法。
說(shuō)了這么多，那有沒(méi)有一些簡(jiǎn)單的方法呢？有的，經(jīng)過(guò)小編多次試用，目前國(guó)內(nèi)擁有15年行業(yè)經(jīng)驗(yàn)的大腕互聯(lián)從2013開(kāi)始就專注于響應(yīng)式網(wǎng)站研發(fā)，目前已經(jīng)研發(fā)說(shuō)一套成熟的響應(yīng)式網(wǎng)站設(shè)計(jì)搭建系統(tǒng),一次設(shè)計(jì)建站自動(dòng)適配所有屏幕。詳情dawaner
