ui设计师需要掌握的技术有哪些-你不容错过的技术与设计知识点

本文作者把自己在工作中通过与不同设计、技术岗位的人接触，学到并掌握的相关设计、技术知识，以及沟通方面的经验和技巧总结如下，希望对大家有所帮助！

一、设计知识点1、概述

作为产品工作者，与设计师的合作是产品构建过程必不可少的一部分。

根据我在工作中和UI设计师、交互设计师等合作的经验和感悟，我想分享一些与他们友好高效合作，提高他们对你的认可度的“技巧”。

2、作者的“诀窍”包括了解设计理论、熟悉设计交付物、掌握各端的设计规范。

做到以上几点，不仅可以让你在设计产品时更加美观、更加注重人机交互；也会让你在与UI设计师、交互设计师的沟通中更加安心、更有力度，更容易获得更高的认可和信任！

3.了解设计理论知识

每个行业都有对应的行业理论知识，UI设计、交互设计都有对应的设计理论知识，作为产品设计师的你我都应该了解这些知识。

它不仅帮助我们在思考产品的时候更有针对性，还能帮助我们与设计同事达成共识，更好更快地推进产品进程。

那么，产品设计师需要了解哪些设计理论知识呢？

作者总结如下：

平面设计理论知识：标志设计、色彩设计、字体设计、平面版式设计等；界面设计理论知识：网页设计、移动设计等；交互设计理论知识：网页交互、移动交互等。

如今信息畅通卡通人物，资源丰富，有很多书籍和网站可以用来学习和了解上述设计理论知识，以下是笔者阅读过的一些相关书籍和常用的设计网站资源：

平面/界面设计书籍：《Logo设计》、《色彩设计》、《字体设计》、《网格系统-平面设计中的网格设计》、《品牌至上》、《西文字体》、《人人都懂的设计书》、《人人都懂的设计书》等。交互设计书籍：《触动人心：设计优秀iPhone应用》、《点石成金：访客至上的网页设计秘诀》、《小指尖：移动设计实用手册》、《在你身边，为你设计》、《用户体验要素》、《设计心理学》、《瞬间之美》、《绚丽蓝图》、《关于Face3交互设计精髓》、《UCD火花集》、《交互设计冥想》、《情感化设计》、《简单至上》、《赢在用户》等。设计网站资源：Dribbble、Behance、站酷、UI中国、花版、Iconfont、前途网、尼图网、英雄创意等。

通过了解这些知识，在实际工作中能给我们产品工作者带来什么样的帮助呢？笔者总结如下：

1）建立一套相对丰富、系统的设计理论知识

它可以帮助我从零开始把控产品设计整个过程的设计水平；从界面到交互，我会基于理论知识有自己的理解和思考。

这样保证设计出来的产品有理论支撑表情包设计，能先让自己信服。

2）增加信任

产品设计师在交付原型或者不同阶段与设计同事沟通时，能够以专业的角度、平等的身份进行交流。

例如：产品人员交付的原型，界面间的链接逻辑，功能间的跳转等交互，界面的基本布局等。

为什么要这样设计？从整个产品到一个控件，都能解释出相应的原因和设计依据。有了足够的理论知识支撑，才会更有说服力，不会给人一种凭空想象般的自我满足感。

3）与平面设计同事沟通时（有的公司没有单独的平面设计岗位，也是由UI设计师担任），主要关注产品logo设计、产品相关宣传册设计、宣传海报设计等。

如果你了解一些平面设计的理论知识，那么当你与别人交流的时候，就不会出现信息不对称的情况，也不会显得不专业。

例如：在沟通logo设计的时候，可以提供一些设计参考。

参考文献可以是：

色彩搭配要和谐，契合产品定位和行业属性，无论是图形标识，图文结合，还是文字标识都是必须的；宣传册设计时，可以对封面（首页）设计、版式、主题色选择、内容页版式样式、图文搭配比例等提出想法；宣传海报设计，需要对不同场合的尺寸、样式、版式有明确的要求。

当然，能够引导设计师充分发挥自己的能力，创作出超出预期的作品，也需要基于设计理论的探讨。

4）与UI设计同事沟通时，主要针对产品界面配色，界面布局等进行交流。

如果你能了解网页、移动等硬件终端的UI设计理论知识，你与设计师的沟通效率和执行效果将会大大提高。

