在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代码可直接运行在基于 Element 的 vue 项目中. github仓库   https://github.com/JakHuang/form-generator 码云仓库  https://gitee.com/mrhj/form-generator 演示地址 https://mrhj.gitee

蓝湖 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;

一.PPI 1.像素密度PPI:PPI(Pixel Per Inch by diagonal):表示沿着对角线,每英寸所拥有的像素(Pixel)数目. 根据勾股定理(直角三角形两边为a和b,斜边为c,那么 a²+b²=c²),可以得知iPhone4(s)的PPI计算公式为:  = 329.65 和标准的326 稍有出入,这是因为像素的离散采样有锯齿效应. 2.iPhone5屏幕尺寸为4英寸.iPhone6屏幕尺寸为4.7英寸,屏幕尺寸 指的是显示 屏幕 对角线的长度. 单位换算:   1 inc

本帖最后由 hua631150873 于 2014-9-12 18:26 编辑 Lumzy 官方地址:http://www.lumzy.com/ Lumzy是一个网站应用和原型界面制作工具.使用Lumzy,您可以轻松创建UI模型并即时发送到客户电脑中. Lumzy还具有团队协作编辑工具. Mockingbird 官方地址:https://gomockingbird.com/ Mockingbird(中文名:百舌鸟)是一个在线工具,它使您轻松地创建UI界面模型,预览UI,并可以共享你的版面编排效果

[Android UI设计与开发]第05期:引导界面(五)实现应用程序只启动一次引导界面 jingqing 发表于 2013-7-11 14:42:02 浏览(229501) 这篇文章算是对整个引导界面开发专题的一个终结了吧,个人觉得大部分的引导界面基本上都是千篇一律的,只要熟练掌握了一个,基本上也就没什么好说的了,要是在今后的开发中遇到了更好玩,更有趣的引导界面,博主也会在这里及时的跟大家分享,今天的内容主要是教大家的应用程序只有在第一次启动的时候显示引导界面,以后在启动程序的时候就不再显示了

我们曾经给大家一个<MeeGo移动终端设备开发UI设计基础教程>,同时很多朋友都在寻找Android UI开发的教程,我们从Android的官方开发者博客找了一份幻灯片,介绍了一些Android UI设计,我们把这个教程整理出来,希望大家喜欢. 想了解全部Android UI教程内容请点击51CTO独家专题:谷歌官方教程:Android UI设计技巧 作为开发者,为啥我们要关心UI,前面的一堆通通可以忽略掉,直接跳到最后一条.因为好的UI设计可以帮助我们卖出更多拷贝,赚到更多钱. 这个教程包含

国外一些好用的UX/UI设计工具和资源分享 你今天使用的设计工具也许不再适合以后的网页和APP设计项目了.新的工具不断的推出市场,目标只有一个,让你的工作更快.更容易而且工作成效更好.今天分享的这些UX/UI设计工具和资源,有专注于快速原型设计.强大的团队协作功能.和设计可用性测试或成品测试等,希望能对你的工作有所帮助,快来体验吧! ●Proto.io Proto.io把原型制作提高到了一个新的水平.除了可以上传这就的设计,你还会发现这里有一个最真实的互动UI库之一.用它创建一个原型,非常容易,

免费PSD素材 TETHR by InVision 这是出自InVision的8款PSD文件,其中包含了100个模板和超过500个UI控件.来自InVision和UI8的设计师一同协作完成了这套UI Kit,非常漂亮. Designer-naut UI Kit 这是一套简约整饬的UI Kit,内置了40款矢量的小插件.这套UI Kit 为视网膜屏幕而生,基于16栏的960栅格系统,目前限时免费. Wire Kit 这是一套分辨率为840 x 8600的 UI Kit,是一套为视网膜屏幕而生的素材

本系列文章都会以一个程序的实例开发为主线来进行讲解,以求达到一个循序渐进的学习效果,这样更能加深大家对于程序为什么要这样写的用意,理论加上实际的应用才能达到事半功倍的效果,不是吗? 最下方有源码的下载地址,几乎源码的每一行都有注释,写的通俗易懂,非常清晰,如有不懂的可以留言,本博主一定尽心尽力,为大家答题解惑,希望大家多多支持,好的,话不多说,让我们回归到今天的正题. 一.实现的效果图 也许是养成了这样一个习惯,每次看别人的代码前,必须要先看实现的效果图达到了一个什么样的效果,是不是跟自己想要实

我给博客改了主题色,从 这样的 改成了 这样的:然而我问小伙伴看看效果他却并没有发现改变. 红绿色盲在亚洲人中占比,男性约 5%,女性则小得多.也就是说,就算仅考虑为国内用户开发应用,这也是很大的一部分用户了. 本文将通过更加了解色盲(Color Blindness)来指导我们为更多用户提供更好的 UI 设计. 没有色盲模拟器 大多数想理解色盲眼中世界的人可能会考虑“色盲模拟器”.在网上搜索“色盲模拟器”,或者英文的“color blindness simulator”可以得到很多的模拟工具,大

