布局的力量!巧用不对称设计打造有趣的网站页面-UI设计 PS-优质IT资源分享社区

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

布局的力量!巧用不对称设计打造有趣的网站页面

楼主#
更多 发布于:2016-06-08 23:44
 编者按:对称与不对称似乎是页面规划过程中,一向要做的取舍。对称的调和,和不对称的区别,都是发明好规划的有必要的手段。可是对称一般都用的不错,可是不对称并非人人都运用熟练。今日的文章,咱们简略聊聊页面规划中的不对称规划~
在绝大多数情形下,不对称的规划元素能从别的的元素中锋芒毕露。这些不对称的规划看起来更富有活力,假如其间包括有按钮、控件或许连接的话,它们一般能获得比别的部位更多的关注。




今日咱们就一起来细心看看页面规划师们是怎么经过比照、留白和规划来发明令人难忘的不对称规划。不对称的规划并不满是外部概括上的区别,它同样可所以内部结构上的不对称。举个比如,图库页面中,每张图都有缩略图,其间某个比别的的缩略图略大一点,这种区别会马上招引用户的注意力。总的来说,不对称规划十分合适于将用户的注意力招引到特定的区域或许元素上,这是它的优势地点。
接下来,咱们细心看看比照、距离和规划是怎么发明出不对称的效果。
可观察到的比照度
当你将视界中的视觉干扰都移除了以后,你的用户会很快注意到那些纤细的区别。这个时候,你可能会适当地添加一些效果,比如突变的布景,甚至jQuery
动画。这么的效果能让页面中仅剩的一两个元素飞快地让人注意到。




闻名Mac渠道规划软件Sketch的官方网站的规划就是个极好的比如,深色和淡色被包容到一个一致的页面规划中来。在页头中,你会注意到两个按钮:深色的“免费试用”和淡色的“马上采购”。有意思的是,两个按钮都是同样的巨细,而且处于同一个水平面上,而且是同一色系。可是,“免费采购”的按钮被规划变成鬼魂按钮,全体和深色布景简直融为一体。
这么一来,运用浅蓝色实底的“马上采购”按钮和布景构成了明显的比照,适当的显眼。当你打开页面的时候,会一眼注意到采购按钮,这就是经过大量的留白和合理的比照营造出来的视觉引导。
横向和纵向的留白让按钮和文本区分开来,而按钮颜色的区别比照是让其间一个按钮自然而然地凸显了出来。这种规划方法十分的运用,假如你再接着阅览,你会发现页脚也选用了类似的规划:




在这种情况下,用户只能提交他们的电子邮件,或许选择抛弃。
Sketch
期望你在输入邮件地址以后尽快提交,所以提交按钮布置得同输入框十分近。依据Fitt定律,两个元素之间的距离越近,用户的阅览和切换速度越快。值得注意的是,提交按钮的颜色和之前的不对称规划保持着一致,让你十分简略注意到,勾引你去点击,而这也正是Sketch想要的。
不对称规划让环视页面的用户更简略注意到这些被精心规划得“突出”的元素。至于规划和留白的操控,你能够运用A/B测验来寻求最好的比例。
从Sketch 的官方网站上,能够学习到这些经历:
·比照并不仅仅颜色的比照,它一起也可所以页面上别的控件之间的巨细比照、方位比照
·在不相同的规划和情况下,留白能够格外显眼,也能够十分不显眼
·周围的元素的衬托关于别的的元素的可见性有着首要的效果
·对称与调和能制作调和的观感,而不对称规划则能招引用户注意力,两者的运用应当平衡。
留白引导注意力
iPad 渠道上的绘图工具 Procreate
的官方网站就是一个不太相同的事例。简略环视一下这个页面,页面全体选用的暗色调配色,全体规划并不复杂,运用的页面元素尺度适当大。




规划师在这个超大的页面上运用单个元从来展现怎么绘画。屏幕截图、绘画Demo和功用介绍都各自占有着不相同的区块,留白则将文字内容和视觉信息分割开来。在文本颜色的运用上,规划师也适当的用心:页头的有些运用了强比照的配色,而正文有些则运用了比照相对较弱的配色。




经过将页面划分为不相同的区块,页面自然地划分出不相同的层次,每个有些都有着不相同的款式(全屏布景、超大字体排版、截图展现等),这么就使得各个区块显得愈加独立。
可是请必须记住,这种规划方法并不合适所有网站,可是它的确已经在规划师圈子里边逐渐流行起来,变成了一种规划趋势。假如规划和履行都很到位的话,看起来却是适当的不错。
替换式规划
乍一看,内容和图像左右替换式的规划可能会让用户感到厌烦,可是假如操控好区块之间的距离,能够消除Z字型环视阅览的不适感。




这种款式会促进访客依照他们自己的节奏来阅览,由于这种规划方法打断了信息的连续性,可是让用户变成了阅览节奏的掌控者。
Wunderlist页面就运用了非对称式的留白,合理的留白规划让规划显得风趣而不单调。经过Wunderlist
的规划,咱们能够总结一下这种规划形式:
·不对称规划的首要意图是引导用户关注页面特定的区域
·不对称规划的重复运用能发明出对称式的规划
·图文之间的空隙操控好了也能够变成一种形式
·规律的留白能让内容阅览更简略,而且具有预期性。
 


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

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

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

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

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

本版相似帖子

游客