博客 (92)

原文标题:新手还在学习排版配色,高手已经在做内容设计了…

任何事物的呈现和传达都需要通过一定的媒介,在媒介承载的过程中,均会产生损耗。我们设计的目的之一就是将所传达的内容在媒介承载的过程中让损耗降到最低,呈现出我们想要给受众的东西,且能够被快速察觉、理解和获取(主动及被动的)。

文本作为语言沟通的书面化,一直以来承载着大量的信息,也是生活中最常见及熟知的方式。

当前人们快节奏的生活状态、快消的阅读习惯以及注意力分散,所以需要我们通过设计手段来减少视觉、心理及认知压力,让用户能够快速定位、理解和消化。同样,我们也需要根据目标、任务甚至品牌的诉求,从而更好的服务于主题。

以下是工作中一些心得和总结,旨在从更多角度去思考和完善,让文本信息能够得到更好的呈现和传达。

一、前提

前提是做事的先要条件。

  • 达成目标

  • 了解受众

  • 具体情景

二、目的

目的是做这件事的动力。

  • 满足用户所需,帮助完成工作;

  • 简单直接,有效传达;

  • 达成一致,统一规范可实施。

三、角度

角度是考虑要做的内容。

  • 准确性

  • 一致性

  • 易读性

  • 内容调性

1. 准确性

秉持文本信息准确明了、简达明意,无歧义

首先要明确所传达的群体对象,尽量避免使用行话,使用「用户」能直接理解的文本信息,当然相应的专业词汇也应给予良好的解释和说明。

案列:我们将 「循环次数」 更改成 「轮播次数」 ,「循环次数」会让人产生思考(循环一次是播放一次还是两次的),而 「轮播次数」 就显得更加直观明了且更符合上下文的语境。

用词完整、阐述直接

用词完整,例如保存修改,而不是简化为保存;阐述直接,避免模棱两可,模糊不清。

内容传达上应做的良好的「自解释」

例如:涉及操作事件的文本命名应根据上下文准确的进行表达,而不是含糊其辞的,使文本能够准确的解释和表达将要发生的事件及行为。

寻找更加合适的表达方式

例如:未输入提示,「XXX不能为空」 和 「请输入XXX」,第一个在表达上其实有一些责怪,而第二个表达同样说明了意思,但在口吻上却更加温和,并告诉用户应该怎样操作和行动。

避免错别字

错别字只会拉低产品的品质和用户内心的形象,请务必严格检查。避免把 「登录」 写成 「登陆」。

准确应用标点符号

标点符号能够赋予文字节奏,表达语气以及对内容的组织。准确应用,能够帮助文字更加有效传达和被人理解。

2. 一致性

同一事物用词一致,消除重复

例如,涉及新建的操作,一会用「新建」,一会又用「新增」、「创建」或者「添加」;涉及称谓,一会用「你」,一会又用「您」、「我」或者「我的」;涉及帮助,一会用「支持」,一会用「帮助」或者「服务」等等,我们应该消除这些重复,统一用词。

相似场景、意思和语境下句式表述一致

例如,未输入提示,应避免「请输入XXX」和「XXX不能为空」等不同的表达方式。

标点符号规范

根据符号使用规范并结合自身产品情况具体定义。例如:全角和半角,如常见「:」和「:」,截断省略「…」等等。又如:标题,提示文本不加结束符号等。

时间表达规范

时间是一个记录戳,需要根据与当前进行定义,显示不同的格式。

例如:今天发生的(自0时起),显示时分(24h);今天之前发生的,显示月-日(例如02-12);跨年,显示年-月-日(例如2017-12-30)。

数字使用规范

例如:统计数据统一使用阿拉伯数字。

大小写使用规范

专有名词大小写,单位符号等。例如:iOS

中西文混排规范

中英文之间需要加空格等。

代称一致

第一人称「我」,第二人称「你」和「您」,具体根据场景进行使用,同场景统一一致。你和您请不要随意混用或均使用,应当统一。

操作名称与目的页面标题一致

常见于移动端,在 PC 常见于链接及导航。

3. 易读性

简化内容,避免啰嗦

简单而直接,避免长段使用短语,保持措辞简洁,让读者感受到阅读乐趣,引诱他们深入阅读。

打破复杂冗长

通过段落、有序列表(项目编号)、无序列表等方式使内容结构化,便于视觉扫描。

  • 段落:根据句意,进行分段呈现。

  • 有序:当项目顺序或优先级重要(程序等)时,使用编号列表。

  • 无序:项目相关时使用项目符号列表,但顺序或优先级无关紧要。

  • 结构化:节奏和韵律。例如,电话号码或者银行卡号,使用连字符或空格使其容易被读取和识别。

重要内容突出显示

让用户首先看到最重要的内容,而不是去寻找它们。

经过良好的排版

合理使用文字大小:使用合理的字体大小,太小太大对于屏幕阅读来说都是低效率的。网页端字体大小一般使用不低于12px,更加直观易辨(对于多数人而言)的字体14px和16px;移动端字体大小不小于10pt(sp),12-18pt(sp)都是常用的字体选择范围。

颜色与对比度:颜色我们需要考虑色彩本身(色相、明度和饱和度)给人直观感受和文化寓意的,以及文本与背景之间是否有足够的对比度,从而方便人们可以更加直观舒服的进行阅读。W3C 建议的视觉呈现文本和文本的图像具有对比度至少为4.5:1,大型文字和图像的对比度至少为3:1,具体详情可了解 Contrast (Minimum):Understanding SC 1.4.3

