• 外婆家中餐厅,杭州 / 啊嗯设计

  • 2021 年第 46 届世界高山滑雪锦标赛官方 LOGO 发布

  • Common Curiosity 平面设计作品

  • Jony Ive 重新执掌苹果设计大权是一件好事,但变化可能不会有想象的那么大

  • 有着 300 多年历史的马爹利 (Martell)换了 LOGO 和新包装

  • 情怀永驻还是一锤子买卖——也看罗永浩与锤子品牌

  • Chat with Zeepin Co-Founder Shenbi Xu about the CREATIVE SMART ECONOMY

  • Zeepin’s meetup ended up with bang-up success in Singapore today!

  • Utopian Wonder and Promising Future for Creative Industry

  • 凹凸桌

  • 全自动马桶 catolet 爱宠人士必备

  • PESI studio 打造 creative square 系列 日常家具背后的无线充电技术

  • THIS IS IT 打造温馨小家 轻型家具与交织材料的碰撞

  • 众望所归 谷歌汉堡 emoji 终于正常了

  • 3D 打印塑料袋 摇身变城市家具

  • 餐厅与产品的用户引导设计

  • 三星 Bixby 正式发布,全新 LOGO 设计体现“真爱真 Ai”

  • 亚马逊正式发布全新 Kindle Oasis,也是给 Kindle 诞生 10 周年的庆生

设计

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

贡献者: 铁菇马力 来源:优设 时间:2年前 热度:

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

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

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

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

长生剑—排版神器  Material Design Grids

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

20sq20151202.jpg

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

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

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

19sq20151202.jpg

△ 界面设计栅格

18sq20151202.jpg

△ 布局设计栅格

17sq20151202.jpg

△ 图标设计栅格

配色神器  Material Design Color Swatches

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

16sq20151202.jpg

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

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

15sq20151202.jpg

碧玉刀—切图神器 Cutterman

14sq20151202.jpg

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

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

13sq20151202.jpg

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

12sq20151202.jpg

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

QQ20151202222845.png

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

离别钩—标注神器 MarkMan

9sq20151202.jpg

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

8sq20151202.gif

△ 长度标记

7sq20151202.gif

△ 坐标和矩形标记

6sq20151202.gif

△ 色值标记

5sq20151202.gif

△ 文字标记

霸王枪—预览神器  PS Play

4sq20151202.jpg

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

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

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

多情环—圆角神器 CornerEditor

3sq20151202.jpg

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

拳头—字体神器  Roboto Font

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

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

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

2sq20151202.jpg

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

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

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

1sq20151202.jpg

via:优设 

Arting365 新版官网:http://arting365.com


 

铁菇马力

没有个性签名

评论 条回复
扫进你口袋
微信搜索Arting365design 或 扫描二维码

推荐阅读

© 2017 Arting365 Corporation, All right reserved / 沪ICP备05004653号