首页

如何提升UI设计的高级感

纯纯

创建美观、可用和高效的UI界面需要花费时间进行设计细节的打磨,本文从视觉和情感化设计两个方面来说说如何提升UI设计的高级感。 


1、视觉元素

在互联网产品日趋成熟的今天,你会发现所有的App越来越像,似乎是同一套模版设计出来的产品。而这种普适化的设计会导致同质化严重,使得设计不精致,产品没有气质和品牌感。一个App设计是否精致,是否富有设计感,在于它的细节,这就意味着我们在进行设计的时候,要从细微之处着手,从多方面去钻研如何创造出打动人心的UI设计。本节总结了12个简单直观的提升设计感的小细节,一起来学习。


1.1 使用颜色深浅构建层次结构

在对UI 文本进行样式控制的时候,最常见的错误莫过于过度依赖字体大小差异来营造对比。单纯使用字体大小对比,所营造的对比并不够,尝试结合色彩和字重来营造更好的对比效果。


每种颜色都有一个视觉权重,这有助于在内容中建立层次结构。通过使用颜色的深浅,为元素赋予不同的重要性。如果可以的话,你甚至可以采用两到三种颜色:

  • 主要内容使用深灰色(诸如标题,但是不要用纯黑)

  • 次要内容使用灰色(比如商品介绍)

  • 辅助性内容采用浅灰色(比如发布日期)

类似的,在UI设计的时候,通常两种不同的字重足以营造出优秀的层次感:

  • 大多数的文本采用正常的字重(400到500,具体取决于字体)

  • 对于需要强调的文字采用较重的字重(600到700,具体取决于字体)

▲主标题字重为600,其他标绿点的文字字重都为400



应当尽量不要让正文部分字重低于400,因为这一部分字体本身尺寸已经较小,低于400会使得可读性不佳。如果你依然需要降低字重,那么不妨让字体色彩更浅一点,或者替换成其他识别度较强、字重相对较小的字体。


灰色文字在无彩/彩色背景下要分开处理

不要在有色背景上使用灰色的文本,在白色背景下,将黑色的文本改成灰色(或者在黑色背景下使用灰色文本),是不错的淡化其视觉效果的做法。

但是在彩色背景下,想要降低和背景色之间的对比,通常有两种方法:

一是降低白色文本的不透明度;二是让文本逐步接近背景色,而不是改为灰色。

▲左图设计师职位信息为白色文字降低不透明度,右图为和背景同色相高明度的颜色



