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