字间距:汉字属于方块字,原则上文字外框彼此紧贴配置,称作密排;在各字之间加入固定量的空白来排列文字,称作疏排;减少字距,使得文字外框一部分重叠,称作紧排。文字排版时,会根据具体情况对字间距进行调整。大多时候我们对采用疏排方式,增加字间距,以提高易读性。

行高:具有良好的行距的文本,更易阅读和引导用户视线。与行之间的空白称为行距,文字尺寸+行距=行高,行距一般介于文字尺寸的50%–100%之间,自然行高的设置一般为文字尺寸的1.5-2倍。文字尺寸较小时,行高设定也会相对较小。行距一般不会超过文字尺寸,因为这样并不会因此而增加易读性。

段间距:段落与段落之间的距离,段间距大于行间距,行间距一般设置为文字大小的2-3倍之间,合适的段间距能够缓解用户的视线压力,起到很好的节奏及阅读定位。

行字数:一行的文字数量。一行文本过长,用户需要去移动脖子或视角,易造成的眼睛疲惫感,造成阅读困难;此外,在大段文本中找到正确的行也将变得困难。过短视线需要不断换行,从而打断了读者阅读节奏,造成尴尬的断裂效果;行太短也会造成用户在一行没读完的情况下去关注和阅读下一行。

虽然至今汉字依然没有正统的方法和具体行字数来衡量文本的完美长度,个人经验在12px下30-60汉字左右(包含标点),具体也要根据内容、人群等约束和变量,当然最重要的是要相信你自己(专业的设计师)的眼睛和判断。

词语尽量避免同行断开:例如,行末为「跳」,下行开头为「转」,读起来就有断句的存在感。

对齐方式:中文(简体)排版一般遵循左对齐的原则,符合我们从左到右的阅读习惯。文字居中,本身不适合可读性,但可用于许多小段文本块。右对齐在表格设置中,可用于数字的对比等应用。

符号避头尾:中文中行首遇到不能置于行首的标点符号,必须要将移动到前一行行尾。

合理突出:对于关键字、要点通过位置、加粗、比例大小和色彩处理等,以便让用户直接关注到。当然也要控制突出数量,毕竟都是「重点就没有重点」,过多也会扰乱和分散用户的注意力。

链接:链接文本需要很好的说明用户将要去何处,可以使用蓝色或者下划线标示出链接的样式,这是用户熟悉方式。神奇的「下划线」为体验赋能

尽量少用斜体:PC 和无线端的各个官方的中文字体包并没有斜体预设,生拉硬扯的倾斜在一定程度上是影响美观度,并造成一定的阅读困难。如果是为了突出或区别可以考虑使用字重、大小和颜色等方式。

层级处理:有对比就有层级关系,可通过大小、字重、色彩、距离、方向、纹理、形状、背景等等方式,可以让整体排版布局更加富有层次结构,让内容的可读性得到明显的提升。 例如:标题、副标题、引用和内容也是一种层级处理(结合了大小、色彩或者距离等等)。

留白:合适的留白可以更好的烘托内容主题,缓解视觉压力。

数量信息前后有汉字时需加空格:不加空格会出现前后拥挤的视感,另一方面可凸显数字信息。

4. 内容调性

依据产品定位,通过文本表述传递其相应的价值观和情感诉求

任何产品都有所针对的人群及自身的品牌形象。C端产品和 B端产品,儿童产品和成年人产品,所使用的语言表达方式自然也都是不一样的。

依据不同状态和用户群体

根据状态(正面、中性和负面)和用户(新手、中级用户和专家),使用合理的语调及用词规范,以适应不同的情境和状况。

始终坚持积极主动的,而不是消极令人沮丧

「请输入内容」与「错误,内容不能为空」,同样的意思却有不同的感受,从积极的一面表达就是传播正能量。

四、通用产出物

  • 字体

  • 日期和数字

  • 标点符号

  • 大小写

  • 中英文混排

  • 代称

1. 字体

字族 Font-Family

Font-Family 属性设置的字体系列。Font-Family 属性设置多个字体作为一种「后背」机制,浏览器不支持第一种字体,它会尝试下一个字体。

如果字体系列的名称超过一个字,它必须用引号,如Font-Family:「宋体」。

对于依附在 PC 端产品而言,统一的字体规范,以保证在不同平台、不同浏览器下保持良好的美观性和易读性。

以下呈现的是 Ant Design 的字体家族。个人在使用了多款后,觉得最好的一份:

font-family:「Chinese Quote」, -apple-system, BlinkMacSystemFont, 「Segoe UI」, 「PingFang SC」, 「Hiragino Sans GB」, 「Microsoft YaHei」, 「Helvetica Neue」, Helvetica, Arial, sans-serif,「Apple Color Emoji」, 「Segoe UI Emoji」, 「Segoe UI Symbol」;

如果大家想了解字体排列前后顺序的玄机可以认真看《推荐!Web中文字体应用指南》这篇文章。

以下备注区域,是我在使用字族的路上磕磕碰碰所收集到的有限知识,也算知其所以然了,若有不妥、错误和缺漏欢迎指正。

备注区域:

-apple-system:macOS 和 iOS平台的 Safari 调用 SanFrancisco 字体

BlinkMacSystemFont:macOS Chrome 调用 SanFrancisco 字体

Roboto字体,由 Google 开发,是 Android 4.0「Ice Cream Sandwich」及后面Android版本的默认字体。

Segoe UI 取代Tahoma,Windows 从 Vista 开始的界面默认西文字体。利用 ClearType 技术的新字体 Segoe UI 看起来比现在略显僵硬的 Tahoma 更加人性化。

