首先你可以在APP页面当中穿插C4D的配图，如果实际项目当中不好结合就可以多做些概念稿。如果页面当中你实在结合不好，还可以在页面包装展示上面下功夫，巧妙地建一个手拿手机的模型，你的展示就会比别人的更加分。总之想尽办法提升含金量吧！

为了展示全能型，很多设计师也会在作品集当中加入一些网页设计。之前流行的大多都是网页和插画的结合形式，然而现在大多设计师已经开始和C4D作品结合起来！

03.插画

之前很流行的办公系列插画，现在国内外大神已经升级到3D系列了，整体风格没有太大变化，整体质感却提升了很多！

04.图标

图标作品展示也是作品集当中常见的一部分内容，除了常规的图标展示外，你还可以做一些3D图标。

原文地址：设计师深海（公众号）

作者：设计师深海

转载请注明：学UIw网》一招让你的作品集脱颖而出！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

如何做好时间管理？

网上流传一张王健林的行程单，可以看得出时间分配相当满，于是我就特别好奇，专门问了一些我们公司的高P，他们每天那么多工作，是如何去平衡生活和工作的，其中有一个很重要的点就是做好时间管理且自律。

比如今天晚上8点要和孩子去看一个音乐会，就会在8点之前把所有的工作全部搞定，然后去陪孩子！是呀，厉害的人，能在某一个点把事情全部搞定，本身就是超强的能力，那么作为职场人，我们该怎么合理管理时间呢，今天分享6个小方法给大家。

方法一：番茄工作法 

选择一个待完成的任务，将番茄时间设为25分钟，专注工作，中途不允许做任何与该任务无关的事，直到番茄时钟响起，然后在短暂休息一会（5分钟就行），每4个番茄时段多休息一会儿。

这个方法为什么好用呢？我相信很多设计师和我一样，每次工作几分钟后就会玩玩手机，看看微信，一边听歌，刷着网站，同时做着几件事情。

这个就是明显的一心多用，不够聚焦，番茄时钟好处就是督促你在这个25分钟内，专心只做一件事情。充分利用大脑的集中注意力去高效完成一件事，然后休息5分钟，再开始下一个番茄时间。

当然你也可以根据你个人习惯来调整时间，我将番茄时间的25分钟改成了45分钟，这样有助于我更好的聚焦。比如我有一个需求时，我会花45分钟看完交互流程，45分钟去和开发还原开发细节，45分钟去收集设计灵感，45分钟去把页面框架搭建好，或者设计好一个局部等等，然后休息5分钟，让自己短暂休息下。

合理拆解需求

学会拆解任务，设计师的需求有大有小，大的比如一个首页改版，一个设计语言的建立，小的有一个弹窗设计，一个图标绘制等等，那么运用番茄时间的第一步就是你需要对工作任务进行合理的拆解，才能用多个番茄时间段来覆盖整个项目，比如需要做一个首页改版，那么我就需要进行拆解任务。

首页改版可以分成四个大的关键节点，需求讨论，设计风格探索，视觉设计，交付开发，然后每个大的模块下再细分小的任务，然后进行番茄时钟的评估，比如色彩收集我可能需要2个45分钟，那么就2个番茄时钟去完成它。

所以我们要学会合理的去拆分你的需求任务！明确到可执行的番茄时钟。

及时提醒

听听白噪音

很多同学在工作时，喜欢戴着耳机听着音乐，但是在使用番茄时钟时，我不太建议这样做，原因在于音乐会干扰我们思考，有时候音乐还会影响你的情绪，所以这个时候建议大家听听舒缓的白噪音，比如海浪声音、风声、雨声，我个人比较喜欢听海浪拍打的声音，能够让自己静下心来。

这里推荐一个番茄时钟的MAC工具，叫番茄钟，里面除了设置番茄钟外，还自带很多白噪音，非常好用！

方法二：四象限时间法 

美国的管理学家科维提出的一个时间管理的理论，把工作按照重要和紧急两个不同的程度进行了划分，基本上可以分为四个“象限”：

1.既紧急又重要：

如同事投诉、即将到期的任务、上线危机等

2.重要但不紧急：

建立人际关系、设计培训、制定设计规范等

3.紧急但不重要：

如取快递、部门会议等

4.既不紧急也不重要：

如网购、闲谈、邮件、发朋友圈等

我们需要把每天工作任务，按处理顺序划分：先是既紧急又重要的，接着是重要但不紧急的，再到紧急但不重要的，最后才是既不紧急也不重要的。我们具体来看看设计工作中的一些场景。

既紧急又重要

设计师工作场景：比如项目上线前的设计更改，明天和主管汇报的PPT，需求设计评审，这是我们每天工作的核心，大多数设计师在公司中日常任务就是产品的迭代，那么重要的事都是不能一拖再拖，都是迫在眉睫。

我自己的方法是每晚睡前给自己列出明天最重要的必须完成的3件事情，并用工具软件记录下来！

重要但不紧急

这里主要是和你个人成长发展有关，比如学习英语、提升动效技能、掌握C4D、理财等等，这些很重要，但是很多时候我们每天都在处理重要又紧急的事情，特别是互联网公司，每天都在做需求，对于自己的个人规划，根本没有时间处理，就会导致你个人的提升这些事情完全没有时间做，多把精力放在这个领域去提升自己，必须主动去做，这是对于你个人成长最有帮助的。

比如你未来3年希望去大厂工作，那么你就要列出来大厂设计师的技能有哪些，比如科学设计方法、设计思维、动效、数据能力，然后都放在你重要不紧急事情里。在精力有限的基础上多做投入和提升，慢慢才能达到目标，否则就一直成为流水线设计，或者项目里面一个资源方，个人成长永远没有！

紧急但不重要

比如PM找你聊需求，当然正常需求该聊还是聊，但是工作中经常有的聊，真的只是陪聊，很多时候真的在没有必要，没有结果的开会，聊需求真的是浪费时间，表面看似第一象限紧急事情里，因为迫切的呼声会让我们产生“这件事很重要”的错觉——实际上就算重要也是对别人而言。我们花很多时间在这个里面打转，其实不过是在满足别人的期望与标准。

