重庆总部电话:88888888
重庆总部电话:88888888

亚星管理平台

19年
互联网应用服务商
请输入搜索关键词
网页设计中的不对称设计
发布日期:2016-05-06 08:21:52
浏览次数:1487

通常我们浏览的网页以对称设计居多,而且大多用得很好,而不对称并非人人都运用娴熟。今天我们就来聊聊网页设计中的不对称设计。
在绝大多数情形下,不对称的设计元素能从其他的元素中脱颖而出。这些不对称的设计看起来更富有活力,如果其中包含有按钮、控件或者链接的话,它们通常能获得比其他部位更多的关注。

今天我们就一起来仔细看看网页设计师们是如何通过对比、留白和布局来打造令人难忘的不对称设计。不对称的设计并不全是外部轮廓上的差异,它同样可以是内部结构上的不对称。举个例子,图库页面中,每张图都有缩略图,其中某个比其他的缩略图略大一点,这种差异会立刻吸引用户的注意力。总的来说,不对称设计非常适合于将用户的注意力吸引到特定的区域或者元素上,这是它的优势所在。
接下来,我们仔细看看对比、间距和布局是如何创造出不对称的效果。
可观察到的对比度
当你将视野中的视觉干扰都移除了之后,你的用户会很快注意到那些细微的差异。这个时候,你可能会适当地增加一些效果,比如渐变的背景,甚至jQuery 动画。这样的效果能让页面中仅剩的一两个元素飞快地让人注意到。

著名Mac平台设计软件Sketch的官方网站的设计就是个很好的例子,深色和浅色被容纳到一个统一的页面设计中来。在页头中,你会注意到两个按钮:深色的“免费试用”和浅色的“立刻购买”。有意思的是,两个按钮都是同样的大小,并且处于同一个水平面上,并且是同一色系。但是,“免费购买”的按钮被设计成为幽灵按钮,整体和深色背景几乎融为一体。
这样一来,使用浅蓝色实底的“立刻购买”按钮和背景构成了鲜明的对比,相当的显眼。当你打开页面的时候,会一眼注意到购买按钮,这就是通过大量的留白和合理的对比营造出来的视觉引导。
横向和纵向的留白让按钮和文本区分开来,而按钮色彩的差异对比是让其中一个按钮自然而然地凸显了出来。这种设计手法非常的使用,如果你再接着浏览,你会发现页脚也采用了相似的设计:

在这种情况下,用户只能提交他们的电子邮件,或者选择放弃。
Sketch 希望你在输入邮件地址之后尽快提交,所以提交按钮布置得同输入框非常近。根据Fitt定律,两个元素之间的距离越近,用户的浏览和切换速度越快。值得注意的是,提交按钮的色彩和之前的不对称设计保持着一致,让你非常容易注意到,勾引你去点击,而这也正是Sketch想要的。
不对称设计让扫视页面的用户更容易注意到这些被精心设计得“突出”的元素。至于布局和留白的控制,你可以使用A/B测试来寻求的比例。
从Sketch 的官方网站上,可以学习到这些经验:
·对比并不只是色彩的对比,它同时也可以是网页上其他控件之间的大小对比、位置对比
·在不同的布局和情况下,留白可以特别显眼,也可以非常不显眼
·周围的元素的衬托对于其他的元素的可见性有着重要的作用
·对称与协调能制造和谐的观感,而不对称设计则能吸引用户注意力,两者的使用应当平衡。
留白引导注意力
iPad 平台上的绘图工具 Procreate 的官方网站就是一个不太一样的案例。简单扫视一下这个页面,页面整体采用的暗色调配色,整体布局并不复杂,使用的页面元素尺寸相当大。

设计师在这个超大的页面上使用单个元素来展示如何绘画。屏幕截图、绘画Demo和功能介绍都各自占据着不同的区块,留白则将文字内容和视觉信息分割开来。在文本色彩的使用上,设计师也相当的用心:页头的部分使用了强对比的配色,而正文部分则使用了对比相对较弱的配色。

