首页

关于“薅羊毛”那些事儿——百度果园长线活动设计思考

seo达人


一、长线运营活动的价值

百度APP作为移动生态的搜索信息服务产品,用户会在什么场景想到百度APP并使用它呢?

十几年前,精力有限睡眠有限的打工人不惜牺牲睡眠时间,也要设置凌晨3点的闹钟;上网时间被严格控制的学生党也要注册五六个QQ小号,目的很明确:到点“收菜”,蹲点“偷菜”。十几年后每天早上睁眼先去蚂蚁森林收收自己的“能量”,再顺路去蚂蚁庄园喂喂小鸡,安排很多手机号码来种水果……各家产品通过带有游戏氛围的运营活动把产品的服务和功能以趣味化的方式传递给用户,让用户“薅羊毛”拿福利的同时也给产品带来增长价值。

图片

 

二、百度果园设计打法

本文以百度果园为例,从长线运营增长视角分3个方面分享运营活动玩法如何设计,如何帮助百度APP持续提升用户活跃和用户留存:

1.建立心智:让用户相信百度果园的真实性,愿意参加活动,安全的“薅羊毛”;

2.养成习惯:根据用户不同的属性,设计玩法让用户养成来百度果园浇水的习惯,实现百度APP的长期留存同时把“羊毛”薅到手;

3.平衡:种植真实性+趣味化的方式传递给用户,实现产品增长和用户福利的双重价值,“羊毛”薅不停。

图片

 

1、心智建立:让用户相信百度果园的真实性,愿意参加活动,安全的“薅羊毛”;

A 从新用户视角打造真实性:新用户上我们区分两个用户角度进行设计:

  • “薅羊毛”心理用户:了解各类平台的运营活动,酷爱“薅各个平台的羊毛”,对福利性质的运营活动非常敏感;进入百度果园最先看到Loading页面,从Loading页面开始就在文案上告知用户“免费水果包邮到家” 的福利性信息,图片内容也是倾向于真实水果,利益点明确从而让用户继续往下进行;利益文案和真实水果图片继续延续到“选种子”页面上,明确的福利信息与行动点来打造百度果园的真实性。
  • “从众心理”的用户,这类用户会被「TA人已经获得免费福利」的信息所打动,所以我们在“选种子”页面下方增加了动态弹幕,就像耳边有个声音在和你说:“隔壁已经领了3斤免费水果了,快来一起!”动态弹幕不仅是在信息上吸引用户参与活动,也是侧面描述了百度果园活动的真实性,与用户建立信任。

图片

B 精细设计果树成长阶段,与真实场景贴合:

为了营造更加真实的种植体验,我们在百度果园视觉呈现上也进行了升级,整体视觉效果与真实果树成长的6个阶段(种子→幼苗→大树→开花→果实→成熟)更加匹配,建立更加真实的果树成长过程,追求合理性和沉浸感,并且细化每一个不同水果对应的树、花朵、果实形态,让用户在参与活动的过程中体验果树成长到成熟的真实感受,也是在视觉效果上形成百度果园的特色。

图片

C 贯穿全流程的浇水动画增加真实性:

  • 我们在浇水动画上进行了体验升级,浇水动画分前中后3步设计来增加浇水的真实感受:
  • 尝试通过动画模拟生活中水壶浇水的行动动线,点击浇水后水壶移动至树的位置并倾斜至浇水方向,倾斜的同时水开始从水壶里露出水滴,整条浇水动作一气呵成;
  • 在浇水过程中,水滴分层陆续从水壶中浇水至树下土壤,下落时水滴逐渐变弱,就像真的滴落进土壤一样;
  • 明确的浇水反馈,浇水动画完成后,我们在树木和土壤上同时增加了光感反馈动画,就像是树木真实的吸收到了水分一样,生动轻松的反馈给用户,让每一次浇水都有视觉上的满足。

图片

 

2、习惯养成:根据用户不同的属性,设计不同玩法让用户养成来百度果园浇水的习惯,实现百度APP长期留存的同时让用户把“羊毛”薅到手。我们参考百度果园线上老用户数据,把用户分成3类,分别根据他们不同特点进行针对性的玩法设计:

  • 沉默用户:这类用户很少来果园玩,活跃的时间也较少,很难长期坚持浇水;对于这类用户,我们尝试设计快速领水果的玩法吸引他们,把领水果当成一个完整的大目标,直接明确出领水果的时间周期,同时也把难完成大目标切割成每天要做的简单小目标,每天召回用户完成当日任务,从而抓住用户回流。
  • 忠实用户:对于留存稳定的忠实用户,我们给这类用户增添游戏趣味,来百度果园做任务浇水时给到用户游戏感受,我们设计了“瓜分”玩法,给到用户一些惊喜感受。
  • 召回用户:“来帮大姨浇个水”,是不是经常在微信群里看到这样的消息,对于帮助好友达成目标,我们设计了“合种”玩法给到用户,由一人玩百度果园到带动身边亲朋好友一起玩,帮助用户更快一步达成领水果的目标。

图片

A  沉默用户唤醒:

「浇水挑战领水果」玩法参考上瘾模型进行设计,从push渗透入口到用户,基于「稀缺」核心驱动力让用户产生兴趣,引导用户进入活动;当用户进入果园后,通过大转盘抽奖的方式继续抓住用户的注意力,持续利用「稀缺」「紧迫」心智让用户进入活动开始体验玩法。开启浇水挑战后果园首页上方增加明确的浇水进度提示,让用户了解整体玩法进度,从而建立收获奖励的信心。

图片

B 忠实用户-丰富游戏玩法:

百度果园是一个长线养成类运营活动,为了让老用户持续保持新鲜感,我们在果园里增加具有趣味性的「瓜分水滴」玩法,是参与两日就可获得奖励的轻量化的玩法。第一天用户进入「瓜分水滴」活动,通过大额水滴奖池吸引用户的注意力,提起用户的参与兴趣,在行动操作上弱化付出成本突出行为动作,引导用户点击;用户报名后及时提醒用户打开订阅增加触达场景;并在弹窗上对付出成本与收获回报进行对比,吸引用户第二日再次打开百度果园参与领奖;在领奖的同时直接引导报名下一期活动,持续拉动用户回流。

图片

C 召回用户-好友之间的互动玩法:

为百度果园赋予情感与故事性,好友社交上分两步探索,第一步引导用户去“偷”好友的水滴,在好友之间持续互动,水滴是贯穿百度果园整体玩法的重要代币,好友的水滴被“偷”,就降低了好友“薅羊毛”的速度,但对用户自己来说,“偷”水也需要“偷”的高效,我们在果园里增加了连续“偷”水动作,边“偷”水边把好友喊回来;为了丰富用户的体验感受,在好友果园跳转之间增加了树叶遮挡的动画效果,动画转场同时也是替代小程序白屏转场的好思路,营造了好朋友在果园之间串门的感受。

图片

第二步好友互动持续升级,通过家庭合种的概念加强用户之间的联系,情感化的方式来提升用户主动参与意愿,拉动身边亲朋好友一起加入“薅羊毛”的队伍,一方面帮助用户提升领水果的速度,另一方面也帮助百度果园在用户上实现破圈。在玩法设计上我们区分3个视角进行设计:

  • 合种的发起者:突出快速收获,激励用户分享拉好友来帮忙种植水果,通过仪式感转场和主视觉的变化营造家庭故事氛围;
  • 帮种者视角:通过弹窗上操作确认加入合种小队,加入合种后在每次浇水时增加『谢谢你帮我浇水』的情感动画反馈,烘托帮种氛围;
  • 共同利益视角:阶段式的奖励激励用户召回和拉新的好友,把共同“薅羊毛”的氛围拉满。

图片

 

3、平衡:种植真实性+趣味化的方式传递给用户,实现产品增长和用户福利的双重价值,“羊毛”薅不停。

百度果园在上线一段时间后,我们思考如何能进一步丰富果园玩法,要帮助业务稳定ROI,同时也要在用户角度上玩的更加有趣。我们从体验、用户、增长3个角度进行分析,为百度果园增加“道具”玩法:

  • 从体验角度上打造更加真实的种植体验趣味性,让用户感知更丰富的活动玩法,并与用户的核心诉求相匹配,通过浇水道具来帮助提升用户的浇水效率、降低浇水难度;利用互动道具增加自身收益,再留出其它能够持续扩展的方向让百度果园的玩法更加丰富有趣;
  • 用户角度上,帮助用户更快实现自身领水果的目标;以及种树人的路上永远不能孤单的互动方式;
  • 业务增长角度上,后续可以持续扩展百度果园自身特色,持续把百度APP的服务、功能推荐给用户,持续体验产品,增加百度APP的粘性。

结合百度果园自身可落实上,我们优先在可以提升用户浇水效率,帮助用户快速拿水果的道具进行试水,结合线下实际生活中的种植场景去思考,所以我们将道具名称与玩法设定为「化肥」,在种植中增加化肥收益,提升果树的种植进度,让百度果园在玩法上更加生活化。

图片

新玩法上线后,通过上线提示引导用户去使用道具,用户进入百度果园后先给到用户一袋「化肥」来体验玩法,让用户快速感受到道具带来的实际价值,从而建立信任。用户使用道具后,果园主页直接破壳「化肥」道具的状态,我们给到「化肥」道具3种状态来描述使用情况;健康有活力的绿色状态代表化肥的养分非常充足,果树的成长速度加倍;橙黄色代表果树的生长进度欠佳,需要用户关注;红色状态代表果树缺少养分,需要用户去使用新的「化肥」,并在红色状态下我们直接破壳使用引导,直接提示用户点击。

图片

 

三、后续发散

随着百度果园的进一步成长,能够带给用户的不仅是“薅羊毛”类活动的概念,百度果园也会继续向带有社会价值与故事性活动内容延伸,更多的去赋予精神意义与社会意义;我们后续也会持续打磨、持续平衡产品收益与用户情绪的价值,不仅仅是在“薅羊毛”,更会让每一次的浇水、施肥和每收到的一箱水果都有自己的含义。

图片

 

写在最后

增长是产品商业化持续的目标,有了百度果园的经验和设计思路,也为我们后续探索新的长线活动玩法提供了基础和经验,我们的工作也将持续充满着挑战和更多乐趣。

 

作者:百度APP用户体验

转载请注明:学UI网》关于“薅羊毛”那些事儿——百度果园长线活动设计思考


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


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


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




设计灵感不应该被一个网站而限制

seo达人


不能被一个网站而限制

最近 Behance 封停了国内账号,导致很多设计师无法访问,因此也流传了很多解决方案。今天黑马哥就不和大家讨论这个解决方案了,其实有很多同学就算在能访问的时候也没看几次~O(∩_∩)O~。

