西乡公司

    移动端文字与排版设计的六个原则

    日期:2018-04-09 人气:31899
    导读: 在印刷与桌面端Web的传统领域我们有很成熟的文字排版经验,在移动时代,这些经验很多依然有效,但因显示设备与使用环境发生了变化,也给带来了不少变化……在印刷与桌面端Web这些传统领域,我们已经有了很成熟的文字排版经验。随着移动时代的到来,APP的界面设计,加上网站越来越多地转身为响应式设计以适应多种显示设备,这些经验很多依然有效,但因为显示设备与使用环境发生了

     

    在印刷与桌面端Web的传统领域我们有很成熟的文字排版经验,在移动时代,这些经验很多依然有效,但因显示设备与使用环境发生了变化,也给带来了不少变化……

    在印刷与桌面端Web这些传统领域,我们已经有了很成熟的文字排版经验。随着移动时代的到来,APP的界面设计,加上网站越来越多地转身为响应式设计以适应多种显示设备,这些经验很多依然有效,但因为显示设备与使用环境发生了变化,也给文字排版带来了变化。

    大小反差

    在桌面端我们可能会采用字号差异较大的文字组合,移动端屏幕较小,容纳的文字也较少,同等的字号差异在小屏幕上的感受会被放大。

    原因是我们在使用这两种设备时的观看距离不同,桌面端我们的眼睛离屏幕较远,而在移动端则相反,因此我们应该在移动端使用较小的字号反差。


    字重

    不要使用PS中的文本加粗,它不仅破坏字体本身的美感,还改变了文字原本的字宽而影响段落内文字的对齐。合理的方式是使用字体本身的字重来控制,比如苹方、STHeiti、Helvetica Neue等字体本身提供Light、Regular、Medium等两三种甚至更多的字重选择。


    字间距

    不要轻易改变字体默认的字间距,字体设计师已经充分考虑了这款字体所适合的字间距,如果不满意可以更换字体。


    颜色反差

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

     

    栅格系统

    小屏幕上,一些桌面端无关大雅的间距不等问题会变得突出。


    对齐

    “...所有的元素都是正方體。但是從二十世紀開始使用標點後,到了現代桌上出版時代,許多排版工具軟體都直接套用來自日本的「禁則處理」—即避頭尾點;加上與西方文字混排的狀況越來越多,以至於無法做到縱橫對齊的基礎。但是至少段落的頭尾還是需要對齊。這就是為什麼對齊對電子書與長文章來說十分重要的原因。”
    ——董福興《簡單做好中文排版》

    在英文的段落排版中,通常是左侧对齐,而让右侧自然形成起伏边(rag)。对中文排版与阅读习惯而言则相反,段落的头尾对齐尤其重要。

    文字的对齐方式,可以用简单的代码实现:

    Web App中,使用CSS类中指定justify属性值控制即可,以下为兼容性较佳的方案

    .space-betw {
     -webkit-box-pack: justify;
     -moz-box-pack: justify;
     -ms-flex-pack: justify;
     -webkit-justify-content: space-between;
     justify-content: space-between;
    }
     
    原生iOS中,需为字符串对象设置NSTextAlignmentJustified值

    - (NSDictionary *)demoTextAttributes {
        NSMutableParagraphStyle *ps = [NSMutableParagraphStyle new];
        ps.alignment = NSTextAlignmentJustified;
        // here, NSBaselineOffsetAttributeName must be set though the default value is 0 to make the justified work.
        return @{NSParagraphStyleAttributeName :ps, NSBaselineOffsetAttributeName : @0.0f};
    }

    这个方法,结合之前我们通过栅格系统对字号和文本容器宽度的规范定义,终于可以避免App中常见的段落文字对不齐,对不准的老问题。

    后记

    以上是实际工作中的经验总结,移动平台、硬件设备、字体本身都在不断变化,相应的设计方法也不会永远一成不变,但总的原则是不变的,那就是让内容更易读。

    文本来自采集文章 http://123.075521.com/23/202.html 如需转载或删除,请联系管理员。

    1 2 3 4 5 6 7 8 9
    分享到:
西乡网站制作
【西乡本地网络公司】——承诺3小时内上门服务!西乡上门全国热线:400-666-2014 【我要收藏此页面】 网站地图 粤ICP备15108339号 网站维护:深一深圳网站建设
全国西乡网站设计-服务网店