db.json

{"meta":{"version":1,"warehouse":"2.2.0"},"models":{"Asset":[{"_id":"source/images/AC6FE26F-BE56-4B72-8D2C-4B83381F474A.jpg","path":"images/AC6FE26F-BE56-4B72-8D2C-4B83381F474A.jpg","modified":0,"renderable":0},{"_id":"source/images/FDB2320D-6263-4C2B-B87A-C19609D974B5.jpg","path":"images/FDB2320D-6263-4C2B-B87A-C19609D974B5.jpg","modified":0,"renderable":0},{"_id":"source/images/47011C25-E4B8-4BEB-894A-9DC7A3E05CDE.jpg","path":"images/47011C25-E4B8-4BEB-894A-9DC7A3E05CDE.jpg","modified":0,"renderable":0},{"_id":"source/images/EC3C0191-12B0-4BDA-ABFC-2EFBD7AF8EBE.jpg","path":"images/EC3C0191-12B0-4BDA-ABFC-2EFBD7AF8EBE.jpg","modified":0,"renderable":0},{"_id":"source/images/image15.jpg","path":"images/image15.jpg","modified":0,"renderable":0},{"_id":"source/images/B2946E62-4D94-42FF-AA81-F2262A213946.jpg","path":"images/B2946E62-4D94-42FF-AA81-F2262A213946.jpg","modified":0,"renderable":0},{"_id":"source/images/family_hero_large_2x.jpg","path":"images/family_hero_large_2x.jpg","modified":0,"renderable":0},{"_id":"source/images/homepage-hero.jpg","path":"images/homepage-hero.jpg","modified":0,"renderable":0},{"_id":"themes/tancy/source/css/font-awesome.min.css","path":"css/font-awesome.min.css","modified":0,"renderable":1},{"_id":"themes/tancy/source/css/fonts.css","path":"css/fonts.css","modified":0,"renderable":1},{"_id":"themes/tancy/source/css/styles.css","path":"css/styles.css","modified":1,"renderable":1},{"_id":"themes/tancy/source/favicon/favicon.png","path":"favicon/favicon.png","modified":0,"renderable":1},{"_id":"themes/tancy/source/js/bootstrap.min.js","path":"js/bootstrap.min.js","modified":0,"renderable":1},{"_id":"themes/tancy/source/js/tether.min.js","path":"js/tether.min.js","modified":0,"renderable":1},{"_id":"source/images/teaser.jpg","path":"images/teaser.jpg","modified":0,"renderable":0},{"_id":"themes/tancy/source/js/jquery-3.1.1.slim.min.js","path":"js/jquery-3.1.1.slim.min.js","modified":0,"renderable":1},{"_id":"themes/tancy/source/css/bootstrap.min.css","path":"css/bootstrap.min.css","modified":0,"renderable":1},{"_id":"source/images/DeepPainterlyHarmonization/data/2_naive.jpg","path":"images/DeepPainterlyHarmonization/data/2_naive.jpg","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/data/2_target.jpg","path":"images/DeepPainterlyHarmonization/data/2_target.jpg","modified":0,"renderable":0},{"_id":"source/images/f4.png","path":"images/f4.png","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/data/0_naive.jpg","path":"images/DeepPainterlyHarmonization/data/0_naive.jpg","modified":0,"renderable":0},{"_id":"source/images/image27.png","path":"images/image27.png","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/data/0_target.jpg","path":"images/DeepPainterlyHarmonization/data/0_target.jpg","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/data/11_naive.jpg","path":"images/DeepPainterlyHarmonization/data/11_naive.jpg","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/data/11_target.jpg","path":"images/DeepPainterlyHarmonization/data/11_target.jpg","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/data/4_naive.jpg","path":"images/DeepPainterlyHarmonization/data/4_naive.jpg","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/data/4_target.jpg","path":"images/DeepPainterlyHarmonization/data/4_target.jpg","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/data/3_naive.jpg","path":"images/DeepPainterlyHarmonization/data/3_naive.jpg","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/data/3_target.jpg","path":"images/DeepPainterlyHarmonization/data/3_target.jpg","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/data/5_naive.jpg","path":"images/DeepPainterlyHarmonization/data/5_naive.jpg","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/data/5_target.jpg","path":"images/DeepPainterlyHarmonization/data/5_target.jpg","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/data/6_target.jpg","path":"images/DeepPainterlyHarmonization/data/6_target.jpg","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/data/6_naive.jpg","path":"images/DeepPainterlyHarmonization/data/6_naive.jpg","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/data/1_naive.jpg","path":"images/DeepPainterlyHarmonization/data/1_naive.jpg","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/data/1_target.jpg","path":"images/DeepPainterlyHarmonization/data/1_target.jpg","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/results/2_final_res2.png","path":"images/DeepPainterlyHarmonization/results/2_final_res2.png","modified":0,"renderable":0},{"_id":"themes/tancy/source/images/screenshot.png","path":"images/screenshot.png","modified":0,"renderable":1},{"_id":"source/images/DeepPainterlyHarmonization/results/4_final_res2.png","path":"images/DeepPainterlyHarmonization/results/4_final_res2.png","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/results/11_final_res2.png","path":"images/DeepPainterlyHarmonization/results/11_final_res2.png","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/results/3_final_res2.png","path":"images/DeepPainterlyHarmonization/results/3_final_res2.png","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/results/5_final_res2.png","path":"images/DeepPainterlyHarmonization/results/5_final_res2.png","modified":0,"renderable":0},{"_id":"themes/tancy/source/images/unsplash.jpg","path":"images/unsplash.jpg","modified":0,"renderable":1},{"_id":"source/images/DeepPainterlyHarmonization/results/6_final_res2.png","path":"images/DeepPainterlyHarmonization/results/6_final_res2.png","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/results/1_final_res2.png","path":"images/DeepPainterlyHarmonization/results/1_final_res2.png","modified":0,"renderable":0},{"_id":"source/images/DeepPainterlyHarmonization/results/0_final_res2.png","path":"images/DeepPainterlyHarmonization/results/0_final_res2.png","modified":0,"renderable":0},{"_id":"source/images/image17.gif","path":"images/image17.gif","modified":0,"renderable":0},{"_id":"source/images/TB1kJ5uFVXXXXXAXpXXrJ1vVXXX-1304-621.png","path":"images/TB1kJ5uFVXXXXXAXpXXrJ1vVXXX-1304-621.png","modified":0,"renderable":0},{"_id":"source/images/TB14YKiFVXXXXXPaXXXoKiP5pXX-1644-934.png","path":"images/TB14YKiFVXXXXXPaXXXoKiP5pXX-1644-934.png","modified":0,"renderable":0},{"_id":"source/images/TB1crXoubGYBuNjy0FoXXciBFXa-3540-520.jpg","path":"images/TB1crXoubGYBuNjy0FoXXciBFXa-3540-520.jpg","modified":0,"renderable":0},{"_id":"themes/tancy/source/css/test.css","path":"css/test.css","modified":0,"renderable":1},{"_id":"source/images/803_designing_fluid_interfaces.jpg","path":"images/803_designing_fluid_interfaces.jpg","modified":0,"renderable":0},{"_id":"source/images/designing_fluid_interfaces/Swipe_homescreen_pages_while_going_home.m4v","path":"images/designing_fluid_interfaces/Swipe_homescreen_pages_while_going_home.m4v","modified":1,"renderable":0},{"_id":"source/images/designing_fluid_interfaces/Swipe_homescreen_pages_while_going_home.mp4","path":"images/designing_fluid_interfaces/Swipe_homescreen_pages_while_going_home.mp4","modified":1,"renderable":0},{"_id":"source/images/designing_fluid_interfaces/Combining gestures.mp4","path":"images/designing_fluid_interfaces/Combining gestures.mp4","modified":1,"renderable":0},{"_id":"source/images/designing_fluid_interfaces/Close app while launching app.mp4","path":"images/designing_fluid_interfaces/Close app while launching app.mp4","modified":1,"renderable":0},{"_id":"source/images/designing_fluid_interfaces/Interact with app as it launches.mp4","path":"images/designing_fluid_interfaces/Interact with app as it launches.mp4","modified":1,"renderable":0},{"_id":"source/images/designing_fluid_interfaces/How can we detect this pause in motion?.mp4","path":"images/designing_fluid_interfaces/How can we detect this pause in motion?.mp4","modified":1,"renderable":0},{"_id":"source/images/designing_fluid_interfaces/Go to multitasking while app is launching.mp4","path":"images/designing_fluid_interfaces/Go to multitasking while app is launching.mp4","modified":1,"renderable":0},{"_id":"source/images/designing_fluid_interfaces/Responding to Interaction.mp4","path":"images/designing_fluid_interfaces/Responding to Interaction.mp4","modified":1,"renderable":0},{"_id":"source/images/designing_fluid_interfaces/Provide continuous feedback.mp4","path":"images/designing_fluid_interfaces/Provide continuous feedback.mp4","modified":1,"renderable":0},{"_id":"source/images/designing_fluid_interfaces/Fluidity as a Medium.mp4","path":"images/designing_fluid_interfaces/Fluidity as a Medium.mp4","modified":1,"renderable":0},{"_id":"source/images/designing_fluid_interfaces/Hint in the direction of the gesture.mp4","path":"images/designing_fluid_interfaces/Hint in the direction of the gesture.mp4","modified":1,"renderable":0}],"Cache":[{"_id":"source/.DS_Store","hash":"7918009b4882e8c274a3b5853ec162d725dc9392","modified":1528643453618},{"_id":"themes/tancy/README.md","hash":"5d45fa062dd9df69baf94932e7ffb998d9bbd311","modified":1527645720538},{"_id":"themes/tancy/.DS_Store","hash":"924b39ceea1ed25a239dcc01ab4b4b7e65861d03","modified":1527646030911},{"_id":"themes/tancy/_config.yml","hash":"c7cf2cdb93585a274b0d516777517aeaecb8bb34","modified":1527645720538},{"_id":"source/404/index.md","hash":"052233a5fd10efe7ad4e3464d57faf6ad28d31b5","modified":1527645720358},{"_id":"source/_posts/Charles-Advanced.md","hash":"d9d2dfe2ef4f1b163c70512c9ec86eeba7e11419","modified":1527649916244},{"_id":"source/_posts/Charles-Base.md","hash":"c3f5441bdd8185d6390bca06c8d1b8382c3ba9c5","modified":1527649914413},{"_id":"source/_posts/Charles-SSL.md","hash":"14901c43930cfe89cd8f6287701aedaee7041bd1","modified":1527649909721},{"_id":"source/_posts/deep-painterly-harmonization.md","hash":"20565d9a3b363498c734eef44678057d60a0a309","modified":1527650368347},{"_id":"source/_posts/making-visible-watermarks-more-effective.md","hash":"5a8f514e55d09c7782df50dd3f6114813c45bd12","modified":1527645720359},{"_id":"source/_posts/平板模式下磁性铰链可覆盖键盘区域.md","hash":"49eb2f75ee13aa568b404a128a04d1837c8e85dd","modified":1527645720359},{"_id":"source/_posts/苹果获得了Apple Music的电台创作专利.md","hash":"c1b26c57a908eff17bd682decd13e9f277f80a92","modified":1527645720359},{"_id":"source/_posts/让用户调节屏幕可视角度.md","hash":"2e098473d52007803086222ab81ff8dd0217d29c","modified":1527645720359},{"_id":"source/about/index.md","hash":"42bde80687d2dd2e128673bda4b23211de5c12f5","modified":1528297678925},{"_id":"source/images/.DS_Store","hash":"8674df1564bdec1115264643b1226614c8b091b3","modified":1528644020724},{"_id":"source/images/AC6FE26F-BE56-4B72-8D2C-4B83381F474A.jpg","hash":"a37bbe23696b03a2aa0e038ab92dcaceb70dcd04","modified":1527645720361},{"_id":"source/images/FDB2320D-6263-4C2B-B87A-C19609D974B5.jpg","hash":"f0ef1c8c21a03daa43453f9de211b8a50fa8d2ee","modified":1527645720442},{"_id":"themes/tancy/layout/layout.ejs","hash":"4fc34958d3dd1b48790209552c5a3a6a0e1a6976","modified":1527645720542},{"_id":"themes/tancy/layout/page.ejs","hash":"7dc2618940f52e280ba211274f21337aaee89eeb","modified":1527645720542},{"_id":"themes/tancy/layout/index.ejs","hash":"6c63137170862b0adbbbaafed7f67b5be9cb1a18","modified":1527645720542},{"_id":"themes/tancy/layout/post.ejs","hash":"f25117feb42fed5615d62822d8f41e6d2de68cee","modified":1527645720542},{"_id":"themes/tancy/source/.DS_Store","hash":"00907e1a854f3f3eb019777af28343d39eb981e2","modified":1527646025679},{"_id":"source/images/47011C25-E4B8-4BEB-894A-9DC7A3E05CDE.jpg","hash":"6b50e5238a9d8cfddb194b70d536d4ef76de8544","modified":1527645720360},{"_id":"source/images/EC3C0191-12B0-4BDA-ABFC-2EFBD7AF8EBE.jpg","hash":"ae6212d4eab3bea626c30b487a36c7d99409dee6","modified":1527645720441},{"_id":"source/images/image15.jpg","hash":"ca5d5d39c9b9a358962142e21932d7bc34962c37","modified":1527645720462},{"_id":"source/images/DeepPainterlyHarmonization/.DS_Store","hash":"7fab9d42358d54e8b0b5f2b56676d7f1678a3a8a","modified":1527646101261},{"_id":"source/images/B2946E62-4D94-42FF-AA81-F2262A213946.jpg","hash":"6c40dbfbbca5476df8b2013cc2f27ae073f94468","modified":1527645720362},{"_id":"source/images/family_hero_large_2x.jpg","hash":"54cedab9623d388e9f11ab29ae39e85629f8c634","modified":1527645720444},{"_id":"themes/tancy/layout/_partial/footer.ejs","hash":"bb60b952c0accd0666e93188a4d032f35ec9a2ce","modified":1527771071411},{"_id":"source/images/homepage-hero.jpg","hash":"9a33a5f3b7992befab5eb080fde8fe55d547eb05","modified":1527645720459},{"_id":"themes/tancy/layout/_partial/google-analytics.ejs","hash":"148b6418f68d5b6c750d8443439739e64d31d30f","modified":1527645720538},{"_id":"themes/tancy/layout/_partial/head.ejs","hash":"21480e60c5cb8e717579c1c2d27a3fe30fd75b20","modified":1527650076499},{"_id":"themes/tancy/layout/_partial/header.ejs","hash":"0309bd3d16f8dab8f0006274a57fa150a8e30f62","modified":1527645720539},{"_id":"themes/tancy/layout/_partial/page-full.ejs","hash":"4569295e6fec476b09d2629e87ed494e286b5001","modified":1527645720539},{"_id":"themes/tancy/layout/_partial/portfolio-full.ejs","hash":"28da63db62fd5a87961189515b297e6b24acb465","modified":1527645720540},{"_id":"themes/tancy/layout/_partial/portfolio-index.ejs","hash":"67167d22cc33910bc1536789b04c3cab8031366b","modified":1527645720540},{"_id":"themes/tancy/source/css/font-awesome.min.css","hash":"512c7d79033e3028a9be61b540cf1a6870c896f8","modified":1527645720543},{"_id":"themes/tancy/source/css/fonts.css","hash":"65aa68b1e9ca7eaf3f5c7557f591086b26d50376","modified":1527645720544},{"_id":"themes/tancy/source/css/styles.css","hash":"34a8d21a6e3653ff44ab85fd45e7c4dd76ea5ba2","modified":1528635724751},{"_id":"themes/tancy/source/favicon/.DS_Store","hash":"df2fbeb1400acda0909a32c1cf6bf492f1121e07","modified":1527646030915},{"_id":"themes/tancy/source/favicon/favicon.png","hash":"0072c81d89018acbba88148a4a51e17a1165c8a9","modified":1527645720544},{"_id":"themes/tancy/source/js/bootstrap.min.js","hash":"6107d146e54a67c9998230abf839301575d05702","modified":1527645720590},{"_id":"themes/tancy/source/js/tether.min.js","hash":"cbdd0a2b2dd7a9cfc5db3f33e34323afa0ca55a3","modified":1527645720591},{"_id":"source/images/teaser.jpg","hash":"dec9b947bb4679cbe9a2f9bfb505c18bde6a9aac","modified":1527645720537},{"_id":"themes/tancy/source/js/jquery-3.1.1.slim.min.js","hash":"310bd0c04196573315c2e8446776685ac2961724","modified":1527645720591},{"_id":"themes/tancy/layout/_partial/post/category.ejs","hash":"c6bcd0e04271ffca81da25bcff5adf3d46f02fc0","modified":1527645720540},{"_id":"themes/tancy/layout/_partial/post/comment.ejs","hash":"62817de9d5f57cb0a1fc708e471b881dc4f0430c","modified":1527645720540},{"_id":"themes/tancy/layout/_partial/post/gallery.ejs","hash":"3d9d81a3c693ff2378ef06ddb6810254e509de5b","modified":1527645720541},{"_id":"themes/tancy/layout/_partial/post/date.ejs","hash":"224fff2f037deb0030a1c271de64e9d88f87b671","modified":1527645720541},{"_id":"themes/tancy/layout/_partial/post/tag.ejs","hash":"2fcb0bf9c8847a644167a27824c9bb19ac74dd14","modified":1527645720541},{"_id":"themes/tancy/layout/_partial/post/nav.ejs","hash":"16a904de7bceccbb36b4267565f2215704db2880","modified":1527645720541},{"_id":"themes/tancy/source/css/bootstrap.min.css","hash":"8b7cb193d70bb476db06651c878dfcd1a7e1c0ee","modified":1527645720543},{"_id":"themes/tancy/layout/_partial/post/title.ejs","hash":"2f275739b6f1193c123646a5a31f37d48644c667","modified":1527645720541},{"_id":"source/images/DeepPainterlyHarmonization/data/2_naive.jpg","hash":"aa5ca1c62c54d575c5b9a8855086211190777112","modified":1527645720375},{"_id":"source/images/DeepPainterlyHarmonization/data/2_target.jpg","hash":"3b4e86bec984cd54faf63d4613eaca1d265c3ae7","modified":1527645720376},{"_id":"source/images/f4.png","hash":"0c895adb63b31c041d01c9d77dbd4db679507e18","modified":1527645720443},{"_id":"source/images/DeepPainterlyHarmonization/data/0_naive.jpg","hash":"0fa44cbe17b934daf5cdbda19c6315ac94a4f0b0","modified":1527645720363},{"_id":"source/images/image27.png","hash":"a171803b3a367b74f83a00c8d042348d67e870a6","modified":1527645720531},{"_id":"source/images/DeepPainterlyHarmonization/data/0_target.jpg","hash":"2583e49e903d035195705633c759e012a9d7989e","modified":1527645720364},{"_id":"source/images/DeepPainterlyHarmonization/data/11_naive.jpg","hash":"63467afe957accaa4645c82261ebaeefe1a0925c","modified":1527645720366},{"_id":"source/images/DeepPainterlyHarmonization/data/11_target.jpg","hash":"4c1ae0eb5fd163e77de8d6f05e81a9fe32224173","modified":1527645720368},{"_id":"source/images/DeepPainterlyHarmonization/data/4_naive.jpg","hash":"1ea027a0b97bebf1a4461e3f153f275be3010f92","modified":1527645720382},{"_id":"source/images/DeepPainterlyHarmonization/data/4_target.jpg","hash":"5e59f55370c2956f1882709208a374c0bd407ca0","modified":1527645720384},{"_id":"source/images/DeepPainterlyHarmonization/data/3_naive.jpg","hash":"d53ec70b841de71ed8120d395d621e046024a72c","modified":1527645720378},{"_id":"source/images/DeepPainterlyHarmonization/data/3_target.jpg","hash":"1e01aa80c6a408b2bc758d52bf1763e2f986cdbc","modified":1527645720380},{"_id":"source/images/DeepPainterlyHarmonization/data/5_naive.jpg","hash":"4f44b8b7be1d934ee9a9ff1c56a98cfb2c23d286","modified":1527645720391},{"_id":"source/images/DeepPainterlyHarmonization/data/5_target.jpg","hash":"9b2328efb4131e61aff93c344936e36e9c73f98e","modified":1527645720393},{"_id":"source/images/DeepPainterlyHarmonization/data/6_target.jpg","hash":"7ade65895763822a5361eb53ec7fd8bb094402ef","modified":1527645720398},{"_id":"source/images/DeepPainterlyHarmonization/data/6_naive.jpg","hash":"bb58ade16f998917fc2d8b803ad308b1ed30dbef","modified":1527645720396},{"_id":"source/images/DeepPainterlyHarmonization/data/1_naive.jpg","hash":"930c290d294d1457c64bbdee5ba5ea2e8f315d41","modified":1527645720371},{"_id":"source/images/DeepPainterlyHarmonization/data/1_target.jpg","hash":"d4aa12d9ea04e90174a0ed64a81e345dcccd6785","modified":1527645720374},{"_id":"source/images/DeepPainterlyHarmonization/results/2_final_res2.png","hash":"270ff92a665d641fd2ea88b38629b957efbc7b4d","modified":1527645720420},{"_id":"themes/tancy/source/images/screenshot.png","hash":"3844277d69d4fdc732d47b5e1919f6fa66e56087","modified":1527645997785},{"_id":"source/images/DeepPainterlyHarmonization/results/4_final_res2.png","hash":"ee5018af4f888c0b6da93237523de201ce4ca01c","modified":1527645720429},{"_id":"source/images/DeepPainterlyHarmonization/results/11_final_res2.png","hash":"7639a5192686550830facd0be2a4609ab2ed2fb6","modified":1527645720411},{"_id":"source/images/DeepPainterlyHarmonization/results/3_final_res2.png","hash":"c51cf5ff01cb3a1e903894f8cdd6a77a760329eb","modified":1527645720424},{"_id":"source/images/DeepPainterlyHarmonization/results/5_final_res2.png","hash":"c84a03c5d50db9192171bb9ee2e7921f909cae94","modified":1527645720435},{"_id":"themes/tancy/source/images/unsplash.jpg","hash":"455852a141c5e1ba7b5b301edb9421cb8a974d14","modified":1527645956449},{"_id":"source/images/DeepPainterlyHarmonization/results/6_final_res2.png","hash":"0398cb7174b746e87d913bb3b5f24cc9ff6e646d","modified":1527645720440},{"_id":"source/images/DeepPainterlyHarmonization/results/1_final_res2.png","hash":"a9749807643fae2fd473d4103241b507d42df660","modified":1527645720416},{"_id":"source/images/DeepPainterlyHarmonization/results/0_final_res2.png","hash":"f0fda7e952815464101248ed3e6336bc7c974351","modified":1527645720406},{"_id":"source/images/image17.gif","hash":"0f64f7ffb993de8e2d82e23b18c0ebefa616847d","modified":1527645720521},{"_id":"source/images/TB1kJ5uFVXXXXXAXpXXrJ1vVXXX-1304-621.png","hash":"b44d46d9f0681ac8b77672a406fe5433e2bdbb14","modified":1527649814876},{"_id":"source/images/TB14YKiFVXXXXXPaXXXoKiP5pXX-1644-934.png","hash":"9a71c80c0b231c62e7878a1e1745e918dfd258b6","modified":1527649838979},{"_id":"source/images/TB1crXoubGYBuNjy0FoXXciBFXa-3540-520.jpg","hash":"e7318d55ed28c437d25f2ec87d61a77851feb22e","modified":1527649762904},{"_id":"themes/tancy/source/css/test.css","hash":"7c4c81a5f0efd2b349dd8ed82faf4b1bcba401e5","modified":1528297449102},{"_id":"source/_posts/Designing-Fluid-Interfaces.md","hash":"8260846ddf9a259511a117c434cfeb4940cfa3cf","modified":1528649240546},{"_id":"source/images/803_designing_fluid_interfaces.jpg","hash":"138401d5ac87fd6c33a42a593a591506f2ed5995","modified":1528634809578},{"_id":"source/images/designing_fluid_interfaces/Swipe_homescreen_pages_while_going_home.m4v","hash":"b689e2321e1fca90861a70fc123853626227b703","modified":1528643292324},{"_id":"source/images/designing_fluid_interfaces/Swipe_homescreen_pages_while_going_home.mp4","hash":"51e8fb2579afe7fdf351d9e6209f389d1e3a9c4d","modified":1528643131886},{"_id":"source/images/designing_fluid_interfaces/Combining gestures.mp4","hash":"360425a8c8fa6a33694030c0adaedcbe85327e49","modified":1528648654801},{"_id":"source/images/designing_fluid_interfaces/Close app while launching app.mp4","hash":"3258862bcc1484cd7cd9b4cebf9fc011775dd83b","modified":1528648932777},{"_id":"source/images/designing_fluid_interfaces/Interact with app as it launches.mp4","hash":"76a8fd3c6a6ec83c0bb7ff4f00343cffff43d669","modified":1528648980945},{"_id":"source/images/designing_fluid_interfaces/How can we detect this pause in motion?.mp4","hash":"492245544ae13fbf8e7821e186052307d3ad9979","modified":1528648568807},{"_id":"source/images/designing_fluid_interfaces/Go to multitasking while app is launching.mp4","hash":"107544d2f2606ac9aa83dc7e519804a82cc66ad0","modified":1528648991990},{"_id":"source/images/designing_fluid_interfaces/Responding to Interaction.mp4","hash":"ca01bcabbb1cfa274705c9127b0284667ef89160","modified":1528648629086},{"_id":"source/images/designing_fluid_interfaces/Provide continuous feedback.mp4","hash":"0481aacef6d3d4cc97a88678acedcfa7b515beeb","modified":1528648766848},{"_id":"source/images/designing_fluid_interfaces/Fluidity as a Medium.mp4","hash":"6b4d3d47ff479f36de6bddc65a8fcd18fe8eba37","modified":1528648680301},{"_id":"source/images/designing_fluid_interfaces/Hint in the direction of the gesture.mp4","hash":"513ac31f8a17da5b0cd807117f27374a8356778a","modified":1528648811250}],"Category":[{"name":"Blog","_id":"cjhsi9vk60004l0mmjvmhocji"},{"name":"News","_id":"cjhsi9vkm000jl0mmtanohz93"}],"Data":[],"Page":[{"title":"404 Not Found：该页无法显示","toc":false,"comments":0,"_content":"<br/>\n<br/>\n<div style=\"font-size:100px;\">404 </div>\n\n### We couldn’t find this page.\n\n<br/>\n<br/><br/><br/><br/><br/>","source":"404/index.md","raw":"---\ntitle: 404 Not Found：该页无法显示\ntoc: false\ncomments: false\npermalink: /404\n---\n<br/>\n<br/>\n<div style=\"font-size:100px;\">404 </div>\n\n### We couldn’t find this page.\n\n<br/>\n<br/><br/><br/><br/><br/>","date":"2018-05-30T02:02:00.358Z","updated":"2018-05-30T02:02:00.358Z","path":"/404.html","layout":"page","_id":"cjhsi9vjy0000l0mm2k824syi","content":"<p><br><br><br></p>\n<div style=\"font-size:100px;\">404 </div>\n\n<h3 id=\"We-couldn’t-find-this-page\"><a href=\"#We-couldn’t-find-this-page\" class=\"headerlink\" title=\"We couldn’t find this page.\"></a>We couldn’t find this page.</h3><p><br><br><br><br><br><br><br></p>\n","site":{"data":{}},"excerpt":"","more":"<p><br><br><br></p>\n<div style=\"font-size:100px;\">404 </div>\n\n<h3 id=\"We-couldn’t-find-this-page\"><a href=\"#We-couldn’t-find-this-page\" class=\"headerlink\" title=\"We couldn’t find this page.\"></a>We couldn’t find this page.</h3><p><br><br><br><br><br><br><br></p>\n"},{"title":"About Me","comments":0,"_content":"\n## About Me\n\n<center>\n<img src=\"https://cdn.yuque.com/yuque/0/2018/jpeg/97491/1525229787858-avatar/949ccd87-5122-49e3-b8f1-3475ccb6fd1f.jpeg?x-oss-process=image/resize,m_fill,h_200,w_200/format,png\" width=\"100px\" style=\"border-radius:100px\"/>\n</center>\n我叫晓田(花名),用这个空间记录📝我的一点点所看所想（其实是年纪大了🌳需要写下来，以免忘记）。\n\n<br/>\n<br/>\n<center>👋</center>\n### 👇联系方式点击👇\n","source":"about/index.md","raw":"---\ntitle: About Me\ncomments: false\n---\n\n## About Me\n\n<center>\n<img src=\"https://cdn.yuque.com/yuque/0/2018/jpeg/97491/1525229787858-avatar/949ccd87-5122-49e3-b8f1-3475ccb6fd1f.jpeg?x-oss-process=image/resize,m_fill,h_200,w_200/format,png\" width=\"100px\" style=\"border-radius:100px\"/>\n</center>\n我叫晓田(花名),用这个空间记录📝我的一点点所看所想（其实是年纪大了🌳需要写下来，以免忘记）。\n\n<br/>\n<br/>\n<center>👋</center>\n### 👇联系方式点击👇\n","date":"2018-06-06T15:07:58.925Z","updated":"2018-06-06T15:07:58.925Z","path":"about/index.html","_id":"cjhsi9vk30002l0mmyk15njy2","layout":"page","content":"<h2 id=\"About-Me\"><a href=\"#About-Me\" class=\"headerlink\" title=\"About Me\"></a>About Me</h2><p><center><br><img src=\"https://cdn.yuque.com/yuque/0/2018/jpeg/97491/1525229787858-avatar/949ccd87-5122-49e3-b8f1-3475ccb6fd1f.jpeg?x-oss-process=image/resize,m_fill,h_200,w_200/format,png\" width=\"100px\" style=\"border-radius:100px\"><br></center><br>我叫晓田(花名),用这个空间记录📝我的一点点所看所想（其实是年纪大了🌳需要写下来，以免忘记）。</p>\n<p><br><br><br></p>\n<p><center>👋</center></p>\n<h3 id=\"👇联系方式点击👇\"><a href=\"#👇联系方式点击👇\" class=\"headerlink\" title=\"👇联系方式点击👇\"></a>👇联系方式点击👇</h3>","site":{"data":{}},"excerpt":"","more":"<h2 id=\"About-Me\"><a href=\"#About-Me\" class=\"headerlink\" title=\"About Me\"></a>About Me</h2><p><center><br><img src=\"https://cdn.yuque.com/yuque/0/2018/jpeg/97491/1525229787858-avatar/949ccd87-5122-49e3-b8f1-3475ccb6fd1f.jpeg?x-oss-process=image/resize,m_fill,h_200,w_200/format,png\" width=\"100px\" style=\"border-radius:100px\"><br></center><br>我叫晓田(花名),用这个空间记录📝我的一点点所看所想（其实是年纪大了🌳需要写下来，以免忘记）。</p>\n<p><br><br><br></p>\n<p><center>👋</center></p>\n<h3 id=\"👇联系方式点击👇\"><a href=\"#👇联系方式点击👇\" class=\"headerlink\" title=\"👇联系方式点击👇\"></a>👇联系方式点击👇</h3>"}],"Post":[{"layout":"post","title":"Charles 高级篇","description":"本片讲述Charles的高级篇，介绍软件的网速模拟功能，牛逼的断点功能，重复发送请求，捕获记录控制。","cover_image":"images/TB14YKiFVXXXXXPaXXXoKiP5pXX-1644-934.png","date":"2014-07-21T11:16:00.000Z","_content":"\n基础篇讲解了Charles最常用功能代理的使用，高级篇继续演示Charles的特色有趣的功能。\n\n##网速模拟功能\n\nthrottle功能对于前端来说非常实用，可以看页面在低网速下的表现，从而找出优化的点。\n在线上环境通常有些因为网速慢导致的bug，在本机无法重现，那时候就很抓瞎，如果嫌远程麻烦，推荐使用throttle。\n\n首先先配置下throttle。\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB12wOAFVXXXXcmXXXXVcq6YpXX-2124-1384.png\" alt=\"Charles 设置Throttle\">\n</div>\n\n设置各种网络速率\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms04.alicdn.com/tps/i4/TB1vdqsFVXXXXcoXFXXSByXHVXX-1100-1144.png\" alt=\"Charles 设置Throttle\">\n</div>\n（Charles的预配置对于中国的网络环境并不准确，电信、移动、网通的速度还有有明显差异。）\n解析下图上几个配置的含义：\nBandwidth（带宽）、Utilistation（利用百分比）、Round-trip（往返延迟）、MTU（字节）。\n\n##牛逼的断点功能\n\nCharles另一个非常实用的功能，对于开发者和测试人员来说，堪称神器。Charles能够断到发送请求前（篡改Request）和请求后（篡改Response）。\n\n场景：ajax发送请求，我们需要测试接口的各种边界情况，比如出错、超时等表现，Charles的断点+随意篡改，非常方便测试。\n\n\n针对某一个请求，右键选择“BreakPoints”，开启断点。\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1pb5iFVXXXXaVaXXXEY0C6VXX-2126-1332.png\" alt=\"Charles 设置断点\">\n</div>\n\n小技巧：不用在web界面中操作，使用repeat功能，就可再次发送一样的请求：\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB1tCWyFVXXXXXEXpXXqNZYGFXX-912-670.png\" alt=\"Charles 重新请求\">\n</div>\n\n###断点列表查看\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1.iylFVXXXXayaXXXJcUmOVXX-2122-1382.png\" alt=\"Charles 断点列表\">\n</div>\n\n可以指定断点“get”请求还是“post”请求。\n\n##重复发送请求\n\nrepeat功能对于测试同学特别有用，可以检验接口的健壮性。\nrepeat功对于前端的价值是不需要刷新页面，只需要repeat请求，比如检验代理是否成功，修改请求后执行等。\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB1tCWyFVXXXXXEXpXXqNZYGFXX-912-670.png\" alt=\"Charles 重复请求\">\n</div>\n\n\n“repeat”重复发送一次请求。\n\n“repeat Advances”可以自定义重复次数和重复间隔。\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1hfGpFVXXXXczXFXXI.IF6XXX-1434-956.png\" alt=\"Charles 自定义重复次数和重复间隔\">\n</div>\n\n\n\n##捕获记录控制\n\n捕获的请求太多，容易产生干扰，Charles可以对捕获记录进行过滤。\n\n然后配置“exclude”：\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1SImyFVXXXXcRXXXX6aMrIXXX-2128-1380.png\" alt=\"Charles 记录过滤\">\n</div>\n\n\n##web界面\n\nCharles有个有趣的web界面：\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1Jk5pFVXXXXcTXFXXXpwU2VXX-1096-1034.png\" alt=\"Charles 记录过滤\">\n</div>\n\n\n强大的是可以控制是否远程可以访问这个界面，还可以设置用户名和密码…碉堡了…\n\n浏览器输入http://control.charles/ ：\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB14YKiFVXXXXXPaXXXoKiP5pXX-1644-934.png\" alt=\"Charles 记录过滤\">\n</div>\n\n\nCharles还有其他有趣功能等待大家挖掘...","source":"_posts/Charles-Advanced.md","raw":"---\nlayout: post\ntitle:  \"Charles 高级篇\"\ndescription: 本片讲述Charles的高级篇，介绍软件的网速模拟功能，牛逼的断点功能，重复发送请求，捕获记录控制。\ncover_image: images/TB14YKiFVXXXXXPaXXXoKiP5pXX-1644-934.png\ncategories:\n  - Blog\ntag:\n  - Charles\ndate: 2014-07-21 19:16:00\n---\n\n基础篇讲解了Charles最常用功能代理的使用，高级篇继续演示Charles的特色有趣的功能。\n\n##网速模拟功能\n\nthrottle功能对于前端来说非常实用，可以看页面在低网速下的表现，从而找出优化的点。\n在线上环境通常有些因为网速慢导致的bug，在本机无法重现，那时候就很抓瞎，如果嫌远程麻烦，推荐使用throttle。\n\n首先先配置下throttle。\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB12wOAFVXXXXcmXXXXVcq6YpXX-2124-1384.png\" alt=\"Charles 设置Throttle\">\n</div>\n\n设置各种网络速率\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms04.alicdn.com/tps/i4/TB1vdqsFVXXXXcoXFXXSByXHVXX-1100-1144.png\" alt=\"Charles 设置Throttle\">\n</div>\n（Charles的预配置对于中国的网络环境并不准确，电信、移动、网通的速度还有有明显差异。）\n解析下图上几个配置的含义：\nBandwidth（带宽）、Utilistation（利用百分比）、Round-trip（往返延迟）、MTU（字节）。\n\n##牛逼的断点功能\n\nCharles另一个非常实用的功能，对于开发者和测试人员来说，堪称神器。Charles能够断到发送请求前（篡改Request）和请求后（篡改Response）。\n\n场景：ajax发送请求，我们需要测试接口的各种边界情况，比如出错、超时等表现，Charles的断点+随意篡改，非常方便测试。\n\n\n针对某一个请求，右键选择“BreakPoints”，开启断点。\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1pb5iFVXXXXaVaXXXEY0C6VXX-2126-1332.png\" alt=\"Charles 设置断点\">\n</div>\n\n小技巧：不用在web界面中操作，使用repeat功能，就可再次发送一样的请求：\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB1tCWyFVXXXXXEXpXXqNZYGFXX-912-670.png\" alt=\"Charles 重新请求\">\n</div>\n\n###断点列表查看\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1.iylFVXXXXayaXXXJcUmOVXX-2122-1382.png\" alt=\"Charles 断点列表\">\n</div>\n\n可以指定断点“get”请求还是“post”请求。\n\n##重复发送请求\n\nrepeat功能对于测试同学特别有用，可以检验接口的健壮性。\nrepeat功对于前端的价值是不需要刷新页面，只需要repeat请求，比如检验代理是否成功，修改请求后执行等。\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB1tCWyFVXXXXXEXpXXqNZYGFXX-912-670.png\" alt=\"Charles 重复请求\">\n</div>\n\n\n“repeat”重复发送一次请求。\n\n“repeat Advances”可以自定义重复次数和重复间隔。\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1hfGpFVXXXXczXFXXI.IF6XXX-1434-956.png\" alt=\"Charles 自定义重复次数和重复间隔\">\n</div>\n\n\n\n##捕获记录控制\n\n捕获的请求太多，容易产生干扰，Charles可以对捕获记录进行过滤。\n\n然后配置“exclude”：\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1SImyFVXXXXcRXXXX6aMrIXXX-2128-1380.png\" alt=\"Charles 记录过滤\">\n</div>\n\n\n##web界面\n\nCharles有个有趣的web界面：\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1Jk5pFVXXXXcTXFXXXpwU2VXX-1096-1034.png\" alt=\"Charles 记录过滤\">\n</div>\n\n\n强大的是可以控制是否远程可以访问这个界面，还可以设置用户名和密码…碉堡了…\n\n浏览器输入http://control.charles/ ：\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB14YKiFVXXXXXPaXXXoKiP5pXX-1644-934.png\" alt=\"Charles 记录过滤\">\n</div>\n\n\nCharles还有其他有趣功能等待大家挖掘...","slug":"Charles-Advanced","published":1,"updated":"2018-05-30T03:11:56.244Z","_id":"cjhsi9vk00001l0mmaxi2b038","comments":1,"photos":[],"link":"","content":"<p>基础篇讲解了Charles最常用功能代理的使用，高级篇继续演示Charles的特色有趣的功能。</p>\n<p>##网速模拟功能</p>\n<p>throttle功能对于前端来说非常实用，可以看页面在低网速下的表现，从而找出优化的点。<br>在线上环境通常有些因为网速慢导致的bug，在本机无法重现，那时候就很抓瞎，如果嫌远程麻烦，推荐使用throttle。</p>\n<p>首先先配置下throttle。</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB12wOAFVXXXXcmXXXXVcq6YpXX-2124-1384.png\" alt=\"Charles 设置Throttle\"><br></div>\n\n<p>设置各种网络速率</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms04.alicdn.com/tps/i4/TB1vdqsFVXXXXcoXFXXSByXHVXX-1100-1144.png\" alt=\"Charles 设置Throttle\"><br></div><br>（Charles的预配置对于中国的网络环境并不准确，电信、移动、网通的速度还有有明显差异。）<br>解析下图上几个配置的含义：<br>Bandwidth（带宽）、Utilistation（利用百分比）、Round-trip（往返延迟）、MTU（字节）。<br><br>##牛逼的断点功能<br><br>Charles另一个非常实用的功能，对于开发者和测试人员来说，堪称神器。Charles能够断到发送请求前（篡改Request）和请求后（篡改Response）。<br><br>场景：ajax发送请求，我们需要测试接口的各种边界情况，比如出错、超时等表现，Charles的断点+随意篡改，非常方便测试。<br><br><br>针对某一个请求，右键选择“BreakPoints”，开启断点。<br><br><div><br>    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1pb5iFVXXXXaVaXXXEY0C6VXX-2126-1332.png\" alt=\"Charles 设置断点\"><br></div>\n\n<p>小技巧：不用在web界面中操作，使用repeat功能，就可再次发送一样的请求：</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB1tCWyFVXXXXXEXpXXqNZYGFXX-912-670.png\" alt=\"Charles 重新请求\"><br></div>\n\n<p>###断点列表查看</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1.iylFVXXXXayaXXXJcUmOVXX-2122-1382.png\" alt=\"Charles 断点列表\"><br></div>\n\n<p>可以指定断点“get”请求还是“post”请求。</p>\n<p>##重复发送请求</p>\n<p>repeat功能对于测试同学特别有用，可以检验接口的健壮性。<br>repeat功对于前端的价值是不需要刷新页面，只需要repeat请求，比如检验代理是否成功，修改请求后执行等。</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB1tCWyFVXXXXXEXpXXqNZYGFXX-912-670.png\" alt=\"Charles 重复请求\"><br></div>\n\n\n<p>“repeat”重复发送一次请求。</p>\n<p>“repeat Advances”可以自定义重复次数和重复间隔。</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1hfGpFVXXXXczXFXXI.IF6XXX-1434-956.png\" alt=\"Charles 自定义重复次数和重复间隔\"><br></div>\n\n\n\n<p>##捕获记录控制</p>\n<p>捕获的请求太多，容易产生干扰，Charles可以对捕获记录进行过滤。</p>\n<p>然后配置“exclude”：</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1SImyFVXXXXcRXXXX6aMrIXXX-2128-1380.png\" alt=\"Charles 记录过滤\"><br></div>\n\n\n<p>##web界面</p>\n<p>Charles有个有趣的web界面：</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1Jk5pFVXXXXcTXFXXXpwU2VXX-1096-1034.png\" alt=\"Charles 记录过滤\"><br></div>\n\n\n<p>强大的是可以控制是否远程可以访问这个界面，还可以设置用户名和密码…碉堡了…</p>\n<p>浏览器输入<a href=\"http://control.charles/\" target=\"_blank\" rel=\"noopener\">http://control.charles/</a> ：</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB14YKiFVXXXXXPaXXXoKiP5pXX-1644-934.png\" alt=\"Charles 记录过滤\"><br></div>\n\n\n<p>Charles还有其他有趣功能等待大家挖掘…</p>\n","site":{"data":{}},"excerpt":"","more":"<p>基础篇讲解了Charles最常用功能代理的使用，高级篇继续演示Charles的特色有趣的功能。</p>\n<p>##网速模拟功能</p>\n<p>throttle功能对于前端来说非常实用，可以看页面在低网速下的表现，从而找出优化的点。<br>在线上环境通常有些因为网速慢导致的bug，在本机无法重现，那时候就很抓瞎，如果嫌远程麻烦，推荐使用throttle。</p>\n<p>首先先配置下throttle。</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB12wOAFVXXXXcmXXXXVcq6YpXX-2124-1384.png\" alt=\"Charles 设置Throttle\"><br></div>\n\n<p>设置各种网络速率</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms04.alicdn.com/tps/i4/TB1vdqsFVXXXXcoXFXXSByXHVXX-1100-1144.png\" alt=\"Charles 设置Throttle\"><br></div><br>（Charles的预配置对于中国的网络环境并不准确，电信、移动、网通的速度还有有明显差异。）<br>解析下图上几个配置的含义：<br>Bandwidth（带宽）、Utilistation（利用百分比）、Round-trip（往返延迟）、MTU（字节）。<br><br>##牛逼的断点功能<br><br>Charles另一个非常实用的功能，对于开发者和测试人员来说，堪称神器。Charles能够断到发送请求前（篡改Request）和请求后（篡改Response）。<br><br>场景：ajax发送请求，我们需要测试接口的各种边界情况，比如出错、超时等表现，Charles的断点+随意篡改，非常方便测试。<br><br><br>针对某一个请求，右键选择“BreakPoints”，开启断点。<br><br><div><br>    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1pb5iFVXXXXaVaXXXEY0C6VXX-2126-1332.png\" alt=\"Charles 设置断点\"><br></div>\n\n<p>小技巧：不用在web界面中操作，使用repeat功能，就可再次发送一样的请求：</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB1tCWyFVXXXXXEXpXXqNZYGFXX-912-670.png\" alt=\"Charles 重新请求\"><br></div>\n\n<p>###断点列表查看</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1.iylFVXXXXayaXXXJcUmOVXX-2122-1382.png\" alt=\"Charles 断点列表\"><br></div>\n\n<p>可以指定断点“get”请求还是“post”请求。</p>\n<p>##重复发送请求</p>\n<p>repeat功能对于测试同学特别有用，可以检验接口的健壮性。<br>repeat功对于前端的价值是不需要刷新页面，只需要repeat请求，比如检验代理是否成功，修改请求后执行等。</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB1tCWyFVXXXXXEXpXXqNZYGFXX-912-670.png\" alt=\"Charles 重复请求\"><br></div>\n\n\n<p>“repeat”重复发送一次请求。</p>\n<p>“repeat Advances”可以自定义重复次数和重复间隔。</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1hfGpFVXXXXczXFXXI.IF6XXX-1434-956.png\" alt=\"Charles 自定义重复次数和重复间隔\"><br></div>\n\n\n\n<p>##捕获记录控制</p>\n<p>捕获的请求太多，容易产生干扰，Charles可以对捕获记录进行过滤。</p>\n<p>然后配置“exclude”：</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1SImyFVXXXXcRXXXX6aMrIXXX-2128-1380.png\" alt=\"Charles 记录过滤\"><br></div>\n\n\n<p>##web界面</p>\n<p>Charles有个有趣的web界面：</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1Jk5pFVXXXXcTXFXXXpwU2VXX-1096-1034.png\" alt=\"Charles 记录过滤\"><br></div>\n\n\n<p>强大的是可以控制是否远程可以访问这个界面，还可以设置用户名和密码…碉堡了…</p>\n<p>浏览器输入<a href=\"http://control.charles/\" target=\"_blank\" rel=\"noopener\">http://control.charles/</a> ：</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB14YKiFVXXXXXPaXXXoKiP5pXX-1644-934.png\" alt=\"Charles 记录过滤\"><br></div>\n\n\n<p>Charles还有其他有趣功能等待大家挖掘…</p>\n"},{"layout":"post","title":"Charles 之SSL","description":"本片讲述Charles的高级篇，介绍软件特色功能之SSL。","cover_image":"images/TB1kJ5uFVXXXXXAXpXXrJ1vVXXX-1304-621.png","date":"2014-07-22T12:16:00.000Z","_content":"\n本次高级篇继续演示Charles的特色功能之SSL。\n\n##启用SSL Proxy\n\n现在我们已启动一个支付宝App为例子，设置好代理。启动app后我们看到捕获的数据请求。如下：\n\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms04.alicdn.com/tps/i4/TB1IXuBFVXXXXXeXpXX8b0M6VXX-2126-1386.png\" alt=\"Charles 拦截请求\">\n</div>\n\n我们点击其中的一下请求，查看请求的详细情况，会发现导出是乱码。\n这是因为支付宝使用SSL来加密应用和服务器之间的通信。要想看到其中的信息，你就需要欺骗你的手机，设置方面很简单，只需要2个步骤。\n\n###步骤1： 在你的iOS设备上安装Charles 的SSL证书\n\n如果您使用的是iOS4或以上设备，请在您的手机浏览器中访问[http://charlesproxy.com/charles.crt](http://charlesproxy.com/charles.crt)，这是会启动Charles的证书安装过程。\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1ODquFVXXXXa0XFXXOsBu0VXX-640-679.png\" alt=\"Charles 安装SSL证书\">\n</div>\n\n如果想要在iOS的旧版本或其他模拟器，请查看[Charles官方文档](http://www.charlesproxy.com/documentation/faqs/ssl-connections-from-within-iphone-applications/)\n\n\n###步骤2：在Charles中配置你需要的SSL代理的域\n\n在Charles中选择 Proxy菜单-> Proxy Settings ，然后选择SSL选项卡。\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1QcyyFVXXXXa.XpXXib55YpXX-2124-1380.png\" alt=\"Charles 安装SSL证书\">\n</div>\n\n现在，您可以根据您的要求添加多个域，可以使用通配符。\n\n1.*.alipay.com\n\n2.*.google.com\n\n## 再次看Charles 请求\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1HdXUFVXXXXchaXXXqPLHOVXX-2122-1054.png\" alt=\"Charles 安装SSL证书\">\n</div>\n\n这时我们就能看到https的发出的请求数据。\n\nCharles还有其他有趣功能等待大家挖掘...","source":"_posts/Charles-SSL.md","raw":"---\nlayout: post\ntitle:  \"Charles 之SSL\"\ndescription: 本片讲述Charles的高级篇，介绍软件特色功能之SSL。\ncover_image: images/TB1kJ5uFVXXXXXAXpXXrJ1vVXXX-1304-621.png\ncategories:\n  - Blog\ntag:\n  - Charles\n  - SSL\ndate: 2014/07/22 20:16:00\n---\n\n本次高级篇继续演示Charles的特色功能之SSL。\n\n##启用SSL Proxy\n\n现在我们已启动一个支付宝App为例子，设置好代理。启动app后我们看到捕获的数据请求。如下：\n\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms04.alicdn.com/tps/i4/TB1IXuBFVXXXXXeXpXX8b0M6VXX-2126-1386.png\" alt=\"Charles 拦截请求\">\n</div>\n\n我们点击其中的一下请求，查看请求的详细情况，会发现导出是乱码。\n这是因为支付宝使用SSL来加密应用和服务器之间的通信。要想看到其中的信息，你就需要欺骗你的手机，设置方面很简单，只需要2个步骤。\n\n###步骤1： 在你的iOS设备上安装Charles 的SSL证书\n\n如果您使用的是iOS4或以上设备，请在您的手机浏览器中访问[http://charlesproxy.com/charles.crt](http://charlesproxy.com/charles.crt)，这是会启动Charles的证书安装过程。\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1ODquFVXXXXa0XFXXOsBu0VXX-640-679.png\" alt=\"Charles 安装SSL证书\">\n</div>\n\n如果想要在iOS的旧版本或其他模拟器，请查看[Charles官方文档](http://www.charlesproxy.com/documentation/faqs/ssl-connections-from-within-iphone-applications/)\n\n\n###步骤2：在Charles中配置你需要的SSL代理的域\n\n在Charles中选择 Proxy菜单-> Proxy Settings ，然后选择SSL选项卡。\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1QcyyFVXXXXa.XpXXib55YpXX-2124-1380.png\" alt=\"Charles 安装SSL证书\">\n</div>\n\n现在，您可以根据您的要求添加多个域，可以使用通配符。\n\n1.*.alipay.com\n\n2.*.google.com\n\n## 再次看Charles 请求\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1HdXUFVXXXXchaXXXqPLHOVXX-2122-1054.png\" alt=\"Charles 安装SSL证书\">\n</div>\n\n这时我们就能看到https的发出的请求数据。\n\nCharles还有其他有趣功能等待大家挖掘...","slug":"Charles-SSL","published":1,"updated":"2018-05-30T03:11:49.721Z","_id":"cjhsi9vk40003l0mmr9kgnp6o","comments":1,"photos":[],"link":"","content":"<p>本次高级篇继续演示Charles的特色功能之SSL。</p>\n<p>##启用SSL Proxy</p>\n<p>现在我们已启动一个支付宝App为例子，设置好代理。启动app后我们看到捕获的数据请求。如下：</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms04.alicdn.com/tps/i4/TB1IXuBFVXXXXXeXpXX8b0M6VXX-2126-1386.png\" alt=\"Charles 拦截请求\"><br></div>\n\n<p>我们点击其中的一下请求，查看请求的详细情况，会发现导出是乱码。<br>这是因为支付宝使用SSL来加密应用和服务器之间的通信。要想看到其中的信息，你就需要欺骗你的手机，设置方面很简单，只需要2个步骤。</p>\n<p>###步骤1： 在你的iOS设备上安装Charles 的SSL证书</p>\n<p>如果您使用的是iOS4或以上设备，请在您的手机浏览器中访问<a href=\"http://charlesproxy.com/charles.crt\" target=\"_blank\" rel=\"noopener\">http://charlesproxy.com/charles.crt</a>，这是会启动Charles的证书安装过程。</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1ODquFVXXXXa0XFXXOsBu0VXX-640-679.png\" alt=\"Charles 安装SSL证书\"><br></div>\n\n<p>如果想要在iOS的旧版本或其他模拟器，请查看<a href=\"http://www.charlesproxy.com/documentation/faqs/ssl-connections-from-within-iphone-applications/\" target=\"_blank\" rel=\"noopener\">Charles官方文档</a></p>\n<p>###步骤2：在Charles中配置你需要的SSL代理的域</p>\n<p>在Charles中选择 Proxy菜单-&gt; Proxy Settings ，然后选择SSL选项卡。</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1QcyyFVXXXXa.XpXXib55YpXX-2124-1380.png\" alt=\"Charles 安装SSL证书\"><br></div>\n\n<p>现在，您可以根据您的要求添加多个域，可以使用通配符。</p>\n<p>1.*.alipay.com</p>\n<p>2.*.google.com</p>\n<h2 id=\"再次看Charles-请求\"><a href=\"#再次看Charles-请求\" class=\"headerlink\" title=\"再次看Charles 请求\"></a>再次看Charles 请求</h2><div><br>    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1HdXUFVXXXXchaXXXqPLHOVXX-2122-1054.png\" alt=\"Charles 安装SSL证书\"><br></div>\n\n<p>这时我们就能看到https的发出的请求数据。</p>\n<p>Charles还有其他有趣功能等待大家挖掘…</p>\n","site":{"data":{}},"excerpt":"","more":"<p>本次高级篇继续演示Charles的特色功能之SSL。</p>\n<p>##启用SSL Proxy</p>\n<p>现在我们已启动一个支付宝App为例子，设置好代理。启动app后我们看到捕获的数据请求。如下：</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms04.alicdn.com/tps/i4/TB1IXuBFVXXXXXeXpXX8b0M6VXX-2126-1386.png\" alt=\"Charles 拦截请求\"><br></div>\n\n<p>我们点击其中的一下请求，查看请求的详细情况，会发现导出是乱码。<br>这是因为支付宝使用SSL来加密应用和服务器之间的通信。要想看到其中的信息，你就需要欺骗你的手机，设置方面很简单，只需要2个步骤。</p>\n<p>###步骤1： 在你的iOS设备上安装Charles 的SSL证书</p>\n<p>如果您使用的是iOS4或以上设备，请在您的手机浏览器中访问<a href=\"http://charlesproxy.com/charles.crt\" target=\"_blank\" rel=\"noopener\">http://charlesproxy.com/charles.crt</a>，这是会启动Charles的证书安装过程。</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1ODquFVXXXXa0XFXXOsBu0VXX-640-679.png\" alt=\"Charles 安装SSL证书\"><br></div>\n\n<p>如果想要在iOS的旧版本或其他模拟器，请查看<a href=\"http://www.charlesproxy.com/documentation/faqs/ssl-connections-from-within-iphone-applications/\" target=\"_blank\" rel=\"noopener\">Charles官方文档</a></p>\n<p>###步骤2：在Charles中配置你需要的SSL代理的域</p>\n<p>在Charles中选择 Proxy菜单-&gt; Proxy Settings ，然后选择SSL选项卡。</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1QcyyFVXXXXa.XpXXib55YpXX-2124-1380.png\" alt=\"Charles 安装SSL证书\"><br></div>\n\n<p>现在，您可以根据您的要求添加多个域，可以使用通配符。</p>\n<p>1.*.alipay.com</p>\n<p>2.*.google.com</p>\n<h2 id=\"再次看Charles-请求\"><a href=\"#再次看Charles-请求\" class=\"headerlink\" title=\"再次看Charles 请求\"></a>再次看Charles 请求</h2><div><br>    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1HdXUFVXXXXchaXXXqPLHOVXX-2122-1054.png\" alt=\"Charles 安装SSL证书\"><br></div>\n\n<p>这时我们就能看到https的发出的请求数据。</p>\n<p>Charles还有其他有趣功能等待大家挖掘…</p>\n"},{"layout":"post","title":"深度绘画协调 Deep Painterly Harmonization","description":"P图应该是每个会ps的同学都玩过，要做到以假乱真还是需要强大的ps功底，现在通过深度学习可以做到以假乱真，傻傻分不清楚。","cover_image":"images/TB1crXoubGYBuNjy0FoXXciBFXa-3540-520.jpg","date":"2018-05-29T03:29:16.000Z","_content":"\nP图应该是每个会ps的同学都玩过，要做到以假乱真还是需要强大的ps功底，现在通过深度学习可以做到以假乱真，傻傻分不清楚。如下图:\n\n<p align='center'><img src='/images/DeepPainterlyHarmonization/data/11_target.jpg' style=\"width:32% !important\"/><img src='/images/DeepPainterlyHarmonization/data/11_naive.jpg' style=\"width:32% !important\"/><img src='/images/DeepPainterlyHarmonization/results/11_final_res2.png' style=\"width:32% !important\"/></p>\n\n\n\n\n### 看看新算法的不同\n\n\n![](https://img.alicdn.com/tfs/TB1h22fuXOWBuNjy0FiXXXFxVXa-2870-1210.jpg)\n\n风格化迁移算法目前有很多，但是在Cornell大学和Adobe的同学们看来，现存的算法比较弱。\n要像上图这样，把美队的盾牌融合到意大利画家[Onofrio Bramante](https://it.wikipedia.org/wiki/Onofrio_Bramante)的作品里就比较困难，在这个作品中一些微小的差异就会让人感觉很明显。\n全局风格迁移的效果表现类似图3（从左往右第3列图) ，无论是边界线、匹配色彩还是细化质地，都很难让粘贴部分拥有画作的原始风格。\n\n于是他们搭建局部风格化的神经网络。\n\n他们主要以Gatys团队发表的风格迁移[Image Style Transfer](https://www.cv-foundation.org/openaccess/content_cvpr_2016/papers/Gatys_Image_Style_Transfer_CVPR_2016_paper.pdf)技术为基础，用VGG搭建了一个two-pass算法，还额外引入了一些风格重建损失 (Reconstruction Losses) 来优化结果。\n\n以下为各个算法效果对比:\n![](https://img.alicdn.com/tfs/TB1vmY5ueuSBuNjy1XcXXcYjFXa-2342-1768.jpg)\n\n作者还有能实现像素级别的风格迁移的成果[“Deep Photo Style Transfer”](https://arxiv.org/pdf/1703.07511.pdf)\n\n\n### 最终成果\n\n<escape>\n  <p align='center'>\n    <img src='/images/DeepPainterlyHarmonization/data/0_target.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/data/0_naive.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/results/0_final_res2.png' style=\"width:32% !important\"/>\n  </p>\n  <p align='center'>\n    <img src='/images/DeepPainterlyHarmonization/data/1_target.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/data/1_naive.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/results/1_final_res2.png' style=\"width:32% !important\"/>\n  </p>\n  <p align='center'>\n    <img src='/images/DeepPainterlyHarmonization/data/2_target.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/data/2_naive.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/results/2_final_res2.png' style=\"width:32% !important\"/>\n  </p>\n  <p align='center'>\n    <img src='/images/DeepPainterlyHarmonization/data/3_target.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/data/3_naive.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/results/3_final_res2.png' style=\"width:32% !important\"/>\n  </p>\n  <p align='center'>\n    <img src='/images/DeepPainterlyHarmonization/data/5_target.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/data/5_naive.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/results/5_final_res2.png' style=\"width:32% !important\"/>\n  </p>\n  <p align='center'>\n    <img src='/images/DeepPainterlyHarmonization/data/6_target.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/data/6_naive.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/results/6_final_res2.png' style=\"width:32% !important\"/>\n  </p>\n</escape>\n\n### 参考资料\n- Github: [deep-painterly-harmonization][1]\n- 论文地址: [https://arxiv.org/abs/1804.03189][2]\n- [Image Style Transfer][3]\n- [画家 Onofrio Bramante][4]\n- [Deep Photo Style Transfer][5]\n\n[1]: https://github.com/luanfujun/deep-painterly-harmonization\n[2]: https://arxiv.org/abs/1804.03189\n[3]: https://www.cv-foundation.org/openaccess/content_cvpr_2016/papers/Gatys_Image_Style_Transfer_CVPR_2016_paper.pdf\n[4]: https://it.wikipedia.org/wiki/Onofrio_Bramante\n[5]: https://arxiv.org/pdf/1703.07511.pdf","source":"_posts/deep-painterly-harmonization.md","raw":"---\nlayout: post\ntitle:  \"深度绘画协调 Deep Painterly Harmonization\"\ndescription: P图应该是每个会ps的同学都玩过，要做到以假乱真还是需要强大的ps功底，现在通过深度学习可以做到以假乱真，傻傻分不清楚。\ncover_image: images/TB1crXoubGYBuNjy0FoXXciBFXa-3540-520.jpg\ncategories:\n  - Blog\ntag:\n  - AI\n  - Paper\ndate: 2018/05/29 11:29:16\n---\n\nP图应该是每个会ps的同学都玩过，要做到以假乱真还是需要强大的ps功底，现在通过深度学习可以做到以假乱真，傻傻分不清楚。如下图:\n\n<p align='center'><img src='/images/DeepPainterlyHarmonization/data/11_target.jpg' style=\"width:32% !important\"/><img src='/images/DeepPainterlyHarmonization/data/11_naive.jpg' style=\"width:32% !important\"/><img src='/images/DeepPainterlyHarmonization/results/11_final_res2.png' style=\"width:32% !important\"/></p>\n\n\n\n\n### 看看新算法的不同\n\n\n![](https://img.alicdn.com/tfs/TB1h22fuXOWBuNjy0FiXXXFxVXa-2870-1210.jpg)\n\n风格化迁移算法目前有很多，但是在Cornell大学和Adobe的同学们看来，现存的算法比较弱。\n要像上图这样，把美队的盾牌融合到意大利画家[Onofrio Bramante](https://it.wikipedia.org/wiki/Onofrio_Bramante)的作品里就比较困难，在这个作品中一些微小的差异就会让人感觉很明显。\n全局风格迁移的效果表现类似图3（从左往右第3列图) ，无论是边界线、匹配色彩还是细化质地，都很难让粘贴部分拥有画作的原始风格。\n\n于是他们搭建局部风格化的神经网络。\n\n他们主要以Gatys团队发表的风格迁移[Image Style Transfer](https://www.cv-foundation.org/openaccess/content_cvpr_2016/papers/Gatys_Image_Style_Transfer_CVPR_2016_paper.pdf)技术为基础，用VGG搭建了一个two-pass算法，还额外引入了一些风格重建损失 (Reconstruction Losses) 来优化结果。\n\n以下为各个算法效果对比:\n![](https://img.alicdn.com/tfs/TB1vmY5ueuSBuNjy1XcXXcYjFXa-2342-1768.jpg)\n\n作者还有能实现像素级别的风格迁移的成果[“Deep Photo Style Transfer”](https://arxiv.org/pdf/1703.07511.pdf)\n\n\n### 最终成果\n\n<escape>\n  <p align='center'>\n    <img src='/images/DeepPainterlyHarmonization/data/0_target.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/data/0_naive.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/results/0_final_res2.png' style=\"width:32% !important\"/>\n  </p>\n  <p align='center'>\n    <img src='/images/DeepPainterlyHarmonization/data/1_target.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/data/1_naive.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/results/1_final_res2.png' style=\"width:32% !important\"/>\n  </p>\n  <p align='center'>\n    <img src='/images/DeepPainterlyHarmonization/data/2_target.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/data/2_naive.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/results/2_final_res2.png' style=\"width:32% !important\"/>\n  </p>\n  <p align='center'>\n    <img src='/images/DeepPainterlyHarmonization/data/3_target.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/data/3_naive.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/results/3_final_res2.png' style=\"width:32% !important\"/>\n  </p>\n  <p align='center'>\n    <img src='/images/DeepPainterlyHarmonization/data/5_target.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/data/5_naive.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/results/5_final_res2.png' style=\"width:32% !important\"/>\n  </p>\n  <p align='center'>\n    <img src='/images/DeepPainterlyHarmonization/data/6_target.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/data/6_naive.jpg' style=\"width:32% !important\"/>\n    <img src='/images/DeepPainterlyHarmonization/results/6_final_res2.png' style=\"width:32% !important\"/>\n  </p>\n</escape>\n\n### 参考资料\n- Github: [deep-painterly-harmonization][1]\n- 论文地址: [https://arxiv.org/abs/1804.03189][2]\n- [Image Style Transfer][3]\n- [画家 Onofrio Bramante][4]\n- [Deep Photo Style Transfer][5]\n\n[1]: https://github.com/luanfujun/deep-painterly-harmonization\n[2]: https://arxiv.org/abs/1804.03189\n[3]: https://www.cv-foundation.org/openaccess/content_cvpr_2016/papers/Gatys_Image_Style_Transfer_CVPR_2016_paper.pdf\n[4]: https://it.wikipedia.org/wiki/Onofrio_Bramante\n[5]: https://arxiv.org/pdf/1703.07511.pdf","slug":"deep-painterly-harmonization","published":1,"updated":"2018-05-30T03:19:28.347Z","_id":"cjhsi9vk90006l0mmg5n663pf","comments":1,"photos":[],"link":"","content":"<p>P图应该是每个会ps的同学都玩过，要做到以假乱真还是需要强大的ps功底，现在通过深度学习可以做到以假乱真，傻傻分不清楚。如下图:</p>\n<p align=\"center\"><img src=\"/images/DeepPainterlyHarmonization/data/11_target.jpg\" style=\"width:32% !important\"><img src=\"/images/DeepPainterlyHarmonization/data/11_naive.jpg\" style=\"width:32% !important\"><img src=\"/images/DeepPainterlyHarmonization/results/11_final_res2.png\" style=\"width:32% !important\"></p>\n\n\n\n\n<h3 id=\"看看新算法的不同\"><a href=\"#看看新算法的不同\" class=\"headerlink\" title=\"看看新算法的不同\"></a>看看新算法的不同</h3><p><img src=\"https://img.alicdn.com/tfs/TB1h22fuXOWBuNjy0FiXXXFxVXa-2870-1210.jpg\" alt=\"\"></p>\n<p>风格化迁移算法目前有很多，但是在Cornell大学和Adobe的同学们看来，现存的算法比较弱。<br>要像上图这样，把美队的盾牌融合到意大利画家<a href=\"https://it.wikipedia.org/wiki/Onofrio_Bramante\" target=\"_blank\" rel=\"noopener\">Onofrio Bramante</a>的作品里就比较困难，在这个作品中一些微小的差异就会让人感觉很明显。<br>全局风格迁移的效果表现类似图3（从左往右第3列图) ，无论是边界线、匹配色彩还是细化质地，都很难让粘贴部分拥有画作的原始风格。</p>\n<p>于是他们搭建局部风格化的神经网络。</p>\n<p>他们主要以Gatys团队发表的风格迁移<a href=\"https://www.cv-foundation.org/openaccess/content_cvpr_2016/papers/Gatys_Image_Style_Transfer_CVPR_2016_paper.pdf\" target=\"_blank\" rel=\"noopener\">Image Style Transfer</a>技术为基础，用VGG搭建了一个two-pass算法，还额外引入了一些风格重建损失 (Reconstruction Losses) 来优化结果。</p>\n<p>以下为各个算法效果对比:<br><img src=\"https://img.alicdn.com/tfs/TB1vmY5ueuSBuNjy1XcXXcYjFXa-2342-1768.jpg\" alt=\"\"></p>\n<p>作者还有能实现像素级别的风格迁移的成果<a href=\"https://arxiv.org/pdf/1703.07511.pdf\" target=\"_blank\" rel=\"noopener\">“Deep Photo Style Transfer”</a></p>\n<h3 id=\"最终成果\"><a href=\"#最终成果\" class=\"headerlink\" title=\"最终成果\"></a>最终成果</h3>\n  <p align=\"center\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/0_target.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/0_naive.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/results/0_final_res2.png\" style=\"width:32% !important\">\n  </p>\n  <p align=\"center\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/1_target.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/1_naive.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/results/1_final_res2.png\" style=\"width:32% !important\">\n  </p>\n  <p align=\"center\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/2_target.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/2_naive.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/results/2_final_res2.png\" style=\"width:32% !important\">\n  </p>\n  <p align=\"center\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/3_target.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/3_naive.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/results/3_final_res2.png\" style=\"width:32% !important\">\n  </p>\n  <p align=\"center\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/5_target.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/5_naive.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/results/5_final_res2.png\" style=\"width:32% !important\">\n  </p>\n  <p align=\"center\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/6_target.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/6_naive.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/results/6_final_res2.png\" style=\"width:32% !important\">\n  </p>\n\n<h3 id=\"参考资料\"><a href=\"#参考资料\" class=\"headerlink\" title=\"参考资料\"></a>参考资料</h3><ul>\n<li>Github: <a href=\"https://github.com/luanfujun/deep-painterly-harmonization\" target=\"_blank\" rel=\"noopener\">deep-painterly-harmonization</a></li>\n<li>论文地址: <a href=\"https://arxiv.org/abs/1804.03189\" target=\"_blank\" rel=\"noopener\">https://arxiv.org/abs/1804.03189</a></li>\n<li><a href=\"https://www.cv-foundation.org/openaccess/content_cvpr_2016/papers/Gatys_Image_Style_Transfer_CVPR_2016_paper.pdf\" target=\"_blank\" rel=\"noopener\">Image Style Transfer</a></li>\n<li><a href=\"https://it.wikipedia.org/wiki/Onofrio_Bramante\" target=\"_blank\" rel=\"noopener\">画家 Onofrio Bramante</a></li>\n<li><a href=\"https://arxiv.org/pdf/1703.07511.pdf\" target=\"_blank\" rel=\"noopener\">Deep Photo Style Transfer</a></li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<p>P图应该是每个会ps的同学都玩过，要做到以假乱真还是需要强大的ps功底，现在通过深度学习可以做到以假乱真，傻傻分不清楚。如下图:</p>\n<p align=\"center\"><img src=\"/images/DeepPainterlyHarmonization/data/11_target.jpg\" style=\"width:32% !important\"><img src=\"/images/DeepPainterlyHarmonization/data/11_naive.jpg\" style=\"width:32% !important\"><img src=\"/images/DeepPainterlyHarmonization/results/11_final_res2.png\" style=\"width:32% !important\"></p>\n\n\n\n\n<h3 id=\"看看新算法的不同\"><a href=\"#看看新算法的不同\" class=\"headerlink\" title=\"看看新算法的不同\"></a>看看新算法的不同</h3><p><img src=\"https://img.alicdn.com/tfs/TB1h22fuXOWBuNjy0FiXXXFxVXa-2870-1210.jpg\" alt=\"\"></p>\n<p>风格化迁移算法目前有很多，但是在Cornell大学和Adobe的同学们看来，现存的算法比较弱。<br>要像上图这样，把美队的盾牌融合到意大利画家<a href=\"https://it.wikipedia.org/wiki/Onofrio_Bramante\" target=\"_blank\" rel=\"noopener\">Onofrio Bramante</a>的作品里就比较困难，在这个作品中一些微小的差异就会让人感觉很明显。<br>全局风格迁移的效果表现类似图3（从左往右第3列图) ，无论是边界线、匹配色彩还是细化质地，都很难让粘贴部分拥有画作的原始风格。</p>\n<p>于是他们搭建局部风格化的神经网络。</p>\n<p>他们主要以Gatys团队发表的风格迁移<a href=\"https://www.cv-foundation.org/openaccess/content_cvpr_2016/papers/Gatys_Image_Style_Transfer_CVPR_2016_paper.pdf\" target=\"_blank\" rel=\"noopener\">Image Style Transfer</a>技术为基础，用VGG搭建了一个two-pass算法，还额外引入了一些风格重建损失 (Reconstruction Losses) 来优化结果。</p>\n<p>以下为各个算法效果对比:<br><img src=\"https://img.alicdn.com/tfs/TB1vmY5ueuSBuNjy1XcXXcYjFXa-2342-1768.jpg\" alt=\"\"></p>\n<p>作者还有能实现像素级别的风格迁移的成果<a href=\"https://arxiv.org/pdf/1703.07511.pdf\" target=\"_blank\" rel=\"noopener\">“Deep Photo Style Transfer”</a></p>\n<h3 id=\"最终成果\"><a href=\"#最终成果\" class=\"headerlink\" title=\"最终成果\"></a>最终成果</h3>\n  <p align=\"center\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/0_target.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/0_naive.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/results/0_final_res2.png\" style=\"width:32% !important\">\n  </p>\n  <p align=\"center\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/1_target.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/1_naive.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/results/1_final_res2.png\" style=\"width:32% !important\">\n  </p>\n  <p align=\"center\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/2_target.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/2_naive.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/results/2_final_res2.png\" style=\"width:32% !important\">\n  </p>\n  <p align=\"center\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/3_target.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/3_naive.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/results/3_final_res2.png\" style=\"width:32% !important\">\n  </p>\n  <p align=\"center\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/5_target.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/5_naive.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/results/5_final_res2.png\" style=\"width:32% !important\">\n  </p>\n  <p align=\"center\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/6_target.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/data/6_naive.jpg\" style=\"width:32% !important\">\n    <img src=\"/images/DeepPainterlyHarmonization/results/6_final_res2.png\" style=\"width:32% !important\">\n  </p>\n\n<h3 id=\"参考资料\"><a href=\"#参考资料\" class=\"headerlink\" title=\"参考资料\"></a>参考资料</h3><ul>\n<li>Github: <a href=\"https://github.com/luanfujun/deep-painterly-harmonization\" target=\"_blank\" rel=\"noopener\">deep-painterly-harmonization</a></li>\n<li>论文地址: <a href=\"https://arxiv.org/abs/1804.03189\" target=\"_blank\" rel=\"noopener\">https://arxiv.org/abs/1804.03189</a></li>\n<li><a href=\"https://www.cv-foundation.org/openaccess/content_cvpr_2016/papers/Gatys_Image_Style_Transfer_CVPR_2016_paper.pdf\" target=\"_blank\" rel=\"noopener\">Image Style Transfer</a></li>\n<li><a href=\"https://it.wikipedia.org/wiki/Onofrio_Bramante\" target=\"_blank\" rel=\"noopener\">画家 Onofrio Bramante</a></li>\n<li><a href=\"https://arxiv.org/pdf/1703.07511.pdf\" target=\"_blank\" rel=\"noopener\">Deep Photo Style Transfer</a></li>\n</ul>\n"},{"layout":"post","title":"Charles 基础篇","description":"Charles是目前最强大的http调试工具之一，本片讲述Charles的基础篇，介绍软件的基本界面，设置和使用方法。","cover_image":"images/TB1kJ5uFVXXXXXAXpXXrJ1vVXXX-1304-621.png","date":"2014-07-18T05:15:00.000Z","_content":"\n\nCharles是目前最强大的http调试工具之一，在界面和功能上远强于Fiddler，同时是全平台支持，堪称神器，唯一的缺陷是这软件是收费的，而且是要$50美金…\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB1kJ5uFVXXXXXAXpXXrJ1vVXXX-1304-621.png\" alt=\"Charles 启动画面\">\n</div>\n启动后，神器启动画面。\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1HYmwFVXXXXcLXXXXZBIoIVXX-2246-1300.png\" alt=\"Charles 主界面\">\n</div>\n神器主界面。\nCharles有个会话（session，不是指http中的session）的概念，可以理解为浏览器中的tab，这个功能在需要调试多个站点页面时很实用，当你刷新页面的时候，只会在当前session中捕获请求。\n（PS：MacOS 下command+N创建个新的session，command+W关闭当前session）\nCharles的代理服务器启动就可以使用（会提示给firefox安装插件），如果没有捕获到请求，请清理下浏览器缓存。\n\n##界面功能初探\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms04.alicdn.com/tps/i4/TB1E4CyFVXXXXXMXXXXOh7JIVXX-2246-1444.png\" alt=\"Charles 界面功能概览\"/>\n</div>\n工具条包含了Charles的大部分功能：\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1o9ayFVXXXXb0XXXXl47zIVXX-2246-1360.png\" alt=\"Charles 界面功能概览\"/>\n</div>\n\n有几个功能比较抽象，后面会详细说明。\n右键请求出现菜单，Charles的右键菜单功能比fiddler强大太多了。\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB1iD1rFVXXXXasXFXXiAt_5pXX-642-1234.png\" alt=\"Charles 快捷菜单\"/>\n</div>\n双击请求进入列表视图，类似fiddler，方便查看和过滤请求。\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1XIKfFVXXXXcGaXXXn577ZVXX-2188-1428.png\" alt=\"Charles 搜索&详情\"/>\n</div>\nCharles的过滤查找功能非常赞，很快速：请求详情跟fiddler相似，但直观不少：工具视图基本讲解完毕，接下来我们用Charles做点事情。\n\n\n##代理配置\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms04.alicdn.com/tps/i4/TB1sJimFVXXXXbIXVXX0IBa0pXX-1444-1054.png\" alt=\"Charles 代理设置\"/>\n</div>\n\n\n##本地代理和远程代理\n\nCharles的代理服务器端口跟fiddler一样都是8888，即你的本机ip:8888。\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1hZysFVXXXXXFXFXXDLxq5XXX-2254-1432.png\" alt=\"Charles 搜索&详情\"/>\n</div>\n\n\n我们可以目标将一个文件代理成本地的文件。点击“Map Local”后：\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1hZysFVXXXXXFXFXXDLxq5XXX-2254-1432.png\" alt=\"Charles Map Local\"/>\n</div>\n\n刷新页面试试。代理成功，so easy！\n\nCharles的树状视图比fiddler的列表视图好的地方在于，多次刷新后的请求会被归纳到树里面，更加一目了然，用fiddler的时候，有点强迫症的同学，都要点击clear，有木有…\nCharles是支持子目录代理哦，非常实用的功能：（使用通配符*）\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1BqiwFVXXXXbmXpXXA3IeJFXX-1246-872.png\" alt=\"Charles 目录代理\"/>\n</div>\n\n本地地址选择个子目录，不需要通配符。\n如何判断是否代理成功呢？\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1aNqsFVXXXXXZXFXXXss1_VXX-2130-1342.png\" alt=\"Charles notes\"/>\n</div>\n\n\n这点Charles比fiddler人性化多了。\n校验是否代理成功，最省力的方式是点击工具条上的刷新按钮，刷新单个请求，如果代理成功，Charles会往“Notes”界面打个log。\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1LKOsFVXXXXcpXpXXkrcY_VXX-2130-1324.png\" alt=\"Charles notes\"/>\n</div>\n去除代理配置\n\n小技巧：所有的配置开关都可以通过工具条上的“工具”设置（倒数第二个按钮）。\n\n小技巧：建议开启No Caching，不缓存请求。\n\n\n##mobile代理功能\n\n手机或平板页面的调试，我们需要把请求代理到pc端的Charles上。\n必须确保mobile端和pc端连的是相同的无线网络。\nios的配置非常简单\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms04.alicdn.com/tps/i4/TB1Z8WqFVXXXXXiXFXXr6RC8VXX-1280-1136.png\" alt=\"Charles ios网络\"/>\n</div>\n\n服务器ip设置成pc的ip，端口好设置成8888即可。\n然后mobile终端可以刷新试试。\n\nCharles支持https和sockets的代理，还支持SSL，非常全面。\n","source":"_posts/Charles-Base.md","raw":"---\nlayout: post\ntitle:  \"Charles 基础篇\"\ndescription: Charles是目前最强大的http调试工具之一，本片讲述Charles的基础篇，介绍软件的基本界面，设置和使用方法。\ncover_image: images/TB1kJ5uFVXXXXXAXpXXrJ1vVXXX-1304-621.png\n\ncategories:\n  - Blog\ntag:\n  - Charles\n  - SSL\ndate: 2014-07-18 13:15:00\n---\n\n\nCharles是目前最强大的http调试工具之一，在界面和功能上远强于Fiddler，同时是全平台支持，堪称神器，唯一的缺陷是这软件是收费的，而且是要$50美金…\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB1kJ5uFVXXXXXAXpXXrJ1vVXXX-1304-621.png\" alt=\"Charles 启动画面\">\n</div>\n启动后，神器启动画面。\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1HYmwFVXXXXcLXXXXZBIoIVXX-2246-1300.png\" alt=\"Charles 主界面\">\n</div>\n神器主界面。\nCharles有个会话（session，不是指http中的session）的概念，可以理解为浏览器中的tab，这个功能在需要调试多个站点页面时很实用，当你刷新页面的时候，只会在当前session中捕获请求。\n（PS：MacOS 下command+N创建个新的session，command+W关闭当前session）\nCharles的代理服务器启动就可以使用（会提示给firefox安装插件），如果没有捕获到请求，请清理下浏览器缓存。\n\n##界面功能初探\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms04.alicdn.com/tps/i4/TB1E4CyFVXXXXXMXXXXOh7JIVXX-2246-1444.png\" alt=\"Charles 界面功能概览\"/>\n</div>\n工具条包含了Charles的大部分功能：\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1o9ayFVXXXXb0XXXXl47zIVXX-2246-1360.png\" alt=\"Charles 界面功能概览\"/>\n</div>\n\n有几个功能比较抽象，后面会详细说明。\n右键请求出现菜单，Charles的右键菜单功能比fiddler强大太多了。\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB1iD1rFVXXXXasXFXXiAt_5pXX-642-1234.png\" alt=\"Charles 快捷菜单\"/>\n</div>\n双击请求进入列表视图，类似fiddler，方便查看和过滤请求。\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1XIKfFVXXXXcGaXXXn577ZVXX-2188-1428.png\" alt=\"Charles 搜索&详情\"/>\n</div>\nCharles的过滤查找功能非常赞，很快速：请求详情跟fiddler相似，但直观不少：工具视图基本讲解完毕，接下来我们用Charles做点事情。\n\n\n##代理配置\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms04.alicdn.com/tps/i4/TB1sJimFVXXXXbIXVXX0IBa0pXX-1444-1054.png\" alt=\"Charles 代理设置\"/>\n</div>\n\n\n##本地代理和远程代理\n\nCharles的代理服务器端口跟fiddler一样都是8888，即你的本机ip:8888。\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1hZysFVXXXXXFXFXXDLxq5XXX-2254-1432.png\" alt=\"Charles 搜索&详情\"/>\n</div>\n\n\n我们可以目标将一个文件代理成本地的文件。点击“Map Local”后：\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1hZysFVXXXXXFXFXXDLxq5XXX-2254-1432.png\" alt=\"Charles Map Local\"/>\n</div>\n\n刷新页面试试。代理成功，so easy！\n\nCharles的树状视图比fiddler的列表视图好的地方在于，多次刷新后的请求会被归纳到树里面，更加一目了然，用fiddler的时候，有点强迫症的同学，都要点击clear，有木有…\nCharles是支持子目录代理哦，非常实用的功能：（使用通配符*）\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1BqiwFVXXXXbmXpXXA3IeJFXX-1246-872.png\" alt=\"Charles 目录代理\"/>\n</div>\n\n本地地址选择个子目录，不需要通配符。\n如何判断是否代理成功呢？\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1aNqsFVXXXXXZXFXXXss1_VXX-2130-1342.png\" alt=\"Charles notes\"/>\n</div>\n\n\n这点Charles比fiddler人性化多了。\n校验是否代理成功，最省力的方式是点击工具条上的刷新按钮，刷新单个请求，如果代理成功，Charles会往“Notes”界面打个log。\n\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1LKOsFVXXXXcpXpXXkrcY_VXX-2130-1324.png\" alt=\"Charles notes\"/>\n</div>\n去除代理配置\n\n小技巧：所有的配置开关都可以通过工具条上的“工具”设置（倒数第二个按钮）。\n\n小技巧：建议开启No Caching，不缓存请求。\n\n\n##mobile代理功能\n\n手机或平板页面的调试，我们需要把请求代理到pc端的Charles上。\n必须确保mobile端和pc端连的是相同的无线网络。\nios的配置非常简单\n<div>\n    <img style=\"width: 100%;\" src=\"http://gtms04.alicdn.com/tps/i4/TB1Z8WqFVXXXXXiXFXXr6RC8VXX-1280-1136.png\" alt=\"Charles ios网络\"/>\n</div>\n\n服务器ip设置成pc的ip，端口好设置成8888即可。\n然后mobile终端可以刷新试试。\n\nCharles支持https和sockets的代理，还支持SSL，非常全面。\n","slug":"Charles-Base","published":1,"updated":"2018-05-30T03:11:54.413Z","_id":"cjhsi9vka0007l0mmti48s856","comments":1,"photos":[],"link":"","content":"<p>Charles是目前最强大的http调试工具之一，在界面和功能上远强于Fiddler，同时是全平台支持，堪称神器，唯一的缺陷是这软件是收费的，而且是要$50美金…</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB1kJ5uFVXXXXXAXpXXrJ1vVXXX-1304-621.png\" alt=\"Charles 启动画面\"><br></div><br>启动后，神器启动画面。<br><div><br>    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1HYmwFVXXXXcLXXXXZBIoIVXX-2246-1300.png\" alt=\"Charles 主界面\"><br></div><br>神器主界面。<br>Charles有个会话（session，不是指http中的session）的概念，可以理解为浏览器中的tab，这个功能在需要调试多个站点页面时很实用，当你刷新页面的时候，只会在当前session中捕获请求。<br>（PS：MacOS 下command+N创建个新的session，command+W关闭当前session）<br>Charles的代理服务器启动就可以使用（会提示给firefox安装插件），如果没有捕获到请求，请清理下浏览器缓存。<br><br>##界面功能初探<br><br><div><br>    <img style=\"width: 100%;\" src=\"http://gtms04.alicdn.com/tps/i4/TB1E4CyFVXXXXXMXXXXOh7JIVXX-2246-1444.png\" alt=\"Charles 界面功能概览\"><br></div><br>工具条包含了Charles的大部分功能：<br><div><br>    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1o9ayFVXXXXb0XXXXl47zIVXX-2246-1360.png\" alt=\"Charles 界面功能概览\"><br></div>\n\n<p>有几个功能比较抽象，后面会详细说明。<br>右键请求出现菜单，Charles的右键菜单功能比fiddler强大太多了。</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB1iD1rFVXXXXasXFXXiAt_5pXX-642-1234.png\" alt=\"Charles 快捷菜单\"><br></div><br>双击请求进入列表视图，类似fiddler，方便查看和过滤请求。<br><div><br>    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1XIKfFVXXXXcGaXXXn577ZVXX-2188-1428.png\" alt=\"Charles 搜索&详情\"><br></div><br>Charles的过滤查找功能非常赞，很快速：请求详情跟fiddler相似，但直观不少：工具视图基本讲解完毕，接下来我们用Charles做点事情。<br><br><br>##代理配置<br><br><div><br>    <img style=\"width: 100%;\" src=\"http://gtms04.alicdn.com/tps/i4/TB1sJimFVXXXXbIXVXX0IBa0pXX-1444-1054.png\" alt=\"Charles 代理设置\"><br></div>\n\n\n<p>##本地代理和远程代理</p>\n<p>Charles的代理服务器端口跟fiddler一样都是8888，即你的本机ip:8888。</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1hZysFVXXXXXFXFXXDLxq5XXX-2254-1432.png\" alt=\"Charles 搜索&详情\"><br></div>\n\n\n<p>我们可以目标将一个文件代理成本地的文件。点击“Map Local”后：</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1hZysFVXXXXXFXFXXDLxq5XXX-2254-1432.png\" alt=\"Charles Map Local\"><br></div>\n\n<p>刷新页面试试。代理成功，so easy！</p>\n<p>Charles的树状视图比fiddler的列表视图好的地方在于，多次刷新后的请求会被归纳到树里面，更加一目了然，用fiddler的时候，有点强迫症的同学，都要点击clear，有木有…<br>Charles是支持子目录代理哦，非常实用的功能：（使用通配符*）</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1BqiwFVXXXXbmXpXXA3IeJFXX-1246-872.png\" alt=\"Charles 目录代理\"><br></div>\n\n<p>本地地址选择个子目录，不需要通配符。<br>如何判断是否代理成功呢？</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1aNqsFVXXXXXZXFXXXss1_VXX-2130-1342.png\" alt=\"Charles notes\"><br></div>\n\n\n<p>这点Charles比fiddler人性化多了。<br>校验是否代理成功，最省力的方式是点击工具条上的刷新按钮，刷新单个请求，如果代理成功，Charles会往“Notes”界面打个log。</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1LKOsFVXXXXcpXpXXkrcY_VXX-2130-1324.png\" alt=\"Charles notes\"><br></div><br>去除代理配置<br><br>小技巧：所有的配置开关都可以通过工具条上的“工具”设置（倒数第二个按钮）。<br><br>小技巧：建议开启No Caching，不缓存请求。<br><br><br>##mobile代理功能<br><br>手机或平板页面的调试，我们需要把请求代理到pc端的Charles上。<br>必须确保mobile端和pc端连的是相同的无线网络。<br>ios的配置非常简单<br><div><br>    <img style=\"width: 100%;\" src=\"http://gtms04.alicdn.com/tps/i4/TB1Z8WqFVXXXXXiXFXXr6RC8VXX-1280-1136.png\" alt=\"Charles ios网络\"><br></div>\n\n<p>服务器ip设置成pc的ip，端口好设置成8888即可。<br>然后mobile终端可以刷新试试。</p>\n<p>Charles支持https和sockets的代理，还支持SSL，非常全面。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>Charles是目前最强大的http调试工具之一，在界面和功能上远强于Fiddler，同时是全平台支持，堪称神器，唯一的缺陷是这软件是收费的，而且是要$50美金…</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB1kJ5uFVXXXXXAXpXXrJ1vVXXX-1304-621.png\" alt=\"Charles 启动画面\"><br></div><br>启动后，神器启动画面。<br><div><br>    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1HYmwFVXXXXcLXXXXZBIoIVXX-2246-1300.png\" alt=\"Charles 主界面\"><br></div><br>神器主界面。<br>Charles有个会话（session，不是指http中的session）的概念，可以理解为浏览器中的tab，这个功能在需要调试多个站点页面时很实用，当你刷新页面的时候，只会在当前session中捕获请求。<br>（PS：MacOS 下command+N创建个新的session，command+W关闭当前session）<br>Charles的代理服务器启动就可以使用（会提示给firefox安装插件），如果没有捕获到请求，请清理下浏览器缓存。<br><br>##界面功能初探<br><br><div><br>    <img style=\"width: 100%;\" src=\"http://gtms04.alicdn.com/tps/i4/TB1E4CyFVXXXXXMXXXXOh7JIVXX-2246-1444.png\" alt=\"Charles 界面功能概览\"><br></div><br>工具条包含了Charles的大部分功能：<br><div><br>    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1o9ayFVXXXXb0XXXXl47zIVXX-2246-1360.png\" alt=\"Charles 界面功能概览\"><br></div>\n\n<p>有几个功能比较抽象，后面会详细说明。<br>右键请求出现菜单，Charles的右键菜单功能比fiddler强大太多了。</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms01.alicdn.com/tps/i1/TB1iD1rFVXXXXasXFXXiAt_5pXX-642-1234.png\" alt=\"Charles 快捷菜单\"><br></div><br>双击请求进入列表视图，类似fiddler，方便查看和过滤请求。<br><div><br>    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1XIKfFVXXXXcGaXXXn577ZVXX-2188-1428.png\" alt=\"Charles 搜索&详情\"><br></div><br>Charles的过滤查找功能非常赞，很快速：请求详情跟fiddler相似，但直观不少：工具视图基本讲解完毕，接下来我们用Charles做点事情。<br><br><br>##代理配置<br><br><div><br>    <img style=\"width: 100%;\" src=\"http://gtms04.alicdn.com/tps/i4/TB1sJimFVXXXXbIXVXX0IBa0pXX-1444-1054.png\" alt=\"Charles 代理设置\"><br></div>\n\n\n<p>##本地代理和远程代理</p>\n<p>Charles的代理服务器端口跟fiddler一样都是8888，即你的本机ip:8888。</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1hZysFVXXXXXFXFXXDLxq5XXX-2254-1432.png\" alt=\"Charles 搜索&详情\"><br></div>\n\n\n<p>我们可以目标将一个文件代理成本地的文件。点击“Map Local”后：</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1hZysFVXXXXXFXFXXDLxq5XXX-2254-1432.png\" alt=\"Charles Map Local\"><br></div>\n\n<p>刷新页面试试。代理成功，so easy！</p>\n<p>Charles的树状视图比fiddler的列表视图好的地方在于，多次刷新后的请求会被归纳到树里面，更加一目了然，用fiddler的时候，有点强迫症的同学，都要点击clear，有木有…<br>Charles是支持子目录代理哦，非常实用的功能：（使用通配符*）</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1BqiwFVXXXXbmXpXXA3IeJFXX-1246-872.png\" alt=\"Charles 目录代理\"><br></div>\n\n<p>本地地址选择个子目录，不需要通配符。<br>如何判断是否代理成功呢？</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms03.alicdn.com/tps/i3/TB1aNqsFVXXXXXZXFXXXss1_VXX-2130-1342.png\" alt=\"Charles notes\"><br></div>\n\n\n<p>这点Charles比fiddler人性化多了。<br>校验是否代理成功，最省力的方式是点击工具条上的刷新按钮，刷新单个请求，如果代理成功，Charles会往“Notes”界面打个log。</p>\n<div><br>    <img style=\"width: 100%;\" src=\"http://gtms02.alicdn.com/tps/i2/TB1LKOsFVXXXXcpXpXXkrcY_VXX-2130-1324.png\" alt=\"Charles notes\"><br></div><br>去除代理配置<br><br>小技巧：所有的配置开关都可以通过工具条上的“工具”设置（倒数第二个按钮）。<br><br>小技巧：建议开启No Caching，不缓存请求。<br><br><br>##mobile代理功能<br><br>手机或平板页面的调试，我们需要把请求代理到pc端的Charles上。<br>必须确保mobile端和pc端连的是相同的无线网络。<br>ios的配置非常简单<br><div><br>    <img style=\"width: 100%;\" src=\"http://gtms04.alicdn.com/tps/i4/TB1Z8WqFVXXXXXiXFXXr6RC8VXX-1280-1136.png\" alt=\"Charles ios网络\"><br></div>\n\n<p>服务器ip设置成pc的ip，端口好设置成8888即可。<br>然后mobile终端可以刷新试试。</p>\n<p>Charles支持https和sockets的代理，还支持SSL，非常全面。</p>\n"},{"title":"谷歌公布去水印新方法","cover_image":"images/teaser.jpg","comments":1,"description":"今天，谷歌研究院在博客中介绍了全新的AI去水印算法，借助于图库大数据和精准的图层分析来告别水印困扰。","tag":["Google","AI"],"date":"2017-07-13T12:46:00.000Z","_content":"水印、马赛克这些都是图片上最讨人厌的部分，当然，前者可能是为了保护版权，后者可能是规避隐私。 其实，市面上已经有不少去水印的工具，最广为人知的就是PS中的污点去除、仿制图章、画笔等。但如若水印比较复杂，工序就极为复杂，费时费力。 今天，谷歌研究院在博客中介绍了全新的AI去水印算法，借助于图库大数据和精准的图层分析来告别水印困扰。\n![image27](/images/2017/08/image27.png)\n\n![image15](/images/2017/08/image15.jpg)\n\n![image17](/images/2017/08/image17.gif)\n\n\n<embed src='http://player.youku.com/player.php/sid/XMjk3NzY3MDUwMA==/v.swf' allowFullScreen='true' quality='high' width='100%' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>\n\n![f4](/images/2017/08/f4.png)\n\n在较为简单的场景中，中心水印和全局水印被干掉的几率几乎是100%。不过当背景物多样、色彩复杂时，效果就开始打折了，只能做到淡化稀释。\n谷歌表示，研究的目的不是为了破坏版权，一是工具本身无罪，二是从反面的角度也告诉版权方如何从反制去水印操作。\n\n\n原文: https://research.googleblog.com/2017/08/making-visible-watermarks-more-effective.html","source":"_posts/making-visible-watermarks-more-effective.md","raw":"---\ntitle: 谷歌公布去水印新方法\ncover_image: images/teaser.jpg\ncomments: true\ndescription: 今天，谷歌研究院在博客中介绍了全新的AI去水印算法，借助于图库大数据和精准的图层分析来告别水印困扰。\ncategories:\n  - News\ntag:\n  - Google\n  - AI\ntags:\n  - Google\n  - AI\ndate: 2017-07-13 20:46:00\n---\n水印、马赛克这些都是图片上最讨人厌的部分，当然，前者可能是为了保护版权，后者可能是规避隐私。 其实，市面上已经有不少去水印的工具，最广为人知的就是PS中的污点去除、仿制图章、画笔等。但如若水印比较复杂，工序就极为复杂，费时费力。 今天，谷歌研究院在博客中介绍了全新的AI去水印算法，借助于图库大数据和精准的图层分析来告别水印困扰。\n![image27](/images/2017/08/image27.png)\n\n![image15](/images/2017/08/image15.jpg)\n\n![image17](/images/2017/08/image17.gif)\n\n\n<embed src='http://player.youku.com/player.php/sid/XMjk3NzY3MDUwMA==/v.swf' allowFullScreen='true' quality='high' width='100%' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>\n\n![f4](/images/2017/08/f4.png)\n\n在较为简单的场景中，中心水印和全局水印被干掉的几率几乎是100%。不过当背景物多样、色彩复杂时，效果就开始打折了，只能做到淡化稀释。\n谷歌表示，研究的目的不是为了破坏版权，一是工具本身无罪，二是从反面的角度也告诉版权方如何从反制去水印操作。\n\n\n原文: https://research.googleblog.com/2017/08/making-visible-watermarks-more-effective.html","slug":"making-visible-watermarks-more-effective","published":1,"updated":"2018-05-30T02:02:00.359Z","layout":"post","photos":[],"link":"","_id":"cjhsi9vkb0008l0mm4brxs6uc","content":"<p>水印、马赛克这些都是图片上最讨人厌的部分，当然，前者可能是为了保护版权，后者可能是规避隐私。 其实，市面上已经有不少去水印的工具，最广为人知的就是PS中的污点去除、仿制图章、画笔等。但如若水印比较复杂，工序就极为复杂，费时费力。 今天，谷歌研究院在博客中介绍了全新的AI去水印算法，借助于图库大数据和精准的图层分析来告别水印困扰。<br><img src=\"/images/2017/08/image27.png\" alt=\"image27\"></p>\n<p><img src=\"/images/2017/08/image15.jpg\" alt=\"image15\"></p>\n<p><img src=\"/images/2017/08/image17.gif\" alt=\"image17\"></p>\n<embed src=\"http://player.youku.com/player.php/sid/XMjk3NzY3MDUwMA==/v.swf\" allowfullscreen=\"true\" quality=\"high\" width=\"100%\" height=\"400\" align=\"middle\" allowscriptaccess=\"always\" type=\"application/x-shockwave-flash\">\n\n<p><img src=\"/images/2017/08/f4.png\" alt=\"f4\"></p>\n<p>在较为简单的场景中，中心水印和全局水印被干掉的几率几乎是100%。不过当背景物多样、色彩复杂时，效果就开始打折了，只能做到淡化稀释。<br>谷歌表示，研究的目的不是为了破坏版权，一是工具本身无罪，二是从反面的角度也告诉版权方如何从反制去水印操作。</p>\n<p>原文: <a href=\"https://research.googleblog.com/2017/08/making-visible-watermarks-more-effective.html\" target=\"_blank\" rel=\"noopener\">https://research.googleblog.com/2017/08/making-visible-watermarks-more-effective.html</a></p>\n","site":{"data":{}},"excerpt":"","more":"<p>水印、马赛克这些都是图片上最讨人厌的部分，当然，前者可能是为了保护版权，后者可能是规避隐私。 其实，市面上已经有不少去水印的工具，最广为人知的就是PS中的污点去除、仿制图章、画笔等。但如若水印比较复杂，工序就极为复杂，费时费力。 今天，谷歌研究院在博客中介绍了全新的AI去水印算法，借助于图库大数据和精准的图层分析来告别水印困扰。<br><img src=\"/images/2017/08/image27.png\" alt=\"image27\"></p>\n<p><img src=\"/images/2017/08/image15.jpg\" alt=\"image15\"></p>\n<p><img src=\"/images/2017/08/image17.gif\" alt=\"image17\"></p>\n<embed src=\"http://player.youku.com/player.php/sid/XMjk3NzY3MDUwMA==/v.swf\" allowfullscreen=\"true\" quality=\"high\" width=\"100%\" height=\"400\" align=\"middle\" allowscriptaccess=\"always\" type=\"application/x-shockwave-flash\">\n\n<p><img src=\"/images/2017/08/f4.png\" alt=\"f4\"></p>\n<p>在较为简单的场景中，中心水印和全局水印被干掉的几率几乎是100%。不过当背景物多样、色彩复杂时，效果就开始打折了，只能做到淡化稀释。<br>谷歌表示，研究的目的不是为了破坏版权，一是工具本身无罪，二是从反面的角度也告诉版权方如何从反制去水印操作。</p>\n<p>原文: <a href=\"https://research.googleblog.com/2017/08/making-visible-watermarks-more-effective.html\" target=\"_blank\" rel=\"noopener\">https://research.googleblog.com/2017/08/making-visible-watermarks-more-effective.html</a></p>\n"},{"title":"苹果获得了Apple Music的“电台创作”专利","cover_image":"images/family_hero_large_2x.jpg","comments":1,"description":"苹果近日已经通过了一份名为“电台创作（station creation）”的专利申请，根据描述该专利涉及到 Apple Music 和 iTunes 中“创建自己的音乐电台”选项。","date":"2017-08-18T02:13:00.000Z","_content":"\n根据国外媒体消息，苹果近日已经通过了一份名为“电台创作（station creation）”的专利申请，根据描述该专利涉及到 Apple Music 和 iTunes 中“创建自己的音乐电台”选项。\n\n\n   在这份专利描述，苹果公司指出，越来越多的人正在使用电子设备购买和使用数字内容，包括电子书籍、音乐、电影和应用程序，以及目前越来越受欢迎的一种新的数字消费内容“互联网广播（Internet radio）”。\n\n\n　　互联网广播通常是指通过互联网连接向其他设备提供流式媒体内容，而这些设备包括PC、笔记本电脑、智能电话、平板电脑等。与以往的互联网广播应用和服务单纯提供广播电台信息不同，苹果公司所指出的互联网广播针对的是大众消费者，而非个体观众。打个比方说，一些互联网广播系统可以允许用户基于一个或多个内容种子来创建互联网无线电台，就好比传统广播电台一样，而这个互联网无线电台就只表示一个媒体频道，通过这个媒体频道提供歌曲或者一些特定内容；但对于苹果的互联网广播来说，它允许用户基于一个或者多个内容种子来选择歌曲或则其他流媒体内容。\n\n![B2946E62-4D94-42FF-AA81-F2262A213946](/images/B2946E62-4D94-42FF-AA81-F2262A213946.jpg)\n\n　　通常的内容种子一般是用户基于个人品味和兴趣选择的歌曲、专辑和艺术家，苹果的互联网广播服务可以基于用户提供的内容种子创造一个或者多个歌曲，所选择的歌曲可通过流网络提供给用户。苹果“电台创作”专利涉及到通过“添加新的媒体流”选项创建站点的方法，即可以通过具有与远程存储媒体流相关联的图形界面，以及用于“添加新的媒体流”的启动对象。在“接收与启动对象”的选择相应的输入以显示新的流选项。\n\n\n　　考虑到这是一项专利，是否会运用在实际产品中目前尚未得知。\n","source":"_posts/苹果获得了Apple Music的电台创作专利.md","raw":"---\ntitle: 苹果获得了Apple Music的“电台创作”专利\ncover_image: images/family_hero_large_2x.jpg\ncomments: true\ndescription: 苹果近日已经通过了一份名为“电台创作（station creation）”的专利申请，根据描述该专利涉及到 Apple Music 和 iTunes 中“创建自己的音乐电台”选项。\ncategories:\n  - News\ntag:\n  - Apple\n  - 专利\ndate: 2017/08/18 10:13:00\n---\n\n根据国外媒体消息，苹果近日已经通过了一份名为“电台创作（station creation）”的专利申请，根据描述该专利涉及到 Apple Music 和 iTunes 中“创建自己的音乐电台”选项。\n\n\n   在这份专利描述，苹果公司指出，越来越多的人正在使用电子设备购买和使用数字内容，包括电子书籍、音乐、电影和应用程序，以及目前越来越受欢迎的一种新的数字消费内容“互联网广播（Internet radio）”。\n\n\n　　互联网广播通常是指通过互联网连接向其他设备提供流式媒体内容，而这些设备包括PC、笔记本电脑、智能电话、平板电脑等。与以往的互联网广播应用和服务单纯提供广播电台信息不同，苹果公司所指出的互联网广播针对的是大众消费者，而非个体观众。打个比方说，一些互联网广播系统可以允许用户基于一个或多个内容种子来创建互联网无线电台，就好比传统广播电台一样，而这个互联网无线电台就只表示一个媒体频道，通过这个媒体频道提供歌曲或者一些特定内容；但对于苹果的互联网广播来说，它允许用户基于一个或者多个内容种子来选择歌曲或则其他流媒体内容。\n\n![B2946E62-4D94-42FF-AA81-F2262A213946](/images/B2946E62-4D94-42FF-AA81-F2262A213946.jpg)\n\n　　通常的内容种子一般是用户基于个人品味和兴趣选择的歌曲、专辑和艺术家，苹果的互联网广播服务可以基于用户提供的内容种子创造一个或者多个歌曲，所选择的歌曲可通过流网络提供给用户。苹果“电台创作”专利涉及到通过“添加新的媒体流”选项创建站点的方法，即可以通过具有与远程存储媒体流相关联的图形界面，以及用于“添加新的媒体流”的启动对象。在“接收与启动对象”的选择相应的输入以显示新的流选项。\n\n\n　　考虑到这是一项专利，是否会运用在实际产品中目前尚未得知。\n","slug":"苹果获得了Apple Music的电台创作专利","published":1,"updated":"2018-05-30T02:02:00.359Z","layout":"post","photos":[],"link":"","_id":"cjhsi9vkf000cl0mmbr62b2sj","content":"<p>根据国外媒体消息，苹果近日已经通过了一份名为“电台创作（station creation）”的专利申请，根据描述该专利涉及到 Apple Music 和 iTunes 中“创建自己的音乐电台”选项。</p>\n<p>   在这份专利描述，苹果公司指出，越来越多的人正在使用电子设备购买和使用数字内容，包括电子书籍、音乐、电影和应用程序，以及目前越来越受欢迎的一种新的数字消费内容“互联网广播（Internet radio）”。</p>\n<p>　　互联网广播通常是指通过互联网连接向其他设备提供流式媒体内容，而这些设备包括PC、笔记本电脑、智能电话、平板电脑等。与以往的互联网广播应用和服务单纯提供广播电台信息不同，苹果公司所指出的互联网广播针对的是大众消费者，而非个体观众。打个比方说，一些互联网广播系统可以允许用户基于一个或多个内容种子来创建互联网无线电台，就好比传统广播电台一样，而这个互联网无线电台就只表示一个媒体频道，通过这个媒体频道提供歌曲或者一些特定内容；但对于苹果的互联网广播来说，它允许用户基于一个或者多个内容种子来选择歌曲或则其他流媒体内容。</p>\n<p><img src=\"/images/B2946E62-4D94-42FF-AA81-F2262A213946.jpg\" alt=\"B2946E62-4D94-42FF-AA81-F2262A213946\"></p>\n<p>　　通常的内容种子一般是用户基于个人品味和兴趣选择的歌曲、专辑和艺术家，苹果的互联网广播服务可以基于用户提供的内容种子创造一个或者多个歌曲，所选择的歌曲可通过流网络提供给用户。苹果“电台创作”专利涉及到通过“添加新的媒体流”选项创建站点的方法，即可以通过具有与远程存储媒体流相关联的图形界面，以及用于“添加新的媒体流”的启动对象。在“接收与启动对象”的选择相应的输入以显示新的流选项。</p>\n<p>　　考虑到这是一项专利，是否会运用在实际产品中目前尚未得知。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>根据国外媒体消息，苹果近日已经通过了一份名为“电台创作（station creation）”的专利申请，根据描述该专利涉及到 Apple Music 和 iTunes 中“创建自己的音乐电台”选项。</p>\n<p>   在这份专利描述，苹果公司指出，越来越多的人正在使用电子设备购买和使用数字内容，包括电子书籍、音乐、电影和应用程序，以及目前越来越受欢迎的一种新的数字消费内容“互联网广播（Internet radio）”。</p>\n<p>　　互联网广播通常是指通过互联网连接向其他设备提供流式媒体内容，而这些设备包括PC、笔记本电脑、智能电话、平板电脑等。与以往的互联网广播应用和服务单纯提供广播电台信息不同，苹果公司所指出的互联网广播针对的是大众消费者，而非个体观众。打个比方说，一些互联网广播系统可以允许用户基于一个或多个内容种子来创建互联网无线电台，就好比传统广播电台一样，而这个互联网无线电台就只表示一个媒体频道，通过这个媒体频道提供歌曲或者一些特定内容；但对于苹果的互联网广播来说，它允许用户基于一个或者多个内容种子来选择歌曲或则其他流媒体内容。</p>\n<p><img src=\"/images/B2946E62-4D94-42FF-AA81-F2262A213946.jpg\" alt=\"B2946E62-4D94-42FF-AA81-F2262A213946\"></p>\n<p>　　通常的内容种子一般是用户基于个人品味和兴趣选择的歌曲、专辑和艺术家，苹果的互联网广播服务可以基于用户提供的内容种子创造一个或者多个歌曲，所选择的歌曲可通过流网络提供给用户。苹果“电台创作”专利涉及到通过“添加新的媒体流”选项创建站点的方法，即可以通过具有与远程存储媒体流相关联的图形界面，以及用于“添加新的媒体流”的启动对象。在“接收与启动对象”的选择相应的输入以显示新的流选项。</p>\n<p>　　考虑到这是一项专利，是否会运用在实际产品中目前尚未得知。</p>\n"},{"title":"平板模式下磁性铰链可覆盖键盘区域","cover_image":"images/homepage-hero.jpg","comments":1,"description":"经美国商标和专利局本周公开的信息，Google最新获批称之为“uncomfortable ‘squishy’ feeling”的专利中向我们展示新形态的笔记本。在笔记本进入“平板”模式之后用户通过强大的磁性铰链覆盖笔记本上的键盘区域。","date":"2017-08-18T02:13:00.000Z","_content":"\n经美国商标和专利局本周公开的信息，Google最新获批称之为“uncomfortable ‘squishy’ feeling”的专利中向我们展示新形态的笔记本。在笔记本进入“平板”模式之后用户通过强大的磁性铰链覆盖笔记本上的键盘区域。\n\n\n\n![47011C25-E4B8-4BEB-894A-9DC7A3E05CDE](/images/47011C25-E4B8-4BEB-894A-9DC7A3E05CDE.jpg)\n\n![EC3C0191-12B0-4BDA-ABFC-2EFBD7AF8EBE](/images/EC3C0191-12B0-4BDA-ABFC-2EFBD7AF8EBE.jpg)\n\n\n在专利描述中写道：“笔记本电脑可能包含一个遮盖、基座、铰链、和至少一根导线。基座可以通过铰链方式连接遮盖。”在专利描述中展示了几个不同的笔记本键盘覆盖方式，其中比较新奇的就是“Open Portion”提供了触控板版本和非触控板版本。触控板版本提供了无线接收器和指纹传感器，专利中所提及的无线接收器可能是通过NFC方式实现的。\n","source":"_posts/平板模式下磁性铰链可覆盖键盘区域.md","raw":"---\ntitle: 平板模式下磁性铰链可覆盖键盘区域\ncover_image: images/homepage-hero.jpg\ncomments: true\ndescription: 经美国商标和专利局本周公开的信息，Google最新获批称之为“uncomfortable ‘squishy’ feeling”的专利中向我们展示新形态的笔记本。在笔记本进入“平板”模式之后用户通过强大的磁性铰链覆盖笔记本上的键盘区域。\ncategories:\n  - News\ntag:\n  - Google\n  - 专利\ndate: 2017/08/18 10:13:00\n---\n\n经美国商标和专利局本周公开的信息，Google最新获批称之为“uncomfortable ‘squishy’ feeling”的专利中向我们展示新形态的笔记本。在笔记本进入“平板”模式之后用户通过强大的磁性铰链覆盖笔记本上的键盘区域。\n\n\n\n![47011C25-E4B8-4BEB-894A-9DC7A3E05CDE](/images/47011C25-E4B8-4BEB-894A-9DC7A3E05CDE.jpg)\n\n![EC3C0191-12B0-4BDA-ABFC-2EFBD7AF8EBE](/images/EC3C0191-12B0-4BDA-ABFC-2EFBD7AF8EBE.jpg)\n\n\n在专利描述中写道：“笔记本电脑可能包含一个遮盖、基座、铰链、和至少一根导线。基座可以通过铰链方式连接遮盖。”在专利描述中展示了几个不同的笔记本键盘覆盖方式，其中比较新奇的就是“Open Portion”提供了触控板版本和非触控板版本。触控板版本提供了无线接收器和指纹传感器，专利中所提及的无线接收器可能是通过NFC方式实现的。\n","slug":"平板模式下磁性铰链可覆盖键盘区域","published":1,"updated":"2018-05-30T02:02:00.359Z","layout":"post","photos":[],"link":"","_id":"cjhsi9vki000dl0mmbf9qnezz","content":"<p>经美国商标和专利局本周公开的信息，Google最新获批称之为“uncomfortable ‘squishy’ feeling”的专利中向我们展示新形态的笔记本。在笔记本进入“平板”模式之后用户通过强大的磁性铰链覆盖笔记本上的键盘区域。</p>\n<p><img src=\"/images/47011C25-E4B8-4BEB-894A-9DC7A3E05CDE.jpg\" alt=\"47011C25-E4B8-4BEB-894A-9DC7A3E05CDE\"></p>\n<p><img src=\"/images/EC3C0191-12B0-4BDA-ABFC-2EFBD7AF8EBE.jpg\" alt=\"EC3C0191-12B0-4BDA-ABFC-2EFBD7AF8EBE\"></p>\n<p>在专利描述中写道：“笔记本电脑可能包含一个遮盖、基座、铰链、和至少一根导线。基座可以通过铰链方式连接遮盖。”在专利描述中展示了几个不同的笔记本键盘覆盖方式，其中比较新奇的就是“Open Portion”提供了触控板版本和非触控板版本。触控板版本提供了无线接收器和指纹传感器，专利中所提及的无线接收器可能是通过NFC方式实现的。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>经美国商标和专利局本周公开的信息，Google最新获批称之为“uncomfortable ‘squishy’ feeling”的专利中向我们展示新形态的笔记本。在笔记本进入“平板”模式之后用户通过强大的磁性铰链覆盖笔记本上的键盘区域。</p>\n<p><img src=\"/images/47011C25-E4B8-4BEB-894A-9DC7A3E05CDE.jpg\" alt=\"47011C25-E4B8-4BEB-894A-9DC7A3E05CDE\"></p>\n<p><img src=\"/images/EC3C0191-12B0-4BDA-ABFC-2EFBD7AF8EBE.jpg\" alt=\"EC3C0191-12B0-4BDA-ABFC-2EFBD7AF8EBE\"></p>\n<p>在专利描述中写道：“笔记本电脑可能包含一个遮盖、基座、铰链、和至少一根导线。基座可以通过铰链方式连接遮盖。”在专利描述中展示了几个不同的笔记本键盘覆盖方式，其中比较新奇的就是“Open Portion”提供了触控板版本和非触控板版本。触控板版本提供了无线接收器和指纹传感器，专利中所提及的无线接收器可能是通过NFC方式实现的。</p>\n"},{"title":"苹果防偷窥新专利：让用户调节屏幕可视角度","cover_image":"images/FDB2320D-6263-4C2B-B87A-C19609D974B5.jpg","comments":1,"description":"根据苹果的最新专利，将通过某种途径将可视角度的控制权交给用户，在使用iPhone、iPad以及Mac屏幕的时候能够调节可视角度，防止屏幕内容被周围人员窃取","date":"2017-08-05T02:13:00.000Z","_content":"\n苹果iPhone多年来始终使用IPS材质面板的原因之一，是具备178°的可视角度，而且在不同角度观看屏幕所导致的偏色问题并不严重. \n​\n不过根据苹果的最新专利，将通过某种途径将可视角度的控制权交给用户，在使用iPhone、iPad以及Mac屏幕的时候能够调节可视角度，防止屏幕内容被周围人员窃取。\n​\n​\n## Displays With Adjustable Angles-of-View\n​\n苹果的这项新技术专利名为“[Displays With Adjustable Angles-of-View](http://appft.uspto.gov/netacgi/nph-Parser?Sect1=PTO2&Sect2=HITOFF&u=/netahtml/PTO/search-adv.html&r=19&p=1&f=G&l=50&d=PG01&S1=(apple.AANM.+AND+20170803.PD.)&OS=aanm/apple+and+pd/8/3/2017&RS=(AANM/apple+AND+PD/20170803))”（带调节可视角度的屏幕），于2016年6月30日提交，在本周四通过美国商标和专利局的审批。\n​\n![FDB2320D-6263-4C2B-B87A-C19609D974B5](/images/FDB2320D-6263-4C2B-B87A-C19609D974B5.jpg)\n​\n这项专利尝试利用“电动过滤器”来让用户选择性的控制屏幕。\n​\n![AC6FE26F-BE56-4B72-8D2C-4B83381F474A](/images/AC6FE26F-BE56-4B72-8D2C-4B83381F474A.jpg)\n​\n这和办公场所在PC上常见的防隐私解决方案有所不同，将其整合到手机和小尺寸屏幕上还需要和屏幕进一步的整合，将其融合到一系列基础层中去。","source":"_posts/让用户调节屏幕可视角度.md","raw":"---\ntitle: 苹果防偷窥新专利：让用户调节屏幕可视角度\ncover_image: images/FDB2320D-6263-4C2B-B87A-C19609D974B5.jpg\ncomments: true\ndescription: 根据苹果的最新专利，将通过某种途径将可视角度的控制权交给用户，在使用iPhone、iPad以及Mac屏幕的时候能够调节可视角度，防止屏幕内容被周围人员窃取\ncategories:\n  - News\ntag:\n  - Apple\n  - 专利\ndate: 2017/08/05 10:13:00\n---\n\n苹果iPhone多年来始终使用IPS材质面板的原因之一，是具备178°的可视角度，而且在不同角度观看屏幕所导致的偏色问题并不严重. \n​\n不过根据苹果的最新专利，将通过某种途径将可视角度的控制权交给用户，在使用iPhone、iPad以及Mac屏幕的时候能够调节可视角度，防止屏幕内容被周围人员窃取。\n​\n​\n## Displays With Adjustable Angles-of-View\n​\n苹果的这项新技术专利名为“[Displays With Adjustable Angles-of-View](http://appft.uspto.gov/netacgi/nph-Parser?Sect1=PTO2&Sect2=HITOFF&u=/netahtml/PTO/search-adv.html&r=19&p=1&f=G&l=50&d=PG01&S1=(apple.AANM.+AND+20170803.PD.)&OS=aanm/apple+and+pd/8/3/2017&RS=(AANM/apple+AND+PD/20170803))”（带调节可视角度的屏幕），于2016年6月30日提交，在本周四通过美国商标和专利局的审批。\n​\n![FDB2320D-6263-4C2B-B87A-C19609D974B5](/images/FDB2320D-6263-4C2B-B87A-C19609D974B5.jpg)\n​\n这项专利尝试利用“电动过滤器”来让用户选择性的控制屏幕。\n​\n![AC6FE26F-BE56-4B72-8D2C-4B83381F474A](/images/AC6FE26F-BE56-4B72-8D2C-4B83381F474A.jpg)\n​\n这和办公场所在PC上常见的防隐私解决方案有所不同，将其整合到手机和小尺寸屏幕上还需要和屏幕进一步的整合，将其融合到一系列基础层中去。","slug":"让用户调节屏幕可视角度","published":1,"updated":"2018-05-30T03:07:24.072Z","_id":"cjhsi9vkk000hl0mml11wu3j7","layout":"post","photos":[],"link":"","content":"<p>苹果iPhone多年来始终使用IPS材质面板的原因之一，是具备178°的可视角度，而且在不同角度观看屏幕所导致的偏色问题并不严重.<br>​<br>不过根据苹果的最新专利，将通过某种途径将可视角度的控制权交给用户，在使用iPhone、iPad以及Mac屏幕的时候能够调节可视角度，防止屏幕内容被周围人员窃取。<br>​<br>​</p>\n<h2 id=\"Displays-With-Adjustable-Angles-of-View\"><a href=\"#Displays-With-Adjustable-Angles-of-View\" class=\"headerlink\" title=\"Displays With Adjustable Angles-of-View\"></a>Displays With Adjustable Angles-of-View</h2><p>​<br>苹果的这项新技术专利名为“<a href=\"http://appft.uspto.gov/netacgi/nph-Parser?Sect1=PTO2&amp;Sect2=HITOFF&amp;u=/netahtml/PTO/search-adv.html&amp;r=19&amp;p=1&amp;f=G&amp;l=50&amp;d=PG01&amp;S1=(apple.AANM.+AND+20170803.PD.\" target=\"_blank\" rel=\"noopener\">Displays With Adjustable Angles-of-View</a>&amp;OS=aanm/apple+and+pd/8/3/2017&amp;RS=(AANM/apple+AND+PD/20170803))”（带调节可视角度的屏幕），于2016年6月30日提交，在本周四通过美国商标和专利局的审批。<br>​<br><img src=\"/images/FDB2320D-6263-4C2B-B87A-C19609D974B5.jpg\" alt=\"FDB2320D-6263-4C2B-B87A-C19609D974B5\"><br>​<br>这项专利尝试利用“电动过滤器”来让用户选择性的控制屏幕。<br>​<br><img src=\"/images/AC6FE26F-BE56-4B72-8D2C-4B83381F474A.jpg\" alt=\"AC6FE26F-BE56-4B72-8D2C-4B83381F474A\"><br>​<br>这和办公场所在PC上常见的防隐私解决方案有所不同，将其整合到手机和小尺寸屏幕上还需要和屏幕进一步的整合，将其融合到一系列基础层中去。</p>\n","site":{"data":{}},"excerpt":"","more":"<p>苹果iPhone多年来始终使用IPS材质面板的原因之一，是具备178°的可视角度，而且在不同角度观看屏幕所导致的偏色问题并不严重.<br>​<br>不过根据苹果的最新专利，将通过某种途径将可视角度的控制权交给用户，在使用iPhone、iPad以及Mac屏幕的时候能够调节可视角度，防止屏幕内容被周围人员窃取。<br>​<br>​</p>\n<h2 id=\"Displays-With-Adjustable-Angles-of-View\"><a href=\"#Displays-With-Adjustable-Angles-of-View\" class=\"headerlink\" title=\"Displays With Adjustable Angles-of-View\"></a>Displays With Adjustable Angles-of-View</h2><p>​<br>苹果的这项新技术专利名为“<a href=\"http://appft.uspto.gov/netacgi/nph-Parser?Sect1=PTO2&amp;Sect2=HITOFF&amp;u=/netahtml/PTO/search-adv.html&amp;r=19&amp;p=1&amp;f=G&amp;l=50&amp;d=PG01&amp;S1=(apple.AANM.+AND+20170803.PD.\" target=\"_blank\" rel=\"noopener\">Displays With Adjustable Angles-of-View</a>&amp;OS=aanm/apple+and+pd/8/3/2017&amp;RS=(AANM/apple+AND+PD/20170803))”（带调节可视角度的屏幕），于2016年6月30日提交，在本周四通过美国商标和专利局的审批。<br>​<br><img src=\"/images/FDB2320D-6263-4C2B-B87A-C19609D974B5.jpg\" alt=\"FDB2320D-6263-4C2B-B87A-C19609D974B5\"><br>​<br>这项专利尝试利用“电动过滤器”来让用户选择性的控制屏幕。<br>​<br><img src=\"/images/AC6FE26F-BE56-4B72-8D2C-4B83381F474A.jpg\" alt=\"AC6FE26F-BE56-4B72-8D2C-4B83381F474A\"><br>​<br>这和办公场所在PC上常见的防隐私解决方案有所不同，将其整合到手机和小尺寸屏幕上还需要和屏幕进一步的整合，将其融合到一系列基础层中去。</p>\n"},{"layout":"post","title":"Designing Fluid Interfaces","description":"探索iOS和Apple其他平台顺滑和动态界面的技术。 了解如何设计手势和动画，直观感觉，自然，使您的应用令人愉快的使用。","cover_image":"images/803_designing_fluid_interfaces.jpg","date":"2018-06-10T12:57:06.000Z","_content":"\nAndroid系统自诞生以来的很多年使用体验上不都如iOS（更不用说相同硬件配置的情况了），其中就一个列表滚动的体验也是最近几年才接近iOS的体验。\n\n这次WWDC2018上，专门有一个议题分享了iOS是怎么做。非常值得观看。\n\n[视频地址](https://developer.apple.com/videos/play/wwdc2018/803/)\n\n[PDF](https://devstreaming-cdn.apple.com/videos/wwdc/2018/803lpnlacvg2jsndx/803/803_designing_fluid_interfaces.pdf?dl=1)\n\n本文简单的概述为何你的iOS的用户界面用起来这么顺滑。 \n\n## 手势操作的预判与反悔\n\n在手势操作中, 并不是像普通的点击操作, 完成一个操作以后再进行一个. \n如果是完成一个手势, 才能进行下一个的话, 就会出现卡的感觉. \n\n在iOS里面的设计是, 对手势操作全都有预判, 并且对下一步操作有提前量.\n同时, 当你在手势操作过程中, 可以反悔. 当你不想启动程序的时候, 可以理解启动另一个手势. \n如下就是实例. \n\n\n##### 返回主界面的时候可以滑动主界面\n\n<video width=\"100%\" controls src=\"/images/designing_fluid_interfaces/Swipe_homescreen_pages_while_going_home.mp4?dl=1\"></video>\n\n\n##### 在程序运行的时候启动多任务切换\n\n<video width=\"100%\" controls src=\"/images/designing_fluid_interfaces/Go to multitasking while app is launching.mp4?dl=1\"></video>\n\n##### 程序运行的时候关闭程序\n\n<video width=\"100%\" controls src=\"/images/designing_fluid_interfaces/Close app while launching app.mp4?dl=1\"></video>\n\n\n\n##### 程序启动中就可以开始操作\n\n<video width=\"100%\" controls src=\"/images/designing_fluid_interfaces/Interact with app as it launches.mp4?dl=1\"></video>\n\n\n## 上下撞墙缓冲\n\n窗口上下区域的撞墙缓冲, 可以让用户更为舒服的认识到已经没有更多内容了. \n但是在很多别的系统上, 没有这个设计, 感觉整个界面是死的. \n\n\n##### 撞墙缓冲.gif \n\n\n\n\n\n\n\n\n\n## 计算位置动量 速度 力量\n\n\n如何激发多任务手势, 不是按照你滑动手指的时间来判断的, 按照你滑动的速度力量, 动量距离来判断什么时候激发多任务窗口. \n\n 5.gif \n\n 6.gif \n\n\n## 动画转化加速度\n动画切换速度是有加速度的, 当你觉得窗口或者物体是加速向你靠近. \n\n 7.gif \n\n\n\n## 如何管理按击区域\n\n触摸按键的区域, 并不是准确的, 是在按钮的一个区域里面, 比如在计算器里, 当你按一个数字的时候, 你的触摸区域会在数字的圆圈里面, 并且还会在外面一点, 这样当你反悔的会后, 将手指移出区域, 按钮操作就会消失, 而当你返回的时候, 按钮数字会重新被选择. \n\n 8.gif \n\n\n\n## 3D Touch 点按重量判断激发操作\n\n 10.gif \n\n\n\n## 3D Touch 与 滚动切换. \n\n当用户激发了3D Touch后, 其实是用户按错了, 要是滚动, 那3D Touch操作就被取消, 重新执行滚动操作. \n\n 11.gif \n","source":"_posts/Designing-Fluid-Interfaces.md","raw":"---\nlayout: post\ntitle:  \"Designing Fluid Interfaces\"\ndescription: 探索iOS和Apple其他平台顺滑和动态界面的技术。 了解如何设计手势和动画，直观感觉，自然，使您的应用令人愉快的使用。\ncover_image: images/803_designing_fluid_interfaces.jpg\ncategories:\n  - Blog\ntag:\n  - Design\n  - Apple\ndate: 2018/06/10 20:57:06\n---\n\nAndroid系统自诞生以来的很多年使用体验上不都如iOS（更不用说相同硬件配置的情况了），其中就一个列表滚动的体验也是最近几年才接近iOS的体验。\n\n这次WWDC2018上，专门有一个议题分享了iOS是怎么做。非常值得观看。\n\n[视频地址](https://developer.apple.com/videos/play/wwdc2018/803/)\n\n[PDF](https://devstreaming-cdn.apple.com/videos/wwdc/2018/803lpnlacvg2jsndx/803/803_designing_fluid_interfaces.pdf?dl=1)\n\n本文简单的概述为何你的iOS的用户界面用起来这么顺滑。 \n\n## 手势操作的预判与反悔\n\n在手势操作中, 并不是像普通的点击操作, 完成一个操作以后再进行一个. \n如果是完成一个手势, 才能进行下一个的话, 就会出现卡的感觉. \n\n在iOS里面的设计是, 对手势操作全都有预判, 并且对下一步操作有提前量.\n同时, 当你在手势操作过程中, 可以反悔. 当你不想启动程序的时候, 可以理解启动另一个手势. \n如下就是实例. \n\n\n##### 返回主界面的时候可以滑动主界面\n\n<video width=\"100%\" controls src=\"/images/designing_fluid_interfaces/Swipe_homescreen_pages_while_going_home.mp4?dl=1\"></video>\n\n\n##### 在程序运行的时候启动多任务切换\n\n<video width=\"100%\" controls src=\"/images/designing_fluid_interfaces/Go to multitasking while app is launching.mp4?dl=1\"></video>\n\n##### 程序运行的时候关闭程序\n\n<video width=\"100%\" controls src=\"/images/designing_fluid_interfaces/Close app while launching app.mp4?dl=1\"></video>\n\n\n\n##### 程序启动中就可以开始操作\n\n<video width=\"100%\" controls src=\"/images/designing_fluid_interfaces/Interact with app as it launches.mp4?dl=1\"></video>\n\n\n## 上下撞墙缓冲\n\n窗口上下区域的撞墙缓冲, 可以让用户更为舒服的认识到已经没有更多内容了. \n但是在很多别的系统上, 没有这个设计, 感觉整个界面是死的. \n\n\n##### 撞墙缓冲.gif \n\n\n\n\n\n\n\n\n\n## 计算位置动量 速度 力量\n\n\n如何激发多任务手势, 不是按照你滑动手指的时间来判断的, 按照你滑动的速度力量, 动量距离来判断什么时候激发多任务窗口. \n\n 5.gif \n\n 6.gif \n\n\n## 动画转化加速度\n动画切换速度是有加速度的, 当你觉得窗口或者物体是加速向你靠近. \n\n 7.gif \n\n\n\n## 如何管理按击区域\n\n触摸按键的区域, 并不是准确的, 是在按钮的一个区域里面, 比如在计算器里, 当你按一个数字的时候, 你的触摸区域会在数字的圆圈里面, 并且还会在外面一点, 这样当你反悔的会后, 将手指移出区域, 按钮操作就会消失, 而当你返回的时候, 按钮数字会重新被选择. \n\n 8.gif \n\n\n\n## 3D Touch 点按重量判断激发操作\n\n 10.gif \n\n\n\n## 3D Touch 与 滚动切换. \n\n当用户激发了3D Touch后, 其实是用户按错了, 要是滚动, 那3D Touch操作就被取消, 重新执行滚动操作. \n\n 11.gif \n","slug":"Designing-Fluid-Interfaces","published":1,"updated":"2018-06-10T16:47:20.546Z","_id":"cji8u1m320000qzmmtu1d1bxl","comments":1,"photos":[],"link":"","content":"<p>Android系统自诞生以来的很多年使用体验上不都如iOS（更不用说相同硬件配置的情况了），其中就一个列表滚动的体验也是最近几年才接近iOS的体验。</p>\n<p>这次WWDC2018上，专门有一个议题分享了iOS是怎么做。非常值得观看。</p>\n<p><a href=\"https://developer.apple.com/videos/play/wwdc2018/803/\" target=\"_blank\" rel=\"noopener\">视频地址</a></p>\n<p><a href=\"https://devstreaming-cdn.apple.com/videos/wwdc/2018/803lpnlacvg2jsndx/803/803_designing_fluid_interfaces.pdf?dl=1\" target=\"_blank\" rel=\"noopener\">PDF</a></p>\n<p>本文简单的概述为何你的iOS的用户界面用起来这么顺滑。 </p>\n<h2 id=\"手势操作的预判与反悔\"><a href=\"#手势操作的预判与反悔\" class=\"headerlink\" title=\"手势操作的预判与反悔\"></a>手势操作的预判与反悔</h2><p>在手势操作中, 并不是像普通的点击操作, 完成一个操作以后再进行一个.<br>如果是完成一个手势, 才能进行下一个的话, 就会出现卡的感觉. </p>\n<p>在iOS里面的设计是, 对手势操作全都有预判, 并且对下一步操作有提前量.<br>同时, 当你在手势操作过程中, 可以反悔. 当你不想启动程序的时候, 可以理解启动另一个手势.<br>如下就是实例. </p>\n<h5 id=\"返回主界面的时候可以滑动主界面\"><a href=\"#返回主界面的时候可以滑动主界面\" class=\"headerlink\" title=\"返回主界面的时候可以滑动主界面\"></a>返回主界面的时候可以滑动主界面</h5><video width=\"100%\" controls src=\"/images/designing_fluid_interfaces/Swipe_homescreen_pages_while_going_home.mp4?dl=1\"></video>\n\n\n<h5 id=\"在程序运行的时候启动多任务切换\"><a href=\"#在程序运行的时候启动多任务切换\" class=\"headerlink\" title=\"在程序运行的时候启动多任务切换\"></a>在程序运行的时候启动多任务切换</h5><video width=\"100%\" controls src=\"/images/designing_fluid_interfaces/Go to multitasking while app is launching.mp4?dl=1\"></video>\n\n<h5 id=\"程序运行的时候关闭程序\"><a href=\"#程序运行的时候关闭程序\" class=\"headerlink\" title=\"程序运行的时候关闭程序\"></a>程序运行的时候关闭程序</h5><video width=\"100%\" controls src=\"/images/designing_fluid_interfaces/Close app while launching app.mp4?dl=1\"></video>\n\n\n\n<h5 id=\"程序启动中就可以开始操作\"><a href=\"#程序启动中就可以开始操作\" class=\"headerlink\" title=\"程序启动中就可以开始操作\"></a>程序启动中就可以开始操作</h5><video width=\"100%\" controls src=\"/images/designing_fluid_interfaces/Interact with app as it launches.mp4?dl=1\"></video>\n\n\n<h2 id=\"上下撞墙缓冲\"><a href=\"#上下撞墙缓冲\" class=\"headerlink\" title=\"上下撞墙缓冲\"></a>上下撞墙缓冲</h2><p>窗口上下区域的撞墙缓冲, 可以让用户更为舒服的认识到已经没有更多内容了.<br>但是在很多别的系统上, 没有这个设计, 感觉整个界面是死的. </p>\n<h5 id=\"撞墙缓冲-gif\"><a href=\"#撞墙缓冲-gif\" class=\"headerlink\" title=\"撞墙缓冲.gif\"></a>撞墙缓冲.gif</h5><h2 id=\"计算位置动量-速度-力量\"><a href=\"#计算位置动量-速度-力量\" class=\"headerlink\" title=\"计算位置动量 速度 力量\"></a>计算位置动量 速度 力量</h2><p>如何激发多任务手势, 不是按照你滑动手指的时间来判断的, 按照你滑动的速度力量, 动量距离来判断什么时候激发多任务窗口. </p>\n<p> 5.gif </p>\n<p> 6.gif </p>\n<h2 id=\"动画转化加速度\"><a href=\"#动画转化加速度\" class=\"headerlink\" title=\"动画转化加速度\"></a>动画转化加速度</h2><p>动画切换速度是有加速度的, 当你觉得窗口或者物体是加速向你靠近. </p>\n<p> 7.gif </p>\n<h2 id=\"如何管理按击区域\"><a href=\"#如何管理按击区域\" class=\"headerlink\" title=\"如何管理按击区域\"></a>如何管理按击区域</h2><p>触摸按键的区域, 并不是准确的, 是在按钮的一个区域里面, 比如在计算器里, 当你按一个数字的时候, 你的触摸区域会在数字的圆圈里面, 并且还会在外面一点, 这样当你反悔的会后, 将手指移出区域, 按钮操作就会消失, 而当你返回的时候, 按钮数字会重新被选择. </p>\n<p> 8.gif </p>\n<h2 id=\"3D-Touch-点按重量判断激发操作\"><a href=\"#3D-Touch-点按重量判断激发操作\" class=\"headerlink\" title=\"3D Touch 点按重量判断激发操作\"></a>3D Touch 点按重量判断激发操作</h2><p> 10.gif </p>\n<h2 id=\"3D-Touch-与-滚动切换\"><a href=\"#3D-Touch-与-滚动切换\" class=\"headerlink\" title=\"3D Touch 与 滚动切换.\"></a>3D Touch 与 滚动切换.</h2><p>当用户激发了3D Touch后, 其实是用户按错了, 要是滚动, 那3D Touch操作就被取消, 重新执行滚动操作. </p>\n<p> 11.gif </p>\n","site":{"data":{}},"excerpt":"","more":"<p>Android系统自诞生以来的很多年使用体验上不都如iOS（更不用说相同硬件配置的情况了），其中就一个列表滚动的体验也是最近几年才接近iOS的体验。</p>\n<p>这次WWDC2018上，专门有一个议题分享了iOS是怎么做。非常值得观看。</p>\n<p><a href=\"https://developer.apple.com/videos/play/wwdc2018/803/\" target=\"_blank\" rel=\"noopener\">视频地址</a></p>\n<p><a href=\"https://devstreaming-cdn.apple.com/videos/wwdc/2018/803lpnlacvg2jsndx/803/803_designing_fluid_interfaces.pdf?dl=1\" target=\"_blank\" rel=\"noopener\">PDF</a></p>\n<p>本文简单的概述为何你的iOS的用户界面用起来这么顺滑。 </p>\n<h2 id=\"手势操作的预判与反悔\"><a href=\"#手势操作的预判与反悔\" class=\"headerlink\" title=\"手势操作的预判与反悔\"></a>手势操作的预判与反悔</h2><p>在手势操作中, 并不是像普通的点击操作, 完成一个操作以后再进行一个.<br>如果是完成一个手势, 才能进行下一个的话, 就会出现卡的感觉. </p>\n<p>在iOS里面的设计是, 对手势操作全都有预判, 并且对下一步操作有提前量.<br>同时, 当你在手势操作过程中, 可以反悔. 当你不想启动程序的时候, 可以理解启动另一个手势.<br>如下就是实例. </p>\n<h5 id=\"返回主界面的时候可以滑动主界面\"><a href=\"#返回主界面的时候可以滑动主界面\" class=\"headerlink\" title=\"返回主界面的时候可以滑动主界面\"></a>返回主界面的时候可以滑动主界面</h5><video width=\"100%\" controls src=\"/images/designing_fluid_interfaces/Swipe_homescreen_pages_while_going_home.mp4?dl=1\"></video>\n\n\n<h5 id=\"在程序运行的时候启动多任务切换\"><a href=\"#在程序运行的时候启动多任务切换\" class=\"headerlink\" title=\"在程序运行的时候启动多任务切换\"></a>在程序运行的时候启动多任务切换</h5><video width=\"100%\" controls src=\"/images/designing_fluid_interfaces/Go to multitasking while app is launching.mp4?dl=1\"></video>\n\n<h5 id=\"程序运行的时候关闭程序\"><a href=\"#程序运行的时候关闭程序\" class=\"headerlink\" title=\"程序运行的时候关闭程序\"></a>程序运行的时候关闭程序</h5><video width=\"100%\" controls src=\"/images/designing_fluid_interfaces/Close app while launching app.mp4?dl=1\"></video>\n\n\n\n<h5 id=\"程序启动中就可以开始操作\"><a href=\"#程序启动中就可以开始操作\" class=\"headerlink\" title=\"程序启动中就可以开始操作\"></a>程序启动中就可以开始操作</h5><video width=\"100%\" controls src=\"/images/designing_fluid_interfaces/Interact with app as it launches.mp4?dl=1\"></video>\n\n\n<h2 id=\"上下撞墙缓冲\"><a href=\"#上下撞墙缓冲\" class=\"headerlink\" title=\"上下撞墙缓冲\"></a>上下撞墙缓冲</h2><p>窗口上下区域的撞墙缓冲, 可以让用户更为舒服的认识到已经没有更多内容了.<br>但是在很多别的系统上, 没有这个设计, 感觉整个界面是死的. </p>\n<h5 id=\"撞墙缓冲-gif\"><a href=\"#撞墙缓冲-gif\" class=\"headerlink\" title=\"撞墙缓冲.gif\"></a>撞墙缓冲.gif</h5><h2 id=\"计算位置动量-速度-力量\"><a href=\"#计算位置动量-速度-力量\" class=\"headerlink\" title=\"计算位置动量 速度 力量\"></a>计算位置动量 速度 力量</h2><p>如何激发多任务手势, 不是按照你滑动手指的时间来判断的, 按照你滑动的速度力量, 动量距离来判断什么时候激发多任务窗口. </p>\n<p> 5.gif </p>\n<p> 6.gif </p>\n<h2 id=\"动画转化加速度\"><a href=\"#动画转化加速度\" class=\"headerlink\" title=\"动画转化加速度\"></a>动画转化加速度</h2><p>动画切换速度是有加速度的, 当你觉得窗口或者物体是加速向你靠近. </p>\n<p> 7.gif </p>\n<h2 id=\"如何管理按击区域\"><a href=\"#如何管理按击区域\" class=\"headerlink\" title=\"如何管理按击区域\"></a>如何管理按击区域</h2><p>触摸按键的区域, 并不是准确的, 是在按钮的一个区域里面, 比如在计算器里, 当你按一个数字的时候, 你的触摸区域会在数字的圆圈里面, 并且还会在外面一点, 这样当你反悔的会后, 将手指移出区域, 按钮操作就会消失, 而当你返回的时候, 按钮数字会重新被选择. </p>\n<p> 8.gif </p>\n<h2 id=\"3D-Touch-点按重量判断激发操作\"><a href=\"#3D-Touch-点按重量判断激发操作\" class=\"headerlink\" title=\"3D Touch 点按重量判断激发操作\"></a>3D Touch 点按重量判断激发操作</h2><p> 10.gif </p>\n<h2 id=\"3D-Touch-与-滚动切换\"><a href=\"#3D-Touch-与-滚动切换\" class=\"headerlink\" title=\"3D Touch 与 滚动切换.\"></a>3D Touch 与 滚动切换.</h2><p>当用户激发了3D Touch后, 其实是用户按错了, 要是滚动, 那3D Touch操作就被取消, 重新执行滚动操作. </p>\n<p> 11.gif </p>\n"}],"PostAsset":[],"PostCategory":[{"post_id":"cjhsi9vka0007l0mmti48s856","category_id":"cjhsi9vk60004l0mmjvmhocji","_id":"cjhsi9vkj000el0mm01hggey1"},{"post_id":"cjhsi9vk00001l0mmaxi2b038","category_id":"cjhsi9vk60004l0mmjvmhocji","_id":"cjhsi9vkm000il0mmjfxajvyd"},{"post_id":"cjhsi9vk40003l0mmr9kgnp6o","category_id":"cjhsi9vk60004l0mmjvmhocji","_id":"cjhsi9vkn000kl0mm46dfsv7s"},{"post_id":"cjhsi9vk90006l0mmg5n663pf","category_id":"cjhsi9vk60004l0mmjvmhocji","_id":"cjhsi9vkn000nl0mm39jjwtpz"},{"post_id":"cjhsi9vkb0008l0mm4brxs6uc","category_id":"cjhsi9vkm000jl0mmtanohz93","_id":"cjhsi9vkp000sl0mmvpjmldxc"},{"post_id":"cjhsi9vkf000cl0mmbr62b2sj","category_id":"cjhsi9vkm000jl0mmtanohz93","_id":"cjhsi9vkq000wl0mmv59kjk89"},{"post_id":"cjhsi9vki000dl0mmbf9qnezz","category_id":"cjhsi9vkm000jl0mmtanohz93","_id":"cjhsi9vkr0010l0mmop424301"},{"post_id":"cjhsi9vkk000hl0mml11wu3j7","category_id":"cjhsi9vkm000jl0mmtanohz93","_id":"cjhsi9vks0013l0mmox797wx5"},{"post_id":"cji8u1m320000qzmmtu1d1bxl","category_id":"cjhsi9vk60004l0mmjvmhocji","_id":"cji8u1m3b0003qzmmv1ssib2k"}],"PostTag":[{"post_id":"cjhsi9vk00001l0mmaxi2b038","tag_id":"cjhsi9vk80005l0mm30fwq62w","_id":"cjhsi9vkf000bl0mmoi72b8pi"},{"post_id":"cjhsi9vk40003l0mmr9kgnp6o","tag_id":"cjhsi9vk80005l0mm30fwq62w","_id":"cjhsi9vkn000ml0mm54j9e60i"},{"post_id":"cjhsi9vk40003l0mmr9kgnp6o","tag_id":"cjhsi9vkj000gl0mmisz0z5au","_id":"cjhsi9vkn000ol0mm6uogp714"},{"post_id":"cjhsi9vk90006l0mmg5n663pf","tag_id":"cjhsi9vkn000ll0mmredvjuo8","_id":"cjhsi9vkp000ul0mm2jfx6dak"},{"post_id":"cjhsi9vk90006l0mmg5n663pf","tag_id":"cjhsi9vko000ql0mmpdsvvi6x","_id":"cjhsi9vkq000xl0mm82b9m5pg"},{"post_id":"cjhsi9vka0007l0mmti48s856","tag_id":"cjhsi9vk80005l0mm30fwq62w","_id":"cjhsi9vkr000zl0mm7tv7p3ry"},{"post_id":"cjhsi9vka0007l0mmti48s856","tag_id":"cjhsi9vkj000gl0mmisz0z5au","_id":"cjhsi9vkr0011l0mmkf9na0cw"},{"post_id":"cjhsi9vkb0008l0mm4brxs6uc","tag_id":"cjhsi9vkq000yl0mmx3mvwgur","_id":"cjhsi9vks0015l0mm51fszf9p"},{"post_id":"cjhsi9vkb0008l0mm4brxs6uc","tag_id":"cjhsi9vkn000ll0mmredvjuo8","_id":"cjhsi9vks0016l0mm3hyd0mei"},{"post_id":"cjhsi9vkf000cl0mmbr62b2sj","tag_id":"cjhsi9vks0014l0mmqtv3t8h2","_id":"cjhsi9vkt0019l0mmkfj4o7hm"},{"post_id":"cjhsi9vkf000cl0mmbr62b2sj","tag_id":"cjhsi9vks0017l0mmvwa8dkqb","_id":"cjhsi9vkt001al0mmr8k2oaz7"},{"post_id":"cjhsi9vki000dl0mmbf9qnezz","tag_id":"cjhsi9vkq000yl0mmx3mvwgur","_id":"cjhsi9vku001dl0mmq6hwfmqy"},{"post_id":"cjhsi9vki000dl0mmbf9qnezz","tag_id":"cjhsi9vks0017l0mmvwa8dkqb","_id":"cjhsi9vku001el0mmzj4p389g"},{"post_id":"cjhsi9vkk000hl0mml11wu3j7","tag_id":"cjhsi9vks0014l0mmqtv3t8h2","_id":"cjhsi9vkv001gl0mmkhdyhqcu"},{"post_id":"cjhsi9vkk000hl0mml11wu3j7","tag_id":"cjhsi9vks0017l0mmvwa8dkqb","_id":"cjhsi9vkv001hl0mmtu720tye"},{"post_id":"cji8u1m320000qzmmtu1d1bxl","tag_id":"cji8u2q420004qzmmk4lz22bj","_id":"cji8u2q430005qzmmg2va4sw3"},{"post_id":"cji8u1m320000qzmmtu1d1bxl","tag_id":"cjhsi9vks0014l0mmqtv3t8h2","_id":"cji8u2q430006qzmm3uvywaoi"}],"Tag":[{"name":"Charles","_id":"cjhsi9vk80005l0mm30fwq62w"},{"name":"SSL","_id":"cjhsi9vkj000gl0mmisz0z5au"},{"name":"AI","_id":"cjhsi9vkn000ll0mmredvjuo8"},{"name":"Paper","_id":"cjhsi9vko000ql0mmpdsvvi6x"},{"name":"Google","_id":"cjhsi9vkq000yl0mmx3mvwgur"},{"name":"Apple","_id":"cjhsi9vks0014l0mmqtv3t8h2"},{"name":"专利","_id":"cjhsi9vks0017l0mmvwa8dkqb"},{"name":"Design","_id":"cji8u2q420004qzmmk4lz22bj"}]}}