设计师经常遇见的，改文案啊，产品会议，开发排期这种会议在我看来，出来关键节点有结果的需要参加，更多事情能少参与就少参与。

既不紧急也不重要

这里的既不紧急也不重要就是每天你花费时间最多的地方，比如群里聊天，刷朋友圈，抖音，看八卦新闻，当然人都是需要一些无聊消遣的，但不值得花很多时间在这个象限。刚开始时也许有滋有味，到后来你就会发现其实是很空虚的。

总之，关于时间的4象限，需要大家多多的关注，多把精力放在重要又紧急，然后允许情况下，多提升重要不紧急事情的投入，长期坚持下去，你会有巨大的改变。

方法三：先思考再动手 

这个道理很简单，但是很多人都没有做到，我也有很多时候，做着做着掉进一个坑里，所以做之前想清楚，想好了再做会更好！

方法四：避免重复造轮子 

避免重复，经常总结积累

做一件事情，学会举一反三，学会从点到面，在很多公司面试晋升过程中，比如阿里，P6资深设计师和P7专家设计师，很重要的一个技能点就是，如何从点做到面。

我们在做很多需求时候，需要思考，这次做的这个需求后续如果遇见类似的，能不能快速解决，而不至于浪费时间和精力投入进去没有成长！比如说按钮设计，我们随便抓一个市场上的按钮，你会发现按钮的样式、大小颜色就是各种不统一，浪费开发资源和设计资源！如果你每天的工作都是做这种浪费精力没有存在感的事情，对于个人是很不利的，平时做项目多留心下，比如我做一个专题页面是不是可以去思考下，这个页面做完哪些控件我可以沉淀下来，复用到其他的场景中，赋能给其他设计师呢，这个是很重要的！

同样的，比如我们最近在研究一个弹窗，那么是不是我做这次弹窗，我就把弹窗彻底研究透彻，弹窗尺寸大小、颜色、按钮、状态都研究彻底，彻底掌握了这个知识点，后面再做弹窗信手拈来，深刻搞定一个任务，避免反复，经常总结和积累，也是提升效率很重要的方法。

当你觉得很难的时候其实是在上坡

方法五：放下手机，定时间点 

最后这个方法对我来说很有效，学会放下手机，放下干扰，中国口香糖的营业额持续下降，大家知道为什么吗？口香糖一般都会摆在收银台的旁边，因为用户在超市收银台排队的时候，都在玩手机，没有人去看前面的货台！可见手机对我们影响有多大，所以当你准备学习时候，或者去完成一个任务时候，最有效就是手机放起来，至少一个番茄时间不要去看，这样保证你的效率变高。

最后 

上次我们分享了左面的等级相关的，今天我们接着来分享第二张任务相关的。本文会从引导页的3个方面讲解：一个好的创意非常重要、元素一定要有细节、搞一些灵动的小亮点，做好这3点能给作品加不少分。

最近做的引导页，效果如下：

1.一个好的创意非常重要

很多时候，一个好的创意非常关键，可以让设计产生亮点，等级这个页面，我个人还蛮喜欢这个创意的。

因为这个页面讲的是每周任务，我从“周”这个字眼想到了时间又想到了日历，所以我想用一个大的日历作为整体外轮廓，然后日历里面的结构是一些相关的礼物元素。

但是最开始的效果并不理想：

看不太出来是日历，那怎么样才能一眼就看出来是日历呢？

那就是有一种翻页的感觉，比如下面这种：

这样就可以看出来是日历了。

除了日历，刚才也说了，还要有一些相关元素，礼物呀、升级的火箭呀、直播的小电视呀等等：

这样有大的框架，再加上修饰的元素，整体的创意就差不多了。

2.元素一定要有细节

每一个元素都会影响画面精致度，比如之前说的那个礼盒，之前没倒角，倒角之后，和整个更搭一些：

再比如，我之前画的电视有点太简单粗暴了：

于是找了几个电视的参考:

加了一些细节和优化，优化后效果如下：

这样就比之前精致一些。

当每一个单体做到位了，组合起来就不会差太多，否则就会影响整体质量。

3.搞一些灵动的小亮点

其实让画面变灵动的方法有很多种，我个人特别喜欢使用一些可爱的表情、或者小形象。

比如之前在做任务头图的时候，字体上加了一个小微笑的表情：

再比如这次，在日历外面加了一个黑子，偷偷看里面礼物的细节：

让用户感觉里面确实有很多好东西。

再比如日历里面的星星也加入了表情：

让其更加有生命力。

这些都是我喜欢使用的小技巧。

总结

今天就先分享这么多啦，每次做引导页都是比较开心的，因为可发挥空间会比较大一点，也可以使用自己比较喜欢的3D手法，希望过程中的小感悟可以给大家来点灵感！

下期见，么么扔！

转载请注明：学UI网》没想到过程稿这么丑，结果用了两招就把效果改好了！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

2020年6月17日，微信发布了新版本，上线了“拍一拍”功能。从上线之初火遍每个社群，到现在迅速沉寂下来，这种变化应该也在很多人的意料之中。那“拍一拍”的价值点到底在哪里呢？我也来给大家说道说道。

01功能定位

张小龙朋友圈：“微信史上仅需一行代码的有趣功能终于来了。拍一拍，像蚂蚁一样打招呼。”

从张小龙的描述中，拍一拍功能定位是一种打招呼方式，而且希望带给用户更加有趣的体验。

 

02功能拆解

社交本质上是人与人之间的信息传递，这其中包括两大节点，信息的输出和接收。所以我们就从这两个维度去分析下“拍一拍”功能。

 

1-信息输出

操作方式：用户只要双击对方的头像就可以完成拍一拍行为。

 

操作反馈：

1）对方头像晃动，伴随着手机震动，同时聊天界面中会出现提示文案，“你拍了拍xx”。

 

