01.  内容与手势的联动设计 

交互手势在移动端设计场景中至关重要，手势的变化和内容的联动关系，决定了是否可以获得更高的用户体验。 比如抖音的短视频播放设计中，进度条拖动过程中除了时间数字变化以外，数字的位置会随着手势的方向位移。联动效果的设计感官体验明显，内容传播的关注度更强。

抖音

02.  内容切换的场景模拟化设计 

以真实场景模拟设计表现，在 UI 设计中比较常用，带给用户更强的场景代入感。 比如千聊 App 首页的免费听直播栏目，直播预告的时间切换就像频道调频一样，切换到自己感兴趣的内容。自然流畅的动效滑动，两条点缀的红色线条，把频道切换的场景代入感体现给用户，带来新颖的感官体验。

千聊

03.  通过文字角标设计表达切换差异 

顶部内容的分类切换较为常见，特别是电商产品中。一般体现点击和默认通常有字体大小区分、颜色深浅区分、下划线区分、图形装饰区分等。 除此以外也有下划线的变异用法，通过角标线段来体现差异。通常是右下角位置，伴随着动效表达。比如京东 App 首页，联想到京东吉祥物，也有一种品牌呼应的感觉。

京东

04.  更贴近真实场景的设计引导 

通过设计还原真实场景，带给用户更强的代入感，从陌生转换到熟悉的场景触感。 高德地图通过模拟真实的道路状况，呈现出更加真实的行车引导，就像自己驾驶的车辆行走在手机屏幕上一样。真实感的路况引导增加了驾驶的代入感，降低了复杂路口选错方向的可能性，从视觉感上面也提高了感官体验。

05.  人性化的城市点亮设计 

好的产品体验，就是在无意间带给用户惊喜。在小长假期间，自驾游沿途经过不一样的城市地点时，会弹出“欢迎到来”的点亮提示，第一次看到还有种惊喜感，算是一种旅行足迹的记录。 在这个弹窗广告满天飞的互联网环境中，能把这种惊喜带给用户才能抓住用户的黏性，通过情感化的设计提升用户对于产品的认可度。

06.  被人忽略的上滑交互探索 

大家经常使用下拉刷新这个功能，而且在该功能上的设计探索已经呈现出非常多的案例，而下滑到底部之后的设计探索却被设计师所忽略。 在支付宝的首页中，下滑到底部之后进行了新的设计探索。继续上滑将会解锁一项新玩法，以游戏化的设计带给用户新的探索体验，也许这一尝试将会带来页面底部新的挖掘点。这个新的挖掘点会像下拉刷新一样，在底层功能需求的基础上被深度开发，呈现出更多营销玩法。

07.  列表式设计中的左右滑动交互 

在列表式设计中，比较隐藏式的交互就是左滑和右滑，通常左滑删除较为常见。而大部分的列表设计中都没有探索过右滑交互，除非是右滑返回或者退出等操作。 在小宇宙 App 的订阅栏目中，对于关注的内容列表左滑为删除（不喜欢），右滑则是添加到播放列表中。充分运用了左右滑动的手势交互，不仅操作便利也带给用户不一样的使用体验。

小宇宙

08.  通过展示形式增加内容的品质感 

同样的东西放在不同的环境中，通过不一样的展示形式，带来的品质感也是相差甚远。就像放进橱窗的饰品或者展品，给人的品质感就会更高。 得物（毒）在购买栏目将精选推荐、福利专区、潮流榜单、补贴专区等内容，通过类似于玻璃罩的展示模型来呈现，不仅突出了视觉焦点，也带给用户一种品质感的认知。配合动效的运用，增强了该区域的关注度，是一种展示商品或者内容的不错方式。

得物（毒）

09.  通过AR科技带你感受虚拟试穿 

网络购物存在的问题就是质量和匹配度等，得物（毒）通过AR科技带你感受虚拟试穿，模拟真实场景中的体验，打破了静态选择的弊端。技术的突破将会带给用户更便利的生活体验，打破常规的固有模式才能带给用户更好的使用体验。

10.  更直观的设计带来更人性化的体验 

想要看一场电影，在选择影片的时候为了让用户更直观的了解影片内容，做出最快捷的选择。淘票票将精彩片段作为背景层，影片展示作为前景层，点击不同的影片背景层就会播放对应的精彩片段。直观的设计带给用户更便利的选择，减少了抵达目标的操作步骤。 从视觉形式感的角度使得画面更丰富，空间感更强。相较于单调的平铺式设计，带给用户更好的感官体验和操作便利。

