IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

一样的页面,为什么英文排版起来就很好看?

Catherine • 2017-05-17 12:51 • 交互设计

想起之前有一个朋友私我说,想知道英文排版怎么设计?为什么同样的页面英文排版起来就很好看呢?想必大家也非常想知道吧?那么,下面我们就立马来分析分析,听完你们就会恍然大悟!

文章目录[隐藏]

  • 一、段落结构上的差异
  • 二、字体结构的差异
  • 三、排版规则的差异
  • 四、图形和文字的认知
  • 总结

想起之前有一个朋友私我说,想知道英文排版怎么设计?为什么同样的页面英文排版起来就很好看呢?想必大家也非常想知道吧?那么,下面我们就立马来分析分析,听完你们就会恍然大悟!

一样的页面,为什么英文排版起来就很好看?

一、段落结构上的差异

下面我们将拿出两段普通的中文字体和英文字体来进行对比,中文适用的是方正兰亭纤黑,节选自(结构思考力):

一样的页面,为什么英文排版起来就很好看?

好,我们来对比一下,这两个段文字,除去字体颜色,粗细等因素以外,他们有一些怎样的区别:

一样的页面,为什么英文排版起来就很好看?

1、英文的段落几乎每一个单词的长度都是不一样的,而中文的段落字体都是方方正正的这就导致了中文看起来缺少变化。

2、英文的篇幅普遍比相同意义的汉字的篇幅要多,在设计时,英文本身更容易成为一个设计主体,而且因为英文单词的字母数量不一样,在编排时,对齐左边之后,右边都会产生自然的不规则的错落,这在汉字编排时不太可能出现的,汉字编排每个段是一个完整的”块”,很难产生这种错落感。

3、同样的,在每一个字体上我们也能找出一些差异,英文的字体弧线多,看起来更动感更多变,而中文的比较刚硬显得有些死板。

二、字体结构的差异

一样的页面,为什么英文排版起来就很好看?

英文每一个字体所占的空间比例都差不多,而中文则是有多有少,一个太过饱满,一个留白太多。这个实际并不是说中文就比英文难看,而是在电子输入时候进行的统一字体规则,否则我们来看下面一张图:
一样的页面,为什么英文排版起来就很好看?

三、排版规则的差异

一样的页面,为什么英文排版起来就很好看?

我们能发现中文的标点符号占了一个字符的大小,这样看起来在每个字符的间距相同时,突然出现了一个更大间距的字符,会让人产生突兀感,但是如果中文的标点改成英文的又会如何?

一样的页面,为什么英文排版起来就很好看?

所以,左边的看上去比较拥挤,还是右边的更好一些

四、图形和文字的认知

以上三点,其实讲述还是中英文在字体和段落上的差异,但归根究底,到底让人们觉得英文比中文好看的最重要的因素是:人们对于不了解字符的图形化解读。一般的,在人们的认知中:图形的美观程度>字符的美观程度。

一样的页面,为什么英文排版起来就很好看?

是不是感觉右边的是山寨的?没错,当你第一眼看上去,右边的图片告诉你的是“苹果”,你能第一反应知道这个词的意思,就是那种可以吃的苹果啊,对不对?一点都没有可以思考的空间,和想象的空间。

而第一幅图不一样,你看到Apple,你会想到Apple公司,Apple手机,ipad,他们的企业文化,高度设计感的产品,昂贵的手机价格等等。而我们把第一眼无法看透的文字都当做图形来处理了。

一样的页面,为什么英文排版起来就很好看?

另外,我们能发现,无论国内和国外的大品牌,他们都使用了自己的语言文字来做logo,但是他们都讲字体进行了设计,让人无法第一时间解读出来,否则会让人感觉更廉价。

一样的页面,为什么英文排版起来就很好看?

另外就是中国人喜欢英文感觉逼格高,是觉得英文对于我们来说更像图形,而中文对于外国人来说也同样是图形,就像很多外国人,他们在身上纹的文身,其实是不知道什么含义,只知道这个“图形”很好看。所以,人类对于自己未知的东西也总是有一种好奇,一种向往的。

总结

现在大家应该明白原因了吧?

其实博大精深的中文并不比英文逊色,只是在使用的场景不同下各有优劣势,上下五千年的历史文化底蕴而演变出来的文字怎是这么简单的对比就能分清孰上孰下的。

然而我们对中文的排版设计还知之甚少,更无法将中文的字体设计表达的淋漓尽致,所以会导致一个错觉:英文排版(字体)比中文排版(字体)好看。

下面欣赏几张国内电影海报来,看看他们是怎么做中文字体排版:

一样的页面,为什么英文排版起来就很好看?

一样的页面,为什么英文排版起来就很好看?

 

作者:Yjjj,公众号:shejishiyj(UI设计狮联盟)

本文由 @Yjjj 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/27362/