2）如果对方不再是用户好友时，“拍一拍”在显示文案信息基础上，还增加了朋友验证的提示信息。

 

3）当用户退出对话框时，拍一拍的对话栏会根据信息时间重新排序，类似于消息排序的逻辑。

 

2-信息接收

信息接收主要包括以下3个场景：聊天列表、对话框、信息刷屏状态。

 

1）聊天列表

当别人拍了拍我们，或者别人拍了拍别人，我们都不会收到任何提醒。为了让用户有所感知，同样会根据更新时间顺序将对话栏显示在聊天列表中，同时列表会展示拍一拍文案信息。

 

2）对话框

当用户打开对话框时，头像会晃动两下，并伴随着手机震动。让用户明显地感知拍一拍信息。

 

3）历史消息

当聊天界面内容较多，“拍一拍”的信息被刷屏了，那该怎么办呢？

不用担心，微信考虑的很周全，当用户上翻聊天信息时，内容显示到“拍一拍”文案时，手机也会发出震动反馈，保证用户无需仔细阅读信息内容，即可快速、准确地感知到“拍一拍”信息。

此外在用户行为方面，“拍一拍”玩法没有做出限制，用户可以自拍，别人互拍及自拍，并且文案信息都会呈现在对话框中。最大限度的激发用户互拍的欲望。

 

03体验分析

1）简单

微信作为重要的社交工具，一直在孜孜不倦的追求简单的玩法。所以“拍一拍“操作简单，只需要双击用户头像即可实现，这也是能够掀起全民互拍狂欢的基础条件。

 

2）轻量

拍一拍作为弱提醒方式，其实是对现有信息提醒方式的补充，强调点到为止。尽可能减少社交信息给用户带来的心理压力。

 

3）感知

为了激活用户交流，需要保证用户对信息的感知。因此在对话栏排序上参照文字消息的逻辑。而打开对话框时、微信群消息等场景中增加了震动反馈。

 

4）有趣

“拍一拍”丰富了微信的沟通方式，在文字、图片、语音等信息形式基础上，增加了现实生活中的行为方式，形成了更强的行为映射。所以引发了一波“拍一拍”浪潮，也被广大网友玩出了新的高度。

（图片来源于网络）

 

04价值分析

1-用户侧价值

张小龙说，“微信的梦想是什么？从个人角度成为人最好的一个工具朋友。从平台角度，建立一个市场，让创造者体现价值。”

那请允许我推测一下“拍一拍”对用户的价值。

 

1）新的社交礼仪

现在的微信消息提醒方式包括对话栏角标、群内@，强提醒等形式，这些形式都让用户都无法忽视。特别是一对一沟通时，红色的角标如果一直存在，可能会逼死强迫症患者。但是一旦打开消息界面，你又无法忽略信息的内容。因此之前就有人提出增加一个信息置底功能。

而“拍一拍”作为一种轻量级的打招呼方式，或许可以成为微信社交中新的选择。例如在微信群中，如需非紧急必要的事情，可以在信息之后，拍一拍对方，表示这条信息是专门发给他的，让他能够接收到就可以了。而不需

要采用@的方式，减少对用户带来的信息轰炸和心理压力。

 

2）快速回复

未来“拍一拍”可能会成为一种快速回复方式。

当前交互方式中，文本信息方式用户成本最高；图片、表情方式可能无法准确的表达回复内容；语音、通话过于沉重，对环境要求也较高。因此微信需要创造一种更加快捷的方式满足简单回复的需求。

而拍一拍，可以轻松的实现这一点，拍一拍对方即可表示消息反馈，又减少了用户交互成本。

 

3）情感化表达

现实生活中，拍一拍包含了各种情感信息。

例如当我们需要与别人打招呼或者沟通时，可以通过“拍一拍”、“戳一戳”等接触方式，引起别人更强烈的注意。

又比如当我们跟别人沟通结束时，可以拍一拍对方，给予鼓励。或者说一句“没事的，以后肯定会更好“、顺手拍一下对方，表示理解或感同身受。

同样作为现实生活的映射，在微信聊天过程中，我们可以借用“拍一拍”，更加充分的表达情绪，而震动反馈或许能够让对方更加真切的感受到我们的关爱。

 

2-产品侧价值

1）促进版本升级

“拍一拍”需要升级微信版本才能使用，当全民都在拍一拍时，你是无法视而不见的。因此可以更好的促使用户主动升级版本。

 

2）激活微信群

“拍一拍”上线后，很多沉寂已久的微信群开始“复活”了。大家都在主动的尝试新的功能，而且网友们还玩出了各种花样。而这仅仅只需一行代码的投入就做到了，可以说价值巨大。

 

总结

我们都知道，微信是极具克制理念的产品，微信每天都拒绝着大量的看似合理的用户需求，张小龙有着自己的设计理念。此次“拍一拍”功能对用户的行为也做到最轻量级的影响。

或许“拍一拍”只是一次新的尝试，最终会随着新鲜感的丧失，成为用户眼中的“鸡肋”功能。但是这其中带给我们的启示，是值得我们深入思考的。

转载请注明：学UI网》情感化层面解读微信“拍一拍”的价值

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

项目协同与执行的过程中总感觉节奏乱？对于项目缺乏整体的规划、每次设计过程中付出的成本很高。对结果验证时发现不论设计质量还是效率都还有很大的提升空间。设计感觉做的不错，但项目中的角色话语权不高？多个项目并行不知如何管理操作，有无标准方法，怎么从中创造更大的价值？本文结合日常项目管理当中的一些思考与方法，带大家了解设计师需要有的项目管理意识。

如今设计师不再仅仅作为一个需求的接收方与执行方，职能更加的全面，在整个产品设计研发流程中也需要我们有更强的参与度。最近工作中得到一些设计同学的咨询并参与围绕着一些项目中的问题进行讨论，比如：项目协同与执行的过程中总感觉节奏乱？对于项目缺乏整体的规划、每次设计过程中付出的成本很高。对结果验证时发现不论设计质量还是效率都还有很大的提升空间。设计感觉做的不错，但项目中的角色话语权不高？多个项目并行不知如何管理操作，有无标准方法，怎么从中创造更大的价值？本文结合日常项目管理当中的一些思考与方法，带大家了解设计师需要有的项目管理意识。

