10个帮你UI设计提速的Sketch使用技巧 2015-4-11 09:59| 发布者: yuanxingbbs| 查看: 1129| 评论: 0   选择使用Sketch的理由很多,因为好奇跟风安装的同学应该不在少数,看了介绍觉得功能强大而安装的应该也不少.当然,如果你是一名UI/网页设计师,你的Mac和我一样感觉跑PS不堪重负,那么Sketch绝对能帮你排忧解难,从此告别卡顿和无所不在的进度条. 越来越多的设计师开始选择使用Sketch 设计网页.UI了,开发团队 Bohemian Codi…

sketch横空出世,移动端的应用越来越多的采用sketch来做,前端开发也需要掌握更多sketch技巧. (1) sketch导出图片时,如何快速选择多个图层? 1. 在画布上任一点单击并拖拽出一个选区, 同时按住 option ⌥ 键,则只会选中完全被包括在所画选区内的图层(强烈推荐). 2. 按住键盘上的 shift ⇧ 键来同时选择多个图层,当你点击其它图层时,之前选中的图层也会被保留.如果你按住 shift ⇧ 键去点击一个已经选中的图层,则会取消选择. 3. 在画布上任一点单击并拖拽…

Sketch拥有强大丰富的插件,但是这些插件天各一方,四处查找下载地址非常麻烦.这里提供一个技巧,通过一个入口可以安装各种插件,基本涵盖了市面上所有靠谱的插件. 准备 Sketch54 Runner 1/4:安装Runner 下载Sketch插件Runner并安装,这个插件的具体功能可以参考Runner官网. 2/4:打开Install     安装完成后,打开「Sketch」,在菜单栏中找到「插件」 「Runner」 「Install」. 3/4:查找插件 在搜索框中输入你想安装的插件名称并回…

Sketch是一款基于Mac的矢量绘图应用.面对着功能复杂繁琐的photoshop,Sketch相比较而言身轻如燕.最近也掀起了用Sketch设计产品原型的热潮,因为用它来画设计稿简直轻而易举,相比于Axure它有更丰富的组件库和更全面的尺寸控制,让我们的原型图更逼真,更有利于交流和前期的展示. 作为目前产品原型设计中的利器,Sketch特别适合移动APP和响应式网页的设计开发.下面我们就来看看Sketch的一些入门指南以及如何利用Mockplus的插件实现交互效果. 一. Artboard 在…

之前Sketch只能根据mac系统的外观设置变更皮肤.在更新了版本54之后,可以脱离操作系统,在自己的偏好设置中更改外观了. 准备 Sketch 54 更多工具:whose.design 第一步:打开首选项 在界面左上角进入「Sketch 」 -> 「首选项」. 第二步:更改外观 在「通用」中,更改「外观」为「深色模式」,保持「画布」为「Sketch默认」. 完成 好了,Sketch切换为深色模式了.还不赶紧假装码农开始画图?…

Sketch是一款拥有美观界面和强大功能适用于所有设计师的专业矢量绘图工具.它旨在为美术设计师创造出一款更优秀的作品,不是复制品,而是提升品.Sketch简约的设计是基于无限的规模和层次的绘图空间,免费调色板,面板,菜单,窗口和控件.虽然使用简单,它提供了功能强大的矢量绘图和文字工具.如完美的布尔运算,符号,和强大的标尺,参考线和网格.相比其他的矢量绘图软件,比如AI,Sketch的优点在于使用简单,学习曲线低,可以说是轻量级的 AI.Sketch 3 提供了基本的形状,支持自动切图,PDF.E…

如果你是一枚交互设计师或者UI设计师,那么你一定知道Sketch这个强大的矢量设计软件:如果你用过Photoshop,那么在你接触了Sketch之后就能了解到这款产品相对于PS的优点,说不定会跟我一样变成一个Sketch的死忠粉. 扁平化设计的流行和屏幕分辨率的提升推动了Sketch这款软件的流行. 什么是Sketch Sketch——矢量绘图应用 Sketch是一款矢量绘图应用,而矢量绘图无疑是目前进行网页.图标以及界面设计的最好方式. Sketch有以下特点: 矢量文件,不失真: Symbo…

