那本编文章虐虐就工作以及个人理解整理出一份小总结和建议，帮助大家理解ui跟美工的区别。

本文篇幅过长，不喜欢勿喷~

• 工作中的注意事项
• 
  
• 提升自己的小知识
• 
  
• 组件化框架思维
• 
  
• 软件的使用

工作中的注意事项

1.需求务必确认时间节点

时间节点概念比较宽泛， 它通常包括了一个需求从确立到上线之间所有产研人员的介入、评审、交接等节点。

这里主要指我们设计师最晚提交视觉稿的时间。

时间节点对于整体项目的进度来说是非常重要的，而且我们设计师也可以根据节点来判断事情的轻重缓急，这样可以大大的提高我们的工作效率。

一旦设计师没提前确认时间节点，很容易在左一个需求，右一个需求中迷失甚至遗漏，一旦是特别重要、紧急的需求，失责这个锅基本得我们自己背了（原地爆炸吧）

这也是我的亲身经历，我们项目商城中有一些缺失页面，在加上我当时还在跟进官网，在加上那个项目不是我负责的，所以我没有问缺失页面的节点时间，先紧着官网来，后来指导开发人员催我，我才知道原来商城已经要收尾了，所以急要！！我....

最后的结果就是大家都等着我完成缺失页面，在开工。（尴尬到死的那种，心态爆炸）

所以我之后会在每一个需求的时候都问好时间。

最近看到好的时间管理方法分享给大家：四象限法则

这个法则基于事情的紧急程度和重要程度将所有事情分为了四个象限，而其中的紧急程度就是通过时间节点这个东西来衡量。

• 紧急且重要的需求，它们是当前就需要被完成的，而且不可怠慢轻视，这些需求通常需要被放在第一优先级。

  
  

• 紧急但不重要但需求常见于一些营销活动的banner设计，通常来说它被放在第二优先级，但是由于重要程度低，所以我们尽量分配少量的精力。

  
  

• 不紧急但是重要的需求常见于我们自己发起的一些优化、改版需求，由于各种原因可能排期到最后面，这部分需求需要我们随时抽出时间进行分析和讨论。它被放在第三优先级，虽然不紧急，但是需要我们去投放大量的精力，甚至比第一优先级要高。

  
  

• 不紧急且不重要的需求能拒就拒吧，即便拒不了也尽量投放最少的时间迅速完成它。（学会拒绝也是提高工作效率的最佳方法）

  
  

  
  

2.有任何质疑一定要沟通

我不知道是不是每一位设计师看到一些奇葩的需求，会露出跟我一样的表情来。

我们肯定会质疑这个需求的合理性，甚至觉得产品、领导特傻B，觉得自己的单位非常的不专业，然后憋一肚子闷气要么按需求搞起，要么逆反心理不按需求来，自己出个自我感觉良好的视觉稿。

怎么说呢，有质疑也不是不好，说明自己还是有脑子的，但是，这些做法不会带来太多帮助。最高效的做法是及时和上游沟通，表达出你自己的质疑，同时利用自己的专业知识提出一些建设性的意见。（微笑的沟通建议，加油）

一般情况下对方往往会对你的质疑进行一些解释，即使你的意见可能未被采纳，但是起码你将自己的意见表达出来了，到时上线数据不好看责任在于对方而不是你。这就好像你向对方踢了个球，你不用操心管对方怎么踢。但如果你一开始就没有勇气踢的话，不论最后什么结果你都得承认当中有你自己的责任。念起即行，不要为我们没做过的事后悔。

3.不要接到需求立马就做

这可能是很多设计师的通病，包括我自己也会经常这样，在接到一个需求后，时常控几不住自己的右手，马不停蹄得就开工了。

这样做无疑是给你自己埋下了隐患。

因为给到你的需求可能仅仅是做个banner或者修个图，或者是按交互稿完成一个简单的页面。但是你并不了解这个需求的业务背景，业务目标，或者这仅仅是个拍脑袋的伪需求而非真正的需求。这些都需要我们主动去询问了解，否则一旦开发完往往会造成不可控的后果，而且同样面临追责。记住，我们设计师需要重复发挥我们的主动权，来让项目跟随我们自己的节奏。

比如之前做后台的时候产品和开发告诉我就按常规做，我之前也没有接触过，就做了最大尺寸的页面.....

