明度 纯度 色彩 色彩明度与纯度的 4 种类型配色,你知道吗?之前为大家介绍了 PCCS 色彩体系,提到了 PCCS 色彩体系中的各项概念:24 色相环、17 级明度阶梯、10 级纯度阶梯及 12 种融合明度和纯度两个概念的色调。配色找不到感觉?这个PCCS色彩体系帮你从根本上解决!可能很多小伙伴都有这样的感觉:对色彩的各项概念已经非常了解,日常积累了很多优秀的色彩搭配素材及作品,也有进行临摹训练,但是自己在面对一个新设计命题时,却依旧无法准确选出最贴合主题的颜色,各种配色试来试去都不是自己想要的感觉。阅读文章 > 为了帮助大家更好的理解 PCCS 色彩体系中的各个色彩概念,将其运用到今后实践中,今天带大家更深入地了解 PCCS 对色彩明度和纯度的分类,看看不同明度和纯度的色彩搭配会呈现什么样的效果,以及哪些方法可以帮助我们取得更好看和谐的配色。明度——高明度与低明度PCCS 色彩体系将明度分为 17 级,每 0.5 级为一个阶梯。为了方便理解,我们也可以粗略地分为 9 级,黑为 1.5,白为 9.5;以 5.5 级灰为中间点,1.5~5.5 为低明度,5.5~9.5 为高明度。明度差越大颜色对比越明显,明度差越小则对比越弱。1. 高明度的色彩配色高明度色彩区域包含的色调有:pale(稀薄的)、light(浅的)、bright(明亮的)、light grayish(浅灰的)、soft(柔软的)、部分的 vivid(鲜的)和 strong(强的)。使用高明度的色彩进行配色令人感觉明亮,存在的问题是明度差有限,容易造成对比不够强烈,无法突出重点。所以想要使高明度配色的画面层次对比明显,更有视觉吸引力,可以加入少量的暗色。2. 低明度的色彩配色低明度色彩区域包含的色调有:dark grayish(暗灰的)、grayish(灰色的)、dull(钝重的)、dark(暗的)、deep(浓的)、部分的 vivid(鲜的)和 strong(强的)。低明度的色彩配色会给人暗沉的印象。如果想避免画面过于灰暗沉闷,可以加入少量高明度的色彩,画面会更充实更有活力。纯度——高纯度与低纯度PCCS 色彩体系将纯度分为 10 级,无彩色为 0s,纯色为 10s。但是 10s 是用色卡无法再现的颜色,所以色卡中的纯色是 9s。1. 高纯度的色彩配色高纯度色彩包含的色调有:vivid (鲜明的)、bright(明亮的)、strong(强的)、deep(浓的)。其中 vivid 为准高纯度色,其余为次高纯度色。高纯度的配色给人灿烂华丽的感觉,充满活力;而加大高纯度色之间的明度差则可以让画面层次分明,视觉上更舒适。2. 低纯度的色彩配色低纯度色彩包含的色调有:pale(稀薄的)、light(浅的)、light grayish(浅灰的)、soft(柔软的)、grayish(灰色)、dull(钝重的)、dark grayish(暗灰的)、dark(暗的),其中 light、soft、dull、dark 四个色调为准低纯度色彩,其余为次低纯度色。低纯度的色彩组合带来沉着稳定的配色,给人朴素雅致的印象。这类颜色搭配在一起不会显得突兀,但是想要画面更出彩更有吸引力,则需要拉开色彩间的明度对比,或加入适量的高纯度色彩。明度与纯度的 4 种类型配色将明度与纯度联系在一起研究,我们可以将其分为 4 种配色类型,分别是高明度/高纯度、高明度/低纯度、低明度/高纯度、低明度/低纯度。1. 高明度/高纯度配色高明度/高纯度色彩搭配在一起会十分的鲜艳明亮,和上面提到过的高明度配色一样,这个区域的配色要注意拉开明度层次,以避免颜色分界不清带来的视觉疲劳。2. 高明度/低纯度配色高明度/低纯度的颜色搭配在一起不会显得花哨也不会过于沉闷,给人温润淡雅的感觉,搭配一些暗色使用会使画面更完整丰富。3. 低明度/高纯度配色低明度/高纯度的颜色搭配给人浓郁厚重的感觉,区域内包含了一部分 vivid 的色调,搭配使用也能使画面充满活力。4. 低明度/低纯度配色低明度/低纯度的色彩都比较暗沉钝重,给人阴郁压抑之感,但是如果运用得当也能传达出深刻厚重的情绪。如果想这种配色看起来不那么压抑,可以加入一些高明度/高纯度的色彩,画面也会更有吸引力。总结不同明度、不同纯度的颜色搭配组合会产生不一样的效果,给人的感觉也不一样。通过文章我们了解了明度与纯度的 4 种类型配色,它们对应不同的色调,能营造不同的情绪氛围,因此各自适合不同的主题。将这些弄清楚,以后在确定配色方案时就能有的放矢,更快更准确的找到合适的配色。喜欢的小伙伴记得点赞收藏加关注,今后会继续为大家带来更多有用的色彩知识!4000字干货!从零开始帮你提高配色水平!赶在年前将这篇关于“配色”的设计解析整理了出来,分享给大家,希望对大家有帮助。阅读文章 > 本篇来源:优设网原文地址:https://www.uisdc.com/color-value-and-purity
拖动 屏幕 窗口 本文为 Material Design 折叠屏设计指南中文版译文第三篇,超多干货建议收藏。往期回顾:Material Design 折叠屏设计指南(1):概述折叠屏使用柔性屏幕可以折叠或展开,根据你的需要无缝扩展可用的屏幕空间。阅读文章 > 如何设计折叠屏?来看这份设计指南!最近做了HUAWEI Mate Xs手机折叠屏的相关设计,借此机会「趁热打铁」分享一手界面操作体验、适配技巧分享给大家,希望对各位设计师同学有所帮助和参考。阅读文章 > 导航组件在可折叠设备上,将导航组件放在靠近屏幕边缘的地方,因为这样更容易触及。使用导航栏组件作为主导航。使用底部导航栏作为主要导航,会使用户很难触及屏幕中间的位置。当心!底部导航栏最好用于移动设备,而侧边导航栏(Navigation rail)则更适用于可折叠和屏幕较大的设备。App 可以在到达次级页面后隐藏侧边导航栏,只要你能显示返回到主页面的按钮。次级页面在打开时可能会隐藏导航栏,所以显示返回按钮有助于返回主页面。次级导航1. 顶部应用栏(Top app bars)应用栏容器用于显示和对组件分组,帮助用户执行主要操作,或对主体容器中的元素执行操作。应用栏容器可以与导航容器组合使用。当心!使用顶部应用栏会在屏幕上产生带状效果临时组件1. 对话框将对话框放在屏幕两侧,避免将关键交互放在中间。可以这样!将对话框放在屏幕两侧。多窗口交互折叠屏提供更大的显示面积,经过优化,可以同时显示多个 App。这种额外的空间对于多任务处理或依赖信息比较或管理的工作流程特别有用。通过最大限度地减少用户在单个屏幕上的 App 之间的切换,使得生产力、授权和更无缝的用户流成为可能。在 Android 12 中,用户可以在新的概览(overview)中创建和审视多个窗口。请点击以下链接了解更多关于 Android 12 “最近使用的应用屏幕”的内容。( https://developer.android.com/guide/components/activities/recents )拖或放(Drag & drop)使用 Android 的拖和放框架,你可以让用户以图形化地拖放手势来移动数据。该手势可以在同一 App 中移动到一个视图到另一个视图,或者在启用多窗口模式在一个 App 和另一个 App 之间移动。尽管该框架主要是为数据移动而设计,但你也可以将其用于其他 UI 操作,例如,你可以创建 App,当用户将一个颜色的图标拖到另一个图标上时,将两个颜色混合。1. App 连续性在可折叠设备上运行 App 时,App 可以从一个屏幕自动过渡到另一个屏幕。过渡后,App 应该在相同的状态和位置上继续运行,当前的任务无缝衔接。用户需求创建、排列和调整窗口的方式对所有用户和任何屏幕尺寸来说都应该直截了当。无缝窗口管理的模式包括:运用 Material 动效指南中所描述的平滑过渡(smooth transitions)确保用户可以轻松创建多个窗口,并根据需要在它们之间移动确保心智模式(mental models)和交互模式的简单性,这样用户就不需要考虑哪种模式适合哪种任务。在可折叠设备中,包括那些带物理、有缝铰链的设备,设计和实现窗口交互应该一致用户通常使用多个窗口来并排显示和使用 App。例如,收件箱 和 照片 App 并排。窗口创建和行为Android 为用户提供了多种创建多窗口视图的模式。1. 任务栏(Taskbar)在 Android 12 中,任务栏为钉住和建议的 App 提供了一个启动点,可以很轻松把 App 变成独立的窗口。要创建一个新窗口,用户需要从任务栏中选择并拖动 App,然后移动 App 图标来指示窗口应该显示的位置。任务栏可以作为创建多个窗口的起点。将 App 从任务栏拖到屏幕的一侧会创建一个分窗口视图(split-window view)。上下文菜单用户可以通过 App 上下文菜单的概览(overview)来创建多个窗口。当使用上下文菜单将 App 固定在屏幕边缘后,从概览中点击第二个 App 将触发分屏。3. 调整窗口大小默认情况下,多窗口被创建为 50/50 并排分割窗口。多窗口是一种临时状态。当把手(handle)拖动到屏幕的边缘时,被缩小的窗口将关闭,退出多窗口视图。窗口可以进一步调整为 1:3 或 2:3 的比例。这些比例提供了主窗口和副窗口相互转换,提供了更大的灵活性,并允许根据需要将重点放在其中一个 App 上。屏幕把手可以被拖动和释放以创建所需的窗口比例。把手会自动调整到最近的捕捉点(Snap point)。把手也可以用来关闭其中一个窗口,这将退出多窗口视图。使用分屏把手调整和关闭多个窗口大小竖屏 50/50 分割横屏 50/50 分割App 的大小可以填满三分之一的可用窗口空间。由于屏幕面积减少和对布局的挤压,确保 App 在这个狭窄的宽度上仍然可以提供可用的体验,避免在这个比例下进行复杂的操作。App 的大小可以填满三分之一的可用窗口空间。由于屏幕面积减少和对布局的挤压,确保 App 在这个狭窄的宽度上仍然可以提供可用的体验,避免在这个比例下进行复杂的操作。拖和放(Drag and drop)在可折叠设备上的拖和放交互用于组织、编辑和一次为一个或多个元素应用操作,使普通用户目标更简单、更高效。可折叠设备为拖和放操作提供一个优势,因为额外的屏幕或表面区域可以简化操作,并为拖和放的项目提供即时反馈。请记住,对于较大的屏幕,当拖动由触摸板或追踪速度较慢的鼠标控制时,可能很难将一个对象移动较大的距离,因为手指可能在拖动的对象到达目的地之前就移动到了触摸板的边缘。Android 拖和放框架(Android drag and drop framework)尽管该框架主要是为数据移动而设计,但你也可以将其用于其他 UI 操作,例如,你可以创建 App,当用户将一个颜色的图标拖到另一个图标上时,将两个颜色混合。1. 粗略和精细的投放投放的粗细程度通常应该随着完成一个动作对交互的预期依赖而提高。对于触摸交互,避免将拖动的项目放在可能被手指或手遮挡的地方。粗略投放可拖动项目的目标可以是粗略的,也可以是精细的,这取决于 App 场景的不同。拖动到一个粗略的位置通常会导致该项出现在一系列条目或内容块的末端。精确投放相比之下,对于精确投放的交互在过程中提供反馈,提示投放将发生的确切位置。例如,在发信息和编写文件时,光标可以用来显示被放下元素将出现的相对精确的位置。光标反馈对被拖动的图形的移动做出反应。这些微妙的指示器显示了对象将在文本中精确位置。视觉指示器显示可拖动个元素的视觉指示器可以非常突出,也可以大部分时候隐藏,这取决于优先级。指示器模式从最明显到最不明显排列如下:对象上可见的持久可供性(affordance,译者备注:人对事物功能的理解),如表示视觉抓握的把手上下文中的明确的提示(call-out),比如标签文案(labels)在被动交互(如悬停)或通过上下文暗示之前,线索在视觉上是隐藏的完全隐藏直到拖动动作被启动根据用例和流程,有时可能需要提高指示器的级别,而在其他时候,它可能不是流程中的主要交互,作为支持和补充性的指示器更合适。放置区域(drop zones)放置区域是一致的视觉模式,它阐明了预期和交互类型。放置区域模式的例子包括:持续性区域: 在任何拖动操作开始之前,静止时显示的占用空间。用于告知拖放操作是可用的,并且可以作为功能拖放。例如页面上用于上传文件时的加载区域。热点(Hotspots): 当拖动开始时出现的指示器,以帮助告知可发生拖放交互的位置。当有个多个拖放区域可用时,或者当它有助于指出屏幕的哪一部分将被拖放影响时,这种方法可能很有用。预定义区域: 当拖动启动时显示边界。告知作为容器的预定义空间,拖放将填充该空间。例如,在主屏幕上重新对 App 排序,或者显示重新排序的列表条目将被放置在哪里。窗口: 告知拖动的条目将在何处替换屏幕的一部分,例如用于创建多窗口。默认情况下,这种模式是共平面的(coplanar,译者备注:几何术语,指几何形状在三维空间内占用同一平面的关系),导致周围屏幕元素被推动。1. 在 App 之间拖动当一个条目从一个 App 移动到另一个 App 时,交互会受到拖动项目的 MIME 类型(Mutipurpose Internet Mail Extensions Type,译者备注:网络中的媒体类型,比如图片、视频、文本等)和放置区域的影响。大多数被拖动的元素都属于图像或文本类型。拖动单一条目2. 无障碍无障碍拖和放交互的主要考虑因素包括:依靠键盘导航的用户可能看不到光标的变化状态来表示某个条目是可以拖动的。可以增加视觉可供性(例如抓握、图标或更高的视觉层级)来向用户传达这一信息。为启动拖动提供一致的模式,或者引入后备方案,以帮助用户在多个产品和平台上迁移。Aria 和 Role 属性(译者备注:帮助视力障碍用户的功能,例如放大镜、语音朗读和高对比度等)、一致的键盘控制和读屏器支持应该在整个交互过程中表明可拖动性和状态。打开、关闭和旋转设备1. 折叠状态到横屏展开动效被用来突出由更大的展开的画布所显示的新内容。导航栏和详情页的动画用来引起人们的注意。可折叠设备上的邮件 App 从折叠姿态到展开的横屏姿态。避免在折叠或展开后停留在之前姿态的布局上。相反,随着设备的折叠和展开,进行不同姿态的无缝过渡。千万别这样!避免启动布局变换时出现延迟。姿态的连续性也可以在 banner 的动效中得到加强,banner 宽度延展以利用更大的屏幕宽度。搜索栏也可以有类似的表现。当进入立放模式时,像视频这样的主角元素可以扩展到屏幕的上半部分。像媒体控件这样的辅助元素填补屏幕的下半部分。2. 组件变换边框进入和退出这种变换用于靠近屏幕边缘的组件,这些组件根据布局自适应时退出或进入。底部导航侧边导航应用栏面板(Sheet)媒体控制随着屏幕的展开,底部导航变换成侧边导航新增一个面板这种变换是用来吸引人们对一个新面板的注意,这个面板由一个更大的画布(canvas)展示出来。随着屏幕尺寸的增加,一个辅助面板从侧面进入视图。同级变换:导航顶级导航条目之间的对等变换使用共享的 Y 轴。详情页面根据所选列表条目的对应顺序向上或向下滑动。Y 轴上的元素同步变换,以加强内容状态的微妙变化。父子导航:列表嵌套列表的父子变换使用共享的 X 轴转换。列表条目转换成详情视图父子导航:卡片卡片使用容器变换进行父子变换。卡片容器可以从一个小元素扩展到沉浸式视图对话框出现使用动效将注意力吸引到对话框中显示的新内容。文本和按钮的垂直动效为对话框扩展增加了细节。可以这样!可以用分阶段垂直动效来显示对话框不要从中心均匀地展开对话框。对话框展开时,内容不应淡入、重叠或相反的方向运动。千万别这样!避免引入拒用统一缩放的对话框。欢迎关注作者的微信公众号:「龙爪槐守望者」本篇来源:优设网原文地址:https://www.uisdc.com/material-design-component
字体 小技巧 编者按 编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Marc Andrew 的文章梳理了 7 个实用性很强的 UI 效果提升小技巧,是系列文章的九篇,原文最早发布于 marcandrew.me 。在创建实用、可访问性良好且视觉效果颇为出彩的 UI 界面的时候,我们大多只需要进行有限度的微调,即可达到颇为不错的效果。在之前,我已经撰写了很多实用的 UI & UX 优化小贴士(看完文章在文末获取),这篇文章继续增加 7 条实用的建议,一起来看看吧!1、牢记最关键的「接近原则」并用好它在以上的两个设计范例当中, 一个元素之间的间距太远,另一个元素之间间距则相对合理。「接近原则」可能是众多设计原则当中最容易忽略的一个,但是它可以帮助你为用户制作出视觉排版逻辑更加清晰、更强大的 UI 界面。根据人类的认知习惯,将相关的设计元素放在一起,我们会更容易认为它们之间有关联性。这种距离昭示了元素与元素之间的关系,所以在「接近原则」的加持之下,用户在使用网站和 APP 时,可以更加轻松地理解和认知。时常使用,经常使用,习惯使用「接近原则」来审视设计,是确确实实能让设计更好。用一篇超全面的干货,帮你完全掌握「接近原则」知识点@研习设K先生 :不知道你有没有想过这样一个问题,设计真的是只凭借个人喜好,就能随意发挥的工作吗?阅读文章 > 2、始终在视觉上将 UI 元素的功能区分开在以上的两个设计示例当中, 一个按钮和标识看起来过于相似,另一个则更容易区分彼此的功能性。UI 中的基本元素,视觉特征和实际功能应该是对应的,不能在视觉上混淆才行,这是保持整体用户体验的一致可用的重要前提。以按钮(Buttons) 和通知(Notifications)为例,在大多数情况下,按钮在视觉功能上都要更加优先,因此,在外观的视觉吸引力上应该是最突出对劲儿,同时,应该在外观轮廓上和约定俗成的造型保持一致,让它可以和其他组件(例如通知)区分开来,方便用户识别。3、根据需求选用高质量的 衬线/无衬线字体上图是一组规整和且具有良好泛用性的无衬线字体,内容为「力量强大」。在APP 和网站当中,可以选用的英文字体要比中文字体多太多。而在泛用性上,非衬线字体又比衬线字体更强一点,它们既可以作为标题又可以用于正文,甚至可以用于辅助性的功能性的元素当中。相对而言,衬线字体细节更多,但是泛用性相对而言没有无衬线字体那么强,但是在合适的场合选用漂亮的衬线字体能够让文本的可读性适度提升,并且在阅读的体验感上再提升一下,尤其是在展示性大标题和长篇幅的正文当中。现在你可以在 Fonts.adobe.com 上找到上图中所推荐的诸多英文字体。而相对更加复杂的中文字体,在可用的字体类型上则相对较少,一方面是字体本身的研发成本更高,更实际的问题则是中文字库的文件尺寸更大,不过随着网络带宽的增长,这个问题会在某种程度上有所缓解。逻辑上和英文字体类似,无衬线字体会比衬线字体的泛用性更强。如果仅仅只是用于标题或者视觉设计,这些免费的字体值得尝试:4. 想快速找到对的的字体组合?使用超大字体家族吧。以上是两个设计范例,其中一个字体组合看起来不搭,另一个字体组合则显得好很多。通常所说的「超大字体家族」(SuperFamily)其实指的是一组被打包到一起可以互相搭配的衬线和非衬线体,它们风格和细节不一样,但是互相搭配效果是颇为不错的。如果希望在 UI 当中使用足够协调漂亮的字体组合,但是又暂时没有想法,不妨选一款「超大字体家族」入手,直接使用其中的字体来做搭配。或者你也可以参考这篇文章来来自行搭配:实例教学!10个帮你运用好字体组合的设计原则编者按:选择与设计相符的字体、展现视觉的层次感、衬线体与非衬线体一起使用、避免字体冲突、避免使用相似的字体进行组合、限制你所使用的字体数量... 今天@喪心病狂十六夜貓 这篇译文总结了运用好字体的设计原则,都是基础但不可忽视的,适合新手学习或重温。阅读文章 > 5、阴影最好还是微妙一点在上面的设计示例当中, 一个使用了非常重的阴影,另一个则更加微妙。在二维的 UI 界面当中,阴影是让元素「凸显」出来的重要手段,作为一种强调的视觉元素,阴影很容易显得过于「明显」。实际上,现实当中的阴影大都是不那么引人瞩目的,因此需要避免设计阴影的时候用力过猛。完成阴影的设计之后,最好回看一下,往回拉一下,控制好程度。6、深色模式下降低文本对比度其实这个点于我个人而言意义更大,因为我的眼睛存在「散光」的问题,这使得强对比度下文本所带来的「晕影」更加明显,这种「晕影」的视觉效果其实是普遍存在的,只是不同用户眼中强弱不同,严重的甚至会出现闪烁的效果。所以,这个时候如果使用白色文本和黑色背景,尽量降低两者的对比度,避免使用纯白的文本和纯黑的背景。7、使用带有文本标签的图标尽量不要让图标独立存在于 UI 界面当中,因为单纯视觉化的图标是存在误读的问题,带有标签文本的图标通常会好很多,它能帮助用户更轻松准确地理解信息,理解这些按钮都代表着什么,无需猜测。下面是往期的内容:第一波!快速提升 UI 设计效果的 9 个小技巧编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第二波!快速提升 UI 设计效果的 14 个小技巧编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第三波!快速提升 UI 设计效果的 6 个小技巧编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第四波!快速提升 UI 设计效果的 6 个小技巧编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第五波!快速提升 UI 设计效果的 6 个小技巧编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第六波!快速提升 UI 设计效果的 6 个小技巧编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第七波!快速提升 UI 设计效果的 6 个小技巧编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第八波!快速提升 UI 设计效果的 6 个小技巧编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 本篇来源:优设网原文地址:https://www.uisdc.com/improve-ui-designs-faster-9
画师 插画 主页 关注优秀插画师,学习借鉴其绘画技巧是插画进阶必不可少的过程。今天向喜欢插画的小伙伴推荐几位外网的优秀插画师,他们不仅展示自己作品的最终成稿,还会分享作品的草稿笔记和构思技巧,帮助我们更全面深入的了解绘画过程,是绝佳的学习进步机会。快来看看吧!Thomas Rohlfs「Behance 主页」 https://www.behance.net/thomasrohlfs「Instagram 主页」 https://www.instagram.com/thomasrohlfs/Thomas Rohlfs 是一位来自荷兰画师。他的画色彩沉静,线条干净有力。人物构图简练扎实,看一眼就让人惊叹于他深厚的人体结构基础和细节刻画能力。从 2020 年底起,Thomas 就在 Instagram 上持续更新他的绘图草稿和速写技巧。他会配合结构模型讲解人体塑造和画面构图细节,展示草稿细化为成稿的步骤,还会发布一些作品具体创作过程的小视频,非常适合想强化学习人物绘画的小伙伴。Tania Yakunova「个人网站」 https://www.yakunova.com/「Behance 主页」 https://www.behance.net/anaittet「Instagram 主页」 https://www.instagram.com/anni_tett/Tania Yakunova 是一位来自乌克兰的插画师。她用色浓郁活泼,纹理质感自然。人物形象经由抽象概括显得别有趣味,带一种童真感。这也使得她的画风很有识别性,在不同领域都有不错的运用效果。Tania Yakunova 经常在 Instagram 上分享自己的创作线稿和涂鸦作品,她作品的画面构图总是带有一些奇思妙想,丰富而不杂乱,能传达出特定的含义。想要学习如何形成自己独有画风,如何通过编排画面元素传达内涵的小伙伴可以多思考借鉴。Itsacat「个人网站」 https://itsacatstudio.com/「Behance 主页」 https://www.behance.net/itsacat「Instagram 主页」 https://www.instagram.com/itsacat.studio/Itsacat 是来自西班牙的自由插画师和艺术导演,她的画风明亮清丽,线条简洁流畅,给人轻松愉快的感觉。Itsacat 非常擅长小场景的绘制,她线稿中的人物和物品单个拎出来看线条都很简单,但是搭配在一起却不会让人觉得单薄,颜色搭配也非常和谐。对想学习元素或者小场景绘制的小伙伴来说是一个不错的入门选择。Kim Salt「个人网站」 https://kimsalt.com/(梯子访问)「Behance 主页」 https://www.behance.net/kimsalt「Instagram 主页」 https://www.instagram.com/kesalt/Kim Salt 是来自美国纽约的自由插画师,她的作品致力于赞美平凡事物的内在魔力和生物的独特韵律。画风蓬勃而优雅,具有故事性,让人不禁会思考画面所要表达的内涵。由于画风带有的故事性,Kim Salt 经常收到杂志和资讯网站的约稿,她在 Behance 上也会分享自己在面对不同主题创作时的构思过程和草图步骤,对我们学习如何围绕主题进行发散创作非常有参考意义。Thanh Soledas「Behance 主页」 https://www.behance.net/thanhsoledas「Instagram 主页」 https://www.instagram.com/tsoledas/Thanh Soledas 的创作灵感来自于生活中接近的事物、人类的情感和自己内心的声音。在这位越南姑娘的画作中,你可以清晰的感受到她对生活的热爱和对自然的歌颂。她在社交媒体上分享了每一幅插画的创作步骤,用动图的方式展现从线稿到上色的步骤,还贴心地附上了配色。我们也可以从她的分享中学习到她是如何从生活中积累创作素材,整理转化为创作草稿的,这对刚刚入门的插画师来说是非常具有学习价值。以上就是今天推荐的全部内容,觉得有用的话记得收藏哦。如果你也有关注这种类型的插画师,欢迎在评论区分享出来,大家一起互相分享学习。了解更多插画知识:非科班出身的我,发现这些插画基础知识才最有价值Hi,我是彩云。阅读文章 > 如何让人物插画更有动感?来看这篇字节跳动的实战总结!大家好,我是没有肚肚的杜杜~今天给大家分享下我在绘制人物插画的时候对人体结构的一些理解和小经验~以及我的字母女孩们的创作过程, 希望可以帮助到大家~Sports Girl 插画作品展示链接直通车:https://www.behance.net/gallery/9422阅读文章 > 本篇来源:优设网原文地址:https://www.uisdc.com/illustrator-recommendation
插画 学员 老师 终于来啦!小馋老师的 Q 萌 Ai 插画直播课终于要来了!可能你听说过小馋老师之前出的这一组 3 套爆款录播入门小课,这组卖出过超过 4000 份的入门课程,可能还不足以满足你完全学会小馋老师插画精髓的需求。那么这次,让小馋老师用 22 天的课程,一次性带你掌握她的萌系角色场景插画,让你也可以跟她一样,给你的整个世界,添加上萌萌的滤镜!特惠价倒计时一天!原价 499,新课特惠价 399 元!之后立刻恢复原价!(新课活动时间:2 月 17 号~26 号)名额有限,抓紧时间!移动端微信扫码报名,网页端右戳 https://pro.uisdc.com注:报名后请加客服微信进群,直播录屏可永久回放这真的是一门超友好的插画课!好用好看还好上手!“ AI 的线条特性十分好用,线条是可以自动圆滑的,告别手残党扭扭曲曲难看的线条。每一笔线条,每一个色块,它都是独立的,可以随意调整,很方便。并且 AI 是矢量图,可以无限放大,永别锯齿。对于绘画新手来说,AI 真的是个不错的选择哦!”之前给小馋老师做专访的时候,她分享过自己探索画风、寻找最便捷好用技巧的的过程。恰恰是依靠她的这些久经验证的「方法」和「秘诀」,才让这套课程超级容易上手!最基础的 Ai 软件,不需要手绘板,搭配她的方法和技巧,你就可以掌握!对于插画,你可能有很多疑惑:新手画什么题材最容易上手?线条不好看要怎么调?造型很难把握,要怎么处理?色彩一搭配就难看,怎么破?场景要怎么处理才好看平衡?让插画显得丰富不单调最简单的方法是什么?……别担心,小馋老师会在课程中用简练直接的方法带你解决你的疑惑,给你答案!超多的题材和形式!这次的课程涵盖了小馋老师日常创作中,最成熟完善的内容!基础的题材涵盖了物品、人物、小动物、人物角色、场景呈现,从基础的插画技法和技巧入手,输出作品涵盖了插画、头像、条漫、动态表情等多种形式,从上手到作品输出,覆盖完整链条!循序渐进的授课节奏!相比于之前的录播课程,小馋老师的直播课有着更出效果的节奏,在带练演示+作业练习+反馈讲解的模式下,用 6 轮实战和练习 带你在 22 天时间内,掌握技巧,熟练方法,拥有创作的能力!特惠价倒计时一天!原价 499,新课特惠价 399 元!之后立刻恢复原价!(新课活动时间:2 月 17 号~26 号)名额有限,抓紧时间!移动端微信扫码报名,网页端右戳 https://pro.uisdc.com注:报名后请加客服微信进群,直播录屏可永久回放画如其人的周小馋老师!将可爱与萌践行到底的周小馋老师,给人的感觉一直都是可可爱爱又温柔,这种由内而外的统一气质,为她的插画作品赢得了网友的热爱,以及大量的商业合作。从湖南卫视到国博,从肯德基到味全,小馋老师将自己的萌系插画恰如其分地融入到商业产品中,在风格气质和商业价值之间做好了平衡,完全不显突兀,这一点上,就太值得学习了!可爱即是正义!下面是更多小馋老师的作品:小馋老师的学员作品:学员 zy764学员 静学员 Blackman学员 福生若萌学员 豌豆儿面学员 刀渺渺学员 Synthiasite学员 皮蛋学员 Dou学员 小陀螺特惠价倒计时一天!原价 499,新课特惠价 399 元!之后立刻恢复原价!(新课活动时间:2 月 17 号~26 号)名额有限,抓紧时间!移动端微信扫码报名,网页端右戳 https://pro.uisdc.com注:报名后请加客服微信进群,直播录屏可永久回放本篇来源:优设网原文地址:https://www.uisdc.com/zhouxiaochan-course
明度 调色板 色彩 最近我在想一个问题:假如设计师负责一款全新的产品,不受已有规范的束缚,我们该如何定义产品的色彩体系呢?有些设计师可能会凭自己的主观想法定义色值,觉得这个颜色在界面里好看就用了,但是我觉得这样是不够规范的,更多应该考虑到全局的通用性和科学性。基于这个问题点,我网上查看研究了一些资料文章,参考了 Ant Design 和 Material Design,学习到了一些定义色彩 ID 的理论知识,来看看吧。色彩色彩是设计系统的重要组成部分,可以使用在品牌感、信息层级、操作指引、交互反馈的场景。在细分层面,色彩可以分为主色、辅助色和中性色。设计师调整颜色的时候,建议使用 HSB 模式,调整色彩更直观,符合心理预期,因为人脑也是通过这个模式来辨别颜色的。其中,H 代表色相,S 代表饱和度,B 代表亮度。色相是区别各种不同色彩的标准,通过 360圆形色环来取色,每一度代表一个色相。饱和度指色彩的纯度,饱和度越低,越往白色过渡。亮度指色彩的明亮程度,亮度越低,越往黑色过渡。学会HSB色彩模式,让配色有理有据!念起作为一名 UI 设计师,不免每天都会和色彩打交道,但有时总会苦恼于色感把握不准,让我们配的色彩,总是“不对味儿”。阅读文章 > 这是常用软件 HSB 模式调整颜色的截图,帮助大家理解。主色主色一般和产品的品牌色相关联,很大程度决定了产品整体的调性和视觉风格,常用于主按钮、文字高亮、强调操作等界面场景。产品 1.0 版本以上,Logo 一般都会有定义好的品牌色,界面设计中的主色和品牌色保持一致即可,可以传递统一的理念。如果从 0 开始的新产品还没有定义 Logo 和品牌色,界面要先设计开发,这时我们可以结合产品行业特性、产品理念、产品名称、用户特征等进行思考,提取关键字和情绪板,从而提取多个色系,最终和多角色沟通确定主色系,避免后续反复调整的成本。确定主色系后,设计师该如何定义具体色值呢?可能大部分设计师都是直接吸取同色系的大厂产品色值,再微调下参数做出差异性就确定了。这确实是一个取巧方法,毕竟不容易出错。但我觉得设计师需要有自己的思考过程,所以进行了国内外大厂产品主色的调研分析,总结了一些共同点和差异点。我发现 Apple 系和国内产品的主色倾向于饱和度和明度较高的颜色,基本分布在横竖向三等分的右上角,我认为主色取值可以参考这个区域。看下部分产品字色、按钮色、深色模式的效果,还可以。而谷歌系、微软系产品倾向于明度稍低的颜色。从设计层面来看,颜色有点暗、有点脏,不太建议。我有点不太理解国外设计师的视觉审美,研究了 WCAG 2.1 无障碍标准后,才发现他们在为障碍(色盲)用户着想,主色都符合 WCAG 2.1 的 4.5:1 最小对比度(AA 级)。这个标准涵盖了使 Web 内容更易于访问的各种建议,遵循这些准则将使更多残疾人更容易获取网站内容。从分析的国内产品中,我只发现知乎的主色符合这个标准。这其实就引发了我们的思考,视觉效果和无障碍人群体验,哪个更重要呢?我觉得两个层面都挺重要的,不过在实际场景中,建议设计师更多是结合品牌调性、视觉效果去定义具体色值,在美感、可读性、可用性之间得到平衡。注意一点,明度不宜太低,颜色会比较脏,也不太符合年轻用户的审美。如果我负责一款产品,已经确定蓝色系为主色,我会选择明亮一点的色值,在文字、按钮、深色模式等常用场景下保证可读性和可用性。色值定为#247FFF,后面讲辅助色的时候会用到。辅助色辅助色,可以用于特定功能、状态反馈、应用图标等场景,反馈的成功、失败、警告状态最常用到了。基于主色,我们怎么定义辅助色呢?我总结了点小方法。1. 以主色的色相为基础,差值为 15,围绕 360色环提取 24 色。(差值 15的颜色属于同类色临界点,有利于我们划分色度层级,又不会失去想要的色系)2. 参考常用配色理论:相似色、邻近色、三分色、互补色,得出部分色值。3. 结合界面场景和使用效果,对颜色进行删减和补充,最终确定所需要的辅助色。(建议最多 12 种,避免色彩太多,不利于设计师理解使用)4、将辅助色和主色对比,进行视觉感官明度校正。(虽然色彩的饱和度和明度一样,但不同色相的视觉感官明度是不一样的,绿色、黄色、青色实际看起来特别浅,所以我们要手动调整)校准方式:在颜色上面叠加纯黑色图层,图层模式选择色相,就可以直观地看到无彩色视觉感官明度。相差大的颜色可以以 5 为差值调整饱和度或明度,最后再根据效果进行微调。(色相的差值能被 5 整除,饱和度和明度同样适用)调色板为了满足界面对色彩的需求,需要对主色和辅助色进行色板延伸,建立不同梯度的调色板。这里有两种计算方法:1. 浅色调色板,在颜色上依次叠加 20%、40%、60%、80%、90%不透明度的白色;深色调色板,在颜色上依次叠加 20%、40%、60%、80%不透明度的黑色。2. 浅色调色板,色相(H)往感光明度高的色相依次差值 2,饱和度(S)依次减少 15,明度(B)依次增加 5;深色调色板,色相(H)往感光明度低的色相依次差值 2,明度(B)依次减少 15,饱和度(S)依次增加 5。(Ant Design 和 Material Design 调色板也都加了色相旋转)。从对比效果来看,比较建议使用第 2 种方法,使用 HSB 模式的值进行递减/递增得到完整渐变色板,颜色更加明亮通透。Ant Design 官网也有在线生成调色板功能,和第二种方法逻辑类似,可以快速生成,大家可以去使用。最终生成主色和辅助色的调色板,效果如下。中性色中性色包含黑、白、灰,合理地使用中性色能够使界面信息层级主次分明,助力于浏览体验,常用于字色、控件色、背景色的场景。由于纯灰色显得比较脏,人眼对偏蓝的灰色阅读体验更好,在桌面端更建议使用灰色相加点蓝。计算方法:1. 选择和主色视觉感官明度相同的灰色,按调色板方法建立梯度色板。2. 将蓝色调色板不透明度调为 10%,灰色调色板不透明度调为 90%,两个色板叠加,最后吸取颜色,再加入黑白两个色板,就确定了从白到黑的 12 种颜色。最终,我们就确定了一款产品的色彩体系,界面中使用的颜色需要遵循调色板色值,一致性设计。总结以上就是设计系统中建立色彩体系的思考总结。设计师调整颜色时,建议使用 HSB 模式,调整色彩更直观,符合心理预期。主色需要结合品牌调性、视觉效果定义具体 ID 色值,在美感、可读性、可用性之间得到平衡。注意,明度不宜太低,颜色会比较脏。辅助色、调色板、中性色定义 ID 色值过程中,建议遵循一定的色彩理论准则,科学地定义颜色,更有说服力。还有许多不足,继续学习去了。参考文献:Ant Design 设计系统 – 色彩Material Design 设计系统 – 色彩Ant Design 色板生成算法演进之路Web 内容无障碍指南 (WCAG) 2.1找不到配色灵感?试试这个把想法变成配色板的Picalette如果想寻找和颜色有关的灵感,我之前介绍过不少配色工具,可以通过各种方式产生需要的颜色组合,像是Palettable 以互动方式来找出最合适的配色组合:[link https://www.uisdc.com/color-matching-artifact-palettable]阅读文章 > 欢迎关注作者微信公众号:「ALEI的设计思考」本篇来源:优设网原文地址:https://www.uisdc.com/color-order-system
用户 产品 内容 众所周知,无论是在用户群体、产品定位,还是使用场景等方面,B 端产品与 C 端产品都有比较明显的差异。但是两者的基本设计理念是趋同的,例如提高效率、降低学习成本等等。不过 C 端产品更加注重运营,所以设计师不单单要考虑设计侧的用户体验,还要顾及商业目标的达成。B 端产品重点在于提升用户效率,这本身就是体验目标之一,因此 B 端产品的设计策略更加纯粹。两者在具体的设计表现上还是存在一定的差异性。今天我们就来总结一下,主要包括 3 个方面:内容的差异化交互形式的差异化展现形式的差异化内容的差异化1. 图文结合 VS 数据表格C 端产品重运营,通过流量的转化获得收益。B 端产品重功能,通过功能定制向客户收费。C 端产品想要达到商业目标,获得充足的流量,必然要内容化。内容想要吸引用户就必须要足够丰富,所以 C 端产品基本是用图说话,而短视频和直播的兴起,进一步增强了对用户不同层次的感官刺激。总之 C 端产品需要让用户看得爽、玩得爽、逛得爽,不知不觉的沉浸在其中,并逐渐产生依赖感。B 端产品聚焦功能,更强调帮助用户解决问题,特别是中后台的管理系统,主要是帮助用户完成数据监控、统计和查询。因此页面中充斥着大量的图表、表格和数据信息。内容的差异也带来了体验方面的差异。图片相对数据或者文字更加直观感性、富有亲和力,更容易引发用户的阅读兴趣,精美的图片更容易引导用户建立对内容的好感。而 B 端产品则是客观反映数据信息内容,相对更加理性,不会带有太多的情感体验。2. 个性化与标准化C 端产品服务于个人,更加注重用户的个性化体验,例如千人千面推荐机制,定制化的兴趣范围设定等等,希望能够通过精准的内容推荐,获得用户、留住用户。C 端产品功能服务于整体的商业目标,今天主推 A 功能用来拉新,明天可能就强调 B 功能的运营活动。另外版本迭代也比较快,功能玩法变化较为频繁,内容也会做出相应的变化。例如天猫最近首页也在不断变化。B 端产品服务于组织,每个用户不再是单独的个体,而是组织中的角色,更强调业务流程和组织协同,因此需要建立标准化的流程,或者相对有限的个性化。另外复杂和高门槛的业务内容,更加强调设计的一致性,从而减少用户的学习成本。同时 B 端产品的信息架构、业务流程一旦确定了,不会轻易改变。避免打破用户已经形成的认知和行为习惯,对用户的使用造成不便。交互形式差异化C 端更强调便捷性,希望可以随时随地触达用户,更多的是移动端产品。B 端产品以工作办公为主,更多的应用在 PC 领域。因此两者在交互形式上有很大的区别。1. C 端:全面体验、兼顾商业C 端产品在保证用户体验的同时,更讲求商业价值。交互体验上我个人觉得主要讲求少操作、短路径、沉浸式。特别是电商平台,例如淘宝,虽然首页中增加了各种频道入口和商品分类,但是并不希望用户按部就班,逐级操作。因为用户行为路径越长,造成的用户流失也就越大。搜索功能被放置在页面头部位置,页面滚动时也常驻在顶部,方便用户快速查找产品。同时运营活动会通过弹窗、浮窗、悬浮按钮,前置广告资源位等形式增加曝光,缩短用户的操作路径,实现内容的快速直达。而为了增加内容对用户的吸引力,让用户沉浸其中,淘宝、拼多多等都专门打造了专属频道,主打短视频和图文。2. B 端:业务为主,效率至上B 端产品最主要的价值在于优化业务流程,提升用户操作效率。除了常见的基础交互形式,在细节设计上也越来越 C 端化了。通过监测用户行为,或者信息内容实现智能提醒。例如飞书文档在用户首次使用场景下删除内容时,会主动提示快捷键功能,帮助用户了解学习相关功能。而公众号壹伴插件会检测文章中的关键字,文章中出现“原文链接”时,而用户未进行选项设置时,会主动提示相关信息,避免用户遗忘。另外在 B 端产品中信息架构非常重要,用户主要是依据导航菜单按图索骥,首先定位到功能页面,再次查找相应表格,最终定位自己所需的内容。所以信息层级的优化,可以较好的减少用户的操作成本和记忆成本。视觉表现的差异化视觉设计层面,C 端产品的要求远高于 B 端产品。1. C 端:场景化、丰富性C 端视觉设计师要求越来越高,基础的设计技能不用说了,动效、C4D 建模都逐渐成为了设计师的必备技能。界面风格也是多种多样,酸性风格、赛博朋克等等,希望能够通过提高界面设计的丰富性,增强页面氛围,保证对用户足够的吸引力,例如大促会场页面的头图设计。2. B 端:简洁化、统一性作为工具型产品,帮助用户提高工作效率是 B 端产品设计的核心价值。因此 B 端产品中视觉元素强调简洁高效,除了色彩相对丰富的图表外,主体风格基本是灰白色调,再加点主题色点缀基本就可以了,过多的颜色和背景信息反而会影响核心内容的浏览。写在最后虽然在设计理念上,C 端和 B 端产品具有一定的相似性。但是受到各种因素的影响,有时候 B 端的产品经理对用户体验重视不足,更多强调产品功能的强大,考虑如何实现产品功能,很少考虑用户是否真正的需要此功能,以及在使用过程中的操作体验。所以 B 端交互设计师需要在业务分析基础上,积极寻找产品设计中的体验突破口,不断提升产品的用户体验。如何区别B端与C端的产品设计差异?我总结了26条对比!随着企业数字化转型,B 端产品越来越受到人们的重视,B 端产品也越来越丰富,越来越多的 C 端设计师转行到 B 端产品的设计上来。阅读文章 > 欢迎关注作者微信公众号:「子牧UXD」本篇来源:优设网原文地址:https://www.uisdc.com/b-and-c-difference
流程 作品集 自己的 设计师年度汇报、职级答辩和换工作,都免不了做 PPT 和作品集。制作过程要梳(xū)理(gòu)叙事、引(xiā)用(biān)理论、提(chuī)炼(xū)亮点、展(kuā)示(zhāng)结果。反正要显得你非常厉害,没有你公司就要倒闭了,所以做起来无论是心理还是生理都非常痛苦。如果能准备几套精美又高级的模板,做的时候简单改改就轻松了。虽然大厂设计师的作品集不会发出来分享,但大厂的设计公众号都在不竭余力的推广自己的设计价值,因此配图都非常精美。所以我想到把配图都保存下来,进行归纳总结再制作专属模板。从而让自己的作品集达到大厂的水平,这下汇报答辩面试成功率将大大提高。现在保存了阿里巴巴、滴滴和腾讯设计公众号的配图,超过 1000 张。先从滴滴开始吧。概述图片取自滴滴 CDX 创意设计公众号(微信号:diditaxiued)。共 402 张图片,来自 26 篇文章。有些动图或纯营销视觉图没有保存。可根据叙事逻辑,将图片分成以下 5 类:封面,11 张背景,12 张分析,117 张方案,149 张成果,28 张封面封面图片之所以这么少,因为公众号主体是文章,大部分时候用文字标题就代替了封面。总的来说,通常使用左标题右配图或者背景配图的布局。背景背景是对项目的介绍,大部分详细介绍都用文字代替,配图也不多,可分成 4 个子类。1. 现状线上版本的界面截图或者设备。2. 业务需求直接说出业务方的需求。3. 当前数据当前版本的内部数据或者外部报告。4. 流程和模型当前项目的业务流程或者模型。分析比起设计方案,其实分析思考的过程更能看出设计师的真实能力。可分类 7 类,其中有些类比还可以再次分类,因为配图很多,我就列举一些典型的,完整的全部图片和分类之后整理完毕再分享给大家。1. 设计流程展示自己分析思路的过程或者设计团队的工作流程,旨在让读者明白接下来的内容分几个板块来展示,或者体现自己的设计团队很专业,有完整科学的设计流程。可分成 2 类。仅流程流程加结果这类图片通常除了流程外,还有其中的思考点或者结论,因此经常放在分析的最后、方案之前,起到承上启下的作用。2. 问题和痛点此类配图经常作为分析的开头部分,毕竟有问题才有思考和设计。不要简单的罗列问题,而是要从整个使用流程,或者将问题分好类,甚至进行分析之后呈现。3. 产品/用户/行业/竞品特点比较有趣的是日常工作中最经常用的竞品分析图片特别少,我猜是大厂设计师不想让读者认为他在借鉴其他产品,而是自己原创并引领行业设计趋势。4. 数据/趋势这类图片很少,一方面数据涉及机密,另外用文字描述也可以。5. 真实场景这里全部是实拍的图片,可以拍摄用户使用场景的图片,也可以拍摄设计师在工作中的照片。这样就显得项目很真实,证明设计师真的在努力做好设计。6. 模型和思路设计类模型这类图片是分析中最多的,多达 53 张。其实面试中的重头戏也在这部分,面试官会问你是怎么思考的,为什么这么设计,用了什么方法论才想出的设计方案。可分成 9 小类。流程型可别看标题因为就是流程图,那太普通。滴滴的流程型图片还附带有流程中每个关键点的分析,显得很丰满。元素型多个同等重要的元素并排展示,为了避免画面太单薄,元素可点缀一些配图、英文或摘要等。金字塔型体现理论中涉及到层次或优先级。分析型通常是由一个核心分解出多个重要的元素。对比型有新旧两种思路,或者多个方案需要对比选择。公式型理论可以总结成类似数据公式的格式。循环型也可以当作流程图,只是这里的流程首尾相接,循环不息。表格型这种图片非常少,可能表格很难做得高级,显得太常规。矩阵型和其他类比的二维配图相比,三维矩阵能显得思考更有深度。7. 设计机会和策略在经过一系列的分析之后,最后肯定得总结出具体该怎么设计。可分成 3 类。元素型多个并排元素,每个元素简单描述一下要点。归纳型列举之前分析过程的内容,最后归纳出具体策略。分解型从核心点分解出多个设计策略。方案呈现设计方案的图虽然最多,但其实分类和具体的布局都很简单。可分成 8 个子类。1. 组件化和规范方案里最多的就是这种图,毕竟出单纯的设计方案显得普通,如果能把方案总结成规范甚至组件,就显得更厉害了。2. 推导结果从之前分析的结果或者零散元素推导出设计方案。3. 页面模块或层级对设计方案某个核心页面的模块或者层级进行介绍。4. 对比作品集最常见的版式,拿旧方案和自己的新方案对比,体现自己的能力。为了让新方案显得更厉害,可以从画面比例或弱化旧图让新方案更突出。5. 细节解析对页面局部亮点进行展示,其实很多伪造抄袭的作品集容易看出来,就是因为没有这个部分。只有自己亲自经历过的项目,才会很在乎亮点。而且设计评判看得是效果而不是修改图的多少。6. 流程/状态7. 多图为了避免多图显得很单调,可以在排版上多花点心思。8. 单图成果光有设计方案不够有说服力,得加上方案落地之后的结果这才是领导最关心的。1. 流程流程可分为两种,一是设计前后用户使用的流程。二是你对公司流程制度的改善,这是高阶设计师或管理层必须做到的。2. 设计系统/多页面可以尝试加上一些数字,显得你的工作成果特别多。3. 数据对比4. 数据结果5. 单图展示6. 场景展示用真实照片,尤其是用户开心使用产品的场景,会显得很有说服力。金三银四求职季,收下这篇5000字的上分秘籍(附简历和作品集模板)考虑马上又要到新的一年为了让更多小伙伴能准备出更加惊艳作品集,这里我提供了一套简历和作品集的设计思路以及对应的模板,希望对大家有帮助~我们提供器与具,推崇创作思路发散,不鼓励照搬、抄袭、挪用。阅读文章 > 欢迎关注作者的微信公众号:「龙爪槐守望者」本篇来源:优设网原文地址:https://www.uisdc.com/portfolio-design-routines
树冠 图标 颜色 3D 元素在设计中的应用广泛,之前向大家推荐了很多免费的 3D 素材下载网站,但是实际应用起来还是有局限的。今天向大家推荐一个可以免费使用、操作便捷上手超快的 3D 软件——MagicaCSG,它的软件大小只有2.64M,但是却可以建模渲染出完整的3D元素。MagicaCSG 来自于 @Simon_阿文 的推荐。MagicaCSG 的已经更新了一个版本,下面为大家简单介绍一下 MagicaCSG 的主要界面,并通过演示教会大家做一个非常可爱的 3D 小元素。MagicaCSG 的界面介绍MagicaCSG 的界面分为 2 部分——Model(建模)和Render(渲染)。Model(建模界面)Render(渲染)界面建模过程渲染过程3D 可爱小元素示范下面教大家如何做一个可爱的 3D 小松树。第一步 建模树干打开 MagicaCSG 后,主界面上有一个正方体,鼠标点击「Stroke」下方的小圆柱图标,将正方体改为圆柱体。选中蓝色箭头拖动调整到合适位置(注意只改变竖直方向的位置,不要水平移动,保证右侧「Gizmo」中「center」的 X、Y 数值都为 0)。然后在右侧「Gizmo」中将「Size」处将圆柱体大小修改为 X:7.5 Y:7.5 Z:15。修改好后将选择「Stroke」栏中的颜色,将树干颜色修改为「8a581b」。第二步 建模树冠树干做好后,在左侧「Layer」处新建一个图层。然后选择「Stroke」下方的小圆柱图标,点击主界面左上角的「+」号,新建一个圆柱体,选中蓝色箭头垂直向上拖出。然后调整左侧的「Cone」数值到最大,将圆柱体变为圆锥体。在右侧「Gizmo」中将方向锁定为 XY,用控件调整树冠大小。调整好大小后,选中蓝色箭头拖动调整到合适位置(按住鼠标右键可以调整视角检查)。选中刚刚建好的圆锥体,按住「shift」,拖动蓝色箭头复制一个出来。然后选择「Stroke」下方的球体图标,将其变成球体。然后点击「组合运算区」的第二项「减去」,将圆锥体的底面变成弧形,更符合松树树冠的形状。并相应的调整树干的高度。第一层树冠建好后,左侧「Layer」处再新建图层,以同样方法做第二层树冠。第二层树冠要比第一层树冠小一些。最后一层树冠要比第二层树冠再小一些,也是按照同样的方法制作。三层树冠都做好之后,再整体调整一下位置和大小。树冠模型建立好后,将树冠颜色分别修改一下:第一层树冠「1091a5」,第二层树冠「29aeb1」,最顶层树冠「57ca8f」。记得用来切形的球体的颜色也要修改,因为这关系到树冠底部的颜色,颜色比树冠本身颜色深一些就行。第三步 渲染建模的部分都已经弄好了,接下来就是渲染。点击界面左上角的「Render」进入渲染界面。首先调整太阳光「Sun」的角度,然后选一个暖一点的颜色「fff29d」;天空光直接点击「Sky」右边的照片小图标,选择系统预设天空光。如果想让光感更丰富,可以添加地面光,并修改光的漫射数值,使整体更明亮。第四部 保存输出制作过程中,我们可以随时点击右上角的保存按钮保存。渲染完成后,将松树调整成自己需要的角度,设置好尺寸,点击左下角的小相机图标就可以导出为 PNG 了。背景的颜色也是可以调整的,如果需要保存透明底格式的图片,可以选中「Background」下的「transparent」再输出就可以了。拖进 AI 中做一个简单的排版,是不是非常可爱?小提示1)MagicaCSG 目前只适用于 Windows 系统;2) MagicaCSG 有系统自带几个小模型,点击左侧上角的文件夹小图标就可以打开;3) 程序安装好后,若出现打开不了的情况,请进行以下操作后,重启电脑重新打开应用:在桌面右击——打开NVIDIA控制面板——管理3D设置——首选图形处理器——选择高性能NVIDIA处理器;进入电脑「设置」,系统——显示——点击进入「图形设置」——浏览——添加MagicaCSG应用程序。总结MagicaCSG 的功能肯定不及 C4D 和 Blender 强大,但是它便捷易学,对于想自己创建一些简单 3D 小元素的小伙伴来说是一个非常好的选择。MagicaCSG 安装包下载链接已经附在文末和开头,赶快自己动手自己尝试一下吧!不清楚的地方在评论区提出,小编会尽快为大家解答~感兴趣的小伙伴如果想进行更深入的学习,可以再尝试下面的入门基础教程:「使用 MagicaCSG 做一个精灵球」https://www.youtube.com/watch?v=lZc2VJJTr60&t=336s「使用 MagicaCSG 做星之卡比」https://www.youtube.com/watch?v=6ET53LGBF-g「使用 MagicaCSG 做一个立体 Android 精灵 1」https://www.youtube.com/watch?v=mNlbj_yUCAE「使用 MagicaCSG 做一个立体 Android 精灵 2」https://www.youtube.com/watch?v=EcTKbpGUaz4&t=425s「使用 MagicaCSG 做一个游戏手柄」https://www.youtube.com/watch?v=LFbn78gu9i0一整套3D图标打包下载!免费可商用!3dicons 是一套开放原始码 3D 免费图标集,收录超过 1440 个图片素材(网站上放了 120 个预览图标),这些图标素材采用 CC0 授权方式释出,可以免费使用于个人和商业用途,图标有四种默认的颜色风格、三种摄影角度和 HQ 渲染,提供多种常用格式像是 Figma、PNG Dy阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 MagicaCSG 安装包 松树源文件3.42M2333 点此复制 登录下载 本篇来源:优设网原文地址:https://www.uisdc.com/magicacsg
标签 用户 信息 在 B 端产品线特别是在决策类产品中,针对在较长时间段内任务中断回溯的场景的设计方法在 B 端产品线中,特别是在决策类产品中,经常会出现因为需要决策的信息量多、任务处理周期长而造成任务(主动 or 被动)中断,用户反复多次进入任务处理流程的情况。针对在较长时间段内任务中断回溯的情景场景,从用户心理和业务场景出发设计快速定位任务进度的「状态标签」,在任务列表查询区提供「标签类别筛选」以及在任务处理详情页面「同步状态标签及关键信息」以保持视觉连贯和逻辑映射,从而增强用户定位能力,消灭负担及提高决策效率。B 端决策类产品流程图在这里,简单概括一下决策类产品的整体流程,用户通过逐条或批量处理待决策的任务最终完成所有任务的决策。在此过程中或主动或被动的会出现任务中断的情况,那么用户想要返回任务清单查找未完成或者处理中的任务就需要耗费时间和精力费力查找,这必然导致工作效率的降低。通过任务中断回溯这一设计手段,用户能够快速定位、精确查找,提高工作效率的同时带来更为平滑的用户体验。以 B 端-营销标签洞察产品为例项目背景:整合其他来源渠道的标签,并提供标签挂站内商品的服务。用户可通过各维度查询符合条件的营销标签,并可以针对标签进行修改后审核采纳。用户痛点:业务侧需在一周左右的时间中审核几十条甚至上百条营销标签,任务处理周期长,会出现主动或被动中断任务的情况,在重新开启任务处理流程时,需要从成百上千条任务中找出未审核或未采纳的任务后进行决策。设计目标:解决较长时间段内的审核中断回溯问题,使用户在每次进入该模块时,可以快速定位到未审核的标签。A「状态标签」:在标签表格中增设标签类别字段。标签类别分别为“已收藏”、“未收藏”、“已采纳”、“未采纳”、“新标签”。同时,设计三种颜色的标签来分别承载三种标签类别,使用“icon+字段”的视觉手段按状态差异化呈现,且该标签位于表格前列,依据用户浏览轨迹来辅助业务侧第一时间即可识别表格中不同类别的标签信息。B「标签类别筛选」:在页面查询区提供标签类别的筛选功能。中断后通过筛选“未采纳”、“未收藏”,即可快速查询到待审核的营销标签。C「同步状态标签及关键信息至其他场景」:将每条营销标签的“状态标签”及“关键信息”同步至详情页面。当用户点击表格中的“标签解读”按钮后,新页面打开标签详情页面,即用户能够同时打开多个详情页面。可在一定程度上无限拓展在某一时间内处理的标签个数。同时,在详情页面的页头展示该标签的“状态标签”与表格中该条的关键字段信息;在详情页面的页尾吸底展示“收藏”与“采纳”两个决策按钮,提升用户的审核效率。最后以上就是「任务回溯设计」的全部内容啦~~后续会为大家分享录入流程设计、关键信息密度提升、场景化设计等一系列的设计方法,希望能给正在从事或准备入局 B 端的的小伙伴带来启发,也希望大家一起探讨更多的 B 端设计方法。8000+干货!B端设计师要懂的信息架构一篇关于信息架构的深度解读,希望对大家有所帮助。阅读文章 > 本篇来源:优设网原文地址:https://www.uisdc.com/task-interrupt-backtracking-design
用户 操作 信息 引言近一年来,Figma 可谓是体验设计领域中最热门的工具。刚好最近开始频繁的在 Axure 9.0 和 Figma 中切换使用,深刻的感受到了设计细节带来的体验差异化。今天就通过一些细节亮点,总结下工具软件的体验设计的几个原则。事先声明,本文不是对比软件工具孰优孰劣,仅仅是为了探讨设计技巧,希望对你有所帮助。本文主要的内容包括:效率设计:提高用户行为效率简洁化设计:降低信息噪点可视化设计:减少用户思考成本效率设计工具软件首要的任务就是追求效率,减少用户的操作成本。1. 模板化设置组件化设计Figma 拥有强大的组件功能,类似于 Axure 中的母板,但是更加灵活。既有父子继承关系,实现了修改父组件后,子组件可以同步修改。但是子组件又有一定的独立性,内容可编辑,保证了灵活可用。而 Axure 母版则是强制性的,一旦修改了父组件的内容,子组件必然修改。样式模板化在 Figma 中,用户可以创建自己的色彩、描边和阴影样式库,在设计中随时调用,一劳永逸,减少了频繁调整样式的操作成本。2. 选择代替输入预置选项可以有效的提高用户效率。例如字号设置时,Axure 并没有预置选择项,用户需要手动输入修改。在 Figma 中则预置了常用字号,用户下拉选择即可。另外 Axure 默认字体是 13 号,而 Figma 是 14 号字体,更加贴合设计师的主流使用字号,减少了用户的修改次数。3. 批量修改批量修改是我们最常用的提高效率的设计手段。Figma 和 Axure 都有 padding 设置功能。不过 Figma 可以一键操作,用户输入一次就可以修改四个边距,调整效率更高。而 Axure 想要设置四边等距,则要逐个修改,操作上相对繁琐。简洁化设计在工具软件中,对象的属性栏应该是用户的高频操作区域。整体布局上,Figma 和 Axure 基本一致,都是包含了 3 个模块。可以设置对象的各种属性、交互效果设计等。而基础属性模块更是用户操作的重中之重。不过 Figma 属性栏通过信息分级展示、内容精简、有序布局等设计方法,带给用户更好的体验。1. 分级展示,隐藏不必要的内容创建元素时,Figma 属性栏默认只显示位置尺寸信息、图层透明度和填色等基础信息,描边、投影、导出等设置项只显示标题,内容全部隐藏不展示,保证了操作信息的所见即所得。当用户增加设置项时,系统都会给出默认设置,用户根据需要只要修改内容即可。另外 Figma 还采用了交互操作,减少页面的信息量。例如可下拉的选项默认不展示下拉按钮,而是在鼠标悬停时展示,从而让原本信息繁杂的页面变得更加清爽。而 Axure 则将内容信息平铺展示,无论用户是否需要操作,都会显示设置项的内容。这样的布局设计确实可以减少用户一次点击操作,但是低频操作的设置项反而增加了页面信息量,成为了页面的信息噪点。2. 适配用户习惯,减少页面信息量用户为了提高自行为效率,不会对所有页面元素命名,其实用户的命名频率并不高。所以 Figma 在元素属性设置中,没有修改元素名称的选项,而是放在了图层列表中修改。而 Axure 元素属性中,命名作为首要内容放置在了最顶端。3. 统一的对齐方式,让信息更加有序两者在信息布局和对齐上也有所差异。Figma 采用的是上下布局的方式,上方是功能标题,下方是设置内容。信息层级更加明显,也更加符合用户的浏览习惯。同时具有很好的一致性。而 Axure 以左右布局为主,左侧是标题信息,右侧是内容项。我个人理解这样的布局方式是为了压缩高度方向的尺寸,尽可能的保证设置项一屏完整展示出来,避免出现滚动条,增加用户操作成本。但是这种布局方式却造成了内容展示的混乱。另外不同长度的底边型输入框,也增加了内容的繁杂和错乱感觉,造成了页面信息的无序感。可视化设计在设计工具中,可视化设计更多的用在位置相关功能,辅助用户更好的理解信息,从而降低用户的思考成本。所以两者在设置选项中都增加了可视化的形式。例如上文提到的 Padding 设置,Fimga 采用的是可视化的形式,用户直接对号填写就可以了,用户的思考成本更低,甚至可以说是 0 成本。Axure 中的圆角设置、边线可见性设置也都采用了可视化的形式。并且可视化还具备操作功能,方便用户操作。写在最后当然 Figma 中的设计细节不止这些,不过很多设计并不是 Figma 的全新创新,而是在 Axure 和 Sketch 基础上优化而来的。所以有价值的设计并不一定是为了翻天覆地的推倒重来时,也可以站在巨人的肩膀上,做出符合自己产品定位和特色的设计方案。想做好微交互设计?我总结了这 8 种常见类型!大家好,我是 Clippp,今天为大家分享的是「微交互设计」。阅读文章 > 欢迎关注作者微信公众号:「子牧UXD」本篇来源:优设网原文地址:https://www.uisdc.com/learn-design-from-figma
用户 机制 游戏 给大家直接盘点一下常用的游戏化机制,及每类机制下面常用的游戏化元素。这些机制及元素如果利用恰到好处,可以增强你的游戏化设计感,吸引更多的用户且深度参与。只要用户投入了时间、精力、情感或金钱,会更重视正向反馈的获取。机制 1:纲要式的指引(General)1. 新手引导(On-boarding/Tutorials)对于用户来说可以是活动指引,员工来说可以是「入职指引」,通过自助式的核心内容提炼及重点介绍,帮助用户快速了解你想要传达的信息。2. 路标(Signposting)哪怕是最熟悉“套路”的参与用户也需要指向正确的方向。指示下一步行动,以帮助其顺利完成游戏化进程的新手阶段。必要时给予“提醒”来帮助进行不下去的用户。3. 损失厌恶(Loss Aversion)人都是风险厌恶的,害怕失去地位、朋友、积分、成就、财产、进步等。可以设计一些低门槛机制让用户容易获取某些激励,后续在参与过程中,通过紧迫感的提示,引导用户更深度的参与到游戏化进程中来。4. 进度/反馈(Progress/Feedback)进度和反馈有多种形式:倒计时、完成任务进度条、积分获取进度条….许多游戏化设计中都有使用。所有用户都需要某种进度或反馈的衡量标准,这是用户获得即时反馈最直接的方式。5. 主题(Theme)给你的游戏化一个主题,通常与游戏化的话题相关。可以是任何内容,从公司价值观到打游戏。主题描述的浅显易懂很重要,屏阅时代,我们需要确保用户能够快速理解它。6. 叙事/故事(Narrative / Story)机制是死的,用户是活的。机制和流程固化以后,用户往往不会按照你预先设定的环节思考和推进。我们可以在大型的游戏化设计前,通过一些用户访谈,观察用户对于你的计划的理解,并尝试用户通俗易懂的方式表达出来,以激发更多用户的好奇心,愿意参与进来。7. 好奇心(Curiosity )好奇心是一种强大的力量,也是马斯洛需求层次理论中描述的、人的高层次需求之一。在游戏化设计中,并非所有事情都必须解释得清清楚楚,一点点神秘感可能会鼓励用户朝着新的方向前进。8. 紧迫感(Time Pressure)充分使用时间的为例,让用户产生必须要在限定时间内行动起来,为的是让用户专注问题,及缩短决策时间。9. (资源)稀缺性(Scarcity)一些大部分用户获取不了的,但非常有价值的、高逼格的,能够让用户有意愿分享转发的资源,可以让游戏化计划的裂变更成功。10. 话题引导(Strategy)使用话题聚集用户,让用户思考在计划中应该做什么、为什么这样做以及它如何影响游戏化的结果。11. 门槛设置恰到好处(Flow)使用户感知的挑战和其参与游戏化计划的技能水平恰到好处,能让用户跃跃欲试。12. 结果反馈(Consequences)如果用户做了一个动作,会有什么后果?计划的设计需要及时的给用户一个结果反馈。例如:用户是否失去了他们赢得的积分或物品?13. 投资(Investment)当人们投入时间、精力、情感或金钱时,他们会更加重视结果。机制 2:奖励机制(Rewards)14. 随机奖励(Random Rewards)用意想不到的奖励给用户带来惊喜和喜悦。让他们保持警惕,甚至可能让他们微笑。15. 固定奖励(Fixed Rewards)根据定义的行动和事件奖励用户。每一次的活动、升级、进步对用户都是一种即时反馈,能够激励用户更深入的参与计划进程。16. 时间相关奖励(Time Dependent Rewards)在特定时间(生日等)发生或仅在设定的时间段内可用(例如:每天签到、每天打开以获得奖励)的事件。用户完成以后获取相应奖励。机制 3:社交需要(Social)17. 团队(Teams)设立一定的机制,让人们基于某个 UGC 主题建立团队。小团体可能比大团体更有效。一些社区会尝试创建协作平台,为后续基于团队的游戏化计划设计做铺垫。18. 社交网络(Social Network)允许用户通过易于使用且可便捷访问的社交网络进行联系和社交,让更多的用户参与进来,与其他人一起玩比自己玩更有趣。19. 社会地位(Social Status)地位可以提高人的知名度,创造建立新关系的机会。它也可以让人感觉良好。游戏化设计者可以利用反馈机制(例如:排行榜、证书、勋章等),让用户在社区内感知到其社会地位,提升其对社区的粘性。20. 社交探索(Social Discovery)根据一些基础标签,例如:兴趣、地位、话题等,让用户能够很便捷的找到或匹配到志同道合的人,能够有利于 UGC 的生成。21. 社交压力(Social Pressure)80%的人都有从众心理。在社区中,需要找到并包装标杆用户,并鼓励其他人像这些标杆用户一样成长。但不要把标杆用户包装得比大众用户高几个维度,「高半格」往往能够让用户摸得着、看得到,且有动力往这个方向进化。22. 竞赛(Competition)竞争让人们有机会向他人证明自己。它可以是赢得奖励的一种方式,但也可以是新友谊和关系诞生的地方。机制 4:探索精神(Free Spirit)23. 探索(Exploration)人都是有探索的心态。请为发挥用户的探索精神提供移动和探索的空间。需要考虑用户在什么条件下、场景下更希望探索到一些东西。24. 分支选择(Branching Choices)让用户感知到有自主选择参与的权力。所以一些复杂的游戏化设计中,都会设定不同的路径供用户最终达成目标。25. 彩蛋关卡(Easter Eggs)彩蛋关卡是一种有趣的方式,可以奖励和惊喜环顾四周的用户。对于某些人来说,越难找到,就越令人兴奋!26. 可解锁/稀有内容(Unlockable / Rare Content)通过为探索精神提供可解锁或稀有的内容来增加自我表达和价值的感觉。27. 创意工具(Creativity Tools)允许人们创建自己的内容并表达自己。工具可以是为了个人利益、娱乐或帮助其他人(教材、级别、装备、常见问题解答等)。28. 个性化(Customisation)为人们提供定制体验的工具。从虚拟形象到虚拟场景,让用户表达自己并选择他们将如何向他人展示自己。机制 5:成就达成(Achievment)29. 挑战(Challenges)挑战有助于保持人们的兴趣,测试他们的知识并允许他们应用它。克服挑战会让人们觉得他们已经获得了成就。30. 证书(Certificates)不同于一般的奖励和奖杯,证书是掌握和成就的物理象征。它们承载着意义、地位并且很有用。31. 学习/新技能(Learning / New Skills)有什么比学习新东西更好的方法来达到精通呢?为您的用户提供学习和扩展的机会。32. 任务(Quests)任务为用户提供了一个固定的目标。通常由一系列相互关联的挑战组成,成就感倍增。33. 级别/进展(Levels / Progression)级别和目标有助于映射用户在系统中的进展。用户查看下一步可以去哪里与查看去过的地方一样重要。34. 终极挑战(Boss Battles)终极挑战是一个机会,可以巩固用户在一个里程碑挑战中所学和掌握的一切。通常标志着里程碑式计划的结束 – 以及新旅程的开始。机制 6:乐善好施(Philanthropists)35. 意义/目的(Meaning / Purpose)一些周期比较长的游戏化计划,需要让用户感知其正在做的事情的含义或目的,以提升其参与的使命感。36. 关怀(Care-taking)为管理员、版主、策展人等创建角色。允许用户扮演家长或者 NPC 的角色。37. 使用权(Access)访问系统中的更多功能可以为用户提供更多帮助他人和做出贡献的方式。这也有助于让用户感到受到重视。38. 收藏与交易(Collect & Trade)许多用户都有收集东西的习惯。为用户提供一种在系统中收集和交易物品的方法。帮助建立关系和目标感和价值感。39. 送礼/分享(Gifting / Sharing)系统设计需要允许向其他人赠送或分享物品,以帮助他们实现目标。虽然是一种利他主义,但互惠的潜力可以成为强大的动力。40. 知识分享(Sharing Knowledge)对于某些人来说,通过与他人分享知识来帮助他人就是对自己的奖励。培养人们回答问题和教导他人的能力是一种提升平台粘性的手段。机制 7:干扰机制(Disruptor)41. 创新平台(Innovation Platform)颠覆者跳出系统的框框和界限思考。给他们一种引导这种方式的方法,平台就可以产生伟大的创新。42. 投票 / 声音(Voting / Voice)给用户一个声音,让他们知道它正在被听到。如果每个人都在同一认知层次上,改变和优化就会容易得多。43. 开发工具(Development Tools)通过一些研发设计维度的思考,将系统进行适度的调整,让用户的 UGC 贡献集中在开发新的附加组件来改进和构建系统。44. 匿名(Anonymity)如果想鼓励完全自由和无拘无束,请允许用户保持匿名。但值得警惕的是,可能会招来许多负面言论,需要做好防攻击措施。45. 轻触(Light Touch)虽然社区中必须有规则,但如果在某一时段鼓励破坏,有限度的应用这个机制,同时观察用户对待这个事情的开发,保持警惕并听取用户的反馈。46. 无序状态(Anarchy)当企业遇到了产品创新瓶颈,或者组织管理瓶颈时,可以考虑举办简短的“无规则”活动。观察大家在无序中做出了怎样的改变,并分析这个进程,说不定会有意想不到的收获。机制 8:激励手段(Inspiring)47. 积分/经验积分 (XP)积分和 XP 是反馈机制。可以跟踪进度,也可以用作解锁新事物的一种方式。基于成就或期望行为的奖励。48. 实物奖励/奖品(Physical Rewards / Prizes)实物奖励和奖品可以促进大量活动,如果使用得当,可以创造参与度。小心促进数量而不是质量。49. 排行榜/阶梯(Leaderboards / Ladders)排行榜有不同的风格,最常见的是相对的或绝对的。通常用于向人们展示他们如何与他人进行比较,以便其他人可以看到他们。但这个激励并不适合所有人,例如一些希望更多人参与进来的活动,排行榜会放大超级用户与一般用户的差距,让大众用户没有意愿再继续参与。50. 徽章/成就(Badges / Achievements)徽章和成就是一种反馈形式。将它们奖励给取得成就的人。明智地以有意义的方式使用它们,使它们更受赞赏。51. 虚拟经济(Virtual Economy)创建虚拟经济并允许人们将虚拟货币用于购买真实或虚拟商品。52. 彩票/机会游戏(Lottery / Game of Chance)彩票和机会游戏是一种无需用户付出努力即可赢得奖励的方式。一般用于低成本获客,吸引泛流量关注。翻阅一篇论文后,我发现「游戏化设计」的真正玩法(附案例)前言今天想跟大家聊聊如何实现一款好的游戏化作品。阅读文章 > 本篇来源:优设网原文地址:https://www.uisdc.com/gamification-mechanism
图标 图案 网站 Lineicons 是一套收录超过 5000 种图标的合集,主要设计风格为手工制作线条图标,适合使用于各种现代化用户界面,例如网页、桌面软件等等,对于设计师或开发项目来说非常有用。其实类似的图标资源还真不少:快收藏!超过 30 万个免费矢量图标下载的「SVG Repo」SVG Repo 是一个收录大量 SVG 向量图和免费图标的网站,依照说明,网站收录超过 30 万个图标图案,直接在网站探索或是以关键词搜索方式找到自己需要的图标下载,即使用于商业用途也没问题。阅读文章 > 超过 4500 个免费矢量图标打包下载的网站「Unicons」Unicons 是一套收录超过 4500 种图标的图标库,来自开发商 Iconscout,本身有四种不同风格设计,包括单纯线条(Line)、单色(Monochrome)、填满颜色(Solid)和更细边框线条(Thin Line),超过 20 种分类,像是箭头、品牌标志、商业、对话、云端服阅读文章 > Lineicons 分为两种方案:Free Basic 和 Pro,前者免费,但可使用的图标图案 532 个,而且没有提供 AI 源文件,使用时需要标示出处来源;若付费升级 Pro 方案就可开启完整五千多个图标集,使用无需标示出处,也会有向量图原始档可进行细部的编辑修改,付费方案依照授权用户数量而有不同定价,起始价格为 $29 美元(一年),定价上并不算太高。大家下载免费素材即可。Lineicons网站链接:https://lineicons.com/使用教学开启 Lineicons 网站后点选「Download Now」会看到两种方案比较表,分别是免费基本方案和付费 Pro 方案,可使用的图标素材数量不同,免费使用需要标示出处来源,如果只用得到 Lineicons 里其中几个免费图标的话,只要选择免费版即可。点选「Download Free」免费下载 Lineicons 图标集,目前共有超过 500 个基本图案。从网站上方选单选择「Icons」开启图标浏览工具,从这里可以探索各种分类的图标图案,或从上方搜寻字段输入关键词查找,调整预览图标大小、颜色,左侧则是 Lineicons 分类可找到特定类型的图标素材。在 Lineicons 网页如果右上角标示为 PRO 代表需要付费升级才能使用。如果用户只想寻找免费的基本图标素材,可以在浏览工具右上角切换「FREE」,如此一来图标查看器就只会显示免费版图标图案,减少大部分干扰。点选要取用的图标图案后就会显示程序代码,稍后将 Lineicons 的 CDN 链接加入网站,就能在特定位置加载图片,非常简单,透过 CSS 来调整图标颜色、大小或显示样式,从 Lineicons 网站也能单独复制特定图标 SVG 程序代码或下载为 SVG 向量图格式。从 Lineicons 首页找到 CDN 链接,将它加入网站的 head 就能快速加载特定图标图案,和其他常见的免费图标库差不多,好处是无需自行托管任何图标图案或字型。更多的使用说明和范例可参考说明文件。值得一试的三个理由:Lineicons 收录超过 5000 个图标图案,风格为线条图标免费方案可使用 532 个图标,使用时需要标示出处来源可透过免费 CDN 加载相关档案,以程序代码显示图案本篇来源:优设网原文地址:https://www.uisdc.com/lineicons
颜色 白灰 图层 Hello~大家好,我们是优设手绘就业衔接班的讲师橙子和阿森今天我们俩来分享一些画画小技巧,看起来好像挺简单,但是学会就能节约大把时间哦!渐隐功能 ctrl+shift+f PS 渐隐命令可以更改任何滤镜、笔刷、橡皮擦的不透明度和混合模式。在某种情况下,就不需要撤销重画了。不过要注意渐隐功能只针对刚刚执行过操作,对上上个操作是无效的。渐隐功能-笔刷渐隐功能-滤镜-高斯模糊花里胡哨的渐变映射渐变映射,其实是将画面本身的颜色先去色,然后再进行着色。一般情况下使用渐变映射时,我们需要调整图层的不透明度,再配合图层模式使用,有时会有意想不到的效果!注意:渐变映射是调整图层,它对图层本身进行了去色再着色,基于其下面的图层而产生效果,记得在用渐变映射前先「盖印(ctrl+shift+alt+e)」哦!渐变映射器以下是我使用渐变映射,作品所产生的效果。我是在盖印层使用渐变映射,一定不要在原图,或者合并图层上做效果,而是盖印图层!!!渐变映射效果-1渐变映射效果-2给笔刷加纹理,灵活绘制如果你想给一张画上加纸张纹理,除了直接将纹理素材拖拽进去,还可以使用 PS 的图案图章工具,让笔刷变成纹理,灵活性更高,想画哪里画哪里!选择「图案图章工具」;选择合适的笔刷和纹理;记得更改图层的模式,根据画面调整不透明度。注意:图案图章工具里的笔刷,前景色是没有效果的,笔刷的颜色被纹理覆盖了,但依旧保留笔刷本身的纹路、不透明度、流量的属性。另外,为画面添加纹理时,注意不能太过,适当降低不透明度,否则会喧宾夺主。溶解模式巧做噪点风大家都知道噪点常用来给扁平风格的插画添加细节质感,除了喷枪笔刷外,还有一种方式可以快速做出噪点肌理,那就是「笔刷模式/图层模式」的「溶解」。注意:选择笔刷时,你的笔刷要能画出颜色轻重变化(半透明的区域),溶解模式才有效,比如硬边缘笔刷的溶解模式,就不显示噪点效果。可见图中第二竖行的硬边缘笔刷:溶解模式-躁点效果对比下面叶子的噪点,就是我用「笔刷模式/图层模式」的「溶解」。利用图层模式快速打光在扁平的插画风格中,我们可以利用图层的不同模式,对画面简单加光效,会立马提升整体效果。我们先来了解一下图层模式的区别:减色模式:变暗 / 正片叠底 / 颜色加深 / 线性加深 / 深色类似于油墨的混合,让画面越来越暗,其中正片叠底屏蔽白色,所以我常用来做投影。加色模式:变亮 / 滤色 / 颜色减淡 / 线性减淡(添加)/ 浅色。类似于光的混合,让画面越来越亮,其中滤色屏蔽黑色,我常用来做光。叠光模式:叠加 / 柔光 / 强光 / 亮光 / 线性光 / 点光 / 实色混合。叠加:将两个图层叠加在一起,并保留各自的纹理,颜色会有变化,也常做光效。柔光:与叠加模式效果类似,只是效果稍弱。其他模式:与上面两种模式类似,有些许变化,可根据画面自行选择。常用的图层模式画好之后,对整体之上新建一个正片叠底图层,并填充一个饱和度低的颜色;用橡皮擦将亮部的区域擦出来,你也可以用蒙版哦;建立「叠加/滤色层」,柔边缘大笔刷选择明度高的颜色画「光」,可以多画几层;根据画面整体该加暗的再加暗,该提亮的再提亮。打光-压暗打光-提亮打光-整体调整阿森-作品步骤不过虽然这种加光的操作很简单,但最好还是掌握一些光影知识,才能在正确的地方加合适的光。通道分离大法制作特效海报、Banner 中常见的故障风、抖音风等用在板绘作品中,同样会为你的作品增色不少。画好之后,盖印一层,再复制一层(保证上下两层);双击图层空白处,调出图层样式对话框;混合模式-通道, 勾掉 R/G/B;将复制层位移。这就是处理之后的不同效果。32-A100-铁锤姐姐-人物作业3招教你解决颜色脏大部分初学者会遇到一个配色问题:颜色脏,我给大家提供些配色小技巧,从最基础的的黑白灰,到分析配色常见问题,帮你改善画面脏的大难题。1. 配色基础—黑白灰想要解决画面的配色脏问题,你要打好基本功,首先得了解配色的底层逻辑—黑白灰关系。画面的黑白灰是一个最基础的颜色层次。大家都知道传统的美术教学会学素描,讲究素描的黑白灰关系,拉开黑白灰的层次关系,画面看起来才会有立体感、层次感。就算只有普通的黑白灰色块整体,看起来结构也是非常完整的。如下图:当我们把基础的黑白灰分辨清楚,配色不会出现特别大的问题,但是如果黑白灰关系错乱,只会让画面看起来很灰,对比很弱,怎么配色都感觉不合适。作为手绘新人,如何快速查看画面的黑白关系呢?这时我们可以添加一个黑白调整图层:32-A41-知了-毕业原创作业我们再来看一组学员作业,来自优设手绘营-40 期芒豆同学。左边为原图:颜色较灰,说明配色出现了问题,颜色对比不够,导致了细节不够突出。右边为优化后的图:画面黑白灰对比更明确,配色整体更加的干净,物体细节也更清晰。最后我们观察一下优秀作品的黑白灰关系,比起普通的插画,光影插画的黑白灰关系会更强,这也是为什么光影插画会带给我们更强的视觉冲击的原因之一:所以想把配色掌握好,你需要学会掌握画面的黑白灰关系,拉开明暗的差距。2. 颜色的选择技巧除了黑白灰关系乱,颜色的选择也会导致画面颜色脏。解决方法——提高暗部颜色的饱和度,同时微调色相)。色相的选择可以根据亮面冷,暗部暖,或者亮面暖,暗部冷这样的规律,同时还可以考虑环境色对于物体的影响。运用球体讲解一下,对比看看:当我们确定底色的颜色之后,画暗面时,大部分同学会在底色的基础上,直接选一个深色。但是这个暗部的颜色普普通通,甚至还会让暗面看起来有一点脏。稍微调下,提高暗部颜色的饱和度,对比之前的效果:干净了!但是新的问题出现了,黑白灰对比没有之前那么明显了哎?这时可以调一下暗部的色相,让颜色丰富一些,同时加强黑白灰的对比。通过这个简单的案例,明白为什么颜色看起来有点脏的原因吗?左图的地面亮面+暗面的颜色对比,右图楼房的亮面+暗面的颜色对比,都可以发现这一规律。所以正确的选择暗部的颜色方式是:吸取底色颜色;在底色基础上选择一个深色;微调这个颜色的饱和度;调整色相(具体如何搭配更好看可以多尝试)。底色和暗部尝试不同的色相搭配。这里也是因为基础的黑白灰没有问题,所以我们的暗部颜色的色相可以多尝试,也可以结合冷暖的对比。3. 高级灰如何使用不会脏颜色脏的第 3 个原因:高级灰使用错误。解决这个问题,首先检查画面的黑白灰关系是否正确;高级灰不是一个单纯的灰色,而是一个具有颜色倾向,并且是高明度的颜色。这里我们可以看一些优秀的插画作品是如何使用高级灰的:首先检查画面的黑白灰关系:另外检查颜色的倾向,也不要选择明度过低的颜色:文章到此就结束啦!如果你想系统学手绘,却依旧处于低效率、东画西画的状态,这里推荐一下我正在讲课的「优设手绘就业衔接班」,添加好友扫码即可咨询。给 iPad 手绘新手的 10 个有用的小贴士大家好,我是插画师 @Lady不慌。阅读文章 > 本篇来源:优设网原文地址:https://www.uisdc.com/7-hand-painted-techniques
小公司 项目 公司 现在整个互联网行业进入缩减状态,公司面临裁员节流。而中小型公司,面临的情况要更加严重。作为设计师,进入大厂是一种避险的方式之一。先来说说进入大厂有哪些好处:一般资深设计,可以达到 40-50 万年薪甚至更多。专家都是 60 万年薪甚至更多。稳定性高,现在经济不好,小公司倒闭可能性更大,大厂就算裁员,被裁的概率远低于小公司创业公司。名企出来的,去面其他公司录取概率更高。名企出来的去创业公司可以拿期权,工资也会更高。这是小公司打工跳槽者很难得到的。UI 和交互设计师进入大厂的路径大致有两类:第一类,大厂实习,没毕业就进入大厂实习,之后以应届毕业生的身份进入大厂工作,这部分人起点比正常社招的工作的人高。第二类,没参加过校招,毕业后没有实习经验,找一份好工作困难,前几年走弯路,越跳越好最后进入大厂。对于大部分人来说,如果在小公司的话,后续基本都在小公司之间来跳槽了,与名企大厂无缘了。无论是 UI,交互还是 PM 大致如此。出现这种情况的原因是因为,在小公司的时候工作流程、设计深度和项目知名度都被名企出来的要差一点。在面试过程中很难有优势。所以面试机会很少,几轮面试并成功的就更少了。今天主要针对第二类,即小公司的设计师如何进入互联网大厂。进入大厂的方法整体有两种,如下:越跳越好大厂外包越跳越好如果现在在小公司,公司不知名,做的项目不知名。那么设计师面临大概率的困境是项目拿不出手,公司和项目没有优势和竞争力。在面试过程中,面试官比较看中候选人的是公司和项目知名度。其次就是项目的设计质量。在履历不够的情况下,如何凸显设计师的价值和设计方案的亮点是最重要的事情。设计师在公司要严格要求设计方案的交付质量。每做完一个项目,都做项目复盘,按照作品集的质量做。如果不知道如何做出出彩的作品集,网上很多资源,可以多看看大厂是如何做项目和总结。从大厂收集了1000张配图,总结出的作品集套路:滴滴篇设计师年度汇报、职级答辩和换工作,都免不了做 PPT 和作品集。阅读文章 > 通过网上找到的资料总结一套自己的设计方法论,在工作中,按照自己总结的一套设计方法论做项目方案,这样的话比直接做设计方案的质量要好很多。之前我做了一些项目复盘的文章,大家可以参考下,作为简单的思路模板:交互优化方案的流程是什么样的?来看高手的总结!对于交互设计师来说,在工作中接到的需求大致可以分为两大类:一类是新需求(从 0 到 1),另一类是对现有的产品优化。阅读文章 > 认真的对待项目中的每一个需求,将需求的设计方案尽量做到最好,并将最终的设计方案的价值证明出来。证明设计价值是以后面试的重要步骤。在公司中多承担些业务,现在多累点,将来少受点苦。多做一些对团队有意义的事情。例如做团队基础的设计规范,各种通用模板等。推动业务增长,提升设计价值。当在小公司呆的时间差不多了,项目总结复盘也准备充分后,接下来就开始看看机会。先找小公司投递看看效果,及时修改简历和作品集的问题点。觉得作品集和简历没问题了,投递中厂试试。当拿到其他公司的 offer 后,不要急着跳槽,每一次跳槽都是一种对于稳定性的破坏,尽量减少跳槽。一家家公司打怪升级,保证每一家公司都比上一家好很多,这样跳两家就很容易进名企了。要计划性的选择一家中大厂知名公司,这样的话,未来职场可能会更顺利些。当然不排除,有的小公司发展迅速,迅速成长为独角兽公司,并成功上市。只是概率会比较低。大厂外包先进入大厂做外包,后续跳槽进大厂。这是进入大厂的一个好办法,为什么这样比较好。因为大厂外包,做的项目都是大厂知名项目,这些知名项目很容易从众多小公司的简历里面脱引而出。虽然外包风评很差,但是竞争力比小公司的人要强一些。进名企做外包,例如去腾讯阿里做外包,虽然名声不好听,但是做的是知名项目,这一点特别关键,其次是和他们人员对接,可以学习很多东西,以后去面试,大公司的人很容易接受认可。面试官会觉得外包出身便于管理。同时做的东西水平和大厂的差不太多。结语以上是关于如何进入大厂的简单方法,不排除有些大厂工作特别卷,在里面工作反而很难获得快乐,属于拿工资换尊严,这个时候,进入一家工作气氛好的稳定的中性公司,反而最好的选择,这样可以快乐的长期干下去。学历普通,履历普通的小公司设计师,如何在3年内入职大厂?学历一般、履历一般,也没有做过啥厉害项目的同学,如何升级自己Hi,大家好,我是彩云。阅读文章 > 欢迎关注作者的微信公众号:「Echo的设计笔记」本篇来源:优设网原文地址:https://www.uisdc.com/join-big-company
组件 变体 样式 组件库是一个强大的提效工具,对于设计师和开发来说有了统一的标准,输出的效率也会大大提高。随着设计工具的不断发展,Figma 逐渐成为各大公司的主流设计软件。Figma 强大的组件库能力,非常适合团队设计系统的建设与应用。相比 Sketch,Figma 在 Auto layout、变体和实例等方面极大的提升了组件库的设计灵活度和效率。看完本文你将会学到:1. Sketch 与 Figma 组件库的区别2. Figma 组件库搭建经验分享基础样式:字体(分层分级技巧)、颜色(分组排列规则)、阴影(分类、三层阴影)等组件与变体:组件分类结构化原则、变体创建命名技巧、优化变体层级、组件预览展开还是合并、开关的使用和组件的链接等组件文档:文档结构层级组件库发布、使用、更新3. Figma 组件库搭建 Tips 分享先简单聊一下为什么要做组件库?组件库是将界面设计中的具有通用性和标准规范的基础元素和重复出现的控件进行归纳整理,通过对控件进行分类和命名,最终形成一个可快速复用,便捷维护的资源库。对于设计师和开发来说,简单上手,可复用强,稳定且高效的组件库是非常有必要的。组件库更像是一个强大的工具库,既能提高团队的协作效率,也能保证团队设计输出的统一性、高效性和延续性。相对 Sketch,Figma 组件库有哪些特点?在 Figma 之前,我们都习惯了用 Sketch 创建组件库。但当开始使用 Figma 后,发现 Figma 不仅继承了 Sketch 组件库的优点,并且更加灵活和强大。举一个简单的例子,如果想要修改组件的文本样式或者不同组件的颜色时,在 Sketch 中,就必须提前做好所有可能的文本/图层样式,非常的费时费力。但 Figma 强大的实例 Instances 功能,无须提前做好所有的样式,可以直接在实例上修改字体、颜色、描边、投影等,但又不会干扰到父级的样式,而修改父级的样式又能修改全局,非常的方便。又比如想要去切换一个按钮的状态,或者是否带图标时,Figma 强大的变体功能可以将这些属性进行分类整合在一起,组件调用更便捷,这都是 Sketch 组件不具备的功能。除了实例、变体功能外,跨团队使用组件库(样式、组件)、实时更新、组件库的主题颜色一键切换、组件可以增加提示语等功能,都是 Sketch 不具备的。Figma 组件库搭建提到组件库,不得不提到原子构建理论。Atomic Design(原子设计)是构建 Design System 的核心指导理论。化学中,所有的物体都是由原子构成,原子组合构成分子,分子组合构成有机物,最终形成了宇宙万物。上万字干货!设计师必读的原子设计完整指南「我们不设计页面,我们设计构成元素的系统。阅读文章 > 2013 年 Brad Forst 将此理论运用在界面设计中,形成一套设计系统,包含 5 个层面:原子、分子、组织、模板、页面。那么对应设计系统来说,我们的颜色、字体、图标以及按钮、标签等都会对应到相应的原子和分子,通过组件之间的搭配组合,最终构成页面。组件库的基础构成按照原子设计理论的思路,首先需要将组件库的类型进行分类,然后再从基础和核心的元素入手,进行元素、组件、模块的搭建。组件库一般由基础样式、控件和组件文档构成。基础样式包括颜色样式、文字样式、效果样式(主要是阴影),组件主要就是控件(相当于 Sketch 的 Symbols),组件文档相当于对组件的样式和状态的展示说明。1. 组件库:基础样式搭建我们可以直接在文档里创建样式库,简单且灵活。当然更建议大家单独创建一个全局样式的文件,包括颜色、文字、效果等,这样做的好处是在以后进行项目切换时,可以很方便快速的进行配置和替换,且可以共用一份原始的组件,高效且有关联性。这里要跟大家提一个概念 Design Token。Design Token 是存储样式值(如色值、字重、阴影、圆角等)的载体。Design Token 最重要的意义是做到设计与研发的样式完全打通,进行无损耗的沟通,增强系统的可维护性,同时可以约束设计侧的样式数量。但是 Figma 本身对 Token 的支持不够全面,比如圆角等,所以需要自研插件来弥补这些不足。全局样式:颜色样式颜色是页面整体风格表现的重要基本元素,它可以建立品牌的识别性,梳理页面的视觉层级关系,突出内容并平衡其他视觉元素。建议大家可以按照功能和属性,将颜色进行分组分类命名,比如主色、浅主色、中性色和功能色等,并将默认、悬浮、点击、禁用等颜色放在一组,方便大家使用。全局样式:文字样式在文字样式中会包括:字号、字重、行高和字距等。在创建文字样式前,将文字样式分为段落样式和文本样式加以区别。将产品内的一些文字梯度以及功能描述等用表格的形式进行整理,并分别创建相应的字号和字重。需要注意的是不要单纯的将名称命名为 T0、T1 等纯符号性的名称,可以在后面加上适当的描述,比如 T0 辅助、T1 标准等文案,同时也可以在描述里添加对应的使用说明,这样当鼠标悬浮在这个样式上,会给用户带来提示性的预览。这种办法同样适用于颜色、阴影等全局样式,会更加方便大家调用且能够很好的解除新用户的使用疑虑。全局样式:效果样式效果样式一般来说主要是常用的阴影样式,比如外阴影、内阴影等。阴影值应该遵循现实物理世界中物体的特性。因此在阴影的设定上采用了三层阴影的表达方式,让阴影更加柔和,更符合真实光源下的物体状态。物体的高度直接影响阴影,离地面越高阴影越大,模糊值越高,反之相反。同时,为了让组件库阴影层级更加丰富通用,我们将阴影层级划分了 S 类和 L 类两个层级。S 类阴影用于通过交互后出现的场景,其内容带来上下文信息切换,需要抢占用户注意力,更需要提供明确的边界,主要用于基础组件。L 类阴影往往用于多个共存的列表,更加强调整体的柔和性,主要用于导航、首页、模版等业务场景。同时为了能让大家更加清晰的区分阴影的层级,会将常用的一些组件和场景填充在一个表格中,方便大家查阅。2. Component 组件Component 组件相当于 Sketch 的 Symbol。不同之处在于 Component 比 Symbol 更灵活更强大,我们可以用更少的组件做更多的事情,接下来会通过以下几个方面来简要介绍一下 Figma 中组件的相关知识。Auto layout:创建组件能用尽用Auto layout 是 Figma 非常强大的一个功能,创建带有自动布局的组件,通过组合这些响应组件,可以创建可跨多种设备类型工作的设计。在创建组件的时候,一定要把这个功能很好的应用,这样对于组件的拓展和应用会非常灵活。比如常用的按钮、对话框、Toast 等等组件,能用尽用。组件结构化:寻找操作更容易结构化的基本原则是:方便检索控件(Components)、方便编辑控件、清晰地传达控件分组和状态。建议在团队或公司中定义好组件的结构,可依照自己相关的业务,将一些通用性较强的基础组件进行划分。将组件按照属性和状态放在不同的页面里,而不是将所有组件全部堆叠在一个页面。比如数据输入类下面,将常用的输入框、单复选、上传等放置到一起,这使得以下操作变得更容易:在资源面板中查找组件、相关组件之间的交换、提高公司内团队资源库的使用率。强大的变体功能:构建组件库的灵魂和精髓谈到组件,不得不提到 Figma 强大的变体功能。用户可以通过变体功能更加方便和灵活的调用组件库,这相对于 Sketch 来说,简直是好用太多。当你创建组件并建立起你的设计系统时,你会发现需要一些彼此相似的组件,而只有微小的差别。例如:多个按钮的组件,有不同状态和尺寸的独立组件,以及明暗模式或者有无 icon 等,都可以用变体的形式去创建。超好用的变体功能——理解属性和值的概念很重要大家在创建变体的时候经常会有一些困惑,尤其是对于状态非常繁杂的组件,简直是无从下手,尤其是对于属性 Property 和值 Variant 更是觉得很模糊。这里有一些经验分享给大家:首先要了解下一相关的概念,属性 Property:是组件的可变方面。例如:一个按钮组件的属性可以是尺寸、状态,或是否有 icon,可以将其理解为分类。值 Variant:是每个属性可用的不同选项。例如:状态属性可以有默认、悬浮、点击和禁用等,可以将其理解为分类下的参数。然后再了解一下 Figma 的命名规则,Figma 使用斜线命名系统来组织资产面板和实例菜单中的组件。组件名称中的每一个”/”都会创建一个层次。第一个”/”之前的文字将成为组件集的名称,这里需要着重注意一下。比如名称为 Button/Primary/Large/Default/False 的按钮组件将有以下属性和值。组件名称/值/值/值/值。变体名称遵循这个结构,Property1=value, Property2=value, Property3=value。分门别类:变体创建的精髓掌握好命名规则就掌握了变体创建的精髓。教给大家一个非常好用的方法,在创建变体前,首先把需要创建变体的组件进行分类,并统一放在一个草稿上,比如说按钮的尺寸、状态、有无图标等。然后将对应的分类写出相应的值,比如尺寸对应的值就是 m 和 s,状态对应的就是默认、悬浮、点击等。分类好以后,按照上面所述属性和值的对应关系,分别将这些属性和值一一对应填在草稿上。然后再根据 Figma 的命名规则,将所有组件的名称命名完成,比如 Button/m/默认/no/yes,然后就可以直接创建了。化繁为简:优化变体层级Figma 的变体功能很强大,可以进行很多样式的排列组合。但是我们也发现在创建变体的时候,如果按照每个状态、种类进行划分的时候,整个组件会非常的繁杂臃肿。比如 Popover,会发现在创建它的各种状态时会非常麻烦,除了箭头在各个方向的位置外,还要考虑里面元素的组合,比如纯文本、标题+文本、标题+图文、文本+按钮等等,这样组合起来的组件会非常的臃肿,也不利于设计师去选择。所以我们要学会层级的梳理,比如可以将箭头、按钮、标题图文进行一个分布组合,然后再将这些组合成一个新的组件,通过嵌套的层级关系去调整每个层级的位置关系或者剔除某些不需要的层级。组件链接:组件跳一跳,规则全知道创建好组件以后,可以给每个组件都添加相关的链接,这个链接可以添加到组件的描述中,这样开发人员和设计人员就可以在 Inspect 中点击相关的按钮直接跳转链接了,简直不要太好用。比如组件文档链接(可以查看详细的交互规则)、线上的开发地址(可以查看线上的样式),以及直接点击右上角的跳转按钮跳转到组件文档。这样就打通了所有线上线下的样式规则,非常方便用户查阅和使用。资源预览:展开还是合并更好?相信大家在调用组件的时候都会发现一个问题,有的变体预览是展开显示的,有的变体预览是合并在一起的,那么这个分类办法到底是怎么去划分的呢?通常来说需要大家一眼就能选择,减少用户思考的,可以考虑分开建设变体,比如常见的按钮。我们只需要预览图下的各种形态就能找到想要调用的按钮类型。如果按钮全部的集合到一个变体中,那么大家看到的只有一个按钮,对于用户来说会增加判断和选择的时间,是很不方便的。但是对于一些大家理解起来比较容易且展开后的变体样式非常多的的组件,比如 toast、表格,不需要将其各种变体分别的罗列出来,引导用户点击进去,再选择就好了。开关:怎么这么好用大家在建设组件的时候都会发现一个问题,有的组件是开关显示的,有的是下拉显示的。这是因为如果你有一个只有两个可能选项的属性,Figma 会自动将 true/false、yes/no 和 on/off 都识别为开关。所以大家在做变体的时候,尽可能的将这种只有两个可能属性的选项显示为开关,减少用户的操作流程。组件文档:组件类型和状态的展示说明为了方便大家能够清晰知道组件的相关属性和类别,可以为每个组件创建一个组件文档,方便大家查阅和调用。这对于刚接触到这个组件的人来说非常友好。组件文档的结构一般是由组件名称、母文档链接(交互说明)、基本样式、主要组件和相关组件构组成。在这个文档里可以查看组件的类别和相关状态,以及组成这个组件用到的其他组件,并且通过链接都可以跳转到相应的组件,非常方便。组件库:发布、更新、使用可以将组件库发布到团队的资源库。如果要跨文件使用组件,只能通过专业版团队的团队库发布和使用。当每次有更新发布样式或主组件时,Figma 将自动通知到每一个成员,点击更新即可应用。管理员可以提前默认设置将哪些组件库开启哦,减少了新用户每次进入页面还要重新选择。在 Assets 面板下,可以通过搜索的方式找到需要调用的组件;也可以通过展开菜单的方式找到需要的组件。将需要使用的组件直接拖动至文件中,便可使用。推荐大家使用搜索的方法,效率会更高。组织版:更加强大的功能体验对于组织版来说,我觉得比较好用的功能就是组件统计和分支。Figma 组织版可以统计组件数量、使用团队、调用次数等,这对于组件的使用情况统计来说,非常的方便和直观。分支功能可以让每个成员单独创建主文件的分支,可以在其中探索对文件或库的样式、组件和其他方面的更改,而不会影响主文件。当更改感到满意时,你可以查看分支并将其与主文件合并。所以对于团队来说,组织版的这两个功能还是非常实用的。Figma 组件库搭建 Tips:全是干货,一目了然为了确保值与属性相匹配,每个组件都需要有相同数量的斜线。如果你有一个只有两个可能选项的属性,Figma 将 true/false、yes/no 和 on/off 都识别为开关。修复值的冲突错误:如果任何变体的值组合完全相同,Figma 会让你知道存在冲突。即使变体本身在视觉上不同,也会看到这个错误。Figma 将使用左上角的变体作为默认变体,此变体将代表资产面板中的整个组件集。如果你不确定某个组件集有哪些变体,或者它们的原始样式,你可以在原始文件中查看组件集。使用·或者_可隐藏不需要展示的组件。组件内部预设元素只能减少,要增加需拆解。不要将组件完全拆解、嵌套元素都支持修改。使用 Autolay out,对齐自适应更智能。使用全局样式,一键修改更方便。跨文件使用组件,只能通过专业版团队的团队库发布和使用组件。结语组件库是一个强大的提效工具,对于设计师和开发来说有了统一的标准,输出的效率也会大大提高。对于团队来说能很好的提升产品的品牌感和体验,尤其在 Figma 强大特性的帮助下,将发挥更大的作用。同时我们也一定要学会整体思考、善于总结,不断优化和完善组件的细节,将组件库的特性发挥到最大。由于篇幅有限,关于组件库某些内容介绍的不够全面,如果有不严谨、错误的地方还望大家给与指正,欢迎大家一起学习和讨论。用一篇文章,从零开始帮你用好 Figma 的组件库功能对于设计系统,我们最熟悉和常用的应该就是设计组件了,即 UI kits,包括输入框、按钮、文字、链接、下拉菜单等等。阅读文章 > 欢迎关注作者的微信公众号:「百度MEUX」本篇来源:优设网原文地址:https://www.uisdc.com/figma-building-a-component-library
创伤 用户 人群 原文引自 Airbnb Design 上的一篇文章 Designing for crisis:5 learnings from developing trauma-informed products。自全球疫情肆虐以来,各行各业都受到了严重影响,而前线医护人员更是首当其冲承受了巨大压力。在这篇文章中,针对长期与病毒抗争的医护人员以及临时住宿提供者,Airbnb 的团队的体验设计主管 Annie 介绍了他们团队的认知与思考。本文不仅阐述了对创伤知情这一领域的理解,更是包含了他们如何将这一医学概念运用到具体设计之中的方法。文中提及的方法论可以运用到其他很多相似场景,其中蕴含的人文关怀也同样值得我们深思。本文主要介绍了 5 项创伤知情设计准则,即:安全:优先考虑并保护用户心理健康;透明:提供当下及后续的充实而准确的信息;选择权:尊重个人尊严和能动性;互惠:通过协作或共享决策来建立伙伴关系;平等:认识到创伤对被边缘化人群的影响尤为严重。自疫情爆发以来,我们可以说是度过了漫长的一年。在美国,尽管疫苗姗姗来迟,但人们还是渐渐看到了希望。然而对于医疗工作者来说,如此长时间奋战在前线依然是一件非常不容易的事。正如一篇题为《新冠疫情期间医护人员的疲惫:从一所大型重症监护病房吸取的教训》的论文描写的那样,休斯顿卫理公会医院的研究人员们亲眼目睹了这一情形:“新型冠状病毒(COVID-19)疫情导致了抑郁症与焦虑症的全面激增,并且引发了现有精神健康问题的恶化,这对医护人员的身心健康造成了极大伤害……我们发现,由于需要在家庭责任与职业责任之间做出抉择,医护人员们在情感上承受了非常大的压力。”这些研究人员描述的正是所谓的“创伤”,即由某个痛苦经历造成的心理伤害。据药物滥用和心理健康服务管理局(SAMHSA)表示,创伤会对一个人的身体机能以及心理、身体、社会、情感或精神上的健康造成持续的负面影响。在 2020 年 3 月,我们团队和公司内其他许多成员开展了“前线留宿计划”。在这个计划中,新冠工作人员可以找到一个欢迎他们的临时住所来进行自我隔离。我们已然知道医护人员遭受了疫情的严重影响,但是社区房东们反馈他们同样也处于一个两难的境地,因为他们不仅需要权衡这件事对自己家庭的影响,还需要在自身蒙受经济损失和支持社区医护人员之间反复挣扎。那这里就有一个重要的需求:“在这一困难时期,我们可以如何关怀新冠医护人员和社区房东们呢?”在 Airbnb 团队,我们为经历这一困难时期的人们设计了许多工具。为了确保服务对象的安全和舒适,我们的设计流程也在不断地优化。我们大量借鉴了创伤知情护理原则,即一种在医药、人道主义援助和社会服务领域被广泛接受的原则。接下来,我想分享一些我们如何使用这些原则的案例,希望可以帮助其他团队在需要的时候完善用户体验。以下是 5 项创伤知情设计准则:安全优先考虑并保护用户心理健康。在通常的设计中,我们会考虑产品中的用户流失、转化和完成等指标。但一旦当我们需要为经历过创伤的人群进行设计时,优化这些指标就可能会导致不理想的体验。而一种创造心理安全感的方法就是永远都给予用户一个清晰的可以拒绝或者退出的选项。案例研究: Airbnb 的用户评价流程在此之前,灾难疏散人员和新冠工作人员得到的是与普通休闲游客相同的用户体验,其中包括了一系列五项打分和评论的提示。对于游客来说,这通常并不算是一个问题。然而我们从用户这边了解到,在困难时期,额外的操作会使人应接不暇。为了保护用户的心理健康,我们移除了原有的提示并用“反馈”替代了“评价”,同时让几乎所有的问题都变成了可选项(因此还新增了“跳过这一步”)。我们上线这个功能并没有很久,但是已经发现反馈的质量有所提升。我们发现用户在入住期间会给出更多的建议,来告诉我们哪里做得好或者哪里做的不好,这可能是之前他们并不乐意去做的。一些可能帮助你实现安全准则的方法把部分或者所有的操作变成可选的;去除不必要的提醒或推销;确保有随时可以离开的选项。透明提供当下及后续的充实而准确的信息。作为设计师,我们常常热衷于设计视觉效果杰出的方案,比如添加适量的动效,或是使用一张吸人眼球的插画。然而对于经历过危机的人来说,集中注意力和作出决定可能会更加困难,因此对乐趣和易读性进行平衡便显得尤为重要。案例研究:前线留宿计划登录页的第一个版本我们推出了前线留宿计划,希望可以帮助前线工作人员在他们工作时找到留宿的地方。我们意识到医生护士们可能会在轮班时或者在一次长期值班之后浏览这些页面,所以我们决定对信息进行简化,去除图标并分项概述程序特点,以确保信息一目了然。选择权尊重个人尊严和能动性。作为设计师,我们的工作常常就是通过简化用户体验来帮助用户做出决策(比如像 Spotify 或者 Turbotax 一样,在单一流程中优先推荐某个选择)。尽管这样做可能会有效,但是对于正在经历创伤的人群来说依然存在不足之处。因为在受创伤群体人生中的某一刻,他们可能会感觉事态超出了自己的控制,所以除了清晰说明所提供选项的意义之外,提供发挥他们能动性的机会也是非常重要的。案例研究:在 Airbnb 上注册房东资格房东们通常会在社区有迫切需要时注册 Airbnb。比如在一场自然灾害严重影响到他们的所在地区时,为那些避难家庭提供住处就会变成一种简单而有效的帮助途径。对于房东们来说,选择招待对象便是最重要的时刻之一。几年前,为了简化流程,我们曾经预选了“所有人群”选项来简化流程。然而当我们重新审视这段经历时,我们意识到这些响应了紧急需求的房东们希望对他们帮助的人有一个清晰的把控。我们也不希望他们意外在某个紧急瞬间错过了用户的请求,所以在我们的重设计过程中,我们移除了“所有人群”的选项,并使所有选项都处于未选中状态,以求给予房东们更多的控制权。一些你可以在设计中给予选择权的方法一次性展示所有的选项,避免人们后续会因为新的信息而感到不知所措;提前为接下来的步骤或操作添加预期;需要关注是否默认给用户选上某些功能或规划。互惠通过协作或共享决策来建立伙伴关系。产品团队常常是会为用户指定解决方案,而互惠原则要求我们重新审视这种心态,从一个给予者转化成一个合作者,从“为用户设计”转化成“和用户一起设计”。在从调研到落地实现的过程中,强调合作伙伴关系可以让正在经历危机的人们明白他们并不孤单。从“我可以给你三个选择” 到 “让我们一起看看这些选择”。案例研究:Airbnb 的帮助经验我们的支持团队会一直为需要 Airbnb 住宿的用户提供协助。当知道用户可能在避难时,客服们会采用创伤知情类方法来安抚他们。Amelia Savage,Airbnb 的全球业务经理称:“我们意识到用户会在我们的关系中得到治愈,此时一个自然的共同监管方式就是让他们参与所有的相关决策。”当遇到问题时,Airbnb 的客服会避免使用诸如“我可以给你三个选择”或者“这些是我可以做的”,转而关注与用户之间的伙伴关系,会说“让我们一起来看看这些选择”。这种一起做出决定的方式反复告诉用户他们并不孤单,告诉他们客服们很乐意以同伴的关系一起共事。一些建立互惠关系的方法热线是一项值得投资的东西,对于帮助危机中人群至关重要;在从调研到实施的整个产品设计过程中思考,如何体现强化和危机中的用户的合作关系。平等认识到创伤对被边缘化人群的影响尤为严重。诸如残疾人、老年人、非二元性别人群和有色人种等边缘化群体比其他人更有可能受到心理创伤。如果不为边缘化群体设计,我们就不可能做好创伤知情。为了保证被边缘化人群有一个良好的体验,我们花时间调查了自己的特权、偏见以及猜测是如何使我们的流程变得复杂而有压力的。案例研究:医疗旅行预订体验我们在 Airbnb 上服务过的人群中有一部分是去就医的。我们有 50% 的用户是首次使用 Airbnb 医疗组织的人群,他们常常因为上了年纪以及低收入而被边缘化。最开始当我们思考对寻找和预订住宿的过程进行优化时,我们不认为需要调整创建账号的部分。但是当我们的帮助团队发现在这一部分寻求帮助的请求存在小幅增长时,我们意识到自己进入了误区。事实证明,由于我们很多游客从未听说过 Airbnb,同时对软件操作也不熟悉,所以他们会认为在注册时我们希望他们选择登录邮箱。在我们重新设计的过程中,我们对搜索体验进行了简化,并且在整个流程中都增加了引导。此中我们的内容策略师 Claire 保证了所有的描述都清晰、直接且易于浏览。这一举措产生了可观的收益:当前整体的帮助请求量降低了 30%,账户创建相关的帮助量下降至 0%,并且我们收到了诸如癌症帮助社区等合作伙伴的积极反馈。一些可以实现平等的方法关注到自己的偏见和猜测;在你的产品设计过程中将边缘体验设计作为中心。如果可以的话,和那些被边缘化的人一起进行设计工作,至少要倾听并接纳他们的反馈;文案要清晰、简短、易懂;确保可访问性是设计过程的关键部分之一。形成创伤知情意味着优先考虑用户的心理安全和舒适度。作为设计师,我们已经学会了在同理心的引导下制定解决方案。尤其对于那些正在经历艰难时刻的人群,采取创伤知情设计可以增强我们的这种积极影响。在这个我们共同经历创伤的时刻,创伤知情的设计方法可能比以往任何时候都重要。以下途径可以了解更多关于创伤知情护理的知识:网站:Trauma-Informed Care Implementation Resource Center 网址:https://www.traumainformedcare.chcs.org/what-is-trauma-informed-care/书籍:Trauma Stewardship: An Everyday Guide to Caring for Self While Caring for Others by Connie Burk and Laura van Dernoot Lipsky书籍:Trauma-Sensitive Mindfulness: Practices for Safe and Transformative Healing by David A. Treleaven书籍:The Boy who was Raised as a Dog: And Other Stories from a Child Psychiatrist’s Notebook : what Traumatized Children Can Teach Us about Loss, Love, and Healing by Bruce D. Perry最初的指南由 Claire Moshenberg (首席用户体验作家)和 Meredith Hitchcock (首席体验研究员)共同创建完成。万字长文!十大设计心理学知识点全面解析人处于大自然或形色的社会中,会进行下列一系列活动。阅读文章 > 欢迎关注作者微信公众号:「We-Design」本篇来源:优设网原文地址:https://www.uisdc.com/designing-for-crisis
截图 纵向 都是 一些尴尬时刻网上的很多分析文章爱这么写东西,很多人做竞品分析的时候也爱这么做:竞品分析别乱套模板!我总结了这4个关键点竞品分析,成本低又容易实施,可能是大家日常工作中最常见的调研分析方法了。阅读文章 > 这样做竞品分析叫做枚举差异,不叫“分析”,因为:1.没法拿到竞品的数据数据,我们往往没有办法分辨这些差异点究竟是不是真的有助于提升用户体验。2. 我们不清楚竞品发展的来龙去脉,不清楚当时为什么他们使用了这个设计样式,可能是从用户体验出发,也可能单纯是因为竞品当时赶进度没注意到这个页面因此,抄竞品,特别是你的产品有直接竞对时,很容易会出现这样的尴尬场景:我们抄竞品,竞品抄我们我们设计完了以后,发现本品是从竞品的样式迭代成现在这样的(别笑,真有可能)除了竞品分析经常有这种尴尬时刻,在内部评审会也经常有类似的情况:业内的控件/规范都有迭代周期,实际上因为规范也需要花时间去写,所以大的平台规范总是有一点滞后于当前业内情况的。比如 switch 控件在 windows 7 时代就是一个只存在于移动端上、不可用于 PC 的控件。但是在 Windows 8 以后,特别是现在的 fluent design,switch 已经完全可以被用在 PC 上了。要是完全遵循老一套规范,设计多少是束手束脚一些。为什么会这样?因为我们无论是做竞品分析,还是去理解规范,都是去横向对比当前时间节点上已有的内容,用的一种学术上叫做横截面研究(cross-sectional study)的研究方法,我们了解在一个时间点上 20 个竞品的样式差异,也可以去完全背熟参透一本规范,但是这么做都只能了解当下这些竞品或则平台解决问题的方式,而不能了解他们解决问题的思维和习惯,以及这些解决方案究竟是否有用。那么如何才能弥补横断面研究的不足?除了提升自己对于设计的判断力以外,还有一种横截面研究以外的设计研究方法:纵向研究(longitudinal research)。虽然学术上这么叫看起来比较厉害,但实际上究其根本,也就是竞品调研上的“竞品追踪”,或者规范学习中的“历史规范学习”。它主要是探索同一个产品或者同一份规范,在时间维度上的变化,去分析造成这些变化的原因,从而加深我们对当前领域的理解。纵向研究有这样的优点:研究的对象,不管是竞品还是规范,都在时间上有连续性,我们可以根据一个设计方案在时间上的迭代来判断这个设计方案是不是稳健、有扩展性我们能理解一个设计方案在设计之初主要是想解决什么样的问题,以此来辅助我们判断,是不是需要使用这样的设计。但纵向研究也有一个致命的弱点:非常耗时。做过设计追踪的朋友应该知道,追着一个竞品不停的截图挺费力,截图也不一定容易保存。在安卓上我们可以下载历史版本 app 来截图,但苹果机上就没有这么方便了。此外,历史设计规范也很难找,除了 winodws 会在官网上保留部分人机交互指南以外,其他平台大多数都直接删除了老旧的设计规范。如何方便地做纵向研究?有几个方便的软件或者手段:1. 现成的 app 截图:访问 app 归档网站国内外都有一些 app 页面归档网站,比如: https://www.pttrns.com/apps , https://uxarchive.com/甚至花瓣或者 pinterest 上也能找到一些类似的画板。但他们的截图频率很低,也一般不能坚持太久。还是推荐自己做直接竞对的归档收集。2. 归档自己的 app 截图:使用 eagle 做直接竞品的归档虽然这个产品主要是给视觉用来做灵感库/情绪版收集的,但意外的在收集交互样式上也比较好使。为不同的追踪产品建立文件夹,打上版本号,一个月规律地做 2 次竞品收集,大约半年就可以开始对竞品的发展脉络做一个比较系统的分析。3. 现成的 pc 截图:internet archive way back machine(需要科学上网)Internet archive 是一个公益性的归档网站,而 way back machine 则是一个可以记录历史网站历史版本的实用工具,mac/material design 的网站一旦有变化,基本可以在这上面找到。网址: https://web.archive.org/读者福利最后,我归纳了windows、Mac iOS 和OS的部分体验规范文档供大家下载。包内包含winodws95~windows11、Mac 2002年~2014年包含的十数次版本迭代。其中Mac OS与iOS部分版本官方不再发行pdf文档,可以通过internet archive的网址访问到。当然,所有的规范文件都是英文的,后续我也会继续写一些文档的带读,帮助大家更好地理解交互发展几十年的一些思维沉淀。如何用以终为始的方式做竞品分析?我总结了这4个方面!竞品分析作为无论产品经理、运营岗或体验设计师,都是其必备技能和工作范畴之一,想必大家也应该有些许心得和体会。阅读文章 > 欢迎关注作者微信公众号:「白话说交互」 文件名 如何下载使用 文件大小 提取码 下载来源 design guidelines276.18MB8866 点此复制 登录下载 本篇来源:优设网原文地址:https://www.uisdc.com/longitudinal-study-ixd-design
减法 用户 加法 在我过往的工作经历里,「创新」一直是一个很重要的标签。也是这样一种坚持,让我在上一份工作的 4 年里产出了很多创新的设计,提交了不少的专利。《IDEO,设计改变一切》中提到衡量想法是否可行的三个标准是:可行性:在可预见的未来,有可能实现功能(考虑技术可行性和实现成本);延续性:有可能成为可持续商业模式中的一部分(符合业务的战略诉求);需求性:对人们来说是有意义的(解决了用户的问题);而我在评判我的设计是否良好的标准,会在以上 3 项的基础上再加上 2 项:美观性:设计出来的方案是具有审美标准的;创新性:设计具有一定的引领性和创新性。符合前 4 项,这个方案是一个合格的设计,符合「创新」,还能给人眼前一亮的感受,才符合我心里对优秀设计的定义我们作为设计师一职在一个项目制的环境里,要产生颠覆行业的创新是很难的,但是我们可以基于需求问题背后的思考,以及基于市面上现有的解决方案,提出「渐进式的创新」来做出差异化的价值。接下来我想分享一下我自己会用到的 6 个能产出创新方案的思维模式:加法创新加法创新是一种比较基础的创新。当前的产品功能不能满足用户的需求,我就增加一个,必然能满足更多用户的诉求。但是欲望是无止境的,功能的增加必然伴随着结构复杂度的提升。比如一个用户常用的功能,路径非常的深,于是就在首页增加一个快捷的入口方便用户点击,看似便利了用户,实际上破坏了产品首页的简洁性,也开启了一个「我的业务入口点击量大就应该在首页」的先河,以后再有同类的需求就很难去平衡。短期虽然能赢得不错的用户口碑,长久来看实际可能对产品的结构产生了不可逆的破坏。所以,在这里提到加法创新也是想告诫大家,在做加法的时候,一定要谨慎,考虑长远的影响。好的加法应该就像 Magic Mouse 之于传统鼠标一样,增加了各种手势交互却没有变成各种按钮的结合体(除了没有考虑人体工学)。Magic Mouse 和 罗技的 MX Master 鼠标。两个我都买过,最后我放弃了罗技的鼠标,因为这些设置的快捷键我根本记不住。减法创新做加法很简单,做减法就很难了。不同于加法对原来的东西都做保留,做减法意味着我们要去掉一些已经在线上的内容,而这些内容即使再有问题也有可能有部分用户在用。所以每一次删减都要深思熟虑,并且做出很大的决心,甚至是技术的突破。我们可以尝试从以下 3 个角度去思考产品的减法:a.步骤的减法推拉门很麻烦,所以发明了自动感应门,每次开车门需要拿钥匙,所以发明了无钥匙进入,疫情期间每次解锁 iPhone 都要摘下口罩,所以最新的 iOS 系统里增加了戴口罩也可以进行面部识别解锁的功能。我们很容易习惯生活中多余操作带来麻烦,但是设计师就是要敏锐的发现这些带来麻烦的步骤,优雅的解决他,带来全新的用户习惯。就像以前登录注册还都要先注册后登录,现在都是一键授权即可。iOS 正在 Beta 版本测试的功能,使用口罩 Face ID。但是要注意,就像我在加法创新里提到的,步骤的缩减不等于将入口外化,千万不要做了减法的同时又在别的地方做了加法。b.视觉的减法视觉的减法,简单来说就是有更多的「留白」。通过减少页面的视觉信息,让用户的视线更加聚焦,提高转化。视觉留白的好处已经是非常成熟的理论,就不多赘述了。这里倒是想说说一个让我们回忆起要有更大「留白」的方法:所谓的留白增大,其实就是元素之间的间距变大,制造更多的空间感。所以为了方便对已经做好的页面快速使用不同的间距进行对比,figma 的 auto layout 功能就特别好用啦。使用 figma 的 auto layout 功能快速调整元素间距。另外,我们很多时候会因为不断沉溺在需求中,「忘了」要去一个一个像素的调整,看看什么样的界面是最好看的。我有个办法是,每次做一个新页面前,都会在自己的素材库里找一大堆好看的设计稿放在画板的边上。倒不是说为了「借鉴」人家的界面,而是时刻提醒自己,别忘了拉大这些元素的间距,慢慢调整看看,在信息容量和视觉之间找到最佳平衡点。做设计前多找些可以不断敦促自己尝试更多排版可能性的参考。c.结构的减法结构的减法要求我们对当前的结构进行梳理,归类用户认知中一致的内容,整合到接近的位置,甚至对部分入口进行折叠。一个很好的例子就是苹果公司流产的 Airpower 充电基座(也是我一直很期待的产品)。对于用户来说,手机,手表,Airpods 才不需要带 3 个充电器,充电器就应该是统一的。苹果的 Airpower 概念图。而在界面里也是,例如 figma 等设计工具里,把创建形状都聚集在一起已经是一个共识,因为用户知道在这里能找到所有类似的形状。模式的搬运我们很多互联网的优秀设计,都是来源于现实生活。比如拟物时代的界面都和现实世界我们熟知的产品长得相似。iPhone 早年的计算器界面和迪特拉姆斯设计的 Braun ET66 计算器又比如我们的产品在等待加载的过程中,要用各种内容分散用户等待的焦虑,给予用户耐心,就像我们在饭店吃饭的时候,有的饭店会在等菜的时候给你小食,有的则给你一个沙漏让你对上菜的时间有足够的预期。不止从现实世界寻找模式,我们在做产品的时候也不应该将目光局限于同类的竞品,完全不是同类的产品也能给你一些模式的参考。比如我曾经很喜欢用效率软件管理我的生活,在使用了 Omnifocus 之后,去学习了「GTD 工作法」。最后,我把其中「清空大脑」的理念和聊天消息结构的呈现做了结合,设计出了能让消息处理更加高效的钉钉专注模式。钉钉的专注模式,通过结合下拉刷新隐藏已处理的消息,让用户更快看到未读的消息。从内容出发从内容出发要求我们从设计最终服务的人群特色,场景特色,时间特色去反推,我们的设计有什么个性化的创新可以去实现。比如 Bilibili 针对电影《沙丘》的弹幕,基于对电影主题的思考,就用了沙子的形式来表现;B 站的《沙丘》电影弹幕,细节发现来自优设细节猎人 by AmberDu 小白比如微信的情人节限定状态和 520 红包,就是针对特定的时间属性做了内容创新;微信的亲人节限时状态,细节发现来自优设细节猎人 by 洛糊糊。第一时间删除第一时间删除说的是,我们在遇到问题时,第一时间出现在脑子里的方案,不一定是最后和最好的方案,很多时候甚至就是别的竞品类似的方法。尝试去推翻这个想法,去思考「如果不这么做,还有没有别的办法和可能性」。虽然不一定要「为了不一样而不一样」,从而挑战了用户固有的习惯。但是如果都不抱着去尝试新的可能性的决心,又怎么能做出创新的设计,带来一点点设计的突破呢?劳逸结合,享受生活这一条不是一个方法,更像是一个倡议,就像前面说的,好的设计来源于现实生活。整天埋头工作,并不能保证你做出好的设计,《黑镜》编剧 Charlie Brooker 有一个很有意思的说法:“当有意识地写作时,文字就是憋不出来。文字就像蟑螂,只有在关灯后,它们才会感到自由地在厨房地板上乱窜。”试想设计师如果没看过《沙丘》,怎么会知道把弹幕做成沙子的形式,如果不过情人节,又怎么能感受到单身狗的痛,然后做成了微信状态呢。如果不够有足够的好奇心,多观察一些有趣的生活小妙招,多体验好玩的游戏,多使用好的产品,又怎么能学到好的模式呢?好了,以上 6 点,希望能帮助到你。没有灵感怎么做设计创新?收下这个方法!工作中我们设计师除了要完成产品经理或者业务方的需求,往往还希望在设计产出上能有更多的创新来体现自身的价值。阅读文章 > 欢迎关注作者微信公众号:「Minus Lab减法实验室」本篇来源:优设网原文地址:https://www.uisdc.com/innovation-design
小技巧 用户 编者按 编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Marc Andrew 的文章梳理了 8 个实用性很强的 UI 效果提升小技巧,是系列文章的十篇,原文最早发布于 marcandrew.me 。在创建实用、可访问性良好且视觉效果颇为出彩的 UI 界面的时候,我们大多只需要进行有限度的微调,即可达到颇为不错的效果。在之前,我已经撰写了很多实用的 UI & UX 优化小贴士(看完文章在文末获取),这篇文章继续增加 8 条实用的建议,一起来看看吧!1. 尽量采用一致且同心的圆弧边角在上面的两个设计示例中, 一个嵌套的矩形的圆角半径看起来不是同心的,另一个则显得更加一致合理。在设计带有圆角的控件的时候,如果两者不是嵌套关系,那么圆角需要保持一致,确保整体视觉的统一性,如果是嵌套关系,那么需要让两者的边角是协调的「同心」的效果。这种按照比例缩小的边角更加符合现实世界的逻辑,而且能够制造出令人愉悦和谐的视觉体验,给人感知会更加精致而专业。2. 深色模式下注意高程变化对于颜色的影响在深色模式下,不要用纯黑应该已经达成共识了,尽量使用深灰色来呈现应该已经是众所周知的事情。不过当 UI 控件有互相重叠的情况发生的时候,需要注意,控件在 Z 轴的高程上存在差异的时候,要控制好深灰色的色阶深浅变化,来确保它在 UI 视觉逻辑上的合理性。在现实世界当中,元素距离你越近,一般也会距离光源越近,在视觉上颜色也应该越浅。在这种情况下,可以根据近浅远深的逻辑来控制色阶,让界面的「高程」逻辑 更加合理自恰。在深色模式下,由于颜色总体偏黑灰,这个时候几乎不需要进行任何阴影上的设计,只需要控制控件主色的色阶变化,就足以呈现出这种规律。3. 使用简短明确的文本标签来传递信息在上方的两个设计范例当中,靠下的案例使用了更加简短明确的文本来描述,简略而明确地传递了信息。如果不是要进行完整全面的解释,一般文本内容,最好在消除了可能存在的歧义之后,尽可能简短地表达,这样可以帮助用户更好地获得他们想要要的关键。4. 何时使用单选按钮,何时使用下拉菜单在上方的两个设计示例当中,一个使用了单选按钮,另一个采用了下来菜单来承载多个选项。当涉及到类似这种产品列表的选项设计时,UI 控件的选取常常会出现混乱的情况,看起来两种设计似乎都是合理,但是实际上是要分情况的。一般而言,是选用单选按钮,还是使用下拉菜单,关键的判据是「用户认知负荷」,通常当可选选项数目少于4个的时候,使用单选按钮即可,当数量超过4个的时候,使用下拉菜单来承载选项。5. 避免使用默认的阴影样式在上方的两个设计示例当中, 一个使用的是默认的黑色阴影样式,另一个则使用的是带有背景颜色倾向的阴影样式。在彩色背景上处理 UI 元素时,尽量避免使用黑色阴影,因为在现实世界当中,实际阴影效果是会受到环境颜色的影响的,如果可以的话,采用偏向背景色的阴影,能够让 UI 变得更加真实。如果你也要避免那些看起来很假的阴影,最简单的方法就是在其中混入一点背景色。6. 深色模式下的白色需要适当调暗在上方的两个设计示例当中, 一个是使用纯白色背景的通知元素,另一个具有更暗更微妙的白色背景。正如我在之前的技巧中提到的,在创建深色主题设计时永远不要选择纯黑色,因为它会影响许多用户的可用性,适当调亮黑色,能够软化强对比所造成的刺眼状况。当深色主题下需要使用白色元素的时候,类似的规则也同样适用。这个时候需要适当让白色的明度更暗,降低对比度,让用户不会因为过强对比而产生视觉频闪效果。7. 不要仅靠颜色来传达表单的错误状态上面是两个表单设计示例,一个案例仅仅使用红色边框作为错误状态警告,另一个案例则在红色边框的基础上添加了图标和说明。这个主要是可访问性的问题,不要仅仅使用颜色来向用户传达状态信息,因为如果用户存在视觉障碍,很容易漏掉错误状态的指引。始终使用图标和文本说明,来告知用户到底发生了什么错误,问题的症结在哪里,确保信息的正确传递。8. 使用占位符示例来改进表单体验在上面的两个设计示例当中, 一个使用默认占位符文本,另一个占位符则使用了贴合内容的格式。与其只使用「输入您的电子邮件」之类的占位符文本,不如提供一个真实的示例,即:「hello@marcandrew.me」,这样可以更加直观地告知用户,这个地方要填写的内容是什么格式的。下面是往期的内容:第一波!快速提升 UI 设计效果的 9 个小技巧编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第二波!快速提升 UI 设计效果的 14 个小技巧编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第三波!快速提升 UI 设计效果的 6 个小技巧编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第四波!快速提升 UI 设计效果的 6 个小技巧编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第五波!快速提升 UI 设计效果的 6 个小技巧编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第六波!快速提升 UI 设计效果的 6 个小技巧编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第七波!快速提升 UI 设计效果的 6 个小技巧编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第八波!快速提升 UI 设计效果的 6 个小技巧编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第九波!快速提升 UI 设计效果的 7 个小技巧编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 本篇来源:优设网原文地址:https://www.uisdc.com/improve-ui-designs-faster-10-2