前言

目前全球前端(HTML5)技术栈主要使用VueReactAngular(俗称前端三大框架),国内Vue适用范围最广,React次之,Angular不推荐使用,中小公司一般使用Vue,相对来说最简单,React一般是大公司使用,上手难度高,性能最好,不过阿里巴巴是React框架推从者,工具链相对完善,下面就介绍了许多相关的工具网站。
目前团队属于成长阶段,使用的Vue技术栈(未来会尝试React),不过现在我们的技术栈和设计规范尽量遵守国内业界标杆Ant Design设计规范(蚂蚁集团出品,阿里旗下都在用),Ant Design提供完善的设计指引、最佳实践、设计资源和设计工具,来帮助设计者快速产出高质量产品原型,此规范特别适用于企业中后台系统。

蚂蚁集团的企业级产品是一个庞大且复杂的系统,数量多且功能复杂,而且变动和并发频繁,常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件,可以通过抽象得到一些稳定且高复用性的内容。 随着商业化的趋势,越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标,我们(蚂蚁集团体验技术部)经过大量项目实践和总结,逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观,通过模块化解决方案,降低冗余的生产成本,让设计者专注于更好的用户体验。

目前主流设计规范有3种,Ant Design(阿里)、Element(饿了么)、Material Design(谷歌),其中我们主要说前两种,Ant Design 首推的框架是React,Element首推的则是Vue,不过两个设计规范都有其他前端框架的实现,只是首推的框架功能最全,兼容最好,两者的一些组件都可以互相穿插使用。

产品

软件工具:Axure RP 9(Win、Mac都支持)
网页工具:

  • 蓝湖:高效的产品设计协作平台
  • 墨刀:远程办公好帮手 在线产品原型设计与协作平台
  • xiaopiu:产品原型设计与团队实时协作平台
  • figma:国外原型设计与团队协作平台

    Ant Design 设计资源

资源合集
https://ant.design/docs/resources-cn
Axure原型库
http://library.ant.design/
一套页面逻辑原型库
https://ux.ant.design/
xiaopiu原型
https://www.xiaopiu.com/topic/ant-design
墨刀原型
https://modao.cc/square/ant-design

Element 设计资源

首页
https://element.eleme.cn/#/zh-CN
资源合集
https://element.eleme.cn/#/zh-CN/resource

教程

语雀内容

BUMrWTTTteVZRGy.mp4 (37.35MB)

设计

软件工具:PS、AI、Sketch(Win、Mac都支持)
网页工具:

  • 蓝湖:高效的产品设计协作平台
  • Photopea:在线PS

    实际案例

市场人员根据客户口述给出的简陋原型。
image.png

产品出Axure原型,通过蓝湖客户端软件上传至蓝湖平台,通过分享跟客户和市场人员反复优化,确认原型后交给设计人员制图。

大屏首页.png
设计制图完毕,通过蓝湖PS插件上传至蓝湖平台,交给前端开发人员。
image.png

资源参考

Ant Design 介绍

https://ant.design/docs/spec/introduce-cn

Ant Design 设计资源下载

https://ant.design/docs/resources-cn

Ant Design Pro后台

https://pro.ant.design/index-cn

在线制作图表(阿里)

https://chartcube.alipay.com/

在线制作图表(百度)

https://tushuo.baidu.com/

首页模板集

https://landing.ant.design/index-cn