但是由于事先并未沟通好，后来才知道使用人员不是我们工作人员而是学生，所以要按最小的笔记本来做（裂开！！）后面我不得不花费时间趁该版。

所以，在接到需求后请务必控几下你自己，把需要询问的问题列一个清单进行逐一解决！

4.好记性不如烂笔头

这句话一定被听烂了，但是真的非常有用！说明白点，就是及时输出你的在工作中所收获的知识。

任何东西都可以记：备忘录、有道云、笔记本、语雀、notion等记笔记的软件及实体。

不要幻想我们的大脑很牛逼很厉害，可以过目不忘的记住项目中的小问题，说不定今天我在工作中get到了一个新的知识、经验，它就已经深深得刻在我的脑子里了，接下来我可以干别的事了。相信我，一顿饭的功夫你的脑子就会忘得一干二净。 

有个办法可以完美避免这一点，那就是 输出。因为你在输出的过程就是一次沉淀、一次复盘。而且这个过程会充分调动你的大脑，知识吸收的程度远胜于你输入的过程。

每天输出一点点的知识日复一日也会积少成多，相信我， 输出这个方法让我成长最快的一种方法。

5.懂得向上汇报

有没有感觉，你每天一样勤勤恳恳得努力工作，而且大大小小的需求你都花上百分之两百的精力做好。但是开会的时候领导就是不怎么重视你，自己也没有什么发言权。

很大的一部分原因在于，领导压根不知道你做了哪些东西。他们每天忙于各种战略层的工作，基本不会主动下来了解你做了哪些。所以在他们眼里，你还是一个按部就班乖乖做图的小透明。

而我们能做的就是发挥自己的主观能动性：积极的发现问题并解决问题。

而不是像机器一样每天被动等待需求的分配，被动等需求喂，但设计师更好的价值恰恰体现在主动性上。

主动发起会议去反推项目的进行，主动追踪数据验证设计效果、主动复盘沉淀等等，要知道这些东西可不会像需求一样分配给你，而是靠设计师自己主动进行。 

当我们通过设计驱动业务成长，驱动数据增长后，相信我，领导会拽着你的脖子不让你走的。（我也在努力学习这方面）

6.设计稿和开发实现的细节

可能我们每个设计师都会经历从买家秀到卖家秀的一个阶段。

测试小哥毁掉你的设计，只需要三秒。

明明视觉稿那么完美无缺，为什么测试那么多问题？

举个例子

这是后台选品页的商品卡片。视觉上看着没什么毛病

但是，价格字段长度并不是这一种情况。由于我们平台的供应商用户可能拥有不止一个备货地，而且不同备货地的商品价格不一样，所以会存在一个 区间价的情况。可能一个玩具从美国发货是20刀，但是从中国发货是30刀。而且这种情况是不可控的，完全取决于供应商自己在后台上传的商品。 

当我们将上面的价格改为区间价时

是不是有点头蒙，所以我们这个时候就要考虑极限值长度，（这个在这篇不细讲，如果大家想了解欢迎留言）

这里就只告诉解决方法吧

1.省略号表示

即直接用“...”表示溢出文本，此乃最简单粗暴的一种办法。这种策略适用于：对于用户认知来说并没有那么关键、重要的信息，即便是展示不全也不会造成负面的影响。

2.hover（鼠标悬浮）

更全面的考虑，通常需要加入一个hover（鼠标悬浮）显示全部信息的交互。

比如商品列表页的商品卡片，我们限制商品标题只显示一行，超出部分”...“表示。用户如果想看全部的商品标题，可以通过将指针悬浮到信息区域中2s看到所有信息（蓝框框住的部分），这玩意儿专业术语叫”Title“，我们如果想加，只需要跟开发说一下hover显示Title即可。

当然如果你嫌人家丑，可以用antD组件库中的”Tooltip“来代替系统默认的Title，颜值上要高一个档次。

提升自己的小知识

1.收集

这也是渣渣和大佬之间最明显的差异了吧，那些资深的设计师为什么就能在工作中输出的页面又好又快，为什么那些小白就只能之间磨磨唧唧的抓头苦想。

第一有可能跟经验有关，毕竟人家比你工作的久，经过的项目多，就是比你能更快的抓住关键点。

第二那就是收集了，素材也好，组件也好，还是做好的模板，都能很快的帮助他们快速的完成工作。

