标定原理介绍
摄像机小孔模型&
标定程序1（opencv自带的示例程序）
读者可以直接使用Opencv自带的摄像机标定示例程序，该程序位于 &\OpenCV\samples\c目录下的calibration.cpp&，程序的输入支持直接从USB摄像机读取图片标定，或者读取avi文件或者已经存放于电脑上图片进行标定。
编译运行程序，如果未设置任何命令行参数，则程序会有提示，告诉你应该在你编译出来的程序添加必要的命令行，比如你的程序是calibration.exe(以windows操作系统为例）。则你可以添加如下命令行（以下加粗的字体所示）：
calibration&-w 6 -h 8 -s 2 -n 10 -o camera.yml -op -oe [&list_of_views.txt&]
调用命令行和参数介绍
Usage: calibration
-w &board_width&
# 图片某一维方向上的交点个数
-h &board_height&
# 图片另一维上的交点个数
[-n &number_of_frames&]
# 标定用的图片帧数
# (if not specified, it will be set to the number
of board views actually available)
[-d &delay&]
# a minimum delay in ms between subsequent attempts to capture a next view
# (used only for video capturing)
[-s &square_size&]
# square size in some user-defined units (1 by default)
[-o &out_camera_params&] # the output filename for intrinsic [and extrinsic] parameters
# write detected feature points
# write extrinsic parameters
# assume zero tangential distortion
[-a &aspect_ratio&]
# fix aspect ratio (fx/fy)
# fix the principal point at the center
# flip the captured images around the horizontal axis
[input_data]
# 输入数据，是下面三种之中的一种:
- 指定的包含图片列表的txt文件
- name of video file with a video of the board
# if input_data not specified, a live view from the camera is used
标定图片示例
上图中，横向和纵向分别为9个交点和6个交点，对应上面的命令行的命令参数应该为：&-w 9 -h 6。
经多次使用发现，不指定 -p参数时计算的结果误差较大，主要表现在对u0,v0的估计误差较大，因此建议使用时加上-p参数
list_of_views.txt
该txt文件表示的是你在电脑上面需要用以标定的图片列表。
view000.png
view001.png
#view002.png
view003.png
view010.png
one_extra_view.jpg
上面的例子中，前面加&井号&的图片被忽略。
在windows的命令行中，有一种简便的办法来产生此txt文件。在CMD窗口中输入如下命令（假设当前目录里面的所有jpg文件都用作标定,并且生成的文件为a.txt）。
dir *.jpg /B && a.txt
输入为摄像机或者avi文件时
"When the live video from camera is used as input, the following hot-keys may be used:\n"
&ESC&, 'q' - quit the program\n"
'g' - start capturing images\n"
'u' - switch undistortion on/off\n";
请直接复制&calibration.cpp&中的相关代码。
OPENCV没有提供完整的示例，自己整理了一下，贴出来记录。
首先自制一张标定图片，用A4纸打印出来，设定距离，再设定标定棋盘的格子数目，如8&6，以下是我做的图片8&8
然后利用cvFindChessboardCorners找到棋盘在摄像头中的2D位置，这里cvFindChessboardCorners不太稳定，有时不能工作，也许需要图像增强处理。
计算实际的距离，应该是3D的距离。我设定为21.6毫米，既在A4纸上为两厘米。
再用cvCalibrateCamera2计算内参，
最后用cvUndistort2纠正图像的变形。
结果如下：
具体的函数使用，请参考
每个摄像机都有唯一的参数，例如，焦点，主点以及透镜的畸变模型。查找摄像机内参数差的过程为摄像机的标定；对基于增强现实的应用来讲，对摄像机标定很重要，因为它将透视变换和透镜的畸变都反映在输出图像上。为了让用户在增强现实应用中获得更佳的体验
，应该用相同的透视投影来增强物体的可视化效果；标定摄像机需要特殊的模式图像，例如：棋盘板或具有白色背景的黑圆圈，被标定的摄像机需要从不同的角度对特殊模式图像拍摄 10-15张照片，然后通过标定算法来找到最优的摄像机内部参数和畸变向量。&
Show the distortion removal for the images too. When you work with an image list it is not possible to remove the distortion inside the loop. Therefore, you must do this after the loop. Taking advantage of this now I&ll expand the&&function, which is in fact first calls&&to find transformation matrices and then performs transformation using&function. Because, after successful calibration map calculation needs to be done only once, by using this expanded form you may speed up your application:
if( s.inputType == Settings::IMAGE_LIST && s.showUndistorsed )
Mat view, rview, map1, map2;
initUndistortRectifyMap(cameraMatrix, distCoeffs, Mat(),
getOptimalNewCameraMatrix(cameraMatrix, distCoeffs, imageSize, 1, imageSize, 0),
imageSize, CV_16SC2, map1, map2);
for(int i = 0; i & (int)s.imageList.size(); i++ )
view = imread(s.imageList[i], 1);
if(view.empty())
remap(view, rview, map1, map2, INTER_LINEAR);
imshow("Image View", rview);
char c = waitKey();
== ESC_KEY || c == 'q' || c == 'Q' )
关于精度的说法http://stackoverflow.com/questions//how-to-verify-the-correctness-of-calibration-of-a-webcam
Hmm, are you looking for "handsome" or "accurate"?
Camera calibration is one of the very few subjects in computer vision where accuracy can be directly quantified in physical terms, and verified by a physical experiment. And the usual lesson is that (a) your numbers are just as good as the effort (and money) you put into them, and (b) real accuracy (as opposed to imagined one) is expensive, so you should figure out in advance what your application really requires in the way of precision.
If you look up the geometrical specs of even very cheap lens/ccd combos (in the megapixel range and above), it becomes readily apparent that sub-sub-mm calibration accuracies are theoretically achievable within a table-top volume of space. Just work out (from the spec sheet of your camera's sensor) the solid angle spanned by one pixel - you'll be dazzled by the spatial resolution you have within reach of your wallet. However, actually achieving REPEATABLY something near that theoretical accuracy takes work.
Here are some recommendations (from personal experience) for getting a good calibration experience with home-grown equipment.
If your method uses a flat target ("checkerboard" or similar), manufacture a good one. Choose a very flat backing (for the size you mention window glass 5 mm thick or more is excellent, though obviously fragile). Verify its flatness against another edge (or, better, a laser beam). Print the pattern on thick-stock paper that won't stretch too easily. Lay it after printing on the backing before gluing and verify that the square sides are indeed very nearly orthogonal. Cheap ink-jet or laser printers are not designed for rigorous geometrical accuracy, do not trust them blindly. Best practice is to use a professional print shop (even a Kinko's will do a much better job than most home printers). Then attach the pattern very carefully to the backing, using spray-on glue and slowly wiping with soft cloth to avoid bubbles and stretching. Wait for a day or longer for the glue to cure and the glue-paper stress to reach its long-term steady state. Finally&measure&the corner positions with a good caliper and a magnifier. You may get away with one single number for the "average" square size, but it must be an average of actual measurements, not of hopes-n-prayers. Best practice is to actually use a table of measured positions.
Watch your temperature and humidity changes: paper adsorbs water from the air, the backing dilates and contracts. It is amazing how many articles you can find that report sub-millimeter calibration accuracies without quoting the environment conditions (or the target response to them). Needless to say, they are mostly crap. The lower temperature dilation coefficient of glass compared to common sheet metal is another reason for preferring the former as a backing.
Needless to say, you must&disable the auto-focus&feature of your camera, if it has one: focusing physically moves one or more pieces of glass inside your lens, thus changing (slightly) the field of view and (usually by a lot) the lens distortion and the principal point.
Place the camera on a stable mount that won't vibrate easily. Focus (and f-stop the lens, if it has an iris) as is needed for the application (not the calibration - the calibration procedure and target must be designed for the app's needs, not the other way around). Do not even&think&of touching camera or lens afterwards. If at all possible, avoid "complex" lenses - e.g. zoom lenses or very wide angle ones. Fisheye or anamorphic lenses require models much more complex than stock OpenCV makes available.
Take lots of measurements and pictures. You want hundreds of measurements (corners) per image, and tens of images. Where data is concerned, the more the merrier. A 10x10 checkerboard is the absolute minimum I would consider. I normally worked at 20x20.
Span the calibration volume when taking pictures. Ideally you want your measurements to be uniformly distributed in the volume of space you will be working with. Most importantly, make sure to angle the target significantly with respect to the focal axis in some of the pictures - to calibrate the focal length you need to "see" some real perspective foreshortening. For best results use a repeatable mechanical jig to move the target. A good one is a one-axis turntable, which will give you an excellent prior model for the motion of the target.
Minimize vibrations and associated motion blur when taking photos.
Use good lighting. Really. It's amazing how often I see people realize late in the game that you need photons to calibrate any camera :-) Use diffuse ambient lighting, and bounce it off white cards on both sides of the field of view.
Watch what your corner extraction code is doing. Draw the detected corner positions on top of the images (in Matlab or Octave, for example), and judge their quality. Removing outliers early using tight thresholds is better than trusting the robustifier in your bundle adjustment code.
Constrain your model if you can. For example, don't try to estimate the principal point if you don't have a good reason to believe that your lens is significantly off-center w.r.t the image, just fix it at the image center on your first attempt. The principal point location is usually poorly observed, because it is inherently confused&with&the center of the nonlinear distortion and&by&the component parallel to the image plane of the target-to-camera's translation. Getting it right requires a carefully designed procedure that yields three or more independent vanishing points of the scene&and&a very good bracketing of the nonlinear distortion. Similarly, unless you have reason to suspect that the lens focal axis is really tilted w.r.t. the sensor plane, fix at zero the (1,2) component of the camera matrix. Generally speaking, use the simplest model that satisfies your measurementsand&your application needs (that's Ockam's razor for you).
When you have a calibration solution from your optimizer with low enough RMS error (a few tenths of a pixel, typically, see other answer below), plot the XY pattern of the residual errors (predicted_xy - measured_xy for each corner in all images) and&see if it's a round-ish cloud centered at (0, 0). "Clumps" of outliers or non-roundness of the cloud of residuals are screaming alarm bells that something is very wrong - most likely outliers, or an inappropriate lens distortion model.
Take extra images to verify the accuracy of the solution - use them to verify that the lens distortion is actually removed, and that the planar homography predicted by the calibrated model actually matches the one recovered from the measured corners.
There is a problem with your camera calibration:&cv::calibrateCamera()&returns the root mean square (RMS) reprojection error [1] and should be between 0.1 and 1.0 pixels in a good calibration. For a point of reference, I get approximately 0.25 px RMS error using my custom stereo camera made of two hardware-synchronized Playstation Eye cameras running at the 640 x 480 resolution.
Are you sure that the pixel coordinates returned by&cv::findChessboardCorners()&are in the same order as those in&obj? If the axes were flipped, you would get symptoms similar to those that you are describing.
[1]: OpenCV calculates reprojection error by projecting three-dimensional of chessboard points into the image using the final set of calibration parameters and comparing the position of the corners. An RMS error of 300 means that, on average, each of these projected points is 300 px away from its actual position.
==========================================================================通过查资料看文档，自己的使用流程总结下==================================================================================
手工标定摄像机说明
工具：摄像头一个; &黑白棋盘纸一张，明确知道横纵方向内格的交点个数以及方块的 面积大小；
标定的流程：
启动命令行窗口，目录切换到有D:\workSpace\cameraCalibation\x64\Debug\
执行命令(calibration &-w=10 -h=7 -s=1 -o=camera.yml -op -oe &-p) ，
& & & 对参数进行简单的说明：
& & & & & & &-w： 图形宽度方向的内交点个数；
& & & & & & &-h： 图形高度方向的内交点个数；
& & & & & & &-s： 代表的是面积；
& & & & & & &-o： 指定输出相机内部的参数到文件；
& & & & & & &-p： 修正交点的圆心；
& & & & & & &-n: &&指定计算摄像机参数时用到的图片数，通常10--20就足够了；
& & & & & & -op: &写入检测到的特征点到文件；
& & & & & & -oe: &写外部参数 到文件；
& & & & & &注：-op -oe 这些参数矫正的时候没有用到；
& &3.摁下 g ,进行图片捕获时, 旋转图片，平移一些距离；
& &4.执行完之后会返回RMS 的值；代表着摄像机的精度，该值越接近0，越好；一般该 &&值在0-1.0 之间就够用，重复以上步骤，调节摄像机让该值尽可能地小；
& &5.在该路径的目录下，会生成camera. 这里边记录着摄像机测参数，以及精度值；这个文件用来矫正图片使用，使像素点在更加精确的位置上；
阅读(...) 评论()您所在位置： &
&nbsp&&nbsp&nbsp&&nbsp
基于OpenCV的车道线实时检测.ppt 23页
本文档一共被下载：
次 ,您可全文免费在线阅读后下载本文档。
下载提示
1.本站不保证该用户上传的文档完整性，不预览、不比对内容而直接下载产生的反悔问题本站不予受理。
2.该文档所得收入(下载+内容+预览三)归上传者、原创者。
3.登录后可充值，立即自动返金币，充值渠道很便利
你可能关注的文档：
··········
··········
基于OpenCV的车道线实时检测 报告人：
徐小艺 小组成员：管栋
徐小艺 日 报告内容 一、项目背景 二、项目原理
车道检测与识别系统
道路预处理
车道线特征提取
车道线检测——直线检测
具体实施方案 三、项目展示 四、问题及解决方案
一、项目背景 欧洲国家发生的道路交通事故中有 1/3 是由车辆变道或车辆偏离其正常行驶车道区域所导致的 美国联邦公路局的报告：如果可以获得车辆与车道之间的相对位置信息，则可以防止 53%左右的车道偏离事故 针对路面标线检测的研究是实现车道偏离警告系统的关键技术,其对于实现车辆的完全自主驾驶具有深远的意义
一、项目背景 项目全称：多功能行车记录仪 项目意义：希望开发出集成一些软件功能的手机APP，并通过WiFi可以与行车记录仪连接，开发出有卖点的产品 部分功能：
道路车辆检测
车道线检测 一、项目背景 车辆辅助驾驶系统 一、项目背景 OpenCV简介
Open Source Computer Vision Library（开源计算机视觉库）
跨平台、轻量级而且高效、免费
OpenCV用C++语言编写，它的主要接口也是C++语言，但是依然保留了大量的初级版本的C语言接口
二、项目内容 车道线检测流程
道路预处理
车道线特征提取 车道线特征提取
车道线特征提取
车道线特征提取
车道线特征提取
车道线检测——直线检测
车道线检测——直线检测
车道线检测——直线检测
车道线检测——直线检测
具体实施方案 三、项目展示 四、问题及解决方案 四、问题及解决方案 谢谢！ * * * 车道检测与识别系统
道路预处理
车道线特征提取
车道线检测
道路预处理：
（a）道路图像灰度化
（b）道路图像滤波
（c）道路图像增强
道路图像灰度化 道路图像增强 车道线特征提取： （a）二值化 （b）图像边缘提取 （c）透视变换 自适应阈值二值化处理 （b）图像边缘提取：三种边缘检测算法 ①Sobel算子：先对图像进行加权平滑处理,然后进行微分运算 ②Canny算子：先用高斯滤波去噪,对图像进行平滑处理;对平滑以后的图像分别沿x,y方向求取偏导数,来得到其边缘梯度,然后分别在边缘梯度的水平、垂直、45度和135度等四个方向上,用比较各自邻近的像素,来得到局部极大值。 ③Kirsch算子：通过在八个不同的方向上,提取图像的边缘点,来获得信息完整的图像边缘
另外，还有形态学方法（腐蚀、膨胀），采用的人较少。 （b）图像边缘提取
Canny算子提取边缘图像效果 （c）逆透视变换 逆透视变换就是在满足道路平坦假设的前提下,把单目摄像机采集到的单幅图像,从二维空间转换到三维空间中,转换过程中利用摄像机内参数(焦距和光心)和外参数(俯仰角,水平偏角以及相机高度),得到一副没有透视效果的二维图像,转换后的图像效果是道路的俯视图像。 车体坐标系和图像坐标系关系示意图 （c）逆透视变换 霍夫变换检测直线原理：它是将原始图像空间中给定的直线上的点转换成为参数空间中的一条直线,即在原始图像中的直线上的所有点经过转换以后都会集中在变换空间中的某个点上形成峰值点。这样就将直线的检测问题简化成找寻峰值点的问题。 干扰信息 干扰信息 有用信息 有用信息 车道图片进一步处理：干扰信息尽可能截掉，保留有用信息。否则容易造成误检测！ 霍夫变换检测到的直线（直线过多！！！） 霍夫变换检测直线
通过调整霍夫变换的阈值参数（如检测出的直线的长度），以及用直线的角度剔除一些直线，删选出车道线 问题1：一条道车线旁可能会标出几条线 解决措施：先用随机抽样一致性算法（Ransac）合并直线，但比较麻烦；后来采用角度去最值的方法，效果不错。 问题2：检测不连续 解决措施：如果某一帧没检测出符合条件的线（特别是虚线），用上一帧结果代替。 问题3：视频中摄像头俯仰角变化的影响 解决措施：通过建立摄像机与车体坐标系模型来标定摄像机参数，然后在图像坐标系下，分割图像获得感兴趣区域(ROI)；在ROI中提取车道线信息。 问题4：明显的错误检测结果的剔除 解决措施：有时候车道线明显的检测错误（如两条标记车道线交叉），尝试用把视频图片分为左半图，右半图分别处理解决
问题5：算法的优化
正在加载中，请稍后...（超高能多图预警）（转载请注明“来自胡痴儿”）&br&前提：2014年，Google推出影响全球设计趋势的materialDesign，接着苹果推出ios8和两台影响ios屏幕适配的大屏手机&br&&b&1.大屏手机的普及化&/b&&br&首先让我们看一眼友盟的数据&br&Android&br&&figure&&img src=&https://pic3.zhimg.com/50/16c88967bdae3abdd9ac_b.jpg& data-rawwidth=&2006& data-rawheight=&1078& class=&origin_image zh-lightbox-thumb& width=&2006& data-original=&https://pic3.zhimg.com/50/16c88967bdae3abdd9ac_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/50/8ed86e0eef5ac11045ba0_b.jpg& data-rawwidth=&2002& data-rawheight=&1410& class=&origin_image zh-lightbox-thumb& width=&2002& data-original=&https://pic1.zhimg.com/50/8ed86e0eef5ac11045ba0_r.jpg&&&/figure&&br&ios&br&&figure&&img src=&https://pic2.zhimg.com/50/cb7ec272c147aabc6198ea3_b.jpg& data-rawwidth=&2000& data-rawheight=&1072& class=&origin_image zh-lightbox-thumb& width=&2000& data-original=&https://pic2.zhimg.com/50/cb7ec272c147aabc6198ea3_r.jpg&&&/figure&&br&&figure&&img src=&https://pic2.zhimg.com/50/ceaab13f05c20d18cedf_b.jpg& data-rawwidth=&2002& data-rawheight=&1408& class=&origin_image zh-lightbox-thumb& width=&2002& data-original=&https://pic2.zhimg.com/50/ceaab13f05c20d18cedf_r.jpg&&&/figure&&br&友盟每天推送的邮件&br&&figure&&img src=&https://pic4.zhimg.com/50/b698ff9c52aee339ea52a10e0b196906_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/b698ff9c52aee339ea52a10e0b196906_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/fe3e19d2a89_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/fe3e19d2a89_r.jpg&&&/figure&&br&&br&3.5英寸~4英寸——平衡单手操作的合理尺寸范围。&br&&figure&&img src=&https://pic2.zhimg.com/50/a87ec3a36b8e43533f5b_b.jpg& data-rawwidth=&680& data-rawheight=&334& class=&origin_image zh-lightbox-thumb& width=&680& data-original=&https://pic2.zhimg.com/50/a87ec3a36b8e43533f5b_r.jpg&&&/figure&&br&&p&&b&51%的用户适应双手操作&/b&&/p&&figure&&img src=&https://pic4.zhimg.com/50/d5a0606afeffc6ea0cf9508e88ddbbc3_b.jpg& data-rawwidth=&580& data-rawheight=&341& class=&origin_image zh-lightbox-thumb& width=&580& data-original=&https://pic4.zhimg.com/50/d5a0606afeffc6ea0cf9508e88ddbbc3_r.jpg&&&/figure&&br&&p&&b&盲区（深色区域）更多响应时间&/b&&/p&&figure&&img src=&https://pic2.zhimg.com/50/dd85e84b462e58dce55a_b.jpg& data-rawwidth=&215& data-rawheight=&429& class=&content_image& width=&215&&&/figure&&br&&br&&p&&b&为什么我们需要大屏手机？&/b&&/p&&p&展现、承载更多的内容：游戏、阅读、播放视频…&/p&&figure&&img src=&https://pic3.zhimg.com/50/54cb9aaa261c304731dc_b.jpg& data-rawwidth=&680& data-rawheight=&360& class=&origin_image zh-lightbox-thumb& width=&680& data-original=&https://pic3.zhimg.com/50/54cb9aaa261c304731dc_r.jpg&&&/figure&（以上，参考 &a href=&//link.zhihu.com/?target=http%3A//mux.baidu.com/%3Fp%3D8062& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&大屏手机时代，如何重塑界面交互&/a&）&br&&br&不用放大就可以看到主体图像，直接浏览内容&br&&figure&&img src=&https://pic4.zhimg.com/50/56dea1c3681_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/56dea1c3681_r.jpg&&&/figure&&br&无需水平滚动就能看到更多文本&br&&figure&&img src=&https://pic1.zhimg.com/50/055fa1ded54cabedf2120_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/055fa1ded54cabedf2120_r.jpg&&&/figure&&br&&br&面对大屏手机，苹果做了什么？&br&&figure&&img src=&https://pic2.zhimg.com/50/bbe80c2aee9f19f49e4a1f_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/bbe80c2aee9f19f49e4a1f_r.jpg&&&/figure&轻触两次home键……&br&&br&搜狗做了什么？&br&&figure&&img src=&https://pic2.zhimg.com/50/f13162f6caf93d1adc8badbb0e2e6798_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/f13162f6caf93d1adc8badbb0e2e6798_r.jpg&&&/figure&单手键盘&br&&br&google做了什么？&br&在纷乱的智能设备和杂乱的屏幕种类中，&br&发布Material Design，构建跨平台和超越设备尺寸的统一体验&br&&br&&b&我们该怎么做？&/b&&br&&b&&br&充分利用全屏构造更大的展示空间，创建沉浸式体验：&/b&&br&&figure&&img src=&https://pic2.zhimg.com/50/aed7cefdd6c7a9d0f3f195_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/aed7cefdd6c7a9d0f3f195_r.jpg&&&/figure&&br&&br&&b&以内容为核心，用UI支撑内容。&/b&&br&&ul&&li&简化排版结构&/li&&li&去除视觉修饰&br&&/li&&li&聚焦（突出重点）&br&&/li&&li&增大字间距、行高度&br&&/li&&li&只使用一种字体&br&&/li&&/ul&（我感觉是借鉴了印刷上的一些规范准则和版式设计）&br&&br&&figure&&img src=&https://pic4.zhimg.com/50/4a00bc81b49aef2cda59ddba2ae849a0_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/4a00bc81b49aef2cda59ddba2ae849a0_r.jpg&&&/figure&&br&&strong&完美的下划线&/strong&&br&&ul&&li&哪些文字可点击？&br&&/li&&li&不需投入太多注意力&br&&/li&&li&距离文字恰当&br&&/li&&li&当有下行字母占位时，下划线要紧贴其后&br&&/li&&li&清除字母下伸部分&/li&&/ul&&figure&&img src=&https://pic1.zhimg.com/50/05f78bc7f79f6d4d8028b_b.jpg& data-rawwidth=&1000& data-rawheight=&167& class=&origin_image zh-lightbox-thumb& width=&1000& data-original=&https://pic1.zhimg.com/50/05f78bc7f79f6d4d8028b_r.jpg&&&/figure&&figure&&img src=&https://pic3.zhimg.com/50/7f73d169d146ad60c2e4081940fbaec9_b.jpg& data-rawwidth=&1000& data-rawheight=&371& class=&origin_image zh-lightbox-thumb& width=&1000& data-original=&https://pic3.zhimg.com/50/7f73d169d146ad60c2e4081940fbaec9_r.jpg&&&/figure&&br&&br&&br&&p&&strong&大量留白。&/strong&&/p&&p&让重要内容、功能醒目聚焦。&/p&&figure&&img src=&https://pic2.zhimg.com/50/befe3a8ec846_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/befe3a8ec846_r.jpg&&&/figure&&br&&br&&p&&b&可用性问题：&/b&&/p&&ol&&li&纵向单手操作机身&br&&/li&&li&边角、顶部、左右侧边难以触达&br&&/li&&li&放置在以上盲区的点击入口，将导致体验路径中断&/li&&/ol&&br&屏幕上半部分放置主要内容，从左屏幕到右屏幕依次排列&br&&br&设计安全区域，避开操作盲区，比如在左上角操作盲区展示logo&br&&figure&&img src=&https://pic2.zhimg.com/50/f54eadbccea77_b.jpg& data-rawwidth=&658& data-rawheight=&402& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&https://pic2.zhimg.com/50/f54eadbccea77_r.jpg&&&/figure&&br&使用场景路径触发的连贯性，操作区域集中在安全区域&br&&figure&&img src=&https://pic1.zhimg.com/50/1fcab165f6d1aad5dc0314d_b.jpg& data-rawwidth=&602& data-rawheight=&353& class=&origin_image zh-lightbox-thumb& width=&602& data-original=&https://pic1.zhimg.com/50/1fcab165f6d1aad5dc0314d_r.jpg&&&/figure&&br&&br&&ul&&li&更多手势（以手势驱动界面）；&br&&/li&&/ul&&figure&&img src=&https://pic4.zhimg.com/50/dda_b.jpg& data-rawwidth=&590& data-rawheight=&500& class=&origin_image zh-lightbox-thumb& width=&590& data-original=&https://pic4.zhimg.com/50/dda_r.jpg&&&/figure&&br&语音代替键盘输入&br&&figure&&img src=&https://pic3.zhimg.com/50/adb52dde29eb_b.jpg& data-rawwidth=&680& data-rawheight=&476& class=&origin_image zh-lightbox-thumb& width=&680& data-original=&https://pic3.zhimg.com/50/adb52dde29eb_r.jpg&&&/figure&&br&paper的聊天头像&br&&ul&&li&滑动到“X”处删除&br&&/li&&/ul&&figure&&img src=&https://pic1.zhimg.com/50/e22bb6bba4ba_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/e22bb6bba4ba_r.jpg&&&/figure&&br&&ul&&li&任意位置的头像点击后弹出对话框&br&&/li&&/ul&&figure&&img src=&https://pic1.zhimg.com/50/bb6ceb5baf50c3_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/bb6ceb5baf50c3_r.jpg&&&/figure&&br&&ul&&li&第一次下拉显示“删除”按钮&br&&/li&&li&第二次删除删除草稿&br&&/li&&/ul&&figure&&img src=&https://pic1.zhimg.com/50/84abf560feaca_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/84abf560feaca_r.jpg&&&/figure&&figure&&img src=&https://pic3.zhimg.com/50/9ffae29adaad9415efbe92_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/9ffae29adaad9415efbe92_r.jpg&&&/figure&&br&&b&内容跟随设备（屏幕）旋转&/b&&br&聚焦用户关心的主要内容&br&&figure&&img src=&https://pic4.zhimg.com/50/9c6ef14e7cbee842e339e85a_b.jpg& data-rawwidth=&1334& data-rawheight=&750& class=&origin_image zh-lightbox-thumb& width=&1334& data-original=&https://pic4.zhimg.com/50/9c6ef14e7cbee842e339e85a_r.jpg&&&/figure&&br&横屏Pad化的操作设计，以及更多的内容展现，如同网页的Responsive Layout概念。&figure&&img src=&https://pic2.zhimg.com/50/91fff6dbbf1b3abca5c10e_b.jpg& data-rawwidth=&1334& data-rawheight=&750& class=&origin_image zh-lightbox-thumb& width=&1334& data-original=&https://pic2.zhimg.com/50/91fff6dbbf1b3abca5c10e_r.jpg&&&/figure&&br&&b&模态视图&/b&&br&&ul&&li&承载连贯操作&br&&/li&&li&不脱离主任务&br&&/li&&li&临时阻止其他部分的操作&br&&/li&&li&非线性&/li&&li&引起关注&/li&&li&简短&/li&&li&高度聚焦&/li&&/ul&&br&&figure&&img src=&https://pic4.zhimg.com/50/ba2abf819b2_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/ba2abf819b2_r.jpg&&&/figure&&br&paper的展示搜索结果&br&淡出+延迟&br&&figure&&img src=&https://pic4.zhimg.com/50/74d4097666bfbca0a6fe08c69461a59f_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/74d4097666bfbca0a6fe08c69461a59f_r.jpg&&&/figure&&br&内容区域用&b&有边界按钮&/b&区分内容&br&&figure&&img src=&https://pic2.zhimg.com/50/8a331bdde_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/8a331bdde_r.jpg&&&/figure&&br&&b&2.动效的广泛应用（app的肢体语言）&/b&&br&&b&&a href=&//link.zhihu.com/?target=http%3A//www.google.com/design/spec/animation& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Authentic motion&/a&&br&&/b&&a href=&//link.zhihu.com/?target=http%3A//easings.net/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Easing Functions Cheat Sheet&/a&&br&&a href=&//link.zhihu.com/?target=http%3A//tympanus.net/Development/AnimatedCheckboxes/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Animated Checkboxes and Radio Buttons with SVG&/a&&br&&br&&b&用动效表现四维时空&/b&——展示Z轴空间、时间变化&br&随着显卡的提升，像素的增多，我们不禁要问，为什么像素少得可怜的时候我们要拟物化GUI，而像素多得吓人的时候我们反而极简而扁平呢？&br&ios7发布引发了全民扁平化，而动效为设计带来更多的可能和惊喜。设计师们又多了一片可发挥的领域。&br&&figure&&img src=&https://pic3.zhimg.com/50/12379c9cdac16d4e6d458_b.jpg& data-rawwidth=&1280& data-rawheight=&760& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic3.zhimg.com/50/12379c9cdac16d4e6d458_r.jpg&&&/figure&&br&&b&仅用在希望吸引用户注意的部分&/b&&br&展示面积相同时，用户注意力会按这个顺序依次被吸引&br&&figure&&img src=&https://pic3.zhimg.com/50/aec87bdd08aa18cb7fd929d_b.jpg& data-rawwidth=&700& data-rawheight=&343& class=&origin_image zh-lightbox-thumb& width=&700& data-original=&https://pic3.zhimg.com/50/aec87bdd08aa18cb7fd929d_r.jpg&&&/figure&&br&相对面积和时长划分为四种动效&br&&figure&&img src=&https://pic2.zhimg.com/50/5d23f7ab25edd6bd0955_b.jpg& data-rawwidth=&700& data-rawheight=&343& class=&origin_image zh-lightbox-thumb& width=&700& data-original=&https://pic2.zhimg.com/50/5d23f7ab25edd6bd0955_r.jpg&&&/figure&&br&1.面积大、时间长&br&产品介绍&br&&figure&&img src=&https://pic2.zhimg.com/50/b1c7e16d34c0aa56b97bc7d_b.jpg& data-rawwidth=&719& data-rawheight=&1280& class=&origin_image zh-lightbox-thumb& width=&719& data-original=&https://pic2.zhimg.com/50/b1c7e16d34c0aa56b97bc7d_r.jpg&&&/figure&&figure&&img src=&https://pic2.zhimg.com/50/2f0c34db8a0c81d7fa0e733c70f1331f_b.jpg& data-rawwidth=&719& data-rawheight=&1280& class=&origin_image zh-lightbox-thumb& width=&719& data-original=&https://pic2.zhimg.com/50/2f0c34db8a0c81d7fa0e733c70f1331f_r.jpg&&&/figure&&br&&p&2.面积大、时间短&/p&&p&难看清&/p&&p&用于页面切换，展现界面之间的空间关系&/p&&p&见“转场动画”&/p&&br&&p&3.面积小、时间短&/p&&p&轻引导、轻反馈、轻提示→不打断用户流程，却轻轻吸引注意力（情感化设计）&/p&&br&&p&Path的下拉刷新和小时钟&/p&&ul&&li&流动感&br&&/li&&li&弹性&br&&/li&&/ul&&figure&&img src=&https://pic3.zhimg.com/50/5dc67ca34b2de4_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/5dc67ca34b2de4_r.jpg&&&/figure&&br&&p&quora的搜索&/p&&figure&&img src=&https://pic2.zhimg.com/50/6e21e3ff2e4db71a3b1afc_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/6e21e3ff2e4db71a3b1afc_r.jpg&&&/figure&&br&&p&从横屏切换会的google被弄歪了=_=&/p&&figure&&img src=&https://pic1.zhimg.com/50/b30c5ddcbc9_b.jpg& data-rawwidth=&320& data-rawheight=&567& class=&content_image& width=&320&&&/figure&&br&&p&4.面积小，时间长&/p&&p&一直持续轻微吸引用户，不干扰其他功能和信息&/p&&figure&&img src=&https://pic3.zhimg.com/50/4bc6d3c5c86aa7fe5f56ca_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/4bc6d3c5c86aa7fe5f56ca_r.jpg&&&/figure&&br&&br&滑动指向性动效（理清物体排列状况）&br&chrome&br&&figure&&img src=&https://pic4.zhimg.com/50/a05af8fdb9f_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/a05af8fdb9f_r.jpg&&&/figure&&br&&b&对象切换-指向性动效(重点：这是平滑动画的关键)&/b&&br&当前物体后移（变暗淡透明），新物体出现&br&YouTube&br&&figure&&img src=&https://pic2.zhimg.com/50/9f6b1c453e300c9c14ba7dd7a1b2d407_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/9f6b1c453e300c9c14ba7dd7a1b2d407_r.jpg&&&/figure&&br&Path个人页的滚动渐隐&br&最后标题出现，背景照片贴着状态栏…&br&&figure&&img src=&https://pic4.zhimg.com/50/edb091abd63f168cf5143_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/edb091abd63f168cf5143_r.jpg&&&/figure&&br&paper&br&&b&标题的淡入淡出&/b&&br&&ul&&li&图片和主题右移，退出视线&br&&/li&&li&右上角的白色标题经过三个icon时逐渐变暗直至消失&br&&/li&&li&逃出三个icon的范围，白色标题又陡然呈现&br&&/li&&/ul&&figure&&img src=&https://pic4.zhimg.com/50/badddd40cf77_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/badddd40cf77_r.jpg&&&/figure&&br&&b&添加-指向性动效&/b&&br&新物体滑入，挤出旧物体&br&&br&any do&br&&figure&&img src=&https://pic1.zhimg.com/50/3892afe7c5dadf0a064a5b_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/3892afe7c5dadf0a064a5b_r.jpg&&&/figure&&br&clear&br&&figure&&img src=&https://pic2.zhimg.com/50/c5afa6bff925_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/c5afa6bff925_r.jpg&&&/figure&&br&下滑消失，上滑出现（增大可读区域）&br&storehouse&br&&figure&&img src=&https://pic3.zhimg.com/50/cdbf3ddd893ba3b7e3abb3478baf6689_b.jpg& data-rawwidth=&719& data-rawheight=&1280& class=&origin_image zh-lightbox-thumb& width=&719& data-original=&https://pic3.zhimg.com/50/cdbf3ddd893ba3b7e3abb3478baf6689_r.jpg&&&/figure&&figure&&img src=&https://pic2.zhimg.com/50/539e209ce6edd28ac14db_b.jpg& data-rawwidth=&719& data-rawheight=&1280& class=&origin_image zh-lightbox-thumb& width=&719& data-original=&https://pic2.zhimg.com/50/539e209ce6edd28ac14db_r.jpg&&&/figure&&br&&br&&b&点击-提示性动效&/b&&br&&figure&&img src=&https://pic2.zhimg.com/50/799e71ca9ca8f4f016f2e_b.jpg& data-rawwidth=&719& data-rawheight=&1280& class=&origin_image zh-lightbox-thumb& width=&719& data-original=&https://pic2.zhimg.com/50/799e71ca9ca8f4f016f2e_r.jpg&&&/figure&&br&&b&滑动-提示性动效&br&&/b&&figure&&img src=&https://pic4.zhimg.com/50/eb50e91e95a2d4e295e7_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/eb50e91e95a2d4e295e7_r.jpg&&&/figure&&br&&br&&b&分合-指向性动效&/b&&br&&b&any do 的任务&/b&的详细信息的修改（上层和下层合在一起）&br&胡痴儿按：几乎所有动效的进场和出场都是正方向和反方向的关系，也就是假如录成一段动画就是可循环重复的&br&分合就像约会。当你点击，一个妹子从雪山上来，当你点返回，她又回雪山去了&br&&figure&&img src=&https://pic4.zhimg.com/50/befcb_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/befcb_r.jpg&&&/figure&&figure&&img src=&https://pic2.zhimg.com/50/5b3ae0b64fe46e823b3c_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/5b3ae0b64fe46e823b3c_r.jpg&&&/figure&&br&&b&动效控件&/b&&br&案例：posegram&br&&figure&&img src=&https://pic4.zhimg.com/50/36bc54188d_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/36bc54188d_r.jpg&&&/figure&&br&Path的分享给特别好友&br&&figure&&img src=&https://pic2.zhimg.com/50/d072d4d8dfea79bd0fbe8_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/d072d4d8dfea79bd0fbe8_r.jpg&&&/figure&&br&Path的收藏&br&&figure&&img src=&https://pic3.zhimg.com/50/086d8eba4cadd0d22e3a35fe1af36fef_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/086d8eba4cadd0d22e3a35fe1af36fef_r.jpg&&&/figure&&br&flickr的收藏&br&&figure&&img src=&https://pic2.zhimg.com/50/cecd4be3760a4aefac757_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/cecd4be3760a4aefac757_r.jpg&&&/figure&&br&paper的like&br&焰火绽放&br&&figure&&img src=&https://pic2.zhimg.com/50/4d6dde685be958ceab779b0f_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/4d6dde685be958ceab779b0f_r.jpg&&&/figure&&br&&br&&b&加载动画:&/b&&br&&figure&&img src=&https://pic1.zhimg.com/50/dcf774f6f68ee75e9e2c1a8b_b.jpg& data-rawwidth=&248& data-rawheight=&124& class=&content_image& width=&248&&&/figure&&figure&&img src=&https://pic3.zhimg.com/50/dac76f16bf7c94dd4357_b.jpg& data-rawwidth=&228& data-rawheight=&156& class=&content_image& width=&228&&&/figure&&br&path的加载指示器&br&（简直唯美啊，而且每次都不同）&br&&figure&&img src=&https://pic2.zhimg.com/50/7610ccb9ae573b6d09daa5d_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/7610ccb9ae573b6d09daa5d_r.jpg&&&/figure&&br&&figure&&img src=&https://pic3.zhimg.com/50/f0da845f8bbaa2d6014835beff9a41ee_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/f0da845f8bbaa2d6014835beff9a41ee_r.jpg&&&/figure&&figure&&img src=&https://pic2.zhimg.com/50/b92880cce1f37a2d3e13a_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/b92880cce1f37a2d3e13a_r.jpg&&&/figure&&br&闲鱼的加载&br&&figure&&img src=&https://pic1.zhimg.com/50/e90da36cba5cc1cd968b24f5aa1f4efe_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/e90da36cba5cc1cd968b24f5aa1f4efe_r.jpg&&&/figure&&br&京东app的刷新&br&&figure&&img src=&https://pic1.zhimg.com/50/03b36d5d3fb6f1d34109e2_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/03b36d5d3fb6f1d34109e2_r.jpg&&&/figure&&br&来往的下拉&br&&figure&&img src=&https://pic1.zhimg.com/50/615baed01b565a78f833a6df5f0333a1_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/615baed01b565a78f833a6df5f0333a1_r.jpg&&&/figure&&br&闲鱼的下拉&br&&figure&&img src=&https://pic4.zhimg.com/50/0ee82e464ebc4db808f6faf48f18a653_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/0ee82e464ebc4db808f6faf48f18a653_r.jpg&&&/figure&&br&&figure&&img src=&https://pic4.zhimg.com/50/cb0d618da1edf1c4b2cb84_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/cb0d618da1edf1c4b2cb84_r.jpg&&&/figure&&br&paper左右时间轴&br&按历史顺序排列&br&&figure&&img src=&https://pic2.zhimg.com/50/680ce61cbdcbbcc8fac46_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/680ce61cbdcbbcc8fac46_r.jpg&&&/figure&&br&&a href=&//link.zhihu.com/?target=http%3A//huaban.com/explore/loadingsheji/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&loading设计 _加载界面_loading图片素材欣赏_UI/UX图片大全&/a&&br&&br&展开-空间扩展动效&br&if&br&&figure&&img src=&https://pic4.zhimg.com/50/492a10b95c17c9d2bafc_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/492a10b95c17c9d2bafc_r.jpg&&&/figure&&br&&br&&b&转场动画&/b&（用产品连续性表达了设计的前后关系）&br&（坚硬的，刚性强，却不灵活）&br&案例：Flipboard&br&&figure&&img src=&https://pic3.zhimg.com/50/d7d38fba53_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/d7d38fba53_r.jpg&&&/figure&相似案例：deal in&br&&figure&&img src=&https://pic3.zhimg.com/50/0828c56faa03cef4aa0fb_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/0828c56faa03cef4aa0fb_r.jpg&&&/figure&&br&&figure&&img src=&https://pic3.zhimg.com/50/f2b141baf27ed49e5fab55d_b.jpg& data-rawwidth=&650& data-rawheight=&710& class=&origin_image zh-lightbox-thumb& width=&650& data-original=&https://pic3.zhimg.com/50/f2b141baf27ed49e5fab55d_r.jpg&&&/figure&&br&&br&对比案例：ibook（柔软的曲面，刚性差，但灵活）&br&&figure&&img src=&https://pic2.zhimg.com/50/9455f9eae_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/9455f9eae_r.jpg&&&/figure&相似案例：play books&br&play books for Ios&br&&figure&&img src=&https://pic3.zhimg.com/50/fb8bfdba_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/fb8bfdba_r.jpg&&&/figure&play books for Android&br&&figure&&img src=&https://pic3.zhimg.com/50/db8fbbaa6a481b77a9c834b01a0e2f7a_b.jpg& data-rawwidth=&1080& data-rawheight=&1920& class=&origin_image zh-lightbox-thumb& width=&1080& data-original=&https://pic3.zhimg.com/50/db8fbbaa6a481b77a9c834b01a0e2f7a_r.jpg&&&/figure&&br&paper的卡片式翻页（这种神级的存在(@﹏@)~ ）&br&&ul&&li&轻微的弹动&br&&/li&&li&卡片上动态的光泽&br&&/li&&/ul&&figure&&img src=&https://pic3.zhimg.com/50/1fb0c215cffd5c213d2d156a57cc2df6_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/1fb0c215cffd5c213d2d156a57cc2df6_r.jpg&&&/figure&&figure&&img src=&https://pic2.zhimg.com/50/337a111edb8c5feaf6bb6d_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/337a111edb8c5feaf6bb6d_r.jpg&&&/figure&&br&Steller的翻图（每张图都美到心醉）&br&&figure&&img src=&https://pic4.zhimg.com/50/f5eb11f42fe0c1270d6b_b.jpg& data-rawwidth=&719& data-rawheight=&1280& class=&origin_image zh-lightbox-thumb& width=&719& data-original=&https://pic4.zhimg.com/50/f5eb11f42fe0c1270d6b_r.jpg&&&/figure&&br&storehouse&br&上翻或下翻时返回上级页面&br&（胡痴儿按：暗示性很强）&br&&figure&&img src=&https://pic2.zhimg.com/50/48e69e3cd5debccd118a552_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/48e69e3cd5debccd118a552_r.jpg&&&/figure&&br&&figure&&img src=&https://pic3.zhimg.com/50/1d93dfb78c515bf5df8da4_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/1d93dfb78c515bf5df8da4_r.jpg&&&/figure&&br&&b&抛掷操作打开&关闭&/b&&br&&br&paper&br&&figure&&img src=&https://pic1.zhimg.com/50/560db17e477f0d2ad50c256b_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/560db17e477f0d2ad50c256b_r.jpg&&&/figure&&br&flickr&br&&figure&&img src=&https://pic2.zhimg.com/50/eddc756518_b.jpg& data-rawwidth=&719& data-rawheight=&1280& class=&origin_image zh-lightbox-thumb& width=&719& data-original=&https://pic2.zhimg.com/50/eddc756518_r.jpg&&&/figure&&br&&br&&br&&b&层次和暗示&/b&&br&paper的层次&br&&figure&&img src=&https://pic3.zhimg.com/50/5f4bbec97ff_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/5f4bbec97ff_r.jpg&&&/figure&&figure&&img src=&https://pic3.zhimg.com/50/ba5e98266f96bedb01ccec_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/ba5e98266f96bedb01ccec_r.jpg&&&/figure&&br&&br&&b&暗示运动轨迹、动态焦点移动&/b&&br&胡痴儿按：&br&&ul&&li&物体运动受推力、风阻、重力影响&br&&/li&&li&物体按轨迹运动却不可见，除了黑夜里的火花、雪地里的足迹&br&&/li&&li&ios的运动轨迹非常自然，它是有一定弧度的，像鱼儿水里游，像少女的乳头一浪接一浪&br&&/li&&li&Android5.0之前的运动轨迹就是直线的、刚性的，机械得像个跳机械舞的&br&&/li&&/ul&&br&ios应用启动&br&&figure&&img src=&https://pic3.zhimg.com/50/011a5eac01a9a073e77c6b_b.jpg& data-rawwidth=&720& data-rawheight=&337& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&https://pic3.zhimg.com/50/011a5eac01a9a073e77c6b_r.jpg&&&/figure&&br&&p&案例：QQ音乐的MiniPlayer切换至播放页&/p&&p&分成动画：底层、信息层、唱片封面层 用不同的轨迹&/p&&br&&figure&&img src=&https://pic3.zhimg.com/50/e3b5cb0f985_b.jpg& data-rawwidth=&590& data-rawheight=&500& class=&origin_image zh-lightbox-thumb& width=&590& data-original=&https://pic3.zhimg.com/50/e3b5cb0f985_r.jpg&&&/figure&&br&&figure&&img src=&https://pic1.zhimg.com/50/b2abe9f3a954_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/b2abe9f3a954_r.jpg&&&/figure&&br&&br&&b&慢入慢出（惯性）&/b&如：&br&&ul&&li&车的启动&br&&/li&&li&压缩的弹簧展开&br&&/li&&li&坐下&站起&/li&&li&球落地不断弹起&/li&&li&动画：在运动开始和结束时更多的帧，而过程中用较少的帧&br&&/li&&/ul&&p&开始时慢慢加速，停止时慢慢减速，如图：&/p&&figure&&img src=&https://pic3.zhimg.com/50/92f9b61f5bbd82e6572e42c_b.jpg& data-rawwidth=&318& data-rawheight=&141& class=&content_image& width=&318&&&/figure&&br&apple的messages&br&&figure&&img src=&https://pic4.zhimg.com/50/bd4dd18bf0f_b.jpg& data-rawwidth=&500& data-rawheight=&517& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic4.zhimg.com/50/bd4dd18bf0f_r.jpg&&&/figure&&br&&br&翻动app们&br&&figure&&img src=&https://pic2.zhimg.com/50/9baf6ff9db42857aaa57_b.jpg& data-rawwidth=&500& data-rawheight=&366& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&https://pic2.zhimg.com/50/9baf6ff9db42857aaa57_r.jpg&&&/figure&&br&&p&案例：same的尖叫博物馆（你给我滚看看→ →）&/p&&figure&&img src=&https://pic4.zhimg.com/50/0df5d7b881ea24cb48f838_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/0df5d7b881ea24cb48f838_r.jpg&&&/figure&&br&&b&按次序进出并延迟滑动的icon&/b&&br&易信的朋友圈&br&&figure&&img src=&https://pic3.zhimg.com/50/39cb07ca2d4dad7fbf1ce_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/39cb07ca2d4dad7fbf1ce_r.jpg&&&/figure&&br&paper的赞列表&br&&figure&&img src=&https://pic3.zhimg.com/50/6a10ec2fac4e6eda37e546_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/6a10ec2fac4e6eda37e546_r.jpg&&&/figure&&br&&ul&&li&paper的&hamburger&图标翻转成&X&&/li&&/ul&&figure&&img src=&https://pic4.zhimg.com/50/52a2e133a521b5dfa0adc4_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/52a2e133a521b5dfa0adc4_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/50/ab2c7b00feb0dedb31866ea_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/ab2c7b00feb0dedb31866ea_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/50/615f1fa72bd02fdea1f09a362f228eea_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/615f1fa72bd02fdea1f09a362f228eea_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/cedb3bda9bbcb739b32d5fd_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/cedb3bda9bbcb739b32d5fd_r.jpg&&&/figure&&br&案例：pages&br&&figure&&img src=&https://pic3.zhimg.com/50/4ba74faf311b8eb47e584e5_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/4ba74faf311b8eb47e584e5_r.jpg&&&/figure&&br&paper的分类管理&br&&ul&&li&点击长按大图出现“自定义视图”&br&&/li&&li&左右晃动的卡片&br&&/li&&/ul&胡痴儿按：等待被添加或删除时，他们吓得发抖或高兴得颤抖&br&&figure&&img src=&https://pic4.zhimg.com/50/0b9dae334fb82b493abe_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/0b9dae334fb82b493abe_r.jpg&&&/figure&&br&&figure&&img src=&https://pic4.zhimg.com/50/c29fbcd9d8ce_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/c29fbcd9d8ce_r.jpg&&&/figure&&br&ibook&br&&figure&&img src=&https://pic1.zhimg.com/50/b0d4acd34_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/b0d4acd34_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/ffff4f254d9a5d85dff0b_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/ffff4f254d9a5d85dff0b_r.jpg&&&/figure&&br&ios的日历&br&&figure&&img src=&https://pic1.zhimg.com/50/4debad75f371434aff1f372_b.jpg& data-rawwidth=&720& data-rawheight=&450& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&https://pic1.zhimg.com/50/4debad75f371434aff1f372_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/8fc0f4f1be74ddb4ae577d9e4e76e7f5_b.jpg& data-rawwidth=&720& data-rawheight=&450& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&https://pic4.zhimg.com/50/8fc0f4f1be74ddb4ae577d9e4e76e7f5_r.jpg&&&/figure&&br&&br&预期动效（预感即将发生）&br&IOS6&br&&figure&&img src=&https://pic3.zhimg.com/50/14fb5284badc90d411d6c92eafc426c4_b.jpg& data-rawwidth=&266& data-rawheight=&400& class=&content_image& width=&266&&&/figure&&br&capture&br&1.在运动发生前的准备阶段&br&&figure&&img src=&https://pic2.zhimg.com/50/49867dba28ab8daa19ce3_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/49867dba28ab8daa19ce3_r.jpg&&&/figure&2.运动过程本身&br&&figure&&img src=&https://pic3.zhimg.com/50/bd3ef15c0ca_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/bd3ef15c0ca_r.jpg&&&/figure&&br&3.运动产生的结果&br&&figure&&img src=&https://pic3.zhimg.com/50/c4dec13dbed7cd2c00431_b.jpg& data-rawwidth=&719& data-rawheight=&1280& class=&origin_image zh-lightbox-thumb& width=&719& data-original=&https://pic3.zhimg.com/50/c4dec13dbed7cd2c00431_r.jpg&&&/figure&&br&sunnycomb&br&&figure&&img src=&https://pic3.zhimg.com/50/eb4d4ddd95d5f5aaf961cf4ffd90e31f_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/eb4d4ddd95d5f5aaf961cf4ffd90e31f_r.jpg&&&/figure&&br&百度魔拍&br&&figure&&img src=&https://pic1.zhimg.com/50/8b5f2b64d594_b.jpg& data-rawwidth=&719& data-rawheight=&1280& class=&origin_image zh-lightbox-thumb& width=&719& data-original=&https://pic1.zhimg.com/50/8b5f2b64d594_r.jpg&&&/figure&&br&nice&br&&figure&&img src=&https://pic2.zhimg.com/50/d9fa4c67af94c4_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/d9fa4c67af94c4_r.jpg&&&/figure&&br&&br&&b&招牌动效&/b&（加深用户印象的差异化展现）&br&&br&path的“+”&br&堆叠物体被展开&br&&figure&&img src=&https://pic4.zhimg.com/50/14f942d225c32dabb381a8fee94a59cf_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/14f942d225c32dabb381a8fee94a59cf_r.jpg&&&/figure&&br&&figure&&img src=&https://pic4.zhimg.com/50/d577c4c3_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/d577c4c3_r.jpg&&&/figure&&figure&&img src=&https://pic1.zhimg.com/50/35c03fd64ccd3a5def04dc_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/35c03fd64ccd3a5def04dc_r.jpg&&&/figure&&br&&br&facebook 推出的paper关闭消息的拉伸曲线动画。&br&&ul&&li&背景被拖拽&br&&/li&&li&消息气泡箭头被拉伸&br&&/li&&li&最后缩回原处&br&&/li&&/ul&&figure&&img src=&https://pic1.zhimg.com/50/afa269d70c1f994ecfc834b_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/afa269d70c1f994ecfc834b_r.jpg&&&/figure&&br&&figure&&img src=&https://pic3.zhimg.com/50/25fc467bfdb0dd58ea2f07a7b46bf5f9_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/25fc467bfdb0dd58ea2f07a7b46bf5f9_r.jpg&&&/figure&这种动效设计是有具前瞻性的尝试和探索，像path的那个展开的“+”引发了跟风潮流。&br&&br&&b&强奸处女座的拉动&/b&&br&Google+的下拉刷新（像素越拉越细→ w→）&br&&figure&&img src=&https://pic3.zhimg.com/50/0c14b138d9fd5bf07aacbc_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/0c14b138d9fd5bf07aacbc_r.jpg&&&/figure&&br&掐死same&br&&figure&&img src=&https://pic3.zhimg.com/50/fdb4a8bb974c9a3e1f520e9f36ba1d59_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/fdb4a8bb974c9a3e1f520e9f36ba1d59_r.jpg&&&/figure&&br&拆散一对same（我当时看到这俩分离再相聚的时候心都醉了）&br&&figure&&img src=&https://pic3.zhimg.com/50/a6b5a3fb9fa8_b.jpg& data-rawwidth=&1080& data-rawheight=&1920& class=&origin_image zh-lightbox-thumb& width=&1080& data-original=&https://pic3.zhimg.com/50/a6b5a3fb9fa8_r.jpg&&&/figure&&figure&&img src=&https://pic3.zhimg.com/50/c1fcac0cf8dd988bc1604a_b.jpg& data-rawwidth=&1080& data-rawheight=&1920& class=&origin_image zh-lightbox-thumb& width=&1080& data-original=&https://pic3.zhimg.com/50/c1fcac0cf8dd988bc1604a_r.jpg&&&/figure&&br&flickr的下拉刷新&br&&figure&&img src=&https://pic3.zhimg.com/50/73bbcce20ee898bba5c6472d_b.jpg& data-rawwidth=&719& data-rawheight=&1280& class=&origin_image zh-lightbox-thumb& width=&719& data-original=&https://pic3.zhimg.com/50/73bbcce20ee898bba5c6472d_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/43e93d6eeca30c905afad03_b.jpg& data-rawwidth=&719& data-rawheight=&1280& class=&origin_image zh-lightbox-thumb& width=&719& data-original=&https://pic4.zhimg.com/50/43e93d6eeca30c905afad03_r.jpg&&&/figure&&figure&&img src=&https://pic3.zhimg.com/50/eb9e032e92d0d912d6a9_b.jpg& data-rawwidth=&719& data-rawheight=&1280& class=&origin_image zh-lightbox-thumb& width=&719& data-original=&https://pic3.zhimg.com/50/eb9e032e92d0d912d6a9_r.jpg&&&/figure&&br&&br&&b&3.更生动的情感化设计&/b&&br&&a href=&//link.zhihu.com/?target=http%3A//huaban.com/explore/404yemiansheji/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&404页面设计 _404 not found_404出错页面_404错误页面图片素材欣赏&/a&&br&&br&&br&&b&4.&/b&&b&遵循iOS和Android的各个平台规范&/b&&br&&ul&&li&没有用户学习成本，且用户可使用自定义；&br&&/li&&li&统一跨平台的视觉交互体验；&br&&/li&&li&降低设计开发成本，会自动更新；&/li&&/ul&(胡痴儿按：一个产品，要和iOS交配产生一个个体，具有iOS交互属性的后代，又要和Android交配，携带Android交互基因的后代，也就是说这个产品的视觉上要像他父亲（公司产品线），界面和交互上要像她母亲（iOS或Android），还要和她母亲的孩子们在移动端和谐相处{&~&})&br&（沉浸式体验的除外）&br&&br&案例：豆瓣使用了iOS的系统主题UIkit&br&&ul&&li&用半透明底板：关联使用场景、区分内容；&/li&&li&无边框按钮（被激活时高亮）&br&&/li&&/ul&&figure&&img src=&https://pic1.zhimg.com/50/e42caacc4f8d_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/e42caacc4f8d_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/50/be85efd898a7e046b70cb97b68bbccbf_b.jpg& data-rawwidth=&1080& data-rawheight=&1920& class=&origin_image zh-lightbox-thumb& width=&1080& data-original=&https://pic4.zhimg.com/50/be85efd898a7e046b70cb97b68bbccbf_r.jpg&&&/figure&&br&&b&用户自定义字体大小&/b&&br&使用系统字体：确保易读性、可调节性；&br&&figure&&img src=&https://pic2.zhimg.com/50/8c7fe1ddef0138adafed3ad_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/8c7fe1ddef0138adafed3ad_r.jpg&&&/figure&&br&豆瓣阅读&br&&figure&&img src=&https://pic1.zhimg.com/50/5cabfafe3aad_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/5cabfafe3aad_r.jpg&&&/figure&&br&&br&&b&5.hamburger导航变tab导航&/b&（当时我设计恋爱笔记时参考的豆瓣小组，后来豆瓣小组改为底部导航，我们也改了）&br&扁平结构层级，随意切换。从深到广，从多到简。减少入口和用户思考时间，更快找到自己所需的功能，功能更专精。&br&案例：豆瓣小组&br&&figure&&img src=&https://pic1.zhimg.com/50/7e910143ceadb4791ef2_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/7e910143ceadb4791ef2_r.jpg&&&/figure&&br&&br&&b&6.数据可视化&/b&（数据表现越来越丰富，如饼状、柱状、曲线、图案）&br&&figure&&img src=&https://pic4.zhimg.com/50/09d41ad4ed3b678e9e5847_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/09d41ad4ed3b678e9e5847_r.jpg&&&/figure&&br&&b&视差滚动&/b&&br&胡痴儿按：我想到了坐火车时看窗外，物体分了很多层，远处的山缓慢而悠闲，近处的电线杆飞窜着，拍出来的照：近处产生了运动模糊，远处清晰，由近向远越来越清晰。。太美了{&~&}&br&&br&从一定距离的两点，观察同一目标的方向差异。&br&&figure&&img src=&https://pic2.zhimg.com/50/18f7df97fc17f09e36c8bb8078943dca_b.jpg& data-rawwidth=&240& data-rawheight=&263& class=&content_image& width=&240&&&/figure&&br&黄油相机的欢迎页&br&（注意每个元素的运动速度！）&br&&figure&&img src=&https://pic3.zhimg.com/50/12a5bbd796c7ed30dd692b2b80094d32_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/12a5bbd796c7ed30dd692b2b80094d32_r.jpg&&&/figure&&br&&b&一些新的交互探索&/b&&br&&br&&br&用陀螺仪的重力感应看全景图！&br&paper&br&&figure&&img src=&https://pic4.zhimg.com/50/aa6b86fc9b37f8ceced28_b.jpg& data-rawwidth=&719& data-rawheight=&1280& class=&origin_image zh-lightbox-thumb& width=&719& data-original=&https://pic4.zhimg.com/50/aa6b86fc9b37f8ceced28_r.jpg&&&/figure&&br&&br&red dot&br&&figure&&img src=&https://pic3.zhimg.com/50/df96c00c959b7ed765fe1d6050deb122_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/df96c00c959b7ed765fe1d6050deb122_r.jpg&&&/figure&&br&&br&&br&&b&给用户一点小惊喜&/b&（我当时一不小心屏幕横过来就被感动了）&br&&figure&&img src=&https://pic1.zhimg.com/50/434ba44c524d9dff9923_b.jpg& data-rawwidth=&1334& data-rawheight=&750& class=&origin_image zh-lightbox-thumb& width=&1334& data-original=&https://pic1.zhimg.com/50/434ba44c524d9dff9923_r.jpg&&&/figure&&br&&br&补充：&br&&br&&b&个性的字体&/b&&br&随着各移动系统的设计规范逐渐统一和技术的愈发成熟，移动应用将会有更美观的字体。&br&&br&Roboto，安卓标准字体&br&&figure&&img src=&https://pic2.zhimg.com/50/6b7be7c50e6d4520dca0b0e_b.jpg& data-rawwidth=&600& data-rawheight=&400& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&https://pic2.zhimg.com/50/6b7be7c50e6d4520dca0b0e_r.jpg&&&/figure&&a href=&//link.zhihu.com/?target=http%3A//www.google.com/design/spec/resources/roboto-font.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Roboto & Noto fonts&/a&&br&2014年Adobe与Google宣布推出思源黑体（更适合在移动设备及高分辨率屏幕上呈现）&br&&br&&b&颜色&/b&&br&&br&&b&Ios的Key color&/b&&br&&figure&&img src=&https://pic3.zhimg.com/50/e7fd1cff3b49a065a709494_b.jpg& data-rawwidth=&590& data-rawheight=&284& class=&origin_image zh-lightbox-thumb& width=&590& data-original=&https://pic3.zhimg.com/50/e7fd1cff3b49a065a709494_r.jpg&&&/figure&&br&&br&&b&Android&/b&&br&&b&&figure&&img src=&https://pic4.zhimg.com/50/4ed5b4f21eb8_b.jpg& data-rawwidth=&600& data-rawheight=&400& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&https://pic4.zhimg.com/50/4ed5b4f21eb8_r.jpg&&&/figure&&br&&a href=&//link.zhihu.com/?target=http%3A//www.google.com/design/spec/style/color.html%23& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Color - Style&/a&&/b&&br&&br&&b&icon的几层境界：&/b&&br&&ul&&li&适合不同背景&br&&/li&&li&简洁有力（在小尺寸时清晰突出）&br&&/li&&li&高辨识度，吸引眼球&br&&/li&&li&塑造品牌&br&&/li&&li&隐喻（设计背后的故事）&br&&/li&&li&情感连接&br&&/li&&/ul&&figure&&img src=&https://pic1.zhimg.com/50/c_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/c_r.jpg&&&/figure&&br&&br&&b&品牌&/b&&br&用主题色标明可交互性的控件&br&&br&same的蓝色&br&&figure&&img src=&https://pic4.zhimg.com/50/dccab539db44_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/dccab539db44_r.jpg&&&/figure&&br&&br&&ul&&li&自然地融入品牌&br&&/li&&li&巧妙地订制淡淡的水印&br&&/li&&/ul&day one翻到底部时&br&&figure&&img src=&https://pic4.zhimg.com/50/c535bc134dccf6535eab5a_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/c535bc134dccf6535eab5a_r.jpg&&&/figure&&br&&br&Path翻到底部时&br&&figure&&img src=&https://pic2.zhimg.com/50/58331b0eedfc031aa09e26b_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/50/58331b0eedfc031aa09e26b_r.jpg&&&/figure&&br&&br&二级页面的返回和logo品牌巧妙地融合&br&quora&br&&figure&&img src=&https://pic1.zhimg.com/50/52411eaaee5eefd8ababbb_b.jpg& data-rawwidth=&1080& data-rawheight=&1920& class=&origin_image zh-lightbox-thumb& width=&1080& data-original=&https://pic1.zhimg.com/50/52411eaaee5eefd8ababbb_r.jpg&&&/figure&&br&path&br&&figure&&img src=&https://pic3.zhimg.com/50/3d164e66f0edfd1d7de1c8f515d2d4cd_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic3.zhimg.com/50/3d164e66f0edfd1d7de1c8f515d2d4cd_r.jpg&&&/figure&&br&&br&&b&在当前页面提供设置选项&/b&&br&设置选项更浅更扁平&br&&br&bilibili的弹幕设置&br&&figure&&img src=&https://pic2.zhimg.com/50/bea6bdadd5cb5eb_b.jpg& data-rawwidth=&1334& data-rawheight=&750& class=&origin_image zh-lightbox-thumb& width=&1334& data-original=&https://pic2.zhimg.com/50/bea6bdadd5cb5eb_r.jpg&&&/figure&&figure&&img src=&https://pic3.zhimg.com/50/6e0ca16ab3ace854a4dcfca_b.jpg& data-rawwidth=&1334& data-rawheight=&750& class=&origin_image zh-lightbox-thumb& width=&1334& data-original=&https://pic3.zhimg.com/50/6e0ca16ab3ace854a4dcfca_r.jpg&&&/figure&&br&斗鱼Tv的弹幕设置&br&&figure&&img src=&https://pic2.zhimg.com/50/b202b3d21d18eef4b3d1fe4e_b.jpg& data-rawwidth=&1334& data-rawheight=&750& class=&origin_image zh-lightbox-thumb& width=&1334& data-original=&https://pic2.zhimg.com/50/b202b3d21d18eef4b3d1fe4e_r.jpg&&&/figure&&figure&&img src=&https://pic3.zhimg.com/50/48cbd27b978ecabdd6684935fbbb2e28_b.jpg& data-rawwidth=&1334& data-rawheight=&750& class=&origin_image zh-lightbox-thumb& width=&1334& data-original=&https://pic3.zhimg.com/50/48cbd27b978ecabdd6684935fbbb2e28_r.jpg&&&/figure&&br&&br&网易云阅读&br&&figure&&img src=&https://pic4.zhimg.com/50/08cda47d235b6eaa3a88_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/08cda47d235b6eaa3a88_r.jpg&&&/figure&&br&&figure&&img src=&https://pic1.zhimg.com/50/8f1cb88b578bdee7e6821b_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic1.zhimg.com/50/8f1cb88b578bdee7e6821b_r.jpg&&&/figure&&br&&br&&b&UI上显示弱反馈&/b&&br&&ul&&li&当前在做什么&br&&/li&&li&接下来要做什么&/li&&/ul&&br&易信的设置头像&br&&figure&&img src=&https://pic4.zhimg.com/50/acb8b9b87c_b.jpg& data-rawwidth=&750& data-rawheight=&1334& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic4.zhimg.com/50/acb8b9b87c_r.jpg&&&/figure&
（超高能多图预警）（转载请注明“来自胡痴儿”） 前提：2014年，Google推出影响全球设计趋势的materialDesign，接着苹果推出ios8和两台影响ios屏幕适配的大屏手机 1.大屏手机的普及化 首先让我们看一眼友盟的数据 Android ios 友盟每天推送的邮件 3.5英寸~…
&a href=&//link.zhihu.com/?target=http%3A//stackshare.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&StackShare - Discover and discuss the best dev tools and cloud infrastructure services&/a&. 这边可以找到很多公司的tech stack, 比如Coursera的stack &a href=&//link.zhihu.com/?target=http%3A//stackshare.io/coursera/coursera& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Coursera's Tech Stack&/a&， 可以和董老师介绍的对比下。
. 这边可以找到很多公司的tech stack, 比如Coursera的stack ， 可以和董老师介绍的对比下。
&p&我还是拿自家公司举例子吧&/p&&br&&p&分类：&/p&&p&编程语言：Python，Scala，Swift for iOS&/p&&p&前端：Play，Video.js, Jade, HTML5&/p&&p&框架容器：Docker，Mesos，Vagrant&/p&&p&日志监控：Datadog，Sumologic，Akka，Kafka&/p&&p&后台数据处理：Hive, Scalding, EMR, Big Query&/p&&p&虚拟机：EC2&/p&&p&服务器：Nginx&/p&&p&配置工具：NPM，Zookeeper, Puppet, }