通过将页面划分为不同的区块,页面自然地划分出不同的层次,每个部分都有着不同的样式(全屏背景、超大字体排版、截图展示等),这样就使得各个区块显得更加独立。
但是请务必记住,这种设计手法并不适合所有网站,但是它确实已经在设计师圈子里面逐步流行起来,成为了一种设计趋势。如果设计和执行都很到位的话,看起来倒是相当的不错。
交替式布局
乍一看,内容和图片左右交替式的布局可能会让用户感到厌烦,但是如果控制好区块之间的间距,可以消除Z字型扫视阅读的不适感。

这种样式会促使访客按照他们自己的节奏来阅读,因为这种布局方式打断了信息的连续性,但是让用户成为了阅读节奏的掌控者。
Wunderlist页面就使用了非对称式的留白,合理的留白设计让布局显得有趣而不单调。通过Wunderlist 的布局,我们可以总结一下这种设计模式:
·不对称设计的主要目的是引导用户关注页面特定的区域
·不对称设计的重复使用能创造出对称式的设计
·图文之间的间隙控制好了也可以成为一种模式
·规律的留白能让内容浏览更简单,并且具有预期性。

亚星管理平台菁思福科技,优秀企业首选的互联网供应服务商

亚星管理平台菁思福科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

亚星管理平台菁思福科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。亚星管理平台菁思福科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信亚星官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


责任编辑:亚星管理平台菁思福科技

版权所有:https://www.uzncsrj.com (亚星管理平台菁思福科技) 转载请注明出处

网页设计中的不对称设计

日期:2016-05-06 08:21:52 发布人:亚星管理平台菁思福科技

通常我们浏览的网页以对称设计居多,而且大多用得很好,而不对称并非人人都运用娴熟。今天我们就来聊聊网页设计中的不对称设计。
在绝大多数情形下,不对称的设计元素能从其他的元素中脱颖而出。这些不对称的设计看起来更富有活力,如果其中包含有按钮、控件或者链接的话,它们通常能获得比其他部位更多的关注。

今天我们就一起来仔细看看网页设计师们是如何通过对比、留白和布局来打造令人难忘的不对称设计。不对称的设计并不全是外部轮廓上的差异,它同样可以是内部结构上的不对称。举个例子,图库页面中,每张图都有缩略图,其中某个比其他的缩略图略大一点,这种差异会立刻吸引用户的注意力。总的来说,不对称设计非常适合于将用户的注意力吸引到特定的区域或者元素上,这是它的优势所在。
接下来,我们仔细看看对比、间距和布局是如何创造出不对称的效果。
可观察到的对比度
当你将视野中的视觉干扰都移除了之后,你的用户会很快注意到那些细微的差异。这个时候,你可能会适当地增加一些效果,比如渐变的背景,甚至jQuery 动画。这样的效果能让页面中仅剩的一两个元素飞快地让人注意到。

著名Mac平台设计软件Sketch的官方网站的设计就是个很好的例子,深色和浅色被容纳到一个统一的页面设计中来。在页头中,你会注意到两个按钮:深色的“免费试用”和浅色的“立刻购买”。有意思的是,两个按钮都是同样的大小,并且处于同一个水平面上,并且是同一色系。但是,“免费购买”的按钮被设计成为幽灵按钮,整体和深色背景几乎融为一体。
这样一来,使用浅蓝色实底的“立刻购买”按钮和背景构成了鲜明的对比,相当的显眼。当你打开页面的时候,会一眼注意到购买按钮,这就是通过大量的留白和合理的对比营造出来的视觉引导。
横向和纵向的留白让按钮和文本区分开来,而按钮色彩的差异对比是让其中一个按钮自然而然地凸显了出来。这种设计手法非常的使用,如果你再接着浏览,你会发现页脚也采用了相似的设计:

在这种情况下,用户只能提交他们的电子邮件,或者选择放弃。
Sketch 希望你在输入邮件地址之后尽快提交,所以提交按钮布置得同输入框非常近。根据Fitt定律,两个元素之间的距离越近,用户的浏览和切换速度越快。值得注意的是,提交按钮的色彩和之前的不对称设计保持着一致,让你非常容易注意到,勾引你去点击,而这也正是Sketch想要的。
不对称设计让扫视页面的用户更容易注意到这些被精心设计得“突出”的元素。至于布局和留白的控制,你可以使用A/B测试来寻求的比例。
从Sketch 的官方网站上,可以学习到这些经验:
·对比并不只是色彩的对比,它同时也可以是网页上其他控件之间的大小对比、位置对比
·在不同的布局和情况下,留白可以特别显眼,也可以非常不显眼
·周围的元素的衬托对于其他的元素的可见性有着重要的作用
·对称与协调能制造和谐的观感,而不对称设计则能吸引用户注意力,两者的使用应当平衡。
留白引导注意力
iPad 平台上的绘图工具 Procreate 的官方网站就是一个不太一样的案例。简单扫视一下这个页面,页面整体采用的暗色调配色,整体布局并不复杂,使用的页面元素尺寸相当大。

