在響應(yīng)式設(shè)計(jì)時(shí)代中我們應(yīng)如何設(shè)計(jì)網(wǎng)站，隨著各種屏幕尺寸設(shè)備的興起以及交互方式的多樣性，之前采用的網(wǎng)站設(shè)計(jì)方法已不再適用。我們需要更新設(shè)計(jì)方法，更新設(shè)計(jì)觀念，更新設(shè)計(jì)工具。該文從分析Web發(fā)生了哪些變化入手，引出創(chuàng)新互聯(lián)已采用的新的設(shè)計(jì)理念。

不久以前，我們進(jìn)行的Web設(shè)計(jì)均是針對(duì)默認(rèn)的屏幕大小和輸入類型。但隨著各種屏幕尺寸設(shè)備的興起，以及交互方式的多樣性，這些默認(rèn)值已不再適用?，F(xiàn)在我們進(jìn)行網(wǎng)站設(shè)計(jì)所用到的所有默認(rèn)值均需要更新。

Web近年來(lái)所發(fā)生的變化人們一直在談?wù)揥eb發(fā)生了改變，讓我們首先看看Web究竟發(fā)生了哪些變化。

屏幕尺寸

90年代，Web頁(yè)為640像素寬，21世紀(jì)初，其寬增長(zhǎng)到800像素。幾年以前，我們將它調(diào)整為1024像素。但就在5年前，“奇怪的事”突然發(fā)生了。小屏幕設(shè)備進(jìn)入市場(chǎng)。一時(shí)間，我們對(duì)Web設(shè)定的寬就不再適合了。不久，平板電腦進(jìn)入市場(chǎng)?，F(xiàn)在屏幕視窗的高超過(guò)了寬。

屏幕尺寸已沒有固定的值(圖片來(lái)自：Aram Bartholl)

現(xiàn)在我們無(wú)法了解用戶所使用窗體的大小。我們只能假設(shè)其寬是一個(gè)令用戶舒服的隨機(jī)數(shù)。這些數(shù)字是任意的，總會(huì)有一些用戶會(huì)看到不完整的Web頁(yè)面。在這里，我們可以先忽略這些用戶。

“每個(gè)人都有一個(gè)鼠標(biāo)”

我們總是默認(rèn)每個(gè)用戶都有一個(gè)鼠標(biāo)。雖然我們知道，這并不總是事實(shí)。大部分設(shè)計(jì)師會(huì)忽略為不使用鼠標(biāo)的用戶設(shè)計(jì)交互方式。不管什么原因，那些不得不使用鍵盤的用戶往往很難與我們的網(wǎng)站進(jìn)行交互。

但由于大部分用戶確實(shí)使用鼠標(biāo)，當(dāng)時(shí)很多設(shè)計(jì)者認(rèn)為設(shè)計(jì)只要滿足大部分人就可以了，所以我們?cè)O(shè)計(jì)出的網(wǎng)站還是有很多人是無(wú)法使用的。事實(shí)證明，這個(gè)數(shù)據(jù)一直在增加。很多依靠鼠標(biāo)進(jìn)行的交互，在觸摸設(shè)備上是完全不起作用的。因?yàn)橛脩粝矚g這些設(shè)備，甚至管理者和設(shè)計(jì)師都在用它們，所以它們是很難被忽略掉。

“每個(gè)人都有寬帶互聯(lián)網(wǎng)”

我們另一個(gè)默認(rèn)情況就是每個(gè)人都有速度超快的互聯(lián)網(wǎng)，至少和我們的一樣快。如果他們現(xiàn)在沒有它，不久也會(huì)有的。這似乎又是實(shí)事。網(wǎng)速確實(shí)越來(lái)越快。但是，今天越來(lái)越多的人在使用差勁的、不可靠的3G網(wǎng)絡(luò)。如果你曾在火車上使用3G網(wǎng)絡(luò)，你就會(huì)明白我所說(shuō)的。如果你曾在酒店使用其提供的免費(fèi)Wi-Fi，你就會(huì)明白我們假設(shè)互聯(lián)網(wǎng)越來(lái)越快是不成立的。這是我們思維中的一大變化，我們確實(shí)應(yīng)該為這些用戶考慮。這將對(duì)我們的設(shè)計(jì)外觀產(chǎn)生較大影響。