图片

这个事件告诉我们,设计师的习惯是多么的重要,我们的设计灵感不能因为一个网站平台而局限。退出账号依然可以访问,只是很多同学纠结的是自己的收藏没有了,如果平时养成本地化采集的习惯,你就不会出现这个问题。我们不要把希望寄托在云端,只是买一个硬盘就能解决的事情,也不要觉得不方便,其实很多作品我们也不会经常看,存储只是为了不时之需。每年都对采集的作品进行一次整理,近两年的放在电脑里面,时间过长的存储在硬盘里面就可以了。主要还是要对作品进行分析,掌握作品的技法经验和设计思维才是关键。

除了存储习惯以外,我们也不要只是固定访问一个网站获取灵感,优秀的设计类平台是很多的,我们要发现更多新大陆。下面黑马哥为大家精选几个访问频次较高的国外平台,国内的大家都比较熟悉这里就不列举了。

 

设计/插画等灵感网站推荐

以下推荐一些个人比较常用的几个网站,排名不分先后,属于随机性排序。

1、notefolio

https://notefolio.net/

notefolio 是韩国的一个设计交流网站,很多设计师都会在这里分享自己的设计作品和进行设计交流。和国内很多设计作品分享平台类似,是一个综合型设计师交流社区,有平面设计、UI/UX 设计、插画、产品包装设计、摄影、版式设计、数字艺术、美术、工艺等等。

图片

 

2、Mobbin

https://mobbin.com/

这是一个汇集全球优秀 APP 截图的网站,有超过 50000 个优秀 APP,节省了下载应用的时间,对于 UI 设计师来说非常实用。

同样的应用还提供了 iOS 和 Android 两个不同版本的截图,简直非常的人性化。这是一个使用起来非常简单的网站,海量的设计必将开启你的灵感脑洞。

图片

 

3、Pinterest

https://www.pinterest.com/

这绝对是一个灵感采集的绝佳网站,经过众多用户的长期积累,已经汇集了全球大量的优质图片资源,其中设计作品也是非常丰富,且质量都普遍偏高。

你可以通过关键词搜索、画板关注、以图搜图等操作获得灵感,而且相似推荐还能延伸出更多类似构图、配色、主题等图片资源。点击作品还能跳转到原始出处,顺藤摸瓜找到更多优质资源,真的是非常便利。

图片

 

4、Designspiration

https://www.designspiration.com/

该网站除了通过关键词搜索图片内容以外,在搜索栏有⼀个调色板的图标,点击可以通过指定的颜色进行搜索相关配色的图片或者设计。在选择颜色的时候不是单一的色彩选择,可以选择几个配⾊组合进行搜索,对于设计师来说⾮常实用。

图片

 

5、Abduzeedo

https://abduzeedo.com/

Abduzeedo 是一个优秀的设计博客,提供给设计师创意和灵感的社区,这里有设计、摄影和 UX 等相关的文章提供给那些想寻找灵感的设计师。这是一个开放的设计社区,它是设计师日常的灵感来源。

图片

 

6、UI Garage

https://uigarage.net/

UI Garage 提供了很多应用设计的截图和模板,专业细分的类别和精挑细选的设计截图,还有很多设计工具推荐,是一个非常实用的网站。在这里不仅可以获得设计灵感,还能获得优秀的设计工具或者插件来提高我们的工作效率。

图片

 

7、Dribbble

https://dribbble.com/

Dribbble 相信很多喜欢 UI 设计打卡的同学比较熟悉,汇集了大量设计师的一些日常创意作品。该网站不同之处是发布作品需要邀请码,就是需要有邀请码的设计师邀请加入才能发布作品,获得邀请码也相当于设计能力获得认可。

整体作品的质量还是不错的,如果当你设计时没有想法,这是一个不错的灵感采集地。

图片

 

8、ndc

https://www.ndc.co.jp/works/

这个网站展示了很多非常不错的设计作品,偏向于简约风。相信这些项目设计的灵感,可以带给我们更多的设计思考。

图片

 

9、FolioArt

https://folioart.co.uk/

FolioArt 是一个插画艺术作品展示网站,拥有高质量的插画作品,形式也多种多样。就像一个插画家的资源库,让有商业需求的客户通过这个平台,和世界顶尖的插画师进行合作。

图片

 

10、unDraw

https://undraw.co/illustrations

这里提供的插画作品数量众多,各种小场景的插画无论是独立使用,还是组合使用,肯定可以满足很多场景需求了。平台内置的编辑器还可以对插画进行调色,导出格式也是支持后期编辑,非常的实用和便利。

图片

 

小结

设计的灵感来源途径是很多的,不局限于某一个单一路径,以上的推荐仅为抛砖引玉,还有很多优秀的网站给我们带来设计灵感和经验学习。每个人的关注焦点和选择角度不同,以上仅为个人推荐,不足之处欢迎大家留言补充。


作者:黑马青年

转载请注明:学UI网》设计灵感不应该被一个网站而限制

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


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


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



面对高速快跑的产品,如何优雅推进体验优化

seo达人


 

图片

或许你在推进体验优化时,也遇到过以下困惑:“对于设计师走查出的体验问题,为什么PM总是间歇性视而不见?”“PM既然认可了体验问题的重要性,但是他为什么总说放一放,过一段时间再整改呢?”

“排除万难,体验问题终于提交了版本需求,为什么总是因优先级不高,无法获得充足的开发资源,顺利上线呢?”

图片

我们在进行赶集直招体验优化过程中,也时常遇到这些困惑,究其原因,主要是因为,我们作为设计师,每天所处的工作范围和接触到的信息有限,促使我们忽略了对产品阶段的深入思考,误以为PM对体验优化和体验问题的理解,和我们高度一致。因此在着手进行体验优化前,我们要提升对产品阶段的理解把握,知道所服务的产品处于哪个阶段,产品发力方向是什么,进而准确找到体验优化的推进策略。

在不同产品阶段(探索期、快速成长期、成熟期),体验优化的推进策略也各不相同:

处于探索期的产品,其发力方向为验证业务模式。在这个从0-1的时期,其实不存在推进体验优化的概念,设计师应尽可能进行完善的基础体验能力建设,如沿用成熟规范与组件搭建产品体验,后续伴随产品核心功能、流程验证,同步迭代打磨;

处于快速成长期的产品,其发力方向为快速拉新拓量,纵向做好垂类。这个时期的体验优化推进策略是,基于产品功能迭代,进行“小步快推”

处于成熟期的产品,其发力方向为提升用户活跃度,实现商业变现。这个时期更适合采取体验优化专项,推进体验优化。

图片

可以看到,赶集直招目前处于“快速成长期”,因此我们选择了“小步快推”的策略。

 

图片

找准“小步快推”的推进策略后,具体的执行方法是什么呢?

辛向阳先生在《从物理逻辑到行为逻辑》一文中,提出了交互行为5要素的概念,即用户、场景、目的、媒介与行为,以帮助设计师对问题进行准确解析和挖掘。

图片

其实推进体验优化,本身也可以理解成是一次交互行为的设计,因此在进行赶集直招体验优化初始,我们沿用了交互行为5要素的概念,对赶集直招进行了解析,并挖掘出具体可执行的方法

用户:帮助中国4亿蓝领找工作的赶集直招;

场景:服务业逐渐复苏,赶集直招在市场上已经被广泛知晓和接受,市占率不断上升;

目的:把控ROI前提下,一方面持续拓展用户量,另一方面开始向商业化倾斜资源,谋求商业营收;

媒介:赶集直招APP,每3周迭代1版;

行为:深耕细分市场,不断验证新的业务模式,优化旧的业务模式,高速快跑与竞品拉开距离。

图片

综上,我们总结出了处于“快速成长期”的赶集直招,3个显著特征,和对应的体验优化执行方法:

特征1:需求多而侧重于垂类深耕→执行方法:提前规划,全局视野;

特征2:资源倾斜商业化→执行方法:评估需求,整合策略;

特征3:版本迭代快→执行方法:流程调整,需求扩容。

 

图片

提前规划 全局视野

前期使用体验管理工具,收集了大量体验问题,我们对其进行聚类整合,汇总成《赶集直招体验优化问题池》,并与PM进行对齐,探讨优化可能性。

图片

该阶段的keypoint是:对体验问题项进行判断,是进行逐个优化,还是合并成独立需求,统一优化

 

评估需求 整合策略

承接需求时,我们需要对需求类型进行评估,赶集直招的需求通常可分为2类:

第1类是重产品侧解决的需求,通常这类需求范围较明确,PM有较完整的解决方案;

第2类是重设计侧解决的需求,这类需求范围较开放,给设计师发挥的空间较大,我们在赶集直招体验优化推进中,主要锚定第2类需求。

在和PM了解需求背景和业务目标后,则进入解决策略梳理阶段,通常PM会提出关于如何达成目标的种种产品策略和部分设计策略,此时我们会站在用户视角,从目标出发,果断衡量出其策略的更多扩展性,多维度思考,整合PM策略,并提出设计侧的更全面的解决策略。

图片

该阶段的keypoint是:需与PM对齐一个思路,即体验的优化与打磨也是达成业务目标的重要策略之一

 

流程调整 需求扩容 

在推进体验优化的同时,我们对设计侧与产品侧的合作流程,也在不断努力做出调整,以便为体验优化争取更多打磨的窗口期。

调整前的合作流程,设计侧作为产品侧下游,在产品原型分发后才会接到设计需求,且排期极度紧张,这样设计侧的重点会被牵引到快速支持当前需求,不利于体验优化推进,为此我们与PMO、产品侧积极沟通调整合作流程,设计侧在产品需求内审后就前置介入,与PM一同经历方案构思、分发与评审流程,为体验优化争取到了足够的窗期口

图片

此外,对于产品侧中远期重点需求,我们会提前与PM对齐OKR,跳出版本节奏的限制,联合多角色建立主题专项,规划整体项目计划,在过程中,对涉及到的体验问题项,作为项目计划的一部分,进行集中解决,这样在PM撰写需求文档时,就可以将体验问题项最大限度收入到需求范围内。

 

图片

给大家展示两个我们推进过程中的小案例:

基于问题池中的首页瓷片区体验问题项,我们借着PM对瓷片区提出更换瓷片位内容的机会,将瓷片区的体验问题项一并推进优化,对样式和文案进行降噪处理,使其重要信息更清晰,数据也提升明显。

图片

推进年久失修的深层级页面体验优化是难事,但跟业务目标相关又对数据提升有帮助就会容易很多。PM给出的需求范围和目标是“通过调整关键字段,提升简历预览页的感知度”,我们整合该页面的问题池后,提出“感知度提升=关键字段调整+信息布局/按钮/文案等体验层面优化”,满足需求的同时,也推进了体验问题项的解决。

