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

这8条走心的建议,帮你设计出更加优秀的排版

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

本文主要包含ui设计,排版布局,排版设计,用户体验,经验分享等相关知识,希望在学习及工作中可以帮助到您

排版是设计师同用户沟通的一种方式。在数字产品设计当中,界面的视觉和可读性对于用户体验的影响是极为巨大的。曾经有一位著名的平面设计师曾经说过:“排版设计不仅仅是可见的,而且是可被听见的。你创建出一个宏大的场景,那么演员就可以在此登场表演了。”排版能够呈现情绪、营造氛围、传递精神,所以优秀的排版能够为设计发声。今天的文章为你提供一些排版设计上的小建议,虽不复杂,但是也需要你仔细揣摩,才能用好。

层次让排版发挥作用

想要创建出能被用户感知到的、令人愉悦的设计,设计作品应该拥有良好的组织结构和清晰的导航模式。而设计师可以通过建立视觉层次结构来明确整体的结构,视觉元素在这个框架下被组织起来,用户则可以更为清楚地感知其中的内容。

视觉层次可以被分为不同的部分,其中只与文本元素相关的部分被称为排版层次。排版层次是通过将文本内容划分为标题、副标题、正文等不同的类型,从而让文本各司其职,具备良好的层次。不同的文本类型使用不同的大小、字体、色彩来显示,从而区分出彼此。

清晰的层次结构让文本具备良好的可读性。此外,文本中的关键部分还能高亮显示,从而吸引用户的注意力,甚至关联到特定的交互和操作上去。

兼顾到上下文场景和用户

当你在为特定部分的文本选取字体的时候,需要考虑它所处的环境,所在部分的特征。每种字体都有其特定的功能、适合的场景和情绪,有的友好,有的有趣,有的严肃,有的看起来很商业,所以字体和情绪要保持一致。

在你选取字体之前,要清楚产品这个部分的特征,了解客户的目标,以及目标受众的需求和偏好。字体的视觉效果会直接影响用户从你的产品中所获得的第一印象。如果这种字体不符合产品当前内容的情绪,会在用户那边产生误会的。如果是一个相对严肃的商业网站,在其中采用有趣或者拙稚的字体,用户会对这个企业和服务产生质疑。如果是针对青少年或者年轻人,太过于正式、沉闷的字体,则会让页面看起来很无聊。

深入关注移动端的排版

设计师常常会试图使用实验性的布局,来让设计看起来更加原创。但是这样非常规的排版布局迁移到移动端设备上,就不一定具备良好的可用性了。移动端屏幕太小,难以适配过于独特的设计,这种限制会使得设计师难以兼顾到功能和视觉。设计师需要特别注意移动端排版布局的细节,从字体尺寸到间距和缩进,这些细节对于整体效果的影响是非常明显的。

与桌面端的设计相比,移动端的排版更难以达到良好的识别率。在小屏幕上,字体首先要控制到一个相对较大的尺寸,这样不会因为难以识别而造成混乱。但是太大的字体又会让设计看起来不够优雅。同时,设计师还要特别注意内容的对比度,因为移动端设备周遭的环境常常会特别的复杂,如果对比度不够好,用户阅读困难,对视力的损害就不可避免了。

此外,设计师还需要考虑排版布局的功能性。如果文本中存在可点击的内容,设计师需要确保它们能够且易于被点击到,还不能误触其他的地方。

通盘考虑移动端排版的全部细节,设计师才能为用户带来有价值的产品。

极简主义的设计不是没有道理的

在不久前,许多设计师还会在一套设计当中使用大量的不同的字体与样式,这样的设计之下,排版布局中充斥着大量令人分心的细节,难以营造一致的、合理的情绪和氛围。

经验丰富的设计师,通常会在整个排版布局中,沿用2到3种字体,确保了文本元素之间的对比度,还节省了设计成本,确保了整体的平衡,以及信息传递的准确性。在字体样式上,设计师也会对粗体、斜体这样的效果保持克制,对真正重要的部分进行强调,避免混乱。

除此之外,文案内容也需要足够的简明,不要让无效信息干扰用户。

呼吸感很重要

字母之间的间距,行间距和字间距,是可读性的主要影响因素。调整间距和留白,是排版设计中的重要环节,也是控制整个布局呼吸感的关键。

缺乏留白,或者间距控制不好,最终会影响内容的可读性:字母难以辨析,单词看不清楚,视觉上不够舒适,每行和每个段落看起来不够舒服,都会影响整体的统一性和内容的阅读体验。有密有疏,疏密有致,才有呼吸感。

像科学家一样排版,像艺术家一样定制

排版是一个涉及到许多规则和条例的复杂学科,只有充分掌握了这些规则,才能作出足够干净、整饬的排版。但是这还不够。客户总是需要一定的原创性,希望你能通过排版布局传递去情感,而这些是排版规则无法帮你实现的。

