一.安装 npm install px2rem-loader lib-flexible --save 二.入口文件main.js加上 import 'lib-flexible/flexible.js' 三.在index.html加上 <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content

Photoshop如何安装蓝湖插件 下载蓝湖插件 直通车:蓝湖Photoshop插件: Photoshop版本要求为cc2017以上, 下载后是一个zip格式的文件,我们需要解压. 下载的文件 解压后的文件 安装蓝湖 解压完成后 windows系统用户双击.exe文件开始自动安装 mac系统用户双击macOS开头的应用程序开始自动安装 安装成功后重启Photoshop 安装完如何上传? 插件再头顶的窗口--扩展功能--蓝湖 触发后 这里是已经登录了 点击上传全部画板

如何使用蓝湖设计稿同时适配PC及移动端 项目需求: 一套代码同时适配PC及移动端 方案: pc端采用px布局,移动端采用rem布局,通过媒体查询(media query)切换 坑: 尝试过使用postcss-pxtorem来自动将px转换rem, 只能满足移动端,无法同时适配PC及移动端,感觉PC端还是使用固定像素px来布局好一点 PC端 设计稿尺寸1920*1080 为了设备不同分辨率的屏幕,可选择将设计稿宽度设置为1440 采用固定尺寸,固定字体,伸缩布局 如果是官网类的网站,采用固定宽度(

蓝湖 UI 设计稿上如何生成渐变色和复制渐变色 Sketch 生成渐变色 不要上传图片,切图 如果是切图,切图模式下就不会生成 css 代码了 复制渐变色 OK .button { width: 284px; height: 88px; background: linear-gradient(360deg, #FF5C5C 0%, #FB9657 100%); box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16); border-radius: 4px;

对于开发者,经常会使用,学习到各种环境语言和工具 我们不只是在不断的在搬运知识,更多时候我们也是在 分享我们学到的"新知识", 当我们有幸觉得自己发现了新的知识与技术时,作为分享者,幸运者,肯定会第一时间发布出来. 当我作为开发者,体验到了最新蓝湖3.0版本发布,随笔写下一篇很差劲的分享时,却遭到csdn 广告原因的审核失败. 我一篇文章里面只提到使用的好处,及小技巧,夸赞了新版本的畅爽之处,没有链接,没有入口也不行 ​我失望了~ 我感觉应该 用自己搭建的博客"畅所欲言了~&

前言   本篇是程序员仿照ui设计创建psd且切图五个按钮效果上传至蓝湖,本篇篇幅较长,整体完成一个目标,没有分篇幅了.   前提条件   已经安装了PS,已经在PS上安装了蓝湖插件,并且曾经已经上传过,若没有装PS的则自己装PS,没有装蓝湖插件请去蓝湖官网查询一下,可以安装插件一键上传.   程序员切图要突破的必要技能   以下技能,就是算装了PS,会一些基本的调图,但是实际不熟,需要将PS的几个与切图相关的功能熟练. 指定大小 :在PS中,将新建图标切换成指定大小,并且切图导出. 缩放:在P

1.什么是px2rem px2rem是一个插件能将px自动转换为rem,以适配各种不同的屏幕尺寸.前端开发可以直接使用设计稿量出的尺寸或者蓝湖给出的px进行布局,这样极大的提高了开发效率. 2.前提条件 1.vue3.x新建的项目,这里只说vue3.x的适配,因为vue2.x一般都创建很久了,或者不需要这么做了,亦或者改动代价太大,就不讨论了. 2.html文件里面添加如下meta <meta name="viewport" content="width=device-

Vue CLI3 移动端适配 [px2rem 或 postcss-plugin-px2rem] 今天,我们使用Vue CLI3 做一个移动端适配 . 前言 首先确定你的项目是Vue CLI3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -S 2.在main.js引入适配包 import Vue from 'vue' import App from './App.vue' import 'lib-flexible' // 引入适配包 Vue.confi

背景 如何按照设计稿中标注的尺寸,直接写页面的样式,不再需要px2rem这样的工具或者人工转换 ? 只要你明白了rem的计算原理,这个问题的答案超级简单. 根字体大小计算核心原理 设备的根字体大小 * 全屏比例值 =  设备的宽度 设计稿的根字体大小 * 全屏比例值 = 设计稿的宽度 这两个等式中的全屏比例值相等的条件下,在真实设备上可以高保真地还原设计稿. 实战一下 找了一个蓝湖的设计稿,蓝湖的设计稿宽度是750px,默认根字体大小是50px. 50px * 全屏比例值 = 750px,这个全

说明 基于wexplus开发app是来新公司才接触的,之前只是用过weex体验过写demo,当时就被用vue技术栈来开发app的开发体验惊艳到了,这个开发体验比react native要好很多,对于我这个纯web前端来说简直不要太好! weexplus是基于weex官方的二次开发版本,旨在解决weex官方配置麻烦.性能不好.开发体验不好等问题.weexplus框架是这边同事根据实际的项目抽离出来的开源框架,已经帮我们趟过很多坑了,具体组件用法在此不再赘述,link-放出文档.本文仅为本人视角开发

前言: 最近在自学flutter跨平台开发,从学习的过程来看真心感觉不是那么一件特别容易的事.不但要了解语法规则, 还要知晓常用控件,和一些扩展性的外延知识,所以套一句古人的话“路漫漫其修远矣,无将上下而求索”. 关于Material Design 以下是摘录的一篇非常好的关于“Material Design”的文章,传送门 1.安卓是什么? 想象一下,过年同学聚会上,大家把手机都放在饭桌前,除了各种型号的 iPhone 之外,你还能看到什么品牌的手机呢?我猜一定会有 OPPO.VIVO.魅族.

一.前端技术框架 1.Vue.js 官网:https://cn.vuejs.org/ Vue CLI:https://cli.vuejs.org/ 菜鸟教程:http://www.runoob.com/w3cnote... Nuxt.js:https://zh.nuxtjs.org/ 桌面应用Electron:https://electronjs.org/ 2.React.js 官网:https://react.docschina.org/ 中文网:http://react-china.org/

问题一.Android手机的常用设计尺寸有_________.怎么适配ios和安卓. 答案:安卓320 X 480是常规模拟器.但现在的开发都是用360x640做一倍率.480 X 800(1.5倍率).720 X 1280(2倍率).1920*1080(3倍率) ios用sketch软件出375*812的1倍率的设计图,直接生产标注,1倍率中1px=1pt=1dp.方便程序员理解. Ios适配安卓将375缩小间距至360,文字大小不变,图标大小不变,图片按等比缩小.也出一倍率标注.1px=1d

需求设计: axaure8.0 tool: teambition/石墨.幕布. 接口管理tool(后端开发接口,pc,m,app使用) https://www.eolinker.com/#/ ui 设计大都用sketch sketch只有苹果版: 1.sketch 2.photoshop 3.iiiustrator 4.after effect 5. premiere macbl.com 管理工具用蓝湖: 前端设计: node.js vs code npm; vue.2/3 sketch52.4

每一年的毕业季都是找工作高峰时期,产品经理.UI设计师这些岗位都会接触到原型设计工具.选择原型设计工具最重要的一点:适合自己的才是最好的! 下文将对目前超火的原型工具进行大对比,快来看看那一款于你而言才是最好的~ Axure 老牌原型设计工具,交互制作功能强大,当然同时也带来了较高的学习成本.设计区域是无限画布,方便给设计稿添加文字注解.在交互效果层面,可以实现非常多条件判断.巧妙运用可以实现更复杂的交互.不过同时也会带来“效率不高”的问题,因为细节过于繁琐,所以会加重产品经理或交互设计师在画原

作为一个专业UI设计师,不仅仅要了解整个产品在UI界面设计,交互设计中的工作流程,更需要了解整个产品从需求提出到产品上线的整个工作流程. 以下是互联网产品个部门的工作分配及流程: 从图中可以看到,一个互联网产品从策划到最后的上线营销,都需要由不同的部门分担其责,而每个部门中,根据岗位的划分,在细分到每个工种上来,所以一个互联网产品的开发流程,并不是单个的人,或者个别的部门可以实现完成的,它是一个完整的团队通力合作的产物.部门与部门,岗位与岗位相互协作配合,才会出色高效的完成项目. 一般互联网公司

本文转自:http://mp.weixin.qq.com/s/Xe3g2OSkE3BpIC2wdt5J-A 谷歌大规模机器学习:模型训练.特征工程和算法选择 (32PPT下载) 2017-01-26 新智元 1新智元编译   来源:ThingsExpo.Medium 作者:Natalia Ponomareva.Gokula Krishnan Santhanam 整理&编译:刘小芹.李静怡.胡祥杰 新智元日前宣布,获6家顶级机构总额达数千万元的PreA轮融资,蓝驰创投领投,红杉资本中国基金.高瓴智

一.常用的UI相关工具软件 PS Adobe Illustrator(AI) C4D AE Axure Sketch 墨刀 Principle Cutterman PxCook Zeplin 蓝湖 XMind PicsArt Autodesk Maya Easy Paint Tool SAI(SAI) Adobe Audition(AU) Flash 爱剪辑 DW Ps Play 二.常看的学习书籍有哪些 <设计中的设计> <点石成金> <简约至上> <设计心理学

1.版本管理工具  或直接 终端敲命令SVN(smartSvn 或者cornerstone/终端)  或git (sourceTree/终端) 2. 原型管理工具 使用墨刀(https://modao.cc/)或者Axure RP,蓝湖, 千万不要下面这样,一个个切大图画上连线, 后期改的逻辑你妈都不认识   3.需求管理工具 :开发时间新需求时间,因为需求不明确造成的修改旧的需求所需时间,例如: 有可能是吧项目所有文字 罪对其换成右对齐, 说得简单,一个项目 四五十个页面, 一天哪能改过来,还

安装lib-flexible cnpm i lib-flexible -D Vue项目引入 lib-flexible. main.js: import 'lib-flexible/flexible' 安装px2rem loader cnpm i px2rem-loader -D 修改配置文件 /build/util.js: const cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV ===

X-BUILD一套基于Webpack(v4.21.0)快速搭建H5场景开发环境的脚手架,只需要几分钟的时间就可以运行起来.X-BUILD是针对H5开发的一套自动化构建工具,致力于提升开发效率,减小开发难度.它可以让你在没有任何构建工具(例如 grunt . gulp 或 webpack 等工具)配置经验的情况下,帮你快速生成一个完整的前端工程,并可以打包代码和静态资源,使你的项目以最优异的性能上线. 针对痛点 ✅ 零配置,快速搭建繁琐的开发环境搭建. ✅ 解决多终端屏幕适配以及代码兼容性.规范性