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) 一系列工具类