|
移动端UI界面设计 看标题你脑袋里是不是该飘过N多个问号了，移动端UI界面设计？开玩笑吗？我不是做网站的，我们是专业编辑100年，我要的是怎么排版，好嘛！ 小编请各位莫鸡动。一篇微信文章其实也相当于一个静态的移动端网页，所以研究如何排版，当然有必要研究一下移动端的UI设计啦。场景虽不同，但理论都是一样一样的。下面的理论看起来可能有些枯燥，但是很实用的，所以请耐心阅读。 留足空间 与普遍观点恰好相反，文字并非屏幕上弯弯曲曲的线条排列；它主要在于周围和相互间的空间。一般包括标题文字和正文文字，且标题文字和段落文字之间需存在层次感，以突出标题。另外还有一种层次在影响着行或段落的视觉流，这是特殊的层次：字母间距小于字间距，字间距小于行间距，以此类推。 要在移动端创造最佳易读性，尤其要注意这些特殊层次，这些格式塔式的字、行、段落的文字组合，在自然光环境下同样至关重要。 留白在有一期的文章中小编已经讲过了，而且小编也讲过怎么修改代码控制左右留白的宽度。在小编看来，一般文字较少的内容适合大片留白，比如诗歌，比如图片，可排出诗意、小清新风格等。下面来展示几个经典的留白设计： 行宽与行高 行宽是一行文字的长度。或者确切的说，是一行文字的理想长度，因为很难让每一行都精确吻合。 众所周知，舒适阅读的理想行宽是65个字符左右。行宽产生的物理长度，取决于字体的设计、字间距和你使用的具体文字。同样的65个字符（一个中文字约为2个字符），用PT Serif字体是26.875em宽，用Open Sans是28.4375em宽，用Ubuntu字体是27.3125em宽。如果再加入斜体、大小写和一大堆其他字体细节，还会有更大的差异。所以大家经常会发现右侧并没有排满就折行了，就是这个原因。 在桌面端浏览器中，65个字符很难触及边缘，但在移动设备上，65个字符（如果至少大到看得清）会超出浏览器的边界。所以，在移动设备上，你必须得缩减行宽。 移动端并没有普遍认可的行宽标准。不过传统上，报纸或杂志上每一个窄列都会趋向于39个字符。鉴于这个理想行宽已经经历了数个世纪的考验，它在移动端字体上也运转良好。 一条〃的排版算比较经典的文艺小清新风，文字大小为14px；行间距为21px 不得不提的还有我们的最大号央视新闻，央视新闻的字号为：16px；行高为：1.5em；段间距为：15px 宽松行距、紧凑行距 行距是行之间的空间，行距太紧凑，会让视线难以从行尾扫视到下一行首。行距太宽松，字间距会开始形成队列，产生了我们通常意义上的河流，阻断了行的视觉流。 行距的标准通常是1.4em，但以我的经验，这对于屏幕来说太紧凑了：在屏幕上表现良好的字体都有一个关键特征——大的凹槽，大凹槽需要更大一些的行距来保持空间层次。 反过来，更短的行宽需要更小的行距。所以你可能需要将桌面端的行距设得宽松点，同时记得将移动端的设置得紧凑些。 小编比较喜好的行间距是1.75em，字号为14号字，效果就如下图： 下面这个是行间距为1.5em；字号为14px的显示效果，也是相当小清新的 不要忽视起伏边 起伏边是一段文字的边缘。你读的多数内容是居左对齐的，导致右边沿参差不齐。 当视线从行尾跳至下一行首时，大脑最好要能判断出下一次跳跃的角度和距离。把每次跳跃都想象成跑过跳板，如果间距保持一致，就会快很多。因此，文字左侧边缘应该是平的，每行从同一个地方开始。 因此你绝不应该将两三行以上的文字居中对齐。 通常文字会设置成两端对齐，所以两侧都不会有起伏边。不过两端对齐的文字产生的留白不统一。最糟的情况会导致一行中只有几个字，相当不协调。更窄的行宽会加重两端对齐的问题，所以两端对齐的文字在移动端是难以阅读的。 如果整洁真的非常重要，那么使用连字符号来让起伏边更平滑，绝不能在移动端使用两端对齐，不过微信文章本身也不支持两端对齐。 文字右侧是起伏边在移动端还有一项额外好处：人们通常在易分心的场合阅读文字，读者视线频繁地从文字上移开——查看站名，或是接电话。起伏边创造了一个随机形状，让右撇子的视线可以通过重读最少的文字，回到刚才的位置。 减少反差 增强文字与背景对比的同时，我们也要减少不同层次文字间的反差。 其原因是我们的大脑基于环境来判断重要性。在桌面端，标题可能是正文字号的两倍甚至三倍，因为屏幕上有更多文字，所以这是有效的。在移动端，实际可见的文字更少，所以反差被放大了。 多数设计师使用斐波那契数列式的字号组合。在移动端，应该缩小比率来减少字号间的反差。比如，如果你使用黄金比例1.618与字号相乘。在移动端，应该用更小的比例1.382来替代。 下图这个排版，主标题为18号字，副标题以及正文都为14号字 按比例调整字间距 为移动端调整字号时，我们要意识到字间距发生了必要的变化。 字间距是字体中应用在所有字符上的间距。通常你也不应该调整字间距。 大字号是个例外，拿标题和小号文字举例。大号文字需要减少字间距，小号文字需要增加字间距。前者是考虑到分组，后者则是为了增强对比。如果你在调整标题，或是用了通常字间距紧密的艺术字体，缩小时可能就需要把字间距放开一点。 这个恐怕很少人会进行字间距的调节，不过标题中字间距太小，就看起来很拥挤，所以一般会增加一些空行。当然，会代码的可以自己给文字加属性代码：letter-spacing. 看下面这个，很大胆地调整了字间距，但看起来很清新很舒服。这个的字号为13px，字间距为3px 文字排版设计总结 字体是一门工艺，设计师终其一生都在精心打磨。的确如此，因为每个文字、每种字体和每项技术都带来了新的挑战。没有一成不变的普适规律。 假如你追求易读性，要牢记三条原则：行内的视觉流要平顺，空间层级要清晰，要有足够的对比。这尤其适用于移动端页面。 没有不可撼动的规则，全凭你双眼决断。不过本文的指南可以作为理想的出发点，让你在移动设备上优美地排列文字。 |
|
|