比如：对于网页UI设计，你可以对网页的色彩搭配，不同的字体大小，不同的网站布局风格，网格系统理论，格式塔原则等有一定的了解；并且结合你对产品的了解，你会有一定的设计思路。

对于移动端UI设计，需要对不同终端的字体设计单元、模块之间的间距规则、按钮大小、行间距、元素间距、启动页、广告banner、网格系统、格式塔原则等设计知识有一定的了解。

5）与交互设计同事沟通时，主要关于产品界面之间的交互逻辑，控件之间的交互逻辑等。

如果你能了解网页及移动端UI设计的理论知识，你与设计师的沟通效率和执行效果将会大大提高。

例如：网页端的交互设计都是基于鼠标点击，滚动等操作。

产品设计师需要对页面滚动方式、模块滚动方式、按钮默认、浮动、不同的点击状态以及控件点击后的反馈形式（弹窗、toast、定位、新页面等）的设计有一定的了解；对于移动端的交互设计，是基于用户手指的滑动、点击、长按等操作来进行的。

产品设计师需要对页面滑动、模块切换、不同按钮状态（默认、点击、长按、禁用等）、控件点击后的反馈形态设计（弹窗、toast、定位、新页面等）有一定的了解。

4. 熟悉设计交付成果

如同产品设计岗位一样，每个设计岗位也有相应的设计交付物需要产出，笔者意图讲解的不仅仅是结果导向的交付物，还有一些在与设计合作过程中以过程为导向的交付物。

对此，笔者总结如下：

1）基于结果的交付成果

UI 设计视觉模型。

UI设计师根据产品设计师提供的原型，对设计文件进行进一步的美化，包括配色、布局、控件、弹窗、横幅、不同内容字体大小的设计等。

作为产品设计师，需要熟悉这些元素，并能在设计原型文件时结合自己对表现层的思考，分析UI设计师制作出来的视觉稿交付物是否符合预期，甚至超出预期。

这些判断能力是必须的（UI设计师需要配合输出视觉设计规范，产品设计师可以就这个文档和设计师进行深入的讨论）。

2）基于结果的交付成果

交互设计稿。

UE设计师（用户体验/交互设计师）会根据产品设计师提供的原型图、需求文档进行交互设计（也有可能是产品人员也兼任交互设计师）。

包括页面之间的跳转、跳转方法、跳转等待期间的动画的设计；跳转失败的提醒、页面滚动或滑动窗体、弹出动画的设计；页面加载动画、控件点击动画等。

这一系列的动效设计除了看外观（呈现方式）之外，还需要深入了解其实现方法和具体参数。

比如你点击一张图片并放大查看，虽然点击后的动画和放大是一样的，但其实UE在设计上花的心思往往不容易被你察觉到。

即使点击放大查看效果，不同的动画节奏和运动曲线也会导致细节上出现明显的差异。

你需要和交互师讨论动效的组成部分，每个部分的意义，动效曲线怎么设计，慢进慢退需要的时间等等，甚至可以结合理论知识通过动效网站、动效设计软件来仿真效果，并与UE进行深入交流。

3）流程交付成果

图标资源。

不管是网页端还是移动端，图标资源是必须要制作的。

作为产品人，需要熟悉图标风格的要求和评价，是否贴合产品主题，风格是否统一，图标是平面的还是线状的，不同终端的图标输出格式（移动端一般需要5个不同倍数的图标进行适配）。

4）流程交付成果

点击 9 张图片。

点九图是移动端设计中一种特殊的输出文件（开发者也有点九图制作工具），一般用于需要保证元素在纵向或横向拉伸时不变形的情况，比如一个不规则的聊天框，随着文字增多，会变长或变宽，如果不做成点九图，就会造成变形、边缘模糊等问题。

所以，掌握点9图的知识，懂得制作点9图，或者能自己制作点9图，也是一项很好的技能。

5.掌握各端子的设计规范

各个端都有自己对应的设计规范，一般都是由UI设计师来制作，产品设计师能够熟悉这些规范，对于协作以及评估规范的严谨性有很大的帮助。

根据不同的终端属性，可以分为网页UI设计规范和移动端UI设计规范，设计规范一般需要包括：

1）色彩设计规范

所用颜色的种类，原色和间色的组合；

2）文字颜色标准

所用文字的颜色，不同的应用场景要搭配相应的颜色，一级标题、二级标题、内容、提示、备注等；