a

01.好的设计能不能管理出来？能收获什么？

首先，我们思考一下，管理是什么？其实简单来说更像是很多标准化、流程化、格式化的方式方法组合，辅助我们更好的达成目标，并为整个设计团队构建一个基础的工作体系。项目中稳定与高效输出都来自于更加科学的管理。设计师链接上下游部门，也需要通过管理来解决诸多设计以外但与设计有联系的事务。对于我们的收获部分可以大致分成以下三点：

· 目标达成层面

引导促成整个产品/项目的目标高质高效达成，使之利益最大化。

· 视角变化层面

能够让我们视角产生改变，能够更全局看待问题，让自己有大局观的同时更加拥有结构化的思维。

· 影响力与服务能力的提升层面

在项目中角色话语权提升，在团队内外有更高的影响力

a

02.项目管理我要管什么？

设计师运用项目管理的方法，个人认为最基本的就是要合理的规划与控制，管人管事，且贯穿在整个项目流程当中，以下几点其实我们可以重点关注。

我们工作当中实际参与的流程，基本可以归纳为启动阶段、计划阶段、执行监控阶段、收尾阶段。

· 启动阶段

在这个阶段经常会使用到6W2H方法，它有助于我们思路的条理化，杜绝盲目性，所以此方法能够快速帮助我们确定目标、里程碑、项目成员以及合作模式，例如在此前的二手车大类页改版等大型改版项目中都有所使用。

· 规划阶段

需求的梳理、排期、以及任务拆分、资源协调。我们可以尝试使用STAR模型来操作。而这部分在车业务的内部设计需求中也是在iWiki常态化留档的，以SITUATION（背景）,TASK（任务）,ACTION（行动）,RESULT（结果）几个维度构成表的基本结构。

需求规划完毕需要考虑的就是内部资源协调，在专职项目、动态项目、创新项目中协调的原则上可以是：擅长人做擅长事，挑战与执行并存，提效最大化，成长最大化。

· 执行监控阶段

在此阶段，我们可能会遇到以下一些问题，产出效率不高、质量不高、反复修改或项目推进缓慢影响业务目标。这些情况或风险在很多项目当中都存在，风险并不一定是坏事，而风险大多数都是可以预测和管理的，我们可以多使用WWH模型和STAR模型结合的方式快速的辅助我们思考、记录、评估、计划、调整。在落实的时候我们会使用到iWork工具进行需求的变更、说明、同步，包括后续的进度跟踪与回溯，在项目的管理上非常直观易用。

· 收尾阶段

对于该阶段质量控制方面，我们引入了更规范的走查文档、共建集成体验环节、以及全职能自查环节。常规的设计走查介入方式如下：

改变走查方式之后，增加集成体验环节与每个节点中的输入输出内容，保障每次项目的最终落地质量。

在收尾阶段从项目管理的角度来说另外一个希望提及的是，除了事前有规划、执行有控制、更要注重事后收尾有总结。虽然每一次的项目可能过程会有一些不同、结果目标不同，但是我们在总结复盘的过程中一定要做到以下几点：

1.拒绝形式化，避免假大空反思

2.具备借鉴意义

4.对应解决方案，具体落实到人、功能范围、时间等

w

03.聊聊其它

其实我们可以发现既然是要去管理项目，在每个节点里沟通是非常重要的，可能很多设计师都会遇到一些沟通方面的问题：效率低、无结果、惧怕沟通。其实多数就是在信息通过传输渠道、媒介的时候，发送者与接受者在各阶段所暴露出的不同问题，如下图：

· 我们可以怎么做呢？大家可以多从以下几点去思考

1.沟通前的思路整理以及相关案例或设计理论的支持

2.对齐沟通方的关注点与信息交集

3.灵活正确的处理意见与分歧，开放心态、开放式话术、气氛控制、善用询问等

4.总结与使用流程管理进行规划

5.建立设计师个人品牌可信度

以上为对日常设计项目管理工作的一些个人理解，大家可在实际的项目当中灵活应用，如对项目管理方面非常感兴趣的同学也可以去看看PMP相关知识，也欢迎入群多多交流。

原文地址：58UXD（公众号）

转载请注明：学UI网》设计师的项目管理意识

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

如何做好时间管理？

网上流传一张王健林的行程单，可以看得出时间分配相当满，于是我就特别好奇，专门问了一些我们公司的高P，他们每天那么多工作，是如何去平衡生活和工作的，其中有一个很重要的点就是做好时间管理且自律。

比如今天晚上8点要和孩子去看一个音乐会，就会在8点之前把所有的工作全部搞定，然后去陪孩子！是呀，厉害的人，能在某一个点把事情全部搞定，本身就是超强的能力，那么作为职场人，我们该怎么合理管理时间呢，今天分享6个小方法给大家。

方法一：番茄工作法 

选择一个待完成的任务，将番茄时间设为25分钟，专注工作，中途不允许做任何与该任务无关的事，直到番茄时钟响起，然后在短暂休息一会（5分钟就行），每4个番茄时段多休息一会儿。

这个方法为什么好用呢？我相信很多设计师和我一样，每次工作几分钟后就会玩玩手机，看看微信，一边听歌，刷着网站，同时做着几件事情。

这个就是明显的一心多用，不够聚焦，番茄时钟好处就是督促你在这个25分钟内，专心只做一件事情。充分利用大脑的集中注意力去高效完成一件事，然后休息5分钟，再开始下一个番茄时间。

当然你也可以根据你个人习惯来调整时间，我将番茄时间的25分钟改成了45分钟，这样有助于我更好的聚焦。比如我有一个需求时，我会花45分钟看完交互流程，45分钟去和开发还原开发细节，45分钟去收集设计灵感，45分钟去把页面框架搭建好，或者设计好一个局部等等，然后休息5分钟，让自己短暂休息下。

