aimeeth的博客

对设计师而言，摹客提供的切图功能可以快速满足多尺寸的使用需求，支持根据不同设备导出不同尺寸命名的图片；而对于前端而言，它会让交付变得更简单，更易，对二者而言皆是双赢。

但是交给开发写的话，第一种除了要写 #000000 的黑色之外，还要写一串 Alpha 透明值，这样做会更消耗性能，且在不同屏幕分辨率、不同操作系统下，所实现的透明效果也会有偏差。以上就是我在实际项目中遇到的切图问题了，切图是一项靠经验积累的 UI 必修课，希望你在阅读之后留个印象，以后遇到类似问题也有了解决之法。16 进制色就是在开发中设定颜色的代码，每个颜色都有对应的 16 进制色，如 #000000 是黑色，#FFFFFF 是白色。所以，在我们输出设计稿给开发的时候，有网格渐变的部分直接切给开发。

但是我发现，有的产品会故意分两步让你填，这样就可以把注册和登录合并到一个步骤了（输入后看看注册过没，没有就走注册流程，有就走登录流程）。也如果把输入邮箱/手机号和密码分成两步，就可以省略一个这两个入口，不过登录就得多一步操作了。给未登录用户太多功能会影响注册用户占比，强制登录又会把使用门槛拉得太高，这个主要看产品定位吧。登录页表面看上去简单，经常不受重视，但仔细这么对比下来，发现可变因素还真是挺多的。登录页一般有两个勾选项，一个是自动登录、一个是同意协议条款的，大多默认不勾选。

而当业务演进到 “平台化、垂直市场、采购市场” 阶段时，UI 也面对了更多的问题和挑战：“周期性业务的品牌更新”，“不同品牌的多种垂直业务同期构建”，“众多相似的后台系统构建”，“跨业务/部门的设计、前端协作问题”。按照设计团队的描述，其也是从腾讯繁杂的业务中寻找共性，抽取出普适的通用设计解决方案，为产品赋能。同时，2021年推出的B端组件库，如ArcoDesgin、SemiDesgin、TDesgin，虽然其样式更美观，生态更健全，也未必会是产品研发团队的首选。...

Sketch的文件不用MAC电脑也能打开了Sketch 是一款适用于所有设计师的矢量绘图应用。矢量绘图也是进行网页，图标以及界面设计的最好方式。但除了矢量编辑的功能之外，Sketch同样添加了一些基本的位图工具，比如模糊和色彩校正。Sketch 软件的特点是容易理解，上手简单，对于有设计经验的设计师来说，入门门槛很低。对于绝大多数的数字产品设计，Sketch 都能替代 Adobe Photoshop，Illustrator 和 Fireworks。Sketch 是为图标设计和界面设计而生的。它是

Figma 最近真是热火朝天，2021 年 6 月刚获得 2 亿美元的 E 轮融资，估值高达 100 亿，居然以设计工具的身份成为独角兽。文章链接：https://www.forbes.com/sites/alexkonrad/2021/08/10/how-figma-became-designs-hottest-startup-valued-at-10billion/现在，Figma 终于取代 Sketch，在国际上稳稳占领了 UI/UX 设计工具的主流地位。上图来源：..

如今，智能手机的使用群体越来越广泛，老年人逐渐也成为了使用智能手机的主力军。你敢相信吗， 72岁的大爷还能制作360页图文说明教老年人使用智能手机，不仅教老年人如何查看健康码，还会给大家讲解如何网上购物！那么，伴随着使用群体的逐步扩大，界面的适老化设计也该逐步提上日程。作为一名UI设计师，我始终在思考一个问题：在进行适老化设计时，除了像老年机一样调大字号外，我们还应该进行哪些方面的设计，从而能让老年人们可以更加顺利地使用手机呢？所以，今天我想跟大家分享下我自己的一些想法，如果大家有.

