原因是我们在使用这两种设备时的观看距离不同，桌面端我们的眼睛离屏幕较远，而在移动端则相反，因此我们应该在移动端使用较小的字号反差。
栅格系统
小屏幕上，一些桌面端无关大雅的间距不等问题会变得突出。
Lofter是网易一款精品优雅的App，但其文章正文界面却略有瑕疵：
可以看到段落右侧与卡片的间距明显大于左侧。造成这个问题的原因是设计时对文本框的宽度与文字大小之间在关系考虑不周全，导致文字并不能完美地填充满文本框。
上图为iPhone5中此界面的放大效果并加上了辅助线，仔细观察，去除黄色部分各20px的间距后，文本框宽度是558px，而正文使用的字号是30px，所以行末留下18px的空余空间。如果字号定
为31px，则刚好可以放下18个字后填满558px像素的文本框。
当然31px的字号在实际环境中可能并不是一个最合理的字号设定，因为它并不能被整除使用到@1x 的iOS开发环境。在实际设计中，可以先设定一个栅格系统，以iPhone5为例，定义最小栅格
为8x8px的话，得到如下一个栅格图：
以8为基本单位，把所有字号、文本框宽度设定为8的倍数，这样我们就可以确保汉字始终保持对齐。
对齐
“…所有的元素都是正方體。但是從二十世紀開始使用標點後，到了現代桌上出版時代，許多排版工具軟體都直接套用來自日本的「禁則處理」—即避頭尾點；加上與西方文字混排的狀況越來越多，以至於無法做到縱橫對齊的基礎。但是至少段落的頭尾還是需要對齊。這就是為什麼對齊對電子書與長文章來說十分重要的原因。”
——董福興《簡單做好中文排版》
在英文的段落排版中，通常是左侧对齐，而让右侧自然形成起伏边（rag）。对中文排版与阅读习惯而言则相反，段落的头尾对齐尤其重要。
先来看一个反例：
这是Z aker的新闻正文的表现，在夹杂了数字或英文字母字符的情况下，原本中文的整齐排列被打乱了，右侧严重参差不齐，非常难看。
看看同一篇文章其它App是怎么处理的：
左边是网易云阅读，右边是网易新闻。两者的处理方式类似，都是通过程序的设置，微调文字的间距以补足右边存大的空白，区别是当标点出现在行末时，网易云阅读将标点外置，而网易新闻将标点放在了内部。
文字的对齐方式，可以用简单的代码实现：
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中常见的段落文字对不齐，对不准的老问题。
后记
以上是实际工作中的经验总结，移动平台、硬件设备、字体本身都在不断变化，相应的设计方法也不会永远一成不变，但总的原则是不变的，那就是让内容更易读。
作者：poorfish
原文地址：https://www.doczj.com/doc/0b17689515.html,/detail/72212.html
人人都是产品经理（https://www.doczj.com/doc/0b17689515.html,）中国最大最活跃的产品经理学习、交流、分享平台
二十个文字排版技巧教程 文字排版设计是平面设计中最重要也是最能打动人心的设计要素之一。无论你的设计水平处于哪个阶段，文字排版准则对于提升你的设计能力都非常有帮助。试着了解字体设计相关的资料，例如一个特定字体的起源或者是一个字体的结构，因为这样做可以扩大你的知识面。当你真正掌握了字体排版的方法，你的潜在客户会对你更加钦佩。当然，作为一名设计师，了解字体排版设计的来龙去脉也是职责所在。一旦你掌握了其中的方法，对于字体排版简直轻而易举！ 同所有的技能或职业一样，对于文字排版，你需要学习特定的规则和指南,才能充分提升和扩展你的技能。这里有20个关于排版的经验，是排版艺术的重要原则。 1.学习基础知识 第一步，学习文本排版更有效的方式是掌握排版艺术的本质。如果你是排版设计的新手，可能认为字体排版就是简单的练习就可以了。事实上，排版设计是很复杂的技能，因为它是艺术与科学的结合。 一个文本排版设计作品由特定的元素组成，经过精确的测量，同时需要考虑并采用设计规范进行设计。就像不同的设计形式，只有你完全掌握之后才能打破现有的规则。同时只有你确定表达了排版设计中的重要意义，排版的形式才会被用户接受。 为了能够更好的掌握排版设计的基本技巧，你需要多学习多了解排版设计艺术。 2.注意字体表达的含义
字体的选择并不是一个随机过程。仅仅通过搜索你的字库选择 喜欢的字体，很少能得到一个满意的结果。这是因为用户的心理更倾向于有特定意义的字体样式。 在设计过程中，你应当确保你的字体样式符合用户使用习惯。 这不仅仅意味着你选择的字体是经过完美设计的，更要保证你设计中使用的字体是符合市场营销需要的。 你不会将精心设计的彩色字体应用于一本律师事务所的小册子，对么？其实它更适合用于生日宴会请帖的设计。 3.理解字间距 草率的字间距调整是设计工作中的大忌。不用多说，这个关键 的技能你应该尽快搞定。 字体间距微调整可以使人物角色到产品的转变更合理，更统一。这听起来好像不那么重要，但是一个优秀的字间距调整工作可以成就一个完全不同的设计。字间距调整的主要目标是确保每个字符之间的空间美学，创建优美的文本序列。 同时，就像AdobeIllustrator之类的软件只能提供字间距调整过程中自动修复错误的功能。这些错误往往是很微小不易察觉的，尤其是在长句子或段落中。但是对于标题或者标志来说，一个糟糕的字间距调整可以瞬间毁掉整个设计作品。 4.限制字体使用的种类 设计师在进行字体排版设计过程中，尤其是新手设计师，常见 的错误是使用太多的字体和设计风格。如果你需要使用不止一种字体，
原因是我们在使用这两种设备时的观看距离不同，桌面端我们的眼睛离屏幕较远，而在移动端则相反，因此我们应该在移动端使用较小的字号反差。
栅格系统 小屏幕上，一些桌面端无关大雅的间距不等问题会变得突出。 Lofter是网易一款精品优雅的App，但其文章正文界面却略有瑕疵： 可以看到段落右侧与卡片的间距明显大于左侧。造成这个问题的原因是设计时对文本框的宽度与文字大小之间在关系考虑不周全，导致文字并不能完美地填充满文本框。
上图为iPhone5中此界面的放大效果并加上了辅助线，仔细观察，去除黄色部分各20px的间距后，文本框宽度是558px，而正文使用的字号是30px，所以行末留下18px的空余空间。如果字号定 为31px，则刚好可以放下18个字后填满558px像素的文本框。 当然31px的字号在实际环境中可能并不是一个最合理的字号设定，因为它并不能被整除使用到@1x 的iOS开发环境。在实际设计中，可以先设定一个栅格系统，以iPhone5为例，定义最小栅格 为8x8px的话，得到如下一个栅格图：
以8为基本单位，把所有字号、文本框宽度设定为8的倍数，这样我们就可以确保汉字始终保持对齐。 对齐 “…所有的元素都是正方體。但是從二十世紀開始使用標點後，到了現代桌上出版時代，許多排版工具軟體都直接套用來自日本的「禁則處理」—即避頭尾點；加上與西方文字混排的狀況越來越多，以至於無法做到縱橫對齊的基礎。但是至少段落的頭尾還是需要對齊。這就是為什麼對齊對電子書與長文章來說十分重要的原因。” ——董福興《簡單做好中文排版》 在英文的段落排版中，通常是左侧对齐，而让右侧自然形成起伏边（rag）。对中文排版与阅读习惯而言则相反，段落的头尾对齐尤其重要。 先来看一个反例：
字体设计的排版布局技巧 常常说，艺术是相通的。将文字排版与音乐结合起来，用视觉化的音乐和文字排版相结合，会让我们的字体排版更容易组合，更能体现我们的设计情感。 将普通的文字赋予音乐的艺术形式，将文字排版赋予听觉的美感和视觉的美妙，更容易传递信息，表达其深层次的涵义。 当音乐响起时，电脑播放器里变化雀跃的频谱图，音响喇叭发生震动产生的声波，跳动的五线谱和乐器发生引起的变化图(A-01)，都是我们体现情感的视觉化形式。 将文字排版用一个视觉化音乐的片段体现出来，从视觉上形成高度错落、疏密聚散、轻重缓急的效果，就具备了曲调的功能。 而一个优秀的字体排版设计，则成为一段具有节奏和韵律的音乐，我们可以理解为是一首凝固的音乐。 字体排版设计中，点线面结合成的设计群体，高低错落、疏密聚散，是构成形式美的重要因素。26个英文字母，根据字体的粗细设定节点组合，每个单独的字母就构成了音符。 如图(B-01)，大写的I=1个长节点，O=4个长节点;如图(B-02)，小写的a=3个短节点，b=1个长节点+2个短节点。
字体排版设计的韵律美表现在重复上：可以是间距不同、形状相同的重复;也可以是形状不同、间距相同的重复;还可能是别的方式的单元重复。这种重复的首要条件是单元的相似性，或间距的规律性;其次是节奏的合逻辑性。 使用基本的字体和字号，在不进行其他特意变化的情况下，根据文字本身的特点进行调整，使文字排版在横向上和纵向上都产生客观自然的韵律变化，使字体排版的律动更加连贯顺畅，赋予设计师所想体现的情感，如同音乐的曲风。 如图(D-01)字体相同，不同字号，不同粗细，不同颜色，形成效果不同的韵律。节点的粗细间距都可以给人不同的韵律感，欢快的、稳重的、活泼可爱的还是紧张舒缓的，更由于韵律的不同而有更明显的对比。 案例分析： 图(D-02)，文字采用大写，以单词的间距为节奏，字号大小进行对比形成韵律的强弱，文字排版理性而有秩序，由细微的韵律引导，突然变化成强烈的声调，主题震撼，醒目突出。
文字与图片的几种排版用法 常常有朋友问我怎么在图片左边和右边插入文字和在图片加上文字，现在简单的跟大家说一下： 1把图片放在文字的左边： 在图片右边写文字的源代码： P IMG height=201 hspace=30 src=" 图片连接地址"width=154 align=left border=0 FONT face=Arial 你要输入的文字/FONT/P height=是图片高度,width=是图片宽度,hspace=是与文字之间的距离，可以自己调整数值， 2把图片放在文字的右边 在图片左边写字的源代码： P IMG height=201 hspace=30 src=" 图片连接地址"width=154 align=right border=0 FONT face=Arial 你要输入的文字/FONT/P height=是 图片高度,width=是图片宽度,hspace=是与文字之间的距离，可以自己调整数值 3图片上写字代码 DIV/DIV DIV alig n=ce nter TABLE height=300 width=400 TBODY TR TD style="BACKGROUND-POSITIONsenter center ；BACKGROUND-REPEAL repeat"vAlign=center align=middle background= 图片地址FONT color=#ff0000 文字BR文字/FONT BR/TD/TR/TBODY/TABLE/DIV DIV/DIV
实例: 看到现在页面的效果了吗？让图片和文字左右分开排列，有的时候真的是很需要这个效果。其实处理起来很简单，使用一小段代码就可以了。 代码：img src="图片地址"align="left" 用法：在"显示源代码"状态下（打勾）粘贴上面的代码一一用你的图片地址代替上面的文字一一恢复到正常编辑状态一一在图片另一侧编辑文字。 如果你想把图片放在文字的右侧，可以用这个代码：img src="图片地址 "alig n="right" 有的图片比较大，用起来不方便，所以我改了一下代码，可以更改图片的 大小，代码是这样的：img src="图片地址"width=250 height=200 alig n="left" 红色的数字可以根据自己的需要更改。 一、在任意图片上写字的代码： 1、首先将要在上面写文章的图片上传，得到URL地址，然后将得到的URL 地址带入到以下代码中 TABLE width=650 cellSpaci ng=1 cellPadd in g=1 bgColor=#005F01 border=1 TBODY TR TD backgrou nd= 蓝色：为图片地址粉色：为图片宽度绿色：为框的颜色代码（不需要框，将 1改为0） 2、将鼠标放在图片上按"回车键"任意选择长度，直接复制图片在底图上。 3、再设定文本框在图片里，设定文本框宽度，在文本框里直接书写文章。
杂志文字排版技巧 B 、字体的设置：字体的问题牵涉很广，由于篇幅有限，在这里我也只能简短介绍一些实践过程的经验与大家共勉。 首先要明白的一点就是：不同的字体有着不同的性格和气质，也就是说字体是有生命的。许多设计师对使用字体很迷茫，不知道什么情况下该使用什么样的字体，其实这就是没有去真正关注字体性格的结果。现在电脑上的字库五花八门，基本上我们所需要的字体在里面都能找到，但似乎选择的余地越大情况却越糟糕，各种字体出现在不应该出现的场合已是司空见惯！ 所以我们要学会 区分各种字体的适合范围，一个基本原则就是字体的气质与版面的气质是否吻合？ 比如说楷体， 楷体是一种非常经典的字体， 经过一千多年文明和无数书法大师的不断锤 炼，已经非常成熟了，每一个字都经得起推敲，具有很强的文化气质， 因此在做具有文化感 和传统味的设计中可以使用。 宋体也是一种历经几个朝代的字体， 被前人们修饰得无可挑剔， 端庄秀丽， 有贵族气质， 还有仿宋体，刚柔结合，精致细腻，很唯美的字体。黑体是一种现代字体，刚挺稳重，有力量感， 很醒目， 但稍嫌笨重粗糙，但后来发展出来的等线体却非常精致耐看，很有现代小资 的感觉，低调却不粗俗，且自成一派。 但有些字体在设计中却尽量少用或避免使用， 比如文鼎的新字库里面的稀奇古怪的字体， 非常粗俗，层次很低，然后就是综艺体、中行书、隶书之类的电脑字体，粗糙难看，气质很差。 真正经得起推敲的几种字体是：宋体（标宋、书宋、大宋、中宋、仿宋、细仿宋）、黑 体（中黑、平黑、细黑、大黑）、楷体（中楷、大楷、特楷）、等线体（中等线、细等线）、圆黑体（中圆、细圆、特圆），这些字体是一些标准的基础字体，虽然普通却很耐看，一般内文都使用这些字体。 当然， 也有一些未列入进来的好字体， 比如方正繁秀丽体和汉鼎的繁黑变， 我就觉得非 常不错。 好的字体要用好的表现方式， 对于每一种字体的挑选， 一定要根据版面传达的内容和气 质进行对照选择， 不要带有个人喜好，
文字排版运用方法和技巧 林晨/ 24 十月, 2012 偶然间看到这篇关于文字排版设计技巧的文章，觉得写的很好。虽然对于设计很业余，但是一直喜欢，特别是图片与文字的设计，特转载分享、学习和研究。 文字是人类文化的重要组成部分。无论在何种视觉媒体中，文字和图片都是其两大构成要素。文字排列组合的好坏，直接影响着版面的视觉传达效果。因此，文字设计是增强视觉传达效果，提高作品的诉求力，赋予版面审美价值的一种重要构成技术。 在这里，我们主要谈谈在平面设计中文字设计的几条原则，以及文字组合中应注意的几点。特别提醒一下，这部分工作应该是人脑完成的工作，电脑是无法代替的。 下面我们分别从以下几个方面具体讲述文字排列在平面设计中的运用，各小节都配有生动精彩的图例剖析。（注：本文所有引用的图片均为其作者版权所有，除研究、学习以外，不得 挪做他用，特此声明！) 1.提高文字的可读性设计中的文字应避免繁杂零乱，使人易认，易懂，切忌为了设计而设 计，忘记了文字设计的根本目的是为了更有效地传达作者的意图，表达设计的主题和构想意念…… 2.文字的位置应符合整体要求文字在画面中的安排要考虑到全局的因素，不能有视觉上的冲突。否则在画面上主次不分，很容易引起视觉顺序的混乱，有时候甚至1个像素的差距也会改变你整个作品的味道…… 3.在视觉上应给人以美感在视觉传达的过程中，文字作为画面的形象要素之一，具有传达感情的功能，因而它必须具有视觉上的美感，能够给人以美的感受…… 4.在设计上要富于创造性根据作品主题的要求，突出文字设计的个性色彩，创造与众不同的独具特色的字体，给人以别开生面的视觉感受，有利于作者设计意图的表现…… 5.更复杂的应用文字不仅要在字体上和画面配合好，甚至颜色和部分笔画都要加工，这样才能达到更完整的效果，而这些细节的地方需要的是耐心和功力……
设计移动端报表， 你不得不知道的五个原则 随着移动互联的飞速发展，手机成为人们工作、生活中必不可少的工具，移动端报表被越来越多的企业所重视。数字化转型过程中，企业总少不了对移动端报表的需求。 数钥分析云，除了支持PC端、大屏，也支持移动端查看，可以快速集成到企业微信、钉钉、致远M3中，让用户随时随地查看报表，实时掌握企业数据，辅助企业经营。 我们在搭建或规划移动端报表时，常常会遇到一些问题： ?手机屏幕小，如何呈现核心业务指标？ ?布局固化，想要更多的布局交互模式… ?视觉效果不好，追求“高颜值”移动报表… ?指标太粗，看不出问题出在哪… ?指标太细，又看不到整体情况… 其实，我们仔细看这些问题，无非就是两点： 1、美观的需求：充分结合移动端的特点和产品优势，进行合理布局，凸显关键指标信息，合理美化，提高报表的美观度； 2、业务的需求：除了精美的外表外，更重要的是把控业务需求，在有限的屏幕范围内，呈现核心指标，指标粗细结合，全面展现业务状态。 所以，在做移动端报表时，我们要综合移动端特点、业务诉求和分析云产品优势，做出一张符合需求的移动端报表。
设计移动端报表原则： 1、基本元素，简单明了 移动端报表，主要以图表呈现，图形在信息的传递上具有更好的呈现效果。所以，合理使用图表，达到信息传递的效果。分析云移动端支持表格、柱状图、折线图、饼图、仪表盘…等各种图形，能够满足用户分析需求。 2核心数据，一目了然 1、移动端报表，最核心的元素置顶呈现，可以采用指标呈现，数字的表达更加醒目、简洁，且占用空间少，是最直接展示方式。
2、可以通过设置前景色、背景色的变化实现预警，让异常指标展现更加一目了然。 3、尽量在一屏内展现完整数据，减少滚屏的出现，如果表格较大，展示的数据较多，分析云也支持锁定前N列功能或横屏查看，保障用户清晰的看到数据内容。 3、布局清晰，条理性强 与PC端报表不同，移动端报表的呈现形式主要是竖排展现。想要更多的布局交互模式，那就少不了分析云的分段器。 分析云的分段器，可以帮助用户快速实现视图的切换，满足沉浸式阅读需求，大大方便了用户的应用。
文字是人类文化的重要组成部分。无论在何种视觉媒体中，文字和图片都是其两大构成要素。文字排列组合的好坏，直接影响着版面的视觉传达效果。因此，文字设计是增强视觉传达效果，提高作品的诉求力，赋予版面审美价值的一种重要构成技术。 在这里，我们主要谈谈在平面设计中文字设计的几条原则，以及文字组合中应注意的几点。特别提醒一下，这部分工作应该是人脑完成的工作，电脑是无法代替的。 下面我们分别从以下几个方面具体讲述文字排列在平面设计中的运用，各小节都配有生动精彩的图例剖析。 1．提高文字的可读性 文字的主要功能是在视觉传达中向大众传达作者的意图和各种信息，要达到这一目的必须考虑文字的整体诉求效果，给人以清晰的视觉印象。因此，设计中的文字应避免繁杂零乱，使人易认，易懂，切忌为了设计而设计，忘记了文字设计的根本目的是为了更好，更有效的传达作者的意图，表达设计的主题和构想意念。 举例如下 让你想表达的内容清晰，醒目。让阅览者一开始就可以明白你的意思 避免使用不清晰的字体，否则容易使阅览者产生反感和麻烦（除非你需要这种效果） 恰当的选择你所需要的字体 但是，经过特别的处理，你可以使用一些本来并不合适的字体，比如
注意文字在编排时的方向，注意安排阅览者的视线 如果： 那么，你可以做成这样 或者是这样也可以 最后一点，通常情况下，你应该 2．文字的位置要符合整体要求 文字在画面中的安排要考虑到全局的因素，不能有视觉上的冲突。否则在画面上主次不分，很容易引起视觉顺序的混乱。而且作品的整个含义和气氛都可能会被破坏，这是一个很微妙的问题，需要去体会。不要指望电脑能帮你安排好，它有时候会帮你的倒忙。细节的地方也一定要注意，1个像素的差距有时候会改变你整个作品的味道。 举例如下:
Word长篇文档排版技巧（一） 市场部经常要出各种分析报告，一写就是洋洋洒洒几十页。文字功底深厚的小王写东西自然不在话下，然而每每困扰他的却是排版的问题，每次都要花大量的时间修改格式、制作目录和页眉页脚。最头疼的是上司看完报告后让他修改，整篇文档的排版弄不好就要重来一遍。制作目录也是出力不讨好的事，尽管小王知道Word中有插入目录的功能，可是尝试了几次就弃之不用了，原因是系统总是提示有错误。现在只能手工输入目录，加班加点数页码居然成了家常便饭。为了让自己有时间下班后享受生活，小王花了半天的时间学习了一下长篇文档的排版技巧，这才发现，这半天的时间，可以让他享受无数个闲暇的傍晚和周末。 小王把自己的体会重点总结为两点： 1.制作长文档前，先要规划好各种设置，尤其是样式设置 2.不同的篇章部分一定要分节，而不是分页 下面就看看他是怎样用新学的技巧制作一篇几十页的长文档的。 单面打印的简单报告 这份报告要求的格式是：A4纸；要有封面和目录；单面打印；除封面和目录外，每页的页眉是报告的题目；页码一律在页面底端的右侧，封面和目录没有页码，目录之后为第1页。 设置纸张和文档网格 写文章前，不要上来就急于动笔，先要找好合适大小的“纸”，这个“纸”就是Word 中的页面设置。 从菜单中选择【文件】|【页面设置】命令，显示“页面设置”对话框，选择【纸张】选项卡，如图1所示。
图1 选择纸张 通常纸张大小都用A4纸，所以可采用默认设置。有时也会用B5纸，只需从“纸张大小”中选择相应类型的纸即可。 很多人习惯先录入内容，最后再设纸张大小。由于默认是A4纸，如果改用B5纸，就有可能使整篇文档的排版不能很好地满足要求。所以，先进行页面设置，可以直观地在录入时看到页面中的内容和排版是否适宜，避免事后的修改。 考虑到阅读报告的领导年龄都比较大，对于密密麻麻的文字阅读起来比较费力，还可以调整一下文字。通常，很多人都采用增大字号的办法。其实，可以在页面设置中调整字与字、行与行之间的间距，即使不增大字号，也能使内容看起来更清晰。 在“页面设置”对话框中选择“文档网格”选项卡，如图2所示。
2014年移动端界面设计分析 移动互联网时代的悄然袭来改变着我们的生活方式，因此有大批设计力量涌入了移动端的设计领域中，这也说明了大家越来越重视用户在各个设备终端层面的体验。在规划产品时，往往会把PC端和移动端的产品放在同等重要的地位进行思考。然而，设备的多样性和产品形态的多样性为设计师们带来的既是更多的发挥空间，也同样是更大的挑战。这些产品在设计之间有何不同？如何规划不同平台上产品的功能？设计时有哪些差异？2014移动端的界面设计是非常值得探讨的话题。 1.唯一主色调 2014年，追求极简设计风格，主色调可能只是选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，从而产生新的色彩，这样能够很好的表达界面层次、重要信息，并且展现良好的视觉效果。这样的页面看起来色彩统一，有层次感。当前上线的一些移动应用都采用极少的色彩，甚至放弃所有的颜色。仅仅用一个主色调就能展现良好的视觉效果。 2.多彩色风格设计 Metro引领的多彩色风格是与唯一主色调形成对照关系的设计风格，多彩撞色更多的表现于多种纯色块的使用，就是很简单的纯颜色，只需要注意多彩配色的方式，就能得到很好的视觉效果。多彩色拼接的设计风格，一屏式的页面排版布局，总体来说是时尚大气简洁的设计。“多彩撞色”的概念，在2014年手机端仍会继续发展。
3.信息框架扁平化 在设计的表现形式上我们追求界面扁平，注重通过弱化视觉效果来强化应用的功能。在移动设备上，过多的层级会使用户失去耐心而放弃对产品的使用。而且移动端上页面小，没太多地方摆多层的tabs导航或者面包屑导航，就只剩下左上角的一个“返回”按钮作为导航了，可以一次接一次的深入，但跳转了三、四次后，再看左上角的“返回”按钮，你已经很难判断出将会返回到哪里了。应该从信息架构角度，再进一步的去应用扁平化的设计理念，信息框架扁平化的目的是减少信息层级，追求信息到达用户的最短距离，从根本上解决上述问题。扁平化思想是一种让设计者在界面设计过程中减少信息层级的思想。 4.动态数据可视化 数据可视化设计是将枯燥繁琐的列表和文字转换为直观的饼图、扇形图、折线型、柱状图等丰富直观的设计元素，提高用户体验。而且现今数据可视化不只是静态展现数据，用户希望通过互动及时获取数据流，若以动态效果来呈现，能多维度呈现给用户实时信息，同时能与用户形成互动，提高数据表现的趣味性。动态数据可视化将更加强调数据转译实时更新的图形，以及动态的图形化表达。
提高文字排版速度的几个小技巧（个人心得） 1、熟练使用几种常用快捷键 初级： Ctrl+N 新建文件 Ctrl+O 打开文件 Ctrl+W 关闭文件 [F12]键：另存文件 Ctrl+B 字体加粗 Ctrl+U 加下划线 Ctrl+I 字体倾斜 中级： [ctri+Enter]：插入分页符 [ctri+ shift+C]：复制格式 [ctri+ shift+V]：粘贴格式 Ctrl+D 调出“字体”窗口 [ctrl+L]：左对齐 [ctri+R]：右对齐 [ctri+C]：居中 Alt+O+P 调出段落窗口 shift+Enter 插入换行符（非段落符号） 2、对于文档比较乱，空格，空段落比较多的，除了使用替换功能，还可以使用
“文字工具“对文章整体进行编排。 3、关于m2,，m3上标下标的运用 4、WORD里面图片太多，反应太慢，可以双击图片调出“设置对象格式”窗口，点“图片”对话框，点“压缩”，“应用于文档中的所有图片”，更改分辨率为“打印”模式，确定即可。 5、文档中的表格 *有时表格比较长，要从中间断开分成两部分，可用快捷键ctri+ shift+Enter。 *一个跨页的表格如果想让标题在每页都显示，可以调出“表格属性”对话栏（双击表格左上角的十字标），在“行”对话栏里，勾选“在各页顶端以标题形式重复出现”（下面的“上一行”“下一行”可自行选择需要显示的标题）*表格整体高度和宽度的调节，还是调出“表格属性”对话栏，需要调节行高的在“行”对话栏里，在指定高度里填上数字（开始可填数多次调整），“行高值”里面有一个最小值一个固定值，选择“固定值”就是你设置多大尺寸表格就变多大尺寸，不会以你表格内容多少自动调节（固定值太小，有些多行的内容可能显示不出来），选择“最小值”就是你的表格能缩小到最小值就按最小尺寸，缩不到就按能放下内容的最小高度设置。（列宽设置同理）*在WORD里的表格增加行列的自由度感觉比EXCEL强，这个主要就是依靠“表格样式”里的“绘制表格”，想在哪里添加表格就拉一下就行,想删掉那个就用“擦除”按钮。
【总结】移动应用界面设计的尺寸设置及规范 时间2014-05-04 15:15:07 青溪·札记 原文appdesign-sizesetting/ 主题用户界面设计移动应用 刚接触移动应用的界面设计，最先跳入脑海的疑问是：画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？ 本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索，来分享移动应用界面设计中的尺寸规范等问题，希望能给移动端的新手设计师些许指引。若有不当之处，欢迎斧正。 一、android篇 1、android分辨率 Android的多分辨率，一向是设计师和开发者非常头疼的事儿。尽管如此，对于多分辨造成的复杂问题，也是大家要优先解决的。Android支持多种不同的dpi 模式：ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi 注意，ppi、dpi 是密度单位，不是度量单位： * ppi (pixels per inch)：图像分辨率（在图像中，每英寸所包含的像素数目） * dpi (dots per inch)：打印分辨率（每英寸所能打印的点数，即打印精度） dpi主要应用于输出，重点是打印设备上；ppi对于设计师应该比较熟悉，photoshop画布的分辨率常设置为72像素/英寸，这个单位其实就是ppi 。尽管概念不同，但是对于移动设备的显示屏，可以看作ppi=dpi 。 ppi的运算方式是：PPI = √（长度像素数2 + 宽度像素数2） / 屏幕对角线英寸数。即：长、宽各自平方之和的开方，再除以屏幕对角线的英寸数。 以iphone5为例，其ppi=√（1136px2 + 640px2）/4 in=326ppi（视网膜Retina屏） 对于android手机，一个不确切的分法是，720 x 1280 的手机很可能接近 320 dpi （xhdpi模式），480 x 800 的手机很可能接近 240 dpi （hdpi模式），而320 x 480 的手机则很接近 160 dpi（mdpi模式）。
先有感而发一下： 好久没有分享技巧类文章了，我都怀疑自己是不是计算机专业了，也许像我这样游离于养猪业的理工科生算得上另类吧！ 在学校，作为电脑技术型人才，人们是不可能拿什么人生大问题来与咱讨论的，被人问得最多的自然就是电脑上面各种各样稀奇古怪的问题，咱们当然不能那么容易就被问倒了。可以说，每一个技术控者都有自己的能手绝活，在他们面前，所有的问题都不再是问题。 回到正题： 下面是在阮一峰分享的秋叶的排版心得，总结为六个原则：对齐，聚拢，重复，对比，强调，留白。——这将让原本混乱的版面变得生动有序： 一、对齐原则 相关内容必须对齐，次级标题必须缩进，方便读者视线快速移动，一眼看到最重要的信息。 二、聚拢原则 将内容分成几个区域，相关内容都聚在一个区域中。段间距应该大于段内的行距。 三、留白原则 千万不要把页面排得密密麻麻，要留出一定的空白，这本身就是对页面的分隔。这样既减少了页面的压迫感，又可以引导读者视线，突出重点内容。 四、降噪原则 颜色过多、字数过多、图形过繁，都是分散读者注意力的”噪音”。 五、重复原则 多页面排版时，注意各个页面设计上的一致性和连贯性。另外，在内容上，重要信息值得重复出现。 六、对比原则 加大不同元素的视觉差异。这样既增加了页面的活泼，又方便读者集中注意力阅读某一个子区域。 下面用一个PPT的例子，演示排版六原则。
尾移动，不能直上直下。
现在进行修改。 ?第一步，根据”聚拢原则”，将六点分成六个区域。 ?第二步，根据”降噪原则”，将每一点分成”小标题”和”说明文字”两部分。 ?第三步，根据”对齐原则”，将每一个部分、每一种元素对齐。 ?第四步，根据”对比原则”，加大”小标题”和”说明文字”在字体和颜色上的差异。 ?第五步，根据”留白原则”，留出一定的空白。
移动端UI设计师必看原则 由于移动端呈现的固有局限性，因此相比较网页来说，形式和内容较为简洁。设计师们在制定方案的时候，规则也相对简单一些。即便如此，移动端的UI设计中，几大基本原则是设计师们必须遵循的。 第一，确保UI设计界面的清晰性。 UI设计的清晰性原则，主要表现在界面图标的风格统一，内容主题明确，功能指向性强等方面。 这是每一个UI设计师在设计作品时，首要遵循的一大原则。主题不明确、信息概念模糊的界面，既影响用户的使用体验，也会大大降低该界面的使用率。那么，以此界面为主题设计的系列APP或者软件，就毫无使用价值。 第二，保留UI设计界面约定俗成（用户习惯）的功能。 这是指在UI界面的设计过程中，设计师不能一味地求变，求新。有些已经约定俗成的功能，或者用户已经习惯使用的某个功能，是必须保留的。否则，拿到一款手机，里面的应用全部都是新的，都是用户从未体验过的。 且不说应用，就连信息功能的删除键、输入键、增加表情符号的功能都已经更改了。那这款手机，对于用户来说，完全是一个陌生的设备，没有任何亲切感，好感度自然低很多。 第三，确保界面风格的整体一致性。 可以说，手机是一个小型的电脑，正因为其小，用户在体验时，
更能站在高处看到细微之处。如果移动端UI界面的设计风格不统一，比如字体不一致、颜色搭配不一致、结构不一致、布局不一致，用户在使用，很容易出现混乱的感觉。 比如，首页的设计是扁平化的，那么，相应的栏目或者菜单、页面布局等也要开发成扁平化的。 第四，保证UI界面设计的美观度。 这一点，自然不用多说。美是人们热爱一切事物的起源，美的事物，总是能够吸引更多人的关注。移动端的UI界面设计亦如此。一款不论外观还是界面设计都非常精美、精致的手机，显然它的销量不会低；如果用户体验度再高一点的话，那么，这款手机一定赚足了口碑和市场。 第五，充分考虑页面的响应速度。 设计师们可千万不可泛泛地认为，移动端页面的响应速度是开发考虑的事情，跟UI界面设计无关。如果这么想，那就大错特错了。一款手机设计完成后，开发固然重要，可开发也是基于设计师的方案进行的。 因此，设计师们在设计时，要保证UI界面的简洁性，在方案规划时，充分考虑到各个模块的衔接和转化、切换。只有在简洁性的基础上，页面的响应速度才会快。 随着互联网的发展，移动端越来越受到大众的追捧。未来关于移动端UI界面的设计和开发只会更多，希望上述的几点建议能对从事UI设计的朋友们有所帮助。
本文作者向盛华系前小米米聊产品经理，现任职于科大讯飞：
#左边界面#：大众点评新版的价格的搜索就比之前改得更符合用户心里模型；#右边界面#：食神摇摇的摇动手机找餐厅更加符合大众用户的心里，大家应该都有那种中午不知道去哪家餐厅就餐，那么就摇一摇来随机抽出一个附近的餐厅。 原则2：培养用户使用情景的思维方式做设计 要做到这个原则其实是很难的，需要长期的实战经验才能做到这点。 那我们都知道米聊出的比微信早，但后来被微信反超，个人认为不光是QQ帮了微信很大忙，比如用户登录门槛低，用户来源，广告打得响之类的，其实在用户使用情景方面米聊研究的没有微信 透彻。 对于一个社交即时通讯产品，添加好友的功能是好友汇聚的来源，虽然米聊微信都绑定手机通讯录，但话又说回来，用户找手机通讯录联系人语音聊天的还是比较少。添加好友是引导用户去发现 好友，找好友, 碰好友的一扇门。所以对于这么重要的功能放置在应用程序的哪个位置，在产品前期就会让用户明显的去选择用哪个应用，因为聊天工具的前提是要有人和你聊天。再回到现实的界面中来，看看下面的对比：
微信1.0的时候（我这里只截了4.0的图）把添加好友放置主Tab上，方便用户很快的添加好友 米聊2.0时还是把添加好友放置在好友列表的第一排，用户很难发现 原则3：尽量少的让用户输入，输入时尽量多给出参考 移动端的虚拟键盘一直是科技界无法解决的一个难题，虚拟键盘的主要缺点：1.输入定位无法反馈，所以无法形成高效的盲打；2.虚拟键盘的空间限制，手指的点击经常造成误按。光是上面这两点就让虚拟键盘在输入上大打折扣，所以我们在设计应用程序时，只要遇到Input Box的控件时，首先就要想到尽量让用户少输入，或者智能的给出参考。
文字排版六大原则 无论是写简历，还是制作PPT，良好的设计更能带来增光添彩的效果，学习文字排版六大原则，实践之。 首先，我们先看一个例子。良好的设计如何使得一个平庸的文档脱胎换骨。下面是一张大学生的求职简历，再普通不过了，想要引起招聘经理的注意，恐怕很难。
对它进行了简单的排版，还是一张表格，还是黑白配色，没有使用任何图形元素，效果却完全不一样了。
真是令人眼前一亮，不由自主地想多看几眼。这就是优秀设计的作用：它让你脱颖而出。 秋叶老师把他的排版心得，总结为六个原则：对齐，聚拢，重复，对比，强调，留白。我是这样理解的： 一、对齐原则 相关内容必须对齐，次级标题必须缩进，方便读者视线快速移动，一眼看到最重要的信息。
二、聚拢原则 将内容分成几个区域，相关内容都聚在一个区域中。段间距应该大于段内的行距。 三、留白原则 千万不要把页面排得密密麻麻，要留出一定的空白，这本身就是对页面的分隔。这样既减少了页面的压迫感，又可以引导读者视线，突出重点内容。 四、降噪原则 颜色过多、字数过多、图形过繁，都是分散读者注意力的”噪音”。 五、重复原则 多页面排版时，注意各个页面设计上的一致性和连贯性。另外，在内容上，重要信息值得重复出现。 六、对比原则 加大不同元素的视觉差异。这样既增加了页面的活泼，又方便读者集中注意力阅读某一个子区域。 下面用一个PPT的例子，演示排版六原则。
上面这张ppt有两个毛病。一是字数太多，抓不住重点；二是右边没有对齐，使得读者的视线只能一行行地从行首到行尾移动，不能直上直下。
现在进行修改。 第一步，根据“聚拢原则”，将六点分成六个区域。 第二步，根据“降噪原则”，将每一点分成“小标题”和“说明文字”两部分。 第三步，根据“对齐原则”，将每一个部分、每一种元素对齐。 第四步，根据“对比原则”，加大“小标题”和“说明文字”在字体和颜色上的差异。 第五步，根据“留白原则”，留出一定的空白。 页面的可读性大大增加。（）
移动应用的界面设计画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？ 本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索，来分享移动应用界面设计中的尺寸规范等问题，希望能给移动端的新手设计师些许指引。若有不当之处，欢迎斧正。 一、android篇 1、android分辨率 屏幕尺寸 指实际的物理尺寸，为屏幕对角线的测量。 为了简单起见，Android把实际屏幕尺寸分为四个广义的大小：小，正常，大，特大。 像素（PX） 代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。 屏幕密度 为解决Android设备碎片化，引入一个概念DP，也就是密度。指在一定尺寸的物理屏幕上显示像素的数量，通常指分辨率。为了简单起见，Android把屏幕密度分为了四个广义的大小：低（120dpi）、中（160dpi）、高（240dpi）和超高（320dpi）像素= DP * （DPI / 160 ) 例如，在一个240dpi的屏幕里，1DP等于1.5PX。 于设计来说，选取一个合适的尺寸作为正常大小和中等屏幕密度（尺寸的选取依据打算适配的硬件，建议参考现主流硬件分辨率），然后向下和向上做小、大、特大和低、高、超高的尺寸与密度。 典型的设计尺寸 ? 320dp：一个普通的手机屏幕（240X320，320×480，480X800） ? 480dp：一个中间平板电脑像（480×800） ? 600dp：7寸平板电脑（600×1024） ? 720dp：10寸平板电脑（720×1280，800×1280） Android SDK模拟机的尺寸 屏幕大小低密度（120）ldpx 中等密度（160）mdpi 高密度（240）hdpi 超高密度（320） xhdpi 小屏 幕 QVGA（240×320）480×640 普通屏幕WQVGA400（240X400） WQVGA432（240×432） HVGA（320×480） WVGA800（480×800） WVGA854（480×854）600×1024 640×960 大屏幕WVGA800 *（480X800） WVGA854 *（480X854） WVGA800 *（480×800）WVGA854 *（480×854）600×1024 超大屏幕1024×600 1024×768 1280×768WXGA （1280×800） 1536×1152 1920×1152 1920×1200 2048×1536 2560×1600 注意，ppi、dpi 是密度单位，不是度量单位： * ppi (pixels per inch)：图像分辨率（在图像中，每英寸所包含的像素数目）* dpi (dots per inch)：打印分辨率（每英寸所能打印的点数，即打印精度）
淘宝店铺设计排版技巧文稿归稿存档编号：[KKUY-KKIO69-OTM243-OLUI129-G00I-FDQS58-
1.相对于图像，文字更具吸引力 与你所认为的相反，在浏览一个网站的时候，能够直接吸引用户目光的并不是图像。大多数通过偶然点击进入你的网站的用户，他们是来寻觅信息的而不是图像。因此，保证你的网站设计凸现出最重要的信息板块，这才是设计的首要原则。 2.眼球的第一运动聚焦于网页的左上角 用户浏览网页的这一习惯应该在意料之中，毕竟左上部为主要操作中心这一点为大多数重要的计算机应用程序的设计所采用。在你构建网站考虑网站设计时，应该尽量保持这一格式。要知道，如果你希望保持个人特色，搭建一个成功的网站，你就必须尊重用户们的习惯。 3.用户浏览网页时，首先观察网页的左上部和上层部分，之后再往下阅读，浏览右边的内容 用户普遍的浏览方式呈现出“F”的形状。保证网站内容的重要要素集中于这些关键区域，以此确保读者的参与。在此放置头条，副题，热点以及重要文章，这样可以吸引到读者进行阅读。 4.读者会忽视横幅广告 研究表明，读者常忽视大部分的横幅广告;—尽管你以此维持网站生计——视线往往只停留几分之一秒。 5.花哨的字体和格式被忽视 为什么呢那是因为用户会认为这些是广告，并非他们所需要的信息。事实上，用户很难在充满大量颜色的花哨字体格式里寻找到所需的信息，
因为视觉线索告诉他们把这些忽略吧。保持网站的清爽，不要因为华而不实的表面，让重要的信息被忽略。 6.用数词来代替数字 如果使用数词取代数字的罗列，读者会发现在你的网站可以很容易地发现真实的资料。要知道，你是写给那些将第一次浏览你的网站的读者，所以，让他们容易发现他们所需的信息，让他们感兴趣。 7.字体大小影响浏览行为 想改变人们对你的网页的看法吗改变网页字体的大小。大的字体刺激浏览，而小一些的字体则提高焦点阅读量。根据你的需要，合理配置两者的比例。 8.遇到感兴趣的内容，用户仅会多看一眼副标题 不要过分坚持副标题固定的格式——保证他们的相关性和兴趣。你也可以让副标题包含关键词，这样可以有效利用搜索引擎，让它带来读者。 9.人们大都只浏览网页的小部分内容 如果在用户浏览的时候提供信息使他们尽快锁定目标，就可以把这一点发展成为你的优势。突出某些部分或者创建项目列表使网页信息容易找到和阅读。 10.简短的段落相对于长段落来说有更好的表现力 网页信息是为大多数强调快速浏览的无联网用户提供的。除非上下文的衔接要求，保持信息由简短的段落和句式组成，例如这个电子商务网站的产品介绍。 11.根据视觉锁定，一栏格式比多栏格式拥有更好的表现力
移动界面设计分析 随着信息化的来临，产品自身的信息化属性也越来越健全，根据人们日常的需要，设计师们在产品的设计方面需要考虑到人机的交互。科技的日益进步促成了计算机的发展，可以遥控停车的全自动汽车、可以远程控制开关的家用电器等，这些电子产品的快速发展是大家有目共睹的。手机作为日常生活中最常见的个人电子产品的终端，集娱乐、资讯、生活于一体，其终端性质决定了手机在人机交互界面上更加功能集成化、人性化、趣味化等。随着电子科技技术的飞速发展，手机的功能也得到了迅速拓展，通讯功能不再是其唯一的重要功能，随着信息技术与网络技术的融合，手机的交互方式发生了很大的变化，其交互界面也更加多样化。针对移动应用的界面设计也已成为人机交互技术的一个重要研究领域。移动界面指的是通过手机平板等移动终端设备呈现的用户能够体验到的图形形态，主要表现为移动应用平台。而由于移动设备的便携性，置不固定性和计算能力的有限性，以及无线网络的低带宽，高延迟等诸多的限制，使得移动界面设计又存在着自己的特点。 首先，先谈谈移动界面存在的许多限制和特点吧。 1．资源相对匮乏 由于受到成本，能耗以及移动性的要求，移动设备往往计算能力比较差存储容量较小，显示屏幕小，分辨率低。例如，一般网站的默认分辨率可达1024*768，而手机的显示分辨率也不过320*240因此，手机只有通过设计专门的浏览器才能直接访问一般的网站。其次，移动界面比桌面系统的用户界面更加简单。桌面系统用户界面采用的一般是并行展示各种选择可以在一个大小可调的屏幕中同时显示出来，而在移动界面中，用户需要逐屏逐页寻找合适的选择，当选择过多，就会给用户带来不便，从而引发用户不满意。因此，移动界面设计的难题就是如何在有限的资源条件下有效地为用户提供信息服务，提供的选择必须根据重要性排列。 2．移动设备的种类繁多 由于移动设备的种类极其繁多，软硬件平台规范各不相同，互相之间的兼容性不是太好，其计算能力、储存能力以及声音效果等也千差万别，使得在开发移动应用时很多情况下需要专门针对某一
1.将说明文字加个黑色背景层，突出文字的显示，并降低背景层的透明度 图中文字 "将爱 " 书法字体设计 "情进行到底" 纤细字体设计表现了女性的柔美，象征了爱情 文字放置在纯色背景之上，"将"和"底"连接了图中左右的人物 使人物之间产生关联，暗示了2人之间的爱情 2.将文字放置在开阔的背景之上，加点阴影，前景（文字）亮，背景暗突出了文字主题 本例中运用了文字的渐变叠加文字的倾斜变形 左上角文字"天下" 用一个小牌子突出 3.由于直接应用文字到背景图片上会有凌乱的视觉感，本图采用了一个不规则的黑色图形做文字背景，增加了一些神秘感和故事感 字体设计中突出了拯救，应用了渐变叠加效果
4.此图中说明性的小文字用黑色字体，文字放置的地方，背景都没有很多细节，让文字更加醒目，不会使文字和背景冲突 大文字（电视剧名称）运用了书法字体错位摆放，并黑色描边，加以背景色中的黄色，使文字与整幅图融合，让整幅图统一 "宫廷大剧"是图中的副标题，黑色，用黄色的不规则印章图形做背景，增加了几分古代感 5，图中中心文字放置在空调之上，使大家忽略了柜式空调，同时有凌乱感 那这个图做案例，因为文字设计的有亮点 空调节和启动，重新设计字体，让字体有机械感，很符合此图的主题 文字设计时运用了叠加冰凉的图案，使用文字也瞬间冰霜了很多，给人凉爽清新的感觉 投影也增加了文字的质感
6.本图用有个性化的人物和高山顶合成而成 标题文字用了方正黄草，放大并图案填充，填充了熊熊烈火的图案，象征了战火。并增加了黑色的投影 说明性的文字用白色，字体柔和，与画面的刚强对比，增加了画面的跳跃性 文字形状与背景中的大山相似，连绵起伏 背景用了红色并降低透明度，使文字更加醒目，也与画面中的红色想呼应 7.图中文字运用了标签式的设计，垂直构图