“大家的電腦一年比一年快”

電腦越來(lái)越快，過(guò)去是這樣的。如果在買電腦之前再等半年，同樣的價(jià)格你就可以買一臺(tái)快兩倍的電腦。這主要針對(duì)新式臺(tái)式機(jī)，但對(duì)于移動(dòng)設(shè)備，其有比處理器速度更重要的事。例如，對(duì)于手機(jī)，最重要的是電池待機(jī)時(shí)間：你不想每次打完電話后都必須充電吧。

還有另一個(gè)趨勢(shì)：現(xiàn)在的制造商開始銷售價(jià)格更低廉的設(shè)備，而非速度更快的設(shè)備。相比處理器速度，很多用戶更關(guān)注價(jià)格和電池待機(jī)時(shí)間。你的老式電腦怎么樣了?你可能賣了，也可能扔了。但用戶仍保留并使用著。并不是每個(gè)人都擁有與我們?cè)O(shè)計(jì)師同樣的硬件設(shè)備。

“所有的顯示器均校準(zhǔn)過(guò)”

我們很清楚這一條是不對(duì)的。只有那些可視化專業(yè)人士的顯示器才進(jìn)行過(guò)校準(zhǔn)。其他人的顯示器大部分都無(wú)法正確顯示色彩，很多顯示器還是十分差勁的。我所測(cè)試過(guò)的大部分移動(dòng)手機(jī)有著相當(dāng)棒的顯示屏?？僧?dāng)在陽(yáng)光下使用時(shí)，如果你幸運(yùn)，或許還可以看得見內(nèi)容，但卻無(wú)法看到低對(duì)比度設(shè)計(jì)下的微妙漸變。

人們總會(huì)使用那些低劣的顯示器，而且訪問(wèn)你網(wǎng)站的人往往視力不好。越來(lái)越多的人正在看不合格的調(diào)色板。與其購(gòu)買一款專業(yè)的藝術(shù)類顯示器，不如購(gòu)買一款廉價(jià)的顯示器和幾臺(tái)低端設(shè)備來(lái)測(cè)試你的作品，這是更好的投資。

Web在最近5年里發(fā)生了變化，創(chuàng)建網(wǎng)站的老方式已不再適用。我們需要新的方法論。

This Is Responsive，該網(wǎng)站為響應(yīng)式設(shè)計(jì)提供了很好的資源。

過(guò)去幾年里，我們一直在積極地研究新方法，以解決Web在不同尺寸屏幕上的顯示問(wèn)題。除了響應(yīng)式設(shè)計(jì)，在日益增長(zhǎng)的設(shè)備上存在越來(lái)越多的挑戰(zhàn)。我們必須尋找新的交互模式：我們需要可以工作于任何設(shè)備上的界面。設(shè)計(jì)過(guò)程中，一些新的約定俗成正在產(chǎn)生，即新的默認(rèn)。下文將列出我所收集到的新的默認(rèn)情況。

新的默認(rèn)：激活方式

本想用“觸控”一詞，但考慮到大家對(duì)該詞的理解不同，所以改為了“激活”。對(duì)于所有設(shè)備，無(wú)論他們需要怎樣的輸入方式，都需要用戶以某種方法來(lái)激活某件事。

對(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)容，移開后則隱藏內(nèi)容。在觸控設(shè)備進(jìn)入市場(chǎng)之前，該方法一直為大部分人所采用。當(dāng)內(nèi)容只有通過(guò)鼠標(biāo)操作才能顯示的話，那對(duì)于沒有鼠標(biāo)的觸控設(shè)備該怎么辦呢?不同設(shè)備要有不同的解決方案。下面看看這個(gè)下拉菜單。