算算时间，成为一名UI设计师也快两年了。前不久，跟大家分享了我入行这一年多以来的心得体会，发现反响挺好，到目前为止，依然有不少萌新小伙伴私聊我转行的相关问题。UI必备的设计技能我发现有很多准备转行的朋友之前连PS都没有摸过，不夸张地说，至少有70%的“UI爱好者”们完全没有实操经验。那么针对这部分的朋友，我建议可以先熟悉下设计工具，然后通过不断练习来逐步强化软件地使用。下面，我将从两个方面来为大家介绍需要掌握的必备设计技能：矢量绘制首先，不得不提到「布尔运算」。布尔运算是一种比较

当设计项目交付给客户的时候，你确定所有的问题都解决了么？ 除了令人血压升高的改稿意见外，一次小小的改动，更要来回发 N 多次（令人焦绿~）。 幸运的是，我倒有一个方法能够帮助广大设计师大幅减少重复工作，让效率 up up！它就是设计师的“提效”神器 - 摹客DT，一款基于web的多人协同设计工具！目前产品刚刚发布，参与公测还能领取大额红包（文末领取）。至于这款新产...

工欲善其事，必先利其器！相信每个前端都经历过用PS手动切图的原始手法，有时候偷懒，还会直接用QQ截图，现在想想真是初生牛犊不怕虎，怎么方便怎么来~当时就在想，如果能有一款神器，帮我解放切图这种“体力活”该多好！于是，它来了~摹客，前端必备开发神器摹客作为新一代的产品协作设计平台，快速简单的智能标注和自动切图功能，完美地解决了产品开发流程中标注和切图的难题，将原本枯燥的体力活进行了极大的削减，而它所拥有的“绝技”的功能却远远不止这些：1）自由的切图下载功能

在以前，要做好设计还原其实非常繁琐，我自己也用过又换过不少工具，但多少总有些地方难以磨合。直到今年年初，开始接触并使用了一款叫做摹客协作平台后，我才领略出了这一套神级设计还原的方法论！话不多，就三点：设计标注、素材交付、还原跟进！要知道我们的最终目标是让前端工程师将我们的设计进行还原，所以核心的部分归根结底还是他们在操作。而在这大半年的使用过程中，我发现摹客的整个协作流程非常符合我们和前端工程师的工作配合。而具体如何利用这款工具帮助自己实现设计还原，还得跟着方法论来。一、让前端泪流满面的

开篇说：上一篇，我写过一篇综合类的设计规范和适配。这一次我想重点写一下：网页PC端产品设计规范和组的设计拆解，对项目的设计效率提升，有一定价值和意义。分析项目设计中的组件，设计元素，设计规范与设计稿到开发的最后，尽可能保证产品设计还原的一致性。思考项目设计的实际场景，团队来调整优化产品设计整体方案和设计细节、优化产品交互和设计的一个过程。在这个团队协作的过程中，团队包括产品经理、体验设计师及开发程序员等测试人员，都要积极的参与讨论，多方并行参与到最后形成一套可以落地执行，...

什么？你还在一张张处理？？？ 切图和标注一直是多数设计师最耗时且最不愿意做的事情，PS快速切图新技能，教你解放双手，快上车。 本文纲要规则切图 不规则切图 快速批量切图 快速批量切出不同平台各种尺寸的图 高清大图，给用户带来良好用户体验的同时，也会刺激用户的购买冲动，所以是电商平台、企业平台常见的展示方式，但是图片太大影响网页的加载速度，反过来也会影响用户体验和网站...

在高速发展的互联网时代，网站设计的重要性不言而喻。对于设计师来说，一个好的个人网站可以很好的为自己展示UI/UX设计作品集；对于企业来说，一个好的网站可以为自己持续带来流量以及品牌曝光；网页设计师们总会热衷于追随最新的设计趋势，因为在这些优秀的网站设计实例中可以看到某些趋势，诸如：扁平化设计、视差滚动、响应式设计、流行配色设计等等。那么接下来我们就一起来剖析看看2018年年度最佳的10个优秀网站设...