Tahoma 被采用为 Windows 2000、Windows XP、Windows Server 2003及 Sega 游戏主机 Dreamcast 等系统的默认字型。

Arial 是一套随同多套微软应用软件所分发的无衬线体 TrueType字型。

Microsoft YaHei 微软雅黑,该字体将作为 Windows Vista 的默认字体取代2001年推出的 XP系统下默认的宋体汉字,以支持高清显示的 ClearType 功能。

Simsun 宋体,一直是简体中文版 Windows XP系统及之前版本的默认字体。但由于字体的特性,在Windows Vista 中已经改用支持 OpenType 的微软雅黑,

HanHei SC 威锋瀚黑,现苹果简体中文,OS X 10.11 El Capitan 开始,

STHeiti 华文黑体,分为「黑体-简(Heiti SC)」和「黑体-繁(Heiti TC)」,OS X 10.6 Snow Leopard 直至 OS X 10.10 Yosemite。

Hiragino Sans GB 冬青黑体

STXihei 华文细黑,是苹果公司 Mac OS X9 以及之前版本的操作系统的中文默认字体,截至 OS X 10.5 Leopard。

PingFang SC 为 iOS9.0 以后系统自带中文字体。

SanFrancisco iOS9 正式发布之后,替换了之前的 Helvetica Neue 成为了 iPhone/iPad 系列设备的默认字体。

Myriad Set Pro 苹果向 adobe 公司定制了一款西文字体,是以 myriad 为原型的,完成后在市面上叫做「myriad set」,后期升级为「myriad set pro」。

Helvetica Neue 意为「新 Helvetica」

Helvetica 是苹果电脑的默认西文字体

sans-serif 并非一个具体字体,而是css的通用字体族,具体是什么字体是由浏览器设置决定的。

字号 font-size

标题,内容,注释说明等不同字号的大小。

字间距 letter-spacing

根据不同字号,及文本数量进行字间距定义。

行高 line-height

设置行高能很好的解决,缓和上下文本之间拥挤在一起的情况。

颜色 text-color

这里主要讲下注意对比度的问题,很多产品在这一点上都忽视了这一点,搞出了所谓的「小清新」。

2. 日期和数字

日期

使用完整数字日期,如:2018-01-02。

时间

  • 使用24小时制,如 13:01:29

  • 具体到时分秒,如当前对话显示 09:01:02

  • 使用半角 「:」

  • 日期和时间之间包含一个空格,如 2018-09-01 13:01:20。

数字

使用阿拉伯数字。

对四位或更多位数的数字使用逗号。

对手机号码使用前后无空格的连字符「-」。不要使用点,空格等其他符号。

数字范围使用前后无空格的连字符「-」。

正负数后不加空格。

数字和字符之间不需要空格

货币

人民币符号(¥)在数字前面,精确到小数点后两位。

测量单位

储存单位(B、kB、MB、GB、TB),在数量和度量单位之间包含一个空格。

对于长度「毫米(mm)、厘米(cm)、分米(dm)、千米(km)、米(m)、微米(μm)、纳米(nm)等」和重量「千克(kg)、克(g)、毫克(mg)、微克(ug)等」等测量单位应为小写(电流单位除外)。在数量和度量单位之间包含一个空格。

屏幕单位「像素(px)、逻辑分辨率(pt、dp、sp)、英寸(in)等 」应为小写。在数量和度量单位之间包含一个空格。

在连续列出尺寸时,将度量单位放在末尾,而不是在每个数字之后,并包括一个空格。

在所有情况下,数字和单位之间包含一个空格。HTML代码的最小空间是 & hairsp; 或 & #8202;

测量单位分为基本单位和导出单位。国际单位制共有7个基本单位长度:

长度:米 m;

质量:千克(公斤) kg;

时间:秒 s;

电流:安[培] A;

热力学温度:开[尔文] k;

物质的量:摩[尔] mol;

发光强度:坎[德拉]cd;

并由物理关系导出的单位称「导出单位」 。

3. 标点符号

省略不必要的标点

标题、副标题、输入框下的提示文本、输入框占位符、悬停提示中的文本、Toast中、弹窗等短句,在遣词造句时尽量避免标点符号,始终末尾不要使用句点。

有序列表和无序列表

使用冒号引入项目列表,列表后不使用标点。

使用列表来表示步骤、组或信息集。简要介绍列表的上下文。在顺序重要时列出数字列表,比如当您描述流程的步骤时。当列表的顺序不重要时,不要使用数字。

常用标点符号规范

  • 空格:链接与前后文本之间增加空格;数字和单位之间包含一个空格;电话号码与前后文本包含一个空格;

  • 省略号「…」:半角省略号,超出截断代替省略文本;

  • 星号「*」:半角星号。表单必填、说明备注;

  • 连接号「-」:半角连接号,前后无空格,如2018-01-04,2008-2018;

  • 冒号「:」:半角冒号,用于时间的表示,如16:45 ;

  • 冒号「:」:全角冒号,用于表单;

  • 破折号「——」:中文破折号占两个汉字空间;

  • 书名号「《》」:产品中常用于法律条文。

相关推荐:

4. 大小写

专门名词大小写

文件格式

当一般引用文件扩展名类型时,全部大写而不包含句点。

  • GIF

  • PDF

  • HTML

  • JPG 格式

引用特定文件时,文件名应该是小写的:

  • 内容策略-设计完全手册.pdf

  • 皮皮虾.gif

  • 西湖.jpg

  • hot.html

5. 中西文混排

中英文之间需要加空格