合理拆解需求

学会拆解任务，设计师的需求有大有小，大的比如一个首页改版，一个设计语言的建立，小的有一个弹窗设计，一个图标绘制等等，那么运用番茄时间的第一步就是你需要对工作任务进行合理的拆解，才能用多个番茄时间段来覆盖整个项目，比如需要做一个首页改版，那么我就需要进行拆解任务。

首页改版可以分成四个大的关键节点，需求讨论，设计风格探索，视觉设计，交付开发，然后每个大的模块下再细分小的任务，然后进行番茄时钟的评估，比如色彩收集我可能需要2个45分钟，那么就2个番茄时钟去完成它。

所以我们要学会合理的去拆分你的需求任务！明确到可执行的番茄时钟。

及时提醒

听听白噪音

很多同学在工作时，喜欢戴着耳机听着音乐，但是在使用番茄时钟时，我不太建议这样做，原因在于音乐会干扰我们思考，有时候音乐还会影响你的情绪，所以这个时候建议大家听听舒缓的白噪音，比如海浪声音、风声、雨声，我个人比较喜欢听海浪拍打的声音，能够让自己静下心来。

这里推荐一个番茄时钟的MAC工具，叫番茄钟，里面除了设置番茄钟外，还自带很多白噪音，非常好用！

方法二：四象限时间法 

美国的管理学家科维提出的一个时间管理的理论，把工作按照重要和紧急两个不同的程度进行了划分，基本上可以分为四个“象限”：

1.既紧急又重要：

如同事投诉、即将到期的任务、上线危机等

2.重要但不紧急：

建立人际关系、设计培训、制定设计规范等

3.紧急但不重要：

如取快递、部门会议等

4.既不紧急也不重要：

如网购、闲谈、邮件、发朋友圈等

我们需要把每天工作任务，按处理顺序划分：先是既紧急又重要的，接着是重要但不紧急的，再到紧急但不重要的，最后才是既不紧急也不重要的。我们具体来看看设计工作中的一些场景。

既紧急又重要

设计师工作场景：比如项目上线前的设计更改，明天和主管汇报的PPT，需求设计评审，这是我们每天工作的核心，大多数设计师在公司中日常任务就是产品的迭代，那么重要的事都是不能一拖再拖，都是迫在眉睫。

我自己的方法是每晚睡前给自己列出明天最重要的必须完成的3件事情，并用工具软件记录下来！

重要但不紧急

这里主要是和你个人成长发展有关，比如学习英语、提升动效技能、掌握C4D、理财等等，这些很重要，但是很多时候我们每天都在处理重要又紧急的事情，特别是互联网公司，每天都在做需求，对于自己的个人规划，根本没有时间处理，就会导致你个人的提升这些事情完全没有时间做，多把精力放在这个领域去提升自己，必须主动去做，这是对于你个人成长最有帮助的。

比如你未来3年希望去大厂工作，那么你就要列出来大厂设计师的技能有哪些，比如科学设计方法、设计思维、动效、数据能力，然后都放在你重要不紧急事情里。在精力有限的基础上多做投入和提升，慢慢才能达到目标，否则就一直成为流水线设计，或者项目里面一个资源方，个人成长永远没有！

紧急但不重要

比如PM找你聊需求，当然正常需求该聊还是聊，但是工作中经常有的聊，真的只是陪聊，很多时候真的在没有必要，没有结果的开会，聊需求真的是浪费时间，表面看似第一象限紧急事情里，因为迫切的呼声会让我们产生“这件事很重要”的错觉——实际上就算重要也是对别人而言。我们花很多时间在这个里面打转，其实不过是在满足别人的期望与标准。

设计师经常遇见的，改文案啊，产品会议，开发排期这种会议在我看来，出来关键节点有结果的需要参加，更多事情能少参与就少参与。

既不紧急也不重要

这里的既不紧急也不重要就是每天你花费时间最多的地方，比如群里聊天，刷朋友圈，抖音，看八卦新闻，当然人都是需要一些无聊消遣的，但不值得花很多时间在这个象限。刚开始时也许有滋有味，到后来你就会发现其实是很空虚的。

总之，关于时间的4象限，需要大家多多的关注，多把精力放在重要又紧急，然后允许情况下，多提升重要不紧急事情的投入，长期坚持下去，你会有巨大的改变。

方法三：先思考再动手 

这个道理很简单，但是很多人都没有做到，我也有很多时候，做着做着掉进一个坑里，所以做之前想清楚，想好了再做会更好！

方法四：避免重复造轮子 

避免重复，经常总结积累

做一件事情，学会举一反三，学会从点到面，在很多公司面试晋升过程中，比如阿里，P6资深设计师和P7专家设计师，很重要的一个技能点就是，如何从点做到面。

我们在做很多需求时候，需要思考，这次做的这个需求后续如果遇见类似的，能不能快速解决，而不至于浪费时间和精力投入进去没有成长！比如说按钮设计，我们随便抓一个市场上的按钮，你会发现按钮的样式、大小颜色就是各种不统一，浪费开发资源和设计资源！如果你每天的工作都是做这种浪费精力没有存在感的事情，对于个人是很不利的，平时做项目多留心下，比如我做一个专题页面是不是可以去思考下，这个页面做完哪些控件我可以沉淀下来，复用到其他的场景中，赋能给其他设计师呢，这个是很重要的！

同样的，比如我们最近在研究一个弹窗，那么是不是我做这次弹窗，我就把弹窗彻底研究透彻，弹窗尺寸大小、颜色、按钮、状态都研究彻底，彻底掌握了这个知识点，后面再做弹窗信手拈来，深刻搞定一个任务，避免反复，经常总结和积累，也是提升效率很重要的方法。

当你觉得很难的时候其实是在上坡

方法五：放下手机，定时间点 

