首页 > 网页教程 > 设计分享 > 优秀排版设计的8条建议

优秀排版设计的8条建议

时间:2017-09-06    来源:优设网

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

层次让排版发挥作用

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

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

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

兼顾到上下文场景和用户

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

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

深入关注移动端的排版

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

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

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

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

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

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

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

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

相关推荐
中文网页设计排版之破格的好例子
对齐是排版的基础技能 也是设计师的基本功
设计基础功!彻底掌握设计中的对比原则
设计教程:写给网页设计新手的10条实用法则
四大设计趋势教你如何你玩转2015年网页设计
网站策划:帮你掌握图文排版的5个小技巧
腾讯设计实战!响应式Web布局的概念和实践方法
7个技巧帮你设计出用户体验极佳的网页表单
UI布局设计:文章列表与内容详情页设计案例赏析
Web页面中的表格设计如何才能做得更好?
高用户体验的表单设计该怎么做?
网页首屏设计:让用户一见钟情的设计模式是什么?
UI设计教程:从零开始做APP之界面设计篇
跨屏幕的响应式设计如何做好用户体验?
移动端详情页设计:排版 构图 色彩 氛围点缀 字体怎么做?
电商设计教程:电商APP首页设计总结
如何让网站首页设计得极具吸引力?
移动终端全新界面设计语言“Metro”简析
淘宝品牌名店的BANNER广告设计评价及分析(2)
30个幽默有趣的404错误页面创意设计欣赏
分享:网页核心内容对视觉表现的影响
网页设计的背景创意风格与设计趋势分享
20+艺术视觉和网页完美统一的网页创意案例欣赏
21个带斜线排版设计的网站设计创意欣赏
55个极具创意的手绘网页设计案例欣赏
从优秀案例分析网页Banner视觉构成与创意设计
15个运用创意印刷字体的网站欣赏
产品设计:万水千山总是情 不要图片行不行
15个最佳创意型404错误页面案例赏析
15个国内外优质设计分享平台推荐 设计师必收藏
网页设计怎么破?创新式布局与交互的设计
12个启发灵感的创意单页网站作品欣赏
8个即将过时的网页设计趋势剖析
21个优秀的国外电子商务网站赏析
22款“暗黑系”的网页设计案例欣赏
四大网页设计秘诀:让用户第一眼就爱上你的网站

精彩推荐

热门教程