2.练习

练习这个东西吧，看个人，也是成长巨快的方法之一。

但是一定要有思想的练习，不是去练习软件的工具，而且人家的排版，构图，页面的设计差异点，需要我们去琢磨，去学习，有句话叫：站在巨人的肩膀上看世界会更方便~

定期的输出练习，无论是锻炼之间的排版还是逻辑，只要坚持，一定会有效果的。所以一起练习吧！

3.素材库

刚刚说到设计师要收集，而素材库就是收集的终极目的。

设计师不能只是一味得在各个平台搜索素材激发灵感，而不去主动得收集和管理素材打造自己专属的素材库。这样的话碰到很多类似的项目时就只能重复造轮子，太浪费我们宝贵的时间了。

而Eagle这个软件能够很好得解决这个问题，我们可以将我们所看到的各种素材放到Eagle中，它极强的图库管理功能可以让我们搭建属于自己的素材库，而且浏览方便、支持嵌套和各种筛选。非常之强大。

我在之前的文章就推过，有兴趣的可以去看之前的文章谢谢~

组件化框架思维

这也是ui跟美工不一样的地方。所以我们可以先来聊一下——一次性设计这个名词。

什么是一次性设计？

一次性设计就是，我今天投入成本完成了一个界面或者营销需求，但也只是完成了这个需求而已，今后再碰到类似的需求依然吃瘪，还得重新投入一轮成本。这种设计就好像一次性的碗筷，用后即扔，非常非常得低效，它不仅没有办法复用，而且无体系、非模块的处理方式非常摧残设计师的精力。这是导致很多ui设计师沦为作图机器的罪魁祸首。（被开发人员叫着美工...）

在讲解框架思维之前，我先为各位讲一个互联网历史中真实存在的一个事件——软件危机（Software crisis）。

20世纪60年代，计算机的发展速度远远超过了软件研发的速度。可是当时的汇编语言是面向机器的，开发们只能针对特定的计算机编写，导致代码没办法复用，也极难维护。

这就好比我希望你能够为我的军队量产罐头，但是你却只能精雕细琢一款米其林三星的法式鹅肝。这跟当时规模化生产的市场需求完全是背道而驰的。

这一连串的问题在1968年的NATO软件工程会议上被首次定义为软件危机。在会议中，Douglas McIlroy提出了组件式开发的概念及解决思路，旨在解决代码低效无法扩展复用的弊病。这个超前的思路可谓是天降甘霖一般，在当时促成一大批优秀语言的诞生（我们当年的C语言就是在这个背景下横空出世的），帮助开发将代码复用到各个场景，极大幅得提升了开发的效率！

而在半个世纪后的今天，我们的设计领域出现了同样的问题——

1.设计不统一

很多页面曾使用了相似的颜色、组件，而不是固定的一个，如今而它们散落在各个项目的设计稿中，变得难以管理和维护。

2.设计低效

由于没有一套提前搭建好的系统，导致每次进行新的需求时都难以复用之前的东西。而且在进行不同尺寸的响应式适配时需要耗费大量的精力进行组件的更改。有时候甚至为减少工作量直接让开发按原型图进行布局，最后再进行把关。

3.多设计师问题

公司存在多位设计师时，通常是每个设计师单独负责一部分业务，但是由于没有一套约定俗成的规则进行约束，导致每个设计师的产出物不像来自一个产品。

4.开发低效

开发的低效来源于设计的随意。每次一有新的样式或组件都得重写一套，无法直接复用之前已有的东西，导致了大量无意义的重复劳动。

我们的设计方式仅仅局限在解决单一问题的场景中，而忽略了更多未来将会出现的更多业务。导致我们的设计不成体系，无法模块化和规模化。这些设计产物即我开头所讲的“一次性设计”。

而且，有时候设计师花费大量时间产出设计稿的功夫，开发可能早就使用第三方组件搭建出一个模板了。

我们一直在说设计师和开发之间仿佛有一道看不见的墙，那道墙一半是语言，一半则是组件化思维。

组件化的优势

1.一致性

首先，组件设计系统相当于为设计师制定了一套标准化的规则。所有的设计工作全部基于这个规则展开，这也就基本完全避免了多需求、多设计师协作时产生的不一致的问题。最后的产品也可以带来更加一致的体验。

