響應(yīng)式網(wǎng)站規(guī)劃可以說是一個全新、不知道的領(lǐng)域，所以，響應(yīng)式網(wǎng)站規(guī)劃者需求不一樣的規(guī)劃思路：要對于內(nèi)容進(jìn)行規(guī)劃，一個成功的網(wǎng)站規(guī)劃源自精雕細(xì)琢，但當(dāng)進(jìn)行響應(yīng)式規(guī)劃時，咱們會發(fā)現(xiàn)對于一般網(wǎng)站規(guī)劃的經(jīng)典辦法已無法適用了。
幾年前，咱們進(jìn)行的Web規(guī)劃均是對于默許的屏幕大小和輸入類型，但隨著各種屏幕尺寸設(shè)備的興起，以及交互方法的多樣性，這些默許值已不再適用，現(xiàn)在咱們進(jìn)行網(wǎng)站規(guī)劃所用到的一切默許值均需求更新。
一、Web近年來所發(fā)生的變化
最近，一直聽到人們在談?wù)揥eb發(fā)生了改變，對此，我們不妨先來看看Web究竟發(fā)生了哪些變化？
1、屏幕尺寸
90年代，Web頁為640像素寬，21世紀(jì)初，其寬增長到800像素，幾年以前，我們將它調(diào)整為1024像素，但就在5年前，“奇怪的事”突然發(fā)生了，小屏幕設(shè)備進(jìn)入市場，一時間，我們對Web設(shè)定的寬就不再適合了。不久，平板電腦進(jìn)入市場，現(xiàn)在屏幕視窗的高超過了寬。
現(xiàn)在我們無法了解用戶所使用窗體的大小，我們只能假設(shè)其寬是一個令用戶舒服的隨機(jī)數(shù)，這些數(shù)字是任意的，總會有一些用戶會看到不完整的Web頁面，在這里，我們可以先忽略這些用戶。
2、每個人都有一個鼠標(biāo)
我們總是默認(rèn)每個用戶都有一個鼠標(biāo)，雖然我們知道，這并不總是事實(shí)，大部分設(shè)計(jì)師會忽略為不使用鼠標(biāo)的用戶設(shè)計(jì)交互方式，不管什么原因，那些不得不使用鍵盤的用戶往往很難與我們的網(wǎng)站進(jìn)行交互。
但由于大部分用戶確實(shí)使用鼠標(biāo)，當(dāng)時很多設(shè)計(jì)者認(rèn)為設(shè)計(jì)只要滿足大部分人就可以了，所以我們設(shè)計(jì)出的網(wǎng)站還是有很多人是無法使用的，事實(shí)證明，這個數(shù)據(jù)一直在增加，很多依靠鼠標(biāo)進(jìn)行的交互，在觸摸設(shè)備上是完全不起作用的，因?yàn)橛脩粝矚g這些設(shè)備，甚至管理者和設(shè)計(jì)師都在用它們，所以它們是很難被忽略掉。
3、每個人都有寬帶互聯(lián)網(wǎng)
我們另一個默認(rèn)情況就是每個人都有速度超快的互聯(lián)網(wǎng)，至少和我們的一樣快，如果他們現(xiàn)在沒有它，不久也會有的，這似乎又是實(shí)事，網(wǎng)速確實(shí)越來越快，但是，今天越來越多的人在使用差勁的、不可靠的3G網(wǎng)絡(luò)，如果你曾在火車上使用3G網(wǎng)絡(luò)，你就會明白我所說的。
如果你曾在酒店使用其提供的免費(fèi)Wi-Fi，你就會明白我們假設(shè)互聯(lián)網(wǎng)越來越快是不成立的，這是我們思維中的一大變化，我們確實(shí)應(yīng)該為這些用戶考慮，這將對我們的設(shè)計(jì)外觀產(chǎn)生較大影響。
4、大家的電腦一年比一年快
電腦越來越快，過去是這樣的，如果在買電腦之前再等半年，同樣的價格你就可以買一臺快兩倍的電腦，這主要針對新式臺式機(jī)，但對于移動設(shè)備，其有比處理器速度更重要的事。
例如，對于手機(jī)，最重要的是電池待機(jī)時間：你不想每次打完電話后都必須充電吧！
還有另一個趨勢：現(xiàn)在的制造商開始銷售價格更低廉的設(shè)備，而非速度更快的設(shè)備，相比處理器速度，很多用戶更關(guān)注價格和電池待機(jī)時間，你的老式電腦怎么樣了？你可能賣了，也可能扔了，但用戶仍保留并使用著，并不是每個人都擁有與我們設(shè)計(jì)師同樣的硬件設(shè)備。
5、所有的顯示器均校準(zhǔn)過
我們很清楚這一條是不對的，只有那些可視化專業(yè)人士的顯示器才進(jìn)行過校準(zhǔn)，其他人的顯示器大部分都無法正確顯示色彩，很多顯示器還是十分差勁的，我所測試過的大部分移動手機(jī)有著相當(dāng)棒的顯示屏，可當(dāng)在陽光下使用時，如果你幸運(yùn)，或許還可以看得見內(nèi)容，但卻無法看到低對比度設(shè)計(jì)下的微妙漸變。
人們總會使用那些低劣的顯示器，而且訪問你網(wǎng)站的人往往視力不好，越來越多的人正在看不合格的調(diào)色板，與其購買一款專業(yè)的藝術(shù)類顯示器，不如購買一款廉價的顯示器和幾臺低端設(shè)備來測試你的作品，這是更好的投資。
Web在最近5年里發(fā)生了變化，創(chuàng)建網(wǎng)站的老方式已不再適用，所以，我們需要新的方法論。
二、新的默認(rèn)情況
過去幾年里，我們一直在積極地研究新方法，以解決Web在不同尺寸屏幕上的顯示問題，除了響應(yīng)式設(shè)計(jì)，在日益增長的設(shè)備上存在越來越多的挑戰(zhàn)，我們必須尋找新的交互模式：我們需要可以工作于任何設(shè)備上的界面。
在設(shè)計(jì)過程中，一些新的約定俗成正在產(chǎn)生，即新的默認(rèn)，下文將列出最近所收集到的新的默認(rèn)情況。
1、新的默認(rèn)：激活方式
本想用“觸控”一詞，但考慮到大家對該詞的理解不同，所以改為了“激活”，對于所有設(shè)備，無論他們需要怎樣的輸入方式，都需要用戶以某種方法來激活某件事。
對于鼠標(biāo)，就是點(diǎn)擊；對于觸控設(shè)備，就是滑動；對于鍵盤，就是敲擊，還有聲音、在空中揮動手臂等激活方法，很多設(shè)備往往提供多種交互方式，對于各種設(shè)備，其共同點(diǎn)就是必須通過激活動作來完成某件事。
最近，我們開始思考用戶輸入的其他方法，我們曾經(jīng)假設(shè)人們都使用鼠標(biāo)，當(dāng)鼠標(biāo)移至上面時顯示內(nèi)容，移開后則隱藏內(nèi)容，在觸控設(shè)備進(jìn)入市場之前，該方法一直為大部分人所采用，當(dāng)內(nèi)容只有通過鼠標(biāo)操作才能顯示的話，那對于沒有鼠標(biāo)的觸控設(shè)備該怎么辦呢？不同設(shè)備要有不同的解決方案，下面看看這個下拉菜單：
當(dāng)鼠標(biāo)停在主菜單項(xiàng)上，子菜單便出現(xiàn)，此外，你還可以點(diǎn)擊它打開該鏈接，現(xiàn)在，你在觸摸設(shè)備上敲擊該菜單項(xiàng)，會發(fā)生什么？子菜單出現(xiàn)了嗎？鏈接激活了嗎？兩者都發(fā)生了？還是發(fā)生了其他事情呢？在iOS上，其他事情發(fā)生了，你第一次敲擊該鏈接時，子菜單出現(xiàn)了，即引發(fā)了鼠標(biāo)停在主菜單項(xiàng)上的事件，但你需要再敲擊一下這個鏈接，才能打開它。
我們可以針對不同的輸入設(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)化嗎？
2、新的默認(rèn)：小屏幕
正如把一輛小汽車進(jìn)行壓縮，雖說更美觀了，但卻沒有以前實(shí)用了，在網(wǎng)站上也同樣，桌面上的網(wǎng)站進(jìn)行壓縮后用到小屏幕設(shè)備上，并不一定能帶來同樣的用戶體驗(yàn)。
構(gòu)建適用于所有屏幕上的響應(yīng)式網(wǎng)站，首先針對小屏幕進(jìn)行設(shè)計(jì)是最容易的，它會迫使你專注于真正重要的事情上：不適于小屏幕的，很可能就是不重要，它會迫使你更好地思考布局，思考頁面中內(nèi)容的展現(xiàn)順序
上文提到的交互設(shè)計(jì)方法同樣適用于圖形設(shè)計(jì)——首先設(shè)計(jì)激活事件，之后再改善它，我們首先設(shè)計(jì)每個人都能看見的東西，即內(nèi)容，無論屏幕大小，無論瀏覽器功能多少，其均能顯示字符，這是我們唯一確定的事情，所以從文本開始設(shè)計(jì)是原則（大部分Kindles不支持色彩，老版本的瀏覽器無法支持新版CSS中的很多特性，布局在小屏幕設(shè)備上處于次要位置。）
我們可以從設(shè)計(jì)不同大小字體間的布局著手，無論每個人有怎樣的設(shè)備，他們都可以看到該布局，該布局設(shè)計(jì)好后，你就可以針對更大屏幕設(shè)計(jì)布局，你可以把它看成針對使用更大屏幕用戶的一次改善，之后，當(dāng)不同的布局完成之后，你就可以為該網(wǎng)站增加其他“修飾”了，如顏色、漸變、邊框等。
不能同時考慮其他方面，我也正嘗試尋找所有不同設(shè)備（具有不同的屏幕大小，不同的特性）之間的共同點(diǎn)，首先針對這些共同點(diǎn)進(jìn)行設(shè)計(jì)是合理的，而奇觀的是，該一點(diǎn)往往被忽視：Web專業(yè)人員傾向于在高配置的設(shè)備（運(yùn)行著最新版本的瀏覽器）上審視他們的作品，他們僅看到了改善部分，卻忽略了提供基本體驗(yàn)的這些共同點(diǎn)。
3、新的默認(rèn)：內(nèi)容
直到最近，我們都是這樣設(shè)計(jì)網(wǎng)站的：在頂部放上帶有Logo的Banner圖和導(dǎo)航，將子導(dǎo)航放在左邊，右邊放一些小部件，頁腳放在底部，當(dāng)所有這些完成后，我們再把內(nèi)容塞在中部的小小空間中，這就好像我們對我們的內(nèi)容很不自信，嘗試提供一些用戶可能會喜歡的其他東西。
我們應(yīng)該專注于中間的部分，保證它正常工作，看起來美觀、具有可讀性，確保所有人理解它，發(fā)現(xiàn)它有用。
一旦你完成了內(nèi)容部分，你可以自問一下，該內(nèi)容確實(shí)需要一個Banner？Logo？子導(dǎo)航？它必須要有一個導(dǎo)航嗎？它確實(shí)需要所有的這些小部件嗎？顯然最后一個問題的答案是“不”，我不理解這些小部件有什么用，在我看來，沒有任何小部件比空白區(qū)域更美觀。
從內(nèi)容開始著手，可以幫助我們找出很多有趣的解決方案，例如：Logo確實(shí)需要放在每頁的頂部嗎？在很多網(wǎng)頁中，放在頁腳部分效果可能更好，如在數(shù)字類型的導(dǎo)航中，或在注冊頁面中，子導(dǎo)航中的很多鏈接放在主要內(nèi)容區(qū)域的相關(guān)部分效果可能更好。
當(dāng)觀看頁面布局時，主要導(dǎo)航比主要內(nèi)容更重要嗎？大部分情況下，并不是，我通常認(rèn)為導(dǎo)航屬于頁腳內(nèi)容，在頁面頂部放一個“跳轉(zhuǎn)”鏈接可以把訪問者引導(dǎo)至導(dǎo)航處，也可獲得導(dǎo)航，并將其顯示在頂部。在響應(yīng)式Web設(shè)計(jì)時代，我們需要很多新的、聰明的解決方案。
三、過程改進(jìn)
看完上面內(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中的層，一個Web要比單張漂亮圖片包含更多內(nèi)容，人們會以各種方式看我們的設(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ì)出更好的作品。
濟(jì)南嘉晟網(wǎng)絡(luò)科技有限公司，是一家專注于高端網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣、微信營銷、微網(wǎng)建設(shè)、400電話、掛機(jī)短信和品牌傳播的網(wǎng)絡(luò)服務(wù)機(jī)構(gòu)。多年的磨練，使我們在創(chuàng)意設(shè)計(jì)、營銷推廣到技術(shù)研發(fā)擁有了豐富經(jīng)驗(yàn)，我們擅長傾聽企業(yè)需求，挖掘品牌核心價值，整合高質(zhì)量設(shè)計(jì)和最新技術(shù)，為您打造有價值的創(chuàng)意設(shè)計(jì)體驗(yàn)。歡迎廣大客戶致電咨詢合作！
魯公網(wǎng)安備 37010202002295號 版權(quán)所有 魯ICP備14024464號-4