idoc

Instagram是一款运行在移动端上的社交应用，以一种快速、美妙和有趣的方式将你随时抓拍下的图片彼此分享。Instagram提供了这样一套顺畅的操作流程：拍照--滤镜特效（以lomo风为主的11种照片特效）--添加说明/添加地点--分享（可以共享到Twitter、Facebook、Tumblr甚至新浪微博这些主流社交网络）。同时Instagram基于这些照片建立了一个微社区，在这里你可以通过关注、评论、赞等操作与其他用户进行互动。 这款例子共15个页面，使用了摹客中最常用的8种交互方式以及15种交互动画，使用的组件包括面板、内容面板、选项卡等常用组件，展示基本的页面跳转。 原型模板地址： https://app.mockplus.cn/rp/example/qIw3zzvPy/wiPO3iifgC 文末福利： 送你高效原型设计神器，可领取团队版，最高可获得1年VIP。 新用户注册福利，最高可获得1年 在摹客官网 www.mockplus.cn/get-idoc 输入激活码【mock2021】即可领取摹客专业版3个月，若团队超过20人请联系（微信号：wenwb0077）申请更多时长。 来源： oschina 链接： https://my.oschina.net/u/2008098/blog/4955008

iframe基本内涵 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。 <iframe src="demo_iframe_sandbox.htm"></iframe> 但是，有追求的我们，并不是想要这么low的iframe. 我们来看看在iframe中还可以设置些什么属性 iframe常用属性: 1.frameborder:是否显示边框，1(yes),0(no) 2.height:框架作为一个普通元素的高度，建议在使用css设置。 3.width:框架作为一个普通元素的宽度，建议使用css设置。 4.name:框架的名称，window.frames[name]时专用的属性。 5.scrolling:框架的是否滚动。yes,no,auto。 6.src：内框架的地址，可以使页面地址，也可以是图片的地址。 7.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用 8.sandbox: 对iframe进行一些列限制，IE10+支持 上面一些tag，会在下文进行穿插说明，单个不好说。 我们通常使用iframe最基本的特性，就是能自由操作iframe和父框架的内容(DOM). 但前提条件是同域. 如果跨域顶多只能实现页面跳转 window.location.href . 那什么是同域/ 什么是跨域呢?

iframe基本内涵 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。 <iframe src="demo_iframe_sandbox.htm"></iframe> 但是，有追求的我们，并不是想要这么low的iframe. 我们来看看在iframe中还可以设置些什么属性 iframe常用属性: 1.frameborder:是否显示边框，1(yes),0(no) 2.height:框架作为一个普通元素的高度，建议在使用css设置。 3.width:框架作为一个普通元素的宽度，建议使用css设置。 4.name:框架的名称，window.frames[name]时专用的属性。 5.scrolling:框架的是否滚动。yes,no,auto。 6.src：内框架的地址，可以使页面地址，也可以是图片的地址。 7.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用 8.sandbox: 对iframe进行一些列限制，IE10+支持 上面一些tag，会在下文进行穿插说明，单个不好说。 我们通常使用iframe最基本的特性，就是能自由操作iframe和父框架的内容(DOM). 但前提条件是同域. 如果跨域顶多只能实现页面跳转 window.location.href . 那什么是同域/ 什么是跨域呢?

在UI设计中我们常常使用Ai来进行矢量图的绘制，然后导入Ps中进行设计、排版和导出。 在以前的版本中，切图一直是个很麻烦的事情，要么依托于脚本，要么手动一张张导出，很不方便，这种窘况在Photoshop CC 2015版中得到了解决。 准备 使用Photoshop CC 2015版 准备好要切的图片 第一种方法 Ps自带切图 首先打开图层，找到要切图的部分 选中要切图的图层 图层上单击右键，选择快速导出为PNG 选择一个文件夹保存即可 可以发现导出的文件以图层名称保存成为PNG格式，保留了透明像素 接下来介绍另外的切图神器！！ 第二种方法 摹客iDoc PS插件 摹客iDoc PS插件是一个Ps扩展，可以方便的导出移动端和网页的切图，并生成多种大小格式，并且是免费的！ 下载 官方网站： https://idoc.mockplus.cn/ 安装PS插件 下载摹客iDoc PS插件安装文件并点击进行安装。 打开插件 插件安装好后打开PS，在「窗口>扩展功能」找到摹客 iDoc 插件，选择并打开。 登录 使用摹客平台账号（在 Mockplus 、摹客 iDoc 上通用）即可登录。 标记切图 选中需要切图的图层或编组，点击「标记切图」。 将在名称前增加“-e-”，「标记切图」变为「取消切图标记」，此时切图操作便完成了。 上传设计稿 标记完成切图之后，一键将设计稿上传至云端项目中