中文与数字之间需要加空格

中文为主,使用全角符号且与英文或数字之间不加空格

6. 代称

为了表达双方的平等,避免使用「您」。使用「你」代称客户/用户,借以表达客户的口吻。在客户/用户为主的情况下使用「我」。避免同一句子中混用「你」和「我」。

对于「您」还是「你」的使用并非绝对,主要看行业以及服务的对象

在《胜于言传-Web内容创作与设计的艺术》中作者建议:

当用户提问的时候:

  • 在问题中使用「我」和「我的」(用户的声音)

  • 在答案中使用「你」和「你的」(应用对用户说话)

  • 用「我们」和「我们的」代表回答公司

当应用提问的时候:

  • 在问题中使用「你」和「你的」(应用向用户提问)

  • 在答案中使用「我」和「我的」(用户的声音)

  • 用「我们」和「我们的」代表回答公司

五、指导建议

  • 操作行动

  • 文本说明

  • 句式结构

  • 语音和语调

  • 写作建议

1. 操作行动

按钮

清晰可预测。应该能够预测当点击按钮时会发生什么。

行动号召。按钮应始终带有强烈的动词,鼓励行动。为了给用户提供足够的上下文,在按钮上使用 {动词} + {名词} 格式,除了保存,关闭,取消或确定等常用操作。

以下是常用词的含义,以避免不恰当或混淆使用:

所有具体的用词需结合场景和生活习惯。

链接

使用描述性的链接文本。切勿使用「点击这里」或「这里」作为链接文本。

如果一个链接出现在句子的末尾或逗号之前,不要链接标点符号。

链接使用蓝色,这是用户习以为常的认知,并明确区分点击和未点击的区别。

2. 文本说明

对操作说明,功能说明,名词(术语)解释,提示信息等进行用户测试,是否明白其意,记住这是一个不断优化的过程。

以下是产品内的主要文本:

  • 操作文本:按钮;

  • 导航文本:全局和局部导航、目录、链接;

  • 说明文本:功能说明、术语解释;

  • 提示文本:弹框、toasts、操作反馈、系统反馈、通知等;

  • 操作说明:功能引导说明,操作文档;

  • 标题和副标题:弹框标题、操作说明标题、法律条款标题等;

  • 条款:法律条款、申明;

  • ALT:为图片添加文字说明。

3. 句式结构

通用场景下的语句可进行归纳在一起,形成统一的句式结构。

例如:

操作反馈:成功直接提示结果,失败显示结果+说明原因+如何解决。

二次确认:先说明利害,再询问是否操作。

标题:「动词」+ 「名词」格式等。

4. 语音和语气

这听起来是谁,什么样的语音和语气能代表我们,我们想传达什么的形象。

因此,你可以建立一套准则,一般而言准则应该:

  • 基于产品当前的业务;

  • 准则可被执行,避免过于空洞;

  • 易于记忆,3-5个尚可;

  • 并随着产品发展和愿景的变化而不断适应改进。

例如:

积极主动

始终坚持积极主动的,而不是消极令人沮丧。

自信专业

避免听起来傲慢、亲密、孩子气或其他不适当的或非正式的。

友好尊重

依据不同状态(正面、中性和负面)和用户群体(新手、中级用户和专家),使用合理的语气及用词规范。

5. 写作建议

个人写作过程中的一些小感悟:

  • 好的结果是不断修改来的,修改的基础是要先写下来,所有先记录而不是停留在脑子里,这才是一切开始的基础。

  • 记住用户很忙且没有耐性,甚至不聪明,这会不断的促使你修改调整。

  • 找人阅读并呈现结果,并询问其含义和建议。这是检验的最佳实践。

  • 过段时间再来看看,或许有更好的方式。

结尾

这并非是一个完整的(内容层面可能保存图片风格,插画图标等),还有很多地方可以补充。重要的是找到适合你的产品,并有这样的意识去不断优化你的产品内容,从而更好的服务你的用户。

W
转自 Wiiii 6 年前
3,980

附加消息:暂无该开发者或未上传过应用

原因: 没有上架应用(隐藏的不算上架),应用设置显示后记得在版本管理中将版本也设为显示。


附加消息:抱歉,开发者验证无效

原因:可能是没有达到认证要求,不允许加群(譬如:需应用最低总安装量 1000 次)


DZ 水很深,慎入:http://open.discuz.net/?ac=document&page=xootan


2018.8.14 踩坑:

还有,加群要开发者中填写的 QQ 才能加,因为验证是全自动程序判断的。

如果要跳过安装量 1000 次的要求,就直接花钱购买会员,不过购买会员也是一件非常艰难的事情,在与“Q群管家”这个机器人 QQ 的对话中发送“@购买vip”,绝对能让你体验到一种有钱也花不出去的感受。

做这么多花哨的东西,不如踏踏实实把产品做好。


2018.8.15 踩坑:

跟Q群管家对话,@login 时,由于密码过于复杂,消息没反应,特殊符号别提了,连纯大小写字母数字也不行,后改成纯数字密码登录成功。

加群完全看基本信息中填写的 QQ 客服 号,群主是机器人,只要应用是上架显示的,版本是显示的,就可以用这个QQ客服申请入群,(可以改)。

xoyozo 6 年前
3,442

原因:在调用 DownloadFile 方法前未创建目标目录或目录无写入权限。

xoyozo 6 年前
6,845

Font Awesome 从 5.0 版本开始,在保持经典的 Web Fonts with CSS 外,还提供更现代化,功能更强大的 SVG with JS 部署方式。