當(dāng)鼠標(biāo)停在主菜單項(xiàng)上，子菜單便出現(xiàn)。此外，你還可以點(diǎn)擊它打開該鏈接?，F(xiàn)在，你在觸摸設(shè)備上敲擊該菜單項(xiàng)，會(huì)發(fā)生什么?子菜單出現(xiàn)了嗎?鏈接激活了嗎?兩者都發(fā)生了?還是發(fā)生了其他事情呢?在iOS上，其他事情發(fā)生了。你第一次敲擊該鏈接時(shí)，子菜單出現(xiàn)了，即引發(fā)了鼠標(biāo)停在主菜單項(xiàng)上的事件。但你需要再敲擊一下這個(gè)鏈接，才能打開它。

我們可以針對(duì)不同的輸入設(shè)備定義不同的交互方式。但我認(rèn)為更好的辦法是確保默認(rèn)的交互方式適用于所有用戶。如果你確實(shí)要這么做，你可以針對(duì)特定的用戶來(lái)增強(qiáng)這種默認(rèn)體驗(yàn)。

例如，你確定有人正在使用鼠標(biāo)，那你要保證靠鼠標(biāo)進(jìn)行的交互方式可用;如果你確定某人的手指較粗，那你要把小按鈕做得再大些。只要大家對(duì)此無(wú)疑問(wèn)，只要這種改善有利于交互，就可以這樣做，但默認(rèn)的交互方式除外。在這些假設(shè)中，有一些，比如鼠標(biāo)的使用，是很難去除的——尤其在可以提供多種交互方式的設(shè)備上，如可安裝鼠標(biāo)、帶有觸摸鍵盤、相機(jī)、麥克風(fēng)、鍵盤和觸摸屏的筆記本。對(duì)此要認(rèn)真思考一下。你確實(shí)需要針對(duì)鼠標(biāo)進(jìn)行優(yōu)化嗎?

新的默認(rèn)：小屏幕

正如把一輛小汽車進(jìn)行壓縮，雖說(shuō)更美觀了，但卻沒有以前實(shí)用了。在網(wǎng)站上也同樣，桌面上的網(wǎng)站進(jìn)行壓縮后用到小屏幕設(shè)備上，并不一定能帶來(lái)同樣的用戶體驗(yàn)。

構(gòu)建適用于所有屏幕上的響應(yīng)式網(wǎng)站，首先針對(duì)小屏幕進(jìn)行設(shè)計(jì)是最容易的。它會(huì)迫使你專注于真正重要的事情上：不適于小屏幕的，很可能就是不重要。它會(huì)迫使你更好地思考布局，思考頁(yè)面中內(nèi)容的展現(xiàn)順序。

上文提到的交互設(shè)計(jì)方法同樣適用于圖形設(shè)計(jì)——首先設(shè)計(jì)激活事件，之后再改善它。我們首先設(shè)計(jì)每個(gè)人都能看見的東西，即內(nèi)容。無(wú)論屏幕大小，無(wú)論瀏覽器功能多少，其均能顯示字符。這是我們唯一確定的事情，所以從文本開始設(shè)計(jì)是原則(大部分Kindles不支持色彩，老版本的瀏覽器無(wú)法支持新版CSS中的很多特性，布局在小屏幕設(shè)備上處于次要位置。)

我們可以從設(shè)計(jì)不同大小字體間的布局著手。無(wú)論每個(gè)人有怎樣的設(shè)備，他們都可以看到該布局。該布局設(shè)計(jì)好后，你就可以針對(duì)更大屏幕設(shè)計(jì)布局。你可以把它看成針對(duì)使用更大屏幕用戶的一次改善。之后，當(dāng)不同的布局完成之后，你就可以為該網(wǎng)站增加其他“修飾” 了，如顏色、漸變、邊框等。

不能同時(shí)考慮其他方面。我也正嘗試尋找所有不同設(shè)備(具有不同的屏幕大小，不同的特性)之間的共同點(diǎn)。首先針對(duì)這些共同點(diǎn)進(jìn)行設(shè)計(jì)是合理的。而奇觀的是，該一點(diǎn)往往被忽視：Web專業(yè)人員傾向于在高配置的設(shè)備(運(yùn)行著最新版本的瀏覽器)上審視他們的作品。他們僅看到了改善部分，卻忽略了提供基本體驗(yàn)的這些共同點(diǎn)。

