• 0755-82538016
  • 0755-82560826
  • 深圳网站建设_APP小程序开发_博纳网络

    • 网站建设案例
      • ";

        营销网站建设

        全网营销网站

        高端网站建设

        商城网站建设

        外贸网站建设

        小程序开发

        区块链开发

        物联网项目开发

        定制app开发

        在线教育网站

        速成网站建设

        服装网站建设

        餐饮网站建设

        珠宝首饰网站

        机械制造网站

        文化旅游网站

        家装建材网站

        美容化妆品网站

        数码产品网站

        模板案例库

        联系电话:0755-82560826 82538016 82560635邮箱:qin@198bona.com地址:深圳市福田区皇岗路5007神采苑402栋610
    • 网站推广
      • ";

        网站优化基础

        建站优化

        网站优化

        营销推广

        整站优化

        推广帮助

        谷歌搜索

        推广方案

        推广套餐

        推广技巧

        百度排名

        巧用微博推广

        直播视频网站推广法

        微信推广网站方法

        网站外链推广

        公共微信号推广

        网站优化闲谈

        常见问题

        公司资讯

        联系电话:0755-82560826 82538016 82560635邮箱:qin@198bona.com地址:深圳市福田区皇岗路5007神采苑402栋610
    • 网站制作资讯
      • ";

        网站制作

        外贸网站建设

        网站设计

        网站代运营

        深圳网站建设专栏

        深圳小程序开发

        网站改版

        APP开发

        网站建设方案

        安全维护

        软件开发

        平台搭建

        建站行业资讯

        域名注册

        虚拟主机

        企业邮局

        国外主机

        VPS独享空间

        免备案香港服务器

        如何解析域名

        联系电话:0755-82560826 82538016 82560635邮箱:qin@198bona.com地址:深圳市福田区皇岗路5007神采苑402栋610
    • 网站报价
      • ";

        网站报价

        建站方案

        联系电话:0755-82560826 82538016 82560635邮箱:qin@198bona.com地址:深圳市福田区皇岗路5007神采苑402栋610
    • 公司动态
      • ";
        联系电话:0755-82560826 82538016 82560635邮箱:qin@198bona.com地址:深圳市福田区皇岗路5007神采苑402栋610
    • 关注博纳
      • ";

        网站制作精英团队

        网站建设公司愿景

        公司介绍

        主营业务

        博纳文化

        加入博纳

        联系电话:0755-82560826 82538016 82560635邮箱:qin@198bona.com地址:深圳市福田区皇岗路5007神采苑402栋610
    • 联系我们
      • ";

        网站建设公司联系方式

        网站建设、网站制作公司乘车路线

        联系电话:0755-82560826 82538016 82560635邮箱:qin@198bona.com地址:深圳市福田区皇岗路5007神采苑402栋610
      网站制作资讯

      当前位置:

        主页网站制作资讯建站行业资讯网页设计公司对如何提高网站内容文本易读性排版的经验分享

      网页设计公司对如何提高网站内容文本易读性排版的经验分享

      发布时间:2017-09-21

      文章编辑:网站建设 文章来源:建站行业资讯 浏览量:次

       网站排版设计是ui设计师的基本功。但或许是因为它太基本了,很多时候很多设计师都会直接忽略它的存在,导致最后的实现效果不够理想。或许就是这些细节导致手中的产品看起来总是差那么一点点。尤其是对于一些注重阅读体验的页面来说,每一个细节都可能成为致命伤。

      艺术是无依据可循的,但是文字排版却是有依据可循的。下面就排版中的字体样式、留白大小、对齐方式、色彩对比度四个要素来简单谈一谈如何科学提高移动端文本的易读性,提升设计质感。

      网站建设大前提:明确网页设计目标

      所有的设计都必须在这个前提之下进行。以下提到的数值只是一个参考,更重要的是你想通过页面传递给用户的信息,明确设计目标,以此对你的设计进行调整。否则,设计的意义便不存在了。

      网页设计内容布局字体大小

      通过字体大小去凸显内容、区分层级是一种设计趋势,同时也是ios11 的设计思路之一。那么,如何去选择字体的大小能达到比较好的效果呢?

      material design对方块字主标题和内容文字的大小分别定为24sp和15sp,24/15=1.6,接近黄金比例;airbnb的主标题和内容文字的比例同样接近黄金比例。

      实际上黄金比例的字号对比在移动端是一个适合突出主题的比例,是一个“美”的比例,但并不一定是一种适合阅读的比例。一个以阅读为主的页面在字号选择上可能需要较小的比例,若是你在字号的选择上缺乏信心,也可以用一些工具进行辅助选择,比如Modular Scale(Adobe的排版负责人Tim Brown创建的工具),其中囊括了历史上最令人满意的几种比例关系,通过这个比例进行匹配至少可以保证不出错。

       

      网站制作之网站内容文字留白

      “留白”即在版面中留出空余的空间,处理好留白能使文本视觉流平顺,提升阅读舒适性。对于一篇文章而言,留白从小到大分别有文字中的空白、文字与文字之间的空白、行与行之间的空白、段与段之间的空白,留白面积的大小也要遵循这个顺序。

      网站内容行间距的设定:行间距的设定直接影响了视线从前一行末尾移动到下一行开头的难易。行间距过高导致视线分散,容易游离;行间距过小则容易影响视线的移动,让人找不到正在阅读哪一行。普遍认可的做法是将行高设置为1.5em-2.0em。在这个基础之上,字体样式、大小、行宽还会对行间距的设定有一定的影响。

      网页设计之内容编辑段间距的设定:段落与段落之间需要有一定的距离,如果这段距离过小,同样影响视线的移动,过大则容易导致上下文的联系变得松散。普遍做法也是将段间距设定为2.0em。

      网站制作技巧之内容对齐方式

      文本的对齐方式主要有四种:左对齐、居中对齐、右对齐以及两端对齐。一般来说,移动端文本的对齐主要采用的是左对齐或两端对齐,这里简要谈一谈这两种对齐方式的优劣。

      网页制作技巧之内容编辑时左对齐:代表应用主要是「豆瓣、简书、知乎」。左对齐容易造成右端留白过多,整体视觉失衡,但是这种对齐方式不破坏文字本身的起伏和韵律,能保证较好的阅读体验。

      网站建设技巧之内容编辑两端对齐:代表应用是「微信读书、部分微信公众号」。两端对齐可以保证段落文字整齐划一,成规整的块状,但是打破了文字和字间空白之间形成的韵律,阅读起来未必舒适。(特别是在大量使用英文的情境下)

      网页制作技巧之内容编辑对比度

      一个优质的页面需要有足够的文本对比度。对于阅读的内容来说,对比度过于激烈和过弱都是不利于阅读的,material design中推荐的文本对比度为7:1,最小值为4.5:1。

      前段时间我在产品的某个不知名的角落发现了这样一个页面,看起来不是十分舒适,文字和背景的颜色对比度太低。

      于是我开始探索有什么方法可以去科学地衡量这个对比度,而不是单纯凭靠感觉。最近终于发现有许多网站可以对色彩对比度进行检查。我用其中一个网站对这个页面进行了测试,可以看到它的文字对比度是3.96:1,除非加大字重,否则它就是不合格的。(所以,设计师的眼睛就是雪亮的啊)

      网站建设技巧之制定你的排版风格指南

      说了这么多,其实最重要的还是规范。制定一个团队中每个设计师都信服并且遵循的排版风格指南,来标准化团队设计师的文字。如果设计仅仅凭靠感觉,团队中每个设计师会有不同的感觉,最后做出来的页面也有五花八门的“感觉”,这是很可怕的。

      最后,优秀的设计还离不开设计师负责到底的精神。前文所提到的大小、间距、对比度,在前端和产品经理的眼里只是一个数值,他们并不知道一个数值的微小区别对一个页面来说会有多大的影响,可能会因为种种因素调整你的设计。所以,设计师必须用一丝不苟的精神对你的页面负责到底,这样才能最终产出一个充满设计质感界面。深圳网站建设博纳网络编辑整理。


      当前文章链接:/construction/jzhyzx/777.html
      上一篇:网页制作技巧之可视化如何解决炫酷的可视化界面? 下一篇:网站制作设计之2017网页设计师值得注意的趋势
      返回列表
      如果您觉得案例还不错请帮忙分享:

      [声明]本网转载网络媒体稿件是为了传播更多的信息,此类稿件不代表本网观点,本网不承担此类稿件侵权行为的连带责任。故此,如果您发现本网站的内容侵犯了您的版权,请您的相关内容发至此邮箱【qin@198bona.com 】,我们在确认后,会立即删除,保证您的版权。

      相关案例推荐

      • 纤纤瘦身行业网站建设作案例

        纤纤瘦身行业网站建设作案例

        行业网站

        纤纤瘦身行业网站建设作案例

      • 韩黎坤

        韩黎坤

        艺术/艺术家

        韩黎坤

      • 醇牛餐饮

        醇牛餐饮

        企业网站

        醇牛餐饮

      资讯分类

      • 网站制作
      • 外贸网站建设
      • 网站设计
      • 网站代运营
      • 深圳网站建设专栏
      • 深圳小程序开发
      • 网站改版
      • APP开发
      • 网站建设方案
      • 安全维护
      • 软件开发
      • 平台搭建
      • 建站行业资讯
      • 域名注册
      • 虚拟主机
      • 企业邮局
      • 国外主机
      • VPS独享空间
      • 免备案香港服务器
      • 如何解析域名

      最新发布

      • 移动端网站建设对传统企业带来哪些好处?
      • 深圳网站建设有哪些标准和规范?
      • 做好企业网站建设用户体验可从哪些方面入手?
      • 深圳做网站的公司建设购物网站的流程是怎样的?
      • 深圳网站建设:专业的营销网站建设具有哪些特征?
      • 深圳网站建设:成功的手机网站必有的特征
      • 企业为什么要搭建自己独立的电商网站?
      • 建站价格贵的就是属于高端网站建设吗?
      • 深圳做网站的公司从搭建网站到完成大概需要多久?
      • 企业网站建设做好,流量是关键如何获取?

      相关资讯

      • 网站建设从业人员的前景-网页设计师
      • 网站制作行业的前景与制作人员应具备的素质
      • 2017互联网行业的发展现状与前景
      • APP网站在当今互联网+的政策支持下做好三点
      • APP网站引擎优化九点建议
      • 再谈网站文章原创性对网站质量的影响。
      • 网站营运推广必须要仔细分析客户的行业现状
      • 搜索引擎快照是如何影响网站权重的?
      • 中小微企业如何利用互联网+快步向前
      • 一个电子商务网站平台的优化历程

      热门搜索

      • 公司网站建设
      • 企业网站开发
      • 商业网站制作
      • 网站代运营
      • 网站
      • 教育网站建设
      • 网站建设公司
      • 深圳app开发
      • 商城网站建设
      • 网站怎么制作

      Copyright © 2021 博纳网络 版权所有  粤ICP备17054727号

      • 🏠

        首页

      • 💬

        咨询

      • 📞

        通话

      • 📂

        案例

      • ⬆

        返回