图片

通过“找准推进策略-挖掘执行方法-推进3步走”3个层面的努力,在高强度的版本节奏下,我们用短短半年的时间,就实现了《赶集直招体验优化问题池》中,大部分问题项的优化解决。从最终业务效果看,各项数据指标均符合或超过先前的预期,用户满意度也得到大幅增长,达成了本次体验优化的预期目标。

图片

 

图片

总结一下,当我们计划对产品进行体验优化时,不要急于启动。

首先,判断产品当前所处的阶段,找准推进策略;

其次,通过交互行为5要素解析产品,挖掘体验优化执行方法;

最后,如果所服务的产品处于“高速快跑期”,可借鉴“推进3步走“的方法进行推进:

1.提前规划,建立全局视野,与PM对齐,判断体验问题项,是进行逐个优化,还是合并成独立需求,统一优化;

2.承接需求时,评估需求类型,对有设计发挥空间的需求,整合多维度策略,尽可能囊括体验问题项优化;

3.适时对合作流程做出调整,当前版本需求做到前置介入,中远期需求做到提前规划与需求扩容,最大限度完成体验问题项优化。

图片

最后,愿大家都能在体验优化之路上优雅前行。

 


作者:环铁艺术家

转载请注明:学UI网》面对高速快跑的产品,如何优雅推进体验优化

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


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


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



超全面的设计底层理论,优秀设计背后离不开这些(上)

seo达人


图片

当没有认知紧张时,用户心流才会发生。当一个设计有效时,你才能体验到认知上的轻松。如果没有,你的“心流状态”就会中断(稍后会详细讨论),让我们陷入认知紧张,于是“设计失败了”。

当基本设计原则被忽略时,这种情况很容易发生,导致设计无法“整合”。这些基本原则包括:平衡性、一致性和视觉层次、负空间、接近性、对比、统一、一致性、配色方案和排版层次等方面。(彩云注:很多人看到这些以为自己都懂,但实际设计时犯错最多的也是这些问题)

从神经科学的角度来说,当一个设计起作用时,我们会“感受到它”。其影响立竿见影。它发生在潜意识里,在一瞬间完成,是人的本能反应。我们不需要把它放在显微镜下分析它。

优秀设计以简洁和优雅而引人注目。乔纳森·伊夫(Jonathan Ive)和迪特尔·拉姆斯(Dieter Rams)都可以算作这种设计思想的拥趸。

人们常说,优秀设计背后的工艺是无形的。然而,这不是随机发生的。不管人们是否注意到,设计的背后是遵循着大量而严格的原理去执行的。伟大的设计师不会在画板上随意地将各种元素组合在一起,这是有方法的。

图片

为什么有些设计具有美的感受,而有些却没有

相反地,当一项设计被认为“有些地方不对劲”时,人们就会下意识地觉得这个设计是有问题的。这样的结果会给品牌或产品带来不好的影响。当一个高端或奢侈品品牌受到高度关注时,这种影响尤其有害。这就是为什么你永远不会遇到设计不完美的香奈儿(Chanel)商店的原因。

“你对一件事的第一印象会建立起你随后的观念,如果一家公司在你看来不专业,你可能会认为他们做的其他事情都不专业。——Daniel Kahneman,普林斯顿大学心理学教授

图片

这不是一个精心制作的设计,会导致认知紧张。你会在这个网站上预订你的行程吗?

我们都同意上面是糟糕的设计,就像建在沙子上的房子,一个忽视基本设计原则的设计将会崩溃。潜意识里,它会立即被认为是破碎的,无论是视觉上、精神上和情感上。

人类的大脑是懒惰的、有偏见的,喜欢走捷径。Daniel Kahneman称之为“低维思维”。当人们看到某种设计时,它的“美学完整性”、视觉感知和神经科学之间存在着相互关联。

当一个设计是合理的,换句话说,它是令人愉快的、有效的,我们会迅速、直观的判断它是合理的。我们的心率降低,多巴胺水平增加,会有一种幸福和平静的感觉。这就像我们听到舒缓的音乐,会沉浸在一种每时每刻的“心流状态” 中。“在这种状态下,人们会专注于一项活动,其他一切似乎都不重要”——来自于一个心理学概念,由 Mihaly Csikszentmihalyi在他的畅销书《心流:最佳体验的心理学》中写道。

图片

你更愿意住进哪个房间?

 

设计原则在审美完整性中的作用

苹果的人机界面指南(Apple’s Human Interface Guidelines)几十年来一直在谈论“美学完整性”。它也可以被称为“设计完整性”或“审美凝聚力”。

苹果对美学完整性的定义是“当一个设计的外观和行为与其功能完美匹配时”(彩云注:我的理解就是所见即所得,符合用户的心理预期)。换句话说,设计的构成是产品的一个组成部分。我们将研究决定设计组合成败的设计原则——更多的是关于 UI,而不是关于 UX。

美学完整性不仅仅是关于设计有多好看。它指的是具有明显连贯性的设计:有效的结构和布局,是什么让它产生效果。换句话说,它的元素在视觉层次、对齐、间距、平衡、对称、重复、比例、强调、接近、对比、统一、一致性、配色、排版、负空间等方面都有出色的运用,这里仅举几个例子。

这与“黄金比例”无关,黄金分割不能解决问题。斐波那契数列螺旋没那么玄乎,给设计师带不来惊人的设计。

设计师们在安吉丽娜·朱莉或蒙娜丽莎的脸上画出金色螺旋形时惊呼道:”果然是”黄金比例“(彩云注:但事实上有点故弄玄虚了)。当然,自然界中确实有神圣几何学(黄金比例,又称斐波那契螺旋,是基于此),依赖“黄金螺旋”作为设计原则是一种谬论,它已被多次暴露在其赤裸裸的荒谬中。

图片

这是我的洗衣机,上面叠加了斐波那契螺旋。

“审美的完整性”不是没道理的。这个概念是基于基本的设计原则,是有成就的设计师实践他们的艺术作品的经验总结。

让我们来看看一些设计原则,以及它们为什么会使得你的设计更能更加有效。通常情况下,真正优秀的设计会结合这些设计原则。

 

我们将探讨以下这些最底层的设计原理:

  • 视觉层次感
  • 间距、对齐和网格
  • 平衡
  • 对比
  • 对称
  • 重复
  • 几率原则和三分原则
  • 引导线
  • 比例
  • 强调
  • 整体性
  • 亲密性
  • 一致性
  • 颜色
  • 排版
  • 负空间

 

一、视觉层次感

视觉感知的基本规则对任何视觉设计都是至关重要的,因为它们指导着如何尽可能快地传达信息。视觉层次是设计中信息的结构和优先级。它决定了人们接受和处理信息的顺序,因为它以一种视觉方式引导他们。

视觉层次感重在打造视觉优先级。通过巧妙地使用颜色、形状、大小、间距、比例和方向,创造性地使用决定层次的视觉元素来传达构图的意义、概念和情绪。

核心关注点是什么,你希望用户首先注意到或开始阅读的设计中最重要的元素是什么?我们想让它成为焦点,然后其他部分的设计从这里展开。

图片

一个具有良好视觉层次的网站会引导用户关注重要的部分

视觉层次对于每一种视觉设计都是至关重要的,无论是需要引导访客眼球的首页还是移动端UI的导航入口。用户对每个元素的理解取决于组合中的其他元素及其上下文。

建立视觉层次的一些技术是:位置、大小和比例、颜色和对比、间距和亲密性、负空间、纹理、引导线和高度。在一个元素周围使用丰富的负空间可以使它看起来更有意义。使用引导线可以创造移动,就像一个人的眼睛在设计上移动一样。排版的层次结构也扮演着重要的角色,通过不同的大小和权重,我们可以让更重要的文本元素脱颖而出并建立秩序。

加分技巧

  • 使用一个隐形三角形连接设计中的三个重点区域(构图)。
  • 注意古腾堡图模式(Gutenberg Diagram)、F 模式(F-Pattern)、Z 模式(Z-Pattern)和层蛋糕模式(Layer Cake Pattern)的视觉扫描,并顺应趋势而不是反对趋势。(彩云注:这里的这些模式彩云就不过多介绍了,感兴趣的可以自行了解下)

图片

没有视觉层次的网站没有明显的兴趣点。

 

二、留白、对齐和网格

设计中的对齐和间距通过空间上的连接传达出一种秩序和组织感,这两个原则都在设计背后发挥重要价值。设计师早期学到的基本知识之一是在网格上编排设计,然后对齐和分隔这些元素。

左对齐、居中对齐、右对齐都没错,但你必须对齐,否则当元素没有对齐时,设计就会给人崩溃的感觉。它给人一种不安的感觉。

图片

没对齐的话,眼睛看着很难受

网格有很多不同的类型:列网格、基线网格、模块网格、层次网格、像素网格等。不同设计使用不同网格,但最基本的是设计元素的对齐和间距。

图片

(Illustration courtesy UX Engineer)

网格可以被打破。一个死板的构图可能会在视觉上无趣,除非一个元素从网格中脱颖而出。错位或“打破网格”是赋予元素更多视觉权重的一个机会。当在设计中设置视觉层次结构时,它可以用来强调某些东西。

图片

有时打破网格可以创造强调和移动

 

三、平衡

设计上有两种平衡:对称和不对称。所有的构成元素:排版、颜色、图像、形状、图案、留白等,都具有一定的视觉重量。有些元素很重,很吸引眼球,而有些元素很轻,感觉不那么重要。

这些元素的放置方式能够在对称设计中创造出一种平等的顺序感,或者一种稍微偏离平衡能够创造出一种不对称的设计。无论对称还是不对称,我们的大脑都被某种平衡感所吸引,因为它创造了和谐、秩序和美学上令人愉悦的结果。

图片

多重原则:平衡、对齐和对称在网站上发挥作用

 

四、对比

“对比”指的是使设计中不同的元素更容易区别开。强烈的对比可以在设计中强调一个区域,而微弱的对比可以弱化它,创造一个视觉层次。对比在设计中也扮演着重要的角色。对比不足会使文字特别难以阅读,尤其是对视力有障碍的人来说。

图片

在左边的设计中,一些文字和背景之间的对比不够。

Web内容可访问性指南 (WCAG)呼吁“文本的视觉呈现应该有至少4.5:1的对比度”,除了大规模文本,它应该有至少3:1的对比度。因此,设计师需要确保内容保持舒适易读。

其他UI元素(如各种显示器和设备上的卡片、按钮、文字和图标)之间的适当对比也是必须的。如果UI元素之间没有明显的区分度,设计就容易产生混乱。

 

五、对称