淘票票

小结 

从感官体验的角度体验产品，总结了在 UI设计视觉层面的解决方案，有助于提高 UI 设计师的视觉表现能力。对比相同功能的不同视觉表达，总结优秀的设计呈现方案，希望这个栏目可以带给你更多帮助！

回到设计没思路系列，  今天我们讲四角构图！

▽

1、构图：

首先构图本身是一切图文编排困难的良药，而四角构图是构图技巧中的其中一种。

四角的构图版式最显著的特征就是将标题内容编排到四个角落

诶！这不是四饼吗？

而传统的四角构图原本是将文字信息有主次的编排到四周，而这种也是目前很常见的一种排版手法， 再将主视觉放置到版式中心，以此满足平衡稳固的构图作用。

如果听不懂没关系  我们以天官赐福这四个字为示例，将文字拆分放到版式四角，并改变字体与大小，最后将主视觉图像放到版式中心，就可以得到一个最初的框架形态。

2、排版

当理解了构图的原理，将文字通过信息分层梳理排版

解读主标题的文字沿用到配色上，选出绿色和橙黄色，将绿色填充至底色，再将黄色填充至文字色，这样主题的文字在背景中就会比较醒目。

再放置主视觉图像，这样前期的构图与排版的形态就塑造完成。

3、融合

接下来就是要解决物体融合、塑造质感、视觉分层的后期阶段。

我们来看看最终整个海报的设计全过程

▽

原文地址：修先森撩设计（公众号）

作者：修先森

转载请注明：学UI网》排版良药 | 图文不会排？试试四角构图

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

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

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

案例实操

说到设计海报，一般需要明确的就是主体，主标题和文本信息，需要根据重要性依次进行刻画，显然主体→主标题→信息处理按这三个步骤依次处理一个比较常用的思考步骤，如果没有处理好前面的，就开始盲目去优化后面的，可能就会使画面的视觉逻辑出问题。

我们开始实操，这里先将文案整理好，简单的做个层级划分。

接着我们去构思整个版式的布局，将大概的信息位置放好，也就是明确它们的主次位置大小关系。

前面说了是用文字“爆”作为主体，那么我们先来处理它，这里需要用到Ai里的效果→扭曲和变换→收缩和膨胀，选择收缩。

很容易我们就可以做出下面这个效果，而且符合爆的感觉。

然后我们加入英文BOOM，爆的后面放入用粗糙化做的效果，增加叠压关系。

接下来就是刻画小信息啦，信息之间要有对比，加上相应的符号搭配，这里为什么信息下面要加上色块呢，一般这种除了统一之外，如果背景比较复杂的话，加入色块不会影响识别性。

最后把剩余的信息放到画面中相应的位置，大小关系处理好。

或许上面黑白识别性不太好，那么我们来配个颜色，加入样机效果，这个设计就完成啦。

最后总结

本期教程到这里就结束了，做设计需要的三个大步骤记住了吗，赶紧试着去做一下吧，也希望文章给了你亿点点思路，大家一起努力进步！

原文地址：设猎派（公众号）

作者：设猎派

转载请注明：学UI网》这三步来做海报设计，思路才清晰！！！

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

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

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

准则 1.  Timely —— 找准时机，即时反馈

在用户操作后尽快 / 立即给予反馈是最有效的。即时反馈有助于帮助用户养成正确的操作习惯，或纠正用户的不当操作。

如果反馈内容需要较长时间的加载，也可以给用户设计一些有特点的 / 情感化的加载状态，缓解用户等待的不耐烦，又可以传达一定的品牌调性。

例如：知乎 App 在加载内容的过程中，增加了 IP 形象的动态效果：

准则 2.  Specific —— 具体分析，差异对待

在设计交互反馈时，不仅仅要给出正确或错误的判断结果，同时也应该考虑到用户的个性化需求，针对不同类型、场景、地区的用户提供差异性引导和服务。

例如：大众点评、高德地图可以根据用户的位置，在用户开始使用产品时就推送个性化信息：

准则 3.  Balanced —— 正负反馈，穿插结合

