• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 这些设计规则不是用来遵守,而是用来打破的

这些设计规则不是用来遵守,而是用来打破的

作者:CARRIE COUSINS 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含优秀网页设计,用户体验,经验分享,设计规则等相关知识,CARRIE COUSINS希望在学习及工作中可以帮助到您

设计是一门讲究规则的科学。优秀的设计通常依托于许多设计规则而存在,这些规则有的是设计师们多年来的经验积累总结而来,有的源自于科学研究和大量的调研数据,还有一些规则则和潮流趋势有所关联。也正是因为这些规则来源各不相同,有一些规则其实是可以打破的。

随着时间的推移,许多规则其实都随着整个设计领域的潮流和趋势而变化,规则不应该是死物。设计的发展促使规则不断变化,所以,今天的文章要谈的就是现在你应该打破的三个设计规则。

1、打破“网页设计中只能使用非衬线字体”的规则

太多人跟你说过在网页中只能使用非衬线体字体,而衬线体多被视作为纸媒和上一个时代的字体。这个规则该被打破了!

可读性是否优异是如今评判字体的一个新规范。无论是衬线体还是非衬线体,甚至手写字体,都应该被重新审视。选择正确的字体,搭配合理的配色方案和合适的排版。

著名的 Nielsen Norman 集团也有做过类似的调研,足以支撑我们之前的说法。Jakob Nielsen 在研究用户体验的时候发现,如今越来越好的显示屏,正在逐步改变网页排版设计的规则。他的研究结论如下:

旧的排版规则其实很简单:坚持使用非衬线体,因为计算机屏幕太差,无法渲染出衬线体的细节,同样尺寸下的正文字体如果选用衬线体会导致细节模糊走样。

然而,现如今的屏幕像素密度都已经很高了,这种局面下,非衬线体是否比衬线体拥有更高的可读性,就两说了。

从现在的实际体验上来看,同样大小的衬线体字体和非衬线体字体之间的可读性差异非常小。换句话来说,通常情况下,并没有足够的论据来说明一者一定优于另外一者。不过,你可以根据网站的风格和品牌的气质来选择特定的字体,来营造情绪和氛围。

所以请打破“只使用非衬线体字体”这一规则吧。在考虑选择哪种字体,并且判断字体的可读性的时候,需要注意下面的几个问题:

  • 字重选择中等或者常规,超细和细体可能会比较难以辨认。
  • 坚持使用X高度相同的字体搭配。字形瘦高的字体可能会有可读性的问题。
  • 文字间隔要合理且一致。不要过度使用连体字和花体字。
  • 只有在意图明确的情况下,才能在小块的文本中使用华丽的字体。
  • 在大块的内容中使用清晰易读的衬线体字体或者非衬线体字体。

2、打破“远离大胆醒目的背景”的规则

在很长一段时间内,网页背景似乎只能是白色或者浅灰。但是现在早就不这样了!

大胆明亮的色彩同样是可以用作网页背景的,色彩能够更好地营造氛围,给用户以更为明确更好的第一印象,为设计定下基调,它打破了以往沉闷的设计模式。

更多的网站和品牌正在使用大胆的色彩来创造引人瞩目的体验,很多时候,用户也确实更加喜欢这样的设计。

在这一规则中,另外一部分是“控制配色方案中色彩的数量”。对于一些独特的品牌而言,控制配色数量是有必要的,不过在一些个人设计项目当中,还是可以适当的做一些探索的。

Material Design 中的配色系统涵盖了许多明亮的色彩,不论是高雅还是俗气的配色,都被统一到这套配色方案中了。越来越多的网站和品牌正在试图统合更多的色彩到一套配色当中,尽力创造更优秀的用户体验。而用户好像也挺喜欢的。

不过,更多的时候,简单而一致的配色方案会更加有用。你并不一定非地为网页加上色彩明亮的背景,但是你可以将这些明亮时尚的色彩以其他的方式加入到设计当中:

  • 考虑将色彩叠加到图片上
  • 让标题使用明亮的色彩来显示
  • 将中性色的背景更换成更加令人难忘的东西
  • 为CTA按钮和元素添加明亮的色彩
  • 悬停到特定元素上时,让其变为明亮的色彩,引人点击

