大家好，我是 Clippp，今天为大家分享的是「微交互设计」。在推崇极简设计的当下，“少即是多”是微交互最真实的状态。微交互是关于细节的设计，这些微小的互动塑造用户体验，让参与其中的用户感到产品中稀缺的乐趣。那么微交互是如何改善用户体验的呢？又包括哪些常见的类型呢？一起来看看吧~微交互与用户体验1. 有助于用户留存微交互如果设计得当，会给大脑带来一定程度的刺激，从而让用户感受到片刻的愉悦。这点像产品运营中常提到的“啊哈时刻”，你的产品或服务让用户感到开心，而且与众不同，在别的产品中提供不了这样的服务，这就是你的产品持续增长的一点。这些时刻都有助于改善体验，增加用户继续使用产品的可能性，同样也有助于提升留存率，以及用户的复用率。2. 提升品牌个性和印象微交互的好处在于，为我们提供了一个建立品牌个性的机会。例如，大家可以想想微博的点赞效果，弹出来的点赞动效帮助微博塑造了独一无二的个性，给用户留下更深刻的印象。3. 提高直观性和可用性微交互是向用户提供持续反馈的一种方式，为用户的操作提供清晰的指引和反馈。如果操作得当，微交互可以提高可用性，整个过程也会变得更加直观和互动增强。例如我们在设置密码过程中，输入框会给出弱、中、强三个密码等级的反馈，实时将密码的复杂程度告知给用户，简明清晰。微交互的 8 种类型微交互在产品中的应用越来越广泛，而且随着技术的进步，微交互设计也有了更大的可能性。无论 ...继续阅读 (17)