通常来说，正面的反馈会激发用户的自信等积极情绪，因此我们更习惯使用正面反馈。但是一些不得不使用负面反馈的时候，我们可以在其中穿插一些正面的消息，减少或缓解用户的因负面反馈带来的消极情绪。

这就好像是别人跟你说：“ 坏消息是……，但是，这样做的好处是…… ”，坏消息不可避免，但加上一点转折，就会让他人心里稍微舒服一些。

例如：美团单车在你骑完车之后，需要支付费用时提示你可以购买单车套餐，虽然是在劝用户花钱，但看上去依旧很友善，其中的话术包括：“本次骑行免费”，“当前已是最优价格”：

准则 4.  Instructive —— 提示下步，指引行动

有效的反馈会主动多引导一步，对用户的下一步行动给出清晰的、正确的、指导性的意见，有助于驱动用户继续做出有效操作。

很多 App 在截屏之后都会给出下一步分享的路径引导：

准则 5.  Emotional —— 情感属性，引起共鸣

有科学依据证实，人脑会更容易被附带情绪的信息所吸引。用户更有可能会注意那些看上去承载了一些情绪的反馈，从而也更有可能改变其行为方式。

例如：虽然只是一个提醒弹窗，QQ 音乐会员到期的续费提醒文案却经过精心的设计，由各类歌名组成的一句话，每天的到期提醒都不同：

准则 6.  Traceable —— 可被溯源，可供反馈

一些特殊情况下的、有重大意义的反馈可以被追溯到其根本原因，可以提供给用户进行申诉和询问的渠道，供用户进行反馈。

例如：电商平台和外卖平台都会在用户下单或退单之后，提供商品物流的详细信息，在查看购买的商品的当前状态时，并可以追溯到商品所在的各个历史环节：

再比如，高德打车如果发现用户的行程订单金额与预估金额差距较大时，会给用户发短信提示，并给出客服和投诉渠道：

准则 7.  Less is more —— 质量优先，减少数量

在这个信息过载而注意力稀缺的时代，好的反馈在于质量，不在于数量。有时数量越多，反而会对用户造成不必要的负担。用户并不需要给出很多反馈或者记录生活中一切信息的产品，而是需要能够帮他们理出头绪、提出有效解决方案、呈现有用信息的产品。

以上这 7 大准则，来源于我们日常工作中的积累和沉淀，对于设计产品的交互反馈具备较高的指导意义，希望对你有启发。

原文链接：长弓小子（公众号）

作者：元尧

转载请注明：学UI网》干货｜交互设计中的「有效反馈」7大准则！

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

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

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

01.背景

运营设计主要包括日常运营（以介绍产品为主）和活动运营（通过促销或游戏的形式，拉新促活），其目的都是要吸引用户关注，实现流量的最大化，最终完成商业目标。

那设计出好看的画面吸引用户就是运营设计中的核心了吗？

答案肯定是不确切的。画面的呈现只是吸引关注的第一步，信息的传达才是保证用户驻足的关键。随着获取信息的便捷，人们对信息的关注越来越碎片化，甚至只关注标题，所以标题的呈现无疑是运营设计中的核心关键。

a

02.神器诞生

标题设计有很多具体的方法，但随着用户对信息清晰度的更高要求和审美疲懒，装饰过多或者变化过多的标题已不再流行，取而代之的是言简意赅、辨识度高的，更像是“没有设计”的标题设计。在日常的设计中，设计师通常采用合适的字体再通过变形等设计手段，使标题字更有品质感。如果可以直接使用一款字体，既能够清晰表意且兼具个性，又能够节省设计师创作的成本，这无疑是标题设计的首选方式。

字体作为信息传达的核心因素，能够起到统一品牌理念和精神的作用，正是58设计团队当前探索的领域之一。就此，58UXD设计团队的首选原创字体——微笑体诞生了！这款字体在表达企业精神的同时，兼具清晰且个性的特征，并为设计师减轻了工作中标题字体设计的负担！

微笑体诞生

f

03.品质提升，效率UP

· 微笑体是为标题而生，它可以满足运营设计中的绝大部分场景，应用于不同的表现形式

1）轻量化设计页面中，增加简单效果，就具有一定的设计感

招聘业务线活动banner

58到家-saas系统系列海报

2）需要突出标题品质时，可增加层次感或立体质感

58到家-“城市黑盒”活动画面

3）配合3D设计风格时，亦能发挥其厚重优美的字形