logoUIUI设计UXVR中英文差异产品产品经理场景字体字体设计排版设计设计转载
赞 (0)
CatherineCatherine
0
生成海报
巧用9大服装穿搭技巧,助你轻松搞定专题页设计!
上一篇 2017-05-17 11:50
如何设计可交互的email,调动用户的参与感?
下一篇 2017-05-17 13:48

相关推荐

  • 从“注意力”的角度谈体验设计如何避免入坑

    作者:挪小辣(用户体验设计师 @UIMax公司)   前段时间UIMAX团队在做“新浪新闻客户端用户画像项目”时,用研人员访谈用户的过程中,发现一个这样的问题:多数用户完全没注意到过页面上的“长按可排序或删除”这段文字…

    交互专题 2023-03-03
  • 交互设计控件之按钮设计 从零开始学交互

    交互设计控件之按钮设计

    ♝点击上方“交互设计学堂”关注我们,送电子书一.主按钮和次按钮很多按钮是成对出现的,比如“确定”和“取消”。一般情况下,按钮会有主次之分,一个按钮是我们期望用户去做的,另一个按钮是在特殊情况下才去做的。主次按…

    2017-08-04
  • 从实际案例出发,说说交互文案设计的几个原则 交互设计

    从实际案例出发,说说交互文案设计的几个原则

    想必大家都见过下图所示的著名的“交互文案”反例吧?如果文案写成这样,无论设计师在文案出现方式、时机等方面再怎么优化,这也不可能成为一个合格的设计。因为“看起来重复、读起来绕口、理解起来更是云里雾里”的文案很难让用户获得良好的阅读体验和使用体验。

    2017-05-24
  • D4-交互设计工作困惑答疑

    作者:飞阿婷(公众号:飞阿婷的交互设计生活)自我成长1.面试攻略为什么强调说,不能把自己的不足归咎于之前公司没给自己带来很大成长?抛开你有推卸责任的人品问题来说,其实还有科学依据证明很多事情都是可以事在人为的。费斯汀格法则:“生活中的10%是由发生在你身上的事情组成,而另外的90%则是由你对所发生的事情如何反应所决定。”我的理解是那10%就是不受我们控制的自然发生的事情,而90%就是我们面对这10%的事情选择接下来要做的事情,而这个选择...

    微信热点 2018-04-12
  • 交互体验设计的新思路——聊天机器人(Chatbot) 交互设计

    交互体验设计的新思路——聊天机器人(Chatbot)

    本文作者将阐述了他眼中聊天机器人的优势所在。用户将更多的时间放在通信app中(比如微信),而不是社交app中(比如微博)。通信app逐渐变成一个平台,聊天机器人的介入则帮助聊天用户触达更多的服务。

    2017-04-30
  • Axure案例-联想输入提示,Axure中继器的使用

    点击右面下载:axure-case-https://www.iamue.com 不多说了,源文件分享,使用Axure打开编辑可以查看原理。 日安 转载的童鞋带上:木卫艾欧网-交互学堂》 Axure案例-联想输入提示,Axure中继器的使用 

    IxD案例 2015-02-04
  • 微信热点

    【用户体验】Chiphell论坛网友Raise3D N2打印体验实录

    以下是来自Chiphell论坛的一位@xm79 网友的使用Raise3D N2 3D打印机后的体验分享帖。让你看到Raise3D N2 3D打印机最真实的一面。之前用了好一阵工作室的makerbot 之后,也想着买一台自己的。主要每次打都要排个队,十分麻烦。而且每到出图季就要没日没夜的看守在打印机旁,通宵不起了。思量着买一台放家里吧。本来考虑着买makerbot的,因为速度是真的快,软件算法比用ultimaker系的快了一倍。但是问题就...

    2018-02-05
  • 三款备孕育儿类APP简单分析 (多图慎入) 交互设计

    三款备孕育儿类APP简单分析 (多图慎入)

    2015年,母婴类APP可以说是百花齐放,各种各样的产品竞争激烈,但是还没有出现寡头,窗口期依然还在。刚好下午在准备一家母婴类公司的招聘,简单体验了几款备孕育儿类产品,和大家一起分享一下。 产品简介 体验的产…

    2016-03-06
  • 淘宝UED的设计流程 交互设计

    淘宝UED的设计流程

    国内知名 UED 团队的设计流程是怎样的? 淘宝 UED 的设计流程图 <img src="https://pic4.zhimg.com/75bcc954c5e1695eeeeb1710eb62c947_b.jpg" data-rawwidth="4000" data-rawheight="1678" clas…

    2016-06-01
  • 交互设计

    【干货】Axure产品原型在手机上运行的完整教程

      图1 模拟丁香园的高保真原型   在一般的开发工作之前,我们通常会设计产品原型,大部分为axure绘制的线框图作为产品的PRD文档,供UI和开发进行前期工作,但是有的时候客户、领导想在开发之前,看到产品的概貌…

    2014-11-26
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress