如何做好产品经理和如何学习UI

谁践踏了优雅 2023-06-23 15:23 99阅读 0赞

在软件设计阶段，交互设计师或者产品经理等常常需要使用一些工具（比如Visio、Axure RP、Flash或者OmniGraffle，UIDesigner,墨刀等）制作出静态稿或者原型来表达设计思想。这些工具是各有各的优势，当然也各有各的缺点。

## 1 Axure的web产品原型设计 ##

Axure RP是一款便捷高效的网页制作工具。是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理

Axure可以快速的画出我们想要的原型，同时他还可以生成HTML文件.

使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等，另外，架构师、程序员也在使用Axure

参考网站：[https://www.axure.com.cn/resource/][https_www.axure.com.cn_resource]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu_size_16_color_FFFFFF_t_70]

##### \-----------------------------------用来做方案设计---------------------------------------------------------- #####

## 2 墨刀的web产品原型设计 ##

墨刀是一款在线原型设计与协同工具，借助墨刀，产品经理、设计师、开发、销售、运营及创业者等用户群体，能够搭建为产品原型，演示项目效果。墨刀同时也是协作平台，项目成员可以协作编辑、审阅 ，不管是产品想法展示，还是向客户收集产品反馈，向投资人进行Demo展示，或是在团队内部协作沟通、项目管理。

##### 支持平台 #####

浏览器注册使用， Windows、Mac 桌面客户端，同时支持 iOS、Android 端预览

## 3 UIDesigner产品设计工具 ##

目前接触：1.1.1.0和1.0.0.0版本工具

IDesigner除了能让使用者能够快速地搭建起软件界面的高保真原型外，还提供了项目管理，让使用者能够方便地管理工程文件；提供了图片库和模板库功能，让使用者可以方便地重用以前的设计资源；提供了32个Windows客户端软件常用控件，满足使用者的设计需求；提供了多个属性设置入口，分别实现最常用属性设置、一般属性设置和高级属性设置功能。当然，UIDesigner不是专用来设计QQ的，其它的Windows客户端产品都在它的工作范围之内。总的来说呢，使用UIDesigner来制作原型是很高效的，而制作出来的原型也能够实现设计师、产品经理和程序开发工程师三者间的快速沟通，减少不必要的工作内耗。

以兼容和管理员运行该软件进行使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20200114113547455.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu_size_16_color_FFFFFF_t_70 2]

## 4 Visio流程图专用设计工具 ##

Office Visio 是office软件系列中的负责绘制流程图和示意图的软件，是一款便于IT和商务人员就复杂信息、系统和流程进行可视化处理、分析和交流的软件。使用具有专业外观的 Office Visio 图表，可以促进对系统和流程的了解，深入了解复杂信息并利用这些知识做出更好的业务决策。

## 5 其它UI工具 ##

photoshop、AI、AE、Axure、Fireworks、CorelDRAW、Flash等

#### （1）photoshop ####

建议使用较新的版本的软件，新版本的功能更加全面。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。

#### （2）AI ####

全称Adobe Illustrator是一款多媒体、在线图像和出版的工业标准矢量插画的软件。在生产多媒体图像的艺术家、专业插画家还是生产印刷线稿的设计者、或者是互联网页、在线内容的制作者，都不否认Adobe Illustrator不仅是艺术产品工具。也为线稿提供了无与伦比的控制以及精度。矢量图方大放小不会变形这是ai的优势，很适合扁平。劣势是ai不能切图，对于虚拟化的图标处理不是很好。

作为一款非常好的矢量图形处理工具，该软件主要应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面的制作等，也可以为线稿提供较高的精度和控制，适合生产任何小型设计到大型的复杂项目。

#### （3）AE ####

Adobe After Effects简称“AE”是Adobe公司推出的一款图形视频处理软件，适用于从事设计和视频特技的机构，包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室。属于层类型后期软件。

#### （4）Axure ####

Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。

Axure RP的使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等，另外，架构师、程序员也在使用Axure。

#### （5）Fireworks ####

