组合 误区 很多人 我知道很多人其实都有参考的习惯，但是经常进入参考的两大误区，最大误区就是从参考变成抄袭，这个是很多人的问题，经常性的抄袭会抹杀自己的创造能力，什么是创意？就是老东西和老东西的新组合，我们可以参考别人组合的思路，但是不能直接用他们的组合。还有一块误区就是我不知道参考什么，看它的画面挺好但是不知道好在哪里，也就是有心无力，或者私下想自行学习却不知道如何解析。如果你有以上的问题一定要认真的看完本文，并积极按照文章的思路进行练习尝试，本文会一次性给你说清楚如何进行合理的参考学习。更多平面干货：用好这5个简单实用的海报技巧，特别容易出效果！今天给大家分享五种针对海报的小技巧，都是不需要有什么技法基础就可以做到且效果还不错的。阅读文章 > 欢迎关注作者微信公众号：「视研设」本篇来源：优设网原文地址：https://www.uisdc.com/graphic-design-reference-method
手势 组合 功能 我们将常规的基础通用手势进行打散重组、结合实践案例梳理出组合手势设计模型，探索如何在视频场景中构建便捷高效的进阶手势体验。手势设计干货：超多案例！交互手势全解析（三）：多指类和组合类多指类手势之前的文章讲解位移类手势和点击类手势的时候，提到过不同的描述维度会让手势产生不同的变种，比如触发时机、 按下次数、 阈值类型等。阅读文章 > 一、前言视频播放器中承载着极其丰富的内容画面和播控功能，尤其是在寸土寸金的移动端视频播放器中，为使内容更沉浸消费，需尽可能克制界面中的功能元素/入口直接外露。基于此种场景下，合理的手势设计不但可为界面“减负”，还可帮助用户更快捷触达功能、提升操控便捷性。视频场景中目前已有部分的常规单向手势已被用户广泛接受并形成习惯认知，如「单击 暂停」、「双击点赞」、「长按快进」、「横滑导航」、「纵滑切视频」、「双指捏合缩放视窗」等通用手势。那么如何在保留用户对于常规通用手势认知的基础上，进一步对视频场景中的手势交互进行扩容升级？这也是我们接下来在手势进阶交互上的重点探索方向。本次针对百度 APP 中的视频播放器场景，为提升手势操控效率，我们试图将常规的基础通用手势进行打散重组、并结合实践案例梳理出「组合手势」设计模型，以探索如何在视频场景中构建便捷高效的进阶手势体验设计。二、什么是「组合手势」「组合手势」是基于常规手势的组合扩展，其通常由两种或两种以上的常规基础手势所构成，若组合方式及使用场景得当，可助力用户更便捷的触达功能。以前述的视频场景常规手势为例，其触发机制一般可分为两个阶段：step1 交互信号 step2执行任务，即用户通过某一基础手势发出交互信号，系统收到信号确认后便可立即执行任务，但整个过程是线性的，手势扩展性十分有限且难以满足视频场景对于手势扩容的诉求。于是我们在现有常规手势两阶段触发机制的基础上，尝试引入「意图识别」环节，并梳理出「组合手势」的设计模型，以探索不同基础手势相互组合后的扩展可行性。「组合手势」触发一般可分为三个阶段：step1 交互信号step2意图识别step3执行任务，前两阶段均可由对应的基础分支手势构成并进行组合搭配、以寻求最高效的手势组合触发路径。由于「组合手势」并不像常规手势那样早已被系统定义为可供直接调用的接口，因此，其差异化创新具有较大设计灵活度，尤其需根据具体的使用场景进行综合考量。三、「长按组合手势」激活快捷菜单1. 项目背景百度 APP 视频场景早期的播控功能较少，如“视频下载”等个别特色功能入口一般都融合于基础菜单之中。随着后续视频场景的功能建设日渐完善，我们便在基础菜单面板中拓展了一行视频菜单，专门用于承载视频场景特有的播控功能。但当前播控功能已达 10 余项，菜单面板弹出后还需左滑才可露出后面的功能入口，因此也常收到用户反馈找不到常用功能、菜单面板功能排布无章且触发成本高。2. 竞品调研及选型通过对竞品进行调研，我们发现竞品均有使用长按手势作为切入口以触发相关播控功能、并归纳出“视频播控触发”目前主流的三种长按交互选型， 分别为：长按触发独立播控面板、长按触发浮层播控选项、长按触发特定播控功能。选型 A「长按触发独立播控面板」：通过长按手势可激活从屏幕底部弹出的独立播控面板，此方案扩展性较强，但对视频沉浸观感体验有一定的打断感；选型 B「长按触发浮层播控选项」：通过长按手势可触发置于视窗上层的浮层选项入口，一定程度上可延续视频观看的沉浸体验，但浮层扩展性有限；选型 C「长按触发特定播控功能」：通过长按手势触发特定的某个播控功能（如长按“快进”），一定程度上可满足此功能的重度用户，但对于长按手势的使用效率较低；3. 设计方案① 长按手势交互扩容针对目前视频播控菜单存在的问题，经过和业务对上述三种长按交互选型方案进行综合考量，最终决定聚焦于以方案“选型 B”的「长按触发浮层播控选项」作为设计切入点。我们意图将部分高频播控功能从基础菜单中拿出进行前置，并探索一套更便捷的触发机制，以此对视频场景中的播控菜单进行设计升级。但随之而来的难点是我们目前播放器中的长按手势已被“快进”功能占据，用户对此功能的使用频率高、并已形成较深的操控认知，若直接下线“快进”功能则会对用户使用习惯产生较大影响，尤其是视频场景的重度用户。那么如何在兼容用户已有长按操作习惯的基础上再拓展“快捷菜单”呢？是否有可能将“快进”和“快捷菜单”进行融合？这也是本次项目对于便捷手势体验的重要设计探索点。基于此，我们决定尝试使用「组合手势」设计模型来对视频播放器中的长按手势进行重新定义，通过「长按+滑选」的机制触发快捷菜单功能项，以缩短视频常用功能路径。对应到设计模型的三个阶段分别为：step1：以“长按手势”创建一个新模式，即发出交互信号并唤出浮层菜单；step2：若用户未松开手指，则系统默认开始识别用户意图，是否有以“拖拽手势”滑选至目标功能项以选择功能；step3：用户滑选锚定至目标功能后，松手释放即可完成最后的功能执行确认。「长按+向上滑选」快捷触发对应功能项；「长按+向下滑选」快捷触发“快进”（一定程度上兼容老用户对于此功能的使用习惯）。② 容错性兼容在设定「长按+滑选」组合手势的同时，考虑到兼容主流的长按习惯、以及对于滑选手势需要有一定的适应过程，我们同时也支持点选的操作模式，即用户长按后若未产生滑选行为便松手，则松手后依然可通过点选的方式触发对应播控功能项。③ 易用性打磨差异化的创新设计形式在前期总会面临质疑和挑战，本次项目也不例外。我们担心用户能否接受并认知「长按+滑选」组合手势的操作形式，于是在 DEMO 开发完成后便进行了一次小范围内的定性可用性测试，以预期在上线前可先收集一波体验问题进行快速打磨优化。我们根据测试目标、用户类别、测试前序准备及测试步骤等环节提前拟好必要的测试脚本，并邀请了 10+名不同年龄段的目标用户进行访谈测试。测试访谈的过程中，被测用户在进行 1 至 2 次尝试操作之后，均可掌握如何使用「长按+滑选」的组合手势，这也为我们增添了不少信心。同时，我们通过观察用户操作行为及用户主动反馈，发现仍有部分易用性细节可进一步打磨优化。扩展触发热区：考虑到单手握持手机的使用场景，可尽可能扩大定义长按手势的触发热区，屏幕中除顶/底 bar 框架区以及本身就自带长按事件的按钮入口之外，其它大面积区域热区均可支持长按触发快捷菜单，以降低触发难度、提升易用性。支持跟手触发：长按后浮出的快捷功能项，其浮出位置支持跟随手指的纵向触发位置而浮出，可减少手指在屏幕上的位移距离、操控更便捷。实时提示及响应反馈：灵活判断当前手势触控状态（如滑入选择 / 松手触发），在界面中即时给出相对应的引导提示或振感反馈，以帮助用户快速适应新的手势触发机制。方案上线及验证以 AB 实验对本次设计方案进行定量测试验证：「对照组」效果：长按触发“快进”（各播控功能入口仍归置于基础菜单面板之中）；「实验组」效果：长按触发“快捷菜单”选项（支持滑选和点选模式）；小流量实验上线后，经过近半个月的观察，大盘指标稳定、播放完成率等满意度指标稳步提升。「实验组」长按快捷菜单中的功能使用率相对「对照组」均有大幅提升，说明用户对部分高频功能的确有很强的快捷触发诉求。「实验组」的“快进”虽多了一步触发步长，实验前期“快进”使用率不及「对照组」，但随着用户对于「长按+滑选」手势整体的使用占比持续走高，通过滑选触发“快进”的操作习惯也快速被培养起来，对于用户来说，长按快捷菜单带来的整体收益是大于折损的。二期扩展方案随着长按快捷菜单的上线推全，长按手势的渗透率也持续走高，用户逐渐对视频场景更多的播控功能有了长按触发的诉求，于是我们对长按菜单进行了二期的设计升级，在长按浮层最右侧新增“更多”快捷入口以承接视频场景所有的播控功能，用户通过长按后的可选播控项增多，播控功能整体的使用量得到进一步提升。四、「组合手势」拓展探索手势交互是用户在现实世界行为的映射，无论是基础手势还是组合类高级手势，都须符合用户认知习惯、并融入具体的使用场景中进行设计。以「组合手势」设计模型为指导基础、并结合具体的项目实践，我们进一步对视频播放器中更多功能场景进行了便捷手势的设计扩容探索。1.「右滑返回手势」激活“小窗播放”“小窗播放”旨在退出当前视频落地页、并可将当前视频切换成以悬浮视窗的形式进行延续消费。基于用户的此种操控意图，我们以“右滑返回手势”发出交互信号而触发浮出小窗入口，随后系统根据用户“纵向拖拽手势”的行为来判断其是否有激活小窗的意图，若有短距上滑拖拽行为，松手释放即可快捷激活视频小窗，以提升观看体验的连续性。2.「双指手势」激活“满屏播放”“双指拖拽手势”可拖拽并清屏视窗画面，以此手势发出交互信号，若在“双指拖拽手势”基础上有识别到“双指扩张手势”行为，则松手释放即可快捷激活“满屏播放”，以满足更沉浸视频浏览体验。五、结语便捷手势的设计出发点是为提升操控效率、缩减功能触发路径，从而使视频内容更沉浸消费。希望本次基于视频播放器场景的手势体验设计实践能给大家带来帮助和启发，后续我们也将持续深耕视频领域、并进一步探索更贴合用户使用场景的手势交互体验。本篇来源：优设网原文地址：https://www.uisdc.com/baidu-video-gestures-design
卡片 组合 圆角 不知道你有没有发现，每次做 UI 设计，几乎都会遇到卡片容器，也会因为卡片没设计好，没创意，被领导 Diss。那么卡片到底要怎么设计？，有哪些细节需要我们注意？正好，我最近在研究卡片的玩法，发现一些我们很容易忽略处理细节的方法，如果掌握这些，可以帮助设计提升精致度和品质感。我挑选 4 个最具有意义的细节与大家分享，尤其是最后一个，很多设计师不敢尝试。卡片圆角方法卡片圆角看起来很简单，但是如果稍有不慎就会出现看着不和谐的现象。如果单纯卡片布局，其实圆角比较好定义，如下这种方式。常规的卡片圆角，我们可以根据产品设计中，所需要的圆角数量来定义几种大小就可以了，一般推荐 3~5 个就够了，不宜过多。可以用在小卡片、按钮、卡片和其他需要圆角的控件上。另外一种情况，卡片内继续嵌套卡片，这时候一般都会有圆角。那么两个卡片的圆角要怎么计算？面对这种情况，相对好用的方法是：内矩形的圆角是外矩形的 1/2，比如内矩形圆角是 16px，那么外矩形圆角是 32px。下面来看看两个案例。案例 1：上图，在大卡片情况下，左侧外卡片和内卡片圆角一致，这样设计出来效果，看着有些不和谐。右侧的方法内卡片圆角是外卡圆角的一半，这样的视觉看上去整体会和谐很多。下面看个实际应用案例。Dribbble案例 2：在分段导航控件场景下，左侧案例，内矩形和外矩形圆角相等，看着视觉感受不舒适。右侧，内矩形圆角是外矩形的一半，效果会好很多。下面看下这种导航的应用案例。Ghani Pradita卡片描边在一些场景下，如果我们整个产品界面的底色是白色，这时要添加白色卡片容器，同时只是单纯添加投影来区分层级，那么会显得有些模糊。白色背景下，如果添加投影的同时，再增加一描边效果，那么效果会好很多。上图，在白色背景的项目中，我们给卡片边缘加 0.5px 的线，色值#E9E9E9，这样就会清晰的轮廓，卡片层级会更清晰一些。CokePlay上面这个应用，在白色背景情况下，定义卡片，为了让信息层级清晰，特意在卡片上添加了描边效果。上图反面案例，同样的卡片设计，这个应用，卡片颜色和底部背景色一致，导致卡片几乎和背景融为一体，这样信息层级就会很弱，不推荐大家这样大面积使用。卡片组合版式卡片的组合版式，这个词也许你第一次听，因为是我发明的。到底什么是卡片组合版式？我这里指的是卡片与卡片之间的组合排版。上图案例中，这种组合版式，在设计中最常见，也是用得多一些，所以会显得比较常规。我们在前期做概念探索阶段，其实是可以打破这种布局模式的，挑战下其他思路。上图中，就是打破了原有的那种思路，尝试多卡片组合设计。下面，我们来看一些实际的设计案例。大家留意下我红圈标记的地方，这种卡片组合，就是我前面的那种多卡组合思路。MUSINSA&BALAAN上面两个上线的应用，通过卡片的组合排版设计，让画面更有张力和新鲜感。苹果官网卡片组合异形卡片异形卡片，很少有设计师会想到这样去布局，毕竟存在一定的风险。如果设计出来，效果还是蛮有惊喜的。我们今天讲的异形是除去圆形、方形的卡片。异形卡片的特点：不规则中有统一的规律，形式感强、张力、杂志感。BookletIF 设计大奖作品，Booklet 采用异形设计，增强了页面视觉张力。Kakao Webtoon这个动漫类 APP 应用设计，采用异形作为漫画人物容器承载，凸显画面趣味性和可玩性。EchoBehance@the octopus magazineBehance@SPOON. Brand Identity Renewal如果想打破现有模式，走创新方向，异形卡片可以作为一个切入点，毕竟异形卡片可以和品牌符号衔接起来，做创新拓展。写在最后卡片，在多形态业务中都频频出现，例如 C 端、B 端、Web 端、车载等，它的灵活性和适应性，受到广大设计师的青睐，对于开发人员来讲，适配性也很强。所以，既然这么重要的一个卡片容器，是值得我们去细致研究，以便于做出更好的卡片布局。今天我们讲了 4 个细节，我个人认为，如果说想发挥创意，最后一个异形卡片可以有更大空间。最后，大家可以自行在探索前期，多尝试创新。做好这4个细节，帮你快速提升卡片设计效果！Hi，我是彩云。阅读文章 > 欢迎关注作者微信公众号：「功夫UX」本篇来源：优设网原文地址：https://www.uisdc.com/card-design-details
飞翔的企鹅
张大湿
落霞与孤鹜
