在版式设想中，若何将中翰墨的排版做好？

倪丹军

来历：知乎
可以保举几本优异的版式设想书籍吗？
原文地址：https://www.zhihu.com/question/23057059
免责声明：本帖内容由机械人自动收集于互联网，如加害了您的权益，请联系我们【E-Mail:cb@yoyodoc.com】 我们会实时删除侵权内容，给您带来未便，深感歉意！

wangliqxm

直奔主题，先保举几本书再讲笔墨排版。
要做好排版版式，先领会一个概念，就是栅格理论。什么是栅格呢？栅格系统英文为“grid systems”，也有人翻译为“网格系统”，应用牢固的格子设想版面结构，其气概工整简洁。下面关于栅格和版式的根本理论保举几本书。

1.《美国编排设想教程》：作者深入研讨了包括栅格式在内的8种版式设想系统，别离是轴式、放射式、收缩式、随意式、栅格式、模块式、过渡式和双边式系统。



2.《平面设想中的网格系统》：更系统的讲了网格理论，以及笔墨与图片之间组合关键。



3.《网格系统与版设设想》：这本书加倍偏重的是版式设想的利用，增加了大量的案例来佐证理论常识，倡议先看上面那两本再看这本。



笔墨排版最重要的是留白的设备和结构的处置。留白是笔墨的部分治理，结构关乎到全部版面能否调和。




人和人之间需要间隔感，笔墨固然也是一样需要的，留白要做的就是间距，可以先来对照一下下面两张图的差别。间距包括字间距、行间距、两侧边距、结构间距。


字间距倡议设备在1.5，行间距倡议设备1-1.75,但是设备间距只是我们笔墨版面最根本的流程，留白更在意的是对笔墨空间关系的处置。空间关系可以用题目和正文款式来调和。




我们在对笔墨较多的内容停止排版时，首先需要对大段笔墨停止拆解，将内容停止分段整理，分别出小题目。

这样会让用户在阅读时不会由于阅读大段笔墨而落空耐心，也会让用户更轻易记着你表达的内容。






除此之外，一个好的版面还需要一些款式来帮助笔墨的展现。



▲ ID：95447



▲ ID：95390



▲ ID：92630



▲ ID：93124



▲ ID：95703

【温馨提醒】

经过好友约请注册135编辑器，成功约请后 约请者 和 被约请者 双方都可获得7天白银会员。没有获得约请链接可以关注公众号 135编辑器（ID：editor135），从菜单栏获得约请链接。
假如你还没有注册135编辑器账号，你也可以经过这个链接注册：Register-135编辑器即可获得7天白银会员。

大路84

笔墨若何实现完善UI？文本排版设想告诉你（附书籍保举）

一部手机，电量充沛，收集畅达，就足以让我们打发一天的时光，纵情沉醉在手机时代的缤纷天下里。这个信息资本无穷尽的手机收集天下，是设想师和开辟者们在不停的摸索中一路一步经心打造。若何进一步美化这个天下，优化用户体验？若何在手机有限的屏幕上显现清楚的UI和UX？这里太多身分需要斟酌，文本排版设想就是其中不成或缺的一部分。明天，我将从文本排版设想角度动身，谈谈若何实现完善的手机UI界面。

首先，有需方法会一下根本常识。


国内一些设想师，大概开辟职员，能够历来都没有打仗过文本排版设想的培训或进修。

1，什么是文本排版？

“文本排版，“又称“笔墨设想”，是一种触及对字体、字号、缩进、行间距、字符间距停止设想、放置等方式来停止排版的一种工艺。在数码技术提高之前，文本排版是一项专业的工作，数码时代的到临使字体排印不像畴前仅由排字印刷方面的技术工人完成，而更被图形艺术家、艺术指导、文书职员甚至儿童普遍利用。”

---维基百科

2，为什么文本版排版在手机端设想中很重要？

手机端设想比网页设想要求更精美细致，这个方寸之间的屏幕上，每个元素的挑选都加倍谨慎，不但美妙，更要适用。用户对手机端文本排版设想的体验要求也更高，于设想师而言，让用户能满足于手机的文本排版设想是极具应战性的。

设想一下，一个完全没有任何笔墨的手机网页是怎样的呢？不现实吧。一样，在手机界面上随意的放置文本元素，会成心义吗？能实现有用的UI和UX吗？虽然图片和视频极具静态也丰富多彩，但用户仍然需要经过文本获得信息。这不但仅是一种习惯，笔墨自己也能转达别的元素没法转达的信息。优异的手机排版设想，不会让用户发生视疲惫，而应当让用户能轻松获得信息，实现人机有用互动。




那末，文本排版设想的奥秘究竟有哪些呢？若何经过文本排版设想实现完善UI呢？


凡是，文本排版设想包括但不限于以下元素。别的，需谨记：手机设想日新月异，手机文本排版设想固然也在与时俱进。我们既要尊重现有法则，但也要连结创新和摸索。

以iPhone的文本排版设想为例。在最新的iOS 11中，做出了以下更新：