2021春节运营活动-房产/招聘/二手车主会场画面

· 应用广泛，统一集团品牌感

发布近半年，微笑体已应用到58平台各类运营设计中，并在集团各渠道发挥作用，成为58对外展示的品牌特质之一

58到家线下店内海报

58同城招聘业务日常活动

58同城平台日常活动

58同城校园招聘

员工福利-蜂蜜礼盒

自5月8日微笑日发布微笑体字库后，主创团队不断优化微笑体，更新完善了含有3627字的字体包。在UXD自主研发的两款运营页面设计平台——斑马智能物料设计审核平台和灵动编辑器中，微笑体已嵌入使用，为运营设计师提供更加便捷的工作方式，为运营工作提供高效且高质量的输出环境。

灵动编辑器

w

04.持续赋能

微笑体在工作中运用的成功，一定程度上解决了运营设计的核心部分。当然一款字体是无法覆盖所有的应用场景的，运营设计需要丰富多样的视觉呈现，需要标题字和其他文字信息以及画面共同完成。

在设计微笑体之初，58UXD组建了专门字体工作小组——Fontwork造字计划。团队本着提升58企业品牌的初心，为设计工作提效的目的，启动了字体设计的第二波征程。为补充微笑体的使用空缺，同时为满足更多的使用场景，第二款字体的字形确定为有设计感的正文字体。

第二款正文字体已征集完毕，在四十多款参赛作品中确定了一款字形，该字体目前正在如火如荼的设计中，待与大家见面时再解开它神秘的面纱～

字体大赛作品展示

e

05.结语

为了给用户持续不断的新鲜体验，为了适应不断变化的流行趋势，高品质的运营设计目前还是主要依靠人力完成。合适且优秀的字体解决了运营设计工作中的一部分问题，如何在保证设计质量的同时，提高效率，优化工作方法将会是我们不断探索的方向。

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

作者：环铁艺术家

01.背景

不过，此类供给方式也存在一些不可避免的问题：

· 家政从业人员信息变更很迅速，匹配雇主的时间窗口较短；

· 商家订单在匹配家政从业人员时，匹配成本很高；

· 商家必须手动实时维护大量微信群，以保证获取新鲜资源对接；

· 被动且不受控制，好单有可能被爆单，且无法控制传播路径和时间；

基于这些问题，58家庭服务通过平台策略，力求将线下甩单、合单的合作模式移植线上，以初期实现”家政从业人员 – 商家订单需求”双方供需智能匹配的形式，为以后在线上高效率完成“销售线索-家政员匹配-服务签单-营收分配”的流程打下基础。

02.用户研究与设计策略设定

通常，我们称呼家政从业人员为阿姨，阿姨是58家庭服务平台十分重要的劳动者资源。所以我们也十分看重阿姨们在使用产品时的体验，致力于提高产品的易用性与实用性。

对此我们通过多种途径相结合方式，对58阿姨使用产品的状态进行调研，并得出了一份适用于58阿姨的无障碍设计方案，辅助我们跟紧用户诉求，让设计策略为用户服务。

03.阿姨端，围绕无障碍原则展开的设计

主要秉承三个原则：清晰准确、感知清晰、操作简单

· 浏览型页面

与简历创建流程不同，阿姨在接单大厅寻求工作机会时，其接单的目的属性更强，信息读取的需求更甚于操作，通用规范会让页面拉的很长，所以设计上，在保持同等字号的同时，可以将需求单内各项信息之间的间距按基数缩减，保证页面信息的承载率。

然后针对重点信息增加放大功能，同时强调字重和色彩的对比，让读取更加人性化。

· 操作型页面

并在此基础上放大点触目标，以提升阿姨的点击准确率，避免误触。

同时，在调研的时候我们发现，我们平台的阿姨其实在视觉障碍方面的影响并没有我们想象的那么强烈，只是对信息获取的反馈要求更高。所以在设计时，要降低阿姨对信息理解的障碍，及时就近给出阿姨对操作的明确反馈和提醒

当然反馈也可以结合场景，将功能引导或者信息提示与相关场景相融合，阿姨的感知也更直观，更强烈。

04.商家端，开启人-单智能匹配

将需求单中，C端客户的每一个要求，都定义成一个模块，从视觉表现和层级关系上进行信息的细分分类，丰富每一个内容点。

