UI设计师工作必备的七个设计神器

今天推荐的这7个神器,有经典款也有新人版,不过大致贯穿了UI设计的整个工作流程,从排版、配色、切图到标注、预览,都有对应的良心神器推荐 ,非常适合刚入门的UI设计师,当然,有两款谷歌刚出的神器,也值得老手们来瞧一瞧。


今天推荐的这7个神器,有经典款也有新人版,不过大致贯穿了UI设计的整个工作流程,从排版、配色、切图到标注、预览,都有对应的良心神器推荐,非常适合刚入门的UI设计师,当然,有两款谷歌刚出的神器,也值得老手们来瞧一瞧。

《七种武器》为著名武侠小说家古龙著名作品代表作之一,共分为:长生剑、孔雀翎、碧玉刀、多情环、离别钩、霸王枪、拳头,七种武器非一般江湖武器,件件精妙绝伦。

在UI设计中一样存在这样的七种武器,如果能拥有这七种武器,必定能让你设计如同“开挂”一般事半功倍!

长生剑 — 排版神器  Material Design Grids

(谷歌搭梯子)

栅格化设计就是按照一定的规则把页面的宽度分成固定的相同宽度,然后列出各种组合的可能,以方便在进行页面呈现的时候能够快速的进行布局,界面设计 栅格化系统栅格系统英文为“grid systems”,开始是从平面栅格系统中发展而来,后在网页设计中被发扬光大,比较有名的栅格化系统如960GS,现在随着移动端的兴起,移动端设计也 有了很多这样栅格系统。

UI设计师工作必备的七个设计神器

Material Design是谷歌推出了全新的设计语言,这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

在Material Design中也有着一套完善的栅格化系统,我们再设计中可以使用这个栅格系统,帮助我们更加高效规范的进行界面设计。

这个栅格系统所有组件都与间隔为8dp的基准网格对齐,排版/文字与间隔为4dp的基准网格对齐。

UI设计师工作必备的七个设计神器

△ 界面设计栅格

UI设计师工作必备的七个设计神器

△ 布局设计栅格

UI设计师工作必备的七个设计神器

△ 图标设计栅格

配色神器  Material Design Color Swatches

(谷歌搭梯子)

配色是很多设计师头疼的问题,特别是一些新设计师在如何调色与配色上往往都是处理的不太好!那么下面这个插件将帮你解决这个问题!

UI设计师工作必备的七个设计神器

同样是来自Material Design,Material Design的配色方案更是艳丽无比,与扁平设计风格更是相得益彰。如果你还在担心自己的设计作品配色的话,那么下面这套Material Design的配色版插件,将彻底让配色变的无比简单了,妈妈再不用担心我的配色了!

这套插件可以轻松的安装到你的Adobe Photoshop 和 Adobe Illustrator 调色板,使用非常方便。

UI设计师工作必备的七个设计神器

碧玉刀 — 切图神器 Cutterman

UI设计师工作必备的七个设计神器

Cutterman是一款运行在photoshop中的插件,能够自动将你需要的图层进行输出。以替代传统的手工 “导出web所用格式” 以及使用切片工具进行挨个切图的繁琐流程。能够让你只需要点击一个按钮,就自动输出你需要的各种各样的图片,快到没有朋友!

输出支持IOS平台的单倍图、双倍图,支持IPHONE6/6P尺寸比例。

UI设计师工作必备的七个设计神器

输出支持Android平台的各种分辨率大小图片,什么XXHPDI,XHDPI,HDPI啊之类的,通通自动化输出,为你节省出更多的时间陪小伙伴好好玩耍。

UI设计师工作必备的七个设计神器

什么png、jpg、gif通通不在话下,还可以自己缩放、压缩大小呢。从此,就告别那个所谓的“存储为web所用格式”的功能啦~~

UI设计师工作必备的七个设计神器

图层太多?木关系!可以多选嘛!支持选中多个图层合并输出,也可以逐一输出的哦,简直方便到爆!

离别钩 — 标注神器 MarkMan

UI设计师工作必备的七个设计神器