3）文字大小标准

所用文字的字体大小（字号）。不同的应用场景要搭配相应的字体大小，一级标题、二级标题、内容、提示、备注等；

4）ICON规范

所采用的图标设计规范，不同的应用场景，不同颜色的图标，无论是平面还是线型ui设计师需要掌握的技术有哪些，都需要相对统一、系统化；

5）控制设计规范

包括输入框、按钮、滑块、页卡、开关等控件。同一类型的控件需要有统一的设计规范，形成一个体系。

6）间距设计规范

同一类型的间距在不同页面的大小需要统一、符合规则；

7）交互设计规范

包括滚动、滑动（上下/左右等）、点击反馈、弹窗特效等交互设计，同一场景的交互风格需要保持一致。

二、技术知识点1、概述

今天，作为一名产品工作者，你是否还在疑惑开发一个产品是否需要懂技术？

那我可以肯定的回答你：是的！

为什么？

产品创意或者用户需求的实现，离不开技术的实现，没有技术，创意只是空中楼阁，更别提后续的操作等等。从技术的重要性，我们也能体会到懂技术是多么的重要和必要。

在产品工作流程中，为了将想法和需求落实到技术实现，需要与不同端的技术人员协作，包括：前端研发人员、后端研发人员、数据库设计师、算法工程师、数据工程师、运维人员、架构师等。

你需要合作的技术人员越多，你需要了解、学习和掌握的相关技术知识就越多。根据我在工作中与这些技术工程师合作的经验和感悟，我想分享一些作为产品工作者应该掌握的技术知识。

2. 作者的理解

1）了解相关技术知识

2）总结技术交流思路

3）“干涉别人的事”是不可取的

这样不仅能让你在设计产品时能够发散思维，还能从技术实现的角度考虑问题；在面对领导或客户关于技术实现或项目工期估算的问询时，能够结合团队的技术力量，拿出可行、可靠的解决方案。

同时，在和各端研发工程师沟通时，你不但能从产品设计的角度把控方案，还能从技术实现方式、方案等方面进行深入探讨；包括技术方案的可行性，以及在实施有困难的地方能否评估突破、采取替代方案！

3.了解相关技术知识

每一种技术都有各自的开发语言、框架、工具等，这些开发语言、框架、工具就像工程师手中的刀剑，帮助他们攻城略地。

工作中我接触到的工程师以及他们的相关技术知识包括：

上面列出的技术知识（并非详尽）并不要求产品人员能够像研发人员一样通过编译器进行实际的编码工作，而是希望他们能够理解这些知识，知道它是用来做什么的、解决什么问题；最好能看懂简单的代码，熟悉一些语言和工具。

例如：

1）对于一些Web前端代码，可以使用F12调试工具进行简单的代码调试，代码查看，甚至分析问题，即使看不懂，也可以反馈给研发人员进行定位分析。

2）针对一些后端代码设计逻辑，可以在研发人员的编译器中查看源代码，与研发人员一起分析产品设计层面的思路，在研发实现过程中出现不一致时定位问题并进行修正；

能够通过编写常用的SQL语句进行数据查询和分析（复杂的也可以通过渠道快速解决），比如：一些简单的数据统计，总用户数，日活跃/月活跃用户等。

虽然现在可以通过第三方数据统计平台、自建统计系统等方式来实现各类数据的统计分析，但是能够直接从数据库层面获取数据信息是一项很好的能力ui设计师需要掌握的技术有哪些，特别是在产品早期，还没有接入或搭建这些现成的可视化分析平台的时候。

3）了解一些语言之间的差异，以便在选择和评估技术时知道原因；

例如在决定选择MySQL数据库还是Sqllite数据库的时候，可以根据实际情况和研发人员一起评估。

Sqllite数据库对于小数据量的数据处理效率很高，但是由于其是单线程的处理方式，所以在数据量很大的时候，处理效率会明显下降，远远不如MySQL数据库的多线程处理效率。

4）了解大数据量、高并发场景下的数据处理技术；

例如在消息处理方面，Kafka是一个高吞吐量的分布式发布订阅消息系统，它在大数据研发应用中的目的是通过Hadoop的并行加载机制统一在线和离线的消息处理，并通过集群提供实时消息。

5）了解git和svn的区别。Git是一个分布式版本控制系统，以元数据的形式存储数据。现在很多互联网公司的研发团队都使用git进行版本控制。

