整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
輯導語：如何為一款產品制定合適的界面規則？隨著產品的迭代更新，作為設計師，則更需要在了解產品特性的情況下、設計出合理且有效的界面布局。本篇文章里，作者就對web產品設計適配選型做出介紹，并提出了他的看法。
現如今，幾乎所有的網頁設計都要進行響應式和自適應設計，才能讓產品能夠覆蓋到更多終端。接手一個產品設計的初期，制定界面適配規則時，你是否也有過如下疑問：
在早期，硬件設備落后，網頁使用的是絕對靜態布局為主，絕對固定寬度的布局被稱為是靜態布局（Static Layout），也有叫固定布局（Fixed Layout）。
后隨時代變遷，技術發展。因瀏覽器的增多，開發者們忙于兼容各種瀏覽器。在這個期間，實際已經有了針對各設備適配的解決方案，只是未成為主流，這種新布局方式叫自適應布局（Adaptive Web Design，簡稱AWD）。
在當時，大多指的就是寬度自適應布局。
在這種新思想下，又出現了兩派的具體解決方案：百分比寬度布局和流體式布局（Fluid Layout）。
在當時，大家都還沒有響應式布局的概念，但此時出現了一個新的詞——漸進增強。漸進增強出現后，另一個詞優雅降級也隨之出現了。這里只是舉個典型的例子：Gmail和QQmail。這兩個都是百分比寬度布局，都屬于自適應布局，但有區別。
QQmail就是CSS hack的完美體現。你用任何一個瀏覽器，幾乎可以看到同一個樣子的郵箱，為的是用戶體驗統一。
Gmail則使用了漸進增強，你的瀏覽器越新越強，你看到的效果就越好，為的是用戶體驗增強。再后來，Google發布了Android，移動互聯網爆發，html5標準發布。
互聯網大戰從PC打到了手機。手機雖然屏幕變小了，但是卻提供了更豐富的功能。用戶要求不斷提高，網站更加看重的是用戶體驗了。
所以，谷歌式的漸進增強被廣泛認可。結合自適應的思想，出現了響應式布局（Responsive Web Design）的概念——2010年由Ethan Marcotte提出。
描述響應式界面最著名的一句話就是“Content is like water”——無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備。
現如今，為何需要考慮多設備的兼顧呢？依然是因為時代發展與生活方式的變遷：
因此我們需要在了解基本布局方式的特征下，選擇適合自身產品的布局實現方式。
靜態式、自適應、流體式、響應式布局，A+R混合布局的特點對比如下。
窗口縮小后內容被遮擋時，拖動滾動條顯示布局。不管在哪種設備，哪種瀏覽器上瀏覽都是一個樣。移動設備上則顯示太小或不全。
用自適應技術（Adaptive），我們可以開發和提供不同的布局，來為類似純觸屏或者混合觸屏設備這樣的一類具體場景提供最好的體驗。
分別為不同的屏幕分辨率設備設計不同的樣式布局，相當于多個靜態布局組成的一個系列合集。
每個靜態布局對應一個屏幕分辨率范圍，頁面通過百分比自動適配設備屏幕分辨率和可視窗口大小。
當可視窗口改變時，不會出現橫向滾動條，UI、圖片、文字會自動縮放，元素內容、布局、交互方式基本不變。
以百分比作為頁面的基本單位，可以適應一定范圍內所有尺寸的設備屏幕及瀏覽器寬度，并能完美利用有效空間展現最佳效果。
屬于自適應的一個子集，也是通過百分比自動適配設備屏幕分辨率和可視窗口大小。不同于百分比自適應的是，隨著窗口大小的改變，頁面的布局會發生小的變化，可以進行適配調整，這個正好與自適應相補。
如果從廣義上講，響應式布局實際上就是更好、更機智、更靈活地去實現自適應，他們都算是一種彈性布局。再通俗點講響應式重在于「響應」它會隨著設備屬性（如寬高）的變化。
頁面的設計和開發應當根據用戶行為以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和刪格、布局、圖片、CSS media query的使用等。
狹義上講，響應式網頁設計指的是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。
1）R和A上的區別
當響應式設計在基于預定義斷點之上用CSS或者JS調整布局和內容。調整方法提供基于用戶代理和設備類型的預結構化模版。
他們之間主要的區別是DOM結構，當采用響應式思維開發時，HTML代碼在各種情況下都會一樣（除非你用JS移除某些DOM節點），而在自適應開發中我們可能會有不一樣的代碼結構和體驗。
R采用流體＋斷點，在斷點之間，頁面依然會隨窗口大小自動縮放（通過fluid grid），直到遇到斷點改變界面樣式布局甚至內容。R一般來說需要在網頁設計初期就開始（通常采用mobile first策略），所以舊的網站要做RWD很可能要完全重建。
A只在針對幾種分辨率（如320、480、760、960、1200、1600px）進行優化，在斷點之間的自動過渡比較少。而A則采用保留現有桌面網站（desktop version）而對于更小的分辨率做針對性的優化（適應），減小重構的成本。
兩種設計思維都是有效的，需衡量在項目中有多少組件、復雜性如何以及是否存在一種體驗是適合所有用戶的。開發web應用時經常會用到響應式設計，例如通過自適應開發來構建定制化體驗。
兩種方法各有利弊，但是如果同時使用它們到底會得到什么呢？A+R模型結合了基于單個主要臨界點的自適應和響應式方法。
混合式布局就是為不同終端設備的屏幕分辨率定義布局（適配各種尺寸的PC、手機、穿戴設備等等），在每個布局中，頁面元素隨著窗口調整而自動適配，混合了百分比、像素為基本單位的組合方式?？梢园鸦旌鲜讲季挚醋魇菑椥圆季帧⒆赃m應布局的融合。
自適應布局、彈性布局、混合布局都是響應式布局方式的一種。其中自適應布局的實現成本最低，但拓展性比較差；而彈性布局與混合布局效果都是比較理想的響應式布局實現方式。
很多時候，單一方式的布局響應無法滿足理想效果，需要結合多種組合方式，但原則上盡可能是保持簡單輕巧，而且同一斷點內（發生布局改變的臨界點稱之為斷點，后面內容會講到）保持統一邏輯。否則頁面實現太過復雜也會影響整體體驗和頁面性能。
一般通欄、等分結構的布局適合采用彈性布局方式，非等分的多欄結構布局則需要采用混合布局的實現方式。
2）選型
如何考慮實踐過程中的判斷呢？
一是看應用場景，二是看如何設計“響應式”方案。簡單、輕量的頁面直接用media query實現響應性就很好。比如blog、小型企業站之類?，F在的CSS框架基本都具備響應性。
但請注意響應式不僅僅是響應式布局。對于大型站簡單用media query是遠遠不夠的。
于是在同一個controller層上，識別UA，渲染不同版本的模板，組合相應的靜態資源，這也算是響應式。開發及維護成本明顯提高。
當各個版本間的差異很大時，維護成本很可能會大到無法接受。即便分開做，架構上也要調整，后端服務化，應用層App化。
根據不同公司的技術特點，調整的成本也難講是否可行。對于大型站，分開做更清晰，同時用響應式組件解決復用、功能同步的問題?？傊鶕鼍绊憫娇梢詮母鞣N層面、各種粒度上做。這是現代web開發的特點。
建議開發一套響應式電腦網站（過渡到平板端，不過渡到手機端）和開發一套響應式手機端網站（過渡到平板端以下的尺寸，不過渡到平板端）。
響應式布局有可能造成冗余的代碼較多，對研發的要求也更高，比如如何更好地讓圖片、適配、UI動畫自適應各種布局。
大站還是要考慮數據計算和承載的問題，會對桌面和移動端輸出不同數據，減輕壓力。
首先，我們需要了解幾種分辨率的差別。
PS：原生應用可查詢橫縱兩個方向的像素密度，通常瀏覽器可查詢1個系統像素對應多少物理像素。而設計角度通常需要參考的是所獲取的系統分辨率。
以一個SaaS類后臺產品為例。
對于基本流量來自Web端網頁的產品而言，需要了解當下的瀏覽器分辨率現狀 Web端不同屏幕分辨率占比情況，數據來源百度統計，如圖所示：
如上所述，選擇適配方式時，設計目標為：區分web與pad端可共享的設計布局大于手機端，且產品規劃上web端為主流量來源，pad端屬于短期兼顧。考慮技術維護成本與開發成本的平衡，于是判斷需要選擇A+R模式來完成產品的跨端設計。
自適應（A）方法能讓我們在不同的設備上有不同的體驗、內容甚至是功能。如將960px作為主要的自適應臨界點，根據全局統計信息定義，我們會得到一些相似處：
在使用響應式（R）技術時，我們可以利用主要臨界點創建兩個互不相同的體驗情景。每種體驗里，我們都可以在可用空間內定義二級臨界點去調整布局。
通過結合自適應和響應的方法，我們得到A+R模型。利用自適應技術，我們將致力于體驗和功能，作出兩種不同的情景設計。使用響應式組件，我們可以處理上下文內的UI組件和布局。
這種設計方法要求設計師真正了解他們想要提供的體驗，以便于定義要遵循的模型。此模型非常適合那些在較少功能或結構完全不同的小型移動設備上運行的大型APP。就像你看到的，你的產品將具有很強的靈活性，但同時也很復雜。
因為你要處理不同的代碼庫和環境（非強制性）,Twitter、Facebook和Github將此模式應用在他們的移動網站上。如果你在移動設備上瀏覽這些網站，則可以根據移動用戶的期望來檢驗它們是如何改變的用戶體驗的。
柵格系統可以幫助我們設計，但卻不能保證我們的設計。它有多種可能的用途，并且每個設計師都可以尋找適合其個人風格的解決方案。對于簡化復雜的響應式布局規則而言，這是一項十分有效的輔助手段。
列（Column）用于對齊內容。
其中的槽（Gutter）是指相鄰列之間的空間，把控頁面留白，有助于分隔內容。
頁邊距是指內容和屏幕邊緣之間的空間。將邊距寬度定義為固定值，這些值決定了每個屏幕尺寸的最小呼吸空間。
用于組成柵格的列數稱為列結構。
8、12、16和20是響應式布局中最常見的幾種列結構。而這取決于我們對產品的設計要求。
12列結構是相對靈活的。它可以進一步細分，將內容排列在4-4-4或3-3-3-3大小的文本框中，也有部分設計系統采用來24列的形式，如Ant-D。
是指屏幕尺寸的特定范圍，列結構、列寬、槽寬和邊距都取決于斷點。
在這個范圍內，布局會根據可用的屏幕尺寸重新調整，以獲得最佳的布局視圖。
如果較小的屏幕有足夠的可用空間容納內容，則列將按比例縮小。如果一列的內容無法在較小屏幕上顯示，該列將垂直放置圖文內容。
列跟槽的寬度是以網格作為基本單位來做增減，所以應該先定義好柵格的原子單位。“網紅款”8點網格指的是設計頁面時，也應該遵循8點規律。值得注意的是，列跟槽的值盡量取8的倍數，但不是非得是8的倍數。
產品中各類元素應該遵循這個倍數原則（圖標、組件大小等），不同的設計系統根據自身需求，設定這個規則。例如在Material Design中使用的是2X網格。
流體柵格有不同寬度的列，固定的槽和固定的邊距。流體柵格有靈活的內容寬度，根據屏幕大小變化在流體柵格中，列可以增長或收縮以適應可用空間。
混合柵格既有不同的寬度，也有固定寬度。在現代布局中，一些元素超出了網格邊緣，與屏幕邊緣對齊。頁眉、頁腳、出血都是一些常見的例子。
如果內容寬度大于可用的屏幕尺寸，那么一個固定柵格就會轉變成一個適應屏幕可用空間的流動柵格，以充分適應內容。
設計需在技術方案前介入，根據你的產品特點，進行設計方案評估。可借助的手段有刪格、網格規則等。設計斷點規則時，需關注設備的常見系統分辨率。
移動和桌面設計的差別遠不止是布局問題。只要有足夠的編程量，這些差別是可以通過響應式設計來解決的。事實上，你可以認為如果一種設計不能兼顧兩種平臺的主要差別，就不能算是合格的響應式設計。
但是，如果確實想要處理好平臺間的所有差異，我們就回到了原點：進行兩種不同的設計或者使用A+R的模型，在尋求合適的過程中，關注技術的革新。
A與B不是硬幣的正反面，它們為了解決同一個問題而生，是同一種思想的延伸。
作者：神樂、沙拉；公眾號：酷家樂用戶體驗設計
本文由 @酷家樂用戶體驗設計 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
企業網站提起HTML5大家都不陌生，作為一個新興的前端開發語言，HTML5已經被大量應用到各個領域，通過HTML5技術制作完成的網頁，可以是單純針對PC端，也已單獨適配移動端，更能做成時下最流行的響應式網站，也就是可以根據訪問設備的不同，自動適應屏幕的寬度來改變頁面中的元素樣式，鄭州建站網通過頁面中的必要元素標簽，為大家講解HTML5網站建設的解決方案。
第一點：網站頭部設計
網站頭部標簽的作用是在頁面的開端加入一個用以介紹整個頁面內容的信息容器，一般網頁的名稱、簡介內容、關鍵詞、版權信息等元素均會出現了網頁頭部，技術層面上，在網頁頭部還要表示出該頁面采用的制作語言，例如是HTML5還是較為陳舊的HTML4，目的是讓訪問端的瀏覽器使用與之對應的頁面渲染方式。
第二點：網站導航欄的設計
網站的導航元素作用就是承載了對于訪客的瀏覽指導作用，導航中的內容是直接循環于網站的一級欄目，當然也有特例，在導航中出現的鏈接內容只是整個頁面中所有鏈接的一小部分，但在設計角度上，導航中出現的內容應是整個網站中權重最高的。
第三點：網站的文章內容設計
網站的文章標簽承載了整個網頁中最重要的內容傳遞作用，頁面中的主要信息均會在此展示，當然內容不僅限于文章，也有可能是圖集、圖文或視頻等，對于該部分的元素，HTML5也增加可用標簽，意指讓頁面內容更加合理，其中就包括下面內容中會提到的部件和側邊兩個元素標簽。
第四點：網頁中小部件的使用
與我們更加熟悉的div標簽相比，部件標簽(section)對于瀏覽器和搜索引擎來說是具有指導意義的，一般情況下會用于文章內容中的標題、編號等內容，最大的好處就是，讓整個頁面中的內容排列的更加有序，邏輯清晰。
第五點：網頁布局的側邊設計
側邊標簽中的內容并不是整個頁面中的主題，而是對主體內容起到補充或解釋說明的作用，在HTML5語言廣泛應用之前，對于頁面中此類元素，不同的前端工程師在標簽的使用上有著不同的習慣，基于HTML5開發的樣式中，此類情況得到了合理的統一。
第六點：網站底部設計
此元素的內容是包含更多關于他的父元素的內容。footer置于body之后將可以提供有關該頁面的其他的信息內容。例如網站建設著的一些信息，相關文章的鏈接或者版權信息等等。此元素也可以被被應用于body之中不同的段中，可以給頁面中不同段一些特定的其他信息。底部元素作用是將那些不適合在body中出現的內容展示在頁面上，例如文章內容的版權信息、頁面底部的內容導航、網站的ICP備案信息以及友情鏈接信息等，在HTML5版本之上，也增加了在底部內容中專用的標簽，供開發者使用。
月4日，HTML5移動應用生態峰會上發布了HTML5中國產業聯盟合作發展倡議書。千龍網實習記者 宋鵬飛攝
千龍網北京7月4日訊（實習記者 宋鵬飛）HTML5移動應用生態峰會日前在北京JW萬豪酒店舉行，與會嘉賓就“HTML5未來移動應用生態的探索之路”主題分別做了主旨演講。會后共同發布了HTML5中國產業聯盟合作發展倡議書。
據悉，本次活動同期舉行了2015 HTML5游戲開發者大會。
7月4日，HTML5移動應用生態峰會上云適配聯合創始人高婧做了關于“HTML5在企業級應用中的價值”的主旨演講。千龍網實習記者 宋鵬飛攝
7月4日，HTML5移動應用生態峰會現場擠滿了媒體記者與業內人士。千龍網實習記者 宋鵬飛攝
7月4日，HTML5移動應用生態峰會上DCLOUD CEO王安做了“HTML5終將顛覆原生生態系統”的主旨演講。千龍網實習記者 宋鵬飛攝
7月4日，HTML5移動應用生態峰會現場擠滿了前來參會的業內人士。千龍網實習記者 宋鵬飛攝
7月4日，HTML5移動應用生態峰會上，觀眾在展臺前駐足體驗新科技產品。千龍網實習記者 宋鵬飛攝
7月4日，與HTML5移動應用生態峰會同時進行了2015 HTML5游戲開發者大會。千龍網實習記者 宋鵬飛攝
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