最后这个方法对我来说很有效，学会放下手机，放下干扰，中国口香糖的营业额持续下降，大家知道为什么吗？口香糖一般都会摆在收银台的旁边，因为用户在超市收银台排队的时候，都在玩手机，没有人去看前面的货台！可见手机对我们影响有多大，所以当你准备学习时候，或者去完成一个任务时候，最有效就是手机放起来，至少一个番茄时间不要去看，这样保证你的效率变高。

最后 

背景：58会员商城是面向B端商户的信息服务售卖平台，囊括了公司各类业务的会员端口套餐、推广商品、增值服务等商业化产品。长期以来公司的商业交易主要依赖电销团队、线下销售团队来完成，战略层希望将线下销售模式向线上模式转变，建设一个以客户为中心的售卖平台。

01.B端商城的认知探索

02.B端客户差异

C端电商的客户

• 用户：以独立个体为主
• 流程：导流-列表-详情-订单-支付-物流-收货
• 商品：以图片介绍为主，多为大众化消费品，认知成本低
• 目标：灵活，分散，以兴趣、生活需要为导向

58会员商城的客户

• 用户：既有公司团体，也有商户个体、独立个体
• 流程：渠道转化-注册身份-选择套餐-付费下单-确认合同-认证资质-开通使用
• 商品：信息服务类商品，认知成本高
• 目标：聚焦，为业务运转而采购，推广预算明确，追求商业效益最大化

• 效率问题：KA客户采购模式与购物流程的矛盾
• 成功率问题：客户心智与商品选择难度的矛盾

03.客户链路设计

· KA客户采购模式与购物流程的矛盾

KA客户的采购模式与C端电商经典购物流程截然不同。

KA客户流程改造示意图

· 客户心智与商品选购难度的矛盾

与KA客户不同，黄页商家客户更接近于普通消费者。用户在业务员的引导下进入商城采购，这期间用户面临的主要挑战是：

1.复杂的业务分类

2.雷同的商品内容

在原先设计中，采用了扁平的C端电商筛选逻辑，筛选信息密度高，使得商家客户容易忽略城市、行业类别对套餐的影响，导致买错套餐、退单重买的情况频频发生。再者是信息服务类商品的大量雷同，需要业务员反复与客户介绍套餐资源差异，影响购物决策效率。因此，对于这类场景，设计师的目标就要聚焦商家客户的购物成功率，通过改造筛选路径提升交易准确性和体验。

商品列表问题

04.链路的整合与延伸

· 业务分发路径

· 公共服务触点

05.最后

转载请注明：学UI网》设计沉思录 | B端商城的客户链路设计

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

现在越来越多的公司使用Figma作为主要的软件工具，在使用Figma时不能按照以前的思维去设计，要尽可能发挥出它的最大优势，学会进阶使用。

1.使用组件集

如果我们有大量的按钮、输入字段等变体，在进行任何调整时，都可能花费大量的时间。

通过使用组件集，可以对其中包含的基础组件进行调整，然后统一应用到所有的实例中。基础组件本身不需要成为组件集的一部分，可以放在同一页或原型附近。

2.将封面图添加到Figma文件中

当管理各种不同的项目和Figma文件时，有时候寻找需要的项目可能会很费力。

创建封面照片是一种简单而优雅的解决方案，使项目一眼就能被识别。

添加封面的步骤：

在文档中创建一个页面并将其命名为“封面”；

为封面图像绘制一个框架（1920×960效果最好）；

添加一些设计元素如logo、图标等，让封面便于识别；

右键单击框架并选择“设置为缩略图”。

3.使用样式

当使用样式进行设计并决定要测试颜色、描边粗细、字体样式等不同变化时，只要快速更改，设计就能自动更新引用该样式的实例。

4.组件集布局

点击组件集的框架，然后按shift+a，使用自动布局，轻松组织和重新排序组件。

5.使用自动布局

自动布局使我们能够更密切地设计产品的开发方式，并在设计文件中保持一致性和可扩展性。

通过遵循使用自动布局设计，可以在删除/添加内容、创建响应组件等方面节省大量时间。

6.创建流程图

为了清晰传达页面间的流程，可以尝试使用一个技巧——将Figma中的连接器复制并粘贴到Figma文件中，它将保留它的所有功能。

7.使用约束

为了保持一个框架的组织性和适应性，使用约束来告诉Figma当我们调整框架大小时页面该如何响应。

约束帮助我们控制设计在不同屏幕尺寸和设备上的页面，避免了每次调整页面时里面的元素也要调整。

如果要忽略框架中对象的约束设置，只需要在调整框架大小时按住command或ctrl。

8.为组件创建模板

为个人资料卡创建一个模板是好的选择，随着用户人数增多，资料卡模板能够快速地复用，为我们节省大量时间，使设计更轻松。

模板的工作原理：假设一个博客组件中包括一张图片和一些文本，再创建另一个组件，在其中嵌套10次博客组件。把这个模板放到设计文件中，如果我们需要添加内容或者调整组件之间的空间，我们只需要在主组件上进行调整。

9.组织组件

考虑使用按钮、颜色样式、输入等来组织组件，这样更能提高功共享的效率。同时从一个设计文件组织排版的好坏，也能看出来这个设计到底怎么样。

10.使用Loom插件

Loom插件是远程工作时必不可少的工具，能够节省会议时间，让设计师把更多时间投入到设计中。

如果设计团队的日程安排混乱、不在一起办公或者在不同的时区，都可以尝试使用Loom插件进行设计评论和共享。

原文地址：medium.com

作者：Danny Sapio

译文地址：Clippp设计夹（公众号）

译者：Clippp

转载请注明：学UI网 » 掌握这些Figma进阶技巧，让你的工作效率提升10倍！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

按钮在UI界面设计中是不可或缺的元素之一，这篇文章我们将介绍不同类型的按钮包括按钮的状态和交互。我们介绍的都是日常界面中使用的普通按钮，并不包括单选按钮、选项卡、复选框等其他类型的按钮。

按钮的不同分类如下：

* 动作按钮

* 常用按钮样式

* 按钮的颜色和形状

* 按钮状态和反馈

* 标签按钮

* 触摸屏按钮