SVN是一个集中式版本控制系统，数据以文件形式存储，与git的分支不同。现在很多公司都使用SVN进行版本控制，包括团队内部文档版本的集中管理。

当然你需要了解的技术知识远不止我上面提到的这些，以上只是举几个例子。

那么，我们可以通过什么渠道来获取相关的技术知识呢？

如今信息畅通，资源丰富，学习和了解上述技术知识的渠道非常多，下面列出一些我经常使用的技术网站资源（看过的书我就不一一列举了，大家可以自行搜索不同语言的相关书籍）：

学习网站：w3cschool、新手教程、慕课网等；工具/资料网站：掘金、StackOverFlow、知乎、博客园、CSDN、V2EX、开源中国等。

通过这些网站，你可以快速、系统地了解一门语言及其相关应用的基础知识和最新发展动态。

在实际工作中，如果在与研发人员交流的过程中，遇到了一些新的知识点或者技术问题，可以默默记下来，通过这些网站搜索相关的技术帖子，获取相关知识；这样不仅可以增加自身的技术知识储备，还可以不断拓宽和加深技术交流内容的广度和深度（全面性和细节性）。

通过这些技术帖，你可以了解到前沿的技术知识，拓展自己的技术视野，紧跟研发人员的技术触角。

3.技术交流思路总结

产品岗位需要和很多不同终端的研发人员接触、交流，这些交流可能发生在不同的场景：如技术选型、技术方案讨论、技术实现与产品设计的分歧、技术评审、技术分享等。

这些沟通思路看似零散，其实都是有关联的，每个人的理解可能不一样，总结出来的思路也可能不一样。

这里我仅分享一下个人的理解，总结如下：

1. 记住“沟通公式”

就像下围棋一样，再复杂多变的棋局也有自己的套路，在围棋中被称为“固定模式”。我将其运用到与技术沟通的过程中，也有一些“沟通固定模式”是产品人员在沟通前可以考虑的。

这些“模式”包括类似问题的解决方案，以及可以针对出现的问题进行的相关思考。

例如：

当技术实现逻辑出现问题时，我们可以反馈给技术人员，询问问题是否出在代码实现的逻辑上，帮助技术人员快速定位问题；

当输入的内容验证错误时，我们可以推断问题的原因可能是验证规则有误或不完善，甚至是需要优化的规律判断，并向技术人员提供相关思路；

当各个页面资源都需要等待每次加载完成的时候，可以推断技术实现没有采用缓存机制或者异步加载机制；

当登录访问失败的时候，如果不是网络问题，可以推测是接口down了或者是后端服务器有问题；

页面加载信息资源，但是没有返回数据，可以推断是数据请求接口有问题。

2. 找到合适的“专家来帮忙”

学会借势是工作中必不可少的技能，这里只分享和研发沟通时如何借势，借势就是借助高人的“气势”来帮助自己解决问题。

有时候，和研发人员沟通，我们势必会遇到“硬汉”。这不一定就是指研发人员，更多的时候是指问题比较棘手，我们所了解的那点技术知识根本无法覆盖对方的情况。这时候，为了打破僵局，你就得学会寻找能解决问题的人，这个能解决问题的人可能是项目经理、技术负责人等等。

但最终谁能解决问题，取决于你对他们的技术能力和涉及领域的了解，以及你和他们的关系。这些在关键时刻会很有用！

3. 走出“僵局”

工作中遇到的问题不一定都能立刻得到解决，很多时候需要仔细思考、反复讨论，才能找到解决方案。

和研发人员的沟通也一样，无论是在正式的会议中，还是在解决针对性的问题时，如果讨论后短时间内无法给出解决方案，那么就要能够及时跳出来，摆脱“僵局”，释放资源，将问题放入稍后解决的“池子”中。

4. 不宜“干涉他人事务”

记住：别干涉别人的事！

不要以为自己掌握了一些相关的技术知识，然后就一门心思地去做技术。这样做不仅会让你的同事反感，他们会认为你过多地干涉他们的专业领域并指手画脚，而且会让你在思考产品时不自觉地受到团队技术能力的限制。

所以把握好分寸更为关键也更为重要，毕竟了解技术知识是为了帮助我们做出更好的产品，更好的配合研发，这些都需要大家在实际工作中灵活应对。

五、结论