毫无疑问，设计人员和开发人员之间存在着不可避免的设计交付工作，设计和开发的沟通优劣会直接影响一款产品的好坏。完美的设计交付必然是产品迈向成功的一个里程碑，然而在实际的工作中，设计和开发的交付却存在很大问题，沟通难、协同难、设计意图被误解的问题困扰着很多设计团队。 但其实，这些问题是可以很好解决的，我们一起来看看设计和开发之间究竟该如何协作。 1. 邀请开发人员参与设计流程 ...

网站原型设计是我们在设计网页过程中必不可少的一步，激烈的市场竞争让我们不得不对产品进行快速迭代，如何高速有效的进行原型设计成为了设计师头疼的问题。本文将以unsplash网站为实例，教大家快速搞定web网站原型设计。在网站原型设计之前，我们先来了解一下unsplash，它可能是目前全世界最大的免费图库，使用者可以里面免费下载海量的高画质相片。此外，网站为开发者提供 Unsplash API 用...

现如今，越来越多的移动和桌面端应用开始应用HTML、JS和CSS进行开发，对于网页开发和设计更是如此。目前这种局面也催生了更多新的网页技术，包括React.js、Angular以及Node.js这样的库。此外，随着需求及项目的进一步细化，开发者社区几乎每天都会出现新的库和开发工具，作为网页开发者或设计师的你，自然很有必要去了解和掌握当下最新的、实用的工具，持续优化工作方法、有效提高开发进度。以下小...

友情提示：文章尾部有福利相送，不要错过~在我从事UI设计师这几年的工作中逐渐发现，最让人糟心的不是应付各种奇葩的需求，完成设计稿，而是交付。每次交付的设计稿和最后开发出来的产品总是让我心塞无比，很少最终产品和我的设计稿是完全一致的。UI设计师对接产品经理是个问题，UI设计师对接前端工程师是个问题。UI设计师处于整个产品开发链条中最为重要也是最为尴尬的一环，产品界面设计完全出自设计师，但...

 设计是一种归于内心世界的创造又是趋于大众喜爱的展现，尤其是优秀网页设计这一块更是如此。往往在这方面的设计上要考虑大多数人的爱好、与用户的交互以及人机对话的逻辑等等，而作为资源整合的操盘手——设计师就会将这些维度的东西进行整合，形成让大众怦然心动又粘性十足的网页作品，网页作为产品对外宣传的窗口，从视觉上首先就抓住用户眼睛。从设计美学上来讲色彩的碰撞、设计的素雅、结构的独特等等都是每设计师在考量...

小编用同一张图的标注结果，测评一下当前市面上的各种智能标注工具，及其优缺点。 UI智能标注工具哪个好用？这样的疑问通常源于以下几个场景： 懒，不想一个个试；忙，没时间一个个试；白，无从下爪；对目前工具不满意； 下面小编用同一张图的标注结果，测评一下当前市面上的各种智能标注工具，及其优缺点。 1、MarkMan 体验地址：http://www.ge...

什么？都已经开始讨论2019年的设计趋势了？我依稀还记得最后一次看见秋叶在窗前坠落的场景，仿佛就发生在昨天。 但2018年也是真的到了底。在2018年的最后一月，说说2018年的设计热点，谈谈2019年的设计趋势，再合适不过。因此我们选取了8个一定会在2019年当中发光发热的设计趋势！ 这篇文章的要点包括： 有哪些影响2019年UI设计趋势的元素？ 2019年7大U...

无论是新手还是资深的Web设计师，除了掌握必备技能，选择一款适合自己的网页设计软件也十分重要！使用一款适合自己的网页设计工具，往往能令工作效率大增。2018年接近尾声了，各大设计工具都在2018年大放异彩。在本文中，小编为大家整理了2018年最受欢迎的10款网页设计软件。并根据不同的用途，从网页配色、原型设计、界面设计工具以及其他网页设计软件四大方面进行分类介绍。 网页配色软件 1...