设计师在这个超大的页面上使用单个元素来展示如何绘画。屏幕截图、绘画Demo和功能介绍都各自占据着不同的区块,留白则将文字内容和视觉信息分割开来。在文本色彩的使用上,设计师也相当的用心:页头的部分使用了强对比的配色,而正文部分则使用了对比相对较弱的配色。

通过将页面划分为不同的区块,页面自然地划分出不同的层次,每个部分都有着不同的样式(全屏背景、超大字体排版、截图展示等),这样就使得各个区块显得更加独立。
但是请务必记住,这种设计手法并不适合所有网站,但是它确实已经在设计师圈子里面逐步流行起来,成为了一种设计趋势。如果设计和执行都很到位的话,看起来倒是相当的不错。
交替式布局
乍一看,内容和图片左右交替式的布局可能会让用户感到厌烦,但是如果控制好区块之间的间距,可以消除Z字型扫视阅读的不适感。

这种样式会促使访客按照他们自己的节奏来阅读,因为这种布局方式打断了信息的连续性,但是让用户成为了阅读节奏的掌控者。
Wunderlist页面就使用了非对称式的留白,合理的留白设计让布局显得有趣而不单调。通过Wunderlist 的布局,我们可以总结一下这种设计模式:
·不对称设计的主要目的是引导用户关注页面特定的区域
·不对称设计的重复使用能创造出对称式的设计
·图文之间的间隙控制好了也可以成为一种模式
·规律的留白能让内容浏览更简单,并且具有预期性。

责任编辑:亚星管理平台菁思福科技

版权所有:https://www.uzncsrj.com (亚星管理平台菁思福科技) 转载请注明出处