马克鳗是高效的设计稿标注、测量工具,极大节省设计师在设计稿上添加和修改标注的时间,让设计更有爱。马克鳗使用起来也是非常简单,双击添加测量,单击改变横纵方向等等功能,基本都是一键完成。马克鳗是,可以跨平台使用,减少了在不同平台使用产生的一系列问题。

UI设计师工作必备的七个设计神器

△ 长度标记

UI设计师工作必备的七个设计神器

△ 坐标和矩形标记

UI设计师工作必备的七个设计神器

△ 色值标记

UI设计师工作必备的七个设计神器

△ 文字标记

霸王枪 — 预览神器  PS Play

UI设计师工作必备的七个设计神器

设计师在日常工作经常会遇到这种情况:电脑上的效果和移动设备上有差异,需要要频繁保存导出文件,通过数据线或其它网盘工具同步到手机PAD设备上进行预览,反反复复的非常麻烦……

那么现在来尝试一下腾讯ISUX给我带来的PS Play吧!

Ps Play是一个通过Wi-Fi网络,实时在终端设备上预览电脑上Photoshop的设计稿,可同步调试及截图保存到移动终端,并可以通过Email、微信等工具即时分享的跨终端应用。

多情环 — 圆角神器 CornerEditor

UI设计师工作必备的七个设计神器

这是一个极其简单的Photoshop插件,却极大的帮助我们解决了Photoshop形状的圆角问题。Corner Editor,出自Photoshop Scripts,我们把它称之为圆角编辑器,只要输入你想要的圆角半径数值,你就可以对任何形状的路径圆角随时的自由控制,编辑,调整。

拳头 — 字体神器  Roboto Font

(谷歌搭梯子)

拳法,原始最直接的武器,却蕴藏着数以千万种的变化的。

字体的设计正是如此,它简单直接,暴力却又很优雅,妙趣横生,气象万千!

最后推荐给你大家的这项神器也来自于Material Design,它就是Roboto字体。Roboto 是为 Android 操作系统设计的一个无衬线字体家族。Google 描述该字体为“现代的”“亲切的”和“人性化的”。

UI设计师工作必备的七个设计神器

Roboto有6种字重:Thin、Light、Regular、Medium、Bold 和 Black。

从极细到极粗,Roboto 字体有严谨的几何特性,有很强的现代感,纤细感显著;同时因为曲线和弧度,所以又很人性化。这种字体不单可以作为APP主字体来应用,并且作为一种设计修饰字体来使用,效果也是非常惊艳的!圆润清晰所包含的美学引领了干净、几何的设计哲学。

在中文系统中与之对应的字体为Noto,也包含6种字重。

UI设计师工作必备的七个设计神器

 

原文来自优设

 

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/31138/

(0)
CatherineCatherine
上一篇 2017-05-31 14:06
下一篇 2017-05-31 15:46