在格式塔原理中,对称和秩序的法则也被称为prägnanz,德语单词“好身材”的意思。这个原理说的是,大脑会以尽可能简单的方式感知模糊的形状,这都是为了节省大脑能量。

我们倾向于寻找一切事物的对称性。几项研究发现,面部对称能提高人们对人脸吸引力的评价(尽管完全对称的脸其实并不一定那么有吸引力)。该理论认为,这种偏好与选择DNA最好的伴侣的进化优势有关。

对称在自然界中也无处不在。看看一只蝴蝶,一朵花,或者一只海星。

图片

对称

同样的原理也适用于数字领域,平衡对称的设计更令人愉悦。

图片

对称性在应用中发挥作用。Uber Eats、Booking.com和Behance。

 

六、重复

重复是一致性的近亲,是优秀可用性的标志。

在设计中利用重复是件好事,因为我们的大脑总是在寻找模式、相似性和一致性。为什么?因为重复相同性质的元素需要更少的认知努力。

我们更容易识别重复的模式,而不是每次看到新模式都要重新校准大脑。正如前面提到的,大脑作为一种生存机制是懒惰的,模式识别和认知捷径意味着有意识地处理视觉信息所需的能量更少。

例如,重复元素的形状和大小、填充、留白、类型和颜色,也有助于更对称、更好地平衡,做出美观的设计。

图片

The Athletic这个软件就是用重复元素做设计的好例子。

好了,为了照顾大家的阅读体验,再写更多估计有很多人要开始没耐心了。所以剩下的设计原则,我们下回再接着聊,敬请关注哈。

 

原文:https://uxdesign.cc/design-principles-why-a-design-works-a572c5d2d92d

作者:Miklos Philips

译者:彩云Sky

本文翻译已获得作者的正式授权(授权截图如下)

图片

 

作者:彩云Sky

转载请注明:学UI网》超全面的设计底层理论,优秀设计背后离不开这些(上)

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


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


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



苹果设计为什么显得高级?

seo达人


 一、什么是极简主义风格 

图片

在上世纪初期,随着工业制造体系的变革,人们也开始寻找更适合工业化生产的设计方法与审美体系,极简的设计风格便应运而生。在今天,极简主义早已演变成了一种潮流、一种文化,甚至是一种生活方式,成为了当今的主流设计风格。而它的设计理念大家应该都知道——“少即是多”。说到这里就不得不提一个名字——苹果。它可以说是数字设计中极简主义的先驱,也是这种设计理念的贯彻者。

图片

极简主义在设计上使用简单的元素,突出核心内容。不但可以提升层次感,满足设计需求,也能帮助用户快速聚焦核心部分,突出主要功能。极简主义现在被广泛应用在UI、平面、品牌、工业设计等领域中,也在渐渐影响着人们的生活。

 

二、极简主义的特点 

图片

那么极简主义有哪些特点呢?我们可以一起来看看:

1.大量的留白

2.运用栅格来规整元素

3.简化配色

4.突出内容

5.可读性较高的字体

接下来就举例说明这些特点。

 

1、大量的留白

在极简主义当中,留白是必不可少的部分。可能有的同学或认为留白就是白色,其实留白并不一定是白色,它可以是任何与背景相同的色彩。留白在视觉上可以营造平衡感,创造视觉焦点,将核心内容突出。通过这种方式让用户只关注必要的信息,只做必要的事情。

图片

上图就是运用留白设计的品牌网站首页,通过留白直接突出主体,用户即使不认识这个品牌也知道这是一个关于手表的网页。

图片

上图就不是运用白色进行留白的网页设计,依然可以突出主要信息。留白在使用中,一定要注意构图的关系,使页面整体保持平衡感。

 

2、利用栅格来规整元素

在极简主义设计风格中,栅格系统可以让简单的设计更有条理。运用在页面中,使信息和元素的展示更有逻辑性和规律性,使用户查阅更顺畅,也能使用户从中更好的识别出主体内容。设计师运用栅格系统可以把有限的元素在整个空间中建立正确的层级性与关系,使整个设计更自然。

图片

上面网页就是运用了栅格系统进行布局,从图片到标题、文案都保持精准的栅格化的对齐,使整个页面都保持了协调感,使用户在阅读上也能遵循一定的规律与节奏。

图片

如上图即使是再简单的页面,通过栅格系统也能使整个设计保持一定的协调性。

 

3、简化配色

极简主义在配色的选择上,像黑白这样的色调在表现上更中性,更能体现产品的功能性,而且会给人干净并且富有秩序感的视觉感受。但是黑白并不是唯一的选择,通常会选择一种饱和度较低的单色作为主色调,然后选取一到两种点缀用来提亮贯穿整个设计,达到提升视觉层次感的效果。

图片

图片

上面的两张图在配色上除了经典的黑白色之外,还采用红色作为点缀色,并且贯穿了整个设计。整体的配色不仅简洁而且体现出了层次感。

 

4、突出内容

设计的初衷本来就是对内容的设计,所以突出内容就是极简主义设计最为核心的特点之一。因为其简约的设计,可以让用户在第一时间就聚焦于内容而不是页面其他元素,而且内容本身也可以当做元素进行设计,强化视觉效果,让画面拥有视觉冲击力与张力。

图片

图片

上面几张图就摒弃了其他元素,直接突出内容让受众第一时间就关注内容本身。

 

5、可读性较高的字体

极简主义设计希望元素清晰易于辨认,对字体也是同样的要求。

无论是衬线体还是非衬线体,一定要确保字体的可读性,方便用户快速感知文字内容。在风格上不要装饰性太强,使用经典的字体就很好,在某种情况下适当的放大字体,确保用户可以一目了然更能突出设计的简洁、直观。

图片

图片

在上面几张图中,无论是衬线还是非衬线字体,都会利用文字大小和适当间距保证文字的可读性,也不会对文字添加过多的装饰性元素。

 

三、极简主义在设计中如何使用 

1、移动端中的使用

图片

图片

图片

上面几张移动端的界面,基本上都是有一个主要的色调+图片+大标题,以内容为主体加上大量的留白,整体都符合极简主义的核心特点。

 

2、网页中的使用

图片

图片

图片

上面这组网页设计,也是采用了大标题+产品精修图+单一色调的背景进行设计,摒弃了装饰性的元素,以突出内容为主,运用栅格进行布局加大面积的留白,使页面在简约的同时体现了统一与品质。

 

3、品牌中的使用

图片

上图就是我们熟知的YouTube,这些年品牌逐步摒弃了一些高光、渐变、投影等装饰性元素,并且加入了播放按键图标,向用户传达了YouTube的主要业务方向,整个设计更加简约且一目了然。

图片

上图Instagram的logo也是向着极简的方向发展。新版logo只保留了老版相机的特征以及彩虹色的背景,突出主要元素特征,既简约又易于辨认。

 

4、海报中的使用

图片

图片

上面几张海报就是以图片或者某一独特图形作为主体内容进行突出设计,再加上文字与适当的留白进行栅格化的设计,很好的体现了极简主义的设计风格。

 

5、产品设计中的使用

图片

图片

运用简约的设计语言,突出产品特性与功能性。富有美感与品质性。

 

四、如何打造极简主义风格 

看了这么多案例,是不是对如何进行极简主义风格设计还是有点不知所措,那么我将从图形、配色、构成、字体这几个纬度来给大家阐述如何进行极简主义风格设计。

图形:简单的几何图形,扁平化的设计,去除装饰性元素

图片

上面的图就是运用简单的几何图形+扁平的设计,突出内容引导用户进行操作。

配色:以黑白灰为主,或者选取一种主色调加一到两种点缀色

图片

图片

上面两张图第一张就是典型的黑白灰的配色,突出内容,给人干净和平静秩序的感受,而第二张图就是选用黄色为主色调,然后其他颜色为点缀色,突出功能具有引导性。

构成:大量的留白与栅格化的构成形式

图片

上图就是利用留白与栅格来进行页面的布局,大留白突出重点内容,栅格化的构图让设计更具有协调性。

字体:非衬线体

图片

虽然衬线字体也能体现出极简主义的风格,但是非衬线体在视觉上更简洁,在突出品牌上辨识度更高。

 

五、极简主义配色 

设计中较重要的一环就是配色,下面我给大家分享几组极简主义色彩搭配,每组都有色彩风格对应的形容词和配色数值,希望给大家带来灵感。

关键词:自然,宁静,沿海和平衡

图片

关键词:女性化,诱人,宁静和热爱

图片

关键词:大胆,自信,好玩和活力

图片

关键词:中性,平衡,宁静和时尚

图片

关键词:舒适,宁静,善良和原始

图片

 

六、最后 

图片

图片

上面介绍了这么多,那么极简主义最核心的特点就是:以展示内容为主,去除了多余的元素、颜色,完全体现了“少即是多”的设计理念。极简主义之所以受欢迎并且流行至今的一个原因就在于它突显内容,为用户呈现最重要的东西,让用户关注最主要的事情,简化了界面使其更具功能与可行性。

我们做设计归根结底也是在为内容、商业服务,而极简主义真正做到了内容至上,但是要想更好的为商业服务其背后一定是经过了深思熟虑的,就像小米新Logo一样,看似简单必定是由繁到简的一个过程,而极简主义也是去除多余元素化繁为简的。所以与其说极简主义是一种设计风格,不如说它更像我们想追求的化繁为简的生活方式。

 作者:三木

转载请注明:学UI网》苹果设计为什么显得高级?


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


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


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




数字化转型时代下的设计:医疗x数字孪生

seo达人


一、疫情之下我们能做些什么?

2019年底新冠疫情在国内出现,传播范围也随着大量人口流动加速蔓延。新冠疫情爆发让我国疾控部门开始对重大突发事件的应对能力、疾控水平逐渐重视起来。作为阿里云产业智能的设计师,也希望通过阿里云的数据与技术能力,在疫情之下找到自己的答案。

 

1、要解决什么问题?

为了熟悉疾控业务场景、流程、难点及其中涉及到的产品与技术诉求,我们走访了省疾控中心信息中心。通过走访我们发现,打通业务链路并为居民和医院提供帮助是疾控中心亟待实现的目标。在传染病监测预警中,涉及多维数据收集与分析,数据来源不仅包括医疗机构、流调数据、各类聚集性场所、交通工具等,环境数据的监测对研判传染病的源头与传播途径也至关重要。

经过调研和梳理,我们拆解出3个主要痛点及目标:

图片

 

2、用户是谁?