从零开始学Sketch——进阶篇 Sketch是一款矢量绘图应用,而矢量绘图无疑是目前进行网页.图标以及界面设计的最好方式. 在初识了Sketch的界面布局和基础工具之后,我们就可以开始进入高阶的Sketch工具篇学习了.这篇文章主要会涉及Sketch模板.插件的使用,以及Sketch在具体使用过程中的一些技巧分享. 如果你曾接触过PS.AI.Axure等软件,那么接下来的内容你应该不会陌生,因为所有的设计软件学习的路径都是相似的,都是从认识基本功能框架到外部资源整合运用,最终形成个人风格的一个…

很膜拜那些既能写出一手好代码,并且还能够懂设计懂交互的人.公司基本上都对这两块工作 分工分职,但是我觉得作为一名移动开发者,懂点设计 是必备的. 国外的很多大牛们,感觉他们虐我们千百遍了. 我觉得写代码和搞设计这两样东西不会有任何冲突, 设计的时候往往不能 脱离了代码的实现难度,以及 系统的风格设计,我们的程序基本是实现设计的UI和交互.平台的不同 也往往影响着设计. 不得不承认兼顾两者是非常艰巨的任务.但是想想如果你能自己设计自己想要的东西,然后自己敲代码去实现它,这种成就感. 成就感这东西往…

对工具而言,个人觉得没有说哪个工具好用不好用之分,更重要一点,做设计的来讲什么时候用什么工具来提高工作效率,这个最重要.下面我也来讲讲这二款工具的不同之处: Axure算是原型工具里的 Old School ,功能强大的同时又带着点Windows传统界面的土气,有人把它形容成瑞士军刀. Sketch更像是最近大热的 New School ,虽然从Apple那里沾染了点理想主义的傲娇做派,但是从它的开源特质和与其它产品的互通情况来开,很有可能是未来的发展方向. 我目前对这两个工具的熟悉程度刚好处于…

以上图片来源于互联网分享,如涉及版权问题请联系作者删除. 文章素材来源:风云社区(www.scoee.com) 下载地址:风云社区(www.scoee.com)   [简介] Sketch 是一款适用于所有设计师的矢量绘图应用.矢量绘图也是目前进行网页,图标以及界面设计的最好方式.但除了矢量编辑的功能之外,我们同样添加了一些基本的位图工具,比如模糊和色彩校正. 我们尽力让 Sketch 容易理解并上手简单,有经验的设计师花上几个小时便能将自己的设计技巧在Sketch中自如运用.对于绝大多数的数字…

以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 精心设计的用户界面对网站意义重大.具备所有最新功能和响应式设计有助于提高网站的搜索引擎排名,从而增加受众群体.但是,当项目过大时,开发人员往往无法遵循最佳UI设计的原则进行开发.从而导致网站中某些重要功能无效或者浏览器测试不能完全通过.所以,今天咱们讨论的话题就是导致网站UI设计失败的原因以及如何避免这些错误的UI设计技巧,总结出来有17个.我们一起来看看吧! 1. 避免刻意销售 用户体验的最新趋势是…

Dashboard设计,尽管设计师们叫法各不相同(例如:“数据面板设计”, “控制面板设计”, “仪表盘设计”或“后台界面设计”等等).但,此类设计的最终目都是力求以最直观.最简洁的方式呈现各种信息和数据,从而为Web或App用户提供最有效.最实用的行动指南或决策基础. 但是,对设计师们而言,这一看似简单的设计目标,执行起来并非易事.究竟应该选择哪类图表,才能真正完美直观的展示各类数据?究竟如何选择和搭配界面色彩,才能达到美观吸睛的同时,又能突出页面重点?究竟如何选择界面图标,才能更好的引导用户…

APP首页设计对APP自身来说是至关重要的,一款优秀的APP产品,其首页设计不仅需要清晰的展示产品核心功能,给用户创造良好的用户体验,而且还需要展示公司的品牌形象,提升在用户心中的品牌认知度.今天,就带领大家一起来聊聊APP首页设计那些事儿. 为什么要进行APP首页设计? ①首页是用户打开APP后最先看到的界面,也是用户与APP之间的第一交互界面: ②在首页上,用户在APP中可以快速找到最为核心和重要的功能,以方便用户快速进入对应的需求模块: ③首页是用户的第一印象,用户在首页上交互体验的好坏将…

