陌桑 - 一个人的力量在于他的思想

table doesn’t exist,mysql文件备份导入的问题

By heiry on 2017-11-21 in 技术

今天在兆维工业园IDC帮一位朋友迁移web服务器，他将之前拷贝的mysql数据库文件还原到新服务器中，结果有部分表在PHPmyadmin中没显示，而用Navicat 连接，能看到表，却打不开，提示”table doesn’t exist”。web应用显然不能正常运行。为何会这样，明明有表，却不能显示或是doesn’t exist？

我们知道，MySQL备份可直接拷贝datadir下的数据库文件，还原时将拷贝文件放到mysql下的data目录下就可以。但是今天却出现这种情况，是什么原因？

MySQL存储引擎分MyISAM与InnoDB，两种类型最主要的差别就是Innodb 支持事务处理与外键和行级锁，而MyISAM不支持。MyISAM类型的表强调的是性能，其执行速度比InnoDB类型快，但是不提供事务支持。

MyISAM类型的表，都对应data下的一个文件夹，文件夹名字就是表名，数据存储在该文件夹下三个”Table.frm”,”Table.MYD”,”Table.MYI”中;InnoDB的表，数据和结构是分别存储的，数据存储在ibdata1文件中（默认），而结构存储于.frm文件中。

我们常用的直接拷贝”Table.frm”,”Table.MYD”,”Table.MYI”方式来备份数据库，对MyISAM类型是有效的。但是对于InnoDB的表，还必须拷贝ibdata1文件。

之所以出现上面提到的问题，原因就是在于有部分是InnoDB表，却没有拷贝ibdata1文件。

出现错误后，直接拷贝ibdata1文件覆盖，还是问题依旧，这时只要删除log文件（ib_logfile*）就可以了。

这其实也是我多年前遇到的问题，当时备份数据库没注意，没有拷贝ibdata1，导致很多数据丢失，是得了教训的。

数据库备份一定要十分小心，不仅要测试，还要多种方式备份，最为稳妥的是导出sql文件，或用专业备份工具，多种形式备份。

Google Material Design的设计思路

By heiry on 2017-10-21 in 设计

产品图标网格已经形成了一致的标准，且建立了一套明确的图形元素定位规则。这种标准化带来了灵活，而连贯的系统。

以上已经是全尺寸比例高宽网格图可以右击另存作为参考图使用

网格

关键线的形状

关键线的形状是网格的基础。利用这些核心形状做为向导，即可使整个相关产品的图标保持一致的视觉比例。

方形

高&宽: 152

圆形

直径: 176

竖直矩形

高:176 宽:128

水平矩形

高:128 宽:176

DP 单位网格

设备上的启动器以 48dp 的尺寸显示产品图标 (边缘 1dp)，所以当你创建图标时，请使用 48dp 的尺寸，必要时可将其放大 400% 到 192 x 192 dp (边缘变位 4dp)。

保持这样的放缩比即可在尺寸在缩小时保持边缘的锋利和对齐的正确性。

1:1 单元网格

4:1 单元网格

几何

我们为这几种特定的关键线制定了预设规则：圆形线、方形线、矩形线、正交线和对角线。这个通用且简洁的元素调板形成的目的是统一产品图标和规范它们在网格上的布置。

为什么要这样设计？以上右图著名的视觉错觉案例可以例证：

一样长的线段不同的视觉表现产生不一样的视觉感知，矩形的视觉感知面积相对大，所以相对网格线居中定格最小部分来设计来达到各种其他形状样式的图标统一感。

内容区域

内容应该保持在活动区域以内，如有必要，内容可以延展至修饰区域之中，但不能超出。

活动区域

修饰区域

关键线形状

关键线形状是网格的基础，通过关键线，即可保持系统图标的一致性。

方形

宽&高：18px

圆形

直径：20px

竖直矩形

高：20px, 宽：16px

竖直矩形

高：20px, 宽：16px

几何