要解决疫情场景下的痛点,就需要明确我们是为”谁“在解决问题。疾控业务主要面向疾控中心与卫健委主管疾控的部门的工作人员,服务的对象则是每一个生活在城市里的你我他。管理部门需要对服务提供方进行监管,提供物资调配与诊疗辅助,对所有其他对象收集数据、发布预警、政策,对病例与密切接触者进行流行病调查。服务提供方和服务对象需要向管理方同步就诊数据与异常情况。所有对象及其之间的关联,则是推演研判的重要依据。

 

二、为什么通过数字孪生缓解这些痛点?

人类历史上,传染病对人和区域带来的影响是难以控制的、深远的、不可逆的,而防控与治疗措施的研究制定是高难度、高风险、低容错的。数字孪生体可以让疾控分析工作在一个与物理实体相映射的虚拟实体上开展,基于物理空间当前与历史数据,在数字空间中通过全维度的数据监测和反复推演研判,找到并验证疫情传播发展的规律,以仿真、可控、低风险、高灵活度的方式进行模拟预测,提前识别未来可能发生的风险。从虚拟空间回到物理世界,对真实空间可以进行精准有效的「反控」,在最合适的时间,对最合适的对象,采取最合适的疫情防控措施。

从客户、媒介、技术角度,为疾控部门提供综合性的解决方案:

政府- 识别风险、提前干预

疫情动态监测和趋势推演,找出变化规律,尽早识别风险;给出防控处置措施建议,提前储备资源,提高常态化疫情防控效率与能力。

公众 – 信息平等与信任

预警传染病危险因素,将健康教育建议精准推送给公众,促进信息对等,加强公众的安全感和对政府的信任。

医院 – 改善诊疗能力

通过风险提示和诊疗推荐,改善医生诊疗能力,优化医疗资源的分配。

技术 – 数字孪生

通过灵活可控和相对低风险的方式,在虚拟空间中开展多点触发的疾控模拟分析和风险预测,形成突显数据智能特点、客户可感知的数字孪生能力解决方案,提升产品竞争优势。

产品 – 形态创新

根据客户真实诉求,通过数字技术打造多端联动的产品方案,拓展产品类型与创新机会。

图片

综上,我们结合客户价值挖掘出设计机会点:

图片

 

三、构建疾控体系化构建数字孪生设计方案

对客户和用户大量的调研后,对诉求进行归纳聚类,提炼为环境监测 –> 推演研判 –> 预警防控这三大主要模块。

 

1、交互设计

对上述场景中涉及到的数据进行收集分类,可以分为面向政府监管 G 端、医疗机构 B 端与居民 C 端的数据,根据业务目标与描述对象性质,选取不同的可视化呈现方式。在与业务和算法同学沟通过程中,根据传染病动力学模型确定设计方案中影响因子的选取与交互设计方案。从用户使用产品的场景出发,我们在推演逻辑上采用「正向推演」和「逆向推演」相结合的方式。

正向推演

当用户知道影响疫情的关键因素时,用户可以从影响因子出发,选择相关因素并指定作用对象或范围,调整参数进行仿真模拟,对推演结果进行时间空间维度的对比。

逆向推演

当用户明确了疫情管控目标,例如需要在3天内控制住疫情蔓延。可以采用逆向推演的方式,设置限定条件,通过知识图谱展现影响因子和目标元素之间的关联要素(即隐性影响因素),计算达到目标所需要的条件,即可得出精准高效的措施建议。

图片

在设计影响因子相关交互操作时,我们结合传染病相关专业知识与涉众分析中的各类对象及其关系,尽量充分考虑社会、人文、自然等多维度要素,提供更多维度的调参可能。

利用数字孪生核心技术,推导整体解决方案。

 

2、结合孪生亮点,推导整体方案

在环境监测场景中可以基于数字孪生对疫情传播风险尽早识别,将监控关口前移。在模拟推演中,我们利用数字孪生,将来多维因素在区域地图上整合起来,力求充分考虑各类因素的动态变化对疾病传播的影响。由此,环境监测与仿真模拟作为数字孪生能力与疾控工作的契合点,成为重点优化交互方式、打磨各方面体验、提升客户与业务价值的突破口。

图片

 

四、医疗数字孪生:沙盘推演 + 微镜探查

我们在产品/大屏侧从两个创新出点出发,提炼出沙盘推演+微镜探查的概念方案。

 

1、沙盘推演

按比例还原并模拟疫情发生区域的自然环境、天气因素、社会因素、人口因素、与社会因素。通过电脑端调整疫情影响因素,在沙盘中观察疫情对地区生态/人文/社会等方面的影响。

微镜探查

将产品类比成洞察疫情发展的显微镜,用户通过上帝视角在产品中模拟探查不同因素对疫情发展产生的影响,对未来的疫情起到趋势研判的效果。

图片

图片

图片

 

五、不断探索,积极前行

作为数据智能与数字行业设计师,我们希望利用专业做出尽管可能微小但积极的改变,为业务、行业和社会带来一些价值。在公共卫生领域,我们不断在社会意义、客户与用户诉求、业务目标之间寻找契合点,探索数字孪生体验设计的突破口。疾控工作涉及到的公共卫生与医疗知识、伦理抉择、社会关系、经济利益等交织在一起,极度复杂;但希望通过在行业转型过程中加入数字孪生体验设计的视角与方法,最终可以在促进疾病预防、公共卫生资源分配平衡,改善全民健康、生活质量与社会公平信任的艰巨道路上,增加一点点推动的力量。

 

特别鸣谢:项目成员
数字医疗团队pd:达蓬 、基冈 、蒋梦华

数字医疗研发算法:延妮
阿里云设计中心设计师:项婉 、指耘、六衣


作者: 阿里云设计中心

转载请注明:学U网》数字化转型时代下的设计:医疗x数字孪生

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


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


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




如何让你的设计看起来更有说服力?试试网格系统!

seo达人


一、网格系统的组成

在深入了解网格的类型和使用准则前,让我们先来了解一下网格系统中涉及到的一些基本概念,比如列数、内边距、外边距等等。

1、列

图片

列(Column)是网格的基础,用来表示内容放置的区域。每一列的宽度以百分比而不是固定的数值来衡量,这样面对不同的屏幕尺寸,可以更灵活地进行设计。

日常设计中,最常使用的是12列等宽的网格系统,适用于大多数的页面和布局设计中。

2、内间距

图片

内间距(Gutter/Padding)是指每列之间的距离,也被叫做水槽。内间距能为页面提供呼吸空间,避免内容之间过于拥挤。

3、外边距

图片

边距(Margins)是列与边框之间的距离,边距绕过内容有上、下、左、右四个方向,在设计中我们可以针对每一侧设定和更改边距。

4、字段或模块

图片

字段或模块是行和列的交集。这些模块是页面的基础,所有设计元素都将适合网格中矩形卡片创建的这些空间单元。

5、界面设计与网格

如果说网格在过去对于印刷必不可少,那么今天网格在数字世界中仍是不可或缺的。

图片

网格成为开发数字产品的关键工具,为在所有设备上提供最佳的用户体验。因此,无论屏幕大小如何,设计师都必须能够在每个屏幕上通过最佳的方式组织内容。

 

二、如何在设计中使用网格系统?

网格是具有列、内间距和外边距的结构系统,其目的是帮助设计师组织界面的内容。

内间距的距离越窄,越会向用户传达「这些内容属于同一组」的感觉。

图片

同理,内间距越宽,看起来越像是不同类型的内容。

图片

需要注意的是,内间距的距离不要太宽,或者比每一列的宽度还宽,容易导致内容之间的留白过大,造成视觉浏览上的不连贯。

图片

此外,外边距的间距遵循与内间距相同的规则。可以灵活调整外边距,以便在内容和屏幕之间留出合适的间隔。

图片

图片

和内间距一样,屏幕中的外边距也不能太宽,这样会压缩页面中内容的展示空间,会让页面看起来很局促。

图片

 

三、使用网格设计的四条准则

网格的使用看起来很直观,但在UX或UI项目中使用网格系统仍有一些需要注意的规则。

1、将元素集中在每一列中

上面说到,在设计中常用到的是12列网格系统。那么12列网格为什么被广泛使用呢?主要原因在于12列网格更方便扩展不同的布局形式。

图片

▲ 12列网格可以一行排列两个内容,各占6列网格;一行排列三个内容,各站四个网格;一行排列四个内容,各占3列网格;一行排列六个内容,各占2列网格。

基本上,常用到的页面布局形式在12列网格中都可以实现。

图片

▲ 在每个内容之间留出足够的内边距。这里需要注意的是,内容的两侧要与每一列的边缘重合,而不是与内边距重合。

图片

▲ 当内容居中显示时,要始终在边缘留出一点空间,防止页面被内容填充的过于拥挤。

2、不要将列数作为内容填充

在网格系统下,设计应该填充整个内容的宽度,这样会让界面看起来更规范。

图片

不要让左右两列没有填充内容,让列数作为填充,这样会导致页面的外边距不统一,增加后期的开发成本。

图片

3、可以尝试脱离网格

在设计中,使用从网格中溢出的图像或元素也是可以的。

图片

例如我们想填充一个全尺寸的背景色或者图像,只需将图像拉到网格之外就可以。在网格和边距的示意下,开发人员也能够快速理解界面的尺寸信息。

4、注意内容之间的间距

在网格上放置不同的元素时,确保元素之间的左右间距、上下间距都是一致的,这样会让整个界面看起来更规范。

图片

 

最后

除了能够改善设计、减轻用户认知负担外,网格系统还能提升设计效率。有了网格我们可以快速衡量元素的间距、边距的精度,简化设计过程

另外,在规范的网格系统中,界面布局或内容上的修改也会变得更容易。

慢慢来比较快,希望对你有帮助!


作者:Clippp

转载请注明:学UI网》如何让你的设计看起来更有说服力?试试网格系统!

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


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


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



简直不敢相信,加上这个元素,瞬间高级感爆棚!

seo达人



图片

这个问题还是比较普遍,曾经遇到很多同学也是这样的,所以今天拿出来讲讲。

一些特殊的栏目和模块我们最好去花心思设计下,这样可以大大提高UI界面的设计感。

 

一、上下分割

在封面设计中,可以使用简单的上下分割,轻松做出有层次的封面。普遍同学存在的问题,都是直接找一张图贴进去,如下这样:

图片

这种方式设计,完全体现不出你的设计,而只是找了一张别人的图,况且这样贴进去缺少一些特色,不管怎样,一些关键重点功能还是需要设计一下的。

比如,我们可以通过画面分割的形式,对一些特殊的重点推荐歌单做个区别。

图片

上面,使用了上下分割的形式,人物和背景上下都有交接,在加上文字版式,整个封面旧有了视觉张力。

当然,还有其他的分割形式,但大思路是一致。

图片

 

二、大字叠加

同样的在做一些特殊栏目设计时,除了使用分割形式,还有大字叠加,一样可以做出视觉张力的封面。