相关推荐

  • B2B、SaaS等企业软件中的交互设计总结

    我刚开始在VWO工作的时候,一直想弄清楚一个问题:企业软件(B2B)真的和B2C应用不一样吗?对于设计师或者设计流程来说,两者又有什么不同?这篇文章是我在过去几年里的一些经验梳理,希望能够帮助那些想去或者已经在企业软件团队工作的设计师们。一、什么是企业软件?下面是维基百科中的定义:企业应用是一种计算机程序,主要用来满足企业的需求,而非独立的用户。一些大家可能用过或者见过的企业软件在现代企业中,大多数企业应用是复杂、可拓展、分布式、模块化...

    2018-04-17
  • Android 和 iOS:两个系统交互设计的不同之处在哪?

    iOS 和 Android 的设计还有许许多多的不同之处,比如字体、Tab bar 设计、物理键操作方式、编辑模式、APP 体现个性的方式……在设计移动端产品的过程中,设计师们可以更多的去思考两者的异同,并且更多的关注一下 Android 系统独有特性的运用,不仅仅节省了开发成本,同时也更好的为 Android 用户所接受。1dp(Android)=1pt(iOS)
    以48dp@160dpi计算的话
    mdpi 48px (160dpi, 1x) 基础尺寸,已经非常少使用
    hdpi 72px (240dpi, 1.5x)低分辨率
    xhdpi 96px (320dpi, 2x) 同iOS @2x
    xxdpi 144px (480dpi, 3x) 同iOS @3x
    xxxdpi 192px (640dpi, 4x) 更大更高更强的分辨率

    2017-05-06
  • 用户体验至上 三星Pay与苹果Pay谁更胜一筹?

    文\孟永辉如今,移动支付市场早已过百家争鸣时代,深耕细作成为当下移动支付市场的主旋律,阿里和腾讯便是这主旋律的代表。虽然两大巨鳄占据移动支付市场大部分份额,但终端市场的支付竞争依然存在。苹果与腾讯就因为App端微信赞赏功能抽成的事情闹出矛盾,原因是两家公司对赞赏抽成的比例及支付渠道存在分歧。由此也不难看出,移动支付市场潜力巨大,想要成为移动支付大潮的弄潮儿,领略潮流之下的无限风光不仅需要强大的研发实力,还要有对市场运行趋势和规律的精准把...

    2018-03-30
  • iOS和Android规范解析——简易菜单、简易对话框和弹出框

    今天的这几个控件的中文名字,在网上查了半天,没有找到统一的叫法,所以自己翻译了一下:简易菜单对应的是MD(Material Design,下同)中的Simple Menu;简易对话框,对应的是MD中的Simple Dialog,弹出框对应的是iOS中的Popover。

    2017-05-02
  • 用户体验方向的复试炸药包

    喜大普奔,北师大终于出分数线了,虽然心理学部的院线还没有出来~但是过没过线,你心里应该没点Balance吗?对于没有参加提前复试的同学,对于接下来的复试,师兄在这里想灵魂拷问一番,准备好复试了吗?知道怎么准备吗?知道UX复试要考什么吗?别问我,我也不知道。但是作为去年参加过正常批复试而且成绩不低的老司机,我还是可以在这说两句的。(咳咳~全场都注意啦!)参加过去年提前复试的同学应该知道去年UX的复试变动很大,比之前两年灵活了很多,辅导机构...

    2018-03-07
  • 默认头像设计(1) —— 统一与丰富间的平衡

    头像设计,“统一”与“丰富”间的平衡。

    2017-08-04
  • 你的APP引导页,为啥用户会忽略?【UXRen译#159】

    作者:Anthony  |  翻译:冬柏,校审:小四   对于一个新的App产品来说引导页就是它的说明书。当新用户第一次使用时,就可以通过引导页简要的了解到整个App的特征,所以这对新用户来说是很必要的。 但是如果引导页…

    交互专题 2017-08-07
  • 一只设计师的工作小结:在想好之前,先克制你的表达欲

    我一直觉得做设计,其实是在克制,潜移默化是最好的。在你没有想好如何表达,最稳妥的做法是克制你的表达欲。

    2017-05-05
  • 结合实际案例,一篇看懂用户体验五个层次

    ♝点击上方“交互设计学堂”关注我们,送电子书看过了很多描述用户体验五个层次的文章,但感觉很多都浅尝而止,今天我特地结合了十来个案例对用户体验进行了一次相对全面的阐述,希望大家在阅读时也能够同样寻找相关产品进行比照和论证,想必会更有收获。概要用户体验设计就是“以用户为中心的设计”,即创造“每件事都按照正确的方式在工作”的用户体验,让用户宾至如归,就像《Don’t make me think》里提到的“这会让用户觉得自己更聪明,更能把握全局...

    2018-04-10
  • 2015年新起来的APP新贵们,进来瞅瞅都是什么APP在“火”!

    一时兴起,统计2015年以来新发布的,或是从2015年开始快速崛起的,日活稳定在20万+的APP,一共找到了16款。以下数据为粗暴的估算,不准确很正常,不准确憋找我! ┃视频类 熊猫TV,视频直播平台,CEO王思聪,200万量…

    2016-04-08