我们为这几种特定的关键线制定了预设规则：圆形线、方形线、矩形线、正交线和对角线。这个通用且简洁的元素调板形成的目的是统一 Google 系统图标和规范它们在网格上的布置。

构建

组成

系统图标剖析

笔划末端
角
留白
笔触
内部角
边界区域

角

一致的圆角半径（2px）是统一全系列系统图标的关键，不要修改它。

图标内部的角应为直角，也不要修改它。

外部角

內部角

笔触

一致的画笔宽度（2px）也是统一全系列系统图标的关键，请在内外部的边角上保持使用2px的宽度。

一致

折线和角

笔划末端

内部角

视觉校正

极端情况下必要的校正能够增加图标的清晰度。如有必要，需与其他图标保持一致的几何形状，不要加以扭曲。

复杂

缩小

清空

为了可读性和触摸操作的需要，图标周围可以留有一定的空白区域。

清空区域

放置

———————————————————————————————-

最佳范例

一致的图标可以有利于用户理解，在不同应用中也尽量使用已有的系统图标。

(上图)可取

使用相同的画笔宽度以及方形的笔划末端。

(上图)不可取

不要使用不相同的画笔宽度以及非方形的笔划末端。

(上图)可取

让图标显得正面且坚定。

(上图)不可取

不要倾斜、旋转图标，或是让图标显得立体。

(上图)可取

简化图标使其更具清晰度和可读性。

(上图)不可取

不要过度拟物化使得图标复杂。

(上图)可取

让图标更加几何化而变得更加显眼。

(上图)不可取

不要过度精细，使用过细画笔宽度。

(上图)可取

使用一致的几何形状。

(上图)不可取

不要使用过于松散的形状。

(上图)可取

让图标在像素点上（X、Y 坐标值不包含小数）。

图标应有相等的宽高(e.g. 24×24)，避免扭曲。

(上图)不可取

图标不在像素点上。

宽高不等。

相近性在设计中的应用

By heiry on 2017-10-21 in 设计

格式塔理论的相近性原则告诉我们，我们的大脑会将距离相近的各部分元素组成一个整体。

相近性原则：

当分离的各个元素接近的时候，他们便呈现一个整体的形象，就算这些元素看起来不一样。

相近掩盖差别：

利用相近性我们将不同的字母、形状及颜色元素组成一个标志。

尽管上述各个字母的形态并不一样，但是由于各个元素距离相近，我们在识别时仍会将其看作一个完整的词组。

尽管上述右边的标志是由不同形状及颜色的元素结合，但相近性原则使我们能够清晰识别出一个房子的轮廓。

组合相关元素：

将元素相合，能够创造出更有条理的展示，不但更具美感，也使读者在观看时更加轻松。

改造前的名片

缺乏联系的设计：

上面的这个设计仅仅是考虑如何填满版面，而联系信息却被分割成三块元素，这使到观看的人会花额外的精力将这些信息元素组合在一起。

改造后的名片

产生联系的设计：

将相关的文字元素且合起来，立即就产生了一种清晰的阅读效果，现在名片上的联系信息能够轻松地让人从上到下观看。上面竖版的排列中，标志形成了一个视觉焦点，所以我们的眼睛首先会移到上面观看，然后很自然地由上到下地阅读下面的联系信息。

白色背景的重要性：

相近性原则也取决于元素在背景上不同位置的放置，从而使人们获得各种不同的信息组合，而最清晰的效果就是利用白色背景来区分这些组合。

在上面这个关于学习提升的宣传单张中，我们通过元素的属性来将上方的文字区域A作为一个相近性的组合，也将其视作一个单独的组合，尽管B也是一堆文字，甚至两者的文字意思也接近，但我们并不会将A与B看作一个整体。

文章来源: http://www.sj33.cn/article/sjll/201707/47665.html

“触动人心的设计”的方法

By heiry on 2017-10-17 in 设计

原文作者：阿里 B2B_UED团队
原文标题：《“触动人心的设计”方法初步探究》