图片

在这里,我们可以将歌手抠出来,然后背景取色和人物同色系,再加上文字版式,效果就来了。

这种风格其实很好学习,下面简单来看看其他案例。

图片

上图设计思路,采用文字穿插与文字前后叠加的版式设计。

图片

图片

苹果音乐的首页,一些重点歌单推荐,同样使用了特殊设计。

 

三、艺术字

在封面中进行艺术字设计,难度略大, 但是效果做出来一样很精彩,比如下面这种。

图片

POP三个字放大设计,加一些艺术化效果,整个设计氛围感就来了。

图片

图片

除了上面这张对英文字体进行艺术化设计,还有稍微复杂一些的,比如下面这种。

图片

 

四、全新设计

全新设计一张封面,更加体现这个栏目的特色和亮点,也可以让整个画面视觉张力更强,当然对设计师能力要求也就越高,比如下面这种。

图片

全新设计的好处,可以大大的吸引用户的眼球。如果是一些新的栏目,新的模块出现,是完全可以花费时间来设计。这种设计放在你的设计稿中,是完全可以拉开你和同事之间的差距。

图片

图片

图片

好了,到这里差不多完事,今天的关于音乐界面的设计,提高UI设计感,你学会了吗。

好了,今天文章就到这里。

原创不易,如果对你有帮助,记得给我点个赞,支持下我们。


作者:刘涛导师

转载请注明:学UI网》简直不敢相信,加上这个元素,瞬间高级感爆棚!

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


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


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



ISUX「七月」行业设计趋势速递

seo达人


图片

 

本期摘要:

(1)Facebook 开始在美测试NFT功能(2)Facebook Groups 引入频道功能 (3)Niantic 正式推出社交应用 Campfire(4)twitter 内测多人共同编辑一条tweet的能力(5)Instagram Reels 短视频功能更新(6)QQ音乐打造音乐版社交元宇宙(7)Meta Horizon Home 让 VR 更具社交性(8)抖音上线桌面端(9)“中文梗博物馆”出现在 VR 世界(10)#Me:现实社交带进异世界的虚拟游戏(11)上大元宇宙:现实校园搬上虚拟世界(12)Hay:匹配后直接视频聊天的社交应用(13)陌陌旗下 AR 跳舞 APP —— BonBon Jump(14)字节元宇宙 APP「派对岛」全面公测(15)Turn Up:遇见音乐同好(16)vivo 无障碍功能,让声音也可以被「看见」

 

一、Facebook开始在美测试NFT功能 

Meta 产品经理 Navdeep Singh 近日在 Twitter 分享 NFT 功能的截图,他表示公司开始允许部分美国创作者在 Facebook 上发布数字收藏品。从图中可见,进入个人页面后,会在头像下方的看到〝数字藏品〞的页签,用户可以在这个专属页签中展示 NFT,这些艺术品也会有一个〝数字藏品〞的标签 。

用户能在发文时附上想要分享的 NFT,如同一般贴文,可让好友点赞、留言和分享,点击后还会显示有关该 NFT 的详细资讯。 

图片

图片

 

二、Facebook Groups 引入频道功能

Facebook 宣布将在 Facebook 群组引入全新的频道功能,让成员进行更集中的讨论。

管理员可以创建三种类型的频道:聊天、Feed 和语音。聊天频道能让用户在 Facebook 群组和 Messenger 上更加实时地留言、讨论特定话题;Feed 频道让管理员围绕不同形式的主题组织社区,成员们可以基于具体的兴趣或话题进行讨论;语音频道则是允许管理员和成员随时加入和退出语音对话,并且支持开启摄像头。

图片

Facebook 宣称正在测试新的侧边栏,有助于用户快速找到喜爱的群组。侧边栏将列出个人所属的群组、最新活动和新的帖子,支持用户将喜爱的群组固定在侧边栏顶部。

图片

 

三、Niantic 正式推出社交应用 Campfire 

Niantic 宣布在特定地区推出社交应用 Campfire ,并计划在今年夏天将 Campfire整合进公司旗下游戏。Campfire 是一个〝真实世界〞的元宇宙平台,帮助用户发现新的游戏与活动。 

打开应用时,用户会看到所在地区的动态地图,包含好友和其他玩家以及附近正在进行的游戏与活动,从右上角的图标能进入社区或游戏特定地图。

图片

除了游戏之外,Campfire 还提供丰富的社交功能,让用户与朋友保持联系,并从动态地图上发现附近的玩家、社区活动,从而结交新朋友。用户可以组织各种活动,与朋友分享自己的位置,追踪即将到来的聚会动态,开始小组聊天等。

图片

在《Pokémon GO》中,小精灵训练家可以通过消息与朋友共享位置,从而轻松快速高效地组建团队。若是单人游戏,可以点击地图上的一个特定位置,添加信号弹(Flare),鼓励大家一起参与游戏。

Campfire 的特点是基于真实世界 AR 的社交网络,目的是增强整体游戏用户的粘性,同时有利于《Pokémon GO》、《Ingress》等Niantic旗下遊戲玩家之间的沟通。

 

四、Twitter 内测多人共同编辑一条 Twitter 的能力 

Twitter 已开始测试一项新的 “CoTweets” 功能,该功能允许用户共同撰写推文。CoTweets 正处于测试阶段 ,美国、加拿大和韩国地区的部分用户可体验到该功能。

图片

用户可以向关注的好友发送 CoTweet 邀请,待对方接受后将创建一个 CoTweet,显示双方都是共同作者。此外,同一条 CoTweet最多只能两人撰写,因此每个 CoTweet 只能邀请一位共同作者。

图片

 

五、Instagram Reels短视频功能更新 

Reels 是由 Instagram 推出的短视频社交平台,对标 TikTok,Instagram 之前也支持短视频能力,Reels 重点为竖屏短视频,努力提供更多全屏沉浸式内容。Instagram 宣布15分钟以内的新视频帖子将以 Reels 形式分享,相比之前的90秒时长大大放宽。

图片

在拍摄能力方面推出双向摄像头的内容生成方式,让用户拍摄时能分享当下的反应。并推出模板功能,用户通过上传视频和照片来填充模板生成内容。

图片

另一个同样双画面的功能由 Facebook Gaming 推出,Clips to Reels 功能提供游戏画面和创作者摄像头的两个画面,将游戏片段和录播快速转换为 Reels,支持添加背景音乐、自带滤镜和特效。

图片

 

六、QQ音乐打造音乐版社交元宇宙 

Music Zone 是QQ音乐为用户打造的全新虚拟音乐社区,将其作为元宇宙领域的首次尝试,希望为用户带来沉浸式互动体验。

用户登录QQ音乐 APP 后,可在 Music Zone 中设定专属人物形象,并能获取虚拟形象,其形象灵感致敬经典的火柴人 Mfer。

图片

Music Zone 类似于超级QQ秀的QQ小窝,用户可以获得一个独立的家,用户可以随意装扮自己的家,并在墙壁上挂有虚拟播放界面和歌单墙,用户点击虚拟播放器进行歌曲的播放,访问的人也能进行点播。

图片

 

图片

Music Zone 提供了社交功能,用户能在社区地图上任意选择一个家进行访问,并对访问对象的家进行点评,关注对象以及加好友。QQ 音乐的用户享受到虚拟社交体验的同时,还能进一步增强 QQ 音乐内的社交关系链,打造一个兴趣社区。

图片

 

七、Meta Horizon Home 让 VR 更具社交性 

Meta 公布 Quest 2头显将推出 Horizon Home 功能,借助该功能让用户和朋友实现虚拟串门。用户可以从一些预设选项中选择场景作为自己的家,可以是空间站、日本旅馆或俯瞰山间的日落的露台等等,甚至可以自己上传场景。

(点击图片前往原文观看视频)

图片

创建完毕后,可以邀请朋友到自己的 Horizon Home 环境里进行和参观、闲聊,甚至还能直接支持开启多人游戏(游戏包括 Beat Saber、Demeo 和 Echo VR),满足线上面对面社交化更强的游戏体验。

图片

扎克伯格还和攀岩运动员 Alex Honnold 一起在 Horizon Home 里观看了 Alex Honnold 在攀登多洛米蒂山( Dolomiti )悬崖的360度纪录片《 The Soloist VR 》,这一虚拟现实纪录片中可 Meta Quest 头显的 Oculus TV 上观看。

(点击图片前往原文观看视频)

图片

在 Meta 的设想里,VR 是一个社交平台,Horizon Home 就是一个社交空间,玩家可以在其中与朋友一起闲逛、一起观看视频…就连 Dropbox、Facebook 和 Instagram 等软件,之后也将在 VR 中作为 Horizon Home 中的 2D 面板应用程序运行,玩家不需要摘下头显就能进行访问。

图片

 

八、抖音上线桌面端 

抖音推出了 PC 电脑版,让用户在电脑大屏上就可以刷短视频,其实之前也可以通过抖音的网页版在电脑上刷短视频,但网页版的功能相对过于简单。

(点击图片前往原文观看视频)

PC 版客户端和手机版抖音在风格上保持基本一致,默认采用深色效果,不过在右上角设置区域也能在深色和浅色两种模式间互相切换。左侧边框区域是视频分类区,这里分布着“直播”、“热点”、“娱乐”、“游戏”等不同视频的进入通道。

(点击图片前往原文观看视频)

PC 版抖音客户端相比手机版而言,基于桌面场景在视频浏览上做了差异化的体验。一是能够选择“自动连播”,无需手动翻页刷新自动播放下一个视频,真正地解放了双手;二是视频播放能用鼠标、键盘快捷键进行操作,体验更方便、自然。

图片

 

九、“中文梗博物馆”出现在 VR 世界 

最受欢迎的 VR 聊天室应用 VRChat 上线了一个高质量中文场景“中文梗博物馆”,由B站视频作者“四迹”带领网友创造的,收纳了2010年前后互联网在国内普及至今,于视频网站和社交网络流行的大量梗,并迅速成为亚文化圈层话题。

与现实中的大多数博物馆不同,进入中文梗博物馆并不需要门票,只需要在 VRChat 中搜索名称,跳转并能直接进入。虽然是在虚拟世界中构建,这个博物馆却有着真实博物馆一般的入口、展馆分布、陈设乃至藏品展示,并不因非商业团队制作而显得质量低劣。

(点击图片前往原文观看视频)

展品来源算得上是包罗万象。从简单的聊天对话引出的话题,到图片和短视频等当今更流行的载体,再到影视剧、动画漫画的名场面,以及为中国互联网行业蓬勃发展提供驱动力的电子游戏等。