随着响应式网页的发展，对于内容呈现的要求也越来越高，尤其是图像。为了在各种设备上能实现自然伸缩或扩展而不影响图片质量，所以矢量图形（SVG）正变得越来越受欢迎。 大家都知道，在计算机图形学中，有两种主要的图像类型：矢量和位图。位图[bitmap]，也叫做点阵图，栅格图象，像素图，简单地说，就是最小单位由像素构成的图，缩放会失真。矢量图，简单地说，就是缩放不失真的图像格式。 为什么SVG更受欢迎？主要有这几方面的原因： SVG 是可伸缩的矢量图形，在浏览器中改变尺寸，其图形质量不会有所损失 相比其它位图，SVG图像文件更小，可压缩性更强 SVG 可以被记事本等阅读器、搜索引擎访问 SVG 图像中的文本是可选的，同时也是可复制的 SVG 图像可以与DOM，CSS和JavaScript交互 SVG 可以制作成整体或局部动画 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像。 但当进行 Web 设计时，我们还需要做一些优化来使得 SVG 变得更加轻量。要创建和使用SVG文件，你需要一个矢量图形编辑器。以下是 摹客 团队为大家整理的适用于Windows，Mac，Linux，Web，iOS和Android的免费或付费的SVG编辑器。 1. Adobe Illustrator 支持：Windows/Mac Adobe

一个好的网页设计，不仅仅只是产品或公司企业相关信息的机械罗列。一个好的故事（尤其是一个准确把握受众需求，巧妙结合企业产品特色，并能够轻松引起用户共鸣的故事），更能赋予网页思想和灵魂，让用户不由自主停留，逐步深入，最终完成购买。 然而，如今打造一款极富故事性、艺术性和视觉效果的网页设计，并非易事。那么，对设计师而言，如何才能成功设计一款有故事且代入感极强的网页呢？ 下面小编就和大家一起了解一下， 2019年最优的视觉故事化网页设计案例和模板，看看它们到底是如何在网页中讲好故事的： 25款最优故事化网页设计，助你轻松掌握“讲故事”秘诀 最佳故事性网页设计实例 1. Pierre Herme Nicolas Buffe 网页类型 : 小说阅读类网页 作为一款真正讲故事的小说类网页设计案例，此网页并未像同类网页一般，直接通过小说书籍罗列的方式，供用户选择和查阅，而是选择了另一种更具故事性和视觉效果的方式进行展示。 当用户进入，故事的阅读就已经开始。在一系列简洁易懂的文字引导下，用户不仅能够层层深入地了解相关小说情节，还能够实时与网页互动，同小说主人公一起完成冒险。 其逼真的背景人物场景、配乐、动画以及交互设计，也使整个小说阅读过程更具代入感，让用户深陷其中，不能自拔。 2. Borgo Veneto 网页类型 : 时尚工作室类网页 本款视觉故事性网页设计，通过左侧的线性导航设计

切图是很多UI设计师的一项日常工作。平时做完设计图，要将设计稿切成便于制作成页面的图片，并标注好尺寸和间距，交付给前端来完成html+css布局的静态页面，有利于交互，形成良好的视觉感。 但有的认为前端自己会切图是最好，不建议把切图的事情丢给设计师做。这样中途会损耗结构讲解的开销（比如网页层级，细节重构方案等），毕竟最后css是前端去码，怎么切最合适要自己把捏的，否则又要引出一个新问题（设计师有必要掌握考虑重构实现的切图吗？）。 总之，切图对于设计师设计创作、程序员写代码来说，其实不是件难事，但是似乎成为了件苦差事？ UI设计师：“因为不愿切图，被人事劝退。” 程序员：“被人蔑称切图仔该怎么怼回去……” 看到这里，小编只想替各位UI设计师和程序员说：“你才是切图仔！” 到底手动切图是有多恼火？小编上网搜索了一下，发现传统的切图方法如下： 1.打开下载的psd文件 打开后，因为文件比较长所以看不清细节，所以要放大图片到合适的大小。 2.修改参考线 图片中很多条蓝色的参考线都是是设计人员用来设计用的，很多我们都不需要，所以先把这些参考线都清除掉。 3.选择要切的图标 ①选择工具栏第一个“移动工具” ②然后查看上面选项栏“自动选择”有没有被选中…… ……此处省略300字…… 4.切片需要的图标 现在，我们已经用参考线把我们的图标给包裹出来了，下面，我们要用切片工具来切出我们的图标

为了方便新入坑的UI设计狮和前端开发攻城狮能更顺畅的看完这篇文章，首先，先来简单科普一下到底什么是切图（老油条可直接忽略）？ 通俗的说，切图就是把设计稿切成一片片的，然后前端攻城狮经过div+css功能最大限度的还原设计图，也就是要把零碎的图片整合成一张完整的图片。那为什么要切图，UI设计狮做完设计稿后交给攻城狮撸代码不就完事了？实际上一张完整的设计稿是由不同的元素组成的，比如说，Logo、背景图、图标、文本等等，而部分元素，前端攻城狮是无法使用代码实现效果的，因此，需要将其单独切出来使用。 好了，其它的就不多赘述了。想了解更多的相关知识，大家自行去脑补。以一句话来描述其重要性，切图是实际开发过程中必不可缺的一步，切图资源的输出将直接决定最终产品的效果。既然这么重要，到底是谁负责切图呢？是UI设计狮还是开发攻城狮？ 我们经常会看到UI设计狮和前端攻城狮之间的撕逼大战。UI设计狮说：“我们都已经输出了高保真效果图了，切图那种脏活累活不应该是攻城狮自己去摆平吗？”攻城狮说：“设计狮切图更加专业，我们开发人员的主职是专注于代码。”.......这种争论终将无法得到定论，毕竟公说公有理，婆说婆有理。 以小编个人经验，切图是设计狮和攻城狮都必须掌握的技能。作为设计狮的你，自己的设计稿只有自己才知道该以什么形式去展现；此外，自己生的孩子不该自己养吗？作为攻城狮的你