升级为 SVG with JS 后,如果部分图标不显示,可能的原因是:

· 部分在老版本中的图标不再 5.0 版本上提供,解决的方法是引用 fa-v4-shims.js;

· 此方式把 <i /> 标签通过 JS 替换为 <svg /> 标签,须要改动 CSS 样式。


如果仍然使用 Web Fonts with CSS,部分图标不显示,可能的原因是:

· 新版本不再推荐以 fa 的 class 引用,对 Solid(实心)、Regular(标准)、Light(简洁)、Brands(品牌)四大分类分别使用新的命名方式:fas、far、fal、fab。具体可以在 Font Awesome 官网上找到相应图标后,点击打开图标详情,复制已经生成的 HTML 代码。fa 将被视为 fas。

xoyozo 7 年前
7,063

本文未完成,部分测试方法、条件或结果可能有误,请谨慎参考! :)

本文基于 MySQL 的 InnoDB BTREE 方法的索引进行测试。

以一张包含 2000 万条记录的表做实验:

CREATE TABLE `dt_read`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `time` datetime(0) NOT NULL,
  `a_id` int(11) NOT NULL,
  PRIMARY KEY (`id`) USING BTREE
);

这张表是用于记录文章点击量的,

`id` 为主键,int(11) 自增;

`time` 为非空 datetime,表示文章打开时间,测试数据是从 2017-03-11 至 2018-04-28;

`a_id` 为非空 int(11),表示文章 ID,在此表中不唯一,测试数据是从 1 至 260218。


体验“全表扫描”


首先来体验一下什么是全表扫描,执行下面语句:

SELECT * FROM `dt_read` WHERE `time` < '2020-1-1' LIMIT 10

> 时间: 0.012s


SELECT * FROM `dt_read` WHERE `time` < '2000-1-1' LIMIT 10

> 时间: 7.317s


表中数据是按主键从小到大排列的,当查询条件为 `time` < '2020-1-1' 时,能很快地从表的前端找到 10 条满足条件的数据,所以不再继续判断后面的记录,立刻返回结果,耗时 0.012 秒;但当条件改为 `time` < '2000-1-1' 时,同样逐条判断,直到最后一条也没有找到,这种情况就是所谓的“全表扫描”,耗时 7 秒。


索引对 ORDER BY 的 ASC 和 DESC 的影响


我们给 `time` 建一个索引,同样执行刚才需要全表扫描的语句:

SELECT * FROM `dt_read` WHERE `time` < '2000-1-1' LIMIT 10

> 时间: 0.012s


创建 `time` 的索引后,相当于生成了一张按 `time` 字段排列的新表,这时 MySQL 就能够很快地定位并找到符合条件的记录,避免了全表扫描。


试试按 `time` 倒序排:

SELECT * FROM `dt_read` WHERE `time` < '2000-1-1' ORDER BY `time` DESC LIMIT 10

> 时间: 0.013s


结论:索引对 ORDER BY 的顺序(ASC)和倒序(DESC)都是有效的。


索引字段的次序对 WHERE 和 ORDER BY 的影响


删除所有索引,创建一个新的索引,字段依次为 `time`, `a_id`。

分别执行以下查询:


SELECT * FROM `dt_read` WHERE `time` < '2000-1-1' AND `a_id` < 0 LIMIT 10

> 时间: 0.013s


SELECT * FROM `dt_read` WHERE `a_id` < 0 AND `time` < '2000-1-1' LIMIT 10

> 时间: 0.013s


结论:MySQL 会自动优化 WHERE 条件的次序来匹配最合适的索引。

但在 ORDER BY 中却不是这么回事了:


SELECT * FROM `dt_read` ORDER BY `time`, `a_id` LIMIT 10

> 时间: 0.013s


SELECT * FROM `dt_read` ORDER BY `a_id`, `time` LIMIT 10

> 时间: 14.066s


原因也很好理解,对两个字段进行排序,先后次序肯定会影响结果集,因此只能以 SQL 语句指定的字段次序来 ORDER BY,这样,按索引的字段次序进行 ORDER BY 查询无疑是更快的。


索引中的字段必须依次使用


保持上例创建的索引不变,即 `time`, `a_id`。


SELECT * FROM `dt_read` WHERE `time` < '2000-1-1' AND `a_id` < 0 LIMIT 10

> 时间: 0.013s


SELECT * FROM `dt_read` WHERE `a_id` < 0 LIMIT 10

> 时间: 6.438s


上句合理利用了索引的字段,而下句跳过了 `time`,直接 WHERE 了 `a_id`,这是不受该索引支持的。

我们可以想象一下这张由索引生成的虚拟表,其实就是一张普通的平面二维表格,按索引指定的字段次序进行了排序,所以全表中仅仅是索引指定的第一个字段是按大小排列的,第二个字段是在第一个字段值相同的区域内按大小排列,后同。所以,跳过索引指定的第一个字段直接对第二个字段进行检索,是无法应用该索引的。这个结论也同样也体现在 ORDER BY 语句中:


SELECT * FROM `dt_read` ORDER BY `time`, `a_id` LIMIT 10

> 时间: 0.013s


SELECT * FROM `dt_read` ORDER BY `a_id` LIMIT 10

> 时间: 29.566s


WHERE 和 ORDER BY 混合


保持上例创建的索引不变,即 `time`, `a_id`。


先来执行这两句:


SELECT * FROM `dt_read` ORDER BY `a_id` LIMIT 10

> 时间: 12.29s


SELECT * FROM `dt_read` WHERE `time` < '2000-1-1' ORDER BY `a_id` LIMIT 10