新的默認(rèn)：內(nèi)容

直到最近，我們都是這樣設(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)，沒有任何小部件比空白區(qū)域更美觀。

從內(nèi)容開始著手，可以幫助我們找出很多有趣的解決方案。例如，Logo確實(shí)需要放在每頁(yè)的頂部嗎?在很多網(wǎng)頁(yè)中，放在頁(yè)腳部分效果可能更好，如在數(shù)字類型的導(dǎo)航中，或在注冊(cè)頁(yè)面中。子導(dǎo)航中的很多鏈接放在主要內(nèi)容區(qū)域的相關(guān)部分效果可能更好。

當(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)航，并將其顯示在頂部。

在響應(yīng)式Web設(shè)計(jì)時(shí)代，我們需要很多新的、聰明的解決方案。

過(guò)程改進(jìn)

看完上面內(nèi)容后，你可能明白這只是過(guò)程改進(jìn)。從文本開始，對(duì)文本進(jìn)行設(shè)計(jì)，根據(jù)不同的屏幕大小和設(shè)備對(duì)它進(jìn)行優(yōu)化，之后再針對(duì)特殊屬性進(jìn)一步優(yōu)化，如鼠標(biāo)的使用，針對(duì)胖手指的設(shè)計(jì)。很多Web開發(fā)人員基于該原則構(gòu)建網(wǎng)站。他們把漂亮的Photoshop制圖轉(zhuǎn)化成上述不同的層。

如果開發(fā)者有很好的設(shè)計(jì)感且關(guān)注細(xì)節(jié)，這可以產(chǎn)生很好的效果。但如果他們并非如此(大部分情況是這樣的)，便很容易設(shè)計(jì)出可用性不好、簡(jiǎn)陋的產(chǎn)品。我并不是說(shuō)不讓設(shè)計(jì)者使用Photoshop。如果那是你的工具，繼續(xù)使用它。但要記住，你正在設(shè)計(jì)Web的不同層，不是Photoshop中的層。一個(gè)Web要比單張漂亮圖片包含更多內(nèi)容。人們會(huì)以各種方式看我們的設(shè)計(jì)，我們?cè)跒樗羞@些人進(jìn)行設(shè)計(jì)。請(qǐng)記住，我們不僅僅為使用筆記本的CEO設(shè)計(jì)，還為在火車上或使用免費(fèi)Wi-Fi的人設(shè)計(jì)。

工具

上面也提到了，在設(shè)計(jì)Web過(guò)程中，Photoshop一直被濫用。好設(shè)計(jì)工具的缺失是造成過(guò)程改進(jìn)難以進(jìn)行的原因之一。我們所使用的工具大部分是幫助我們?yōu)榫W(wǎng)站增加“修飾”，而不是設(shè)計(jì)其核心。很幸運(yùn)，針對(duì)特定功能的小型設(shè)計(jì)工具越來(lái)越多。如Gridset幫助我們針對(duì)不同的屏幕尺寸設(shè)計(jì)網(wǎng)格。好的設(shè)計(jì)工具可以幫助我們定義排版。把這些設(shè)計(jì)工具融入到我們的設(shè)計(jì)過(guò)程中，我們可以設(shè)計(jì)出更好的作品。

結(jié)論

現(xiàn)在的網(wǎng)站設(shè)計(jì)與以前已大不同。固定、單一的交互方式已不再適用。我們的設(shè)計(jì)過(guò)程需要新的起點(diǎn)。除了上文提到的，還有很多。就拿我們常用的表單來(lái)說(shuō)吧，它足夠用一系列文章來(lái)講述。希望大家在設(shè)計(jì)過(guò)程中，可以創(chuàng)新出更多好方法。

本文名稱：『在響應(yīng)式設(shè)計(jì)時(shí)代中我們應(yīng)如何設(shè)計(jì)網(wǎng)站』
文章出自：http://www.rwnh.cn/news48/164848.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、用戶體驗(yàn)、手機(jī)網(wǎng)站建設(shè)、Google、網(wǎng)站策劃、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)