从流程上看，设计交付是指设计稿交付给开发人员的阶段，它一般发生在设计稿完成后交由开发人员实现的时候。接下来就让我们一起学习在交付过程中，设计人员与开发人员须知的协作基础知识和相关建议吧！ 我们在UX Studio项目中有长时间与开发人员协作的经验，值得庆幸的是，我们每次都做得越来越好。事实上，我们现在已经拥有自己的开发人员，并且正在开发一个Dev Studio，以便为我们的客户提供完整的服...

​​本文翻译自 Behance 的年度推荐好文 2019 Design Trends Guide， 作者 Milo 整理了 2018 下半年的 Behance 上的知名作品，包含了 UI、动效、插画。​ source: https://www.behance.net/gallery/71481981/2019-Design-Trends-Guide​我们尝试研究在数位设计领域即...

什么？你还在一张张处理？？？ 切图和标注一直是多数设计师最耗时且最不愿意做的事情，PS快速切图新技能，教你解放双手，快上车。 本文纲要规则切图 不规则切图 快速批量切图 快速批量切出不同平台各种尺寸的图 高清大图，给用户带来良好用户体验的同时，也会刺激用户的购买冲动，所以是电商平台、企业平台常见的展示方式，但是图片太大影响网页的加载速度，反过来也会影响用户体验和网站...

9款原型设计工具与Sketch的强强组合，轻松构建交互原型！ 原型设计的发展历史经历了纸上原型、静态线框设计、到现在的可交互式原型。作为设计过程中最初始的阶段，设计师们对原型设计的要求也越来越高。因此，如今的原型设计工具格局也发生了很大的变化。 Sketch对于现代设计师而言，已经成了不可或缺的设计工具之一。各家原型设计工具也在悄悄的发生一些改变，迎合设计师们的需求，纷纷开发出了针...

如何才能完成一个成功的设计？对于设计师来说，除了巧妙的设计构思，设计资源也必不可少。如何才能快速找到这些设计资源，提高工作效率？在本篇文章中，小编为大家整理83个设计资源网站。全文主要包括Logo、字体、图片、图标、网站模板、设计灵感网站、配色方案、设计工具、设计课程9类设计资源。 Logo设计资源网站1. Logoed网站地址：http://www.logoed.co.uk/...

追随最新的网页设计趋势，紧跟设计潮流是设计师们必做的功课之一。快速更迭的网页设计趋势和网页开发技术对2019年的网页设计趋势来说必将产生直接的影响。 回顾2018年的网页设计趋势，不难看出许多设计趋势都是周期性和持续性的，例如盛行不衰的极简主义和响应式设计。那么，2019年它们的流行度也将丝毫不减，并且随着移动端网络的兴盛，会更加注重移动端网页设计的界面美观度和用户体验。那么，具体2019...

如果没有设计基础，怎样才有高效工作？今天就介绍几个易用的前端设计工具，并根据不同的用途，从配色、原型设计、字体、图片、以及切图标注五大方面进行分类介绍。前端设计配色工具1、ColorSupplyyy ColorSupply是一款可以一键生成扁平化设计配色方案的网页设计软件。用鼠标拖动取色杆，旁边会显示相应的色卡方案。色卡旁边的小圆点，是该工具的一大亮点，点击可以显示提供该色...

追逐潮流是每个行业都必做的一件事，对于直接影响数字产品定位和用户感知方式的UX设计也是如此。 不论你赞成与否，一年中仅仅发生一两次破坏性变化的日子已经一去不复返了，所以跟随大流已是大势所趋。如今的科技领域比以往任何时候都更具活力，同时也更具有竞争性。只有密切关注行业潮流才能更好的满足用户预期。若想在这个竞赛中拔得头筹，那你必须先发制人。 所以，在这篇文章里面，我们将对2018年UX...

 以下内容由摹客（https://www.mockplus.cn）团队翻译整理，仅供学习交流，摹客设计系统是国内独家设计规范制作平台。  事实上，过去的几年里，我时常会被问及各种设计系统相关问题。在经过长时间的深思熟虑之后，对于如何设计，构建和呈现产品（例如Mockplus，Marvel， Bantam and Modulz）相关设计系统方面,有了一些自己的想法和心得。这里就和大家分享一下...