在響應(yīng)式設(shè)計(jì)時(shí)代中我們應(yīng)如何設(shè)計(jì)網(wǎng)站，隨著各種屏幕尺寸設(shè)備的興起以及交互方式的多樣性，之前采用的網(wǎng)站設(shè)計(jì)方法已不再適用。我們需要更新設(shè)計(jì)方法，更新設(shè)計(jì)觀念，更新設(shè)計(jì)工具。該文從分析Web發(fā)生了哪些變化入手，引出海淘科技已采用的新的設(shè)計(jì)理念。
不久以前，我們進(jìn)行的Web設(shè)計(jì)均是針對默認(rèn)的屏幕大小和輸入類型。但隨著各種屏幕尺寸設(shè)備的興起，以及交互方式的多樣性，這些默認(rèn)值已不再適用?，F(xiàn)在我們進(jìn)行網(wǎng)站設(shè)計(jì)所用到的所有默認(rèn)值均需要更新。
Web近年來所發(fā)生的變化人們一直在談?wù)揥eb發(fā)生了改變，讓我們首先看看Web究竟發(fā)生了哪些變化。
90年代，Web頁為640像素寬，21世紀(jì)初，其寬增長到800像素。幾年以前，我們將它調(diào)整為1024像素。但就在5年前，“奇怪的事”突然發(fā)生了。小屏幕設(shè)備進(jìn)入市場。一時(shí)間，我們對Web設(shè)定的寬就不再適合了。不久，平板電腦進(jìn)入市場?，F(xiàn)在屏幕視窗的高超過了寬。
屏幕尺寸已沒有固定的值(圖片來自：Aram Bartholl)
現(xiàn)在我們無法了解用戶所使用窗體的大小。我們只能假設(shè)其寬是一個(gè)令用戶舒服的隨機(jī)數(shù)。這些數(shù)字是任意的，總會(huì)有一些用戶會(huì)看到不完整的Web頁面。在這里，我們可以先忽略這些用戶。
“每個(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ì)只要滿足大部分人就可以了，所以我們設(shè)計(jì)出的網(wǎng)站還是有很多人是無法使用的。事實(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í)越來越快。但是，今天越來越多的人在使用差勁的、不可靠的3G網(wǎng)絡(luò)。如果你曾在火車上使用3G網(wǎng)絡(luò)，你就會(huì)明白我所說的。如果你曾在酒店使用其提供的免費(fèi)Wi-Fi，你就會(huì)明白我們假設(shè)互聯(lián)網(wǎng)越來越快是不成立的。這是我們思維中的一大變化，我們確實(shí)應(yīng)該為這些用戶考慮。這將對我們的設(shè)計(jì)外觀產(chǎn)生較大影響。
“大家的電腦一年比一年快”
電腦越來越快，過去是這樣的。如果在買電腦之前再等半年，同樣的價(jià)格你就可以買一臺(tái)快兩倍的電腦。這主要針對新式臺(tái)式機(jī)，但對于移動(dòng)設(shè)備，其有比處理器速度更重要的事。例如，對于手機(jī)，最重要的是電池待機(jī)時(shí)間：你不想每次打完電話后都必須充電吧。
還有另一個(gè)趨勢：現(xiàn)在的制造商開始銷售價(jià)格更低廉的設(shè)備，而非速度更快的設(shè)備。相比處理器速度，很多用戶更關(guān)注價(jià)格和電池待機(jī)時(shí)間。你的老式電腦怎么樣了?你可能賣了，也可能扔了。但用戶仍保留并使用著。并不是每個(gè)人都擁有與我們設(shè)計(jì)師同樣的硬件設(shè)備。
“所有的顯示器均校準(zhǔn)過”
我們很清楚這一條是不對的。只有那些可視化專業(yè)人士的顯示器才進(jìn)行過校準(zhǔn)。其他人的顯示器大部分都無法正確顯示色彩，很多顯示器還是十分差勁的。我所測試過的大部分移動(dòng)手機(jī)有著相當(dāng)棒的顯示屏?？僧?dāng)在陽光下使用時(shí)，如果你幸運(yùn)，或許還可以看得見內(nèi)容，但卻無法看到低對比度設(shè)計(jì)下的微妙漸變。
人們總會(huì)使用那些低劣的顯示器，而且訪問你網(wǎng)站的人往往視力不好。越來越多的人正在看不合格的調(diào)色板。與其購買一款專業(yè)的藝術(shù)類顯示器，不如購買一款廉價(jià)的顯示器和幾臺(tái)低端設(shè)備來測試你的作品，這是更好的投資。
Web在最近5年里發(fā)生了變化，創(chuàng)建網(wǎng)站的老方式已不再適用。我們需要新的方法論。
This Is Responsive，該網(wǎng)站為響應(yīng)式設(shè)計(jì)提供了很好的資源。
過去幾年里，我們一直在積極地研究新方法，以解決Web在不同尺寸屏幕上的顯示問題。除了響應(yīng)式設(shè)計(jì)，在日益增長的設(shè)備上存在越來越多的挑戰(zhàn)。我們必須尋找新的交互模式：我們需要可以工作于任何設(shè)備上的界面。設(shè)計(jì)過程中，一些新的約定俗成正在產(chǎn)生，即新的默認(rèn)。下文將列出我所收集到的新的默認(rèn)情況。
本想用“觸控”一詞，但考慮到大家對該詞的理解不同，所以改為了“激活”。對于所有設(shè)備，無論他們需要怎樣的輸入方式，都需要用戶以某種方法來激活某件事。
對于鼠標(biāo)，就是點(diǎn)擊;對于觸控設(shè)備，就是滑動(dòng);對于鍵盤，就是敲擊。還有聲音、在空中揮動(dòng)手臂等激活方法。很多設(shè)備往往提供多種交互方式。對于各種設(shè)備，其共同點(diǎn)就是必須通過激活動(dòng)作來完成某件事。
最近，我們開始思考用戶輸入的其他方法。我們曾經(jīng)假設(shè)人們都使用鼠標(biāo)。當(dāng)鼠標(biāo)移至上面時(shí)顯示內(nèi)容，移開后則隱藏內(nèi)容。在觸控設(shè)備進(jìn)入市場之前，該方法一直為大部分人所采用。當(dāng)內(nèi)容只有通過鼠標(biāo)操作才能顯示的話，那對于沒有鼠標(biāo)的觸控設(shè)備該怎么辦呢?不同設(shè)備要有不同的解決方案。下面看看這個(gè)下拉菜單。
當(dāng)鼠標(biāo)停在主菜單項(xiàng)上，子菜單便出現(xiàn)。此外，你還可以點(diǎn)擊它打開該鏈接。現(xiàn)在，你在觸摸設(shè)備上敲擊該菜單項(xiàng)，會(huì)發(fā)生什么?子菜單出現(xiàn)了嗎?鏈接激活了嗎?兩者都發(fā)生了?還是發(fā)生了其他事情呢?在iOS上，其他事情發(fā)生了。你第一次敲擊該鏈接時(shí)，子菜單出現(xiàn)了，即引發(fā)了鼠標(biāo)停在主菜單項(xiàng)上的事件。但你需要再敲擊一下這個(gè)鏈接，才能打開它。
我們可以針對不同的輸入設(shè)備定義不同的交互方式。但我認(rèn)為更好的辦法是確保默認(rèn)的交互方式適用于所有用戶。如果你確實(shí)要這么做，你可以針對特定的用戶來增強(qiáng)這種默認(rèn)體驗(yàn)。
例如，你確定有人正在使用鼠標(biāo)，那你要保證靠鼠標(biāo)進(jìn)行的交互方式可用;如果你確定某人的手指較粗，那你要把小按鈕做得再大些。只要大家對此無疑問，只要這種改善有利于交互，就可以這樣做，但默認(rèn)的交互方式除外。在這些假設(shè)中，有一些，比如鼠標(biāo)的使用，是很難去除的——尤其在可以提供多種交互方式的設(shè)備上，如可安裝鼠標(biāo)、帶有觸摸鍵盤、相機(jī)、麥克風(fēng)、鍵盤和觸摸屏的筆記本。對此要認(rèn)真思考一下。你確實(shí)需要針對鼠標(biāo)進(jìn)行優(yōu)化嗎?
正如把一輛小汽車進(jìn)行壓縮，雖說更美觀了，但卻沒有以前實(shí)用了。在網(wǎng)站上也同樣，桌面上的網(wǎng)站進(jìn)行壓縮后用到小屏幕設(shè)備上，并不一定能帶來同樣的用戶體驗(yàn)。
構(gòu)建適用于所有屏幕上的響應(yīng)式網(wǎng)站，首先針對小屏幕進(jìn)行設(shè)計(jì)是最容易的。它會(huì)迫使你專注于真正重要的事情上：不適于小屏幕的，很可能就是不重要。它會(huì)迫使你更好地思考布局，思考頁面中內(nèi)容的展現(xiàn)順序。
上文提到的交互設(shè)計(jì)方法同樣適用于圖形設(shè)計(jì)——首先設(shè)計(jì)激活事件，之后再改善它。我們首先設(shè)計(jì)每個(gè)人都能看見的東西，即內(nèi)容。無論屏幕大小，無論瀏覽器功能多少，其均能顯示字符。這是我們唯一確定的事情，所以從文本開始設(shè)計(jì)是原則(大部分Kindles不支持色彩，老版本的瀏覽器無法支持新版CSS中的很多特性，布局在小屏幕設(shè)備上處于次要位置。)
我們可以從設(shè)計(jì)不同大小字體間的布局著手。無論每個(gè)人有怎樣的設(shè)備，他們都可以看到該布局。該布局設(shè)計(jì)好后，你就可以針對更大屏幕設(shè)計(jì)布局。你可以把它看成針對使用更大屏幕用戶的一次改善。之后，當(dāng)不同的布局完成之后，你就可以為該網(wǎng)站增加其他“修飾” 了，如顏色、漸變、邊框等。
不能同時(shí)考慮其他方面。我也正嘗試尋找所有不同設(shè)備(具有不同的屏幕大小，不同的特性)之間的共同點(diǎn)。首先針對這些共同點(diǎn)進(jìn)行設(shè)計(jì)是合理的。而奇觀的是，該一點(diǎn)往往被忽視：Web專業(yè)人員傾向于在高配置的設(shè)備(運(yùn)行著最新版本的瀏覽器)上審視他們的作品。他們僅看到了改善部分，卻忽略了提供基本體驗(yàn)的這些共同點(diǎn)。
直到最近，我們都是這樣設(shè)計(jì)網(wǎng)站的：在頂部放上帶有Logo的Banner圖和導(dǎo)航，將子導(dǎo)航放在左邊，右邊放一些小部件，頁腳放在底部。當(dāng)所有這些完成后，我們再把內(nèi)容塞在中部的小小空間中。這就好像我們對我們的內(nèi)容很不自信，嘗試提供一些用戶可能會(huì)喜歡的其他東西。
我們應(yīng)該專注于中間的部分，保證它正常工作，看起來美觀、具有可讀性。確保所有人理解它，發(fā)現(xiàn)它有用。
一旦你完成了內(nèi)容部分，你可以自問一下，該內(nèi)容確實(shí)需要一個(gè)Banner?Logo?子導(dǎo)航?它必須要有一個(gè)導(dǎo)航嗎?它確實(shí)需要所有的這些小部件嗎?顯然最后一個(gè)問題的答案是“不”。我不理解這些小部件有什么用。在我看來，沒有任何小部件比空白區(qū)域更美觀。
從內(nèi)容開始著手，可以幫助我們找出很多有趣的解決方案。例如，Logo確實(shí)需要放在每頁的頂部嗎?在很多網(wǎng)頁中，放在頁腳部分效果可能更好，如在數(shù)字類型的導(dǎo)航中，或在注冊頁面中。子導(dǎo)航中的很多鏈接放在主要內(nèi)容區(qū)域的相關(guān)部分效果可能更好。
當(dāng)觀看頁面布局時(shí)，主要導(dǎo)航比主要內(nèi)容更重要嗎?大部分情況下，并不是。我通常認(rèn)為導(dǎo)航屬于頁腳內(nèi)容。在頁面頂部放一個(gè)“跳轉(zhuǎn)”鏈接可以把訪問者引導(dǎo)至導(dǎo)航處，也可獲得導(dǎo)航，并將其顯示在頂部。
在響應(yīng)式Web設(shè)計(jì)時(shí)代，我們需要很多新的、聰明的解決方案。
看完上面內(nèi)容后，你可能明白這只是過程改進(jìn)。從文本開始，對文本進(jìn)行設(shè)計(jì)，根據(jù)不同的屏幕大小和設(shè)備對它進(jìn)行優(yōu)化，之后再針對特殊屬性進(jìn)一步優(yōu)化，如鼠標(biāo)的使用，針對胖手指的設(shè)計(jì)。很多Web開發(fā)人員基于該原則構(gòu)建網(wǎng)站。他們把漂亮的Photoshop制圖轉(zhuǎn)化成上述不同的層。
如果開發(fā)者有很好的設(shè)計(jì)感且關(guān)注細(xì)節(jié)，這可以產(chǎn)生很好的效果。但如果他們并非如此(大部分情況是這樣的)，便很容易設(shè)計(jì)出可用性不好、簡陋的產(chǎn)品。我并不是說不讓設(shè)計(jì)者使用Photoshop。如果那是你的工具，繼續(xù)使用它。但要記住，你正在設(shè)計(jì)Web的不同層，不是Photoshop中的層。一個(gè)Web要比單張漂亮圖片包含更多內(nèi)容。人們會(huì)以各種方式看我們的設(shè)計(jì)，我們在為所有這些人進(jìn)行設(shè)計(jì)。請記住，我們不僅僅為使用筆記本的CEO設(shè)計(jì)，還為在火車上或使用免費(fèi)Wi-Fi的人設(shè)計(jì)。
上面也提到了，在設(shè)計(jì)Web過程中，Photoshop一直被濫用。好設(shè)計(jì)工具的缺失是造成過程改進(jìn)難以進(jìn)行的原因之一。我們所使用的工具大部分是幫助我們?yōu)榫W(wǎng)站增加“修飾”，而不是設(shè)計(jì)其核心。很幸運(yùn)，針對特定功能的小型設(shè)計(jì)工具越來越多。如Gridset幫助我們針對不同的屏幕尺寸設(shè)計(jì)網(wǎng)格。好的設(shè)計(jì)工具可以幫助我們定義排版。把這些設(shè)計(jì)工具融入到我們的設(shè)計(jì)過程中，我們可以設(shè)計(jì)出更好的作品。
現(xiàn)在的網(wǎng)站設(shè)計(jì)與以前已大不同。固定、單一的交互方式已不再適用。我們的設(shè)計(jì)過程需要新的起點(diǎn)。除了上文提到的，還有很多。就拿我們常用的表單來說吧，它足夠用一系列文章來講述。希望大家在設(shè)計(jì)過程中，可以創(chuàng)新出更多好方法。
