導航:首頁 > 萬維百科 > 響應式網站設計要求

響應式網站設計要求

發布時間:2020-10-27 19:17:17

1、響應式視覺設計稿要做幾個尺寸

你好,我覺得一般是手機一個,tablet一個,desktop一個。主要是以主顯示方式(橫屏,豎屏)和交互方式(觸摸,傳統)劃分的。

2、響應式設計時代,我們該如何設計網站?

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

3、響應式網站尺寸設計規范是什麼?不要說大篇的介紹廢話,落實到具體數據上

看來你是生手。網站沒有統一的尺寸。也沒有統一的設計規范。都是根據客服要求去設計的。
他要大點就大點,要小點就小點。而網上很多網站的字體也不是統一的。
既然是響應式。更不可能有固定的尺寸。只用%百分比。
安全尺寸?也沒有統一的安全尺寸。有的是是全屏,有的是居中。寬度也沒有統一的。各種寬度都有。

4、響應式網站設計需要什麼條件

1、網站美工的精細程度一個好的網站他的美工這塊一定做的相當不錯,因為我們的大部分客戶看一個網站的時候基本上都是從他的美工這塊來看的。一個好的網站,他網站的細節處理的一定很到位,包括產品的圖片,文字的排版等等這些一定很到位的。
2、網站的兼容性這塊我們能經常看到一些網站在ie瀏覽器下面看是正常的,但是換了個其他瀏覽器的時候就會變形的一塌糊塗那麼這樣的網站肯定算不上是什麼好的網站。
3、從網站的定位來看網站設計的好壞,因為網站的定位清新才能獲得更高的客戶轉化率,做網站之前一定要戶再三確定好整體網站的定位,明確好建站的目的,只有這樣才可以有一個核心的把握點,才能夠圍繞這個目的去設計,自然而然製作出來的網站就可以非常直觀的展現在訪客面前,訪客也願意看到這樣的網站。
4、從整體結構把握網站建設製作的好壞,為什麼這么說呢,因為網站結構製作的好不好意味著每一位訪客是否能夠通過瀏覽網站方便快捷的查找到自己想要看到的信息和內容。網站製作者為了實現這種效果,往往會採取這樣的方式:網站不同的頁面都有相對獨立且帶有有效關鍵詞的標題,每個網頁還有特別設計的META標簽。
5、 從頁面分割的角度來把握網站建設製作的好壞,頁面分割常用於網站首頁,即把整個頁面合理的分成幾個小塊,這些小塊之間會給人帶來視覺上的差異,這樣就能夠使訪客在看網站的時候一目瞭然。其實,也有人把網頁設計中的這些有效分割當作是對頁面內容的一種分類歸納。
6、從頁面和諧的角度來把握網站建設製作的好壞,網站頁面的和諧不僅體現在結構形式上,還得看作品所形成的視覺效果能否與人的視覺感受形成一種溝通,產生心靈的共鳴。這是設計能否成功的關鍵。
想要做好一個響應式網站,更多的是需要你耐心尋找問題,從而進行修改,在不斷的調試和修改,你的網站才能變得更好。

與響應式網站設計要求相關的知識