•  

    資訊 · NEWS

    網頁設計為什么選擇響應式

    2018-09-17 設計前沿 100 分享

    我們不的不承認一個事實,在web設計和開發領域,我們將會無法跟上設備與分辨率革新的步伐。對于多數網站 來說,為每種新設備及分辨率創建其獨立的版本根本就是不切實際的;結果就是,我們將會贏得使用某些設備的用戶群,而失去那些使用其他設備的用戶。不過,或 許會有另外一種方式,可以幫助我們避免這種情況的發生。

    響應式網頁設計(Responsive Web design)的理念是,頁面的設計與開發應當根據用戶行為以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成,包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad,我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等,以適應不同設備;換句話說,頁面應該有能力去自動響應用戶的設備環境。這樣,我們就可以不必為不斷到來的新設備做專門的版本設計和開發了。

    web建設似乎已經有了一個共識,就是為大量設備建立不同的網站幾乎是不可能的。響應式網站是未來的趨勢,除非這個移動設備需要一些非常具體的功能或完全不同的內容值得開發。

    你可能已經知道響應設計,移動第一方針,和得體的退化。這些都是建立廣泛可訪問站點和網絡應用程序的主要工具和技術。在這篇文章中,我將集中著重討論移動設計方面和一些亮點技術,從而能改善您的桌面站點。移動第一并不意味著,你應該開始從320px屏幕寬度的向上延伸擴展。更多考慮的是從工作流程中所有可能的使用情況。

    即使在一個很小的屏幕,一個簡單而整潔的布局,也能確保用戶得到最好的體驗。但是你只有這一種方法為手持設備的用戶考慮嗎?一旦你創建了一個偉大的無障礙和良好的流動性的移動網站,再回頭看看對比下你的桌面版本。不要忘了觸摸和鼠標是完全不同的性質。不要讓您的桌面用戶僅僅因為需要在兩個菜單項之間移動200px而扭傷了手腕。媒體查詢是你的朋友。

    放棄它,隱藏它因此你應該決定要花費比別人更多的代價為這些看似不太重要的體驗上建立一個移動網站。最好的做法就是擺脫他們,不僅僅是為了節省一些像素和 提供更好的用戶體驗。現在問你自己,有必要把桌面版本上的東西全部展現出來嗎?那樣可能讓用戶感到迷惑或分心?也許這些選項應該是為高級用戶而設計為隱藏 在子菜單?也許用戶會體會到只有4個主菜單,而不是6個主菜單項?

    桌面瀏覽器的響應對于公司而言,尤其是當多任務時,更喜歡頻繁的調瀏覽器窗口大小。有時,你不能浪費時間在某一個站點上,使用媒體查詢創建網頁時,要把桌 面用戶考慮在內。如果讓我重新調整站點來適應視頻或圖像,我想,我不是唯一一個會發瘋的。所以,請開始使用響應媒體,這么做會給站點帶來更多變化。

    方位方位是一個基于當前正在縱向或橫向位置看設備的規范。通過媒體查詢,你可以在不同方位分配不同的布局。一些桌面瀏覽器是“偽造”的方向,根據窗口的寬度和高度的比例。這使您可以添加一些很好的調整,以增強用戶體驗。

    輸入類型HTML5有一些新特性能幫助移動用戶填寫表格。例如:如果你添加類型為email的字段,它會告訴移動瀏覽器提供像“@”字符或“.com”擴展性的電子郵件地址。請記住,它也有助于桌面用戶。他們將得到他們以前使用的電子郵件地址提供的一個下拉菜單,甚至根據他們以前使用的細節,自動填充整體表格。

    少的導航,更好的用戶預測在移動設備上瀏覽,如果我有從主頁丟失了印象深刻的幾個鏈接,我會很惱火并感到失落。我會問自己:我在正確的地方嗎?我應該回去并開始了嗎?這是不應該出現的,用完整的URL欄和臃腫的文字描述當切換標簽對于移動用戶來說是不明智的。

    滾動似乎比通過瀏覽菜單項更適合觸摸屏用戶。在可能的情況下,避免創建一個復雜的網站結構,不要試圖預測用戶可能尋找并嘗試相關的菜單或命令。

    擁抱新標準沒有通過不必要的“哦,flash,為什么”的辯論,網站面向未來,盡可能地利用新興的標準。CSS3的過渡和其他花哨的視覺效果,先進的互動HTML5的。這似乎是以后要走的,除了一些過時的標簽,W3C已經支持相當一部分新特性了,從長遠看來這是一個不錯的選擇。


    ?
    QQ2285001706 0592-5865936
    x
    Title
    xxxx99