江苏龙网

  1. 主页 > 生活百科 > >

基本原理和实现方法 什么是响应式设计( 二 )


UI车库设计
手势为设计开辟了新的可能性 。人们喜欢阅读书籍，并用手与内容进行交互——这给用户带来了更多的便利 。在手机和平板电脑上，用户可以通过手指运动放大或滑动屏幕上的图像 。对交互设计影响很大 。例如，如果你有一个图片库，请避免使用标准的转盘(圆点)让人们循环浏览每张图片 。想想一个人手指的大小，如何把它变成一个有用的UI解决方案 。根据苹果公司的说法，可触摸UI元素的最小舒适尺寸是44 x 44px 。这个极限经常被打破，真正的最小尺寸其实在25px左右 。复合桌面设计需要一个简单直观的UI，能够适应小的移动屏幕 。针对不同设备进行设计时，请始终牢记这一点 。设计必须灵活，以便为用户创建所有设备的良好体验 。与开发人员密切合作，了解小屏幕上可能出现的会影响设计过程的内容 。
为不同的浏览器宽度设计至少三个版本 。比如尺寸分别是600px，600-900px，900px+ 。在这些宽度之间，您的内容可以自由缩放，或者您可以保持3个固定的布局 。拥有3个(或更多)固定布局并在必要时增加余量通常比流体缩放更容易设计和实现 。然而，流体缩放可以在更多设备上提供更好的体验 。
工具和资源
网页浏览器当然是一个很好的工具，也是预览设计最有效的资源 。你应该安装几种不同的浏览器来获得反馈 。然后调整浏览器窗口的大小 。
当然，你的移动设备也是一个可用的工具，在预览设计效果的时候非常有用，可以让你了解网站在特定条件下的状态 。
流体网格是基于百分比值而不是设置像素来设计网站布局 。比如PC上的网站内容宽度是930px，但是你希望移动上的宽度缩小到320px 。这一减少比例约为34.4% 。将此应用于移动终端，设计布局中的元素将相应地调整大小 。
Google的响应式网站测试工具Resizer对于在不同设备上预览网站是一个非常有用的工具 。
媒体查询是一个代码，可以在网站建立的时候实现 。媒体查询允许网站根据设备显示的特点设置CSS样式 。比如“当屏幕尺寸在480px以下时，就变成了平面设计布局 。”尝试缩小电脑上的浏览器窗口，你会发现内容会自动调整到窗口大小 。


推荐阅读


上一篇：一周上首页 怎么快速提高网站关键词排名的方法

下一篇：新手必看技巧 如何做淘宝网店分销商