滚动形式的单选，范围太过笼统且不能跨域，多选虽然能满足大多数情况，但客户的要求千人千面，这种形式依旧不够灵活。

所以设计上增加了附有两个连续滑块的选择器，允许商家根据客户需求设定某个特定的值或者一个范围值。例如身高、体重、年龄、薪资范围等，实现对需求的定义更加自由精准。

05.结语

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

作者：环铁艺术家

关键词排版是很常用的一种排版方式，可以让面试官一下就抓到重点。但是大部分人都是圆圈加文字的表达方式，会显得有些简单、乏味。如果能配上图形或者图标搭配就会丰富、精致很多。

02.模块分离

将页面中部分的内容模块分离出来展示，可以是图形或是卡片等等。不仅可以强调页面的层级展示，还可以让作品集排版更加出彩。

a

03.细节特写

作品集排版页面中可以穿插一些放大的特写，可以展现一些精心制作的小细节，或者项目当中需要强调的内容。不仅可以丰富页面的排版形式，还能一目了然地展示出项目的侧重点。

这个看起来好像是“废话方法”，一个主体图形和文字进行搭配，但是精髓在于文字部分最好是两种粗细或者字体或者大小写的不同对比，让文字内容更有层次。

05.平分画面

将画面一分为二，填充不同的颜色背景。有鲜明的层次感和形式感，可以很好地表达一些需要对比的内容，或者需要进行多维度展示的内容。

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

作者：设计师深海

转载请注明：学UI网》作品集这样排版，不进大厂都难！

一、什么是单选框？

顾名思义，单选框表示只能选择一个选项，再具体一点，可以理解为只能从一组相互排斥的选项中选择其中一个选项。

单选框有选中和未选中两种状态，样式上用填充的圆表示选中，描边的圆表示未选中，通过改变状态来给用户反馈。

二、何时使用单选框？

除了单选框，选择类组件还有很多其他形式，比如下拉列表、复选框等，我们首先来对比区分一下这几个易混淆的组件。

单选框VS下拉列表

当用户需要从大量选项中进行选择时，为了节省空间，可以使用下拉列表代替单选按钮。但是下拉列表将内容都隐藏在下一层级中，需要用户多做一次选择，操作成本和认知成本都会变高。

▲ 当选择不多于3项，建议使用单选框，这样选项可以直接展示出来，用户只需要点击选择即可；当选择超过5项时，可以考虑使用下拉列表，确保选项不会占用大量空间。

单选框VS复选框

复选框允许用户一次选择多个选项，选中其中一个选项，不会对其他选项产生影响。对于何时使用单选框还是复选框没有明确的界定，需要具体问题具体分析。

三、单选框设计指南

始终确保良好的可用性

对于这样一个简单的组件，想要做好用好，在设计上有一些不可忽视的细节。

首先要避免在单选框列表中嵌套下一层级的选项，因为使用单选框的目的之一就是为了让所有选项清晰呈现给用户，嵌套过多层级会导致整个结构的混乱。

▲ 另外要明确的是，单选按钮不应该是唯一可点击的热区，而是要将按钮和标签一起作为热区，便于用户准确点击操作。

▲ 这个选择模块由单选按钮、文字标签和图标共同组成，可操作的范围很大，视觉层次也很清晰，设计得既整洁又实用。

保证可读性

单选框列表的布局要有逻辑性，尽量减轻用户的认知负荷。

▲ 用户习惯于上下浏览选项和列表，如果将这些选项水平排布，可能会造成两点问题：一个是浏览时视线移动的不习惯，另一个就是如果选项位置过于紧凑，用户可能不知道每个标签到底对应哪个按钮。

除了列表要垂直布局，标签也需要很简洁。标签越长，用户需要花费更多的时间和精力才能了解整个列表。

提供默认选择

想象这样一个使用场景，我们下载了一个新的设计软件，第一次打开时跳出一个弹窗，提示我们是选择经典布局，还是个性化布局，但是我们对这个软件不是很了解，可能并不清楚这两个布局到底是什么样子。

最后

最后为大家精选了单选框设计样式资源，学习好的单选框设计风格和样式，获取最新的设计灵感！

关注公众号后台回复【单选框】获取设计文件。

原文地址：Clip设计夹（公众号）

作者：Clippp

转载请注明：学UI网》好的单选框设计具备哪些特质？把握住这些知识点！

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

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

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