<output id="3xd1u"></output>

    1. <center id="3xd1u"></center><form id="3xd1u"><pre id="3xd1u"></pre></form>
      新聞觀點

      移動互聯網時代如何做好響應式網站設計

      標簽: 網站建設 ? 網頁設計 ? ? | 作者:錦明網站推廣| VISITORS: | 來源:錦明網站建設
      01
      Jul
      2016

        響應式網站設計也就是我們所說的自適應網站,不同于普通網頁設計的是它的全新和未知,設計者除了需要會HTML5+CSS3之外,還需要有一個不同的設計思路才可以設計出這樣的網站,那么移動互聯網時代如何做好響應式網站設計呢?下面錦明SEO網站推廣為大家介紹一下。

        

      響應式設計時代該如何進行網站設計?-錦明網絡

        幾年前,我們進行的Web設計均是針對默認的屏幕大小和輸入類型,但隨著各種屏幕尺寸設備的興起,以及交互方式的多樣性,這些默認值已不再適用,現在我們進行網站設計所用到的所有默認值均需要更新。

        一、Web近年來所發生的變化

        最近,一直聽到人們在談論Web發生了改變,對此,我們不妨先來看看Web究竟發生了哪些變化?

        1、屏幕尺寸

        90年代,Web頁為640像素寬,21世紀初,其寬增長到800像素,幾年以前,我們將它調整為1024像素,但就在5年前,“奇怪的事”突然發生了,小屏幕設備進入市場,一時間,我們對Web設定的寬就不再適合了。

        不久,平板電腦進入市場,現在屏幕視窗的高超過了寬。

        

      響應式設計時代該如何進行網站設計?-錦明網絡

        現在我們無法了解用戶所使用窗體的大小,我們只能假設其寬是一個令用戶舒服的隨機數,這些數字是任意的,總會有一些用戶會看到不完整的Web頁面,在這里,我們可以先忽略這些用戶。

        2、每個人都有一個鼠標

        我們總是默認每個用戶都有一個鼠標,雖然我們知道,這并不總是事實,大部分設計師會忽略為不使用鼠標的用戶設計交互方式,不管什么原因,那些不得不使用鍵盤的用戶往往很難與我們的網站進行交互。

        但由于大部分用戶確實使用鼠標,當時很多設計者認為設計只要滿足大部分人就可以了,所以我們設計出的網站還是有很多人是無法使用的,事實證明,這個數據一直在增加,很多依靠鼠標進行的交互,在觸摸設備上是完全不起作用的,因為用戶喜歡這些設備,甚至管理者和設計師都在用它們,所以它們是很難被忽略掉。

        3、每個人都有寬帶互聯網

        我們另一個默認情況就是每個人都有速度超快的互聯網,至少和我們的一樣快,如果他們現在沒有它,不久也會有的,這似乎又是實事,網速確實越來越快,但是,今天越來越多的人在使用差勁的、不可靠的3G網絡,如果你曾在火車上使用3G網絡,你就會明白我所說的。

        如果你曾在酒店使用其提供的免費Wi-Fi,你就會明白我們假設互聯網越來越快是不成立的,這是我們思維中的一大變化,我們確實應該為這些用戶考慮,這將對我們的設計外觀產生較大影響。

        4、大家的電腦一年比一年快

        電腦越來越快,過去是這樣的,如果在買電腦之前再等半年,同樣的價格你就可以買一臺快兩倍的電腦,這主要針對新式臺式機,但對于移動設備,其有比處理器速度更重要的事。

        例如,對于手機,最重要的是電池待機時間:你不想每次打完電話后都必須充電吧!

        還有另一個趨勢:現在的制造商開始銷售價格更低廉的設備,而非速度更快的設備,相比處理器速度,很多用戶更關注價格和電池待機時間,你的老式電腦怎么樣了?你可能賣了,也可能扔了,但用戶仍保留并使用著,并不是每個人都擁有與我們設計師同樣的硬件設備。

        5、所有的顯示器均校準過

        我們很清楚這一條是不對的,只有那些可視化專業人士的顯示器才進行過校準,其他人的顯示器大部分都無法正確顯示色彩,很多顯示器還是十分差勁的,我所測試過的大部分移動手機有著相當棒的顯示屏,可當在陽光下使用時,如果你幸運,或許還可以看得見內容,但卻無法看到低對比度設計下的微妙漸變。

        人們總會使用那些低劣的顯示器,而且訪問你網站的人往往視力不好,越來越多的人正在看不合格的調色板,與其購買一款專業的藝術類顯示器,不如購買一款廉價的顯示器和幾臺低端設備來測試你的作品,這是更好的投資。

        Web在最近5年里發生了變化,創建網站的老方式已不再適用,所以,我們需要新的方法論。

        二、新的默認情況

        過去幾年里,我們一直在積極地研究新方法,以解決Web在不同尺寸屏幕上的顯示問題,除了響應式設計,在日益增長的設備上存在越來越多的挑戰,我們必須尋找新的交互模式:我們需要可以工作于任何設備上的界面。

        在設計過程中,一些新的約定俗成正在產生,即新的默認,下文錦明將列出最近所收集到的新的默認情況。

        1、新的默認:激活方式

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

        對于鼠標,就是點擊;對于觸控設備,就是滑動;對于鍵盤,就是敲擊,還有聲音、在空中揮動手臂等激活方法,很多設備往往提供多種交互方式,對于各種設備,其共同點就是必須通過激活動作來完成某件事。

        最近,我們開始思考用戶輸入的其他方法,我們曾經假設人們都使用鼠標,當鼠標移至上面時顯示內容,移開后則隱藏內容,在觸控設備進入市場之前,該方法一直為大部分人所采用,當內容只有通過鼠標操作才能顯示的話,那對于沒有鼠標的觸控設備該怎么辦呢?不同設備要有不同的解決方案,下面看看這個下拉菜單:

        

      響應式設計時代該如何進行網站設計?-錦明網絡

        當鼠標停在主菜單項上,子菜單便出現,此外,你還可以點擊它打開該鏈接,現在,你在觸摸設備上敲擊該菜單項,會發生什么?子菜單出現了嗎?鏈接激活了嗎?兩者都發生了?還是發生了其他事情呢?在iOS上,其他事情發生了,你第一次敲擊該鏈接時,子菜單出現了,即引發了鼠標停在主菜單項上的事件,但你需要再敲擊一下這個鏈接,才能打開它。

        我們可以針對不同的輸入設備定義不同的交互方式,但錦明認為更好的辦法是確保默認的交互方式適用于所有用戶,如果你確實要這么做,你可以針對特定的用戶來增強這種默認體驗。

        例如,你確定有人正在使用鼠標,那你要保證靠鼠標進行的交互方式可用;如果你確定某人的手指較粗,那你要把小按鈕做得再大些,只要大家對此無疑問,只要這種改善有利于交互,就可以這樣做,但默認的交互方式除外。

        在這些假設中,有一些,比如鼠標的使用,是很難去除的——尤其在可以提供多種交互方式的設備上,如可安裝鼠標、帶有觸摸鍵盤、相機、麥克風、鍵盤和觸摸屏的筆記本,對此要認真思考一下,你確實需要針對鼠標進行優化嗎?

        2、新的默認:小屏幕

        正如把一輛小汽車進行壓縮,雖說更美觀了,但卻沒有以前實用了,在網站上也同樣,桌面上的網站進行壓縮后用到小屏幕設備上,并不一定能帶來同樣的用戶體驗。

        構建適用于所有屏幕上的響應式網站,首先針對小屏幕進行設計是最容易的,它會迫使你專注于真正重要的事情上:不適于小屏幕的,很可能就是不重要,它會迫使你更好地思考布局,思考頁面中內容的展現順序。

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

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

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

        3、新的默認:內容

        直到最近,我們都是這樣設計網站的:在頂部放上帶有Logo的Banner圖和導航,將子導航放在左邊,右邊放一些小部件,頁腳放在底部,當所有這些完成后,我們再把內容塞在中部的小小空間中,這就好像我們對我們的內容很不自信,嘗試提供一些用戶可能會喜歡的其他東西。

        我們應該專注于中間的部分,保證它正常工作,看起來美觀、具有可讀性,確保所有人理解它,發現它有用。

        一旦你完成了內容部分,你可以自問一下,該內容確實需要一個Banner?Logo?子導航?它必須要有一個導航嗎?它確實需要所有的這些小部件嗎?顯然最后一個問題的答案是“不”,我不理解這些小部件有什么用,在我看來,沒有任何小部件比空白區域更美觀。

        從內容開始著手,可以幫助我們找出很多有趣的解決方案,例如:Logo確實需要放在每頁的頂部嗎?在很多網頁中,放在頁腳部分效果可能更好,如在數字類型的導航中,或在注冊頁面中,子導航中的很多鏈接放在主要內容區域的相關部分效果可能更好。

        當觀看頁面布局時,主要導航比主要內容更重要嗎?大部分情況下,并不是,我通常認為導航屬于頁腳內容,在頁面頂部放一個“跳轉”鏈接可以把訪問者引導至導航處,也可獲得導航,并將其顯示在頂部。

        在響應式Web設計時代,我們需要很多新的、聰明的解決方案。

        三、過程改進

        看完上面內容后,你可能明白這只是過程改進,從文本開始,對文本進行設計,根據不同的屏幕大小和設備對它進行優化,之后再針對特殊屬性進一步優化,如鼠標的使用,針對胖手指的設計,很多Web開發人員基于該原則構建網站,他們把漂亮的Photoshop制圖轉化成上述不同的層。

        如果開發者有很好的設計感且關注細節,這可以產生很好的效果;但如果他們并非如此(大部分情況是這樣的),便很容易設計出可用性不好、簡陋的產品。

        我并不是說不讓設計者使用Photoshop,如果那是你的工具,繼續使用它,但要記住,你正在設計Web的不同層,不是Photoshop中的層,一個Web要比單張漂亮圖片包含更多內容,人們會以各種方式看我們的設計,我們在為所有這些人進行設計。

        請記住,我們不僅僅為使用筆記本的CEO設計,還為在火車上或使用免費Wi-Fi的人設計。

        另外,在設計Web過程中,Photoshop一直被濫用,好設計工具的缺失是造成過程改進難以進行的原因之一,我們所使用的工具大部分是幫助我們為網站增加“修飾”,而不是設計其核心,很幸運,針對特定功能的小型設計工具越來越多,如Gridset幫助我們針對不同的屏幕尺寸設計網格,好的設計工具可以幫助我們定義排版,把這些設計工具融入到我們的設計過程中,我們可以設計出更好的作品。

        錦明SEO網站推廣點評:

        現在的網站設計與以前已大不同,固定、單一的交互方式已不再適用,我們的設計過程需要新的起點,除了上文提到的,還有很多,就拿我們常用的表單來說吧,它足夠用一系列文章來講述,希望大家在設計過程中,可以創新出更多好方法。



      轉載聲明:本文由滕州網站優化-錦明SEO網絡整理發布
      轉載請注明來源:http://www.111ong.cn/new/jianzhan/95.html
      相關新聞
      最新新聞
      最新案例
      錦明網絡—幫助企業塑造網絡品牌影響力,您身邊的網絡營銷專家!
      分享按鈕 香港黄大仙2018年网址 诸城市| 资溪县| 长海县| 丰顺县| 正安县| 金沙县| 安平县| 乐业县| 印江| 永安市| 台州市| 安溪县| 普安县| 乌拉特中旗| 兴山县| 抚顺县| 洪泽县| 邯郸市| 延庆县| 若尔盖县| 峨眉山市| 宁陵县| 独山县| 郓城县| 项城市| 勐海县| 专栏| 璧山县| 昌乐县| 宜昌市| 南丰县| 尼玛县| 勃利县| 合山市| 思茅市| 金堂县| 从江县| 海阳市| 八宿县| 兴安县| 怀集县| http://www.121ing.cn http://wap.lsjwy2.pw http://m.lsjq54.club http://www.097lottery.top http://www.sinap7s4.pw http://m5.rn2855.top