2.效率

不像一次性设计那样，组件设计系统中的样式及组件本身可以无限复用，在设计师接收新的需求、项目时只需要直接调用即可迅速得搭建好模板，再进行视觉的填充即可，节省了大量重复的设计工作。并且这个良好的习惯也可以避免过多无法复用的设计影响到下游开发的效率，避免重复造轮子。也降低了不必要的沟通成本。

3.易于扩展维护

当后期产品优化迭代时，我们仅需要在系统中改动组件样式，或者属性即可实现全局同步更新，非常易于扩展维护。

大厂们的组件设计系统

在相当长的一段时间内，混乱和无序是Android在界面设计中的代名词，当时由工程师为主导的Android可谓是一片无人管理的荒野，任何人都可以在上面建造自己想要的东西。直到2014年，Google I/O大会上发布了Material Design，这成为了Google真正意义上的首次设计革命。

如果说谁是组件设计系统最伟大、最经典的先行者，那么Material Design当之无愧。它不仅仅为开发者和设计师提供了一整套组件库，还制定了Material Design独有的设计原则和设计语言，形成了一块相当庞大而有序的设计体系。

而2016年由蚂蚁金服团队所发布的Antdesign，则是国内使用组件设计而搭建的首个设计系统。它最大的亮点应该是详尽提供了开箱即用的组件框架，并且覆盖了绝大部分的应用场景。对于当时中后台设计惨不忍睹没眼看的产品来说堪称是一片绿洲。

ui设计师的设计原则

设计原则即这一套设计系统所遵循的法则。不论是颜色、圆角、按钮还是图标等等，它们的制定都需要围绕这个设计原则展开执行。

它所存在的意义就是为接下来的所有设计提供了方向，同时传递平台的品牌、仪式感。

接下来就是秉承设计原则、以及业务调性的基础上，所提前制定的一系列设计策略。业务调性需要我们基于业务背景去衍生出一系列关键词来给业务定性。比如金融产品涉及资金的流转操作，所以安全就可以作为其中一个关键词。而针对年轻大学生的校园社交产品就可以使用年轻作为其中一个关键词。

之后，我们基于这些关键词进行更加具象的映射，然后搭建情绪版来分析、推导出最终的形、色、字、构、质的视觉风格。这些视觉风格汇总起来即可作为一套设计语言，也就是我们口中所说的定规范，定风格。

总结来说就是

• 设计方向

• 设计延展

• 规范制定

• 设计验证

  组件库的介绍

  
  

  组件库，你可以理解成一个塞满各色各样组件的仓库。比如录入类组件的输入框、表单、单选框、多选框等，比如反馈类组件的警告提示、对话框、进度条等等。antDesign提供了一整套的组件库方案，覆盖了绝大部分的业务场景，我们在搭建自家组件库时可以将其作为一个很好的参考！

  

  如果说设计语言解决的是样式复用问题，那么组件库解决的就是组件复用问题。

  
  

  想想，如果缺乏一套统一完善的组件库，很容易出现一个产品中呈现五花八门的表单、搜索框等组件的灾难。而且对内也会降低设计和开发搭建页面的效率

  软件的使用

  
  

  说到ui的使用软件，大家首先想到的大概是Sketch。伴随移动互联网的兴起，Sketch的发展可谓一骑绝尘。相比曾经的大哥Photoshop，Sketch虽功能不及其强大，但胜在更加轻量，更高效率，迅速俘获了UI设计圈的青睐。一时间，几乎所有国内外主流设计团队都将Sketch作为主要的生产力工具，也使其成为了UI设计领域的新霸主。

  
  

  近两年，一款名叫Figma的设计工具异军突起。根据UX Tools 针对全球数千名设计师年度问卷调查，Figma从2017年爱用度排名第七到2018年一下爆冲到第二名，并荣登2019年最令人期待的设计工具，展现出的惊人潜力令人侧目。尤其今年以来，已经有非常多的公司正在从Sketch切换到Figma，比如大家耳熟能详的Twitter、微软、Github等，国内也有网易的设计团队开始利用这款工具开展远程协作设计。

  今年因为疫情他就更火了~

  
  

  UXtools 对设计师的年度调查，各种工具的使用情况，使用最多的 UI 设计软件，前五名依次是 Figma、Sketch、Adobe XD、Illustrator、Photoshop。

  
  
  

  最好的跨平台UI设计工具

  
  

  一直以来，界面设计工具似乎对windows都极度不友好，比如Sketch压根不开发windows版本，Adobe的XD虽然有windows版本，但实际使用体验还是和Sketch有明显的差距。而Figma基于web平台开发，只要你的设备有浏览器，并且连接了互联网，就可以获得媲美sketch之于mac的极佳体验，且不受系统约束。