1）增加文本巨细和权重：进步可读性。

2）供给较大字号和标准静态尺寸字号，适用于具有帮助性功用需求的用户。

接下来，我逐一讲授若何设想优异的手机端文本排版：


1. 字体

1)字体挑选

字体挑选经常被毛病看待，要末间接轻忽，要末简单地从字体库中肆意挑选一款。现实上，分歧范例的文本内容需要利用分歧的字体，字体可以表达心里感受和心理需求。试想，利用浓密僵硬的字体在女性色彩的读物内容里，能否是显得格格不入？相反，你应当挑选比力细致和温和的字体。僵硬浓厚的字体常常更具刚硬气质。

另一方面，过度花哨都雅的字体在手机屏幕上能够很难识别。手机真个UI要求简单而清洁，利用同种气概的字体是连结界面清新的关键。避免单调，您可以挑选一种帮助字体与首要字体构成对照。这类情况下，界面的字体数目要控制在2到3种，多则紊乱。




2)字体巨细

手机屏幕有限，字体巨细相当重要。假如你只是在手机屏幕上利用细小字体来处理，那就真是一个笑话了。虽然用户可以缩放文原本改变字体巨细，从而提升可读性，但这绝不是设想师偷懒的捏词。这多出的操纵，本就违反用户体验。字体太小视不清，还会损伤用户的眼睛，花费更多的时候阅读；而较大的字体又会敏捷吃掉屏幕，并破坏阅读联贯性。

那怎样是适当的字体尺寸？

对于iOS，利用最少11sp的字体巨细，而对于Android，请挑选14 sp为主文本。请留意，这是主文本凡是利用的标准，不是强行的唯一标准。此外，在设想手机端字体巨细时，需要留意设想字体巨细要比常规、利用在桌面真个略大一些。




2. 间距

1) 行间距

行间距是一排笔墨和另一排笔墨之间的空间。手机屏幕较小，所以行间距凡是比桌面版本小。设备行间距时，需要在手机端设备比桌面端小的值。过宽或过窄的行间距城市破坏手机UI界面，下降可读性。很多人以为，1.4em是标准的行间距，但在手机屏幕上，仍然有显得几分慎密，用户能够会感应笔墨恍如在收紧。在设想上，标准的行间距应当是字体巨细的120％。别的， 假如文本的长度越短，那末它对行间距宽度的要求也会下降。




2) 字间距

字间距是两个笔墨之间的间距。这是手机排版中的一个很小的身分，但值得关注。你能够会以为，在一个段落里，字距调剂能够不是一个需要题目。但假如您充足仔细，您能够会留意到，这凡是出现在英文文本中，大写字母与小写字母之间的空间和两个小写字母之间的空间不尽不异。这会形成一定的视觉平衡，破坏美感。




3) 全文本字间距

上面不是刚提了字距吗？这里能否反复了呢？固然不是，字距在两个笔墨间和全文本的字间距并不是完全一样的概念。这两者常常能够会使设想师发生迷惑，但它们类似却分歧。这里的字间距是一切字符和文本的字间距。有用的字间距会使文本更易读。凡是，字体利用时可以适当调剂页面字距，是以你不需要过量的关注。但假如你留意这一点，也许会对设想大有裨益。凡是，大文本需要更少的字距，而稀疏的文本要求更宽的字距。




3. 行长

行长也是手机排版中的一个重要标准要求。文本行的长度能够会影响全部排版。桌面屏幕的行长势必会超越手机屏幕边框。在手机排版中，每行上的字符数目，字体巨细和行长度都慎密相连，相互影响和管束。公道的结构这些要素是可读性的关键。凡是，一行保存30-40个字符数时比力公道的挑选。




4. 留白

留白在设想中无处不在。留白可以带来自在和放松的感受。手机排版留白首要包括：行间距，边距，段失间。手机排版中的适当空间可以帮助用户更好阅读文本，提升界面美感。设想师可以斟酌从页面10％到20％的范围起头留白。但不要留白地区太大，手机屏幕有限。




5. 条理结构

条理结构是夸大全部文本的关键元素，并能发生对照度。但手机排版中的条理结构比凡是web界面条理简洁，凡是Web界面具有3个级别。而手机屏幕的空间有限，所以很多设想师只利用了2个条理：题目和文本主题。题目是捉住读者眼球，而文本转达可读性。保存题目和主题这两个结构条理，这也是手机设想的一个趋向。这可以使手机UI简洁，并连结对照度和条理感。




6. 对照度

在手机屏幕上，文本数目远远小于Web界面，因而同等设备的对照值，在手机界面上会放大。手机文本排版设想的对照度题目，最大的原则就是削弱对照。假如你在小屏幕上利用情况光度和短字体，不单没有帮到用户，还会让他们发生头疼晕眩的感受。色彩挑选对对照度影响很大，更糟的例子，红色笔墨与绿色布景。此外，字体巨细也是对照度的一大斟酌。当设备条理结构时，不要太偏激，题目标字体巨细不能太大于文本主体。最初，留白和文本部分也可以构成一种微小的对照。




