Sketch & UI & PS app ui https://sketchapp.com/learn https://www.sketch.com/docs/ https://sketchapp.com/plugins refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!…

切图是很多UI设计师的一项日常工作.平时做完设计图,要将设计稿切成便于制作成页面的图片,并标注好尺寸和间距,交付给前端来完成html+css布局的静态页面,有利于交互,形成良好的视觉感. 但有的认为前端自己会切图是最好,不建议把切图的事情丢给设计师做.这样中途会损耗结构讲解的开销(比如网页层级,细节重构方案等),毕竟最后css是前端去码,怎么切最合适要自己把捏的,否则又要引出一个新问题(设计师有必要掌握考虑重构实现的切图吗?). 总之,切图对于设计师设计创作.程序员写代码来说,其实不是件难事,但…

1.导读 关于应用的主题定制,相信大家或多或少都有接触,基本上,实现思路可以分为两类: 内置主题(应用内自定义style) 外部加载方式(资源apk形式.压缩资源.插件等) 其实,针对不同的主题定制实现思路,没有绝对的好坏,每种实现方案都有其利弊,重要的是如何去权衡.选择,根据实际的项目需求,痛点,制定一个符合实际项目需求,能够解决主题定制过程中痛点的方案才是好的方案. 由于我和团队一直是做车载导航应用开发,面向的对象是客户.不同的客户对于应用的UI或者主题是有不同需求的,也就是说针对不同客户,…

1.导读 关于应用的主题定制,相信大家或多或少都有接触,基本上,实现思路可以分为两类: 内置主题(应用内自定义style) 外部加载方式(资源apk形式.压缩资源.插件等) 其实,针对不同的主题定制实现思路,没有绝对的好坏,每种实现方案都有其利弊,重要的是如何去权衡.选择,根据实际的项目需求,痛点,制定一个符合实际项目需求,能够解决主题定制过程中痛点的方案才是好的方案. 由于我和团队一直是做车载导航应用开发,面向的对象是客户.不同的客户对于应用的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,是一套为视网膜屏幕而生的素材…

随着移动互联网的快速发展,用户的需求也在不断地增大,这对产品经理还有设计师的考验是越来越大.市场环境的变化让我们深信为快不破,但是一个产品的产出需要各个环节的紧密配合,但往往在产品输出过程中,由于分工不明确导致的形形色色的问题,其中的一大痛点就是产品经理,设计师和工程师之间面临着协作难,工作效率低的问题.以前,设计师需要一遍遍的手动切图配合工程师一次次的改图,如今借助着万能的sketch标注插件,提前下班再不是梦!! 产品经理和设计师这一份被誉为“高危”职业的工作,加班,掉发抠头皮是常有的事:不…

UI标注软件现在是设计师(UI.PM.前端等)必备的一款软件.设计稿是UI设计师日常工作中的产出物之一,当然,做出了高保真设计稿并不意味着你的工作结束了,因为你还得与下游的开发工程师进行对接. 我们经常听到UI设计师抱怨说,做完设计稿后满满的成就感被开发的同学给打击的稀碎,为什么和开发沟通这么累?我们也经常会听到崩溃在边缘的开发对UI设计师说:“你这个图标的尺寸是多少呢?”,“这两个控件之间的间距是多少”,“这里的切图呢”?......归根结底,是你给了开发不规范的标注图和切图. 传统的设计稿标…

隔行如隔山,这句话人人耳熟能详,但其实隔行并不可怕,大家各谋其事,各尽其职,倒也互不打扰,真正可怕的是,是内行还要受外行指点江山,而最难的部分,便是那沟通.流畅的沟通,和声细语,是有如时雨之化者:无效的沟通,言辞激烈,是话不投机半句多. 说起沟通难,很多人都必然会有身受之感,而苦逼的UI设计师们更是其中的一个典型群体.外有客户爸爸和甲方,内有产品经理和攻城狮,明明只想安安静静的做设计,去偏偏要在交流和协作上耗去了大半精力. 让UI设计师崩溃的瞬间,究竟有哪些? 崩溃场景一:甲方爸爸指点江山,改了…

1.需求 在Sketch的Artboard中插入网页截图: 1.1.输入网址,自动截图到Artboard中,并居中显示: 1.2.可截取网页局部图片 2.技术选型 技术的选型主要是针对截图功能的选型,插件技术选用sketch-webview-kit. 截图技术主要有phantomjs.puppeteer.html2canvas等技术可以实现截图功能. phantomjs.puppeteer是 headless 浏览器技术,puppeteer依赖于node,它们的主要区别如下:​         …

相信大家都对Sketch有一定的了解和认识.除了基础的矢量设计功能以外,插件更是让Sketch保持强大的独门秘籍.Sketch开放了第三方插件接口,设计师可以在几百种的插件中轻松找到适合自己工作方式的插件,并且他们都非常容易获得和安装.这里主要介绍使用Javascript API for Sketch开发Sketch插件. Sketch成为梦想中的“设计师工具箱”.但是每个人都有不同的需求,也许你需要一个我们还没有实现的功能.不要担心:插件已经可以满足您的需求,或者你可以轻松创建一个插件. 一.…