自适应设计和针对webapp的设计

一次设计，普遍适用 ，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局

在PC年代自适应可能不那么热因为通常PC WEB左右都会留白，但是手机屏幕寸金尺土的状况，让我们必须把屏幕铺满

设计要做到自适应，前提是要作出周全的思考，要考虑放在各种主流手机的尺寸里是否都合适

这里合适的定义：不会因为屏幕大小的变化，影响到本来的美感，甚至导致一些布局逻辑上的实现问题

举个例子：

这种左右布局还原到手机后，会略显密集，昵称和数字不能超过固定长度，否则会造成换行和溢出，这就是引发的所谓布局逻辑问题。

要规避这种情况，设计过程中就要多考虑特殊情况，多和技术沟通。

一份完善的设计稿，是前端高效实现的坚实基础。千万不能草草交货了事，后续不断的返工会让整个团队付出巨大代价

技术实现的核心是

container{ width: xx% }
img { max-width: 100% }

使用百分比宽度布局；图片自适应显示

只要抓住上面两点，在切图过程中一般不会出现太大问题。

遇到一些纯CSS解决不了，需要通过算法实现的界面还原（不过这也是前端的强项），要权衡成本，总括说 怎么简单怎么来，不要把问题复杂化

前期一定要积极驱动设计，通过原型图预估出需要注意和配合的点，给出规范或要求，让设计有明确的大方向

---

上面描述的是大体概念，真正做好web移动端的交互设计，需要长期的积累经验

下面列出些由于交互设计引起的webapp问题，都是我经历过的，共勉之！【该页面将长期更新】

• 输入框放页面底部，被弹出来的输入法档住

这种情况在android下尤为常见，不要管PM说XX XX应用都是把输入框放底部的阿，你要知道web是有很多东西控制不到的。所以做webapp的时候还是乖乖的把输入框放顶部吧，会省掉不少麻烦

• 使用性能低下的动画和交互效果

web在性能和内存控制方面是硬伤，一些简单的过场和展现效果，还可以用CSS3 transition实现。

但是对于交互效果，还是建议一切从简。因为即使你呕心沥血实现了，体验也会和原生app差一大截

记住，这是硬伤，是由于操作系统和硬件等原因造成的，随着发展会被解决。但是目前来讲还是不要去揭这个伤疤

下拉刷新在IOS普及之初大行其道，不用这个交互好像都不好意思说自己是做app的

path这种以交互设计为主导的产品并不少见，如定位是该方向，建议尽早放弃

• 过分使用圆角、阴影、渐变、半透明 等CSS3属性

圆角、阴影、渐变、半透明这些曾经在IE6是噩梦的细节，在移动端实现起来相当轻松

可是不要因为这样而滥用，研究表明 box-shadow 和 gradient 是web页面的性能杀手，特别是在内容滚动的时候

so，让我们拥抱扁平化吧！

• 点击范围和反馈

可以点击的元素，设计上不要做成传统文字链的形式，记住，你的用户不是用鼠标而是手指在操作

舒适的点击范围和可点击的心理预期，对用户体验是极其重要的。一篇点击范围的文章

针对可点击元素，要有4种状态：normal、active、loading、disabled

至少要有 normal、active 两种状态，因为一个按钮点下去没有反馈是很生硬的，优化好这些细节才能在使用过程感到流畅、友善