android響應式布局

1. 如何實現復雜響應式站點的material design

Material Design提出了平面像素的Z軸概念，通過紙片在物理世界中形態的抽象和提煉，定義了各種信息層級和常用狀態的表達方式，並詳細講解了各個細節的處理方法，就像一本考試大綱，囊括了產品中常用的UI細節，甚至一些UX細節。這里並不贅述，想看詳細的Design Guide請 點擊這里 （要搬梯子），翻譯版的 點擊這里 。

如果說UX和UI的展現，是連接產品與用戶的紐帶，那麼產品的UX以及UI應從產品的核心邏輯延展並且推演而來。如果說產品的核心邏輯或者技術的實現難易會成為設計展現的限制，那麼UX和UI應是在各種限制下所權衡出的最優解。而Material Design則像是架橋說明或者權衡出的通用解，對於眾多產品做以參考。

既然是通用大綱，那麼拋開產品僅談設計，難免會停留於「通用」層面，而利用Material Design進行實戰的案例，網上也多是app的一些設計嘗試。恰好在近期的工作學習中，接手一個響應式web站點的改版設計， 筆者參考Material Design總結以下三點分享如何實現復雜響應式站點的Material Design。

一、清晰輕量的產品邏輯

奧卡姆剃須刀法則同樣在產品架構設計中適用，越簡單的架構越有利於產品的生長。清晰輕量的產品邏輯，會減少用戶的負擔感，從而提高交互上的效率和愉悅感。

分析Material Design，會發現Google歸納了兩類復雜內容信息的層級關系，分別是Card和Tile（List 以及其他相似定義屬於同類的內容信息層級），其他定義多用於UI結構及細節。其中，Google定義Card是一種多功能信息的聚合入口，信息層級應較高，體現在Z軸應高於其他信息，視覺上有陰影表現並加以圓角處理。而tile（或同類信息列表）則是（同類或相關）信息的模塊展現，信息層級應較低，體現在Z軸應略低於其他信息，視覺上應無陰影表現不加圓角處理。其結果是從視覺層面讓產品對象更高效、更簡單，同時也更具物理世界的「真實感」。

最近接手的項目是Gekec.com的全站改版。Gekec（革客）是Geek和Maker交集，喜歡革新，喜歡技術范兒、新潮的科技消費品，喜歡自己動手創造產品，Gekec.com也就是這類人的聚集地，整個產品囊括電商、資訊（或h5宣傳）、拆機、以及社區討論等各種功能，改版前邏輯復雜，功能繁多。改版開始之初，筆者了解到革客群體時，便認為理性加濃重Geek味道的Google風格或許是最適合Gekec.com的視覺體系，然而復雜的產品邏輯不能給用戶帶來高效的交互體驗和愉悅的使用感受，視覺上也並不能很好的通過Material Design推演並且變化，所以梳理出清晰、輕量且方便視覺統一的產品邏輯成為第一任務。

Gekec.com的產品全功能在此並不贅述，Proct Feature全部為達成宜家式的體驗式設計，經過梳理可以歸納成三層，首層為體驗層（多入口的首頁封面）、第二層為貨架層（包括商城模塊、拆機模塊、體驗模塊）、第三層為詳細、操作層；

如上圖，輕量的產品結構即可方便設計的推演。例如其中第一層可以通過H5靈活排版做產品全方位體驗，第二層與第三層的關系即可利用Material Card和Tile表現。Card表達了全部信息的聚合和入口，tile則表現同類信息的羅列。從card跳轉到最終頁應有一種卡片展開的體驗。

二、適宜UI推演的響應辦法

在產品邏輯清晰簡潔的基礎上，一套適宜Material Design變化的全尺寸響應辦法就成為復雜響應式網頁設計的核心內容，響應辦法能夠直接決定功能模塊的響應邏輯以及UI的變化。實際操作中，響應辦法的確定主要就是確定柵格和佔比。

1）柵格