用户体验设计的精髓，在于恰到好处的设计出最合适的用户场景体验，而这种体验是不知不觉给予用户同时能让用户在触点的那个瞬间怦然心动，那如何让用户心动呢？

古人云：“动人心者，莫先乎情。”，同样的我们从约翰.奈斯比特的语言中窥见：”无论何处都需要高补偿的情感，社会中高技术的越多，我们就越渴望高情感的环境，用设计软性的一面来平衡技术硬的一面。设计作为人的创造性活动，不是摒除激情或者情感，而是要创造一种中性的、能容纳和激起使用者情感的东西，这种东西是一种境界。”

因此，我们1688UED在2014年组建了人文情怀课题研究小组专门来探讨如何进行“触动人心的设计”,课题研究的范围从马斯诺需求到各种效应理论以及设计心理学,大家在浩瀚的知识学说中徜徉，并不断碰撞产生了各种的灵感火花，最后得到了一个关于“DesignO2O”的设计思路以及“CORE”的方法模型，同时找到了如何验证我们“触动人心的设计”是否有效方法。

DesignO2O这个思路是由课题小组不离同学提出的也是我们整个设计方法的理论基石。(见下图)

人的大脑是个超级存储器，总是通过五感接受信息，被大脑识记，并且保存在记忆当中，五感由于我们是从事互联网设计行业，都是偏电脑页面的一些设计，所以主要能发挥的是视觉和听觉，线下某些实物的工业设计还会有嗅觉，味觉，触觉等等。图中的“识记-保存-重现”是人类记忆的主要过程，重现包括回忆和再认两个环节，我们这里提到的主要是指回忆，是在一定诱因的作用下，过去经历的事物在头脑中的再现过程。拥有记忆的人通过看见了一些事物或者听见了某些信息，和大脑保存的过去进行了重合配对，唤醒了记忆，那些画面会被重现，在这个过程中你的大脑已经不知不觉中招了、被刺激了，重现的画面在你的脑海里久久不能离去，以至于让你做出一些意想不到的事，就是我们说的情绪行为，以我们自身为例，影响的就是购买决策，在我们的平台上就有一群这样的用户，人称“月光族，剁手党”…所以我们发现对于一个完全没有记忆的人来说，其实是很难触动情感的。通过大量的案例收集和讨论给这样的方式在设计中的运用总结为“DESIGNO2O”，offline2online，就是刚才所说的过程，这个过程转化为设计就是把线下的场景或者人物或者事件等等还原到我们的设计中，公式就是要简单好记，才能被广泛引用，这也是O2O业务模式的设计延伸，也同样印证了一句哲学思想：everything is connected。万事万物都是互相联系的。

超大流量网站PHP到Node 的迁移

By heiry on 2017-10-15 in 技术

转自：http://taobaofed.org/blog/2016/06/02/thing-about-taobao-homepage/

作者：淘宝前端团队阎王原题《聊一聊淘宝首页和它背后的一套》

一、相关背景介绍

淘宝首页是淘宝的门面，承载着几乎淘系所有业务的入口，流量很大，量级单位为亿。近几年无线端崛起，业务重点开始向无线终端偏移（目前不能叫偏移，基本以无线为主了），所以淘宝 PC 端首页的流量也有削减，不过即便如此，它的日均 PV 依然相当高。

淘宝首页一向是内部平台和技术的试验田，它一直在变化着。最新的框架和系统都会找淘宝首页试点，可以试想下，如果某一项需要推动的升级或者优化措施在淘宝首页已经上线，并且拿到了良好的数据和稳定性，其他业务还有什么理由不去尝试和更迭呢？同时，去年一年身在淘宝前端的技术架构组，自然而然也会主动去 push 一些实验性的内容到业务上。