7. 功用性

连结平衡美妙的UI是远远不够的，功用也是同等重要的。手机文本设想还要发生现实的感化，比如满足我们的一些操纵，像采办产物，下定单或预订机票。文本需要清楚指示用户能做什？接下来可以做什么？确保用户可以轻松地履行操纵。功用性文本需要突出，可点击的元素应当充足大，以便用户可以点击它们。




8. 对齐

凡是，文本对齐方式有4种：左，右，中或两头对齐。哪一种在手机排版中更好？

关键是要连结舒适清楚的边距。左中右三种方式都可以保存边距，而两头对齐在左右两侧都没有边距。此外，两头对齐文本会致使纷歧致的字间距，最坏的情况还会致使一行中的几个单词牢牢凑在一路。对于文本主体而言，两头对齐是不明智的挑选。

左侧对齐是其他3种对齐方式里的最好挑选。它能够发生右侧沿边距，留下空间，左对齐可以利用户的眼光从一行笔墨联贯到下一行笔墨，供给一个整洁的初始点。




但是，有些设想师以为夹杂对齐方式可以更好的实现和谐的UI。看上面的界面：

文本主体内容多，利用左侧对齐；而题目或短行文本，居中对齐也是很好的挑选。

9. 字型和品牌

同一款app或系统，倡议利用单个字型并演变几种分歧字体变体和分歧尺寸。夹杂几个分歧的字型会使您的界面看起来分离和紊乱。凡是，品牌或利用法式具有自己的预设字型。苹果利用San Francisco, 诺基亚利用Nokia Pure，Google Android利用Roboto。

苹果按照产物功用挑选字体。例如， iOS 7利用了（Pro）Light，iOS 9利用SF-UI，而在iOS 10中，San Francisco的字体版本是SF UI Text 和 SF UI Display。




10. 文本款式

尽能够利用内置文本款式。内置的笔墨款式可让您以视觉上怪异的方式表达内容，同时连结最好的易读性。这些气概基于系统字体，而且你可以操纵关键的排版功用，例如静态范例，可自动调剂每种字体巨细的字距和行距。




11. 响应式设想

手机装备有分歧的尺寸。响应式设想也已经利用于手机设想。响应式排版成势必为这一趋向的重要身分。上述一切元素，任何毛病利用能够会破坏整体手机UI设想。设想师需要斟酌手机排版在分歧装备上的表面。




12. 原型设想

文版排版设想在很多设想范围类都相当重要，原型设想中也是必不成少，优异的文本排版，可以和其他元素组件配合办事于清洁的UI界面。但在原型设想中，文本不需要具有实在的意义。在 XCode 中调剂代码，在 Sketch 中点窜设想都太慢太麻烦了，无妨试试国内最优异的原型设想工具摹客RP，摹客RP 自带了大量标准组件，你可以间接经过 Drag & Drop 的方式来快速结构你的页面，文本组件有单行文本和多行文本的组件，并可对其停止例如色彩，尺寸，对其方式，字体挑选等各类属性设备，而且可以增加交互。新版本加入了文本数据添补功用，可对文本内容停止单个和批量添补，非常便利。此外，你可以间接手机上间接检察，能否具有较高的可读性。




版式设想好书保举：

1.写给大师看的设想书（第3版）
2.点石成金
3.平面设想法例
4.美国视觉转达完全教程
5.设想心理学
6.艺术的故事
7.平面设想视觉辞书

相关阅读：

UI设想中最常用的色彩
案例研讨：手机APP的UI设想流程
安卓设想师不容错过的15款适用UI界面设想工具
【配色指南】UI设想中利用明亮色彩的利与弊，你知几多？
2018网页UI设想：轻松搞定视觉条理感
嘿！2018年Sketch UI界面设想套件前十领会下！
移动端UI界面设想之-注册登录
移动UI界面设想，你万万不能疏忽的设想要点
2018界面感情导设想，拒绝冷冰冰的人机交换
易用性设想：若何让你的利用法式适用于一切人
面向UI和UX设想师的16大免费在线资本
为什么丑陋的UI界面却能缔造杰出的用户体验？
若何快速把握正确的UI配色计划？6种技能不容错过！
UI 设想师不容错过的12款APP UI 交互设想
笔墨若何实现完善UI？文本排版设想告诉你
<hr/>摹客，让设想和合作更快更简单！

天下非公呵

对于中笔墨的排版  我也不是很懂，不外有个排版很厚的书 似乎叫 绝版 AB   CD EF  分3次出的  每次出两本   大部分设想公司城市有那种带碟的很厚的版式设想   小我比力喜好，日本人佐佐木刚士（似乎叫这个名字）写的  版式设想道理。

我能陪你变老

夏井芸华编著的版式设想挺不错的，有很多实例讲授，每一块内容都有一般法则与特别忌讳，便于往后在工作中留意到。这本书还供给插图的色彩数值RBG与CMYK。同系列的字体设想，色彩设想，POP设想，标志设想，插画设想也很是不错。