網頁柵格系統是從平面柵格系統中發展而來。對於網頁設計來說，柵格系統的使用，不僅可以讓網頁的信息呈現更加美觀易讀，更具可用性。而且，對於前端開發來說，網頁將更加的靈活與規范。柵格系統的具體含義以及使用方法在此不再贅述，感興趣的朋友可以參考淘寶UED的一些文章：

網頁柵格系統研究（1）：960的秘密

網頁柵格系統研究（2）：蛋糕的切法

網頁柵格系統研究（3）：粒度問題

網頁柵格系統研究（4）：技術實現

在Gekec.com的項目中，經歷產品功能模塊的梳理，筆者使用了12柵格系統，目的是能夠滿足2、3、4、6的頁面等分。註：具體柵格系統的建立應因產品和設計所決定，柵格系統並不是萬能的，而確定的柵格系統可以為整個響應式設計做規范性參考。

2）佔比

A.佔比

如上文說，12柵格約束網頁的內容區，而網頁的內容往往並不佔據屏幕的全部寬度，而是在兩側留有間隙，營造空間感。由於屏幕的限制，這種空間感在移動端設備顯得更加重要，如圖， 然而強加固定的margin pixel會使得12柵格佔比不定，難以控制設計效果。

所以佔比應是12柵格寬度對應屏幕的比值，即：

12柵格寬度X佔比=屏幕寬（臨界點）

優秀而巧妙的佔比確定可以讓網頁設計呈現在各個主流屏幕上均是100%像素。

這里簡單解釋一下，若一個200px寬的元素在1200px寬的屏幕上，其佔比為16.67%，同樣的邏輯，到1024px的屏幕上這個佔比16.67%的元素即占據了170.67px，這樣的情況下，某一個物理像素無法佔據100%，在完美主義的設計師眼裡，是無法接受的事情。而巧妙的佔比，可以讓元素在各個主流屏幕占據100%像素，完美展現設計意圖。

B.臨界點

臨界點（breakpoint）是指響應式網頁發生布局變化的關鍵點，如「當屏幕寬度小於480px時載入...樣式，當寬度在480px- 600px之間時載入…樣式」。響應式網頁理論上有無數種尺寸，我們不可能也沒有必要為每個尺寸都去做設計，需要做的是選定幾個臨界點做設計，在兩個臨界 點之間是延續上一個臨界點的布局。

臨界點確認總體目的就是為了保證頁面在手機（屏幕很小）、平板（屏幕中等）、PC（屏幕大）上載入相應的樣式，然而經驗較少的設計師往往會苦惱一個問題，那就是高像素的手機屏幕和低像素的平板屏幕應如何處理。例如設計師會擔心1080p的手機載入大屏幕頁面，或者720p的平板載入小屏幕頁面。

但需要注意的是，響應式網頁不同於APP的屏幕適配。網頁是沉浸於瀏覽器的產品，瀏覽器所啟動的屏幕像素才可以被認為是臨界點的參考點，為此，筆者做了一些測試，如下表，可以看出不少1080p手機在瀏覽器中僅啟動360px，而神奇的ipad無論是不是retina屏幕，無論是不是mini，均顯示1024x768px 。

從上表可以看出，許多擔心其實並不需要。綜上，在Gekec.com的項目中，筆者為達到多數主流屏幕100%像素的追求，即需達到 內容區在主流屏幕臨界點的佔比可以被12等分 ，進而獲得12柵格，即：

12的公倍數X佔比=主流屏幕尺寸

項目中經歷了一些測試和取捨，最終確定 佔比為93.75%，臨界點為1280px、1024px、768px和320px。

具體為：

1280px<=screen，佔比93.75%，12柵格在典型屏（1280px） 寬1200px ；

1024px<=screen<1280px，佔比93.75%，12柵格在典型屏（1024px） 寬960px ；

768px<=screen<1024px，佔比93.75%，12柵格在典型屏（768px） 寬700px ；

320px<=screen<768px，佔比93.75%，12柵格在典型屏（320px） 寬300px ；