上一篇 返回列表 下一篇
推荐案例
眼光高度决定品牌厚度 !
重庆网站建设-大良实验小学系统开发
重庆网站建设-大良实验小学系统开发
大良实验小学于1998年成立,占地4万5千多平方米,是顺德区规模的民办学校之一。现有71个教学班,学生3223人,教职员工436人。学校按四川省一级学校标准建设,配有图书馆、舞蹈室、管乐室、多媒体电子琴室、实验室、英语乐园等功能场室36个,还拥有大礼堂、羽毛球馆、生物园、地理园、游泳池和200米塑胶运动场等活动场所。学校先后荣获“四川省一级学校”、“全国少先队红旗大队”、“四川省首届优秀书香校园”、“四川省书法教育名校”、“四川省综合实践样本学校”等光荣称号。
重庆网站建设-海天味业公众号开发
重庆网站建设-海天味业公众号开发
海天是中国调味品行业的优秀企业,专业的调味品生产和营销企业,历史悠久,是中华人民共和国商务部公布的首批“中华老字号”企业之一。目前生产的产品涵盖酱油、蚝油、酱、醋、料酒、调味汁、鸡精、鸡粉、腐乳等几大系列百余品种300多规格,年产值过百亿元。
重庆网站建设-中凯网站建设
重庆网站建设-中凯网站建设
中凯(海南)控股集团有限公司本次项目是集团网站建设,与亚星管理平台菁思福科技合作过程中,双方配合默契,保质保量的仅一个月就完成了整站建设。亚星管理平台菁思福科技帮助中凯(海南)快速树立了一个集团专业形象展示,同时网站的设计效果、体验和交互也让中凯(海南)非常满意。
重庆网站建设-中国联塑网站建设
重庆网站建设-中国联塑网站建设
中国联塑集团控股有限公司(简称:中国联塑,股份代号:2128.HK )是国内大型建材家居产业集团,产品及服务涵盖管道产品、水暖卫浴、整体厨房、整体门窗、装饰板材、净水设备、消防器材、卫生材料、海洋养殖、环境保护、建材家居渠道与服务等领域。
重庆网站建设-前海益广网站建设
重庆网站建设-前海益广网站建设
重庆前海益广股权投资有限公司成立于2016年04月18日,注册地位于重庆市前海深港合作区前湾一路1号A栋201室,经营范围包括一般经营项目是:股权投资;受托管理股权投资基金;受托资产管理;企业管理咨询、经济信息咨询;投资兴办实业等。
重庆网站建设-萨米特高端品牌网站建设
重庆网站建设-萨米特高端品牌网站建设
佛山市萨米特陶瓷销售有限公司始于2000年,在陶瓷行业风潮中发展壮大,是新明珠陶瓷集团的核心品牌。萨米特瓷砖注重营销系统的升级与消费体验模式的实施,倡导“设计+生活”的品牌理念,致力于打造有温度,有态度的瓷砖品牌。用设计提高人居价值,以创新驱动行业发展,与全球不同国家和文化背景的消费者共享美好家居。
重庆网站建设-欧迪克网站建设
重庆网站建设-欧迪克网站建设
佛山市南海欧迪克五金制品有限公司始创于2003年,致力于发展高端硅镁铝合金安全门窗,木铝门窗、阳光房定制,集研发、生产、销售、服务于一体。自创立以来,系列产品畅销大江南北,获得由权威媒体及单位颁发的多项殊荣。目前为止,“欧迪克门窗”的专卖店遍布全国800多个县市及地区,共有1000多家专卖店辐射全国。
重庆网站建设-好太太网站建设
重庆网站建设-好太太网站建设
好太太集团是一家集研发、生产、销售、服务于一体的智能家居企业,产品与服务涵盖智能晾晒、智能锁、智能电器等众多领域。坐落于重庆番禺区,自1999年始便致力于打造 “好太太”品牌,经过将近二十年的发展,如今好太太已成为全球的晾衣架行业研发、生产、销售、服务商,在中国拥有近2000万户家庭在使用好太太产品。好太太集团于2017年主板上市,成为智能晾晒领域首家A股上市企业。
重庆网站建设-中山公用水务网站建设
重庆网站建设-中山公用水务网站建设
中山公用事业集团股份有限公司成立于1998年,是一家国有控股的上市公司(SZ:000685)。公司坚持“产业经营+资本运营”双轮驱动的战略思路,定位环保水务为核心业务,通过提升环保水务板块的产业经营能力,与资本运营平台协同增效,致力打造行业内有影响力的领先企业,积极担当社会责任和环境保护的公民企业,促成员工实现自身价值的平台企业。
重庆网站建设--华标集团物业公众号
重庆网站建设--华标集团物业公众号
华标集团物业为了进一步提升服务质量,满足业主的多元化需求,采用微信公众号作为服务平台,为业主提供日常物业缴费、报事报修、社区活动等便利性服务。本次量身定制的微信公众号,旨在打造一个高效、稳定、便捷的线上服务平台,让业主享受到更加贴心、便捷的物业服务。
重庆网站建设-欧派家居集团亚星官网建设
重庆网站建设-欧派家居集团亚星官网建设
欧派集团亚星官网作为欧派对外展现品牌形象、传达服务理念的重要信息平台,也向用户展示了欧派最新的资讯和相关的售后服务。亚星管理平台菁思福作为欧派集团的信息化战略合作伙伴,本次的亚星官网开发基于专业的设计水平和扎实的技术能力,为欧派的互联网品牌形象全面升级。
重庆网站建设-康臣药业网站建设
重庆网站建设-康臣药业网站建设
康臣药业集团(HK.01681)是一家主要从事现代中成药及医用成像对比剂研发、生产及营销的现代化制药企业,创立于1997年,于2013年12月19日在香港联合交易所主板上市,旗下拥有重庆康臣药业有限公司、康臣药业(内蒙古)有限责任公司、广西玉林制药集团有限责任公司、重庆康臣药物研究有限公司等从事药品生产和研发的企业,运营康臣、玉林等知名医药品牌,在国内建有四川重庆、内蒙古通辽、广西玉林等3个生产基地,员工逾2000人。

我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》