栅格一直都是很多同学非常疑惑的地方，无论是栅格的日常使用，又或者是栅格在整个产品当中的作用，一直以来都有非常多的疑惑，今天就来聊聊栅格在实际工作如何使用，以及产品之间究竟有何区别。上期回顾：[link https://www.uisdc.com/b-end-grid-definition]其实在说栅格的使用，我们就在讨论网页当中的布局方式，以及他们之间的不同点。网页的布局方式：布局方式，本质上就是去处理窗口宽度与网页内容的关系用户会使用浏览器打开不同尺寸的窗口宽度，而网页内容究竟应该如何去适应这些窗口尺寸？通常会分为：固定布局、流式布局、自适应布局、响应式布局1. 固定布局（Static Layout）固定布局是一种最为简单的方式，它的设计逻辑是将页面当中的内容 “写死固定” 在屏幕上，内容不会随着本身窗口宽度进行改变，所有元素都使用 px 作为基础单位当然在固定布局当中，窗口大小与页面内容会存在两种基本关系：窗口过大则将页面元素进行居中，窗口过小则展示横向滚动条固定布局的好处是这种方式相对简单，只需将页面设计好即可，不会存在太多兼容性的问题（因为也压根没有考虑兼容性的相关问题）固定布局通常出现在 老旧的政府项目、网页的登录注册中2. 流式布局（Liquid Layout）流式布局是最基础的变化布局，它的设计逻辑是将页面当中的元素设计成可以流动的 “水” ，通过在页面，设计不同的“ ...继续阅读 (20)

你是否发现，微信订阅号消息列表的排序不是完全按照时间倒序显示，而是被打乱了，甚至可以看到数天前的文章被插入到今天的消息里面。这是为什么呢？每时每刻，我们都会接受大量信息的“轰炸”，除了一些默认或常见的排序方式，越来越多的掌握大量用户数据的公司会通过对用户习惯，进行默认排序，提高用户的阅读效率。这也是微信公众号消息列表阅读效率优化的目的所在：即消息会根据用户阅读喜好，对其一定时间内接收到的订阅号内容进行排序上的优化。那在信息排序方面，除了时间排序之外，还有哪些常见的排序类型？相对应的，它们的使用场景、优缺点又是什么？接下来，我们详细介绍信息排序的相关知识点，大家系好安全带，发车了……排序的价值通常意义，排序并不是页面的核心组件和功能，因此设计师与产品的注意力很容易将其忽略。这就造成其带来的体验与商业价值也并不明显，被湮没在产品中。但随着数据的增加以及场景的聚焦，排序的价值就会慢慢凸显。通常情况下，排序有如下价值：1. 提升信息查看效率通常我们都会对页面的布局、权重进行细细构思与体现，但是针对数据排序却缺少相应的关注与设计。如何将用户关注的数据排列在海量数据最前方，快速推荐给用户，避免用户的翻找，提升用户的阅读及查阅效率，这才是排序功能真正的核心体验价值。2. 圈住用户，增加用户的使用时长这类的产品总会把用户关注、感兴趣的信息优先推送给用户，让用户在不知不觉沉浸其中，大量挤占用户的时间 ...继续阅读 (20)

曾经遇到一个情境：对方要求的图片尺寸比我手上有的图片还要大张，而且还大了两三倍，但图片是采用位图格式，若非向量图直接放大就会出现失真、变形或模糊等问题，那要怎么解决呢？可以试试看图片放大工具，这些服务多半透过 AI 技术重新描绘图片，让它可以被放大到更大尺寸而不会有失真的问题。本文要推荐「AI Image Upscaler」是一个智能型的 PNG / JPG 图片放大工具，使用最新 AI 技术来提升图片尺寸，兼顾画质而且支持批处理，简单来说，AI Image Upscaler 可以将尺寸较小的图片放大四倍（例如 320×320 图片可以放大为 1280×1280），让使用者获得一张更大的图片。在我实际使用后这项服务确实能够很快速放大图片，而且效果非常理想。不过 AI Image Upscaler 网站也释出他们必须适度收费的公告（尽管他们希望可以让这个服务维持免费而感到抱歉），这些图片处理过程都需要投入资金，就以最基本的 Amazon EC2 G4 和 G5 主机来说，每个月就有不少费用要支付，还有像是带宽、储存空间、GPU 计价等等，透过广告方式依然无法平衡这些开销，于是有了付费方案，价格是每日 $9 美金、每月 $19 美金或每年 $69 美金。对于小量用户的用户来说，AI Image Upscaler 依然提供「有限度」免费方案，可以在每周免费处理 10 张图片，即使没有注册 ...继续阅读 (18)

今年中秋节，京东设计团队，运用实景合成技术，将DOGA和敦煌经典元素“飞天丝带”结合，让DOGA成功打破次元壁。你可以看到古朴雅肃的敦煌大漠中，DOGA化身为朝气蓬勃的飞天乐师，八音合奏，轻盈舞动。那么什么是实景合成动画？它是将虚拟的角色形象与真实拍摄的景物相结合的一种创作手法。它能让DOGA三维IP形象们打破次元壁，走到我们的身边，与现实的景物进行交互，创造出有趣的动画影像。12月18日 周六晚20:30，京东设计师全面解析实景结合手法。详细讲解，3D实景合成动画的技术要点与实现方式。内容分享概要：嘉宾介绍：Tom：京东设计师，擅长UI设计、动效设计。参与制作京东热门视频《2020年设计中心年度showreel》、《Joy330生日》、《中秋敦煌家礼》，负责京东京喜UI设计及品牌设计的相关内容。作品：《Joy330生日视频》《Jelly快闪课片头》如何报名：扫下图微信二维码联系管理员@招财，9.9元听直播： ...继续阅读 (16)

Studio 驱动 12 月版本支持 Omniverse、Clarisse 和 Powerdirector 的更新。本季 NVIDIA Studio 内容面向所有内容创作者，尤其是 3D 艺术家。热门的开源 3D 创意应用Blender推出了备受期待的 3.0 版，在 NVIDIA RTX GPU 的支持下带来出色的性能提升，同时还为 NVIDIA Omniverse 添加了 USD 支持。更快的 3D 创意工作流包括对 Isotropix Clarisse 重新设计的渲染器 Angie 的重大升级，以及 Cyberlink 的 Powerdirector 集成 NVIDIA Broadcast 技术，所有这些均由 Studio 驱动 12 月版提供下载支持。Blender 与 RTX 渲染器相得益彰Blender 3.0 标志着开源 3D 内容创作新时代的开始，提供令人兴奋的新功能，包括响应速度更快的视窗、更少的阴影伪影、快速访问自有资产和借用资产的资产库，以及其它自定义选项。视频链接：https://images.nvidia.cn/cn/youtube-replicates/Blender-3.0-Features-Reel-Showcase-QRqY_20ti9A.mp4Blender Cycles 渲染器经过全面革新，更大限度地增加用于 OptiX AI 降噪的 NVID ...继续阅读 (13)

前不久看了阿里巴巴的设计周，其中有一个话题引起我注意“适老化”设计，今天就来聊一聊适老化设计的注意点。*文章末尾我会把阿里巴巴的演讲 PPT分享出来，如果这篇文章能帮助到你，还请点赞、分享。1. 老龄化是一个全球趋势据《世界人口展望：2019 年修订版》的数据显示，到 2050 年，全世界每 6 人中，就有 1 人年龄在 65 岁（16%）以上，而这一数字在 2019 年仅为 11 人（9%）。再来看看我国情况：因中国的人口基数庞大，中国目前老龄化进程是世界第一。我国的网民除了地域呈现从一线城市向四、五线城市的迁移之外，也呈现出偏向老龄化的特征。2. 三孩政策暗示老龄化时代来临前不久国务院发布国家开放了“三孩政策”也看出来国家针对人口老龄化表现所作出的国家方针的决策。回归我们所在的互联网行业，也许慢慢的互联网的原住民不再是 Z 时代的年轻群体，他会慢慢的向中年、老年人所迁移。今年 1 月份国家也开始重视了关于老年人互联网生活感受，先后颁布了《关于切实解决老年人运用智能技术困难的实施方案》。通知在全国范围内组织了为期一年的互联网应用适老化及无障碍改造专项行动， 专项行动方案针对老年人、视障听障人士、肢体障碍人士使用 App 需求，进行改造要求，并且列出 43 个手机 APP 的适老化改造产品清单。我体验了百度、支付宝、喜马拉雅、滴滴打车这四款 App 针对适老化项目的改版。老年版还有 ...继续阅读 (21)

随着 3D 越来越广泛，3D 的应用越趋普通，不仅是电商行业，在 UI 页面中也能看到越来越多的 3D 的展示和应用。在现有流行的建模软件中，C4d、maya、Blender 为最常见的几个建模软件，而 C4d、maya，这些 3D 软件都是付费的，大规模商用风险比较大。而 Blender 是一款免费开源的 3D 软件，其中建模、动画、材质、渲染、视频剪辑等基本功能都能满足。2021 年 12 月 3 日，Blender 正式发布了 3.0。3.0 发布的内容有新的资产管理器、改进的动画工具集、USD 导入器、几何节点字段等。Blender 3.0 的发布结束了这个软件的第二个周期，为新的可能性打开了一扇门。对于想要掌握 3D 软件的界面设计师来说，Blender 无疑是比较适合的一款建模软件。而本期会从以下三个角度介绍 Blender，上篇先发 5 个我常用的Blender 插件，下篇会继续发5个。希望能对你有所帮助。如何安装 Blender 插件5 个常用的 Blender 插件Blender 常用快捷键如何安装插件新手可以先将 Blender 设置为中文模式，这样能方便你更好操作，进入 Blender 后，点击编辑-偏好设置-界面-语言-中文。Blender 插件的安装跟 figma 一样，你可以直接在内部搜索并且勾选使用。打开—偏好设置，直接搜索你想要的插件勾选上就可以了。 ...继续阅读 (16)

上篇文章给各位读者科普患者在线问诊的设计要点，这篇给大家聊聊医生在使用工具时的诉求。医学教材和资料非常多又厚实，治疗方法与时俱进资料越来越多，医生根本不可能完全记住这些资料。上篇回顾：[link https://www.uisdc.com/technical-product-design]这些医学教材只是冰山一角学这么多资料确实很费脑费头发刚好手机存储空间大又易于携带，是个很好的随身资料查询工具。我恰好参与过一款医生资料查询工具的设计，多次和医生进行访谈，有一些有趣的心得和大家分享。操作要高效除了游戏通过设置障碍故意降低效率让用户获得挑战的乐趣和成就感，其他产品都认为操作效率高是必须做到的。但到底什么才是真正的高效，每个行业的哈姆雷特的观点又不一样。1. 固定分类在新冠疫情期间，我们设计资料推荐模块，把疫情有关的医学资料都放在一个分区下。但医生很不买账，对他们而言“推荐”无法达成客观一致的定义。如果不点开查看根本不知道里面有什么，如果推荐内容多，还得一个个来看。对于医生而言，按科室、字母排序反倒是效率更高，因为这些分类都是客观固定的，无论哪个资料都能以这种分类来查找，绝对不会出错，效率反而更高。2. 熟悉直观移动端增加手势操作是一种提高效率的方法，例如相册滑动快速多选，既不会增加界面复杂度又能大幅度提高效率。但是医生工作很繁忙，他们根本不会花精力去学习这种高级技巧，只会用最常规的操 ...继续阅读 (24)

在这篇文章中，我将带你一步一步地学习如何准备、执行和分享成功的用户访谈：如何列出访谈必要问题？如何让你的团队对你正在进行的研究更感兴趣？我们还将讨论如何找到用户动机的根源：什么问题最重要？什么问题在用户研究中是完全没有价值？用户访谈可能是尴尬的、令人却步和奇怪的，但用户访谈对于理解用户需求和目标也是非常有用的。一次成功的用户访谈能给你很多可执行和测试的洞见。在这篇文章中，我将概述你必须采取的步骤，帮助你的访谈质量更上一层楼。在我职业生涯的初期，我曾经很害怕访谈。我会带着我的提纲去访谈，同时暗暗期望被访人不会出现。如果他们出现了，我只会潦草的提问，然后满足于我听到的任何答案——只是为了结束这令人不舒服的折磨。当然不用说，我的大部分访谈都没有什么洞察。逐渐的，我进行了大量的访谈练习，尝试了多种技巧去寻找问题的根源。现在我开始享受访谈。在过去，没有任何人能指导我，所以这篇文章的一些建议，其实是希望给到过去的我的。访谈前1. 概述必要问题你经常会看到一些公司定期与他们的用户交流，但是却很难有新的见解。这种情况发生的原因是对于他们而言，访谈已经是例行公事而不是好奇心。这些调研没有聚焦在必要的问题上，它更像是“让我们与用户聊聊，看看是否一切正常”。Lewis Carroll 为爱丽丝和柴郡猫创造了一场经典的对话：爱丽丝: “请你告诉我，我应该往哪条路走？”柴郡猫: &# ...继续阅读 (20)

Hi，我是彩云。在彩云译设计读者群里，最近有关于 3D 软件的优劣讨论络绎不绝，我自己在实际项目中正好也有用到各个不同的 3D 软件，比如 Maya、ZBrush、C4D、Blender、Substance Painter、Marvelous Designer 之类的 3D 软件，所以彩云挤出时间以实际项目流程角度写一篇干货来分享下各个软件之间的特点及优秀的学习教程，至于最后你想要学哪个，相信看完文章能够对你有启发。这些 3D 软件有些人可能听过一些，但我相信更多的朋友应该没用过这些软件，所以我想从自己的角度分享一些使用经验和技巧。我将按照我在实际项目中的使用流程逐个讲讲这些软件。我最近做的项目，包括 3D AR，3D 小游戏之类的设计大多数都类似于次时代的流程，流程大致分 8 个步骤（每个步骤中所用软件是我的个人习惯，你可以用自己更熟悉的 3D 软件）：做低模，我习惯在 c4d 中做；做中模，不断给模型增加细节，这个过程我依然还是在 C4D 中做；做高模，我会把 C4D 中做的模型导出 fbx 文件，然后用 ZBrush 来雕刻高模，进一步丰富细节；拓扑低模，把 ZBrush 中做好的高模导出，然后用 C4D 拓扑成低模；拆 UV，我会在 Maya 中进行拆 UV 的工作；烘焙，在 Substance Painter 中利用高低模型烘焙法线贴图、AO 贴图等等；画材质贴图，在 S ...继续阅读 (21)

大家好，12 月第 3 波精选设计干货来了！这一波设计素材当中有不少非常基础的设计素材，比如可以自定义的Emoji 表情，用户头像，设计系统，动效设计平台等等，这些素材在不同的设计场合下搭配使用，可能会有奇效~1、可自定义的线性 Emoji 表情https://fffuel.co/lllook/完全自制一套 emoji 表情成本总体上还是蛮高的，不过如果有现成可用的 emoji 模板，还能轻松通过调整改造成为你自己的版本，为啥不试试呢？这个名为 lllok 的 emoji 表情工具包就是这样的，线性风格的表情，可以自定义色彩和线条细节，由于是 SVG 格式，导出之后你还能轻松进行二次设计，可以说是非常好使了。2、1000个免费用户头像https://userpics.craftwork.design/这是一套包含 100 张优质插画头像的设计项目，完全免费，每个头像都包含纯色的圆形背景和方形背景2种，完全是矢量的，并且可以在 Figma 当中进行编辑。即使你不是为了设计项目做准备，想要更换头像也可以下载来用用。3、Figma 仪表盘设计系统 UKOhttps://ui-lib.com/downloads/uko-ui-figmaUKO 是一套可以用于 Figma 的设计系统，主要包含的组件大都是用来设计控制面板仪表盘之类的页面，从配色、图文排版规则到常用 UI 控件不一而足，非常全 ...继续阅读 (19)

成为优设的一员后，我每天收到最多的问题类型是：这个效果怎么做，该怎么学习PS/AI/AE/C4D。尽管互联网上有大量优质的教程和方法，但如何在庞杂的信息洪流中筛选出最优秀的教程，却成为很多新人迈出第一步的阻碍。大多数教程的问题不外乎这两点：知识点零散不全面你可能已经临摹了几十个教程，可能知道钢笔工具是怎么用的，然而当你梳理自己对PS 的知识掌握时，会发现Photoshop 实在是太庞大了，似乎每个工具都用过，但当你打开PS 想做一个效果时，不知道从何入手。因为大部分教程只简单给了参数设置，却不涉及工具使用的原理。今天学图层模式，明天学蒙版抠图，兜兜转转忙活大半年，用起PS 脑袋还是一团浆糊，难以灵活运用。下定决心花100多元买了一本超大超厚的PS大全，最后压根看不下去。（AI/AE 同理）质量良莠不齐纵观国内的教程网站，充斥着大量视觉粗糙效果过时的效果：类似的教程会极大影响新人的审美，并且和流行设计趋势脱节。我已经不止一次看到有新人因为这些低质量的教程，在学习的路上越走越偏。除了带偏审美，这些教程使用的软件和技巧大多数比较落后，例如截图中最热门的课程竟然用Photoshop CS 3 操作示范的，要知道，PS CC 2017 用1分钟完成的效果在CS 3 可能要花30分钟才能搞定，导致新人从一开始就输在起跑线上，浪费大量时间学习无用的方法。另外一个特别折磨新人的问题，是教程临摹到中 ...继续阅读 (12)

本文将市面上最常被使用的动效进行了一次总结并逐条阐明这些设计背后的原理，每条原理后面我都会为朋友们选出一些大家最常用的 App 作为例子，顺手打开就能体验啦。缓动（Easing）、偏移量和延迟（Offset & Delay）主要与时间相关。父子关系（Parenting）用于阐述元素之间的关系。变形（Transformation）、数值变化（Value Change）、遮罩（Masking）、覆盖（Overlay）、生成（Cloning）多作用于加强元素自身的延续性。视差（Parallax）多作用于表明元素的层级关系。蒙层（Obscuration）、多维化（Dimensionality）、镜头平移与缩放（Dolly & Zoom）作用于表明元素与空间的关系。1. 缓动（Easing）当运动发生的时候，元素运动速率的变化符合用户的预期。自然界之中是很少存在完全线性的运动的，没有任何东西能够完美的保持匀速运动，缓动效果能够让运动看起来更加接近自然，符合用户的认知，达到用户的预期。例子：你手机里面几乎所有动态效果都是缓动的，看起来是不是非常舒服和谐呢？2. 偏移量和延迟（Offset & Delay）利用偏移和延迟来错开元素的运动时间，表明元素之间的层级与关系。设计师利用错开运动时间的方法，让信息或界面元素按照有所区别的秩序进退场，利用明显的错序运动暗示用户信息与界面元素之间或许存在某些区 ...继续阅读 (13)

@他山之眼：中文互联网上关于人像磨皮的教程不计其数，其中也有不少精品教程，但大部分教程都存在这两个不足，一是过分注重于“器”（修图软件）与“术“（修图方法），而忽略了”道“（修图原理）。二是同质化严重，很多教程都是同样的方法换张图演示一遍。所以今天我就尝试从“道”的角度来与大家分享一些我的人像磨皮经验，希望对大家的人像修图有所帮助。一.磨皮之前我们需要思考的在进行磨皮处理之前，我们首先需要思考的事情是图片的用途。如果我们的照片只是用于朋友圈分享，那完全没有必要使用双曲线、高低频等磨皮方法，因为这时候对图片执行的精细操作完全无法在朋友圈中体现出来。如果我们需要完成户外平面广告级别的输出，那么仅仅使用插件肯定是不够的，我们对图片细节进行更多的雕琢。总而言之，采用什么修图手法取决于我们的图片用途，修图方法并不是越高级就越好，我们需要在效果与效率之间实现一个最佳的平衡。二. 磨皮的本质1. 降噪很多时候我们执行磨皮处理其实就是一个降噪的过程。噪点，无用信息，降噪就是消除无用信息。在皮肤上的斑点、疤痕、痘痘即是噪点，我们需要抹除这些无用信息从而获得更高的信噪比，让图像看起来更加干净自然。△  例如上图中标注数字的地方即为噪点信息不同磨皮方法对噪点消除的能力是不同的，有的方法在消除噪点的同时也会消除信号，例如高斯模糊磨皮方法，它在帮助我们消除皮肤瑕疵的同时，也抹掉了皮肤的质感，因此出现的结果是 ...继续阅读 (13)

每个月的前端开发者干货素材大合集，相对而言更加专注于为网页设计师和前端开发者搜集相关的工具和素材，这次的大合集当中包含一款颇为有趣的屏幕录像软件，几款适用范围较广的基于Material Design的框架，还有一些性能测试库也非常好用。这些前端工具与素材功能各不相同，总会有一两款是你感兴趣，甚至正好想要的~KapKap 是一款设计精巧的macOS 屏幕录像软件，它是基于Web技术来搭建的开源APP。这款应用中最令人着迷的是它的即时转码输出功能。Kap 是帮你记录APP的绝佳工具。SizzySizzy 是一款用来测试响应式网站的开发工具，它可以帮你在一块屏幕上测试多个屏幕尺寸下的显示效果。比起Chrome 内容之的移动端模拟器，Sizzy 要方便太多。值得一提的是，它也是Chrome 浏览器插件。Muse UIMuse UI 是一款基于 Vue.js 2.0 采用Material Design 风格的 UI 库，其中包含了诸如 Appbar、Card 和 Dialog 这样典型的Material design 风的控件。在它的基础上快速构建UI是个不错的选择。Advanced WP-CLI作为一名 WordPress 开发者，我我几乎每天都会用到 WP-CLI 。我最近才发现，WP-CLI 还能让你在创建主题的时候，作为 PHP UnitTest 的脚手架而存在！下面是 WP-CLI ...继续阅读 (14)

很久以前，大家还不怎么专门谈用户体验的时候，关于如何设计出一款好用的产品，大家基本只能靠猜。没有参照，也没有数据，那时候的设计师们凭借着自己的直觉、品味以及知识来设计一切。时过境迁，现在大家都非常重视用户的体验，也有越来越多的人参与了进来，建立了更加具体的知识体系，而更更重要的是，我们学会了用数据来“量度”体验。即便用户不去app store进行评论，我们也能够获得非常详细而且具体的数据。海量的数据在加以分析之后让我们知道用户是否喜欢我们最新的功能、读没读我们的广告、按钮位置改了之后用户找不找得到。自此，设计师们开始在一些情况下不再需要纯靠猜。不过，尽管有了这牛逼哄哄的数据驱动设计法，用户体验还有太多太多的范畴无法用数字去量度，设计师们还面对太多不确定的东西，很多问题大家也都没有个定数，方案孰优孰劣也无法很好地判断，它不像物理或者化学这类量化科学，是和不是分得很清。更要命的是，看起来非常科学的数据分析法得出的结论却与大家原本预期的东西大相径庭，让人不敢相信，觉得一定是数据收集的时候搞错了点东西。又有些时候，我遵循数据的指导作出改变，但最后获得的回报却不尽如人意，用户体验这东西在一些时候表现得像玄学。那么，用户体验到底是不是一门玄学？如何使用数据切实有效地帮助设计师们透过问题看本质，更客观更科学地设计我们的产品？1. 首先要理清“度量”和“体验”之间的关系聪明的人们学会了使用收集用户 ...继续阅读 (12)

不知道你有没有这样的情况，临摹了很多设计作品，但是等到自己原创的时候，就做不出来了！为什么？因为临摹的阶段有很多种，而且每个阶段都有不同的侧重点，也许你并没有注意对一些细节的思考。为了解决这个问题，今天菜心就来简单介绍四个临摹的阶段，大纲如下：跟着教程临摹对照原稿临摹加入想法临摹转化现实临摹1. 跟着教程临摹如今网上有很多设计类的教程，手把手教你把一个图标（或海报等）做出来，这种临摹方法会告诉你一些具体的数值，你只要跟着一步一步做就可以。但这样就够了吗？当然不行，如果不思考，跟着临摹再多也不会有太大的进步。需要思考什么呢？对软件技法的思考，例如斜面浮雕用来增加厚度：内阴影用来增加凹陷感：对质感表现的思考：暗部、亮部、环境色、反光。如下图：这些都是最开始临摹需要思考的问题，而不是仅仅跟着别人的步骤执行出来，如果不经总结思考，临摹再多也毫无意义。2. 对照原稿临摹拿到一个原稿，在没有其它教程的帮助下还原出来，这就是对照原稿临摹，如下图：如果前期在跟着教程临摹的过程中，有大量的思考过一些表现技法，其实这种照着原稿做的难度并不大，但如果你现在做不出来，就证明你思考的还不够，没有真正理解技法的原理，不过没关系，现在带着问题反过来思考，也能够有很大的收获。需要注意，在对照原稿临摹前，我们最好可以做一些前期的准备工作，比如，临摹的内容是什么风格，有什么特点等等，这样不仅可以增加自己的知识储备量， ...继续阅读 (11)

自从上个月阿里巴巴UED 的鲁班智能设计系统面世后，很多设计师都意识到仅仅掌握视觉设计是完全不够的，学会从「人的需求」出发做设计，才是对抗人工智能的武器。也正是如此，越来越多的人想系统学习交互设计。以优设的交互设计课程为例，开班以来每一期的报名人数都在递增：当然，掌握交互设计不仅是时代趋势所向，职场和个人发展也是重要原因，为了探清这300多位小伙伴都是出于哪些原因报班的，我们做了一次回访。成为更有竞争力的T型人才第一个同学说出了很多视觉设计师的心声，仅仅会画图标和界面，不知道如何分析和拆解设计需求，对每个需求都来者不拒，不对就改，还不对回去继续改，加班加点忙忙碌碌熬了一星期，最后产品经理还可能拍桌子：完全不是我要的样子啊！长久以往，你就真的变成了随便哪个设计师都可以取代的「执行者」。而在招聘市场上，这类没有想法的设计师也是最不受待见的。正如第二个同学所说，纯UI 已经满足不了当前的互联网行业了，想成为高级设计师，交互设计是必须跨越的一道坎。像这位同学报班后，现在无论把玩App 还是做视觉设计，都有了质的飞跃：这位学员现在摆脱了纯执行者的角色，能从用户的需求出发，工作的主动性也强了不少：零基础的同学可能不清楚视觉设计和交互设计的区别是什么，我们用上期一个学员的作业为你说明：这是一个订餐App 的项目，交互设计师通过分析产品定位和痛点后，画出了这个信息架构：最后给到视觉设计师低保真原型 ...继续阅读 (15)

dpi、ppi、dp、pt、sp 等等这些个单位我们天天接触，但是真正理解这些单位的设计师恐怕并不太多，毕竟真的有点儿复杂，别说学美术出身的设计师了，很多程序员都搞不太懂。但是作为一名 UI/UX/PD/etc. 设计师，因为不了解这些知识而闹笑话的事情几乎每天都在发生，不知道这些甚至连自己的做设计的电脑屏幕都不了解你觉得真的好吗？本次分享将在尽量不涉及数学，尽量用最简单的语言，尽量使用最贴近生活的例子来为在座各位患者朋友将心头这些个疑虑全部消除。由于本文篇幅有点儿长，所以将会分成四部分分享给大家。DPI 和 PPI 是什么？DPI 是英文 Dots（点） Per Inch 的缩写，在最早的时候，这个单位是用来描述打印机的性能的，意思就是这台打印机最多能用多少个墨点来打印一寸的内容。目前市面上常见的家用黑白打印机普遍都去到了 600 * 600dpi， 而家用彩色照片打印机则能去到 5760 * 1440 dpi。DPI 越高，每英寸内的墨点就越多，你打印出来的东西就会越清晰锐利。PPI 是英文 Pixels Per Inch 的缩写，意味每寸能容纳多少颗像素，用于描述屏幕的像素密度。我们上面提到的印刷物以无数多的墨点来构成图像，而屏幕同样也是以一定数量的发光点来构成图像。见过街上那些走红字的 LED 显示屏么？上面的那一颗颗的 LED 灯就是这块屏幕的发光点，我们使用的 MacB ...继续阅读 (13)

无论是国内外，UX 专业领域的教育资源是稀缺的，只有少数人有机会接受这些专业的教育，而各类机构及个人开设的一些培训班的质量以及专业性又无法得到保障。海量需求无法得到满足，于是本文为大家搜集了数个由国外顶尖高校以及企业发行的免费 UX 在线课程。这些课程的制作方分别是：密歇根大学、佐治亚理工学院、加州大学圣迭戈分校、麻省理工大学、明尼苏达大学、Google 等等。同款推荐：《COURSERA上有哪些顶尖大学的产品/设计课？》加州大学圣迭戈分校 — 用户体验良好的设计 (Coursera)这门课程共有 8 个课时：以人为本的设计：概述设计原理：概述社交计算输入与交互用户体验：研究与原型信息设计设计，运行与实验分析顶点课程这门课程在 Class Central 中获得了 4.3/5 的高评价。在这 8 个质量超高的课时里面 Scott Klemmer 教授专业系统地为大家将从交互设计的理论与实践、到认知心理学、再到用户界面设计以及人机交等几个方面专业地为我们讲述如何做出用户体验良好的设计，这些也是 UX 领域的基础知识部分。参与这门课程你将学习到如何对需求进行分析及研究、如何画原型图、用户界面设计的一些原则以及评价设计的策略等等知识。假如你能认真的完成课程要求完成的几个小测试以及小作业的话那是最好不过的了。密歇根大学 — 用户体验调研与设计 (EdX)这个课程在 2016 年秋天由密歇根 ...继续阅读 (13)

@喪心病狂十六夜貓：约在10年之前，在用户界面使用的动效，大部分是一些广告和闪烁的弹窗。然而到了今天，已经发生了翻天覆地的变化。交互设计和动态效果的详情，带来的是网站或APP的根本改变。这种思维方法，在下面有详细的描述。为了设计出更好的数字产品，从一开始网页或APP就要有良好的交互性质是非常有必要的。这一次，就将如何有效的运用UI动效的方法详细介绍给大家。使用动效的理由动态（英: Motion）在从他的性质上来说，就是用户界面上最突出的元素。相较于文字文本和静止的图像，动态的更容易被发觉。我们的视线会不由自主的追寻着动态的物体，这也可以说是一种条件反射。试着将这个利用在功能性的动效上吧。功能性的动效是？功能性动效，指的是在UI设计中作为功能的一部分被采用的小动效，有着非常明确和合理的目的。为了减轻认知的负担。防止发生变化时看漏（英: Change Blindness）。在空间关系中确立良好的层级关系。以用户为中心的设计方法，直观的用户界面，响应性，人性化等等都是必须的。功能性动效，将有助于你实现这些目标。那么，就让我们详细的来看一看功能性动效吧。用功能性动效完善UX对APP或网站的体验或印象，通过在好的地方使用动效，会更易于使用，让功能性更加完善。通过仔细研究测试，功能性动效，都包含以下的功能、要点。01. 可视化的反馈舒适的交互设计可以提供更好的反馈。无论是否成功，反馈能告诉用户 ...继续阅读 (22)

人是高度视觉化的生物，能够即时处理大量的视觉信息，据统计我们所获取的90%的信息都是视觉化的。单一图像比起大块的文本对于用户而言更容易消化吸收。因此，在许多情况下，静态的图片能够传达出相当复杂多样的想法，尤其是在进行大范围展示的时候，它比文本的表现力要强的多。人的大脑对与图像信息的处理速度要比识别文本要快得多。长期以来，图片都作为UI界面中最具有表现力的元素而存在，而最近几年，插画在UI中出现的比例越来越高，在许多地方都有替代图片的趋势。其实原因并不复杂，插画比起图片可控性更强，更容易发挥创意，营造氛围，传递信息。从内容到技术细节，插画都在某种程度上超过现成的图片。在今天的文章当中，我们聊聊插画在UI设计中的运用，探讨一下它是怎么提升用户体验的。插画的特点实际上，现在我们所说的插画（illustration）的词根 illustrate 原本的含义是“澄清，说明”。在现代平面设计中，插画是颇为常用的展示性元素，是视觉传达的重要工具。插画在设计作品中，常常用来引导、启发和呈现信息，更有针对性地、视觉化地同用户进行交流。真正高效的插画一定是有针对性的，易于识别的，并且能够被不同的用户轻松理解的。想要让插画最大化地为用户创造价值，你可以参考下面的四个范例：1、首页插画好的网页设计设计对于潜在用户的影响是巨大的。许多用户在判断一个企业、团队或者品牌的优劣的时候，他们的网站的优劣是一个重要的 ...继续阅读 (13)

@阿随向前冲：中国PS第一人@李涛老师最经典的课程，讲真，PS快速入门看这份万字笔记就够了，零基础非专业小白学PS最值得收藏的笔记来，这有一份PS入门速效大法。总有人问阿随君怎么学PS，零基础、非专业、小白该怎么从零到入门，迅速成长为高手呢？在阿随君的答案中，有很多高频关键词反复亮相，而这其中李涛老师是我每次都强势安利的。我知道，可能小伙伴们还是会有些摸不着头脑，生活节奏那么快，静不下心来看那么长、那么多课的视频教程。好吧，阿随君这次掏着心窝子把自己当年看李涛老师课程随手记的笔记，长达一万多字的超级干货，全部发上来分享给大家。要知道，有太多的PS高手、大神都是从李涛老师的课程起步的，如果你接触PS比较早，“中国PS第一人”的尊号想必是听过的。△ 李涛老师这份笔记比较朴素，并没太多配图，原貌呈现。因为阿随君考虑再三，决定将修改降到最低（教程基于cs2做的，所以只有涉及到软件有变化的地方会稍加说明），保留当初笔记的原貌，因为在学这堂课的时候，我也是非设计专业、零基础的小白，一字一句的整理都是从“小白”的心态出发的，也许这样的记录正是你所期待、所理解的。PS：本来阿随君以为笔记早就找不到了，电脑都换过了，从周末就在各种翻邮箱翻硬盘，功夫不负有心人，终于还是被我找到了word文档。说这么多，其实只是希望它能帮助喜欢PS的亲爱的你们，愿我们一起学习、一起进步，感谢长久以来、相遇过后对阿随君的 ...继续阅读 (14)

@他山之眼：国内有非常多讲解拍摄和构图技巧的文章，今天这篇文章我尝试用一种全新的方式来探讨和讲解这个话题，希望对大家拍出更好的作品有所帮助。这篇文章所使用照片均是在一次登山时拍摄完成的，前后拍摄一共耗时两个小时左右，成片质量一般，但用于对比讲解也已经绰绰有余了。一. 换个角度，再换个角度！在长沙有一个著名的景点：东方红广场，此广场修建于文化大革命时期，此处屹立着一个毛主席的雕像，十分雄伟壮观，是到长沙游玩必须浏览的一个景点。此处全景如图：如果我们想要拍摄毛主席的雕像，应该怎样拍摄呢？绝大多数人都会选择正面拍摄，这本无可厚非，因为这是自己“到此一游”的最佳证明。但是这个角度拍出来的照片基本上都是千篇一律，极易沦为“食之无味”的游客照。这时候我们应该怎么做呢？我们首先应该绕着广场一周，观察一下整个广场哪个位置的视角更为独特，然后我发现了这个地方：此处位于广场右侧，上面的树木葱郁茂盛，有一种众星拱月的感觉，我尝试了几个角度：这个角度的问题是画面的元素过于复杂，下方的人群，身后的标语，无规则的树枝，并没有实现我想要达到的效果。这个角度的画面元素倒是简洁了不少，但是雕塑主体被树叶遮挡，也不合适，于是我又往前走了几步，尝试了一个角度：△  众星拱月在这一个角度中，我用了较为夸张的视觉比例，重点凸显了树木的繁盛，并着力打造包围之感，凸显出雕塑的地位。上面这一张照片从视觉效果角度来说是比较成功的， ...继续阅读 (16)

面对完全不一样的媒介，设计师们会有不一样的目标，也会使用不一样的手法进行设计。 比如说一名 UI 设计师与平面设计师的最大区别，大概就是在于 UI 设计师能够以开发的视角来做设计。UI 这个词或许听起来非常新潮，但是 User Interface 这个词组及其含义其实很早就已经出现了。古时候的设计师使用 GIMP 对用户界面进行设计，后来我们使用 Photoshop 进行这项工作，而现我猜大多数 UI 设计师们都已经用上了 Sketch。UI 设计与其他的一些设计行当最大的一点区别就是，UI 设计师输出的并不是最终的作品，他们通常还要把自己的设计先交付给开发，而且交付这个过程非常重要。你怎么去设计以至到你怎么输出你的设计将会直最终的产品产生重大的影响，所以对于这种媒介（software），设计师会面对的问题将会面对什么样的新问题。开发使用他们的开发工具（iOS 的 Xcode、Android 的 Android Studio 等等）按照你的设计来构建界面的的方法和思路会与你在使用 Sketch 来设计 UI 的思路非常不一样。所以，既然 UI 设计师的主要工作是交付，那么学会以开发的视角和分析方法来进行设计将非常重要。开发眼中的设计稿长什么样人们总是会带着自己既有的知识和以往的经验来分析客观事物，开发眼中的设计稿跟设计师眼中的设计稿差异其实非常大。开发通常以视图（Views）为单位 ...继续阅读 (10)

爱奇艺PC站的风云榜，是一个提供各种频道榜单的荟萃之地。其存在的主要功能，是让用户能够了解热门的剧目，从中选择想看的影片，也能够了解最近都在流行些什么。然而，该模块很久没有更新，在内容展示上有着比较大的问题，导航上也存在使用不便的情况。因此，产品提出优化。在这次优化的过程中，我使用了之前介绍过的“目标导向设计法”来指导我的设计，效果显著。下面跟大家具体介绍一下。什么是目标导向设计法：《一招教你让交互方案更靠谱！超好用的目标导向设计法》首先，先来看一下原版的风云榜长什么样：△ 改版前的风云榜页面改版前，风云榜首页的结构是：一行两个榜单，其中一个是列表的样式，另一个是类似Windows Phone的磁贴样式；两种样式交叉使用。左边是导航栏，将风云榜中的所有频道都列了出来。产品提出的需求，一是优化首页的排版，增加视频的点击率；二是优化导航，使导航在浏览的过程中能够方便用户选择任何他想选择的频道。产品同学用原型图简单地表达了一下她的想法，如下图所示：△ 产品提出的原型图以上是该项目的基本信息。下面我们来使用目标导向设计法进行设计。首先，需要明确设计目标，也就是产品目标和用户目标。分析一下，项目的产品目标是什么呢？旧版页面信息展现不合理，点击率低；改版希望通过优化信息展现，提升点击率。旧版导航条在浏览过程中频道的展示不全；改版希望改善导航条的交互，使用户在上下滚动浏览的时候，可以方便选择任何 ...继续阅读 (11)

Color Fonts，多彩字体是近两年频繁出现的设计语汇，越来越多的设计项目当中，开始使用这一技术，尽管目前它依然处于起步阶段。诸如Adobe Typekit 这样的字体服务供应商，已经开始提供一些支持特定浏览器的多彩字体。也正是因为多彩字体使用范围越来越广泛，才有设计师预测，它会成为网页设计领域的“Next Big Thing”。作为一个植根于网页设计领域的设计趋势，多彩字体到底有着什么样的特征？今天的文章，我们一起来聊聊这个话题。什么是多彩字体顾名思义，多彩字体（Color Font），字体本身所包含的不仅仅是外观形体的特征，不同的区域可以以不同的色彩来呈现，甚至包含阴影、渐变、纹理和透明度等属性。这些时髦的属性不仅赋予了字体复杂多变的色彩，而且让它具备更加丰富的细节。多彩字体不仅包含了常见字体中应有的矢量形状或位图信息，或者兼而有之，这也使得多彩字体的字体文件要比普通的字体更大。如果你对于多彩字体没有太多概念，那么你想想我们用过的图标字体和表情字体，它们就是多彩字体的一种。同时，我们常用的字体通常被称为 Chromatic Font ，也就是“有色的字体”，因为它们通常只能包含一种色彩。不过，多彩字体还存在问题，最大的问题在于目前并没有一套通行的字体标准。使用类似SVG的矢量文档的还好，而使用位图格式的多彩字体，字体文件大小则会随着字体尺寸的增大而膨胀。目前常见的多彩字体包 ...继续阅读 (13)

Framer Studio在昨天（5 月 31 日）发布了 V90 版本。以往使用纯代码构建界面、纯代码编辑一个可编辑原型的Framer强是强矣，但是对于我国大部分没有 Coding 基础的设计师来说实在只能说是望码兴叹，学习成本确实很高。在要合理构建界面的同时又能兼顾到交互动画逻辑能够顺畅的跑起来，这种代码的组织能力恐怕不是大家把官网上面所有的教程看完就能学会的，这是一种玄学一般的操作意识。不过我认为一款强大的软件随之而来的必然是有一定复杂性，既要面面俱到满足你所有的愿望，又要简单快捷不花费你太多脑力的东西基本上是不存在的，譬如美图秀秀之于 Photoshop（没有贬低任何一方的意思）。我知道很多设计师朋友都想往动效、开发方面继续自己对于设计这个命题更深入的探究，如果你是也是这样想的话，那么学一些代码怕是绕不开的，而来到了 V90 版本的FramerStudio 恐怕是现在市面上最适合设计师学习代码制作原型、学习代码来表达自己的动效、学习代码来试验自己交互逻辑的一款工具。说了那么多，下面跟大家简单分享下 V90 到底更新了啥，变成了什么样吧。可以看到最明显的地方是：上面分成了 Design 和 Code 两个 Tab。1.图形设计的强化（Design Tab）△  Interface design, the way its meant to be.让界面设计变回它本该有的样子。F ...继续阅读 (11)

编者按：本文介绍了两个超实用的福利，一个是由日本网友以思源宋体为基础，修改后开放免费下载的新字体，文字张力更强。另一个是谷歌出品的AI智能绘画工具，和AutoDraw 类似，玩法简单有趣，值得一试。还记得上个月介绍 Google、Adobe 再次合作推出免费字型「思源宋体」（Noto Serif CJK）吗？相信大家都对几年前的「思源黑体」印象深刻，甚至拿来作为日常工作使用。目前免费资源网络社群也是使用由 Typekit 提供的思源黑体网页字型。一直以来可以免费使用的中文字型不多，原因在于中文字体开发时间长、成本高，不过思源宋体或思源黑体最大进展并不只有免费，而是开放原始码特性可再发展出其他字型。本文要介绍的「装甲明朝」是日本网友以思源宋体为基础，修改后开放免费下载的新字型，可以从最前面及下方图片看到装甲明朝体范例。如果要说做了哪些变化，显而易见的是水平笔划部分被大幅调细，文字张力也有所提升。根据装甲明朝开发者说明，这个字型适合使用于军事或偏向阳刚的设计。装甲明朝STEP 1开启「装甲明朝」开发者网页后，找到「フォントダウンロード」下方的下载链接，点击我以红色圈选处就能取得该免费字型压缩文件。STEP 2下载后解压缩，取得「SoukouMincho-Font」里头有字型文件 SoukouMincho.ttf 。STEP 3点击字型文件后，从上方选单找到「安装」就能将它安装至你的 W ...继续阅读 (15)