本文转自 http://www.jianshu.com/p/ff70b5f35c8f 从零开始学Sketch——进阶篇 Sketch是一款矢量绘图应用,而矢量绘图无疑是目前进行网页.图标以及界面设计的最好方式. 在初识了Sketch的界面布局和基础工具之后,我们就可以开始进入高阶的Sketch工具篇学习了.这篇文章主要会涉及Sketch模板.插件的使用,以及Sketch在具体使用过程中的一些技巧分享. 如果你曾接触过PS.AI.Axure等软件,那么接下来的内容你应该不会陌生,因为所有的设计软件…

在任何网站或移动应用设计的过程中,线框图作为设计元素和功能的图示,它有助于帮助定义和更好地传达信息层次结构,让参与设计和开发的人员更好的理解设计师的思路和设计的功能点. 即使线框图设计是一个比较耗时的过程,但在推进设计项目进度之前,通过线框图了解项目的层次结构是非常有效的.那么摹客小编今天收集了一些优秀的iPhone线框PSD/PDF模板.希望对你有所帮助,也希望通过学习这些iPhone线框模板可以将您的设计推向一个新的水平. iPhone 6 线框模板 1. iPhone 6 Plus and…

第1章 课程介绍主要介绍课程的安排及你将学到哪些使用技巧 1-1 课程介绍第2章 sketch 实例及相关工具本节课你将学到钢笔工具的使用.渐变及填充.投影的使用,体会并观察实际中物品的光影与材质:模糊工具.栅格化工具.辅助线的应用,体会到界面排版及构图的重要及页面设计中存在的节奏感:剪切蒙版的使用和两种添加方式,体会到选图之于设计的重要性:切图工具使用技巧,体会团队配合中沟通的重要性:symbol模版工具的使用... 2-1 Outline风格icon作品(上) 2-2 Outline风格ic…

在之前的文章中,笔者为大家介绍了Sketch 的入门教程.实用技巧和资源集锦,相信大家对Sketch已经有了初步的了解和认识.除了基础的矢量设计功能以外,插件更是让Sketch保持强大的独门秘籍.Sketch开放了第三方插件接口,设计师可以在几百种的插件中轻松找到适合自己工作方式的插件,并且他们都非常容易获得和安装. 这里笔者为你总结了五款超实用的Sketch插件,让你把Sketch用到起飞. 1. Marketch 做完设计稿后,我们往往需要告诉前端开发工程师,图片的具体尺寸,文本字号和间距等…

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 果粉们翘首以待的iPhone X终于开始预售了!同样满怀期待的还有设计师和开发人员,他们将在iPhone X上看到他们的App了.苹果官方表示:iPhone X是智能手机的未来,而这个未来的风向标可能将会给UI设计师和开发人员带来一些小麻烦. 作为一名UI设计师,我总结了一些在设计iPhone X App时有效的技巧供大家参考: 1.    使用正确的iPhone X画板尺寸 与之前的iPhone…

什么是sketch? sketch 是一种基于散列的数据结构,可以在高速网络环境中,实时地存储流量特征信息,只占用较小的空间资源,并且具备在理论上可证明的估计精度与内存的平衡特性. 通过设置散列函数,将具有相同散列值的键值数据存入相同的桶内,以减少空间开销.桶内的数据值作为测量结果,是真实值的近似.利用开辟二维地址空间,多重散列等技术减少散列冲突,提高测量结果的准确度. (我的理解:类似于将数据归类,当你要找某一个元素时,只需再这类中找,而不需遍历全部数据,以减小空间内存) 散列: Hash,一…

译者注:随着 Node.js .react-native 等技术的不断出现,和互联网行业的创业的层出不穷,了解些前端知识,成为全栈攻城师,快速的产出原型,展示你的创意,对程序员,尤其是在创业的程序员来说,越来越重要,下面我们就跟随著名国外开发者网站上的热推文章<Leveling up in CSS>,从提升你的CSS技巧开始.   CSS 在刚开始学习的时候看起来非常简单.毕竟,它仅仅就是些样式而已,事实上是这样吗? 但是,随着你的不断了解.很快,你会发现 CSS 没你想象的那么简单,它复杂且…

去年夏天开始用Sketch,觉得它放Dock里闪亮亮的很好看,当时笑称是男盆友送我的第一颗小钻石噗哈哈.所以那段时间几乎刷遍了所有关于 Sketch 的网站.文章.教程,之后又在自学设计,因为想和更多的人分享 Sketch, 所以用 Sketch 和 Adobe Muse做了这个 Sketch中文网 ,之前新增了 Sketch中文社区 ,欢迎来提问.探讨和分享喵- 之前在社区里有朋友问如何自学 Sketch,正好搬过来希望我的经历能够帮到大家: Sketch 是非常好上手的设计软件,比起花在 P…