如上圖的佔比劃分，頁面元素可以完成靈活、規范的響應。可以以此作為整個產品的響應辦法，在此基礎之上，可以對Material Design進行全面的推演。

三、精雕細琢的頁面細節

如果說產品邏輯是整個網站的骨架，那麼精雕細琢的頁面細節則可以比喻為網站的氣質靈魂。有輕量級的產品構架和明確靈活的響應式辦法後，即可通過Material Design的官方說明進行全面設計。在Material Design的說明中，已經詳細解釋了各個狀態的約束和細節，在此並不贅述，筆者僅挑選一些典型的細節。

1）css動畫

Material Design中開篇第一章節便講述了動畫給用戶的直觀感受，說明感知一個物體有形的部分可以幫助用戶理解如何去控制它。一些細節位置的動畫能給用戶體驗上的驚喜。然而在web端實現動畫效果並不像app里那樣的容易，大量JS也會影響頁面載入速度甚至影響頁面其他代碼。所以筆者選擇利用CSS對頁面一些細節加以動畫效果。

A.點擊按鈕

Material Design給出了一種ripple button，抽象了人用手觸碰卡片的漣漪效果，給用戶一種全新的使用體驗，歡迎來Gekec.com點擊嘗試。

B.輸入框

簡單的Des cription和一條橫線，抽象了實體文字卡片的填寫過程，可以幫助用戶對輸入區域有實體化的理解，歡迎來Gekec.com點擊嘗試。

2）文字樣式

Material Design中強調「同時使用過多的字體尺寸和樣式，可以輕易的毀掉布局」，並約束了常用的基本樣式就是基於12sp、14sp、16sp、20sp的字體排版。

熟悉android的朋友可能對sp的概念並不陌生，sp：Scale-independent pixels，它是安卓的字體單位，以160PPI屏幕為標准，當字體大小為 100%時， 1sp=1px；然而響應式的網頁並不是安卓，網頁更需要物理像素的尺寸約束，所以筆者在所劃分的臨界點計算了一下所測試屏幕的瀏覽器PPI，如下：

iphone5: 320x568px/4英寸/PPI=162.95

榮耀6：360x640px/5英寸/PPI=146.86

ipad：1024x768/7.9英寸/PPI=131.96

ipad mini：1024x768/7.9英寸/PPI=162.03

從上面的數據可以看出，大多瀏覽器啟動像素所產生的PPI大約在160左右，所以 某段文字在PC端約束的物理像素尺寸，直接同樣尺寸應用於移動端時，應該也可以產生不錯的體驗效果 ，所以設計時可以直接將Material Design的字體sp尺寸轉化為px來使用。Gekec.com的項目中，筆者只約束一套字體樣式，在方便前端開發的同時，完成了不錯的響應式效果。

3）顏色

Material Design Guide中給出了若干明亮鮮艷的顏色，並且指定了顏色的主要展現和層級變化，可供設計師選擇。

在實際操作中，通過商品內容的分類，筆者直接選擇Material Design中的顏色，作為每類商品的主要顏色，而在一些重要的操作入口，顏色應與主要顏色有明顯區別。筆者應用色環在Material Design Color基礎上，配合內容建立整個網站的顏色體系：

A.主體顏色以及層次根據內容確定，直接參考Material Design Color

B.應用色環分析整體補色間色

將所有主體顏色步在色環上，可以分析出補色位置應為上方紅框位置，應用於有明顯區別的重要入口，如「加入購物車」、「砸￥1元參與」，「結算」等等；而間色位置應為下方紅框位置，應用於不明顯的細節變化，如文字hover，文字鏈接等；

4）間距

Material Design Guide中已經嚴格約束了各個元素狀態下的間距，但為了滿足全站響應式布局在主流屏幕展現，筆者仍然使用了8px原理對一些間距進行了調整；在很多設計師研究8px原理並進行設計的同時， 筆者仍然需要強調，響應式web的設計應基於瀏覽器的像素尺寸 ，並不是基於ios和android的屏幕尺寸。具體可以參考上面已經分享的表格進行實驗。