* 按钮的位置

* 系统按钮

* 总结

动作按钮 

我们将分析按钮的层次结构和它们通信的语言。虽然有些按钮通熟易懂，但按钮操作不取决于它们的外观，而是取决于用户的行为。

1_1.行为召唤（CTA / C2A）

在设计中行为召唤按钮通常会提示用户注册/立即购买等。在产品设计中如果强烈建议用户应该做的事情应该使用CTA按钮。

行为召唤按钮

对于CTA按钮，我喜欢使用圆形按钮，这样会更引人注目。

1_2.主要操作按钮

虽然CTA按钮和主按钮看起来相同，但我喜欢将它们分开。主按钮应该是一个强大的视觉指示器，可以帮助用户完成他们的旅程。主按钮应该在用户可能想要“下一步”、“完成”、“开始”等的情况下使用。

主要操作按钮

对于主要操作，我喜欢使用实心按钮。

1_3.次要操作按钮

从“返回”的辅助按钮到“下一步”的主按钮，或从“编辑”的辅助按钮到“保存”的主按钮。辅助按钮是我们为用户提供的主要操作的备选方案。

主按钮旁边的辅助按钮的两种设计

我更倾向于使用线性按钮或文本链接作为辅助按钮。

1_4.三级按钮

三级按钮通常用于其他操作，可能暂时不是用户想要做的事情。比如“添加朋友”、“扫一扫”、“编辑”或“删除”之类的内容，前提是它们不是主要操作。

不同形式的三级按钮

一般来说，人们会使用较小或较不突出的按钮样式。

常用按钮样式 

下面我们将介绍常见的按钮样式，不同风格的按钮样式和他们的使用技巧。

2_1.实心按钮

实心按钮是带有实心填充的按钮。

一个实心按钮

2_2.线性和幽灵按钮

线性按钮和实心按钮正好相反，一个没有填充的按钮 – 只是一个轮廓。虽然经常互换使用，但我更喜欢将线性按钮视为浅色（在白底下按钮的轮廓和文本颜色深一点更明显），将幽灵按钮视为深色（在黑底下按钮的轮廓和文本颜色浅一点更明显）。

线性按钮（左）和幽灵按钮（右）

2_3.圆形按钮

圆形按钮其边缘设置为最大圆角半径。

圆形按钮

2_4.FAB（悬浮按钮）

悬浮按钮是一种巧妙的设计模式，Google Material Design中更加受欢迎。虽然它们可能看起来像一个图标按钮，但实际上它们用在屏幕上的主要操作按钮。

一个悬浮按钮