> 时间: 0.013s


仅仅 WHERE 了一个 `time`,对 ORDER BY `a_id` 的效率却有质的提升,是因为 WHERE 中的 `time` 和 ORDER BY 中的 `a_id` 一起找到了索引吗?答案是否定的。

我们把时间改大,让它能马上找到符合条件的数据:


SELECT * FROM `dt_read` WHERE `time` < '2020-1-1' ORDER BY `a_id` LIMIT 10

> 时间: 22.34s


为什么这个语句就不走索引了呢?

其实,一个简单的 SELECT 查询语句,首先执行 WHERE,然后 ORDER BY,最后是 LIMIT。每一步都独自去找了索引,而非 WHERE 和 ORDER BY 混在一起去找索引。必须保证每一步是快的,最终才是快的。

当 `time` < '2000-1-1' 时,WHERE 用到了索引,所以很快,ORDER BY 却没有用到索引,但为什么也很快呢?因为 WHERE 的结果集非常小(示例中为 0 条)。

当 `time` < '2020-1-1' 时,WHERE 也用到了索引,但其结果集非常大(示例中为所有记录),再 ORDER BY `a_id` 就非常慢了,因为我们没有创建以 `a_id` 开头的索引。


现在把索引改成只有 `time` 一个字段。


SELECT * FROM `dt_read` WHERE `time` < '2020-1-1' ORDER BY `a_id` LIMIT 10

> 时间: 6.033s


因为索引里有 `


SELECT * FROM `dt_read` WHERE `time` < '2000-1-1' ORDER BY `a_id` LIMIT 10

> 时间: 0.013s


SELECT * FROM `dt_read` WHERE `a_id` < 0 ORDER BY `time` LIMIT 10

> 时间: 6.033s


第二句先 WHERE `a_id`,后 ORDER BY `time` 是不能匹配所建的索引的。


索引中的字段越多越好


分别在创建索引(`time`)和索引(`time`, `a_id`)的情况下执行下面语句:

本例使用 ORDER BY 而不是 WHERE 来测试是因为,在 WHERE 的多个条件下,如果符合前一条件的筛选结果集过小会导致判断第二条件时数据量不足,无法判断索引是否起作用。


SELECT * FROM `dt_read` ORDER BY `time` LIMIT 10


仅创建索引(`time`)的情况下:

> 时间: 0.013s


仅创建索引(`time`, `a_id`)的情况下:

> 时间: 0.013s


SELECT * FROM `dt_read` ORDER BY `time`, `a_id` LIMIT 10


仅创建索引(`time`)的情况下:

> 时间: 15.015s


仅创建索引(`time`, `a_id`)的情况下:

> 时间: 0.014s


可以看到,在索引字段依次使用的前提下,索引字段数不少于查询字段数才能避免全表扫描。

虽然索引中的字段越多越好,但必须依次使用,否则也是无效索引。


索引对 INSERT / UPDATE / DELETE 的效率影响


分别在创建索引(`time`)和索引(`time`, `a_id`)的情况下执行下面语句:


INSERT INTO `dt_read` (`time`, `a_id`) VALUES ('2018-4-28', 260218)


不建索引的情况下:

> 时间: 0.01s


仅创建索引(`time`)的情况下:

> 时间: 0.01s


同时创建索引(`time`)和索引(`time`, `a_id`)的情况下:

> 时间: 0.01s


UPDATE `dt_read` SET `time` = '2018-4-28' WHERE `id` = 20000000(注:存在该 id 值的记录)


不建索引的情况下:

> 时间: 0.01s


仅创建索引(`time`)的情况下:

> 时间: 0.01s


同时创建索引(`time`)和索引(`time`, `a_id`)的情况下:

> 时间: 0.01s


虽然在 INSERT / UPDATE / DELETE 时数据库会更新索引,但从实测数据来看,索引对其效率的影响可忽略不计。


一些误区


“in 语法效率很低”?

in 语法也是应用索引的,网传 in 会比一个一个 WHERE OR 要慢得多的说法是不靠谱的。in 主键和 in 索引同理。


另外:

对于字符串类型,LIKE '%abc%' 是不能应用索引的,但 LIKE 'abc%' 可以。更多关于字符串类型的索引,请查阅全文索引(FULLTEXT)。

索引的字段是可以指定长度的,类似字符串索引指定前面若干唯一字符就可以优化效率。


本文系个人实践总结,欢迎批评指正!


xoyozo 7 年前
3,712

I`L8{$7ET7)3BUEREPIWIKB.png

ASP.NET MVC 项目发布到 IIS 上,出现服务器错误“403 - 禁止访问:访问被拒绝”,排除权限设置问题后,原因在于 MVC 的 URL 通常没有扩展名,IIS 并未将其交由 ASP.NET 托管处理。

经过各种找资料,各种尝试后,最终确定:项目本身没有问题,本地运行正常,发布到另一台服务器上正常。

删除服务器 IIS 上的该网站和应用程序池,重新创建网站,恢复正常。原因未知。

xoyozo 7 年前
7,956

在网站开发过程中遇到上传图片等文件的功能,需要在服务器上设置该目录可写入,并且必须防止被上传 .php 等可执行的脚本文件。

根据文件所有者的不同,我们分两种情况讨论:

一、程序上传的用户与执行 PHP 的用户不同(例如程序代码通过 SSH 上传(root 用户),而 PHP 以 www 身份运行)

由于 Linux 上的文件默认权限是 644,目录默认权限是 755,所以在这种情况下,PHP 不能修改 root 上传的程序文件,也不能将客户端上传的图片文件保存到服务器上。

