響應式網頁設計技巧

  • 響應式網頁設計技巧已關閉評論
  • A+
所屬分類:網站制作方案

隨著移動設備成為人們體驗網絡的主要方式,響應式設計比以往任何時候都更加重要。但響應式設計不僅可以創建一致的移動體驗。

它也影響了我們為所有屏幕設計的方式,鼓勵更簡單的布局和更簡化的體驗。無論您是在進行響應式重新設計還是從頭開始,這些提示和技巧都將為您提供幫助。

注意你的導航

響應式網頁設計的采用對網站導航產生了巨大影響。只需看看2007年以來的任何網站。幾乎不可能不會被堆積在左側導航中的大量山峰所淹沒。

由于您正在設計較小的屏幕,因此您的設計需要在這些限制范圍內工作。嘗試簡化您的導航選擇,并使用??與文本,頁內鏈接,可折疊菜單和下拉菜單配對的圖標,以便讓人們可以去他們需要的地方。請記住,??隱藏的導航選擇大約??是明顯的導航選擇的一半,并且延長了完成任務的時間,因此盡量使視覺上明顯的核心頁面訪問。

一般來說,您只有四個或五個核心鏈接的空間。這不僅會影響您網站的導航,還會影響其整個內容策略/信息架構。您需要確保這四個或五個鏈接代表人們希望/應該去的地方,并且這些頁面為人們提供了更深入挖掘的機會。

響應式網頁設計技巧
在移動維度上,Quartz將其主導航功能折疊為四鏈接底欄,就像許多原生應用程序一樣。
響應式網頁設計技巧
但這四個類別仍保持桌面尺寸(左上角和右上角),更多選項隱藏在漢堡包圖標后面。

側邊欄可能很棘手。桌面為我們提供了大量的水平空間,因此只需將所有額外鏈接放在側邊欄中就太容易了。但響應式設計要求我們作為設計師創造出我們希望有人在不分散注意力的情況下采取的最簡單的路徑。消除側邊欄是實現這一目標的一種方法。

響應式網頁設計技巧
創造過程中??采用了側邊欄為主要導航,固定其單頁的各個部分,并且不重復此為水平菜單。
響應式網頁設計技巧
這種設計很好地轉換為移動設備,其中簡單的導航顯示為五個部分,您可以通過底部的固定菜單訪問。

在過去,長滾動頁面被認為是一個糟糕的設計決定,但移動已經改變了這一點。請記住,長卷軸頁面可能會讓導航回到導航中。因此,請使用固定在屏幕底部或頂部的簡單粘性導航欄或返回頂部按鈕。對于單手友好,請使用底部導航。

手指現在不會讓我失望

響應式網頁設計技巧
您的按鈕應易于識別和理解。

您的號召性用語按鈕應從頁面中彈出,包括顏色和樣式。

按鈕的大小和形狀與其顏色一樣重要。通常,圓形和矩形元素是最容易識別的按鈕。想想你在電梯或智能手機上的鍵盤上按下了什么。使用按鈕的形狀過于創新可能會使用戶感到困惑,因此請堅持使用熟悉的表單。

大小也可以產生巨大的差異,特別是對于殘疾人。但是我們都發現自己很難在移動網頁上找到正確的鏈接 - 所以請保存您的觀眾,以確保您的按鈕對手指非常友好。材料設計為按鈕提供以下規格:

為了確保殘疾人的可用性,給按鈕高36dp,并給予可觸摸目標最小高度48dp。

其中1dp等于1px。

您還需要確保按鈕和文本鏈接周圍有足夠的空間,以避免誤點擊。您還需要確保您的按鈕顯然是交互式對象。陰影,漸變和其他尺寸擴展風格添加可以幫助確保人們可以單擊按鈕。

在設計時考慮到移動設備

好的設計盡可能少的設計

-Dieter Rams

這是響應式設計的支柱之一。如果您的內容,導航和圖形的組織在智能手機上都有意義,那么它們也可以在平板電腦或桌面等大型設備上清晰顯示。這是響應式設計的優勢之一。當設計必須適用于各種屏幕尺寸時,它有助于將功能和內容僅限于必要的內容。它不僅僅是一種實踐,它是一種改善用戶體驗的理念。

在設計之前規劃您的內容組織

響應式網頁設計技巧
當然,挑選一個框架很有趣,只要確保你有一些有意義的東西來填充它。

設計一個沒有強烈內容結構感的網站有點像在你真正創作一幅畫之前選擇一個花哨的框架。您需要了解內容的組織方式,以便您可以看到更大的圖景。

內容和設計在串聯開發時蓬勃發展。內容組織不僅僅是復制和粘貼文本塊,以查看它們在頁面上的適用位置。您的內容就是您試圖告訴觀眾的故事。列出列表,優先處理您要傳達的消息。弄清楚這些想法如何從一個流向另一個流。圍繞內容進行設計,并將導航基于其組織。線性路徑可以讓某人與您的網站保持聯系并提高轉化率(只要消息本身與您的受眾產生共鳴)。