這里分享一些8px的文章，感興趣的同學可以看一看：

一切為了程序猿！詳析手機端的8PX原理

一張圖解釋手機適配8px原理(原創)

總結：

Material Design已經給出了詳細的設計細節和原則，但不一定適合每一款產品，設計師需要弄清自身的產品是web還是app，邏輯是什麼樣，才可以進行細化的設計工作；深入了解產品邏輯的基礎上，確定的一套響應辦法和頁面細節，能夠保障設計的展現並帶來不錯設計效果。Material Design作為即蘋果、微軟之後最新推出的設計語言，充滿了濃郁的Google風情，能夠給用戶提供新鮮的視覺體驗，希望有越來越多的設計師會嘗試用Material Design進行設計。
轉載

2. 響應式用戶界面與設計模式 是什麼書

本書是Andriod UI設計領域的經典著作，Amazon五星級暢銷書。不僅從Android應用設計者的角度系統講解了要從事Android UI設計必須要掌握的Android平台的所有技術和特性，還從Android應用開發者的角度全面總結了Android UI設計的方法、技巧、模式、反模式，以及如何實現響應式用戶界面設計。本書共21章，分為四部分。第一部分（第1～4章）講述用戶界面設計、用戶界面設計的工具、移動設備和觸摸設備的設計，並探討Android平台；第二部分（第5～11章）介紹 Android的應用架構和在線指南、Android的意圖系統、Android應用的導航結構、主界面應用小部件、通知、物理按鍵、輸入法和感測器設計，以及平台用戶界面組件設計；第三部分（第12～16章）討論 Android資源的管理、Android應用的布局、可縮放的圖形、響應式設計，以及如何實現響應式用戶界面；第四部分（第17～21章）闡述用戶界面設計模式、用戶操作設計模式、導航和布局設計模式、數據設計模式以及用戶界面設計的反模式。

3. 幾個Web前端開發框架的比較

Bootstrap

Bootstrap是目前可用框架中無可爭議的領導者。其人氣日益增長，你可以放心的選擇這個框架，而不必擔心項目會失敗，因為具有廣泛使用基礎的框架，不太可能被拋棄。

UIkit說明

UIkit成功應用在許多WordPress主題中。它提供了靈活和強大的手動定製機制（以前版本的框架還提供了高級GUI定製程序）。

什麼是最適合你的框架？

在選擇框架時，可以從以下幾個方面考慮：

如果你還不確定使用哪個框架，那麼可以採用混合搭配的方式。當某個特定的框架不能滿足你的需求時，可以混合使用兩個或多個項目的組件。

最後值得一提的是，現在Flexbox和Grid Layout在主流瀏覽器的最新版本中得到很好的支持，比以往任何時候都更容易構建復雜的布局。這可能會鼓勵更多的開發人員放棄前端框架，從頭開始編寫他們自己想要的布局。

來源：網頁鏈接

4. c# android\html\ios用什麼語言開發

