小程序开发

那些在移动端app软件排版设计中被忽略的原则

编辑时间:2019-12-02 10:46  浏览次数:浏览次数
设计中除了不能绕过的字号、字重、字间距、颜色反差以外,还有2个人们易忽视的准则:栅格系统和对齐方法。Lofter、Zaker这些有名APP都曾因文字排版和对齐不当受到诟病。而这些能提高用户体验的方面,通过后台设置和写入代码就能轻松实现。
app软件

大小反差

在桌面端我们也许会选用字号差别较大的文字组合,手机端屏幕较小,容纳的文字也较少,同等的字号差别在小屏幕上的感受会被放大。原因是我们在采取这两种设备时的观看距离不一样,桌面端我们的眼睛离屏幕较远,而在手机端则相悖,因而我们应该在手机端采取较小的字号反差。

字重

不要采取PS中的文本加粗,它不但破坏字体自身的美感,还变动了文字起初的字宽而影响段落内文字的对齐。合理的方法是采取字体自身的字重来控制,例如苹方、STHeiti、Helvetica Neue等字体自身提供Light、Regular、Medium等两三种甚至更多的字重选择。

字间距

不要轻易变动字体默认的字间距,字体设计师已经充分思考了这款字体所合适的字间距,假如不满意能够替换字体。

颜色反差

移动设备采取环境纷繁复杂而不限定在室内,也许在室外,甚至暴露在强烈的阳光下,应确保文字在背景中不会辨识困难,即便是色弱者也可以够平常阅读。WCAG 2.0中建议的二者颜色反差比应该高于4.5:1(AA级),才能确保更多人及环境都能够轻松阅读。Sketch中有1个插件Color Contrast Analyser能够便利的检测这个比值,你能够采取在线检测工具Colour Contrast Check。

栅格系统

小屏幕上,一些桌面端不相干大雅的间距不等问题会变得突出。Lofter是网易一款精品优雅的App,但其文章正文界面却略有缺陷:能够看见段落右侧与卡片的间距显著大于左侧。导致这个问题的原因是设计时对文本框的宽度与文字大小中间在关系思考不周到,引致文字并不能完美地填充满文本框。

iPhone5中此界面的放大成效并加上了辅助线,细致观察,剔除黄色部分各20px的间距后,文本框宽度是558px,而正文采取的字号是30px,所以行末留下18px的空余空间。假如字号定为31px,则刚好能够放下18个字后填满558px像素的文本框。当然31px的字号在实际环境中也许并非1个最合理的字号设置,因为它并不能被整除采取到@1x的iOS开发环境。在实际设计中,能够先设置1个栅格系统,以iPhone5为例,定义最小栅格为8x8px的话,拥有如下1个栅格图:以8为基础单位,把所有字号、文本框宽度设置为8的倍数,这样我们就能够确保汉字一直维持对齐。

对齐

在英语的段落排版中,通常是左侧对齐,而让右侧自然形成起伏边(rag)。对中文排版与阅读习惯而言则相悖,段落的头尾对齐特别主要。左边是网易云阅读,右边是网易新闻。二者的处理方法相似,全是通历程序的设立,微调文字的间距以补足右边存大的空白,区别是当标点出目前行末时,网易云阅读将标点外置,而网易新闻将标点摆在了内部。以上是实际工作中的经验归纳,移动平台、硬件设备、字体自身都在不断变化,相应的设计形式也不会永远永恒固定,但总的准则是固定的,那便是让内容更易读。  



本文地址:https://www.webbj.cn/ios/faq3116.html

免责声明:我司网站转载此文,不代表本网的观点和立场。不以盈利为目的,如有侵犯公司或个人权益,我司会第一时间删除文章。 思捷智联是北京小程序开发公司,欢迎咨询免费获取思维导图!
推荐阅读
思捷智联

思捷智联是一家2009年成立于北京的IT外包公司,我们致力于为企业提供app软件开发和微信小程序开发服务。公司成立10年来,我们为民政部、方正电子、神州数码、联想控股、壹基金、首钢集团、北京大学、北京师范大学、今麦郎、丰汇租赁、万通控股等上百家企业提供了IT外包服务。我们努力实现每一位客户的托付,为客户创造实在的效益,让您与梦想走得更近。

微信咨询

扫描微信二维码
同市场经理沟通需求

感受专业服务,从来电咨询开始
010-69759765186-1139-1767