淘系的站点页面包括首页、其他频道页和活动页等，这些页面并不都由淘宝前端一行一行的代码码出来，业务如此之多，这种玩法即便人数 double 也忙不过来。事实上，大多数页面都是依托内部的搭建平台——运营或者前端通过模块搭建的方式——构建的，而前端 focus 的重点在于搭建平台的建设自身以及模块的通用性和复用率的保障，当然，还有一些工程化的东西。

使用搭建平台搭建的页面，前端只需要考虑组成页面的原子模块的开发，整体的渲染由搭建平台提供的统一脚本全权负责。而在淘宝首页上，考虑到页面模块数量巨多，加上还有少量跨部门、跨团队的沟通，渲染模型略微不同。

二、淘宝首页的整体变迁

背景中提到，淘宝首页依托于内部搭建平台，它的变迁自然也是跟着搭建系统的变化而变化的。

1. PHP 下的淘宝首页

接手淘宝首页不久，便遇到了一年一度的改版，那时它还运行在 PHP 环境中。这里需要说明的是，淘宝首页的所有代码完全由前端掌控，前端不会直接跟数据库打交道，其数据来源分为两部分。

数据来源

一是 运营填写的数据。 采用前端挖坑的形式，预留坑位让运营获取填写数据，如（伪代码）：

  
<?php $info = Person('name:String:姓名,age:Number:年龄', '个人信息坑位填写');?>

<div>
<?php $info.forEach(index) { ?>
  Name: <?= info[index].name ?>, Age: <?= info[index].age ?>
<?php } ?>
</div>

  
<?php $info = Person('name:String:姓名,age:Number:年龄', '个人信息坑位填写');?>

<div>
<?php $info.forEach(index) { ?>
  Name: <?= info[index].name ?>, Age: <?= info[index].age ?>
<?php } ?>
</div>

设计中的视觉误差

By heiry on 2017-10-15 in 设计

转自：http://www.shejidaren.com/ui-shi-jie-wu-cha.html

1. 物理尺寸与视觉尺寸

长宽 400px 的正方形与长宽 400px 的圆形哪一个更大？假如这样问你的话，那么正确答案当然是一样大。但是来看看下面这张图，长宽各 400px 的两个图形看起来并不一样大。你的眼睛告诉你 400px 的正方形比 400px 的圆形更大一些。物体的物理尺寸是一样的，但视觉尺寸却有可能不一样的。

为了更加准确地证明这个现象的存在，下面这张图给出辅助线，大家好好看看。

我们改变一下圆形的尺寸，看看现在这两个图形的视觉尺寸有没有更接近一些？

每个人的感官可能都不一样，但对于我来说，调整尺寸的后的两个图形看起来才是一样大的，至少也不会像图一一样，让人第一眼就认为正方形比较大。为啥会这样？因为我将圆的直径增加了 50px。

现在我们将图形都叠起来看，看看为什么会产生这种那么明显的误差。400px 的两个图形叠在一起，你会发现整个圆形都被包裹在了正方形之内，而正方形多出的四个面积巨大的 a 区域就是造成这种视觉误差的原因。再将 400px 的正方形与 450px 的圆形叠在一起，正方形无法将整个圆形包裹在内了，圆形超出的四个 b 区域又与正方形多出来的 a 区域在视觉上互相抵消，所以 450px 的圆形与 400px 的正方形在视觉尺寸上更接近，也就是我们常说的“一样大”。

不仅是圆与方，所有的图形都能够造成这样的偏差。当我们追求“看起来一样大”这个目标的时候，某些形状的物理尺寸应该更大一些。

这个现象对于界面造成的设计会有哪一些呢？譬如说，当绘制一套 icon 的时候，我们当然是追求每个 icon 都看起来一样大对吧？但假如我们只通过物理尺寸来进行量度的画，画出来的 icon 必然会个大个小，乌七八糟，更伤的是，这种问题经常发生，手机里随便打开个 app 都能发现这样的问题。

锵锵四人行

By heiry on 2017-10-06 in 随写

人生总有起落，生活总需要面对，有时候我们需要一些激情。