如果您想了解有关FAB的更多信息，我建议您在Material Design的网站上查看( https://material.io/design/components/buttons-floating-action-button.html )

2_5.文字链接

文本链接是一种非常简单的按钮类型。有几种不同的方式可以表明它是一个链接。它可以是颜色/下划线/链接的文本，甚至就是文本本身（例如“阅读更多”）。

文本链接的不同样式

在颜色方面，大多数网站使用蓝色，因为它是最容易识别的。为什么文本链接的颜色会使用蓝色？它一直追溯到是万维网的发明者，在他选择颜色时发现蓝色很酷的一种颜色，即使是色盲的人通常也能看到它。

2_6.带图标的标签按钮

图标按钮越来越受欢迎，一些按钮仍然需要一个标签来确保按钮的语意明了。

带图标的标签按钮

处理图标和标签时最棘手的事情是弄清楚字体组合的图标有多大。

方法1：让图标的大小对齐字体的顶线。

方法2：让图标的大小对齐字体的行高。需要注意的是确保图标和字体的组合视觉均衡。

2_7.图标按钮

图标按钮没有标签，只是一个图标。因为它们没有标签，所以它们在界面中节省了大量空间。图标按钮还可以将其他图标按钮一起排列在它们的小空间中。

图标按钮具有不同的风格

如果你在为计算机认知度较低的人群设计产品时，我建议使用带标签的按钮 – 尤其是那些很抽象的语意。

2_8.带图标的文本链接

某些文本链接可能带有图标。这些通常不会在正文中使用。

各种带图标的文本链接

按钮的颜色和形状 

在设计按钮时，需要考虑以下几个不同的元素。

3_1.颜色

在设计产品时，你应该要考虑有视觉障碍的人。为确保每个人都可以访问你的颜色，你可以使用在线对比度检查器。我使用的是那个。( https://accessible-colors.com/ )

不同颜色的按钮

另外，在选择颜色时应该考虑色彩心理学。红色按钮多用于删除，黄色按钮多用于警示等。

“删除”、“警告”、“保存”和“更多”按钮

3_2.边界半径

边界半径为按钮提供了很多个性化设计。具有更圆半径的按钮看起来更有趣。

不同边界半径设置的按钮

3_3.投影

按钮上的投影使按钮更加自然引人注意。阴影也可用于指示不同的状态。 ( https://material.io/design/environment/elevation.html#depicting-elevation )

Material Design通过使按钮在悬停状态下来达到这个效果。

不同阴影设置的按钮

3_4.标签样式

标签样式归结为字体以及阅读的容易程度。选择字体时，请确保它清晰可辨。

不同标签样式的按钮

以下是一些简单的方法可以让字体清晰易读：

* 选择大写的标签或大标题。（Material Design使用过带有大写标签的按钮。）

* 确保标签颜色与按钮填充对比较为突出。您可以使用( http://accessible-colors.com/ ) 查看。始终确保您的颜色符合AAA要求。

* 选择字体时，请确保字体清晰。

3_5.垂直内间距

按钮的大小对界面的可访问性起着很大的作用。大多数没有经验的设计师会说“按钮的高度应该是36像素”。如果你是为产品系统的设计按钮。你应该采用所用字体的行高，并在其中添加一定单位的内间距。例如：“我的按钮标签的行高为20px，垂直内间距为8px”。

不同垂直内间距的按钮

为什么会这样设定呢？这里有两个原因：

1）有视觉障碍的人可能会增大浏览器中的字体，因此他们需要更改字体大小而不会将按钮高度定死。

2）这也是开发人员创建按钮的方式-他们在DIV容器中添加内间距，而不是固定高度。

3_6.水平内间距

有两种方法可以接近水平内间距。

第一个方法：

使按钮宽度与网格对齐。这是保持所有按钮长度一致的好方法。但是它限制了你可以使用的字体数量。

宽度由网格决定的按钮

第二个方法：

两侧有固定内间距。我通常还会定按钮最小宽度，虽然避免了很窄的按钮，但是最小宽度按钮可容纳的不同字段会让按钮看上去不是很均匀。

宽度由内间距和标签长度决定的按钮

按钮状态和反馈 

按钮状态让用户知道他们是否可以点击、已经点击或已成功点击。按钮还可以有重叠的状态。例如可以同时是“点击”和“悬停”状态。

4_1.点击和禁用状态

点击状态就是鼠标可以点击按下按钮的状态，当然如果用户没有完成必要的步骤，按钮可以被禁用。例如用户没有输入他们的姓名和电子邮件地址，他们就不能提交他们的详细信息。

点击和禁用按钮

4_2.悬停和悬停离开（鼠标悬停和鼠标悬停离开）

在PC端按钮应具有不同的状态，让用户知道它是可点击的。通常“悬停”状态和“悬停离开”状态相反，但也不一定。你应该有效的区分让用户感知鼠标悬停在某个按钮上。

悬停演示按钮

平板电脑和移动设备上永远不会出现悬停状态，因为你的手指无法“悬停”。如果您正在为应用程序进行设计，请不要担心此状态。

4_3.焦点

焦点状态可能会让用户困惑。如果你的用户专注度较差，他们可能需要使用选项卡式导航。用户将点击“选项卡”在网站上移动，从一个导航链接移动到下一个。这意味着按钮需要有一个“焦点”状态才能显示它是“可点击的或尚未点击”。

默认的焦点状态是蓝色“发光”，幸运的是，我们生活在一个可以自定义按钮状态的时代。大多数设计师对悬停和焦点状态使用相同的视觉提示。

两个不同“焦点”状态的例子

4_4.按下

按下状态是当用户的光标或手指“按住”按钮时的状态。当用户将手指或光标“释放”在按钮上时，该按钮会指示为“已点击”。

“按下”状态的按钮

4_5.点击

按钮需要“点击”状态以向用户指示它已被点击。

“点击”状态的按钮

按钮标签 

按钮标签的诀窍是一致性。我们在产品设计前期需要制定按钮标签的规范，以避免以后花更多时间去改变你所有的按钮标签。

5_1.动词的用法

大多数按钮都包含指示按钮将执行什么操作，例如“保存”、“发布”、“编辑”。虽然“back”和“next”不是动词，但在接口上下文中，它们的工作方式似乎相同。我喜欢在编写按钮标签时使用“动词”+“名词”结构，这会让操作更具规定性，例如“保存文章”等，而不是“保存”。

5_2.案例

你还应该决定使用哪种字体大小写。以下是我使用的一些规范：

所有大写字母，例如“NEXT SECTION”，我把它们用于更专业的平台。Material Design使用所有大写字母的按钮。

标题框，例如“Next Section”，我倾向于避免使用标题大小写，因为它不像句子大小写那样容易阅读。就语调而言，我认为它介于“专业”和“会话”之间。

句子大小写，例如“Next section”，我把它们用于更“友好”或“对话”的平台。它更像是一句话，正常我们一句话结束会加一个句号，但是为了设计的美感，请不要加一个句号。

小写，例如“next section”，小写按钮标签使用频率较低。

5_3.一致性

为按钮编写标签时，请确保一致性。以下是一些我在项目使用的指导原则：

选择字数：每个按钮一个、两个或多个字

选择大小写：句子大小写，或大写，或标题大小写，或小写

标签结构：如“动词”+“名词”，或“动词”等。

触摸屏按钮 

桌面按钮大小调整（单击）

因为桌面上的光标比触摸屏上的手指小，所以您可以将按钮缩小很多。

触摸屏按钮尺寸（点击）

麻省理工学院触摸实验室的研究表明，人在使用触摸屏时手指部分是8-10毫米，如果你想避免用户手指触摸错误，最小目标尺寸需要10毫米或更大。如上所述-我需要较大的按钮。

那么，你应该做多大尺寸的按钮呢？专家们说的是：

Material Design建议接触目标应为48dp x 48dp，不同接触点之间距为8dp。

虽然我找不到关于iOS设计系统目标尺寸的任何文档，但一般的理解是，它的最小目标尺寸是44 x 44磅。

如果您在设计大小尺寸方面遇到困难，我强烈推荐Zac Dickerson关于易用性的故事。

按钮位置 

如果你非要放置2个按钮，主按钮应放在哪一侧？

主要和次要按钮的两种不同立场

选项A显示左侧为主按钮。它可能是用户首先想要看到的，所以先显示它。

选项B显示右侧为主按钮。我们希望用户首先看到辅助按钮，方便他们继续完成他们的旅程。右侧的按钮也表示继续。

系统按钮 

这里会介绍一些很酷的设计原则和系统。我喜欢Material Design System的按钮，因为他们的原理是经过深思熟虑的。

Material Design System的按钮

Material Design 按钮图片

Material Design中介绍了按钮的操作，以及按钮如何与系统中的其他组件交互。我喜欢用户在触摸屏上使用按钮的交互方式。

查看按钮部分：

https://material.io/design/components/buttons.html

悬浮按钮在这里查看：

https://material.io/design/components/buttons-floating-action-button.html

总结

如果没有按钮，你就不能真正构建界面；我们应该更多的关注它们。了解按钮在界面中是如何设计的？怎样正确的使用按钮并为你的用户提供最佳的体验？

原文地址：UX Collective

译文地址：水手哥学会计（公众号）

作者：Tess Gadd

译者： 水手哥

转载请注明：学UI网》如何让按钮设计的更迷人

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务