只使用你需要的單詞

響應式網頁設計技巧
確保您網站上的每個字詞都有助于傳達您的信息。

桌面允許更多文本。這并不總是一件好事。使用移動設備,您必須在較小屏幕的范圍內工作。這意味著更經濟地寫作,確保每個單詞都有助于推動您的故事向前發展。

如果您從桌面站點進行寫作,則可能需要進行一些編輯。整合副本,使用項目符號和其他結構設備,并盡可能減少脂肪。

在較小的屏幕上排版更重要

響應式網頁設計技巧

確??s放字體大小,行高和寬度以最適合不同的屏幕大小。

您不需要看眼科醫生就知道任何屏幕上的微小類型都難以閱讀。使用更大的字體可以顯著提高可讀性。因此,使用16px范圍內的物體進行正文復制,并根據字體的設計進行調整。(雖然我們建議使用ems,從1到1.25em開始。)

并確保使用高度清晰的字體,特別是對于像導航標簽這樣的重要文本。沒有人想在菜單中看到腳本字體。

間距也是較小屏幕的一個因素。確保您的行高設置為適當的數量。太多會使你的文字漂浮在太空中而太少會讓你的文字像煎餅一樣堆疊。通常1.25到1.5范圍內的某些東西可以正常工作,但單個字體會有所不同。

專業提示:??如果您使用像素進行字體大小而不想計算16 x 1.35,請將值保留為空,Webflow將為您執行此操作。

在整個設計過程中,檢查不同設備上的文本,以查看線條高度將如何影響文本的顯示。

當您在設計移動設備時,請記住,巨大的字體可能會推動您希望有人在頁面上進一步閱讀的重要內容。因此,請考慮工具箱中的所有其他設計方法來添加戲?。焊淖冏煮w粗細,使用全部大寫或全部小寫,或使用顏色將內容部分與頁面上的其他元素區分開來。

擁抱負空間

響應式網頁設計技巧
負空間有助于將注意力集中到布局的正確部分。

在創建響應式設計時,您會走得很好。是的,你想對內容和導航采取簡約的方法 - 但你也不想留下任何重要的東西。利用負空間(也就是空白)來創建設計中斷并突出顯示您不希望任何人遺漏的內容區域。

創建和測試響應原型

響應式網頁設計技巧
一個靜態原型可以讓你知道什么東西會是什么樣子 - 但它不會讓你知道它是否適合航海。

了解設計的外觀和感覺如何轉換為不同的屏幕非常重要。了解它的運作方式也至關重要。

靜態原型將帶您參與其中,但最終您需要一個功能原型來幫助您了解網站的工作方式和感受。確保在實際設備上測試您的原型,以確保網站可以正常工作。這將節省您的時間和麻煩 - 并且免費提供有關您的網站在移動設備上“破損”的諷刺推文。值得慶幸的是,Webflow可以輕松構建易于共享,功能齊全且響應迅速的原型 - 所有這些都無需編寫代碼。

此外,請務必查看我們的“?網站原型設計的最佳實踐?”,了解有關創建滿足用戶和利益相關方需求的原型所需的更多詳細信息。

堅持快速通道與響應圖像

在每臺設備上保持您的網站隨著快速加載的圖像移動。

人們在響應式設計中遇到的問題之一是,雖然圖像???在較小的設備上可視化擴展,但它們仍然是3MB大小并且加載時間慢。響應式圖像提供了強大而有效的解決方法,但手動代碼卻很費力且痛苦。

這就是我們將響應式圖像直接構建到Webflow中的原因,因此您無需處理它。

我們可能有點偏,但實際上,Webflow確實使??響應式圖像??非常容易。我們的平臺可以為您優化所有內嵌圖像,因此它們的加載速度提高了十倍,并且在每臺設備上都顯得漂亮。

所以繼續,上傳3.5MB圖像。我們抓到你了。

響應式網頁設計技巧
Webflow可以快速輕松地縮放不同屏幕尺寸的圖像。

使用flexbox為您的布局提供動力

響應式網頁設計技巧
Webflow的flexbox布局工具可以幫助您創建大量靈活的布局。

Flexbox是一個CSS3布局模塊,可確保您的布局能夠流暢地響應不同的設備。要使用flexbox,只需為父容器提供“flex”的顯示設置,然后選擇容器中的子容器如何在其中分配。原則上相當簡單,但它允許強大的靈活性。

您可以使用許多工具將flexbox布局實現到您的設計中,但我們不得不幫助推薦我們自己的??Flexbox構建器。它可以消除構建分屏,側邊欄和英雄封面等創意布局的痛苦,并且可以快速構建流行的設計模式,如等高模塊和Z模式功能列表。

響應式設計改變了網絡......變得更好

移動設備和平板電腦的普及改變了我們設計網站和瀏覽網站的方式。桌面設計所分配的巨大空間經常導致大量不必要的圖形和內容從網站的核心消息中貶低。響應式設計讓我們脫離了我們不需要的東西,因此每個人都可以更快地完成他們需要的工作。