移动端文字与排版设计的六个原则
小鹿系列竞价软件覆盖百度、360、搜狗、神马四大搜索平台，采用独创的竞价算法，智能精准出价，一键批量查排名，根据关键词位置实时调整出价，降低出价虚高，稳定排名，节省企业预算。
小鹿竞价软件专题介绍：https://www.xiaolutg.com/bidding/fengchao?ref=menu
移动端文字与排版设计的六个原则
除了设计中不能绕过的字号、字重、字间距、颜色反差以外，还有两个大家易忽略的原则：栅格系统和对齐方式。Lofter、Zaker这些知名APP都曾因文字排版和对齐不当受到诟病。而这些能提高用户体验的方面，通过后台设定和 ...
除了设计中不能绕过的字号、字重、字间距、颜色反差以外，还有两个大家易忽略的原则：栅格系统和对齐方式。
Lofter、Zaker这些知名APP都曾因文字排版和对齐不当受到诟病。而这些能提高用户体验的方面，通过后台设定和写入代码就能轻松实现。
1大小反差
在桌面端我们可能会采用字号差异较大的文字组合，移动端屏幕较小，容纳的文字也较少，同等的字号差异在小屏幕上的感受会被放大。
原因是我们在使用这两种设备时的观看距离不同，桌面端我们的眼睛离屏幕较远，而在移动端则相反，因此我们应该在移动端使用较小的字号反差。
2字重
不要使用PS中的文本加粗，它不仅破坏字体本身的美感，还改变了文字原本的字宽而影响段落内文字的对齐。合理的方式是使用字体本身的字重来控制，比如苹方、STHeiti、Helvetica Neue等字体本身提供Light、Regular、Medium等两三种甚至更多的字重选择。
3字间距
不要轻易改变字体默认的字间距，字体设计师已经充分考虑了这款字体所适合的字间距，如果不满意可以更换字体。
4颜色反差
移动设备使用环境复杂多变而不局限在室内，可能在室外，甚至暴露在强烈的阳光下，应确保文字在背景中不会识别困难，即使是色弱者也可以正常阅读。WCAG 2.0中建议的两者颜色反差比应该高于4.5:1（AA级），才能确保更多人及环境都可以轻松阅读。Sketch中有一个插件Color Contrast Analyser可以方便的检测这个比值，你可以使用在线检测工具Colour Contrast Check。
5栅格系统
小屏幕上，一些桌面端无关大雅的间距不等问题会变得突出。
Lofter是网易一款精品优雅的App，但其文章正文界面却略有瑕疵：
可以看到段落右侧与卡片的间距明显大于左侧。造成这个问题的原因是设计时对文本框的宽度与文字大小之间在关系考虑不周全，导致文字并不能完美地填充满文本框。
上图为iPhone5中此界面的放大效果并加上了辅助线，仔细观察，去除黄色部分各20px的间距后，文本框宽度是558px，而正文使用的字号是30px，所以行末留下18px的空余空间。如果字号定为31px，则刚好可以放下18个字后填满558px像素的文本框。
当然31px的字号在实际环境中可能并不是一个最合理的字号设定，因为它并不能被整除使用到@1x的iOS开发环境。在实际设计中，可以先设定一个栅格系统，以iPhone5为例，定义最小栅格为8x8px的话，得到如下一个栅格图：
以8为基本单位，把所有字号、文本框宽度设定为8的倍数，这样我们就可以确保汉字始终保持对齐。
6对齐
在英文的段落排版中，通常是左侧对齐，而让右侧自然形成起伏边（rag）。对中文排版与阅读习惯而言则相反，段落的头尾对齐尤其重要。
左边是网易云阅读，右边是网易新闻。两者的处理方式类似，都是通过程序的设置，微调文字的间距以补足右边存大的空白，区别是当标点出现在行末时，网易云阅读将标点外置，而网易新闻将标点放在了内部。
文字的对齐方式，可以用简单的代码实现：
WebApp中，使用CSS类中指定justify属性值控制即可
原生iOS中，需为字符串对象设置NSTextAlignmentJustified值
这个方法，结合之前我们通过栅格系统对字号和文本容器宽度的规范定义，终于可以避免App中常见的段落文字对不齐，对不准的老问题。
标签：
关键词优化
分享至：
关注公众号 获取更多干货资讯