3、打破“维持对称和平衡”的规则

在我设计生涯的早期阶段,有许多经验丰富的设计师都力图推动完美对称的设计,力图创造完美、和谐而平衡的设计,在现在看来,这一的规则死板而无趣。

不对称的设计,能够让视觉更加引人入胜,也更容易吸引用户的注意力。采用不对称的设计相对而言更加省心,不需要为了对称而精确拆分内容,不需要为了平衡的布局而斤斤计较。

为了充分在设计当中采用不对称的设计,可以考虑使用下面的办法来创造协调而流畅的视觉流:

  • 让元素和留白一一对应,这样的不对称设计能够让主要的视觉内容被留白衬托得更加突出。
  • 有意识在人眼视觉运动轨迹上做文章。人在阅读的时候通常都是从左往右,从上往下,所以较重的元素可以置于左边。
  • 使用色彩来创建视觉焦点。
  • 将栅格上所有的内容有条理得组织到一起。
  • 注意平衡感,不对称的设计虽然不对称,但是应该平衡,用户应该能够轻松地浏览内容,并且不会因此感到不适。

结语

打破设计规则是一件令人兴奋的事情。不过哪些规则可以打破,哪些不能打破,这个是要深思熟虑的,否则会带来灾难性的结果。

【这些趋势好文,让你的设计走到用户心里】

  1. 《这3种独特的趋势,能让网页设计增色不少》
  2. 《2017年最后几个月,网页设计师值得注意的趋势》
  3. 《这3个流行趋势虽然好,但依然要注意这些细节》
  4. 《看了那么多的设计趋势,你知道怎么落地实践吗?》

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 弹出框里的设计门道,你是否都知道?
  • 遵循这7个原则,能让你的网页用户体验更优秀
  • 氛围独特情绪深沉的深色系网站,设计上有什么讲究?
  • 这3个适用性极强的网页设计趋势,在4月非常流行
  • 怎样设计,才能抓住用户稍纵即逝的注意力
  • 吃透这10个网站,你就明白了网页中留白的技巧
  • 设计出优秀的网站着陆页,这10个技巧能帮到你
  • 换了很多家公司还是在打杂,问题究竟出在哪里?
  • 也许你该注意一下影响网页设计的这5个关键指标
  • 这5个丑出新高度的网站,为什么那么多人夸

相关文章

  • 2018-08-23这篇超详细的教程,帮你全面掌握 APP 中的投影设计!
  • 2018-08-23交互基础小课堂!从五个维度全面分析「下拉刷新」功能
  • 2018-08-23基础小技巧!5个简单直观的设计对比方法
  • 2018-08-23设计师如何推动自己想法?专访百度UI设计师JJ Ying
  • 2017-08-06书写CSS的5个小技巧让你的样式更规范
  • 2018-08-23APP授权设计:如何让用户不反感并同意授权
  • 2018-08-23懒得试配色方案,有其它的解决办法吗?(附常见搭配)
  • 2017-08-06熟练设计师的七原则(1):字体设计
  • 2018-08-23用工作坊的实例,教你使用人物角色共情图!
  • 2018-08-23做设计说到底是「知人事」:专访VMware 设计主管谢雅苹!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 回过头看,我很感恩自己做出了这样的选择:石墨文档产品总监罗颖
    • 如何巧用线条,让你的Banner 更有设计感?
    • 如何“浏览作品”才能事半功倍?来看高手的方法!
    • 设计实战!为扁平风的移动端赛车游戏定制插画
    • 扁平插画绘制进阶指南!新手遇到的六种常见问题解答
    • 怎样做出大气的网页作品 设计大气的网页的方法(图文教程)
    • 优设国庆节专题!超实用的精选素材打包+出效果教程
    • 从四大维度,全方位剖析APP应该如何设计好「分享功能」
    • 学会这5个技巧,避免你的作品被人用竞品评头论足!
    • 最短JS判断是否为IE6(IE的写法)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有