例如我们将客户端上传的文件指定到 /upload/ 目录,那么,

第 1 步,赋予它写入权限:

chmod 777 upload

递归所有子目录请加 -R 参数,但会将文件也更改为 777,赋予了执行权限,这是不建议的。文件若需写入权限请设为 666。

第 2 步,设置该目录下不允许执行 PHP:

我们无法保证客户端上传完全符合我们要求的文件,那么必须禁止任何文件的执行权限。(此处指 PHP 的执行权限,注意与 sh 执行权限的区别,后者由 chmod 命令修改)

nginx 的 .conf 文件配置示例:

location ~ /upload/.*\.(php|php5)?$
{
    deny all;
}

Apache 的 .htaccess 文件配置示例:

RewriteRule upload/(.*).(php)$ – [F]

特别注意:上面的代码必须加在 PHP 引用配置的上方才有效(如 nginx 的 PHP 引用配置 include enable-php-**.conf;

默认 Linux 系统是大小写敏感的,所以规则中的正则表达式无须忽略大小写(但必须与实际的目录或文件名大小写一致),因为 MIME 类型中设置的是小写的 .php,那么类似大写的 .PHP 文件是不被 php-fpm 解释的,结果是被当作普通文本返回到客户端。

提问:有些目录需要设置为可写入,但里面还有正常的 php 文件,禁止执行会有问题吗?(例如 Discuz! 的 config 目录,ThinkPHP 的 Runtime 目录)

解答:以 Discuz! 为例,config 下面虽然有 config_*.php 等配置文件,但这些文件并非直接供客户端浏览,而是被其它 .php 文件引用(include 方式、IO 方式等),当 config 目录禁止执行 PHP 后并不会对它们造成影响。

我们在开发程序的过程中应避免在允许写入的目录下放置直接供客户端浏览的 .php 文件

二、程序上传的用户与执行 PHP 的用户相同(例如程序代码通过 FTP 上传,且和 PHP 一样,都使用 www 用户)

常见于虚拟空间。这种情况下,通过 PHP 上传的文件可以保存到该网站下面的任何目录下(甚至是网站目录之外,即传说中的跨站),原因大家都懂,默认 755 中第一个是“7”,即所有者拥有写入权限。

因此,除了做到上述设置,我们必须严格控制客户端上传文件的保存路径,做到以下几点:

必须更改客户端上传的文件名,而非直接使用原文件名;

不得从客户端文件名获取扩展名,或者只控制允许的后缀名。

最可靠的文件类型判别方式是分析文件签名,参考:文件签名表,以防篡改后缀名欺骗。

举个早期的栗子:上传文件名为 abc.asp;.jpg,未改文件名保存到服务器,浏览器直接访问该文件,IIS 6 当作 abc.asp 来解析。


xoyozo 7 年前
9,188

ThoughtWorks.QRCodeZXing.Net
生成方式以指定的码元大小、版本、模式、纠错级别等信息来确定最终生成的图片大小指定图片大小后,自动调整码元大小、出血*
关于图片尺寸不能直接确定最终生成的二维码图片的尺寸,可以先反向估算码元大小,再微调码元大小,直到不小于目标尺寸,如果必须严格限制尺寸,建议在 jpg 方式处理,因为 png 二维码的每个像素点非 0 即 1,在小尺寸的情况下会导致无法识别。(涉及到多次生成二维码,请斟酌性能消耗)生成二维码时即指定图片大小,但会留白,比较难以掌控实际效果
"BUG"右边和下边有多余 1 像素需要手动去除虽然可以设置参数 EncodeHintType.MARGIN,但还是没有达到预期的效果(网上有解析原因,请自行搜索)
……

*出血:为了提高二维码识别度,在生成的二维码四周留出若干码元(建议 4 个)空白。

更多

使用 ThoughtWorks.QRCode 生成二维码

使用 ZXing.Net 生成二维码







xoyozo 7 年前
6,233

经常会看到这样似错非错的提示:

当前上下文中不存在名称"__o"

The name '__o' does not exist in the current context

image.png

实际上,我没有定义任何名为 __o 的变量。

发生这种情况的原因可能是使用了类似如下的代码:

<% if(true) { %>
<%= 1 %>
<% } %>
<%= 2 %>

为了在设计界面的 <%= %> 代码块中提供智能感知,ASP.NET(VB 或 C#)会自动生成一个名为“__o”的临时变量,这在页面编译器看到第一个 <%= %> 块时就完成了。但是在这里,<%= %> 块在 if 中出现,所以当关闭 if 后再使用 <%= %> 时,变量超出了定义的范围。

if (true)
{
    object @__o;
    @__o = 1;
}
@__o = 2;

解决方法:在页面的早期添加一个虚表达式。例如:<%= "" %>。这将不会呈现任何内容,并且它将确保在任何潜在的 if(或其他范围界定)语句之前,在 Render 方法中将 __o 声明为顶级。


当然还有一种治标不治本的方法就是隐藏这些错误提示(这并不影响程序正常运行):

点击错误列表面板左上角的过滤器按钮,CS0103,其中包含错误代码:当前上下文中不存在名称"__o",这些错误将不再显示,您仍然可以有其他 IntelliSense 错误和警告。

I
转自 IT屋 7 年前
5,588
  1. 下载 Senparc 官方 Sample


  2. 打开:\WeiXinMPSDK-master\src\Senparc.Weixin.MP.Sample\Senparc.Weixin.MP.Sample.sln


  3. 工具 - NuGet 包管理器 - 管理解决方案的 NuGet 程序包 - 更新

    选择所有的包(Microsoft.Net.Http 无法更新,暂不勾选),更新

    Microsoft.Net.Http 是个老顽固,无法更新也无法卸载,原因是它的语言包 Microsoft.Net.Http.zh-Hans 无法安装。我们切换到“已安装”选项卡,搜索“Microsoft.Net.Http”,选中 Microsoft.Net.Http.zh-Hans 并卸载它,现在我们可以更新 Microsoft.Net.Http 了。


  4. 【可能】运行报错:

    “/”应用程序中的服务器错误。

    配置错误

    说明: 在处理向该请求提供服务所需的配置文件时出错。请检查下面的特定错误详细信息并适当地修改配置文件。 

    分析器错误消息: 创建 system.web.webPages.razor/host 的配置节处理程序时出错: 未能加载文件或程序集“System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35”或它的某一个依赖项。找到的程序集清单定义与程序集引用不匹配。 (异常来自 HRESULT:0x80131040)

    源错误: 

    行 4:    <configSections>
    行 5:      <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
    行 6:        <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
    行 7:        <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
    行 8:      </sectionGroup>


    源文件: E:\WeiXinMPSDK-master\src\Senparc.Weixin.MP.Sample\Senparc.Weixin.MP.Sample\views\web.config    行: 


    展开 Senparc.Weixin.MP.Sample 引用,查看 System.Web.Razor 的属性,复制版本号。打开 \views\web.config,修改 System.Web.WebPages.Razor 的 Version(有 3 处)。


  5. 对于小型开发项目来说,我习惯将所有代码放在同一个项目(Project)中来,所以做了以下处理:(盛派官方分离这些代码是为了同时供 MVC 和 WebForms 重用)

    在 Senparc.Weixin.MP.Sample 中添加文件夹 CommonService,将 Senparc.Weixin.MP.Sample.CommonService 项目中的文件夹和文件(.config 除外)拖到 CommonService 文件夹中。

    卸载 Senparc.Weixin.MP.Sample.CommonService 项目并删除引用。


  6. 在解决方案的 Libraries 文件夹中,我们看到 Sample 项目了以下功能模块,这些就是 Senparc.Weixin 的源代码,如果不需要修改,可以卸载它们改为使用从 NuGet 获取,以便随时更新到最新版本:

    Senparc.WebSocket

    Senparc.Weixin

    Senparc.Weixin.MP

    Senparc.Weixin.MP.MvcExtension NuGet 中对应的包名为:Senparc.Weixin.MP.MVC

    Senparc.Weixin.Open

    Senparc.Weixin.Work

    Senparc.Weixin.WxOpen

    Senparc.Weixin.Cache.Memcached

    Senparc.Weixin.Cache.Redis

    卸载这些项目,并在 NuGet 中安装这些模块(搜索“Senparc.Weixin”第一页都在了,认准作者 Jeffrey Su)

    单元测试项目中的引用也按需更换,当然也可以卸载这些单元测试项目(视情况保留 Senparc.Weixin.MP.Sample.Tests) 。


  7. 【可能】运行报错


    HTTP Error 500.19 - Internal Server Error

    无法访问请求的页面,因为该页的相关配置数据无效。

    配置源:

    134:     </sessionState>

    135:   <sessionState customProvider="Memcached" mode="Custom">

    136: <providers>


    可以在 Global.asax 的 RegisterWeixinCache() 中修改 Memcached 配置。

    或者打开 Web.config,找到 Memcached 所在的 sessionState 标签,注释掉,这样程序自动使用上方的 InProc(应用进程内)。

    如果开启了 ASP.NET State Service 服务,那么建议改用 StateServer,与 Custom 一样需要序列化,方便日后改用 Memcached 或 Redis。


  8. 再次更新 NuGet,否则会提示无法加载 Enyim.Caching 的错误(报错行:MemcachedObjectCacheStrategy.RegisterServerList(memcachedConfig);)。


  9. 接下来,进入微信公众平台,在左侧 开发 - 基本配置 中设置相关参数(填写“服务器地址(URL)”如“https://weixin.xoyozo.net/weixin/”),打开 Sample 项目中的 Web.config,配置我们的公众号参数。


  10. 将项目发布到服务器上,尝试向公众号发送消息吧。


  11. 单元测试

    设置单元测试中的公众号配置项:打开 Senparc.Weixin.MP.Test/CommonAPIs/CommonApiTest.cs,在 AppConfig 方法中可以看到支持两种配置方式,在 Senparc.Weixin.MP.Test/Config/test.config 配置文件中配置,或直接在 CommonApiTest.cs 文件中配置,前者格式如下,后者建议只在个人测试项目中使用。

    <Config>
      <AppId>YourAppId</AppId>
      <Secret>YourSecret</Secret>
      <MchId>YourMchId</MchId>
      <TenPayKey>YourTenPayKey</TenPayKey>
      <TenPayCertPath>YourTenPayCertPath</TenPayCertPath>
      <!-- 小程序 -->
      <WxOpenAppId>YourOpenAppId</WxOpenAppId>
      <WxOpenSecret>YourWxOpenSecret</WxOpenSecret>
    </Config>

    另外,将 _testOpenId 值改为自己的微信号在本公众号上的 openid。


  12. 微信网页授权(OAuth2)

    打开 OAuth2Controller 控制器,将“Index”Action 中的盛派的网址(有 2 处)改成:

    Request.Url.Scheme + "://" + Request.Url.Authority + "/Oauth2/……


  13. 未完待续……

xoyozo 7 年前
6,092