由于中文梗博物馆是搭载在VR Chat平台中的线上虚拟展会,用户可以根据VR平台提供的各类模板自定义自己的形象,观展者甚至可以配合展厅中的梗,成为梗中角色或物件,和其他观展者互动,提供社交破冰的切口。在沟通方面,用户之间可以建立独立聊天室,让聊天内容不公放,确保私密性,也不会打扰到其他在观展的玩家。

图片

 

十、#Me:现实社交带进异世界的虚拟游戏 

#Me 由韩国游戏公司 Clover Games 研发,于7月7日上线,是一款二次元风格的3D元宇宙产品,在上线前全球预约人数已经超过100万。

图片

背景为世界突然间出现可以穿越到异世界的入口,玩家在编辑好自己的 Avatar 后进入世界,最大特色的设定是手机的网络社交能力依然存在。

(点击图片前往原文观看视频)

游戏主界面整体气氛像直播应用,有日夜系统。能与NPC视频通话、互相关注,可以像现实生活中那样拍照记录,分享到社交媒体(风格像 Instagram)上。

图片

玩家在世界中冒险,会有一个陪伴的小伙伴 “Campy” 作为游戏向导,并为玩家旅途的拍摄记录高光时刻,让玩家能合理地产生第三视角的内容。收获粉丝认可,成为玩家重要的成就体系

图片

玩家通过完成任务可以解锁不同的地点,也可以随意在世界里逛逛,和路过的玩家轻互动,目前看还是偏重游戏轻社交。

(点击图片前往原文观看视频)

 

十一、上大元宇宙:现实校园搬上虚拟世界 

上大元宇宙由上海大学上海美术学院蒋飞教授和学生们共同创作,名为SHU Metaverse,以上海大学宝山校区为原型的一个虚拟校园。

图片

在疫情背景下,校园生活也受封控影响,一个还原高校的虚拟世界,让师生们能在里面奔跑、互动、上课、听讲座、举行毕业典礼等,也能做一些平常在校园中不可能做到的事情,如空中飞翔、养宠物、寻宝等。

图片

上大元宇宙给疫情期间不能到校生活的师生们一个缓解压力的平台,在虚拟校园的云毕业典礼,带给毕业生一份特殊的礼物。

图片

 

十二、Hay:匹配后直接视频聊天的社交应用 

本周登上 App Store 中国区第一位的 Hay,是一款主打实时视频的社交app,可以与全球范围的人聊天。

图片

图片

Hay 的 UI 采用像素风格,整个应用很轻巧,分聊天、匹配和个人三个 tab。自动匹配用户不需要收费,系统会根据用户的性别、年龄和兴趣标签去匹配,双方同意后开启视频通话,但使用筛选条件匹配需要支付金币。

图片

为解决不同文化的语言障碍,视频聊天时也提供文字聊天,对文字进行自动翻译,保证双方能持续交流。为了鼓励用户多使用 Hay,应用有每日签到、飞行地图、勋章三种激励模式。

图片

 

十三、陌陌旗下AR跳舞APP:BonBon Jump

出门健身难,撸铁枯燥无趣,网红燃脂舞视频跟不上……近日,陌陌想通过 AR 新产品「BonBon Jump」来解决这个问题。

图片

这是一款使用了 AR 技术映射自己喜欢的3D形象,并跟随跳舞健身 App。运动盒子,可以选择不同舞种与音乐,选择自己喜欢的音乐即可开始跳舞。

图片

只需打开「BonBon Jump」投屏到电视,手机放在能够扫描全身的位置即可开始。接下来你就可以穿着自己喜欢的虚拟3D形象,跟随 AR 游戏指引进行舞蹈。通过「BonBon Jump」提供的 AI 识别技术,可以精准识别动作数据,实时打分,拥有更科学的运动保护和指导。

图片

图片

另外真人动作演示,AI 动作识别结合 AR 玩法,可以让燃脂舞跟练像玩游戏一样简单。运动计划,可以根据身高体重,免费制定燃脂计划,并进行记录,让运动更科学量化。个人中心,展示运动战绩以及高光时刻,让运动变得有仪式感。

 

十四、字节元宇宙 APP「派对岛」全面公测 

派对岛 APP,早在2022/01/25就上线应用市场。目前,派对岛已开始开放对外邀请,开始放大测试范围了。

图片

图片

派对岛,是一个实时线上活动社区。派对岛的 slogan 是:没有人是一座孤岛。在这个虚拟人社区里,创建你的个人形象后,可以参与和创建线上活动。让你与其他同好轻松社交,找到趣味相投的人。同时,你也可以自己创建活动,邀请别人来参与。

图片

这个小岛上,有街心花园,有温馨小屋。你可和小岛上新交的朋友,一起 party。也能体验新奇有趣的沉浸式聊天。与朋友和同好相遇在岛上,和朋友相遇,聊天。

图片

 

图片

 

十五、Turn Up:遇见音乐同好 

上次介绍了网易云音乐旗下的音乐社交产品 MUS。其实早在2018年3月 Turn Up 就已经上线。截至目前,进入了29个国家和地区的 App Store 生活类畅销榜  Top100。Turn Up 在音乐和社交的联通上有很多可借鉴之处。

图片

① 首先,用户需要对音乐资料卡进行完善。选出至少3位最喜欢的歌手、主页播放歌曲为必填内容;然后通过多场景的音乐选择,提示用户填写资料卡片,资料越详细匹配到心仪用户的几率越高。比如:最无法忍受的歌手、适合约会的歌曲、将在婚礼播放的歌曲、将在葬礼上播放的歌曲等。

② 系统会根据用户填写的歌手和单曲,来判定用户喜欢的音乐类别,并将具有相同音乐偏好的用户放在同一匹配池。

  • Swipe,用户可以如使用 Tinder 一般,对自己感兴趣的用户进行右滑、对不感兴趣的用户进行左滑。
  • 音乐盲盒,直接向自己感兴趣的用户发送消息或者尝试猜出对方的音乐盲盒。用户需要在30秒内以“4选1的选择题模式”根据歌曲节选片段猜对歌曲名称,完成猜歌任务后系统会自动显示猜歌结果,用户可以根据自己的答题情况初步判定彼此的音乐品味是否相投。

图片

  • 线下活动,Turn Up 也会为每一个线下活动设立一个匹配池,用户可以在匹配池左右滑动寻找感兴趣的用户。这就相当于将“线上”和“线下”进行了串联,线上好友在不久后就可以在线下碰面。

 

十六、vivo 打造的无障碍功能,让声音也可以被「看见」 

我国是全球听障人士最多的国家,听障群体总人数有将近 3000 万人,听障群体日常需要面对很多非常基本的问题。

针对听障人士最基本的生活场景,vivo 推出了「vivo 听说」和「无障碍通话」功能。这些功能让原本生活中只能靠「听」的话语变成「看」得见,为所有人提供了多一种获取信息的方式。

两个功能使用的主要技术是语音识别技术和语音合成技术,都是我们平时常常会用到基础技术。

图片

开启功能后,每次接电话时就会弹出对话框。电话另一头的语音会被翻译成文字,而这一头输入的文字,也会转录为语音播给对方听。同时,用户还可以设置常用语。打车、收快递和外卖等重复类场景可以更快捷应对。

「vivo 听说」则是为线下对话场景而设。以前,我们有把语音转换成文字的应用,也有把文字变成语音的应用,但「vivo 听说」把两个功能结合起来,因为这样才是一个完整「对话」。

点一下屏幕底部的「耳朵」,开始「听」,实时将语音转录为文字。点一下旁边的「键盘」,输入想说的,让文字「说」出声。

而且,「vivo 听说」还能小框化,用户可以一边使用其它应用一边「收听」其他人说的话。

以上就是2022年7月ISUX行业设计趋势速递,喜欢记得收藏转发,以备不时之需查看。

 

原文地址:腾讯ISUX

作者:ISUX设计

转载请注明:学UI网》ISUX「七月」行业设计趋势速递

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


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


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




一次教你16种宋体字的变化!

seo达人


(点击图片前往原文查看视频)

(点击图片前往原文查看视频)

 

如果不喜欢看视频也没关系,这里还有贴心的图文版详细过程,下面一起来看一下都是哪 16 种。(视频中只有 15 种,最后一种是我临时加上去的。)

图片

开始我们今天的正题,逐一来讲解一下。

 

 

图片

宋体当中的笔画美感是比较重要的,而如果对于字体没有太多了解的话,是比较难刻画出精致宋体笔画的,所以我们可以对笔画进行一定程度的简化,当然主要是对于横竖笔画的简化,全部做成直线的形态。

图片

其次则是撇捺点的笔画,可以简化成一个带有曲线的三角形,同时把边缘处切平处理。看起来会更简洁现代。

图片

这样我们就得到了一组简化过的笔画,其实这一步主要的思路就是把笔画处理的更几何,自然也就更简化了。

图片

下面就可以用这些笔画来进行拼字了,选择思源宋作为结构参考。这里我把思源宋拉的瘦高了一点,大家也可以根据自己想要的感觉去自行调整。

图片

最后,适当调整布局,两行错排,添加一些小文字进行排版即可。

图片

这里结合最终的排版,添加了一点点连笔和笔画延长的处理,后面会单独讲连笔的形式。

 

 

图片

断笔这一方式已经老生常谈了,在字体设计中的使用频率非常高,常规的断笔方式大家应该都是会的,就是对笔画与笔画有接触的位置进行断开即可,那其实也可以尝试断开的更多一些,把所有接触的笔画都进行断开。

图片

当然这个方法也可以和简化做同时使用,依然选择思源宋垫底,搭建字形,这里我是拉宽了一些。

图片

再来对整体进行断开,还是相同的方法,但气质完全不一样了。

图片

最后添加排版,这一组就完成了。

图片

接着来看第三种方法。

 

 

图片

这一方法有点类似于断笔的加强版,只是略微有点不同,那具体做法就是把整条横笔全部省略掉,只保留笔画末端的修饰。

图片

首先依旧是搭建结构,这一部分并没有任何区别,大家可以自由的设定笔画造型,以及笔画的粗细,来达到自己想要的感觉。

图片

下面就很简单了,把字体中所有最细的横笔给删掉,保留末端的小三角特征即可。

图片

最后也可以根据字义适当增加一点意境,我这里加了一些模糊效果。

图片

这里稍微多说几句,有些字并不能把所有横笔全都省略掉,因为会比较严重的影响识别,比如日字,干字,等一些字里面只有横竖笔画的字,我们就不能对横笔全部省略。

图片

这种情况就要适当去保留一些横笔了,根据识别情况,进行还原横笔的多少即可,识别低就多还原一些横笔,识别够高则可以多省略一些的。

图片

这两个字真不是故意的,脑子里就只想到了这两个字比较适合…

 

 

