网页设计中的不对称设计都有哪些?
2020-11-26 16:09:42 阅读(175) 评论(0)
编者按:在网页设计过程中,对称与不对称似乎是一种选择。和谐与不对称的差异是创造良好设计的必要手段。但对称通常用得很好,但不对称并不是每个人都熟练使用的。在今天的文章中,让我们简要谈谈网页设计中的不对称设计~在绝大多数情况下,不对称的设计元素可以从其他元素中脱颖而出。如果这些不对称的设计包含按钮、控件或链接,它们通常会比其他部分得到更多的*。今天,让我们仔细看看网页设计师是如何通过比较、空白和布局创造令人难忘的不对称设计的。不对称的设计不全是外部轮廓的差异,也可以是内部结构的不对称。例如,在图库页面中,每张图都有缩略图,其中一张略大于其它缩略图,这种差异会立即吸引用户的注意。一般来说,不对称设计非常适合将用户的注意力吸引到特定的区域或元素上,这是它的优势。接下来,让我们仔细看看比较、间距和布局是如何产生不对称的效果的。当你去除视觉中的视觉干扰时,你的用户很快就会注意到这些细微的差异。在这个时候,你可能会适当地添加一些效果,比如渐变背景,甚至jquery动画。这种效果可以让页面上只剩下一两个元素很快被注意到。著名Mac平台设计软件Sketch官方网站的设计就是一个很好的例子,深色和浅色被容纳到统一的页面设计中。在页面上,你会注意到两个按钮:深色“免费试用”和浅色“立即购买”。有趣的是,两个按钮大小相同,在同一水平面上,颜色系统相同。然而,“免费购买”的按钮被设计成幽灵按钮,几乎与深色背景融为一体。这样,浅蓝色底部的“立即购买”按钮与背景形成鲜明对比,相当显眼。当你打开页面时,你会一眼就注意到购买按钮,这是通过大量的空白和合理的比较创造的视觉指导。水平和垂直的空白区分了按钮和文本,而按钮颜色的差异对比使其中一个按钮自然而然地凸显出来。这种设计技术非常有用。如果你继续浏览,你会发现页脚也采用了类似的设计:在这种情况下,用户只能提交他们的电子邮件或选择放弃。Sketch希望您在输入电子邮件地址后尽快提交,因此提交按钮与输入框非常接近。根据Fitt定律,两个元素之间的距离越近,用户的浏览和切换速度就越快。值得注意的是,提交按钮的颜色与之前的不对称设计一致,这让你很容易注意到并引诱你点击,这正是Sketch想要的。不对称的设计使扫描页面的用户更容易注意到这些精心设计的“突出”元素。至于布局和空白控制,您可以使用A/B测试来找到最佳比例。从Sketch的官方网站上可以学到这些经验:对比不仅仅是颜色的对比,更是网页上其他控件之间的大小和位置的对比。在不同的布局和情况下,空白可以特别显眼,也可以非常不显眼。周围元素的衬托对其他元素的可见性起着重要作用。对称和协调可以创造和谐的印象。两者的使用应平衡。Procreate的官方网站,留白引导注意力iPad平台上的绘图工具,是一个不同的案例。Procreate的官方网站是一个不同的案例,留白引导注意力iPad平台上的绘图工具。简单扫描一下这个页面。页面整体采用深色配色,整体布局不复杂,页面元素尺寸相当大。在这个超大的页面上,设计师使用单个元素来展示如何绘画。屏幕截图、绘画Demo和功能介绍都占据了不同的块,留白将文本内容和视觉信息分开。在使用文本颜色时,设计师也非常小心:页面部分使用强对比配色,文本部分使用相对较弱的对比配色。通过将页面划分为不同的块,页面自然划分为不同的层次,每个部分都有不同的风格(全屏幕背景、大字体排版、截图显示等),使每个块看起来更加独立。但请记住,这种设计技术并不适合所有网站,但它已经逐渐在设计师圈中流行起来,成为一种设计趋势。假如设计和执行都很到位,看起来还是挺不错的。乍一看,内容和图片的交替布局可能会让用户感到无聊,但如果区块之间的间距得到很好的控制,Z型扫描可以消除阅读的不适。这种方式促使访问者按照自己的节奏阅读,因为这种布局打断了信息的连续性,但使用户成为阅读节奏的控制者。Wunderlist页面采用不对称留白,合理的留白设计使布局有趣而不单调。通过Wunderlist的布局,我们可以总结这种设计模式:·不对称设计的主要目的是引导用户*页面的特定区域·不对称设计的重复使用可以创建对称设计·图形之间的间隙控制也可以成为一种模式,定期空白可以使内容浏览更简单和预期。
推荐阅读
- DNS盾有什么特点?
DNS盾是一种技术,通过将网络流量从本地定向到云端处理,保障了网络服务的稳定性和安全性。DNS盾具有如下特点: 1.高可靠性和高可扩展性 DNS盾使用了全球分布式的高可靠DNS服务器集群和CDN(内容分发网络)技术,保证了高可靠性和…查看详情
- 技术研发为主的IT企业有哪些知识产权?
互联网技术发展改变了日常生活,IT企业在技术推动创新发展的环境中迅速崛起。对于技术研发为主的IT企业而言,市场竞争力的主要来源是创造力,而创造力来自于技术知识的创新与发展,因此IT企业的知识产权保护不可轻视。下面就一起来了解,IT企业有哪些…查看详情
- 可以赚钱的APP推荐,看视频就能赚到钱!
现在短视频发展迅速,很多人平常都会偶尔刷个短视频放松一下,而且现在很多短视频软件都推出了看视频赚钱的功能,那么哪些是靠谱的呢,以下是我给大家推荐的看视频赚钱软件排行榜。1.抖音极速版抖音相信大家都不陌生了,它是一款非常受欢迎的原创短视频分享…查看详情
- 运动服商标图片大全-运动服商标有哪些?
现如今运动服已经成为跨越阶层、年龄、种族和性别的常规单品,但近几年运动服界的商标纠纷总是像一颗定时炸弹一般蠢蠢欲动,说到这,你知道的运动服商标都有哪些? *为大家整理了一份运动服商标图片大全和商标图案意义,附带商标详细信息,排名不分先后。 …查看详情
- 外贸网站建设运营中的技巧
企业拥有一个向外界展示的平台是必不可缺的,而外贸企业对此的需求更有甚之。但是拥有了网站并不代表就一定可以起到宣传的作用,好的网站更需要好的运营。外贸网站建设运营的好坏,甚至会直接影响到外贸企业的经营状况。那么外贸网站应该如何去做运营和推广,…查看详情
- 小程序开发制作哪家靠谱呢?不妨试试这几款
有不少商家或者是个人,也看中了微信小程序所带来的高流量以及用户的不断增多,所以想要开发出属于自己的小程序,但是面对多如牛毛的微信小程序开发的平台,却不知道该选择哪一家,那么小程序开发制作哪家靠谱呢?不妨试试这几款一起来了解吧。 …查看详情
- 2023年十大网络小说 十大网络小说有哪些
每个人心目中都有一个玄幻梦,既然我们不能亲身经历,那就让我们沉浸于书海之中,化行为每一本书的主角去感受一下玄幻的气势磅礴,那拥有毁天灭地力量的感受。下面*就给大家来详细介绍一下2023年十大网络小说 十大网络小说有哪些这一块的内容,希…查看详情
- 严正声明
近日,万商云集(成都)科技股份有限公司(下称我司)接到多起用户反馈,“万商云创”冒充我司“万商云集”子公司,并以此开展经营活动,为我司声誉及客户利益带来损失。为此,本公司郑重声明:一、“万商云创”与“万商云集”没有任何关系,我们敦促“万商云…查看详情
- 外观专利过期了怎么办 外观专利过期了解决办法
在平时很多的小伙伴都不知道外观专利过期了怎么办的基本情况,而且对外观专利过期了怎么办都不是很熟悉,下面万商云集*就为大家整理了外观专利过期了怎么办这方面的相关内容,希望下面的内容能帮助到各位。 一、外观专利过期了解决办法 (…查看详情
- 是什么原因让中小企业都愿意选择爱客CRM系统?
客户的获取和留存,是现代企业经营的头等大事,因此,专门用于客户关系管理的CRM系统成为当下炙手可热的SaaS产品。其中,爱客CRM系统是最受中小企业青睐的CRM系统之一,深研其产品功能和服务,小万也终于发现了爱客CRM系统的“诱人”之处。(…查看详情
- 2023年闯红灯扣几分罚多少钱
交通规则约束着每一位交通参与者,特别是开车的人,一旦出现违章,轻则扣2分,严重的直接被扣12分,吊销驾照,还要面临拘留处罚。有车的人开车时都不希望出现违章,自己的驾照一个周期就12分,扣分多了自己开车也受限制。如果不小心出现违章,很多人…查看详情
- 线下引流都有什么方式 线下门店的引流方法
实体店盈利的三要素是什么呢?一是产品,二是流量,三是成交产品,首先得要有人来,人来了以后你的产品,你的沟通能力,你的促销方法吸引了他们才会带来成交。下面万商云集*给大家来详细介绍下线下引流都有什么方式 线下门店的引流方法这个方面的内容…查看详情
- 2022年计算机语言排行榜
今日,IEEESpectrum发布了2021年度编程语言排行榜,其中Python 在总榜单以及其他几个分榜单中依然牢牢占据第一名的位置。另外值得关注的是微软C#语言,它的排行从2020年的第23名跃升至了今年的第6 名,称得上是今年…查看详情
- 代理分销和线上经营有什么区别, 两者详细区别介绍
由于近些年电商的影响巨大,出现了很多使用分销系统作为营销工具的商家,因此大多数人可能认为代理分销只有电商里面才会有,所以现在还有很多人分不清代理分销和线上经营有什么区别。下面万商云集*给大家来看一下两者的详细区别 所有权的区别 代理…查看详情
- 网站制作流程分为哪几个步骤?
一个企业要想建设一个属于自己的网站还是很简单的,但是很多的企业都对网站建设不是很熟悉,下面万商云集*给大家来详细介绍一下网站建设制作的详细流程,希望能帮助到大家。 网站制作流程分为哪几个步骤 1、网站定位 每个网站都有自己的主…查看详情
猜你喜欢
最新文章

扫码二维码
立即领取《千元实战营销秘籍》
还可免费试用营销管理系统
*如有疑问,请随时拨打免费咨询热线:400-0033-166
服务时间:8:30-18:00
软件企业
认定号:川RQ-2018-0216
高新技术企业
认定号:GR201951001121

关注微信公众号
和10万中小企业共同成长

扫码下载APP
享全方位服务一触即达
Copyright © 2004-2022 万商云集(成都)科技股份有限公司 版权所有
蜀ICP备12001963号-2
川公网安备 51010402000322号

快速找产品

找一找哪款产品适合您?
咨询热线:400-0033-166
-


-
电话沟通
获取方案
下载APP
官方微信
扫码下载APP
全方位服务一触即达

关注万商云集
和10万中小企共成长

TOP

企业首选的数字选用平台

400-0033-166
8:30-18:00















































注册有好礼