http://www.gameres.com/316761.html 本文编译自 Medium,作者是一位UX(User Experience, 用户体验)设计师,他通过自己学习UI设计的过程,总结出7条实用的法则,为UI设计新手提供了宝贵的经验. 序言首先,明确一点,这篇文章并不是为所有人准备的,而是有特定的目标读者: 想要在开发产品时设计出好看UI的开发者. 想要让自己作品集更出彩的UX设计师,或者是想要做出更精美的UI和UX的设计师. 如果你是学艺术的学生或者已经是 UI 设计师了,你可能

AutoLayout AutoLayout是一种基于约束的,描述性的布局系统. 程序员—-(cgrect)—>frame(center+bounds)    =====>   程序员—(NSLayoutConstraint)—>AutoLayout—(cgrect)—>center+bounds Autolayout 基本使用方法 interfaceBuilder Alignment Constraints custom Constraints Spacing to nearest

Android UI设计之AlertDialog弹窗控件 作者:qq_27630169 字体:[增加 减小] 类型:转载 时间:2016-08-18我要评论 这篇文章主要为大家详细介绍了Android UI设计之AlertDialog弹窗控件的使用方法,感兴趣的小伙伴们可以参考一下  有关android的弹窗界面相信大家见过不少了,手机上很多应用软件都涉及到弹窗控件,比如典型的每次删除一个图片或者卸载一个等都会弹出一个窗口询问是否删除/卸载等,还有我们系统的设置时间/日期等,都用到了这样的控件,

原文:通通玩blend美工(6)上--仿iPhone滚动选择器的ListBox(UI设计) 好久没更新博客了,由于项目比较紧,期间收到不少园友的短消息,感谢大家对我的支持~~. 相信各位都在自己的神机中看到过各种滚动选择器,偶们项目经理就是个iPhone迷,前几天一直抬着个手机对我说"这个炫,做这个...".于是就有了这个选择器. 最终效果如下: (按住鼠标,尽情滚吧~)   页面代码如下:  <TextBlock Text="{Binding SelectedItem

最近在和设计沟通关于设计图尺寸大小和前端实际页面尺寸大小不一致的情况,我们的UI设计是使用的iPone6的,(iphone6:    375px*667px  实际像素:750px*1334px)如果按照她给的尺寸直接复制那么你的页面尺寸就是一个放大镜,正常人都知道那是不对的,我在做的时候有两种解决办法: 一.UI设计尺寸定基数 可以和UI沟通在给你的标记尺寸大小时候,让她基于一个数值,一般是16px.给你标注的时候选择保留两个小数,给你标注成px或者rem. 开发者这时候需要配置开发者工具了,

小程序中一般很少大段落的文字,基本是4.5个字的主题.一行标题.一行摘要.两行描述.显示时超出部分用省略号代替.下面结合工具使用介绍一下文字排版的方法.先看效果图.  工具中属性设置如下图:两行文字属性,限制行数=2,表示最多两行,超出部分用省略号代替. 不限制行数属性中限制行数=0,表示在小程序中根据文字内容自动拉伸. 一行文字属性中限制行数=1,表示文字只显示一行,超出部分省略号代替. 以上文字是显示在view中的,自动生成的wxml如下: <view class="WViewColu

工欲善其事必先利其器.下面为大家介绍一款工具软件,如何做到轻松布局. 工具简介:小程序layout设计工具,可视化方式进行小程序UI设计.通过鼠标拖拽组件方式进行UI布局.工具提供符合微信视觉统一的模板,并且按照FlexBox方式可视化布局.自动生成wxml和wxss,复制到微信开发者工具中即可同步显示.视频介绍请移步优酷http://v.youku.com/v_show/id_XMTgyNTQ4NDcyMA==.html 我们平时开发工作中都会有这种情况发生,为了能够完成一个布局,css改了之

甜品消消乐01_游戏基础界面 传送门 甜品消消乐02_游戏核心算法 传送门 甜品消消乐03_游戏UI设计    传送门 (源码在文章最下面~) 实现过程 游戏界面UI 分数与时间的UI显示 有关游戏UI显示的内容 public Text timeText; ; 判断游戏是否失败 private bool gameOver; 游戏刷新的时候对游戏是否结束进行判断 void Update () { if (gameOver) { return; } gameTime -= Time.deltaTim

[项目Github地址] https://github.com/oTPo/hw2 [项目规划] PSP表格 事项 预计时间(min) 实际花费时间(min) 需求分析 60 60 开发流程分析 30 60 新技术学习 300 400 实际工程开发 600 750 工程整体调试和优化 270 350 项目总结 60 120 (合计) 1320 1740 [具体项目规划] >  需求分析 本来打算用MFC的,后面再和组员讨论后决定使用Qt,因为可以跨平台.详细博客地址请见:http://www.cn

  前一阵子拜访了一些小伙伴,大家都表示苦前端太久了,需要花费不少时间在前端开发上.本着在不损失灵活性的前提下尽可能提高开发效率的原则,作者尝试在框架内集成了拖拽方式生成Vue用户界面的功能作为补充,以方便快速生成增删改查界面,也可以用于大屏展示及简单的网页制作. 一.技术原理 1.1 布局   目前仅实现了基于vue-grid-layout的网格布局,设计画布上的每个组件动态加载至对应的GridItem内,同时根据组件配置绑定相应的prop及事件. <!--src/components/Des

无需编译.快速生成 Vue 风格的文档网站 https://docsify.js.org/#/#coverpage https://github.com/QingWei-Li/docsify/