由Macromedia（在2005年被Adobe收购）推出的一款网页作图软件，软件可以加速 Web 设计与开发， 是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。Fireworks 不仅具备编辑矢量图形与位图图像的灵活性， 还提供了一个预先构建资源的公用库， 并可与 Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和 Adobe Flash软件省时集成。 在 Fireworks中将设计迅速转变为模型， 或利用来自Illustrator、Photoshop和Flash的其它资源。 然后直接置入Dreamweaver中轻松地进行开发与部署

#### （6）CorelDRAW ####

CorelDRAW Graphics Suite是加拿大Corel公司的平面设计软件；该软件是Corel公司出品的矢量图形制作工具软件，这个图形工具给设计师提供了矢量动画、页面设计、网站制作、位图编辑和网页动画等多种功能。

#### （7）Flash ####

Flash是由macromedia公司推出的交互式矢量图和 Web 动画的标准，由Adobe公司收购。做Flash动画的人被称之为闪客。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。

#### （8）Mockplus-强大的原型界面设计工具 ####

Mockplus是一款高效简单的app界面设计工具，产品经理圈子中比较流行的一款国产界面原型设计工具。软件提供了封装好的3000多个图标以及200多个组件，拖拽即可进行UI界面设计，学习成本低，无需代码参与，所以对于UI设计师来说是一个非常好的选择。

Mockplus最近发布的一款摹客设计系统（https://ds.mockplus.cn/）可谓是给UI设计师提供的一大福利了，该系统提供标准色、标准字、图标、布局等等这类大纲，几乎囊括了一份设计规范文档该有的所有内容，并且支持Sketch插件，意思是设计师们可在Sketch中一键复用你自己的设计规范，节省了大量的操作时间。

参考资料：[https://blog.csdn.net/weixin\_33883178/article/details/89585622][https_blog.csdn.net_weixin_33883178_article_details_89585622]

#### （9）Zeplin-强大的协作工具 ####

为UI设计师与开发工程师量身打造的协作型界面设计工具。Zeplin操作很简单，设计师直接从Sketch上传制作的UI界面设计，应用会自动生成一些注释，在面板右侧会直观的看到每个元素的大小，颜色，边距甚至是某些元素的代码信息。

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

#### （10）UI辅助升华工具-Dreamweaver ####

Dreamweaver是一款网页代码编辑器，帮助设计师和程序员快速制作和进行网站建设。UI设计师不仅仅需要掌握一些界面设计工具，还需要学习和了解一些前端的布局和设计，才能够更好的配合前端工程师们做好产品开发的工作。

注：以上资料参考百度百科和CSDN博客进行笔记整理，如有侵权请联系我更正。

## 常用UI设计参考网站 ##

去behance, 站酷，花瓣， ui中国， 甚至包括500px 多看看。了解别人色彩是使用和搭配，为的就是让自己变得跟优秀的人同样优秀

## 产品经理定位 ##

前端工程师是一个利用 HTML、CSS、JavaScript 等技术开发网页，向用户提供内容展示及交互的职业，UI设计师是利用视觉和美好效果便捷性提供方案。产品经理是即懂前端，又懂UI设计，能懂用户需求，还懂编程开发的复合型人员。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu_size_16_color_FFFFFF_t_70 3]

以下参考推荐职场发展： [https://blog.csdn.net/raptor\_ca3/article/details/79801616][https_blog.csdn.net_raptor_ca3_article_details_79801616]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu_size_16_color_FFFFFF_t_70 4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu_size_16_color_FFFFFF_t_70 6]

[https_www.axure.com.cn_resource]: https://www.axure.com.cn/resource/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200114113407624.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200114145230179.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu,size_16,color_FFFFFF,t_70
[20200114113547455.png]: https://img-blog.csdnimg.cn/20200114113547455.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020011411374643.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_weixin_33883178_article_details_89585622]: https://blog.csdn.net/weixin_33883178/article/details/89585622
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200114155034293.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_raptor_ca3_article_details_79801616]: https://blog.csdn.net/raptor_ca3/article/details/79801616
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200114155632157.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020011415565111.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200114155724421.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RhbmRlbGlu,size_16,color_FFFFFF,t_70