iOS平台開發語言為Objective-C；[
安卓 Android開發語言為java；
微軟Windows phone7開發語言是C#；
塞班symbian系統版本開發語言是C++。
如果你想跨平台的開發，那麼你只能用HMLT5 + bootstrap(響應式布局)
那麼通過一些跨平台框架，phoneGap 等這樣的框架，可以實現調用低層代碼的東西，登錄相機拍照，文件處理，總之與硬體相關的東西，必須要使用源代碼的代碼做封裝
目前最多的跨平台工發，都是用HTML5開發，再通過 PhoneGap打包成不同平台的應用

5. 什麼是RWD自適應（響應式）網站建設

響應式網頁設計（Responsive Web Design簡稱RWD）這個術語，由伊桑•馬科特（Ethan Marcotte）提出，是一種網頁設計的技術做法。該設計應當根據設備環境(系統平台、屏幕尺寸)進行相應的響應和調整。

手機端響應式網頁設計也變得更加重要，因為移動端流量現在占互聯網流量的一半以上。因此，谷歌宣布移動設備時代的到來。

1. 用戶體驗友好

響應式設計可以向用戶提供友好的Web界面，因為它可以適應幾乎所有設備的屏幕，包括智能手機、平板電腦、TV、PC顯示器、iPhone和Android手機，包括橫向、縱向的屏幕。

2. 節省設計開發成本

相對需要開發電腦網站、pad網站、手機網站來說，響應式網站設計更有利於節省設計開發成本。

從設計角度出發，響應式網站界面只需要設計兩套設計效果圖。電腦端與iPad基本可以共用一套設計效果圖，手機端重新設計一套就可以了。從前端開發角度說，只需要根據臨界點為不同終端開發三套不同的css樣式；從後期維護角度來說，再不需要分別維護pc界面、pad界面、移動界面，專心維護一個網站即可。

3. 積累分享

響應式Web設計可以讓你(作為網站的擁有者)通過單一的URL地址收集所有的社交分享鏈接。你可以為創建更好、更友好的網站而做出積極貢獻。

從另一個角度說，響應式網頁設計是對SEO友好的。Google也建議優先採用響應式設計，因為無論是什麼網頁版本都是相同的HTML、相同的內容，Google最容易處理。

響應式網頁設計的劣勢

1. 對老版IE瀏覽器兼容性不友好

對於老版本IE（IE6、IE7、IE8）支持不好，這是一個致命的問題。如果你的網站用戶大多還採用老版本IE的話，建議不做響應式網頁設計。

2. 載入變慢

載入需要一定的時間 雖然，它不是一個大問題，在響應式設計中，需要下載一些看起來並不必要的HTML/CSS。除此之外，圖片並沒有根據設備調整到合適大小，而這正是導致載入時間加倍的原因。

3. 增加開發時間成本

開發響應式網站是一項耗時的工作。如果你計劃把一個現有網站轉化成響應式網站，可能耗時更多。如果你想要一個響應式網站，最好藉助一些原型設計工具，例如Mockplus，從草圖開始重新設計。

4. 影響布局

響應式Web設計的布局主要是液態的，這也正是設計者對設計樣式不好控制的原因。而且眼下正是設計者提前展示各種「復製品」的時候。設計者試圖針對移動和桌面布局分別顯示線框和設計原型。只有等到這兩種布局均得到提高後，響應式Web設計策略才能真正實現

6. 響應式網頁設計成趨勢及什麼叫響應式網頁

響應式設計的概念由著名網頁設計師 Ethan Marcotte 在2010年5月份提出，其目標是要讓設計的網站能夠響應用戶的行為，根據不同終端設備自動調整尺寸。通俗地講，響應式設計是指可以自適應屏幕寬度、並做出相應調整的網頁設計。一個網站能夠兼容多個終端(iphone、ipad、android)，而不是為每個終端做一個特定的版本，這樣就可以不必為不斷到來的新設備做專門的網站版本設計了。

7. 前端響應式是怎麼回事

看看simplebs這個就明白了

8. 怎麼開發android手機版網頁

不是的，如果是網頁的話還是用HTML+CSS+JS+後端語言。不過要寫樣式改為響應式布局，如果是安卓應用的話，那是APP了，是用JAVA開發的。

9. android開發一般都使用什麼框架

目前框架使用的主要都是開源框架，都可以在github上找到：
1、volley
2、android-async-http
3、Afinal框架
4、xUtils框架
5、ThinkAndroid
6、LoonAndroid
主要有以下模塊：
(1) 自動注入框架（只需要繼承框架內的application既可）
(2)
圖片載入框架（多重緩存，自動回收，最大限度保證內存的安全性）
(3) 網路請求模塊（繼承了基本上現在所有的http請求）
(4)
eventbus（集成一個開源的框架）
(5) 驗證框架（集成開源框架）
(6) json解析（支持解析成集合或者對象）

(7) 資料庫（不知道是哪位寫的 忘記了）
(8) 多線程斷點下載（自動判斷是否支持多線程，判斷是否是重定向）
(9)
自動更新模塊
(10) 一系列工具類