图片

这也是一个非常好用,非常实用的方式,连笔,其实连笔的方法无非就那么几种,最常用的就是根据手写的习惯和规律进行连笔,再一个则是顺势而连,当然也有一些逆向连接和非常规的连笔手段,但那需要一定的积累和经验了,今天我们主要谈的就是基于手写习惯这一方式。

方法略有一些不同,首先我们要先根据垫底字进行画草图来尝试可以做连笔的位置,以及连笔的造型。这里可以进行大量的尝试,选择整体看起来比较舒服的姿势再往下做。

图片

我们来稍微分析一下草图,首先第一组是不太合适的,因为王字旁的变形过于繁琐,我们再替换进宋体笔画的时候,很可能会完全糊掉。

图片

下面再来看第二组,连笔的走势是没什么问题的,但略微平淡了些,且少字的连笔形态不是很好看,所以可以作为备选项。

图片

再来看一下最后一组,这一组是可行的,连笔的走势比较飘逸,且王字旁的连笔并不是那么常规,所以可以用这一组来作为参考。

图片

这里的笔画设定的比较细,而且较为锋利,因为想到玫瑰带刺,少年也带要带点刺,所以做了一个这样的设定,大家做不同的主题可以设定不同的笔画粗细和细节处理。

图片

接下来直接用画好的草图垫底拼字就可以了,这一组我也是把字拉的瘦高了一些,也是因为「少年」这个词,如果是「玫瑰大叔」的话,可能我就会做的短粗胖一些了。

图片

图片

 

 

图片

这一方法实际上就是结合了简化和连笔的方式,但气质还是有明显的区别的。

图片

这里在笔画上我简化的不算特别多,横竖笔画设定的粗细较为类似,撇捺点这一类笔画在起笔和收笔处还是保留了一些角度,并没有完全切平。

图片

首先还是搭建结构,不管做什么变化,都要在结构稳定的基础上去做,不然字体会越变越乱的,一直使用思源宋呢,是因为可以免费商用,即使改动不大也不用担心版权问题,如果大家有基础,可以选择其他垫底字。

图片

这里的连笔形式绝大多数都是基于手写的规律而连接的,就不再重新画草图分析了。

图片

最后再简单排个版,加个英文和一点小装饰即可。

图片

 

 

图片

这一方法是比较简单且很容易出效果的,常规的宋体结构很容易就看腻了,这个时候我们可以考虑用楷体的结构,但依然使用宋体的笔画,最终效果就是下面的样子了。

图片

首先还是要稍微设定一下笔画的造型,这种形式不用设定太复杂的笔画造型,常规一点就可以了,因为结构并不是常规的宋体,所以设计感也并不体现在笔画上。

图片

下面选择一个稍微正一点的楷体来垫底参考结构,这里我选的是华文楷体,然后拉高了一点。

图片

这里也可以稍作一点变动,比如口字部分下方的横笔替换成提的形式是比较常用的方法,愿字上边的一撇延伸进下边,从而省略掉横笔的一部分,也有结合前面的一些知识点,大家可以灵活去处理。

图片

最后简单排一下就好了。

图片

 

 

图片

共性这一概念之前有单独开过一篇文章来写,所以这里就不赘述太多了,简单来理解,这里用到的共性就是笔画上的统一,我们可以从一组字当中寻找相同位置,且相似或相同造型的笔画,进行夸张处理,这样就得到了一组有特征,但整体又很统一的字形了。所以我们还是得先画草图来寻找共性笔画。

图片

尝试过后,发现这一组字当中,适合做共性笔画的要么是撇的笔画,要么是竖笔延长成竖撇的形式,像第一组,撇笔画的位置在每个字当中并不是很统一,所以不是很好的选择,而第二组则要好得多,维度壁字下边是强行做的这种处理,有些不和谐,但整体来看是没问题的,所以这里选择第二种,延长竖笔。

图片

下面还是老样子,垫底,搭建结构,就完了,说实话写到这我有点腻了,但还是要继续写下去,既然说了是 16 种,那就得整完…

图片

正常搭建好结构后,就可以按照草图阶段的想法来进行延长笔画了。

图片

然后,排版,就好了。

图片

 

 

图片

这个算是偏技法类型的方式了,毫无难度,一看就会,学了肯定不会废。常规的描边形式我们都会做,一键转换就好了。

图片

在这个基础上,把笔画的边缘剪断,然后做一点延长或是交叉的处理,这样就能让字体具备一定的形式和设计感了。

图片

然后还是排版,字体其实不排版的话,大多数看起来都会比较单薄,而且字体单独出现的情况也比较少,所以尽量还是要排一下的。

图片

没什么难度,几下就完事了,很快,希望你们每次都这么快。

 

 

图片

这个方法其实不算是设计字体的方法,更多算是字体的排列布局的方式,主要就是要对一组字做一些大小变化,从而让整体看起来比较有节奏感。但这里要注意一个问题,字虽然有大小变化了,但笔画粗细是不变的。

首先我们要对所做的字进行大致的分析,哪个字应该大,哪个字应该小。一般来说,笔画多的字我们可以做的大一点,笔画少的字就做得小一点。

图片

且上中下或上下结构的字则可以做的瘦高一些,左中右以及左右结构的字则做的宽一些。这是基于汉字的基本结构而有的规律,当然你也可以自己去设定规则。

图片

那其实还有一个点需要注意,就是对齐的位置,要么是底对齐,要么顶对齐,要么居中都在一条水平线上,具体要看整体排出来的美感来选择。

图片

其实三种都是可以的,因为整体的节奏是没问题的,“小大大小小”。这里我选择最后一种居中对齐的形式,开始搭建字形。

图片

可以看到,这里我也做了大量的简化,甚至横竖笔画我都是用钢笔画的等粗线条…我承认偷懒了。所以这种方法可以与前面很多知识点相结合,能做出很多有意思的宋体字,最后排版也比较简单。

图片

 

 

图片

这个方法有点类似给笔画加装饰,但不需要那么夸张,我们只需要在正常字体的基础上,对笔画稍稍加一点改变就可以有不同的效果和气质。

图片

搭建字形的步骤我就不磨叽了,还是一样的方法,正常做完就这样,虽然这里我换了一种形式的笔画,但还是比较常规,没什么意思。

图片

在这一基础上,稍稍对笔画边缘加入一点类似毛笔字拖出来的墨迹形式,整体就变得好玩多了。

图片

这种小细节不一定要加在所有笔画上面,大家可以选择性的添加一些即可,全都加了反而无趣了,最后添加上排版即可。

图片

 

 

图片

民国时期的美术字可以说是已经达到了巅峰,现在大家做的很多变化以及形式,有很多都是借鉴于民国时期,这里先稍微看几个例子。

图片

可以看到,变化形式非常丰富,S 形状的笔画,口字部分的变化,星星元素,几何元素,各种连笔造型等。那具体做法也比较简单,我们只要在正常搭建好结构之后,适当替换一些民国字的特征笔画进来即可。

图片

最后添加排版,虽然是借鉴了民国字的笔画,但这里看起来并不老气,还是非常好用的。

图片

需要注意的是这里调整的更多的其实还是撇捺点这一类的笔画,横竖笔画还是比较少做变动的。

 

 

图片

虚拟连笔,实际上就是基于常规连笔的一个延展而已,只不过这种形式的适用范围也比较广。

那做法其实就是用稍微细一点的线条,来勾勒出连笔的走势而已,只带出局部,并非真正的连接上。(ps:这个方法借鉴了岳昕老师的字。)

图片

最后再加上偷懒式排版。

图片

这里再稍微多说几句,这里面的笔画我是用钢笔画的两种粗细的线条,而撇捺的部分采用的是竖笔粗细,然后用宽度工具把收笔的部分给拖窄一点就好了,也是个偷懒神器。

图片

 

 

图片

常规的字体在视觉上看着都是比较接近正方形的,所以我们偶尔可以对字体的字面进行夸张处理,非常宽扁又或是非常瘦高,都会很直观的给到视觉感受,这样看着就比较陌生,那相应的也就有了设计感。

图片

这个就不做案例了,调整完字面后可以和前面所有的方式做结合。

 

 

图片

宋体的笔画修饰一般都不会很大,所以当我们尝试把这些修饰放大处理的时候,那设计感自然也就有了,放大特征的对象主要就是横笔的末端,和竖笔的起笔或收笔处,当然也包括撇的起笔,甚至是连笔的特征都可以去放大处理。也是一个一秒就学会的方式。

图片

 

 

图片

这也是一个专门开过一篇文章来讲的方式,西文中用在宋体中的表现更为优秀,因为笔画特征较为特别,且西文的数量极为庞大,具体做法就是通过拆分西文的笔画,以提取出横竖撇捺点等中文笔画。

图片

乍一看好像英文的最大特征并不能结合多少,这时候就要去思考问题了,像英文中的一些细线的变化非常相似连笔的形式,所以我们可以在中文当中去寻找一些可以做连笔的位置,来借鉴英文的特征结合进去。可以结合垫底字大致画一下草图进行尝试。

图片

不需要画的很细致,自己能看懂就行,这组字可以做的瘦高一些会更能凸显英文特征的气质,所以我们可以适当调整一下,就可以直接开始拼字了。

图片

还是很简单的,大家只需要多注意西文笔画与中文笔画的契合度,以及把曲线刻画的流畅一些就问题不大了。

图片

 

 

图片

这里主要是对于古籍碑帖的一些提取与借鉴,相对来说要难一点点,我们先来看一下碑帖。

图片

首先我们要做的就是提取笔画,其实主要就是横笔的造型要提取出来,其余的笔画都可以通过横笔来进行延展。那横笔的起笔部分造型还是很好提取的。

图片

其次是收笔,但这里的收笔造型并不容易提取出一个明确的造型,所以这里我直接就做成了最简单的三角形。

图片

其次就是对于竖笔的延展了,竖笔的部分我们可以直接把横笔竖起来,这样能最直接的保证笔画造型的统一,相应的撇的造型也有了,至于捺和点的造型,使用正常宋体的造型就可以了。

图片

下面直接把碑帖垫在下面使用楷体的结构,然后宋体的笔画,和前面讲到的宋楷结合是一个意思。

图片

当然也可以把它改成正常宋体的结构,笔画处理成平直的就好了,但结构上会有一些变动,大家可以参考字库来调整视觉上的平衡。

图片

这个方法的可塑性是比较强的,因为会涉及到比较多的主观处理,下面我再放几个之前做的这种类型的字。

图片

图片

图片

图片

好了,那这期教程就到这了,我们下期再见,告辞老铁。


作者:猴子

转载请注明:学UI网》一次教你16种宋体字的变化!

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


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


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



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档