1. 要素的剪切与延伸 实用工具 TASK 任务栏 Extend/Trim feature 剪切所得内容与你画线的方向有关. 2. 自动捕捉跟踪工具 点击Editor工具栏中Snapping来打开Snapping Environment对话框 捕捉设置中有3个选项, vertex edge end 分别是节点.终点.和边,选择end应该会捕捉端点 3. 图斑面积计算及长度计算 应用工具CALCULATE AREA 或者使用VBA代码实现 新建字段并开启Advanced 写入代码,面积计算: 在最…

怎么把 SVG 转成 PNG ?用 Chrome 吧,非常好用,还能设定自己想要的尺寸. 什么是 SVG ? SVG (Scalable Vector Graphics,可缩放矢量图形) 是基于 XML .用于描述二维矢量图形的一种图形格式. SVG 由 W3C 制定,是一个开放标准. SVG 转 PNG 有哪些办法? 在线转换 在线编辑器 本地软件,如: AI, Inkscape 等 代码转换 但都会有些问题: 在线转换:改不了颜色.尺寸. 尤其 SVG 图标,一般 24x24 黑色. 在线编…

javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来存储数据有什么不同.于是,我打算探究探究. 一.掌握三种数据类型 首先,一个前提必须掌握的,就是必须理解javascript的数据类型分类,主要分为以下三种: 第一种类型是标量(scalar),也就是一个单独的字符串(string)或数字(numbers),比如"北京"这个单独的词. 第二…

记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前端群里还发现以上观点类似的奇葩聊天,真是*** 其实,也是在很久以前,看了腾讯ISUX的一位前端工程师-麦时分享的一篇技术文章(个人站点已失效,就不贴出来了),才了解到真正的css选择器权重计算. 以下是css选择器权重计算精华所在,翻译自国外的文档(记得是W3C给出的计算规则) 如果一个声明来自s…

一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN缓存 通过构建工具Gulp,可以在开发的时候就将合并压缩的事情一起做掉. 之所以要做合并压缩是因为:HTTP 1.x不允许一个连接上的多个响应数据交错到达(多路复用),因而一个响应必须完全返回后,下一个响应才会开始传输. 也就是说即使客户端同时发送了两个请求,而且CSS资源先准备就绪,服务器也会先发…

如有需要WPF工具的朋友可以移步 工欲善其事,必先利其器 之 WPF篇: 随着开发轨迹来看高效WPF开发的工具和技巧 之前一篇<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥>承蒙大家喜爱和编辑推荐,在此非常感谢大家支持.在回复中我发现很多朋友还在使用老的IDE,当然有些是公司决定的,和个人无关.但是有条件的话还是新的IDE比较适合大家,毕竟新的IDE会有新的特性来减少大家编程时间,加快效率,这样就会挤出更多的时间给大家思考.做.NET, VS是必备的.所以这次我想…

谷歌Chrome,是当前最流行且被众多web开发人员使用的浏览器.最快六周就更新发布一次以及伴随着它不断强大的开发组件,使得Chrome成为你必备的开发工具.例如,在线编辑CSS,console以及debugger这些常用的调试技术,或许你已经了解.在本篇文章中,我们将介绍15个炫酷且实用的技巧,这将更快的提高你的开发效率. 该篇博客原文地址:http://www.cnblogs.com/giggle/p/5966991.html 一.快速查找文件 如果你使用过Sublime,那么你会知道’Go…

前言 本文主要写给使用命令行来操作Git的用户,用于提高Git使用的效率.至于使用命令还是GUI(Tortoise Git或VS的Git插件)就不在此讨论了,大家根据自己的的喜好选择就好.我个人是比较推荐使用命令行的,因为命令行是原生的客户端,当熟悉了命令行以后,使用效率并不会比GUI低.而且我是从GUI(Tortoise SVN)转命令行的,刚开始的时候也是吐槽命令行的“非人性化”,但我走出了舒适区,真正使用起命令行后,我才发现了自己之前的想法是肤浅的. 指令别名 指令别名就是给一些常用的指令…