loading请求处理中...
手机版 新型设计开发 托付式服务平台 全国站
新人享福利×
当前位置: 首页 > 威客攻略 > ui交互设计

响应式页面的交互设计

2019-08-19 15:45:31 阅读 28268次 0 标签: ui交互设计 作者: a454466904

作为交互设计师,其实我们在设计响应式页面时,会发现了很多问题。响应式界面的很多细节应该是不那么容易被理解的。那么下面详细介绍响应式页面的基础内容。

响应式页面的交互设计

什么是响应式界面

根据维基百科及其参考文献,理论上,响应式界面能够适应不同的设备。描述响应式界面最著名的一句话就是“Content is like water”,翻译成中文便是“如果将屏幕看作容器,那么内容就像水一样”。

为什么要设计响应式界面

为何按老办法为主流设计特殊版本呢?为什么要费神地尝试统一所有设备呢?

1. 即便是PC或Mac用户,调查显示只有一半的人会将浏览器全屏显示,而剩下的一般人使用多大的浏览器,这很难预知。

2. 台式机、投影、电视、笔记本、手机、平板、手表、VR……智能设备正在不断增加,“主流设备”的概念正在消失。

3. 屏幕分辨率正飞速发展,同一张图片在不同设备上看起来,大小可能天差地别。

4. 鼠标、触屏、笔、摄像头手势……不可预期的操控方式正在不断出现。

响应式界面的四个层次

1、同一页面在不同大小和比例上看起来都应该是舒适的;

2、同一页面在不同分辨率上看起来都应该是合理的;

3、同一页面在不同操作方式(如鼠标和触屏)下,体验应该是统一的;

4、同一页面在不同类型的设备(手机、平板、电脑)上,交互方式应该是符合习惯的。

响应式界面的基本规则

可伸缩的内容区块

响应式页面的交互设计

内容区块的在一定程度上能够自动调整,以确保填满整个页面

可自由排布的内容区块

响应式页面的交互设计

当页面尺寸变动较大时,能够减少/增加排布的列数

适应页面尺寸的边距

响应式页面的交互设计

到页面尺寸发生更大变化时,区块的边距也应该变化

能够适应比例变化的图片

响应式页面的交互设计

对于常见的宽度调整,图片在隐去两侧部分时,依旧保持美观可用

能够自动隐藏/部分显示的内容

响应式页面的交互设计

如在电脑上显示的的大段描述文本,在手机上就只能少量显示或全部隐藏

能自动折叠的导航和菜单

响应式页面的交互设计

展开还是收起,应该根据页面尺寸来判断

放弃使用像素作为尺寸单位,用dp尺寸等方法来确保页面在分辨率相差很大的设备上,看起来也能保持一致。同时也要求提供的图片应该比预想的更大,才能适应高分辨率的屏幕。否则,就会像我的Photoshop一样出现一下这种情况:

响应式页面的交互设计

依旧很难避免的问题

即便符合了基本规则,实际设计中还是会有些问题难以避免。

百分比并不好用

刚开始设计响应式界面时,很容易把页面百分比是做解决一切问题的途径,然而根据我的经验,百分比其实很不好用,因为:

1. 百分比很容易让整个页面看起来“软趴趴”的,一切宽度、边距都处在不断的变化中,用起来并不舒服;

2. 文字大小、边框、阴影、圆角等元素并不方便用百分比确定。这样以来,有的东西能根据页面百分比来变化,有些却又不能,混杂起来,能够毁了整个视觉设计。

3. 当页面尺寸变化巨大时(想想只能手表和投影仪),百分比完全不能解决可读性和易用性的问题。

悬停状态可能需要放弃

理想中的响应式页面应该适应任何操作方式,所以鼠标悬停这个在触屏设备不存在的状态,可能要被整个放弃了。考虑到对于鼠标用户来说,悬停反馈依旧很重要,所以悬停效果可以保留,只是不能用悬停状态来展示关键信息。

符合主流设备用户的心理预期

电脑用户期待在页面上看到更加丰富的内容,而手机用户却期待页面能专注于单一的任务。并且手机上网页的布局习惯和电脑上网页的布局习惯也有不同。这点不太好把握,只能多多注意,尽量可能制定出分别符合各方习惯的规则。

扫码,回复【创业】领取

免费送您一份创业礼包!

从0到1,解锁创业全套秘籍

帮你避开创业那些坑

设计、开发、营销需求

扫描左边二维码

免费获取咨询和方案报价

公司推荐

成为一品威客服务商,百万订单等您来有奖注册中

相关文章

留言(0 展开评论

您需要注册登录才能发表言论

快速发任务

设计价格是多少?怎样找到合适的设计人才?

官方顾问免费为您解答

 
设计相关任务
DESIGN TASK 更多
ppt外文翻译制作

¥1000 已有1人投标

CAD室内设计

¥30000 已有1人投标

3D模型

¥1500 已有1人投标

淘宝店铺LOGO设计

¥500 已有2人投标

篮球动画分镜设计

¥1000 已有1人投标

地产项目月度提报

¥19300 已有1人投标

服务排行榜
SERVICE LIST 更多
全案VI设计 LOGO 名片 QQ...
价格面议 成交509
新萝卜-最实惠 QQ2108760...
【设计总监】包装设计 3套...
¥6000元 /件 成交491
新萝卜-最实惠 QQ2108760...
企业公司品牌logo设计图文...
¥500元 /起 成交483
初创网络传媒有限公司...
【普通设计师】LOGO设计 2...
¥800元 /件 成交422
新萝卜-最实惠 QQ2108760...
牛人设计总监 全网中标最...
¥5000元 /件 成交412
新萝卜-最实惠 QQ2108760...
资深设计师操刀
¥1200元 /件 成交394
新萝卜-最实惠 QQ2108760...
【高端LOGO】 全网中标最...
¥1300元 /起 成交375
大思设计 「标志&包装...
PPT设计定制策划制作美化...
¥300元 /起 成交364
利宏营销策划
【资深设计师】包装设计 ...
¥1500元 /件 成交362
新萝卜-最实惠 QQ2108760...
【总监设计师】高端LOGO设...
¥1800元 /件 成交361
新萝卜-最实惠 QQ2108760...