小心无大错!响应式网页图片库设计的九个注意事项-UI设计 PS-优质IT资源分享社区

admin
管理员
管理员
  • UID1
  • 粉丝29
  • 关注4
  • 发帖数581
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:137回复:0

小心无大错!响应式网页图片库设计的九个注意事项

楼主#
更多 发布于:2016-06-07 22:47





 呼应式规划无疑是当时页面规划范畴傍边,不可疏忽的必要构成部分。而呼应式页面中的图画显现又是陈词滥调的疑问,很多争辩会集在呼应式网站的图画应当怎样展现。持续延伸开来,那么呼应式网站中的图画库应当怎样规划呢?
比较于单个图画,图库的展现无疑愈加杂乱,牵涉到的变量更多,所以完成起来也愈加费事费心。接下来,咱们来看看假如要规划呼应式的图画库,有哪些值得注意的根本规矩和窍门。
1、轮播幻灯片:尽量躲藏导航
在桌面端上导航的存在也许没什么,可是在移动端上检查的时分,导航仍是尽量躲藏起来,需求的时分再闪现。而比方摆布切换的按钮和标明阅读位置的圆点,最佳是在光标移动上去以后再显现,这么的规划不仅能够防止用户分神,而且能防止内容和导航元素之间的抵触,下降整体规划的紊乱感。




2、防止运用很多肖像类图画
假如你规划的图画库是相似网格规划的话,你也许会尽量选择和横向的图画,或许方形的图画。这么的规划在兼容桌面端规划的一同,还能够让用户在小屏幕上非常好地检查。人像类的图画在手机上合适纵向屏幕上阅读,假如横过来的话,图画会显得格外小,阅读会适当不方便。横向是最佳的,假如不可的话,运用方形的图画会是极好的兼容性计划。一个呼应式的图画库的规划需求思考多种要素,请必须牢记用户的不一样阅读场景。




3、在移动端上支持手势操作
触摸屏上运用收拾操作几乎是用户的天性了。所以,在规划呼应式图画库的时分,滑动操作等手势操作赋予用户更多的权利,让体会愈加传神。在移动设备上运用箭头导航太过于庸俗、老旧,手势交互愈加天然也更符合实在的交互体会。
4、在移动端上禁用lightbox作用
Lightbox作用大概是桌面端页面上最常见的图画阅读方法,图画以弹出框的方法呈现出来,能跟着屏幕尺度和鼠标操作来缩放。在产品展现的页面傍边,这种图画阅读方法的运用尤其广泛和频繁,可是在移动端上的时分,它也许会引起很多的用户体会上的疑问:盖住别的的交互控件、无法退出、尺度不合适等等。




5、让导航元素低沉不招摇
假如你运用幻灯片的方法来展现很多图画构成的图画库的时分,导航就显得尤为主要了。用户必定不想在等候加载中耗费太多的时刻,他们仍然会依照自个的速度点击,翻页,进入,退出,坚持,等等。所以,当你要运用导航元素的时分,一定要规划在让他们觉得不妨碍的当地。不要让导航的小圆点盖在文本或许链接上,并且防止杂乱的操控方法,这么会分散用户注意力,并让整个页面的规划都趋于杂乱。可点击跳转的导航小圆点能让用户迅速跳转到他们想要去的当地,提高功率,下降无谓的耗费。当然,不要弄的太杂乱!平衡最主要!
6、不要让图画和视频混杂
一般状况下,不一样类型的媒体混到一同没啥疑问,可是用户必定不想翻看图画的时分,俄然发现下一张图画变成了视频,出人意料的声响和额定的流量耗费肯定是他们不愿意碰到的工作!将视频和图画切割开来,让他们知道接下来的会是什么东西,不要让意外发作。




7、保证图画显现尺度不要超越初始图画的最大宽度
这一点很主要,尽管很根底,可是仍然需求强调一下。图画尽量不要去填充超越自身尺度的空间,这么会让图画表现出象素化的失真作用。值得注意的是,很多状况下图画在移动端彻底填满某个区块没疑问,可是在桌面端的时分,最大也不能超越自身宽度。这好像并不难?可是仍然有很多呼应式页面,当你拉宽阅读器界面的时分,会有图画超出自身尺度来显现。
8、图画缩放
假如你的图库中的图画要牵涉到图画缩放,那么尽量让图画去缩小,而不是扩大。乃至最佳是为图画设定准确的尺度。一般,图画缩放会运用百分比来操控它的巨细改变,假如你个特点被设定为依照百分比来缩放,那么别的的有关特点最佳设置为主动。比方将图画宽度设定为50%,那么高度缩放应当设定为主动。




9、防止运用图画标题
运用图画标题或许别的的附加文字会为你自个和用户添加很多的疑问。第一个疑问是,它在移动端界面上会强行闪现出来。在移动端有限的界面空间上,它也许会和图画挤压到一同,带来紊乱的用户体会。别的一个疑问是,它也许会约束你的文字运用。你得想理解它怎样断句,占有多大空间,在桌面端显现和在移动端显现别离是什么样,怎样才正常,太多的变量操控起来会适当费事。图画各不相同,而文字总会不可思议地掩盖到某些不应掩盖到的当地。图画和文字的对比度总会跟着不一样的图画而改变,这也是费事的当地之一。










优质IT资源分享社区为你提供此文。
本站有大量优质UI设计(含PS,软件 网页 平面设计等)教程视频,资料等资源,包含UI设计基础教程,高级进阶教程等等,教程视频资源涵盖传智播客,极客学院,达内,北大青鸟,猎豹网校等等IT职业培训机构的培训教学视频,价值巨大。欢迎点击下方链接查看。

UI设计教程视频
优质IT资源分享社区(www.itziyuan.top)
一个免费,自由,开放,共享,平等,互助的优质IT资源分享网站。
专注免费分享各大IT培训机构最新培训教学视频,为你的IT学习助力!

!!!回帖受限制请看点击这里!!!
!!!资源失效请在此版块发帖说明!!!

[PS:按 CTRL+D收藏本站网址~]

——“优质IT资源分享社区”管理员专用签名~

本版相似帖子

游客