• 
  

• 
  

  流畅的操作体验

  虽然Figma基于web开发，其流畅性却丝毫不逊色于客户端软件。曾经习惯用PS做设计的小伙伴，肯定有过被卡顿支配的恐惧，复杂的设计文件，尤其是多画板的设计稿就连移动图层都变得异常费劲。

  Sketch在这点上相较于PS虽有极大的优化，但性能也有明显的上限，如果画板数量太多，长时间工作下的Sketch依然会卡顿不已。

  Figma似乎并不怎么消耗本地资源，同样大小的项目文件，Figma能够将缓存控制在极低且保持流畅的60帧渲染，可以说是真正的「如丝般顺滑」。

  
  

  超强的全局组件

  这个功能非常类似Sketch的Library，不同之处在于你可以在Figma新建一个专门的文件来定义组件（component）或者样式（style），再将其发布到库（Library），这样团队中的所有成员都可以在团队中的任意文件调用这些组件。同时得益于Figma是基于web开发，这些组件是可以实时同步更新的，这意味着一旦修改了某个组件样式，团队中所有项目内用到该组件的地方，都能选择是否要同步更新。

   

  真正的核心竞争力—团队协作

  依旧是基于web开发的先天优势，多名设计师可以在Figma同时操作同一设计文件，不必保存后再相互发送，可谓效率倍增；Figma还支持评论留言，哪里急需修改、哪里优先级较低，只需要增加批注即可提醒团队其他成员注意，从此再也无需将设计稿源文件在团队内发来发去，评审也变得简单高效。妥妥的杀手级功能。

  
  

  恢复历史版本

  基于web的Figma虽然好处多多，却总给人不安全的感觉。假如某个设计稿历经数小时，一顿猛如虎的操作之后突然断网断电，如果没有及时将文件保存，真的只能欲哭无泪。

  Figma针对这一痛点做的非常到位。团队中每一位成员的每一次修改都会生成对应的历史版本，即使某位成员出现误操作也有充分的兜底机制保证文件的安全。

可以看出，Figma是一款基于web的优秀设计软件，各方面的使用体验可以说和Sketch不相上下，二者的竞争也还在继续。那么作为设计师，我们又该如何选择呢？
感兴趣的可以去看http://www.xueui.cn/tool/figma.html

作者看法

一场突如其来的疫情极大改变了人们生活和工作的方式，许多公司开始尝试远程办公，远程协作成为了摆在台面上的刚性需求。总的来说，笔者对于跨平台，且拥有相对完善云端协作体验的Figma更加看好。云才是未来，布局云端协作的设计软件也会越来越多，例如InVision推出InVision Studio和我们推出的摹客设计协作平台等都是设计协作领域的佼佼者。这一领域的竞争仍在继续，任何一款软件成为未来的主流设计工具都有可能，让我们拭目以待吧。

总结

本文从ui工作中要注意的问题到提升自己的方法，再到组件思维，和软件的推荐，详细的介绍了ui和平面的区别。

也希望刚刚入行的ui们了解自己的工作，也希望那些不懂ui的人们勿喷说不就是几个页面吗？那么难？

背后的逻辑和规范才是王道，这也是高薪的原因，一起努力，做个有思想的设计师吧~

厚着脸皮要个赞~

部分来源

http://www.xueui.cn/experience/discussion/sketch-or-figma.html

http://www.xueui.cn/tool/figma.html

http://www.woshipm.com/pd/3790190.html

http://www.xueui.cn/design-theory/shejiyuanze/atomic-design-idea.html

https://mp.weixin.qq.com/s/Dbyq5lL4-lEB-6BOjTJM_w

https://mp.weixin.qq.com/s/vCV25mohAKTZq4MRm608HQ

https://mp.weixin.qq.com/s/PJOdqhBblgrj7GwpH_1CSA

Powered by Froala Editor