国产精品一区12P

<source id="ioaac"><button id="ioaac"></button></source>
<sup id="ioaac"><button id="ioaac"></button></sup>
  • <strong id="ioaac"><object id="ioaac"></object></strong>
  • <strong id="ioaac"></strong><sup id="ioaac"><object id="ioaac"></object></sup>
    <strong id="ioaac"></strong>

    0755-21010815 13726728778

    你想知道的響應式設計技巧

    來源:深圳時代達信 瀏覽:96 時間:2020-08-05 09:44:17
    響應式網頁設計 (Responsive web design) 雖然早已被提出,不過因為國內開發習慣和APP設計優先,日常工作使用這種布局方式的機會不多。

    國外網站使用這種布局方式較多,經過調研,結合嘗試后,本文梳理了響應式設計的方法流程,記錄問題與思考,幫助以后類似的項目開展更快。

    什么是響應式布局
    響應式布局常常和自適應布局搞混。響應式布局:容器大小隨窗口大小而變化。
    自適應布局:容器大小不隨窗口大小而變化,邊距隨窗口大小而變化。

    響應式布局優勢
    調研中我們發現,國外幾個內容網站,YouTube、Spotify、Netflix 和Behance,都使用了“內容墻”的設計方式,以突出內容的豐富度。

    由于這種設計通常會保持容器之間的間距不變,這就需要容器大小變化以適應窗口大小變化了。響應式的布局思路,很好地幫助完成內容墻的設計。


    響應式設計技巧

    響應式布局的設計要點

    在以往的開發合作中,設計提供切圖和尺寸標注給開發就行了。
    而響應式頁面中的容器大小是動態的,我們可以提供一個表格,告訴開發在不同的頁面寬度區間,對應的布局應該是怎么樣的。這些區間的臨界點,就是“斷點”。
    我們以容器多,情況比較復雜的視頻首頁模擬一次確定斷點的流程。首先,斷點是反映頁面發生突變的情況的,如邊距開始發生變化、容器數量開始發生變化等。本例中,我們固定了側邊欄a、邊距b、間距d。據下圖公式,容易得知容器數量和容器寬度有著明確的數量關系。因此,尋找斷點,需要我們先確定容器寬度(c)。
    容器寬度和容器內容相關。本例中,我們規定正常情況下容器寬度最小300px,以保證封面圖和標題文字還能被看清。當容器寬度被壓到300px時,容器數量減少一個。

    有了容器的最小尺寸,那么我們可以輸出給開發的“頁面寬度-容器數量對應表”。從下表可以讀出,瀏覽器寬度在1284-1595px之間時,側邊欄展開為288px,放3個容器,瀏覽器會自動把容器寬度算出來。

    斷點選擇的技巧

    從之前的實驗我們知道,確定斷點和容器數量、容器大小有關。那么斷點的選擇其實是體現了,設計師對頁面信息呈現方式的理解。
    1、YouTube的小心機調研的過程中,我們發現YouTube 選擇 1143-1966px 作為4個容器的前后斷點。這個頁面寬度區間很大,達到了824px(遠超5個容器的跨度335px)。我們猜想:① YouTube認為1行4個視頻是用戶瀏覽的最好數量;② 他們想把這種布局覆蓋主流的(約66.25%)屏幕寬度 1280-1920px。
    2、關注高分屏的實際效果需要特別注意的是,橫向分辨率達到3840px 的PC高分屏中,主流瀏覽器會按照2倍圖展示內容。此外,Windows系統下有系統縮放,推薦的是1.25倍,導致3840px的屏幕寬度,瀏覽器認為只有1536px (3840px÷2÷1.25)。所以有時候會出現在分辨率很高的屏幕下,響應式頁面展示的內容反而更少了的情況。
    響應式的布局方法能很好地支持越來越流行的“內容墻”的設計。找好斷點,設定好不同屏幕分辨率的布局策略,是響應式設計的關鍵。


    欄目最新信息

    地址 · ADDRESS

    地址:深圳市龍華區和平路32號鴻華中心1309

    郵箱:bank@shidaidaxin.com

    點擊查看更多案例

    聯系 · CALL TEL

    0755-21010815

    非工作時間請撥打:13726728778

    業務QQ: 871 978 666    售后/投訴QQ: 871 808 666

    危機公關公司輿情公關公司
    ? 2019 時代達信(深圳)科技有限公司 版權所有   粵ICP備17064298號-1  網站地圖

    国产精品一区12P
    <source id="ioaac"><button id="ioaac"></button></source>
    <sup id="ioaac"><button id="ioaac"></button></sup>
  • <strong id="ioaac"><object id="ioaac"></object></strong>
  • <strong id="ioaac"></strong><sup id="ioaac"><object id="ioaac"></object></sup>
    <strong id="ioaac"></strong>