作为设计师,你的灵魂中是应该有艺术的特质。想象力和对没的感知,能够为你的设计赋予原创性和独特性。在严格的规则和独特的构思之间,找到平衡点,你会发现自己的能力已经超出了你的客户和你自己的意料。

彩色排版需要深思熟虑

有人认为,成熟的排版设计中没有色彩的位置,但是也有人认为色彩是视觉设计的必需品,哪怕是传统的排版设计,也必须具备。不过,在实际排版设计当中,色彩的出场比例并不低,所以这种情况不应忽略。

色彩在排版设计当中,不仅可以强化视觉,而且能够为UI增加情感因素,吸引用户的注意力,强化趣味感。不过,用色本没问题,但是色彩一定要控制好。色彩多而混乱的失败案例多不胜数,在排版中用色一定要深思熟虑。下面是排版设计中用色的一些技巧:

  • 构成对比。在排版中用色很容易造成混乱,让内容难以辨认。主要控制好文本和背景之间的对比度。
  • 不要使用太多色彩。太多颜色很容易让整个UI变得更加混乱。
  • 让配色协调。配色是设计的基本功,善用色轮和成熟的配色方案。
  • 小心使用特效。文本上尽量少用特效,绝大多数情况下,特效并不会让文本的视觉效果更好。

了解排版的基础知识

也许这么说有点直白,但是确实有很多设计师压根不了解排版设计的基本知识。他们大多依靠各种工具中自带的排版工具来做排版布局,他们只需要在选取自己的时候调动自己的审美知识就可以,而排版个诸多规则他们并不确知,只是基于经验,似是而非地“有所了解”而已。

不了解排版知识,设计师是无法发挥出排版的真正潜力的,这也是为什么同样的素材在别的设计师的排布之下,就是要比自己做的来得漂亮。基础知识很重要,这并非是一句空话。

那些看起来很枯燥的字体设计书籍,当中蕴藏着干货。学好排版的基础知识绝对是磨刀不误砍柴功。

【更多排版设计好文】

  1. 《对比这10个注意事项,你的网页文字排版达标了么?》
  2. 《用一个实战案例,教你学会复杂界面的布局设计》
  3. 《专业科班方法!帮你学会网格工具这个理性的排版利器》
  4. 《科班高手的方法!16个简单实用的排版小TIPS》

原文地址:uxplanet
原文作者:Tubik Studio
优设译文:@陈子木

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

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

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

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

优设大课堂

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

  • 2013年网页设计UI最热趋势 最流行的UI设计
  • 通往优秀UI(用户界面)设计师之路的20个路标
  • 这10条认知,可能就是你和大厂UI 设计师的差距
  • 针对零基础新人,我给出这份可能是最详细的UI 自学流程总结
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 想成为互联网设计师?先来看这篇超全面的介绍!
  • 这篇超详细的教程,帮你全面掌握 APP 中的投影设计!
  • 超全UI设计规范,带你了解规范设计全流程
  • UI 设计新人如何接私单?来看高手的经验!
  • 用一篇文章,带你回顾桌面GUI 的设计发展史

相关文章

  • 2018-08-23设计师作品集网站中,常见的5个误区和解决方案
  • 2018-08-23想给用户提供帮助?先掌握这5个层级!
  • 2017-08-06table td 图片水平垂直居中实现代码
  • 2018-08-23设计规范官网汇总:iOS、Material Design、IBM、Fluent……(持续更新)
  • 2018-08-23网易设计师:为什么要成为全价值链的研究员?
  • 2018-08-23做好网页排版,不要犯这10种错误
  • 2018-08-23这些至关重要的细节,同你的产品体验息息相关
  • 2018-08-23UCAN2017回顾!当新技术来临时,设计会发生哪些变化?
  • 2018-08-23简单实用!使用无序列表时应该注意的7项细节
  • 2018-08-23超干货!一套完整的设计分析思路应该是怎样的?

文章分类

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

最近更新的内容

    • 超实用!体验设计师如何自建知识体系?
    • 新手建站入门教程⑤:网站备案很简单,快速备案秘籍
    • 2018年设计师该如何转型?来看最近人气超高的 UGD 模式!
    • 上亿人使用的百度网盘,是这么做改版设计的
    • 每次看到这些不禁感叹!手绘好的妹子真的可以为所欲为…
    • 轻松看懂规范!详解组件控件结构体系之引导类
    • 想成为一名好文案,需要具备这7个职业素养!
    • 设计参考 漂亮和原创的博客设计
    • 交互设计基本功!聊聊搜索框设计的8个技巧
    • 热爱写写画画的你,可以用子弹日记激发全部创意

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

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