設置關鍵斷點 320 – 720 – 1024
首先將網(wǎng)站的整體布局設置成響應式的。響應式網(wǎng)站的布局一般是通過 @media query 的方式改變的，在哪種寬度下改變布局，這就是我們常說的斷點或響應點。由于響應式網(wǎng)站需要同時適應PC、Pad、手機等，我們可以先設置3個關鍵斷點，分別針對不同類型的設備。不過前面我們在《真實的謊言–關于響應式設計的六個認識誤區(qū)》也聊過，響應式網(wǎng)站是面向所有用戶的，而不是只針對某一個設備的用戶，不同設備的屏幕大小常有出入，在設置關鍵斷點時，我們還應該結(jié)合站點的內(nèi)容，注重網(wǎng)站內(nèi)容信息的有效傳遞。一般來說，設置這3個斷點就足夠了。但小飛也見過設置了10個斷點的大神賣弄站。其實，高端響應式網(wǎng)站中，斷點的設置沒有一定的規(guī)則，需要我們可以根據(jù)自身的需求(如希望網(wǎng)站兼顧哪些平臺)以及用戶群體的情況(真實需求、規(guī)模、瀏覽器分辨率分布等)，因站制宜， 合理的進行設規(guī)劃和實現(xiàn)。
建議： 根據(jù)各個不同的設備尺寸一個個的設置斷點，這項工程簡直太耗時了。小飛教你一招，其實我們查看大家平時常用的一些前端框架的源代碼，了解它們的斷點值并借鑒。但如果你在建站技術、寫代碼這方面完全是個小白，起飛頁自助建站平臺就是一個很好的選擇，無需任何專業(yè)技術輕松做網(wǎng)站，網(wǎng)站代建或是專業(yè)定制等服務應有盡有。
優(yōu)先設計手機端
在構(gòu)建好網(wǎng)站的信息框架、準備好各項元素和決定好設計風格后，我們最好先根據(jù)手機端進行設計，這是因為手機等移動端屏幕更小，更能有效篩選出網(wǎng)站最重要的元素。一旦移動端的問題解決了，其他設備上的設計問題也會簡單的多。先建立好手機端的框架，設置好斷點值，也可以給后續(xù)更大屏幕做一個參考。再說，首先面向PC端，再向手機端優(yōu)化，這個由繁入簡的過程是比較困難的，很多站長覺得這個元素也重要，那個元素也不能缺，常常會在篩減元素的過程中會搖擺不定。
建議： 避免使用大圖。對于移動用戶來說，能夠在觸屏設備良好的顯示的圖片是最佳選擇。不要忽視網(wǎng)站上的各項細節(jié)，網(wǎng)站的導航菜單也要記得設置成智能、可縮放的。在做好面向手機端的響應式網(wǎng)站之后，也要記得在真實的設備上進行測試，確認無問題之后再進行其他設備的設計。
擴大目標點擊區(qū)域(按鈕或超鏈接)
與PC端上經(jīng)常使用鼠標不同，在手機等觸屏設備上用戶更習慣于手勢操作，直接用手進行點擊。研究表明成人食指的平均寬度是1.6-2.0cm，這相當于45-57px。大約57px寬的點擊區(qū)域才能夠滿足用戶點擊時的舒適度需求，所以記得擴大行為引導按鈕或超鏈接的點擊區(qū)域，讓它們對手指更加友好，優(yōu)化用戶體驗。著名的費茨定律也指出，使用指點設備到達一個目標的時間，與當前設備位置和目標位置的距離和目標大小有關。簡單點來說，在網(wǎng)站中，如果點擊區(qū)域越小，用戶在瀏覽獲取頁面時花費的時間就越長，這會大大降低用戶的轉(zhuǎn)化率。
建議： 雖然小飛建議按鈕或超鏈接的點擊區(qū)域盡量擴大，最好超過57px，但是這還要結(jié)合網(wǎng)站的實際情況。點擊區(qū)域也是越大越好，我們可以測量整個屏幕的大小，合理布局按鈕或超鏈接的點擊區(qū)域大小。另外，讓按鈕更有特色也能引發(fā)用戶的互動，進而可以提高用戶的轉(zhuǎn)化率，就像下圖中藍色按鈕的波浪效果就能充分吸引用戶的注意力。
使用響應式圖片或視頻
圖片在網(wǎng)站中舉足輕重。在響應式網(wǎng)站中應用圖片的核心問題在于如何確保圖片靈活適應不同屏幕的設備，還不會出現(xiàn)失真、模糊不清等情況。因此千萬不要使用固定寬度的圖片，固定寬度的圖片在適應不同大小的屏幕時常會出現(xiàn)顯示不全等問題。如何做好圖片的響應式?我們可以給圖片設置相關屬性，或者使用支持響應式的框架(比如Bootstrap、CSS Sprites等)， 用響應式圖片class名來控制(例如class="img-responsive")。
視頻也是網(wǎng)站中重要的營銷工具之一，不少站長越來越頻繁地在網(wǎng)頁中使用視頻。在響應式網(wǎng)站中運用視頻要比圖片更加復雜。這不僅僅關乎視頻尺寸、大小的問題，如果沒有合理設置，視頻的播放按鈕等元素還會出現(xiàn)拉伸或不對稱的問題。如何讓視頻根據(jù)屏幕寬度自動縮放?我們可以插入插件如FitVids(jQuery插件)，或使用容器來嵌入代碼，并指定子元素的絕對位置。
建議 ：如果服務器上有足夠的空間，網(wǎng)站上的圖片和視頻最好以原始的尺寸呈現(xiàn)。但在小屏幕上，如果空間實在不夠或是圖片或視頻極大影響了網(wǎng)站的加載速度，我們對它們進行適當?shù)募舨?，保證原本的效果。還有，在網(wǎng)站中使用SVG矢量圖也是一個不錯的選擇。與位圖不同，SVG矢量圖根據(jù)不同的屏幕分辨率只改變圖片的路徑而不會影響像素，因此它們可以任意縮放顯示，不破壞任何清晰度或細節(jié)。
注重文本排版
文本排版是一個網(wǎng)站的重要組成部分。網(wǎng)站的可讀性是頭等大事，優(yōu)秀的文本排版有助于網(wǎng)站信息的傳遞，還能與用戶形成良好的互動。將網(wǎng)站分成不同的層級，最重要的內(nèi)容放在網(wǎng)站的第一層級，第二、第三層級放相關信息、細節(jié)等，層次清晰，按優(yōu)先順序展開;精心選擇一種合適的字體(有襯線字體易讀，無襯線字體醒目)，一個網(wǎng)站中最好不要使用超過三種不同的字體;選擇合適的字體大小，確保它在不同的而屏幕上都能得到良好的展示;規(guī)劃行高和段落間距、留白等，以保持頁面外觀的整潔優(yōu)雅。
建議： 文本要簡單易懂，這點可以通過顏色對比和易讀的字體實現(xiàn)，不過色彩的對比不能太弱(灰色文字在淺灰色背景上)，也不能太刺眼(紅色文字在綠色背景上)。多使用純文本，這是因為文本在根據(jù)設備屏幕進行縮放時不易出現(xiàn)圖片的失真現(xiàn)象。突出顯示文章的標題，標題至少應該是內(nèi)容文字的1.6倍大，且在版式中占據(jù)中心位置，吸引人的標題能讓用戶點擊進入瀏覽，還有可能在頁面上停留更長時間。
重視視覺層次結(jié)構(gòu)
除了文字排版以外，視覺層次結(jié)構(gòu)在優(yōu)化網(wǎng)站整體布局、與用戶互動方面也有著不可忽視的作用。視覺層次結(jié)構(gòu)最重要的功能就在于它可以幫助網(wǎng)站建立一個焦點，引導用戶首先注意什么地方，然后了解哪些細節(jié)，又或是最后瀏覽某個區(qū)塊。怎樣可以構(gòu)建有效的視覺層次結(jié)構(gòu)?色彩當然是其中一員"大將"。我們可以用高比對度的顏色(如冷暖色)搭配，創(chuàng)造極強的視覺沖擊力，突出核心內(nèi)容，或者是以柔和的色調(diào)、相近的顏色進行視覺上的銜接，具體如何設計完全取決于我們想要網(wǎng)站達成什么樣的目的。
建議： 視覺層次結(jié)構(gòu)最終還是要服務于網(wǎng)站內(nèi)容的，所以太過花哨的導航菜單、滑動效果或是不必要的flash動畫千萬不要放在網(wǎng)站的前列，實在必要時更應該刪除。在談到創(chuàng)造有效的視覺層次結(jié)構(gòu)時，極簡主義的設計潮流很可取。簡潔大方的設計有助于突出網(wǎng)站的中心內(nèi)容，如Slogan，行為引導按鈕等，它還能在多個不同的視窗上給用戶提供一致、直觀的體驗，極簡也意味著最少的干擾，這會帶來更高的用戶轉(zhuǎn)化率。還有，卡片式的用戶界面也很有效，這是因為矩形的卡片(不管是圖片還是文本)在適應不同大小的屏幕時更加簡單，響應式更易實現(xiàn)。
響應式設計正在不斷向前發(fā)展，究竟哪種方法可以做出最完美的響應式網(wǎng)站，大家還沒有形成統(tǒng)一的答案。但是以上建站的這幾個建議都是小飛結(jié)合豐富的建站實踐總結(jié)出來的，希望對大家有一定的幫助。起飛頁自助建站平臺提供了眾多響應式網(wǎng)站模板，采用了先進的建站技術，無需創(chuàng)建代碼，即可輕松獲得屬于自己的網(wǎng)站。快來起飛頁自助建站平臺做一個響應式網(wǎng)站吧!
更多關于云服務器，域名注冊，虛擬主機的問題，請訪問三五互聯(lián)官網(wǎng)：m.shinetop.cn
