恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
如何高效进行网页设计?你也许会对这几个工具感兴趣
0.0°
2018-12-11 原创文章 经验/观点 举报 2140 2 6 0

网页设计软件的选取,主要还是看你的使用场景,是静态的,还是动态的,是单个页面/活动页的网页设计,还是整个网站的网页设计,所用软件/工具当然是不一样的。


下面小编根据不同的使用场景,不同的使用方法,来推荐不同的网页设计工具,帮助各位小伙伴快速选取智能的设计工具。


静态单页面设计


对于静态的单页面设计,没有动效,没有交互,实现起来也相对比较简单。请看各路神仙的神操作及设计利器。


方法一:


工具:手机美颜/美图秀秀/PS


直接选择一个现成的模板,替换了图片、文字,然后就上线了,高级一些的用PS处理下图片,更有直接盗图的。


当然了作图软件推荐PS,不会的选用其他图片处理软件,可跳过此段。


网页设计软件-PS

Image title

Photoshop是最流行的图像编辑器之一,UI设计师入门的必备界面设计工具。相信不是设计行业的小伙伴,也略知一二。


PS作为UI界面设计神器,也是必备的网页设计软件,有着强大的图片编辑和处理功能,想要什么的图形都可以用PS来实现,可用于摄影的后期制作,可给图像添加各种滤镜,调整亮度,对比度等,生成高分辨的图形。


PS:如果要制作图标,需要用到矢量绘图软件AI来制作,这样放大才不会失真。


方法二


工具:PS+上线了


直接用响应式的网页设计软件,比如像是上线了这样简单的响应式建站工具,你只需要选择喜欢的模板,然后稍微调整下不同模块的布局(顺序)就可以做出一个很漂亮的网站。

2网页设计工具-上线了

模板化建站就会千篇一律吗?在上线了,你可以看到无数的人在十分钟之内就搭建出了一个独特的网站,并且完全不需要学习代码。

模块化建站

如今动态网页设计在网页设计中的应用已经越来越广泛,而且国内许多公司开始重视动态网页设计。动效在UI设计中的应用其实比我们想象中的还要强大,好的动效设计可以给用户提供一个良好的视觉感受,从而加强与用户之间的交互体验。

Image title

动效设计,需要页面交互,组件交互,甚至动画的制作,相对复杂,要用到的网页设计软件也会多一些。


网页设计软件常用搭配:原型设计工具+动画制作工具+协作工具


1. 网页设计软件——原型设计: Sketch /Invision/ Mockplus/


1) Sketch

网页设计软件-Sketch

但只支持Mac,其他系统请绕道。


Sketch是一款强大的界面设计工具,专为UI设计师打造的软件,可让你的界面设计变得更简单,更高效。如果你是一个UX或者UI设计师,那么你一定知道Sketch这个强大的UI界面设计软件。


如果你想转行做UI设计师,那么你一定不能错过这个好用的设计工具。


2)Mockplus

网页设计神器-Mockplus

国产软件Mockplus,这个工具是我在UXTOOLS看到的推荐。Mockplus提供丰富的交互设计和页面切换功能, 设计师简单点击或拖拽即可实现交互动画的添加,操作简单,就是界面是手绘风格。


动态网页设计教程:https://www.mockplus.cn/blog/post/1116


3)InVision


网页设计工具-Invision

InVision是一款基于网页的在线原型设计和协作工具。 设计师上传已设计好的页面,为其添加热区,完成多样的原型交互动画。


但是,由于此款在线原型工具并不支持界面或UI部件的直接制作或编辑,设计师更多的将其作为原型演示工具,而非原型制作工具。


2. 动效制作工具推荐


AE-强大的动效视觉处理软件

动效设计工具-AE

AE是Adobe After Effects的简称,是Adobe公司推出的一款关于图形和视频处理的界面设计工具。


AE这款界面设计工具可以帮助UI设计师对图像视频进行任何特效处理,是一个灵活的基于层的2D和3D后期合成软件。


AE包含了上百种特效及预置动画效果,可与Premiere,Photoshop,Illustrator等软件无缝结合,创建无与伦比的视觉效果。


推荐几个动画库:


①. ANIMATE.CSS

Animate.CSS是一个国外的CSS3动画库,它的动画库有多达60种动画效果,几乎包含了所有常见的动画效果。借助这个动画库,设计师可以轻松、快速制作出CSS3动画效果。


②. MAGIC ANIMATIONS

Magic Animations 动画是一个独特的CSS3动画特效包,设计师可以在自己的网站项目中自由地使用,只需简单的在页面引入 CSS样式: magic.css 或者压缩版本magic.min.css 就可以了。


③. BOUNCE.JS

Bounce.js是一款功能非常强大的可视化CSS3动画代码生成js库插件。可以在可视化的条件下编辑CSS3的各种动画效果。此外,Bounce.js还可以单独使用,通过js代码来完成各种CSS3动画效果。


3. 协同软件


 Zeplin-强大的协作工具

网页设计协同工具-Zeplin

专为UI设计师与开发工程师量身打造的协作型界面设计工具。作为一名UI设计师,你需要把你的设计传达给开发团队,而Zeplin的设计是为了实现这一目标。


iDoc

网页设计协作软件-iDoc

iDoc操作很简单,设计师直接从Sketch/XD/PS上传制作的设计稿,前端工程师可以直接在面板右侧会直观的看到每个元素的大小,颜色,边距,甚至可以直接导出样式代码。


另外,UI设计师还可以直接在UI界面上给开发人员添加注释,标记,备注等。填补了产品、开发与设计之间的沟通障碍,为设计师和开发人员节省了大量宝贵的时间。


你不知道的神操作模式


产品根据目标用户设置好原型,交由美工配色优化后,交由产品开发。产品和美工共用Mockplus,精简版的人员配置:产品+美工+前端


如果上述人员配置和操作已经让你吃惊的话,接下来请屏气凝神。


缩减用人成本后就是:前端+美工共用Mockplus,前端画原型,美工配色,前端开发,如下图:

网页设计软件-Mockplus

神配置就是一个工程师,一个人全搞定,你见过么?


小结:


以上不同配置,不同网页设计软件,各位小伙伴按需索取。在智能的时代设计智能的产品,我们当然不能用石器时代的工具,虽然有些夸张,但是我们的时间更宝贵,不是么,更好的搭配,更高的效率。


福利分割线


摹客给大家带来福利哦,打开https://idoc.mockplus.cn/get-idoc,注册后输入福利码 freepassword 免费升级摹客idoc协作版哦。

更新:2018-12-11

收藏

2人已收藏

摹客设计云

设计1+2,摹客就够了!

  • 576

    作品

  • 859

    粉丝

  • 6

    关注

  • 【摹客RP会员日】狂欢来袭!终身版团购低至5折!
  • 摹客RP买一年送一年!这波钜惠只剩最后5天!
  • 摹客RP,个人空间全新上线,享沉浸式设计体验!
  • 产品经理需要了解的前后端技术知识
相关标签

    猜你喜欢

      2018-12-11 原创文章 经验/观点 举报 2140 2 6 0

      如何高效进行网页设计?你也许会对这几个工具感兴趣

      0.0°

      你确定要举报如何高效进行网页设计?你也许会对这几个工具感兴趣

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年12月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      6
      2
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录