其次当涉及长篇内容时,大面积的深色粗体字会给人一种沉重感,而且很跳跃。通过选择类似深灰色(#4F4F4F)这样的颜色可以很容易地解决这个问题,使文字更容易被识别。


1.2 统一色调

选择一种基础色,再调整色调和颜色深浅来增加均衡。设计时避免用过多的颜色。如果项目允许,只需使用固定的色板,通过调整基础色的饱和度和明度,利用这种简单的方式为设计增加一致性。


1.3 干净的阴影

阴影是UI设计中最常见的视觉表现手法,它可以增加元素的深度,使其从背景中脱颖而出,引起用户的注意力,同时也能增强画面的视觉层次感。相比于采用大范围的扩散模糊阴影,使用微妙的垂直偏移阴影效果更明显,更自然,它模拟了最常见的光源特征,光线从上往下照下来所营造的阴影效果。


这种轻柔的阴影呈现出的干净,增加了画面的精致。如果阴影的范围太小或颜色太深,位置也没有偏移,而是聚集在元素的四周,就会让画面更加扁平,让视觉变得厚重,呈现出不精致的画面感。

阴影不一定是黑色的,还有一种扩算阴影是模拟元素本身的颜色投射在背景上,由于阴影与元素的色调一致,因此呈现出十分融洽的画面感。在UI设计中,这种手法不宜过多使用,否则呈现出的各种色彩搭配会让人眼花缭乱。


1.4 个性的图标设计

合格的设计师能够绘制风格统一的图标,而优秀的设计师能够创造风格独特的图标。我们能否在追求大小一致,圆角一致,线宽一致和配色一致的同时,为它的视觉表现力加入更多的创意呢?例如下面这组图标设计,无论是在图形上的创新,还是颜色搭配上都呈现出无与伦比的创意。


标签栏作为一个App的全局导航起着至关重要的作用,它的设计影响着整个产品的视觉风格。通常,大多数App都是使用iOS规范的设计样式(默认灰色,选中填充品牌色),这样的设计太普通,太常见了。要想让标签栏图标设计精致和富有个性,可以丰富每一个选中态图标的视觉表现,例如给图标加上背景和表情,即显得生动有趣,又增加了用户的好感,给人留下深刻的印象。

3D立体图标设计是近几年来的流行趋势,看上去十分精致、华丽,但是看久了会让人产生轻微的视觉疲劳,同时因其复杂的结构会增加用户的认知成本。一般在外卖美食类应用中比较常见。


1.5 Tab的设计感

Tab是App设计中最常见的控件之一,它源自Material Design的设计规范。现在很多iOS产品当中也开始使用这种导航栏样式来进行设计,而原本属于iOS规范当中的分段选择器变得不那么常见了。

在视觉表现形式上,Tab和标签栏同样也分为选中态和未选态,它的设计较为简单,通常是使用一组文字标签,通过颜色或在标签下加上小长条来区分两者的状态。因为它简单,却越难设计出彩,要发挥极大的设计想象力,跳脱出设计规范的限制,才能找到完美的方案。例如虾米音乐的Tab选中态是一段音频波线,再配合文字的大小对比,一个富有设计感又符合产品特征的Tabs就被创造出来了。


我们还可以从品牌基因中获取灵感,品牌作为用户熟知的形象是个绝佳的来源。从品牌形象中提取具有独特气质的视觉富豪作为Tab选中态的小长条,这样就建立起视觉上的联系,让用户产生由内而外的一致感受。例如马蜂窝品牌形象中的微笑符号和飞猪旅行品牌形象中的猪头都被延伸到Tab的设计上,既让界面视觉独一无二,又进一步强化了用户对品牌形象的认知。


1.6 无框设计 去繁从简

在UI设计中,有许多的装饰元素,如卡片的边框、列表的分割线等,虽然边框,分割线是分隔两个元素的好办法,但是它不是唯一的方法,使用过多会让整个布局的设计感降低,或多或少都会干扰用户浏览的视线,让信息内容失去注意力,因此可以减少不必要的装饰元素。我们可以通过以下几个方法来划分元素的视觉层次,让画面变得干净,整齐:


使用阴影

阴影同样可以营造出边界感,而且相比边框分割线更加微妙,并不会显得突兀,不会分散用户的注意力,让内容更聚焦。


使用不同的背景色来区分

通常,相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分。所以,你所需要做的就是在不同的区块采用不同的背景色,并且尝试删除分割线,因为你根本不需要它。


增加额外的留白

创建元素之间的分离效果,并不一定要通过线框来表现,只要增加留白,让它们分隔开就行了。通过留白和间距来实现元素分组是UI设计中的常用手法。


1.7 统一设计元素

在App中的每一个界面都有许多元素,那些同类的元素应保持统一的设计样式。通常个人中心的标签栏图标是一个人形剪影,它代表着用户,因此可以在展示用户头像和用户形象的界面中延续使用。如果图形拥有独特的外观,如椭圆矩形,也可以作为视觉符号的一种,延续到其他界面中,成为图形或按钮的外观。这样,整个界面就被统一的设计元素联系起来了,给用户始终如一的一致感。


1.8 符合产品气质的字体

选择符合产品气质的字体,可以与产品的定位相吻合,传递给用户正确的情感意识。虽然默认字体可以满足大多数App 的设计需求。但会出现一个问题就是,系统字体的普适性并没有什么特色,在一些特定的情境下就显得收效甚微。例如在运动类App中更适合粗壮的斜体来传递力量、爆发力、速度的感觉,换成系统字体后,整体感觉在气势上就变弱了很多。


1.9 第三方图标风格统一

大多数App都支持三方登陆,他可以减轻用户注册的时间成本。通常是在注册登陆页的底部展示第三方图标入口,这也是设计师最常忽略的内容,往往是直接将第三方图标调整一致大小和摆放整齐位置,没有针对它们再设计。一个设计精致的App不应漏过任何的细节,我们可以以自家App的图标风格为依据,对第三方图标进行优化设计。


1.10 图片中寻找色彩

App中优美的图文设计,能带给用户如沐春风的视觉享受,它非常重要。我们经常看到文字叠加在图片背景上的设计样式,为了减少复杂图片背景对文字的干扰,通常的做法是叠加半透明度的黑色蒙版,让白色文字清晰可见,但这不是最优的办法。我们可以从图片中提取主色调用于叠加背景的填充色,这样就使文字、色块和图片融入到一起了,画面变得高级和富有设计感。


1.11 提高图片质量

图片的质量影响着整个App的格调和用户的情绪,高品质的图片给人愉悦的视觉享受,产生美好的联想。而低品质的图片会瞬间拉低App的质感。在App设计中,一张漂亮的图片从收集到上线,需要经过裁剪,调色等过程才能被使用。即使是普通的商品图片,我们将它抠图后调整成统一大小,再加上干净的背景,就能立刻提升商品的美感,界面视觉也会变得美观、整洁。


1.12 卡片式设计

现在的UI界面设计中,卡片式设计已经是一种非常常见的设计形式,它有利于信息分层和整合,划分出更加清晰的组织结构,实现复杂内容的简化处理,提高空间利用率。同时卡片式设计通常很依赖视觉元素,很强的视觉元素正是卡片式设计的一种优势,也是提升设计品质感的良方。



2、情感化设计

心理学认为,情感是人对客观事物是否满足自己的需求而产生的态度体验。只有当产品触及到用户的内心时,使他产生情感的变化,那么产品便不再冷冰冰,他透过眼前的东西,看到的是设计师为了他的使用体验,对每一个魔鬼细节的用心琢磨,人们会产生愉快、喜爱和幸福的情感。情感化设计并不是轰轰烈烈,有时候仅仅一句文案、一幅插图、一个动画就能打动人心,使用户获得愉悦的使用体验。让设计变得高级不仅仅是视觉层面,这些简单而美好的设计细节充满了积极情绪,它是满足产品的功能性和易用性之后,追求更高层次的目标。


2.1 提示性文字

语言是情感化设计最直接的利器,拟人化的对白相比冰冷的话语更能获得用户的好感,赋予产品的新的生命力。例如App那些push推送通知,因为用户每天收到的PUSH实在是太多了,早已心如止水!这个时候,你就需要一条成本低、效率高的PUSH文案,去撩动用户主子们的心。将原本对用户的打扰变成一种逗趣,让人看到会心一笑。


2.2 下拉刷新

下拉刷新是用户在App使用中经常进行的操作,常见的下拉刷新设计是图标加文字的形式,这种设计简单、直观,但毫无设计感,不能引发用户任何的情绪。


下拉刷新是一种临时状态,丰富它的设计细节不会造成与产品界面的格格不入,相反,一个富有设计感的下拉刷新设计能让产品获得用户的好感。例如uc头条在下拉刷新时会蹦出一只奔跑的小鹿,暗示正在快马加鞭的加载新内容,小鹿形象延续了品牌logo。作为资讯类产品,内容更新速度至关重要,奔跑的小鹿正好隐喻了这一点。用户也在这种快乐的情绪中对产品产生好感,瞬间就让下拉刷新变得生动有趣。


2.3 头像设计

个人中心页与用户信息密切相关,用户的虚拟形象在这里得以展现,常见的设计是一个用户头像加登陆文字的形式,这种默认的头像设计无法得到用户的认同感。

现在很多的产品已经放弃了死板的默认头像,给用户更多的选择。赋予产品一些人格魅力,可以让产品富有生命力,消除人机界面的冰冷交互,帮助用户和产品建立友好的联系。例如美团外卖和躺平,它们各自的身份都代表了产品的气质和用户的属性,让用户产生一种身份的认同感。


2.4 缺省页化解负面情绪

通常状态是,当前页面没有内容或无网络状态下出现的页面。常见的设计是图标加提示文字的形式,这种简陋的设计会给用户心理造成很大的落差,陷入负面情绪中。情感化设计在此时就可发挥巨大的作用,它通过设计手段来减轻用户在看到一个毫无内容的界面时所产生的挫败感。 设计师可发挥的空间很大,根据产品属性和品牌延展图形,结合动效或插画等情感化设计,可以很好的丰富页面内容。例如躺平的空白页呈现出一种贱萌的场景,让用户会心一笑,使产品充满了趣味性。


2.5 标签栏微动效

情感化设计变得越来越丰富,图标设计上升至可以展示动画效果。通过动效的使用,标签栏切换变得不再死板。用户在频繁切换页面时,不再觉得单调。精心设计的动态效果,能够缓解用户等待时焦躁的心情,从心理上缩短用户等待时长,让品牌更加深入人心。


2.6 模拟用户行为

如果一个产品可以模拟用户的行为,将用户代入真实的情境中,用户就会对产品产生深刻的认同感。例如「潮汐」会根据时间场景和季节变化,播放不同的背景音乐来营造氛围。雨声、雷声、风声、潮水声等让人时刻感受到身临其境的情境。


情感化设计可以拉近用户与产品之间的距离,在更深的层面体现出对人性的关怀,为人们带去情感上的愉悦和感动。洞悉用户的行为,换位思考去满足用户的需求,情感交流就产生了。例如当你截屏了一张图片,打开微信对话框时就会自动显示这张图片,提前预知了你发截图的需求。

再例如很多观众都习惯了在电影结尾等彩蛋的习惯,因为很多时候坐在影院等彩蛋却等来没有彩蛋的结果只能白白浪费了时间。在「淘票票」上购买电影票时,你会发现影片详情页会有彩蛋提醒,告知你电影是否有彩蛋且彩蛋会出现在影片的什么位置。有了这个提示信息,就不必再为了不确定的彩蛋期待浪费时间啦。


2.7 有趣的细节设计

俗话说:有趣的灵魂万里挑一,可见有趣是可以引发交流进而让人们产生积极的情绪。 在UI设计中,有些有趣的设计是隐形的,需要用户自己去发现,当用户找到这颗彩蛋时,就会获得一份喜悦和乐趣,增强用户对产品的探知欲。例如在电脑端打开B站的鬼畜区长按这个返回图标10秒左右,你会打开鬼畜区的新世界(⊙o⊙)(友情提示:记得戴上耳机或调小音量)其实长按「返回」10秒后网页下方会出现一条黑框提示「尝试输入字母,发现鬼畜秘密」。按照提示乖乖输入字母就会出现鬼畜明星划过你的屏幕!


有些有趣的设计又是显性的,目的是让用户与产品引发交流从而产生积极的情绪。例如成为优酷视频会员,不仅可以尊享丰富的影视资源,还能让自己的ID在发弹幕时使用剧集相关角色的头像。带角色扮演头像的弹幕,让发言更有剧集代入感。这个彩蛋的设置一方面强化了会员身份的尊贵感与特权性,一方面也丰富了弹幕区的多样化,可谓一举两得了。


总的来说:UI设计的“高级感”意味着在视觉层面要从细微之处着手,创造出精致富有设计感的画面;另一方面要从情感化设计出发,使用户与产品产生情感上的共鸣,获得更高层次的使用体验。


作者:印迹_ 来源:站酷

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

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

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


同理心思维,在工作和生活中有着怎样的应用?

蓝蓝设计的小编

在我们之前的文章中,同理心思维,在工作和生活中有着怎样的应用?关于产品原创和服务设计都有提到“同理心”,今天想来系统地分享一下。它不仅应用在旅行的产品和服务上,还可以应用在每天生活的方方面面,提高我们生活和工作的效率。

经验分享丨B端设计师价值体现那些事!

ui设计分享达人

提到B端设计你是否经常听到这样的声音:

  • B端不需要怎么设计,直接对着低保真出图就可以了;
  • 不要花时间在这些细枝末节上,参照Ant Design上的规范,在我的需求文档的基础上快速出图;
  • 不知道怎么跟需求团队沟通,感觉他们的设计思维太Low,聊不到一起;
  • 产品的图片设计好看才是设计师的价值,功能体验这些与设计师无关;
  • ……

刚转B端那段时间,我相信每一个设计师都曾有过这样的困惑。

设计师在实际工作的时候经常会遇到自己的设计方案与业务需求高度融合,由于B端的行业属性,缺乏完善的数据验证,常常到了最后也区分不了设计师真正的能力体现在何处,这就导致团队成员对设计师的价值认识不够全面。

那么我们B端设计的价值又该如何体现?今天本文将从4个方面进行阐述,一起来看一下吧~

01 设计价值是什么

B端设计师追求工作中如何体现价值的时候,我们得先明白B端的设计价值是什么。

那么何为B端的设计价值呢?

百度百科中设计价值的含义是:把一种计划、规划、设想通过视觉的形式传达出来的活动过程。今天本文中的B端设计价值分为视觉设计、交互体验以及业务流程优化,通过信息传达的改变,帮助客户降本增效的方式获取收益。

如果将B端整个生命流程进行剖析,我们会更好的理解其设计价值。

1.1 视觉设计吸引客户

B端产品与C端产品不同,它需要市场销售人员利用自身的能力以及资源向目标企业进行销售或者在一些大型展会上对外演示,据有关资料表明人所感知的信息的80%的信息来自视觉,这就需要对产品的功能进行视觉化展示。

因为竞争激烈,经常需要在众多竞争者中进行厮杀。在技术水平趋同的情况下,视觉起到了非常大的作用。特别是在展会期间,假如两家公司技术水平相当,演示的视觉完全碾压对手,让客户有着良好的品牌印象,这将产生快速的口碑影响,而这些将影响用户的最终决定。

1.2 交互体验留住客户

这一步需要我们理念进行升华,将视觉视角切换至体验视角。

企业是我们B端设计的重要客户,它是一个具有不同成员角色的群体组织。该组织为了工作管理的效率,会有不同的权限体系。权限的不同关注的信息也有所不同,这需要我们在设计中依据权限,考虑不同信息呈现优先级。

功能繁琐是很多同学对B端的第一印象。因其有着不同角色的参与,每个角色因为岗位职责的不同,所参与公司的业务流程存在差异,这意味着需要将不同的功能在遵循产品体验一致性的基础上汇聚在一起。

1.3 业务价值赋能客户

业务价值对于B端设计特别重要,这是企业决定购买B端产品的出发点。我们在说业务设计的时候,需围绕企业“降本增效”理念,让用户觉得有用,完成企业的管理需求。

举个例子,比如我们做了一款报销系统产品,帮助用户解决财务报销过程复杂、冗长的问题。通过前期参与用户调研,洞察业务,挖掘需求的突破点,找到当前背景下最优的业务流程解决方案。企业员工使用我们的产品后少填写信息,更快速的拿到了报销费用,平均比传统流程节省了20分钟。假设企业员工平均时薪60元,那么这个100人的企业每周可以节省1.6万的人力支出,而一年可以节省76.8万左右的支出。

02 如何体现设计价值

在了解了设计价值的体现后,我们知道B端设计的落脚点在业务价值的赋能上。当我们实实在在的解决了业务问题,而不是产品外层视觉与交互的表层需求,才能让我们的设计价值最大化,让设计得到团队其他成员的认可。接下来结合工作经验阐述下设计师可以赋能业务的点。

2.1 主动养成系统思维

很多B端设计师都是被动的接到产品经理的低保真,然后根据低保真的需求直接输出设计稿,妥妥的沦为一个画图的美工,这会使得自己在团队内部被定义为一个工具人。

那我们的发力点该是什么?借用Jesse James Garrett的理论用户体验五要素这个专业名称(表现层、框架层、结构层、范围层、战略层)。单纯的视觉设计虽然容易感知,但它却属于五要素的最顶层,价值有限,无法准确传达最底层战略层的含义,我们需要往下突破才能凸显我们的价值。

当我们在收到需求的时候,需要具备系统化思维,从底层战略开始,首先了解业务需求背后的价值,同产品经理对其业务目标后,帮助他梳理业务需求,结合用户目标以及当前的技术能力等多方因素系统性思考最优的设计解决方案。

只有发挥了我们的主观能动性,改变单点视角,具备系统化思考的能力,才能更好出结果,体现我们的价值。

2.2 更专业的组件规范

功能复杂繁琐的B端为了最大化的保证设计的一致性、提升开发的效率以及方便产品的迭代优化,组件规范是我们产品必不可少的工具。

那目前市面上的组件规范这么完善,对于我们设计师而言自身的价值是否无法体现了呢?其实它存在2个问题:

1、业务属性不符。虽然市面上存在众多的第三方组件,但由于设计的出发点不同(公司不同影响的业务属性不同),导致市面上的组件不一定与自家产品属性贴合,需要我们结合产品愿景以及业务规划进行重新设计;

2、业务特性不贴合。我们见到的很多组件只能归于基础组件,可以保证基础的设计一致性,但由于业务领域的独特性,在一些专业的场景中有着强烈的业务属性,需要我们对一些基础组件进行组合,进行更专业的沉淀,这样在实际使用的时候会更加高效。例如高级筛选、不同的场景弹框等。

2.3 赋能业务提升价值

不管B端还是C端的设计目的都是为了解决业务问题(业务目标的达成也是KPI考核的重要目标),我们始终要以业务目标作为我们的关键目标。

我们设计师需要参与整个行业生态的搭建,做到体验结构展示清晰,核心信息简洁明了,降低用户的操作门槛,通过提高体验效率(缩减时间成本),节省企业的人力成本。

对业务需求的赋能其实就是要求我们进行需求的挖掘,发现更多的业务增长点,提供当前背景下最优的解决方案。需要例如我们可以主动的进行XX调研活动,给出XX解决方案,最后给公司带来了XX业务价值。

2.4 复盘沉淀经验

项目复盘对于我们设计师的能力成长的作用是巨大的。它之所是最快的学习方式,因为它在是实践中的反馈,这种直观的经验沉淀最终会融入自己解决问题的知识体系架构,而这将进一步反辅自己的职业成长。

复盘可以让我们站在第三方角度,重新对项目流程进行全面的回顾与总结。结合不同的反馈,客观的了解当前设计在整个业务目标中的价值,这是对我们设计量化最佳途径。不单单对于个人,团队内部的其他成员也可以通过复盘加深对设计信任感的建立,他们可以看到我们的设计思路,更深层次的了解我们的设计价值。

03 写在最后

设计价值的体现建立在一朝一夕的积累上,如果想在B端设计中体现价值,一定要透过现象看本质,站在业务的角度,寻找真正的发力点,让自己参与业务赋能的同时共同成长。

作者:江鸟的设计生活

转载请注明:站酷

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


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


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

阻力设计在产品中的应用

ui设计分享达人

一.什么是阻力 ?


在百度百科的定义中,阻力是物体在流体中相对运动所产生与运动方向相反的力。自然界中存在许多类型的阻力,比如空气阻力、水流阻力,各种各样的生物因此进化出相应的身体特征去减少阻力。如下图所示,拥有流线型外形的海豚掌握独特的减少湍流摩擦阻力的游泳方法,这使其游速在某些条件下可以达到每小时 70-100km,远超现代潜艇的航速。


人类为了摆脱自然界设计的阻力,做了许许多多的努力。采用纤维模仿鲨鱼皮肤结构的鲨鱼皮泳衣能够降低 30% 的水阻,提高人类游泳速度。汽车的流线型设计减小涡旋作用或避免涡旋的形成大大地减低了空气对其的阻力。


在人类社会,人为设计的阻力也无时无刻不在。为了公共安全设立的安检、为了交通安全而严格控制不同区域的最高车速、为了社会安定而设立的法律,诸如此类的阻力都无时无刻规范着人类的行为。


类似地,对于互联网产品,用户在使用时也会被刻意地或非刻意地设计出的阻力所影响,这些阻力会阻碍用户完成目标。


二、为什么会产生阻力 ?


在认知心理学中,我们接受外部世界的刺激之后做出反应的过程中,涉及到我们如何感知、学习、推理、记忆,以及如何把意图转化为行为。人类数十万年的进化过程中,对于感知、学习、推理、记忆的神经结构已经初步进化形成,大多数的人保持着相似的认知能力和认知缺陷。用户在使用产品时感受到的阻力往往来自于设计师未能充分了解用户的认知能力,从而设计出容易导致用户犯下认知性错误的产品。以下常见的人类的认知特点影响了我们感知和获取信息的过程。


2.1 倾向于通过经验、环境和目标进行判断

对于一件新事物,我们感知它的方式通常受到三个因素影响:过往的经验、周围的环境、当下的目标。我们通过过往的经验将已知概念套用在新事物上,帮助我们理解。一旦产品界面中与用户的经验预期相悖,就会产生阻力。


2.2 缺乏耐心和思考

面对一个我们从未使用过的机器设备时,我们很少愿意耐心阅读完它的说明书再去使用它,而是自信满满的希望通过简单的摆弄和熟悉就能够了解它的使用方法。《点石成金:访客至上的Web和移动可用性设计秘笈》一书中的第一条可用性原则就是“Don't let me think(不要让我思考)”,作者认为设计者在设计一个界面时,最好能够做到让界面清晰易懂、一目了然,让用户能够不必过多的思考就能够使用它,帮助用户跨越思考过程,让用户能够轻松做出复杂的决策,减少认知压力。


2.3 心流易被打断

我们可能都经历过心流状态,当我们在极度专注地做某件事时完全沉浸其中并且非常高效,但如果意外地被打扰,会让我们很烦躁。

有关任务执行的研究文献中就曾经提到过:中断会导致错误,而且人们容易遗忘之前的位置或状态。当一个任务打断了另外一个,重新启动需要的时间会让每个任务都变慢。

打扰我们的事情可能是工作时突然的一声噪声,也可能是在使用软件时冗余的弹窗、过多的页面跳转、无意的误操作等等。界面中过多的干扰会打断用户的心流,造成用户的使用阻力。


2.4 无法摆脱的认知负荷

认知负荷理论(Cognitive Load Theory)是在 20 世纪 80 年代由澳大利亚教育学家 J.Sweller 提出,由于对人类学习认知和教学指导提供了新的理论框架,该理论在教育领域成为重要的心理学指导理论,在交互设计领域也存在着借鉴意义,理论的主要内容如下:

认知负荷是指外部信息进入个体短期记忆后中后所需要的注意力资源和记忆容量,被分类为内在认知负荷、外部认知负荷以及相关认知负荷(如下图)。当任务需要消耗的注意力和记忆容量超出学习者的极限时,就会导致认知超负荷,超出的部分将不会被学习者有效获取。

不同的呈现形式形成的外部认知负荷是不同的,一般来说,文字>图式>视听。因此,为了避免认知超负荷给用户带来的使用阻力,我们应该设法简化信息来降低内在认知负荷,通过更合理的信息可视化形式和信息架构构建降低外部认知负荷。


三、产品设计中的阻力应用


如下图,基于上述的用户的认知能力分析,合理的降低阻力,能够让用户在使用产品时效率更高,成本更低。在提高交互效率方面我们可以通过减少操作步骤、提高传达效率、减少页面跳转来达到目的。在降低交互成本方面,我们可以通过降低操作难度、减少用户思考来实现,同时通过降低认知负荷减少用户的认知负担。阻力并不是越小越好,在某些场景下,我们需要增加阻力和提高用户的使用成本,进而提升用户体验或达成产品目标。通过提高防错能力、提供安全感和营造仪式感来优化体验。通过筛选用户和内容把控社区生态。通过功能引导和歧视性策略来迎合商业目的。


四、降低阻力的应用


4.1 提高交互效率


4.1.1 减少操作步骤

类似于一个倒金字塔结构,交互流程中的每一个步骤都伴随着流失。通过以下减少操作步骤的方法,可以降低用户行为路径中的阻力。


使用合适的控件

不同的控件有着不同的应用场景,控件的选用不当会形成多余的操作步骤。我们需要深入了解每个控件的属性和应用场景才能够做到灵活运用。

举一个例子,在微信的朋友圈发布页中编辑内容后点击取消后,弹出警告框显示“不保留”和“保留”按钮,但是考虑到用户可能会误操作点击取消按钮的场景,此处应增加一个按钮让用户回到编辑状态,否则不管用户选择哪个选项都会退出发布页重新进入,从而使用户多了一步操作。下厨房的发布页就考虑到了这个问题,使用了默认有返回操作的上拉菜单控件作为提示方式,即使在误操作场景下也不会增加操作步骤。

控件方面这里就不展开讲了,大家可以通过阅读 iOS 人机交互指南和安卓 Material Design 规范来深入学习。


复杂任务移交系统

任务都存在其复杂性,当我们无法简化它时,可以考虑将复杂性移交给系统,使其代替用户操作。

比如我们可以利用用户已经在产品中填写过的信息来帮助用户填写相关信息。例如通过身份证号码自动识别出用户的生日和性别,自动为用户填充。 


预判用户行为

预判用户行为分为两种方式,第一种是在用户操作前,预判可能发生的用户行为,以建议的形式为用户提供选择,缩短用户行为路径。

比如拍摄照片后,打开微信聊天页面,微信会以气泡的形式询问用户是否要发送图片,如下图。


第二种是由于用户的认知错误进行了非目标操作时,系统提前识别引导用户进入正确的流程并完成任务。


比如支付宝聊天界面中,很多用户误以为可以直接通过输入框输入金额数后点击发送就可以转账,但实际上只会发出一条消息。支付宝贴心地在用户输入数字后外显转账功能,从而避免了用户的错误操作,如下图。


优化页面流程

不合理的信息架构和流程设计会增加用户的操作步骤。比如最新 iOS13 的信息应用,将 iOS12 原有的使用分段控件整合信息的方式改为了 iOS13 的列表形式,导致从一级页面(A)进入到二级页面(B或C)后,如果想切换信息列表还需要返回到一级页面再次选择,增加了一步操作。iOS13 的这种改动可能考虑到用户切换信息列表的频率没有那么高,希望用户专注于当前的信息列表,但是我这样的用户经常查看过滤信息列表,担心是否有重要信息被屏蔽,多出的一步操作还是给我带来不小的使用阻力。


淘宝订单模块的做法就比较合理,从一级页面(A)进入二级的任何页面(B 或 C)后,二级页面可以在标签栏互相切换,而不需要退回一级页面再次选择二级页面,从而节省了一步操作。


快捷方式

快捷方式有跳转类和功能类两种,跳转类的快捷方式可以帮助用户快速触达或回退到某个页面。

比如我们可以通过长按 iOS 应用图标调出功能的快捷方式使用,减少中间的操作步骤。淘宝可以在大多数页面通过快捷方式快速回退到首页。


功能类的快捷方式提供给用户更快捷的方式完成复杂或较多的任务,比如哔哩哔哩的一键三连。被苹果收购的应用快捷指令可以自定义系统以及第三方应用的复杂任务,并且在下次一键即可完成。


4.1.2 减少页面跳转

米哈里·契克森米哈赖在《心流:最佳体验心理学》中将“最佳体验”定义为:当我们在做某些事情时,那种全神贯注、投入忘我的状态。这种状态下,我们身心合一,甚至感觉不到时间的存在,技术水平也会达到顶峰,在这件事情完成之后我们会有一种充满能量和非常满足的感受。然而,周围突然的干扰或环境刺激都有可能打破心流体验。 

用户在使用软件产品时很少有心流体验,因为过多的页面的跳转和刷新会中断用户心流,冗余的页面层级会增加用户的理解成本和操作成本。针对这个问题,我们可以提高单个页面的动态容量,在不跳转页面的前提下使用户完成任务,为用户创造在视觉感受层面上的心流体验,下面是一些方法举例。


覆盖层

覆盖层是出现并覆盖在原页面上层的一个弹出窗口,可以由用户触发或系统自动触发,在网页端和移动端都有着广泛应用。我们通常可以将其用于输入内容、附加信息、子页面信息外显、显示操作指令等。


a.模态覆盖层

模态覆盖层一般由点击触发,通常出现后会伴随亮盒效果,使用户聚焦于覆盖层上的任务,用户操作完毕后才可以进行覆盖层外的其他操作。模态覆盖层的大小不固定,它可以是一个小型的显示警示信息的弹窗,也可能是一个篇幅很大的信息介绍,在保持上下文的情况下展示更多信息,避免了用户迷失在各种页面跳转中。

如下图,behance的首页点击一个作品后,会在当前页面上生成一个模态覆盖层供用户浏览详细的作品内容,而不是跳转到新的页面。在设计师浏览单个作品的场景中,一般只需要 1-3 分钟的浏览后就会关闭页面,模态覆盖层的方式使得打开和关闭的操作更加流畅,提高了设计师的浏览效率。



模态覆盖层在移动端同样也有着应用。如果前后两个页面存在较强的关联性,为了避免用户产生明显的割裂感,一般适合采用模态覆盖层的方式展示新页面。如下图,知乎使用模态覆盖层展示评论。


b.详情覆盖层

详情覆盖层在网页端通过光标移入触发,触发后不需要刷新页面既可显示附加信息。如下图Boss直聘中光标移入某条招聘介绍时,会触发详情覆盖层展示出次级页面的详细岗位信息,避免了跳转新页面。


嵌入层

嵌入层类似于抽屉,需要的时候将其展开,不需要的时候将其收起。与模态层不同之处在于,展开后也不会遮盖页面的其他信息和影响其他操作。嵌入层的主要的应用场景有:拓展内容、展示下级内容。

如下图,微博的发现页面的功能图标可以通过嵌入层进行拓展从而展示更多功能。


Xmind的嵌入层展示了格式的下级内容,可以在保持能够继续编辑脑图的前提下进行格式设置。


标签页

对于内容丰富的页面,希望用户能够通过尽可能少的跳转就能够触达。我们可以将列表导航、宫格导航修改为标签导航或分页的形式。


4.2 降低交互成本


4.2.1 降低操作难度

把某些操作难度大耗费成本高的操作使用新技术解决,比如人脸识别和 OCR 技术可以降低信息输入成本,不但帮助用户使用较少的时间完成任务,也降低了用户的犯错几率和使用阻力。

手势的优化也是降低操作难度的可行方法,优化的方式有增加多手势操作和加大热区。比如在 App Store 首页进入应用推荐页后,针对不同使用场景的用户提供了三种退出的方式,大大降低了操作难度。


举一个反例,得到的书籍详情页中,查看详情的按钮热区只存在于文字上,但是用户的使用习惯会误认为整块区域都可以点击,因此每次点击多次失败后才理解热区的正确位置,如果将热区扩大到整个区域就可以降低操作的难度。


想要了解更多交互手势知识可以拓展阅读: 交互手势的容错性和逻辑性 


4.2.2 减少用户思考


提供默认选择

用户的每一次思考都伴随着流失的风险。有时用户对于我们提供的选择不是很了解,会纠结和疑惑不同选择之间的区别,最终可能导致放弃选择进而流失。我们需要做的是为用户提供默认选择,同时允许用户切换到其他选择,以此来减少思考,降低使用阻力。

以手机淘宝查看相似宝贝功能改版为例,在旧版中,长按淘宝某个商品会出现「找相似」和「找同款」的按钮选项,点击后会跳转到对应页面。在新版中,长按淘宝某个商品会直接跳转到「相似宝贝」页面展示商品,同时可以通过分段控件切换为「同款宝贝」。我猜测的改版原因是,由于旧版的第二步给用户的两个选项让用户过多思考,导致第二步的流失率过高,很多用户没能体验到「相似宝贝」和「同款宝贝」功能的的特色。改版后直接将更高频的「相似宝贝」的商品页展示给用户,同时也很方便地去切换到「同款宝贝」,这种交互形式的变化让用户无需思考就可以迅速体验到功能的特色、并在熟悉后下次会继续使用。


保持一致性

我们通过过往的经验将已知概念套用在新事物上,帮助我们理解。一旦交互界面中与用户的经验预期相悖,就会产生阻力。

上文提到过,我们习惯于从过去获得的经验中获得对于当下问题的解决方案。甚至对于重复出现的问题,我们已经形成了条件反射和肌肉记忆去解决它们而不是再次思考。因此,当设计缺乏一致性时,不但会导致我们已经形成的条件反射和肌肉记忆失效,还会更容易导致错误的发生。此时我们不得不从条件反射的无意识操作转换为消耗注意力的缓慢操作,从而形成阻力。为了避免这些阻力,我们需要确保按键的一致性、交互文案的一致性、交互手势的一致性。

如下图,警告框的按钮位置一旦第一次用户经过使用熟悉后,之后用户会进行无意识地快速操作,此时如果某个警告框缺乏一致性就会导致错误的发生。


4.3 降低认知负荷


4.3.1 降低内在负荷

内在负荷是任务中包含的信息和用户固有的认知结构产生交互作品而形成的负荷。体现在界面中的信息就是文案的设计了,它也是产品设计中重要的一环。悖于用户认知结构的文案设计会带给用户理解上的阻力。一份合格的文案设计需要做到简洁易懂、重点突出、无歧义性和保持一致。


简洁易懂

如果能够做到简洁,就不要冗余。确保每一个字都有其存在的意义。大部分用户会对冗余的大段文字产生畏难情绪,从而放弃阅读。词汇的选择要符合用户人群的认知范围,不应该使用用户难以理解的各种黑话和行话。在此基础上,如果能够通过形象生动的修辞手法帮助用户快速理解,就更胜一筹了,比如针对垃圾分类,一些网友发明的快速记忆方法就是一个很不错的例子,如下图。


重点突出

一段文案中可能有些是重点内容,有些是解释内容,并不是所有内容都需要让用户阅读并理解。大部分情况下只需要突出重点内容告知用户,能够引导用户下一步行动就足够了,至于其他解释性或者不重要的内容弱化即可。

针对前两条规则,我们以 12306 以及飞猪的学生票和成人票的选择弹窗作为案例进行对比。如下图所示,每一次购买火车票的过程中,当我遇到 12306 的这个弹窗,都会让我用不少时间去进行理解和思考。首先在个人看来,“温馨提示”在任何弹窗上都是占用空间没有实际意义的存在,如果没有标题,直接展示正文即可;其次,正文的内容重点信息不突出,其中有一个句子“请凭购票时所使用的有效身份证件原件和附有学生火车票优惠卡的有效学生证原件换票乘车。”过于长和复杂,很考验用户的短期记忆和耐心;最后,按钮文字没有提供操作路径,用户想知道如何操作需要先阅读完上面的文案。


飞猪的案例就避免了 12306 所存在的问题,做到了简洁易懂和重点突出,如下图。


表意清晰

表意清晰指的是文案传达的含义明确、不含糊、不存在歧义。下图是一款社交软件的警告框文案,文案的歧义让用户疑惑“取消”按钮是取消约会还是取消本次操作。经过修改后歧义性就消失了。


保持一致

同一个软件系统中,表达相同概念的用词一致。模块中的相似文案,语法表达方式一致。上文提到我们人类很少愿意思考的特点,一旦一个软件系统出现表示同一个概念,但是名称不一样的词语,我们大脑就不得不开始被迫思考:“这个词语和之前那个很接近但是有些不一样,它们是同一个东西吗?”这个思考过程从而形成了不小的阻力。《认知与设计》一书中提到一条规则:“同一个名称,就是同一个东西;不同的名称,就是不同的东西。”因此,一致性是撰写交互文案的一条重要原则。


4.3.2 降低外在负荷

当信息的内在负荷不能再进行降低时,通过改变信息的呈现方式、结构设计和逻辑安排来将复杂信息可视化,降低外在负荷,使信息更容易被用户接受和理解。这里涉及到信息可视化这个课题,这里就不做展开了。



五、提高阻力的应用


阻力并不是越小越好,在某些场景下,我们需要提高阻力提高用户的使用成本达成某些目的。


5.1 优化交互体验


5.1.1 提高防错能力

类似于马路上的减速带,在车辆进入需要低速行驶区域时进行阻碍。我们通常在用户容易犯错的操作前设定一定的阻力,减缓用户的操作的节奏,达到防错的目的。如下图,在蓝湖中如果要删除一个项目,就需要先输入项目的名称后才能成功删除,通过增加阻力提高了防错能力。



5.1.2 提供安全感

针对涉及到用户隐私的敏感操作,通过设计特定的交互流程让用户体验到安全感,比如通过增加指纹、面部识别等操作降低用户对于危险和风险的担忧,增加用户的确定感和可控感。


5.1.3 建立仪式感

生活中大部分的时刻都是单调乏味的,我们需要使用各种仪式点缀它。与此类似,在用户的操作行为路径里增加一些不必要的过程,也能成为用户体验旅程中的点睛之笔。

就像多年前坚果手机一代的包装,设计师别具匠心的将包装设计为一次充满着童趣的体验,虽然拆包装的过程时间增加,但是给予用户似曾相识的场景是不可替代的。


看似使用起来费力的微信摇一摇,可以加强用户的参与感和仪式感,就仿佛融合着一种占卜未知世界的神秘体验,这种感觉是点击无法给予的。当初支付宝基于 LBS 和 AR 技术推出了 AR 实景红包,众多用户不惜跨越“千山万水”收集线索图去寻找红包,并乐此不疲。尽管增加了操作成本和使用阻力,但是这些富于互动性和趣味性的体验带给用户的仪式感也是不可多得的。


5.2 维护社区生态

用户的属性和其产生的内容质量对于产品的社区生态建设有很大的影响。对于社区的认同感越高的核心用户越多,内容质量就越高,进而社区对潜在用户的吸引力就越大。一旦一些修养低或居心不良的用户大量涌入社区,就会同时带来大量的负面内容,造成对其他用户的干扰,甚至导致他们大量流失。因此,为了让一个产品的社区生态能够健康发展,我们需要采取一些筛选方法来设置阻力,以此来筛选出对平台有益的用户和内容。


5.2.1 筛选用户


邀请制

很多产品在冷启动阶段,为了避免垃圾用户和提高社区质量,会设立邀请制来控制用户来源,然后根据现有用户的使用反馈进行可控的优化迭代。这种方式可以有效地降低初期的运营成本,保持服务器稳定,甚至可以制造一种供不应求的感觉,获得更多的讨论度。


价格门槛

网络骗局在社交类产品屡见不鲜,婚恋类产品更是重灾区。很多推行高端婚恋或高端社交的产品为了保证用户质量,不仅严防死守,还会设立价格门槛,不付费直接无法使用,这在现今已经广泛推行的基础服务免费、增值服务收费的收费模式中很少见,但是确实有效地进行了用户筛选。



测试门槛

通过设置测试题将用户分成不同的群体,进行具有针对性的权限设置。比如 B 站转正时需要完成具有社区特色的晋级考试,需要花费的时间成本比较高,通过这种方式筛选出真正认同 B 站社区文化的优质用户,给予这些用户更多在社区中互动的权限,从而也大量减少了低质量用户的负面行为。

上述的三种用户筛选方法是否适用,需要考虑的产品属性。不同维度的筛选用户的方法还有很多,这里只是简单举例。


5.2.2 筛选内容

不同的内容形式对于社区的价值是不一样,我们可以通过一定的方式引导用户生产对于社区建设更有利的内容。比如微信发布朋友圈时并没有直接给用户提供纯文字信息的输入方式,如果用户想要发布纯文字内容,需要长按发布按钮才能进入相应界面。原因是微信官方认为相对于纯文字内容,附有图片的内容对于其他用户更具有吸引力,通过阻碍用户使用纯文字发布、鼓励用户使用配图发布使得整体的朋友圈社区的内容能够吸引用户浏览更长的时间,从而也可以使朋友圈广告得到更多的曝光。


5.3 迎合商业目标

有时产品的商业目标和用户目标存在一定冲突时,损失一定的用户体验满足商业目标是不得不进行的选择,这需要我们进行合理的平衡。


5.3.1 功能引导

为了迎合商业目标,我们有时需要针对一些功能设置一定操作阻力将其进行弱化,然后引导用户去使用我们希望其使用的一些特定功能。这类阻力设计最为常见,比如通过强化按钮对比进行功能的引导,如下图。



5.3.2 歧视性策略

歧视性策略常见的的应用方式就是通过 VIP 制度或等级制度将用户进行身份区分,针对身份等级低的用户设置使用阻力,以便于引导其投入更多精力和资源,或者通过此方式给予高等级用户优越感,刺激其进行分享炫耀。

16 年发布的支付宝生活圈就是一个很好的案例,芝麻信用 750 分以上才可以使用的歧视性策略非常简单粗暴。很多达标的土豪用户在朋友圈炫耀生活圈的截图,等待朋友们的膜拜点赞。互联网产品中,每增加一个动作,用户都会呈几何级流失,但是支付宝的歧视性策略给了用户巨大的动力完成了截图、保存、打开微信、分享照片等一系列动作,帮助支付宝生活圈实现了刷屏传播的效果。


六、总结


虽然让用户畅通无阻地使用产品是我们的目标,但是有时还需要我们合理地限制。不同的使用场景和商业目的共同影响着设计策略。在如今互联网产品越来越趋于存量竞争的态势下,我们更多的工作开始专注于产品的优化。希望本文能够提供相应的思路,助力你在产品优化探索中找到可行的切入点。


参考资料:

《微交互:细节设计成就卓越产品》作者:Dan Saffer

《心流》作者:米哈里·契克森米哈赖

《web界面设计》作者:Bill Scott / Theresa Neil

《认知与设计》作者:Jeff Johnson

《阻力设计:探索质量和数据间的平衡点》IXDC 演讲,作者:王毓莹

《点石成金》作者: 史蒂夫·克鲁克

《设计心理学2:管理复杂》作者:唐纳德·A·诺曼



作者:Ballen成明

转载请注明:站酷

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


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


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


面向Z世代的年轻化体验设计探索

ui设计分享达人

Wonder是一款面向Z世代群体信息获取的探索型产品,虽然我们在产品探索的路上没能走的更远,但作为设计师非常珍视参加创新产品探索的机会,创新本身就是一种积累,在产品搭建过程中深入了解用户需求,设计上自我突破、追求极致。以下历程和设计经验想与大家分享。



///

了解用户

首先从了解我们的年轻用户开始。通过桌面、田野用户调研,我们了解到,在信息内容消费方面,Z世代群体更偏向于个性化、多元化、高颜值的信息内容体验。再进一步拆解诉求,我们发现用户大致可以分为效率型及消遣型两大类,效率型用户偏向于便捷易用、信息聚焦的消费形式,而消遣型用户更期望有丰富的内容让他们逛起来、刷起来。针对两大类不同的用户诉求,我们进行了区隔化设计。



///

模式切换,实现多元场域承载

在框架搭建上,我们利用面板可变性和固定性两个维度来定义框架,首先是首页场景面板,它具有可变性,可以承载不同的内容例如搜索、信息流场景。再次,定义了位居二层的搜索面板,作为核心场景,具有固定性,是恒定不变的功能位于可变场景之上。最后,两处功能区具有固定性,头部承载基础功能,底部承载两大消费场景。最终将框架转化为具体设计,分别承载了丰富的兴趣内容分发场景和简单的聚焦场景。



搜索框位于内容之上跨内容恒定存在,形成了搜索框置底的首页双层面板交互形式,和满足首页逛起来的内容消费场景、聚焦搜索的简单搜索场景来满足用户的不同诉求。加上两处固定的功能区域,头部基础功能,底部bar承载左效率、右娱乐两大内容场景,构成了差异化首页框架。冠以兴趣内容躁模式、简单搜索禅模式姓名,炫酷的交互手势切换模式加持,最终构成了首页双模式、可承载多元场景的框架设计。



同时,头部留有Doodle品牌区域,在丰富的节日运营活动中,柠檬精通过不同的装扮和道具,和用户进行互动



///

深度解读用户、体验再升级

随着我们对用户的深入了解,有了更细致的解读。根据用户调研我们发现Z世代群体更倾向于基于兴趣圈层的信息消费形式,愿意为兴趣买单、寻找同好,并致力于为兴趣圈层贡献价值。因此我们对整体的框架和布局进行了体验升级探索。



///

统一框架,兴趣内容开屏即得

我们将用户诉求拆解为可落实的设计目标,并聚焦「体验统一」「快速筛选」「特色感知」「重点突出」4个核心设计目标。框架层面,我们依托星球形象设计,运用头部循环交互框架形式,使内容直观清晰呈现,不同星球凸显不同内容特点,又保证了6大内容体验统一。



底bar定义为基础功能承载,语音核心能力固定不变,消息作为社区互动重要基础能力、个人中心便捷用户快速回访社区资产。在页面的架构上,根据金刚位运营模块特性,将模块设计为可组合、可灵活配置,以支持随时更替的运营诉求。



对于重点互动场景,运用动态入口设计吸引互动,并在二级页打造全场景的沉浸式互动氛围。



最后,将UGC无限流至于信息层级底部,打造纵向浏览、逛内容体验。



///

别致年轻化设计语言构建

在项目正式启动前,组织脑暴会开展年轻化设计语言提炼,结合用户研究团队调研报告,通过Image board建立设计理念和模型表达,通过收集、归纳、提炼、总结路径,提炼设计语言基因。

圈定关键页面、核心控件开展带有年轻化设计语言基因的方案探索,并扩大覆盖到重点页面验证、聚焦、收拢,最终确定产品的年轻化设计语言。


















柠檬精是Wonder App的官方IP形象。取自「我酸了」流行语,以柠檬为基础原型,设计保留了柠檬最突出的特征,色彩以品牌色—柠檬黄为主色调,整体造型拟人化、年轻化以增强形象的延展性及实体化后的可动性。IP形象与业务属性及产品气质也较吻合,同用户互动场景应用打造差异化记忆点。



不断完善形象在各种场景中的应用及延展,制作系列表情,用更多元的表现形式将柠檬精的性格描绘得更加丰满,为品牌注入更多亲和有趣的情感,拉近与用户的距离。



伴随产品兴趣圈层的升级,3D柠檬精也结合星球概念,差异化造型与兴趣内容对应,去赋予不同兴趣星球特色,帮助年轻用户找到社区、身份归属感,增强人与社区链接感。



大星球塑造中,通过不同星球的特色元素构建场景,同用户产生行为共鸣,吸引用户进入圈子。



///

精细化概念文案突出“星球”场景感



///

写在最后

设计一定不是“拍脑袋”的想象,更多是基于用户特性、诉求、使用场景的一步步推导、演进的结果。设计也并不局限于最终的界面效果呈现,整个产出过程都在设计,也都有设计发挥的空间。记得在日常的设计中多挖掘用户诉求、洞察机会点,并抱着提供解决方案而非一次性结果的视角,动态的、可延展的看待、设计事物。 

随暂别应用市场,依然感谢大家的阅读,期望这趟年轻化设计之旅能够带给设计师们一些启发。期待看到更多有趣的、创新的、别出心裁的年轻化设计。

作者:百度MEUX

转载请注明:站酷

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


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


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



灵动岛,是创新还是妥协?

ui设计分享达人

01

什么是灵动岛(Dynamic island)

2022苹果秋季新品发布会,备受关注的新一代iPhone如期而至,此次发布会最大的亮点是iPhone 14 Pro系列一改之前「刘海」设计,首次采用了「药丸」挖孔屏。虽然「药丸」在安卓阵营中并不是什么新鲜玩意,但一向以创新著称的苹果还是玩出了不一样的花样,带来了全新的交互方式,模糊了硬件和软件的界限,通过实时变化显示重要的提醒、通知以及简单的功能操作,苹果把这一创新称之为灵动岛(Dynamic island)。



02

灵动岛能做什么 / 不能做什么

灵动岛其实可以简单的理解为基于前置摄像头区域拓展的消息通知和快捷操作的新交互方式。

来电

当有来电时,灵动岛会发生变化,并在后台打电话时显示通话时间和声音波纹。



音乐

有点类似于锁屏后的音乐功能操作,保留了基本的播放、暂停、前进、后退等功能。



Airpods

连接AirPods后,AirPods的型号外观和当前电量会一起显示。



导航

显示导航方向和距离,并且能够在适当的时候放大显示更多导航信息。



Face ID

以前Face ID认证会显示在屏幕中间,现在集成于灵动岛的扩展功能之中。



充电

当充电时,会显示充电的状态以及当前电量百分比。



当然,目前除了官方展示的这些功能以外,还会有更多的应用方式,在此不一一列举。但灵动岛也并不是万能的,例如会存在以下的局限性:

重度使用场景

从官方给出的样例来看,灵动岛更多的是承担了消息通知和提醒的作用,并不适用于重度使用和复杂交互等场景,例如消息聊天、刷短视频、买卖交易等等。

过于复杂的图形

受限于前置物理摄像头,灵动岛这个区域并不能显示过于复杂的图形,并需要避开摄像头区域,因为该区域是不能显示任何图像的。



软硬件的边界

灵动岛的实际效果并不会像宣传图中那样好,特别是在反光强烈的户外。摄像头的挖孔清晰可见的,即使是在黑色不发光的OLED屏幕上,软件和硬件的界限还是能够明显区分。



03

对于灵动岛的各方反应

新事物的出现,总会伴随着支持和反对两种声音,此次灵动岛的创新交互,自然也是褒贬不一,还需要经受时间的考验,因为即使是苹果这样的公司也难免会犯错,比如3D Touch、MacBook上的Touch bar等。

支持方认为「灵动岛是继刘海屏之后的又一个成功设计,甚至会超越刘海屏,更受欢迎」。

「灵动岛的设计非常讨巧,同时也给挖孔屏带来了更多的想象空间」。

而反对方的理由也十分充分,首先是罗永浩第一时间发表了自己的观点,表面上是硬赞这个创新,但实则是讽刺了这样多此一举的方式,「先在脸上涂屎,然后再把屎的颜色调整得跟粉底差不多」



很多的舆论认为,灵动岛的创新是苹果的一种无奈和妥协,因为自从第一代iPhone革新性的使用触摸屏之后,十多年以来手机在工业设计方面并没有太多的创新,大部分厂家是在屏幕分辨率,后盖材质,摄像头像素上面做文章,而苹果作为一个工业设计创新的公司,也只能通过后置摄像头模组的排列来维持每一代iPhone的变化。所以此次灵动岛的创新,被认为是工业设计乏力之后推动交互设计创新的无奈之举。



但无论支持还是反对,前置摄像头挖孔屏终究是一个过渡性的方案,最终会被全面屏所替代,而在这个过渡时期,很明显苹果的解决思路与国内的绝大多数厂商都不一样。

04

为什么国产手机不做灵动岛

国产手机的前置摄像头解决方案除了「刘海」以外,单摄像头「圆孔」和双摄像头「药丸」设计都已经非常成熟,但是为什么经过这么多年的迭代,依然没有创新呢?

思维方式的差异

国产手机厂商的思路跟苹果相反,希望尽可能的把前置摄像头做得越小越好,甚至头部的厂商尝试探索升降摄像头和屏下摄像头的解决方案,目的就是为了把前置摄像头隐藏。而苹果的思路则是,既然现阶段的技术没有办法把前置摄像头隐藏,那么干脆就以此为基础,把这个区域运用到极致。

缺少创新和引领者

似乎国内的用户更关心的是电量是否持久、屏幕刷新率高不高、拍照功能强不强大等问题,秉持着「人民需要什么,我们就造什么」的成功理念,各大厂商也开始在这些方面内卷,从60Hz到120Hz刷新率,从千万像素到一亿像素,从莱卡加持到一英寸大底传感器... 大家都在做从1到100的事情,而很少有关注从0到1,因为这样做的性价比的确不高。



市场的接受和认可程度

当刘海屏第一次出现的时候,很多用户都在吐槽,其中也包括很多苹果的忠实用户,宁愿买iphone8P也不愿意使用刘海屏的iPhone X。而经过一两年的审美教育以及国产手机的跟风之后,才慢慢的被更多用户所接受。因此国内的厂商很难有信心通过一己之力去改变用户习惯,并赢得市场的认可。我相信,苹果发布以后,各大厂商已经在积极的学习和模仿,新的一轮内卷即将拉开帷幕。

即便如此,国产厂商也并不是完全没有在前置摄像头的区域努力尝试过。例如魅族曾经在前置摄像头上显示当前电量,称之为「环形电量」,并尽可能的使其与状态栏的其它信息融为一体。



荣耀的通话时间胶囊和自拍胶囊,都以前置摄像头为基础做延展,可以看得出在想尽办法的规避前置摄像头所带来的不好体验。




虽然VIVO的原子通知不是围绕前置摄像头区域拓展,但从效果和想法来看,也与灵动岛的概念比较类似。



HTC曾经出过一款HTC U Ultra,当然那时候还没有全面屏的概念,所以HTC把它称之为副屏,可以显示消息通知、音乐播放操作、App快捷入口等等。



除此以外,几乎所有刘海屏的手机都有把刘海隐藏起来的功能。



05

对设计师的影响

灵动岛的出现,对 iOS 原本通知、交互、卡片、弹窗等一系列交互规范进行了解构再重做,就好比「刘海屏」首次出现的时候,需要设计师对全新交互逻辑、卡片行为、动画等重新适配。那么对于「灵动岛」我想需要考虑的是这几个方面。

新的交互方式

之所以叫灵动岛,就是因为它是「灵动」的,拥有不同的状态变化,以适应各种功能提示和操作。设计师在使用这个功能的时候,需要充分考虑其场景,恰如其分的给予提醒而不给用户带来过多的打扰。

新的容器

不同形态的容器可以装载不同的内容,相比于以往常规的通知提醒,新的容器可以展示更多的信息,甚至是简单的功能操作。在提出解决方案的时候,留给设计师更多的想象空间。

新的表达方式

灵动岛相当于一个永远在桌面上的岛屿,比任何App的优先级都要高,所以会成为各个应用的必争之地,使用一种好的表达方式,必然能够达到事半功倍的效果,因此也是考验设计师在寸土寸金的区域中,通过视觉化手段表达的能力。

最后,我想苹果的初衷是为了更好的用户体验,消除一部分用户对于挖孔屏的焦虑,如果能够真正的站在用户的角度、克制的去使用新的交互方式,会得到用户的喜爱和市场的认可。

我认为灵动岛既是一种创新也是一种妥协,对于工业设计硬件创新乏力的妥协,更是对技术发展的妥协。我也相信,真正的全面屏时代终究会到来,期待那个时候苹果再一次给我们带来真正意义上的,里程碑式的,创新!

作者:捡蘑菇的人

转载请注明:站酷

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


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


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



潮流是个轮回,这些UI设计趋势你怎么看?

ui设计分享达人

潮流是个轮回,不光我们看的衣服、化妆品、哪怕是那些短视频,同样的事情也发生在用户界面(UI)设计中。从模仿现实世界物体的界面到没有任何修饰的极简界面,不同的风格优缺点各异。只有学习并了解了历史上曾流行的趋势,你才能进行新的尝试。这对于创新、推动设计行业的发展和提升你自己的设计能力都是至关重要的。下面本文将介绍十大UI设计趋势,对每位设计师来说都值得一看。

1.拟态主义

拟态主义是用来设计最早的图形用户界面的视觉方法。在拟态主义中,设计元素模仿现实世界中的对应物来连接物理世界和数字世界。最著名的例子是回收站的图标,它模仿了现实生活中的回收站。

当个人电脑或智能手机首次出现时,设计师需要将它们设计成第一次使用的人也能理解的样子。因此,拟态主义设计将与现实世界的相似性置于视觉吸引力之上,以确保直观的用户体验。

苹果公司的iOS操作系统便在早期版本中于用户界面上大量使用了拟态设计。

早期苹果app和软件的视觉界面模仿现实生活中的物体,就算是首次使用的用户也能一眼就看明白

2010年初之前,拟态设计是行业标准。这种设计美学大大方便了人们过渡到数字平台。但随着越来越多的人成为数字原住民,缺乏想象的设计元素对用户体验而言变得不再那么重要。此外,因为高度拟真,所以拟态主义设计元素需要大量的技术能力。人们数字素养的提升为新的UI设计风格兴起铺平了道路。

2.极简主义

受极简主义艺术运动的影响,UI设计领域也开始刮起极简的风潮。极简主义的主要原则是 “少即是多”。极简主义并不是空洞和模糊的设计。它推崇的是 “少即时多”–正如美国作家Joshua Becker的书名所言–意味着要简化视觉空间,换句话说,使用更少的元素,以便能够突显最重要的东西。

极简主义界面优雅简洁,注重每个元素的功能,重视负空间和大胆的颜色、字体之间的组合。总的来说,极简主义的用户界面可以非常实用,因为没有任何装饰性元素。因此–如果设计得好的话–用户会有一个高度直观的设计之旅。极简主义界面往往拥有一种优雅而精致的视觉吸引力。

作家Alan Trotter的网站采用了极简UI设计,用户需点击突出显示的单词来查看隐藏内容

极简主义于20世纪50年代末在纽约兴起,其主要特征是秩序、简单和和谐。极简主义的 “少即是多 “原则后来被德国工业设计师迪特尔-拉姆斯改编为 “少而精 “,列为他的“好设计原则”之一。也有人解释这一原则为:”好的设计是尽可能少的设计”。

“一个形状、一个体积、一种颜色、一个表面,它们是独立存在的,不应该沦为整体的一部分。形状和材料不应该被它们所处的环境所改变。” – 唐纳德-贾德,美国艺术家

除了极简主义本身,许多其他的UI设计趋势–包括扁平化设计–都或多或少地遵循了极简主义的原则。

3.扁平化设计

扁平化设计是一种以简约为中心的UI设计美学,它将界面设计的范式从现实中的物体转移到元素的图解简化。这种UI趋势代表了一种实质性的技术优势,尤其是在移动设备上,因为它提升了设备的加载速度。扁平化设计使用极简的方式处理UI元素,不添加任何阴影或装饰物。在个性和视觉吸引力上,扁平化设计很大程度依赖于明亮的色彩和高超的字体排版技术。例如,设计师会寻找本身便足够有趣的字体,但它们的笔画要均匀,并且符合极简美学的风格。

扁平化设计在2012年随着Windows 8、苹果的iOS 7和谷歌的Material Design的发布而获得关注。然而,在某种程度上,扁平化设计缺乏视觉功能可见性,用户有可能不知道哪些元素可以互动。

iOS 7控制中心采取扁平化设计

2.0版本的扁平化设计诞生后,其视觉功能可见性和使用性得到提升。扁平化设计开始利用微妙的阴影或颜色变化来突出互动元素,向用户表明如何与设计进行互动。这些微妙的变化有助于增加深度和维度,从而提高使用性,扁平化设计的视觉效果干净整洁不杂乱。

4.包豪斯主义

包豪斯界面设计风格围绕几何图形如半圆形、圆形、矩形、三角形等展开,采用各种创新字体和非干扰、非功能性的细节。这种设计风格依赖于设计元素本身:线条、形状、颜色。包豪斯主义的特点为抽象的形状和平衡的形式。

1919年,德国魏玛开始了包豪斯艺术和设计运动,从而衍伸出了包豪斯用户界面设计风格。包豪斯艺术和设计运动通过将手工业与艺术相结合,在艺术与工业之间架起了一座桥梁。包豪斯运动的基本原则是 “形式服从功能”。这一原则深刻地影响了后世的设计。根据这一原则,从物体的预期功能或目的出发,设计师设计出简单的几何图形,从而制造出一种极简主义美学。它倡导的是一种几何的、抽象的风格,没有什么情感或情绪,也没有什么历史元素。

包豪斯风格下的数字界面有一种优雅、现代和简洁的视觉吸引力。

“将包豪斯原则运用到现代产品设计中,意味着要勇于面对纷杂的质疑。”- Melanie Daveid,用户体验设计师和艺术总监,以及Adobe Live主持人

5.深色模式

深色模式的用户界面令浅色文本位于深色背景上。这种颜色方案减少了设备屏幕发出的亮度,一些研究指出,它有助于通过减少眼睛的疲劳来改善人体视觉。这种能潜在改善眼睛疲劳的功能对于用户需要阅读大量内容的界面特别有帮助。而且深色模式在一定程度上有助于节约电量。深色主题界面的诞生是对暗字明底方案的反击,后者模拟了墨字白纸的外观。

深色模式趋势出现在2016年,当时Twitter试验了一个暗色底的颜色方案。不过,在深色背景上使用亮色文本的操作其实早已出现–比如说《黑客帝国》电影中深色屏幕上的绿色数字。但深色模式真正流行开来是得益于苹果。苹果公司在iOS 13的更新中发布了深色模式选项,从那以后,深色模式成为许多界面中的常见选项,用户可以在浅色和深色界面之间进行选择。

深色模式vs浅色模式

深色模式的用户界面具有鲜明、时尚和现代的特征,对眼睛更加温和。因此,深色模式的流行可能缘于解决用户用眼过度问题的需要。如果你的产品需要用户长时间观看屏幕,不妨考虑添加一个深色模式选项。

就拿深色模式来说现在身边很多朋友都在用,所以我们以前不喜欢的,在未来的某一天还是会重新爱上的。

作者:马克笔设计留学

转载请注明:站酷

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


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


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



我拼命问清楚了这些问题,结果开发却把我拉黑了!

seo达人

一、代码更容易实现线性渐变、径向渐变、角度渐变。网格渐变往往需要我们切图

设计中,我们通常用的渐变有:线性渐变、径向渐变、角度渐变、网格渐变。

图片
在这当中,代码实现线性渐变、径向渐变、角度渐变 相对来说要简单一些,而网格渐变则需要消耗更多的开发精力。我们也不会在这上面去增加开发工作量。
所以,在我们输出设计稿给开发的时候,有网格渐变的部分直接切给开发。比如下面设计稿上的渐变背景色:

图片

 

二、文字能不用透明度就不用透明度,直接给原始的16 进制色值

16 进制色就是在开发中设定颜色的代码,每个颜色都有对应的 16 进制色,如 #000000 是黑色,#FFFFFF 是白色。

比如我在调这个文字颜色的时候可以用 #000000 40% 的透明度,也可以直接用 #999999 这个色,这两个呈现的颜色没有任何区别。

图片

但是交给开发写的话,第一种除了要写 #000000 的黑色之外,还要写一串 Alpha 透明值,这样做会更消耗性能,且在不同屏幕分辨率、不同操作系统下,所实现的透明效果也会有偏差。

所以,在这种非必要情况下,样式可以用不带透明度实现的话,就不要带。

 

三、切一整张大图,可能会发生拉伸变形或是图片被裁剪的问题

如果是一整张的切下来,会导致不同尺寸的手机把切图拉伸变形,或者会裁剪多出比例的部分。

比如我们切的这张启动页大小为 375*812 的三倍图,这张图在 iphone13 mini(375*812px)和安卓(360*640px)上等比展示就会产生不同的效果——

安卓屏就会被裁切掉一些(展示图片来自网络)。

图片

如何保证在这种情形下,启动页的图片可以适配不同尺寸的屏幕呢?

我们可以将上下分开切,让开发分别定上面插画和logo的位置,以此保证他俩都能完整展示。

将一张图切成这两张:

图片

设定插画距离头部是 30px,底部 logo 距离底部是 30px

图片

这样在其他屏幕上,也是依照「插画距离头部30px,底部 logo 距离底部是 30px」这个规则来写,就能保证这张图上的所有内容不被裁切了!

图片

 

四、不要将切片与 icon 贴在一起

一些初次切 icon 的同学会这么做↓

图片

这么做会导致以下几点问题:

· 如果 icon 有 0.5 像素点,那么贴边切很可能会被裁掉一些;
· icon 的高矮长宽不一,但开发会全按一个尺寸来写,导致 icon 被拉伸或压缩;
· icon 设计规范不一致,出现各式各样的尺寸。

所以我们都会给一套的 icon 固定一个同样大小、正方形的框,以此来规避掉以上出现的问题。

图片

 

五、通知icon与带数量的小红点不用切在一起

我们在做通知消息的时候右上角会有消息数量的标识:

图片

当数字分别为个位数、十位数、99+ 时,红色底板的宽度会根据数字长短发生变换:

图片

我们不需要每种情况的小红点都切一遍,只需要定好数字在红底里的左右间距,让开发根据数字长短做自适应即可。

图片

所以我们提供切图只需要切铃铛部分。

图片

 

总结

以上就是我在实际项目中遇到的切图问题了,切图是一项靠经验积累的UI必修课,希望你在阅读之后留个印象,以后遇到类似问题也有了解决之法。

欢迎在评论区分享你与开发对接所遇到的那些事儿~

 

作者:花菜

转载请注明:学UI网》我拼命问清楚了这些问题,结果开发却把我拉黑了!

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


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


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


职场中要学会拒绝

seo达人

一、拒绝拿来主义

相信大家都遇到过同事或者朋友索要源文件的情况,面对这种拿来主义我们要学会拒绝。工作对接中非必要不提供源文件给无关联的同事,团队项目文件流传出去也许就是这个因素。

图片

要学会拒绝,源文件也是我们的劳动付出,不要把自己的劳动果实提供给别人,助长他误导面试官等情况发生。工作中的对接需要验证人员关联性,团队文件流传出去要先向直属领导汇报,源文件也是属于团队的资产。

图片

拒绝拿来主义,不要被“不好意思”拒绝这种性格所束缚,劳动果实需要付出的关联人员才能共享。

 

二、拒绝不公平待遇

在职场中我们都在不断努力发挥自己的价值,希望以此获得更好的晋升机会和待遇回报。如果只有付出没有与之匹配的劳动回报,只会让员工失去奋斗的意志,我们也是会拒绝不公平待遇的。

图片

根据自己的专业能力和经验值,我们要分析出自己的行业价值,无论是求职谈薪还是在职涨薪,我们都要尽量追求接近公平。如果当时妥协了,就得确保自己不会有心理情绪,不然不仅工作不顺心,也会影响自身专业的提升。

拒绝不公平待遇需要有拒绝的勇气和专业实力,专业能力的提升和作品的沉淀至关重要,只有这样才能拥有更多的选择权。

图片

 

三、拒绝长期职责偏离

在职场中偶尔配合完成非本职工作的内容实属正常,但是仅限于偶尔配合。如果长期偏离自己的专业职责范围,也是得不偿失的,要根据自己的职场计划学会拒绝。

专业能力的提升离不开项目经验的积累,如果长期处于偏离状态,会影响我们的经验沉淀,进而影响专业能力的晋升。如果在一个团队长期干非专业范围的工作,我们要学会拒绝,选择更适合自己的团队。不要受温水煮青蛙式的工作环境而影响,最终使得自己杂而不精,想要跳槽到更好的团队就会变得非常困难。

图片

 

四、拒绝违规设计

工作中的设计任务虽然我们无法改变,但是也要留意自己的设计底线,也是设计范围的法律底线。不要稀里糊涂的干活儿,设计也是要有所为而有所不为,一旦触碰底线设计师也是难逃追责。

如果不幸遇到这样的团队,就要早点离职,不要被高待遇所诱惑。拒绝违规设计,做一名懂法的设计师。

图片

 

五、拒绝同事的“任务”

这个问题就是我们一个老学员咨询我的问题,事情的大概意思就是领导分别给她和同事安排了工作,同事觉得她的内容部分不是很重要,让她随便做做就可以,剩余的时间来帮自己完成任务。遇到这个问题她很苦恼,自己的任务还有别的都还没有完成,是否要答应同事的要求。

遇到这个情况我们要第一时间拒绝,回复的话术是我得先完成自己的任务,如果到时候有时间再根据情况看。职场中没有随便做做这个说法,领导安排的任务就要发挥自己最佳的能力去做到极致,展示出自己在团队里面存在的价值。如果本职工作都没有做完,就不要去当职场“好人”,到时候成就了别人,结果自己的事情一塌糊涂。只有在完成自己职责内容之后,再询问领导有没有其他安排,如果没有其他安排的情况下我们再考虑援助同事的任务。

图片

职场中每个角色都有自己应该承担的责任和输出,所谓的能者多劳是在量力而行的基础上,如果自己的职责都没有做到极致,就应该优先保障自己的输出质量。要学会拒绝同事的“任务”,除非这个任务是属于共同的任务,再结合优先级去进行排序。

图片

 

六、拒绝长期低质量输出

在职场中不只是为了获得报酬,高质量的输出不仅成就了项目,也是成就了自己的专业沉淀。如果是自己没有摆正态度,就要及时调整心态,用最好的输出不断提高自己的职场价值。

图片

如果是团队现状如此,整天干着没有质量的输出,久而久之就会让自己失去专业优势。到时候想要晋升或者跳槽的时候,就会发现自己的专业能力差距甚远,还没有一份像样的作品集。

职场中要理性的分析自己的现状,拒绝长期低质量输出,这样只是在耗费自己的青春。想要不断提升自己,就要不断完成具备挑战的任务,只有项目质量越高,我们才能学习并掌握更优秀的经验。

图片

 

七、拒绝长期无所事事

养老式的职场生活估计大家很羡慕,但是真的置身于这样的团队中,估计距离淘汰也只是时间问题了。

在团队中如果长期无所事事,不仅会荒废自己的设计执行能力,也会让自己的心态变得消极。如果遇到高强度的工作出现,就会想要去逃避,这是一个非常危险的信号。我们不能长期没有输出,这样的职场环境我们要及时拒绝,青春的我们不是为了享乐,现在不去磨练自己,未来就会被职场所抛弃。

图片

 

八、拒绝“画饼”式承诺

还是职场小白的我,也经常被领导或者老板“画饼”式承诺,只能说是踩坑也是一种修行。不过以过来人的经验回顾时,希望大家不会再被“画饼”,学会拒绝“画饼”式的承诺。

图片

职场黄金期是我们提升专业和积累行业经验的关键时期,如果没有发挥的舞台就要及时做出改变,不能被不确定性的承诺而耽误自己的计划。只有在自己的底层能力达到峰值之后,才能具备更好的话语权,现在公司需要你不代表以后不需要更优秀的人,所以自身优秀才是最有保障的。如果是待遇层面的承诺也是无效的,当前公司的待遇条件一定程度上决定了跳槽的谈薪起点,承诺待遇不代表实际待遇。

图片

如果承诺的不能如期而至,我们就要多为自己打算,不能超过自己的忍耐期限还继续拖沓。

 

九、拒绝低能领导

在职场初期进入大公司固然重要,但是跟对领导往往比公司本身更重要。领导的专业度决定了我们在团队中成长的速度,如果遇到低能的领导,不仅容易原地踏步,很容易到达专业瓶颈期。

图片

有的领导也许不是专业出身,但是管理方法和平时的指导性建议很好,我们也能找到更多沉淀经验的思路和方向。如果领导专业能力不行,还过于武断和眼界不足,项目只能是弄得一塌糊涂,这样的领导是不可能给我们带来成长的经验的。

进入团队后通过一段时间的对接,我们要及时判断出领导的能力,要学会拒绝低能的领导。只有跟对领导才能快速成长,从领导身上学到的做事方法、思考角度、项目经验等,是我们快速从小白变得成熟的关键。

图片

 

十、拒绝低要求团队

在项目设计中,不是一稿过就是我们追求的目标,如果团队要求比较低,是很难突破自我的。只有一次又一次的挑战新难度,才能从固化思维中摆脱出来,掌握新的思考技巧。所以,我们也要学会拒绝低要求的团队,不能提前过着温水煮青蛙式的工作状态。

图片

身边都是优秀的设计师,你的能力也会逐渐受到影响,遇到问题才能获得更多解决方案。有一个要求比较严格的领导,团队也比较注重设计质量,你才能输出更优秀的作品,沉淀更优秀的经验。

 

小结

无论是在工作、学习还是生活中,我们都不能过度的顺从和依赖,学会拒绝也是我们成长的关键。拒绝也是新的开始,也许能在新的过程中发现新的机遇,所以我们不要不敢拒绝。只要在拒绝之前做好冷静的分析,排查出利弊关系即可,不能盲目办事也不能委曲求全。

图片

本文观点仅代表个人的一些经验反思,不足之处根据自己的实际情况判断,我们互相进步。

 

作者:黑马青年

转载请注明:学UI网》职场中要学会拒绝

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


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


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


按钮位置如何合理设计?看这篇文章足够了。

seo达人


一、按钮的几种布局

按钮的布局大致分为四种,分别为:导航栏布局、跟随内容布局、偏向底部布局和底部悬浮布局。

图片图片

 

二、导航栏布局

我们平时看到的导航栏布局有很多,如发朋友圈和发QQ动态。

图片

为什么要将「发表」按钮放在导航栏右侧?

以微信朋友圈举例,在发送动态时,核心操作是为照片配文字或继续添加照片。

其他操作例如选择所选位置、提醒谁看、谁可以看,同步到朋友圈,都是次要操作且不会调起键盘。

用户输入文字之后,直接可以点击附近的「发表」按钮,快捷方便。

能否将「发表」按钮放在页面中呢?答案是:不行!

图片

将「发表」按钮放在页面,当输入文字时,会导致键盘遮挡操作按钮,无法快速点击「发表」操作。

除非是「发表」按钮附近有很多需要键盘输入的必填表单,不然不能这么做。目前来看,微信的「发表」按钮的位置设计是最优解。

 

三、跟随内容布局

常见于表单字段填写时,如下图所示。

图片

那么能不能将操作按钮放在导航栏右侧呢?答案是不行!因为放在导航栏右侧的话,操作路径不顺畅。

放在表单下方是正常的从上往下操作流。

有些设计觉得将按钮底部区域,离大拇指更近,更方便操作,如下图。图片

但是因为是表单填写,会调起键盘,将提交按钮给挡住,所以按钮跟随表单之后,更加科学。

 

四、偏向底部布局

偏向底部的操作按钮通常是内容区域不需要调起键盘的使用场景。常见的如引导页或结果页。

图片

 

五、底部悬浮布局

底部悬浮布局,常用于非填写内容超过一屏或审批等使用场景,特点是操作按钮优先级高,方便用户实时操作。

如下图电商购买按钮。

图片

 

六、布局总结:

1、填写内容为必填项、需要调起键盘且均集中在页面头部,则操作按钮放在导航栏右侧较合理。

2、填写内容在头部,且调起键盘不会挡住操作按钮,则按钮紧随内容较合理。

3、不需要调起键盘来填写内容,则按钮放在偏向底部比较合理。

4、按钮非常重要,且非填写内容超过一屏时,用底部悬浮布局比较合理。

 

后记

从这篇文章开始,我尝试写一些工作中很实用且基础的文章。

争取每一篇文章都可以给大家一些收获,这样有助于在工作中使用。

由于每个人的基础不同,基础类和进阶类我尽量都覆盖。


作者:Echo

转载请注明:学UI网》按钮位置如何合理设计?看这篇文章足够了。

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


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


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



日历

链接

个人资料

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

存档