首页

人人都可以是设计师:UI&UX 小技巧大全

杰睿

编辑导语:产品的设计应当让用户始终清楚事项的发生,重要的元素也应当置于用户一目了然的位置,直观且清晰的设计往往能提升用户的使用体验。本篇文章里,作者继续总结了提升产品设计效果的几个小技巧,一起来看一下。

重要的位置,要留给重要的元素。

编者按:用户对产品的体验来自直观感受。所以UI/UX往往对产品的成败有着直接的影响,糟糕的UI/UX体验会让强大的功能失去效力。

但怎么才能提高UI/UX设计的效果呢?不一定需要你掌握丰富全面的设计知识,有时候一点点的小改变就能令设计大为改观。

Marc Andrew总结了36个改进UI/UX设计的小技巧,分成6篇系列文章刊出,此为第五篇,希望能够帮助到你。原文发表在Medium上,标题是:UI & UX micro-tips: Volume five。

2个卡片设计样例。左边的标题行高很高,右边的标题行高就要小很多。

在创作实用、易于理解且华丽的 UI 时,只需要做一点点的调整马上就可以改进设计。

在这篇系列文章的第5篇中,我会给大家再带来6个容易实践的 UI 和 UX 小技巧。

相关阅读:

我们开始吧……

一、如果用的是Type Scales和Grids的话,变通一下也是可以的

2个卡片设计样例。左边的标题行高很高,右边的标题行高就要小很多。

设计要讲规矩,我是遵守规则的忠实粉丝,比方说Type Scale或者一直都很出色的8pt Grid系统我是遵守的。

但有时候最好不要太过教条主义,不要Scale 或 Grid告诉你该怎么做就怎么做,重要的是看怎么做更好看。

请记住,规则是可以变通的,有时候偶尔也是可以打破的。

做一个打破规则的叛逆者。

二、让表单上的错误消息有帮助且易于理解

2 个表单字段样例。一个显示的是带有基本错误消息的字段,另一个显示了更详细的错误消息。

使用表单的时候,要尽量确保错误消息说清楚出了什么问题,以及如何补救。

始终要让用户了解到具体情况。

要让这些错误消息对用户有帮助,不要让用户蒙在鼓里。

三、在APP加载的时候,应该尽量告诉用户正在发生了什么事情

APP的 2 个加载屏幕样例。一个空空如也,没有加载提示,另一个展示了更详细的加载指示器。

展示APP元素的框架可以帮助你快速地向用户沟通应用的布局,并让用户放宽心,知道有什么事情正在发生,而不是死机。

系统状态可见性是需要遵循的重要原则,这让用户能够了解正在发生的事情。

不要让用户玩猜谜游戏。要从一开始就让他们了解情况。

四、通知用户如果他们应用某个动作将会发生什么

APP的 2 个通知样例。一个提供的信息非常基本,另一个在模态内部提供了更详细的描述。

在进行应用可能会产生后果的特定操作之前,始终都要先详细告知用户。

这尤其适用于某些会产生不可逆转后果的操作,比方说永久性删除某些内容。

让用户知道将会发生什么,并要求他们在按下那个写着“删除互联网”的红色大按钮之前再三确认自己要这么做。

五、确保最重要的屏幕在标签栏有优先位置

2 个标签栏样例。上面这个展示的是不太重要的图标,下面这个展示的是更重要的图标。

APP的标签栏可是屏幕这块房地产的黄金地段,所以请明智使用。

要把你的标签栏保留给最常用的屏幕,并把次要的屏幕隐藏在“更多”图标里面。

小小的标签栏只能留给重要的东西。

六、不要把重要操作隐藏在下拉菜单里面。重要操作得放在前面,核心的位置!

2个桌面导航的样例。一个是注册和登录按钮隐藏在下拉菜单里面,另一个在菜单以外放置了 2 个按钮,而且就放在顶部导航栏旁边。

是的,我时不时还会在桌面视图里面看到这种情况发生。

用户需要采取的基本操作(也就是注册或登录)完全隐藏在他们甚至可能都浏览不到的下拉菜单里面。

把这些重要操作放在访问便利的位置,并应该放在用户预期最应该出现的地方。

 

作者:Marc Andrew,译者:boxi

来源:https://www.36kr.com/p/1302313074821767

本文由 @神译局 授权发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

高转化宝贝详情页设计解析:什么才是沉浸式的设计?

杰睿

关键字:电商 详情页设计 视觉营销

网络时代,电商平台作为主流消费渠道,在消费者心中已占有大部分比例,越来越多的消费者更愿意选择在线上购物消费,如何让消费者能够更快速了解商品,产生购买欲?电商详情页起到关键性作用,电商详情页作为产品说明书,不仅是成交转化入口,更是品牌传播的重要途径。如何设计一款适合产品的详情页?主要从两个方面入手:

电商详情页策划
定位分析
1) 产品:属性、功能、用途,如图一(左):产品使用场景配合文字说明能让消费者一目了然;
2) 价格:决定怎么去做,影响设计风格;
3) 人群定位:消费者路径、在意点,如图二(右):对于母婴产品主打自然、健康。
文案策划
1)使用用户化语言(消费者语言)——不要用大白话,用使用互联网思维,打造既视感文案,如图三(左):可视化场景搭配文案更直观表现产品功能及作用。
2)理性传达——卖点直接表达,如图四(右):“好空气,看得见”,卖点简洁明了。
3)文案使用规范,熟悉广告法,禁止使用极限词及违规词。
拍摄脚本
1)草图规划,道具规范,角度光影规划,模特规则(妆容、动作、表情等),如图五:前期的策划为了更好的展现设计效果,需要先绘制草稿,通过草稿展现画面的布局、角度透视、道具选择、模特选择、整体光影规划等,直观给到摄影师更好的拍摄方案,同时也可以后期设计执行提供更好的设计依据。

详情页执行策略
板式设计
1) 配色策略(色指定):品牌VI色、情感色、主色、辅色、点缀色,如图六(左):主色调选择与产品同类色,整体上统一协调,点缀色选择产品辅色,突出对比强烈;
2) 装饰性元素:元素风格的一致性,图形符号要与整体的画面风格保持一致性;
3) 字体选择及组合:字号大小对比、疏密对比及组合规范符号,如图七(右)。

形式感
形式感在生活中无处不在,设计中更要熟练应用,详情页作为消费者直观视觉呈现,为了博取消费者眼球,需要通过不同的形式营造视觉氛围,设计具有冲击力的画面,避免画面单调。
1) 对齐、疏密对比、破方,如图八(左):图文排版,文字组合通过对齐、疏密对比,视觉上节奏感舒适;图九(右)通过破方改变了原有视觉展现,以另外视觉呈现吸引消费者眼球。
文案与图标组合
1) 文案形式需要2-3种变化,如图十(左):主文案与辅助文案通过不同的字体、大小、表现形式的对比,更加突出了“出水芙蓉”主题性文案,符合画面的表现;
2) 符号与图形,图十一(右):文案与图形的结合,既突出主题文案,又通过简单的符合表现产品的功能卖点,两者的结合更好展现了产品卖点,让消费者更直观了解产品。
电商详情页决定了转化率,好的详情页设计既可以给消费者建立更多的信赖感,又可以成为促使消费者购物下单的催化剂。做好一款详情页,前期的策划及后期的执行都是至关重要的,每一环节都需要考虑,缺一不可。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

冯.雷斯托夫效应 | 设计师需要知道的设计原则!

杰睿

前言
在我们的日常生活中,心理学的影响无处不在。它像一把神奇的钥匙,能打开人们内心深处的秘密。作为设计师,我们更应该掌握并运用心理学,将其融入我们的设计中,从而创造出更具有吸引力和影响力的作品。
设计并不仅仅是形状、颜色和布局的组合,更是对人类心理的探索和解读。我们的每一个设计决策,都与用户的心理状态和认知过程息息相关。如何抓住用户的眼球、引发他们的兴趣、引导他们的行为,这些都是我们需要深入研究的课题。
在众多的心理学原理中,冯·雷斯托夫效应(Von Restorff Effect)是一个值得设计师们关注的设计法则。这个效应揭示了一个有趣的现象:特殊的东西往往比普通的东西更容易被人记住。这就意味着,在设计中,我们要制造一些“特殊”的元素,使它们能够从众多的信息中脱颖而出,成为用户关注的焦点。今天笔者就带大家了解一下设计中常用的心理学之一冯·雷斯托夫效应。
 
 
 
分享目录
一、关于冯.雷斯托夫效应
二、冯.雷斯托夫效应对设计的影响
三、在设计中的应用
四、常见问题及解决方式
五、结语
 
 
 
一、关于冯.雷斯托夫效应
1.产生背景
在1933年的德国,一个名叫海德维希·冯·雷斯托夫的医生开启了一项改变我们对人类记忆理解的实验。她深入探索了当人们面对一系列物品时,他们的记忆是如何运作的。通过精心设计的对比实验,她发现了一个令人惊奇的现象:在一组物品中,那个最特别的物品总是更容易被人们记住。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
这一发现为我们揭示了一个核心事实:特别的事物更能吸引我们的注意力,并在我们的记忆中留下深刻的印记。想象一下,在一组物品中,如果有一个被聚光灯照亮,那么相比其他未被照亮的物品,它无疑会成为人们关注的焦点,从而在记忆中留下更深的痕迹。
这个人类行为和记忆的规律后来被命名为“冯·雷斯托夫效应”。这一效应不仅仅是一个简单的观察,它实际上是人类行为学和心理学领域的一项重要研究成果。随着时间的推移,这一效应逐渐被应用于美学和设计领域,为设计师们提供了全新的视角和工具,以创造出更具吸引力和影响力的作品。
自冯·雷斯托夫效应被正式确立命名以来,众多科研学者在此基础上进行了更深入的研究,他们不仅剖析了这一效应的内在机制和影响因素,还探讨了其在不同情境下的应用。随着研究的深入,对于这一效应的理解也在不断加深,并衍生出了许多其他的理论和学术观点。
 
2.融入设计行业
冯·雷斯托夫效应为我们提供了一个独特的视角,帮助我们更好地理解人类记忆的运作方式。通过运用这一原理,我们可以在设计中有意识地创造出令人难忘的元素,从而与观众建立更深刻的联系。无论是在广告、品牌推广还是产品设计中,突出特别的元素都是一种有效的策略,可以帮助我们更好地吸引观众的注意力并留下深刻的印象。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
冯·雷斯托夫效应,又被称为隔离效应或新奇效应,揭示了人们在记忆中的偏好。当情境或经历中出现与众不同的刺激时,这种效应尤为明显。
在当今信息爆炸的时代,用户往往没有耐心去仔细查找信息,而是快速扫视。因此,设计师需要巧妙地运用莱斯托夫效应,使关键内容从繁杂的信息中脱颖而出,吸引用户的目光。
统一性是设计的基础,但只有差异化的元素才能让信息从页面中脱颖而出。通过巧妙运用颜色、形状、布局等元素,我们可以创造出与众不同的视觉效果,引导用户的视线。通过巧妙地突出关键内容,我们能够更好地与用户沟通,引领他们的注意力,为业务创造更大的价值。
 
 
 
二、冯.雷斯托夫效应对设计的影响
1.背景不同 强化视觉
在界面设计中,我们常常会遇到这样的情况:在同类型的元素中,某一元素与其他元素存在显著差异,这种现象我们称之为“背景不同”。为了使某个模块或元素在用户心中留下深刻印象,我们可以利用环境差异来提高其识别度和记忆度。这种手法在UI设计中被广泛应用,它利用了冯·雷斯托夫效应,能有效吸引用户点击。
例如淘宝底部标签栏中的四个ICON,唯独首页的第一个ICON(品牌logo)风格与众不同。即使离开了该页面,这个特殊的ICON依然让人印象深刻,饿了么第二的图标也是如此。因此,我们在设计界面时,若想吸引用户的注意或提高点击量,可以打破常规,让特定元素在同背景下脱颖而出。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
再比如下图的个人中心界面,功能入口模块均采用ICON展示,而游乐场模块却采用了特殊的布局和设计。因此,当用户进入个人中心时,最先映入眼帘的便是游乐场模块。这也解释了为什么我们在进行广告和活动投放时,需要特别设计的原因。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
 
2.经验不同 强化记忆
当遇到与过去经验显著不同的情况时,我们的大脑会产生一种特殊的效应,这种效应被称为“经验不同”的效应。例如,在骑自行车的过程中,我们通常习惯于左手控制左把手,右手控制右把手。但是,如果我们尝试用双手交叉的方式来骑车,结果很可能会摔倒。从此以后,每当我们听到或描述有关骑车摔倒的事情时,我们都会立刻想起那次“经验不同”的尝试。
同样地,淘宝和京东在618、双十一等大型促销活动时,会选择重新设计他们的首页。与往常的设计相比,这些新的首页设计通常会增加更多的促销入口,甚至改变ICON的风格。从冯·雷斯托夫效应的角度来看,这种与以往不同的设计能够更好地吸引用户的注意力,加深用户的记忆,并扩大活动对用户的影响力。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
 
 
 
三、在设计中的应用
1.功能隔离提高效率
在视觉层面难以实现强烈差异化时,我们可以通过功能来实现有效的隔离。以微信为例,其置顶功能允许用户将好友或群聊消息置于顶部,从而与其他信息区分开来。这种设计确保了关键信息的优先级,使用户能够更快速地找到和关注所需内容。通过巧妙地运用功能,我们可以轻松地解决视觉上的一致性与差异化之间的矛盾,为用户提供更加流畅和个性化的体验。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
 
2.动效加强引导
静态页面容易让人视觉疲劳,动效能够更加生动有趣地展示内容,引导用户更加关注页面。相较于被动接受信息,动效能够更加有效地吸引用户注意。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
 
3.背景联动吸引目光
随着Banner自动轮播的普及,用户对其的吸引力逐渐降低。面对不断变化的广告,用户不再耐心地逐个浏览。当无法获取所需信息时,他们的视线会迅速转向其他区域。
为了应对这一挑战,腾讯视频首页的Banner采用了背景联动的形式。这意味着头部背景色会根据Banner图片的色调进行变化,从而扩大了内容的变化空间。这种设计不仅使广告更加引人注目,还使用户更容易被吸引并保持关注。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
 
4.icon强化加强视觉感知
频道页的入口方式多种多样,金刚区icon无疑是最优选择。若要突出展示某些业务功能,单一的icon配合动效可有效吸引用户关注。此策略简单高效,有助于用户快速找到所需内容。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
 
5.内容强化凸显价值感
在设计界面时,我们追求的是在有限的空间内展示更多的有效信息,避免信息的无效重复。但在电商平台中,尤其是涉及到利益点时,我们需要确保信息具有足够的价值感和吸引力。
以智行APP开通会员为例,领神卡作为核心卖点被突出展示,采用了平铺展开的方式,从而突显其价值。相对其他权益则相应地进行了弱化处理,以保持整体信息的清晰度和重点。这样的设计既充分利用了屏幕空间,又确保了用户能够快速了解到核心的利益点。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
 
6.分层隔离提高信息层级
页面信息层次分明,信息层级越高,用户感知越强烈,越能吸引注意。例如,模态弹窗处于最上层,与内容层完全隔离,用户无法忽视。其次是非模态悬浮层,与内容层隔离,但不影响用户操作。还有侧边悬浮按钮、顶部或底部悬浮横条等。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
 
 
 
四、常见问题及解决方式
1.本末倒置的危险
受“危险按钮”的影响,过去设计师常常给予负向情绪操作很高的视觉层级,例如退出登录。这样的设计意图是警示用户操作危险,但视觉上却过于强调,甚至有些“喧宾夺主”。近年来,移动端设计中这种矛盾逐渐减少,但仍然存在。与其强调操作的难度和危险性,不如考虑如何让用户自然地忽视这些操作,减少不必要的干扰。从冯·雷斯托夫效应来看,这种设计方式有本末倒置之嫌,应尽量避免。
冯.雷斯托夫效应 | 设计师需要知道的设计原则!
 
 
 
2.什么都突出等于什么都不突出
新手设计师常常会遇到想要突出所有元素,但最终无法突出任何一项的问题。页面中的特异点应该属于少数,如果所有元素都想做得不一样,都会让页面整体视觉效果崩溃。因此,在设计中要学会取舍,选择最重要的元素进行突出,才能达到最佳的视觉效果。
 
 
 
五、结语
总的来说,将冯·雷斯托夫效应运用到设计中,能帮助我们创造出更具吸引力、更容易被记住的设计。但请记住,任何设计决策都应以用户为中心,了解他们的需求和心理是关键。只有这样,我们才能真正创造出打动人心的设计。
 


作者:大漠飞鹰CYSJ
链接:https://www.zcool.com.cn/article/ZMTYzMjYwNA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

产品配色那些事——配色实践

杰睿

本章会从实操出发,结合真实项目为大家带来配色实践。期间会介绍项目选色逻辑、配色过程、使用到的工具及如何建立色彩系统。

 

 

 

产品配色那些事3-我的配色实践

 

本章会从实操出发,结合真实项目为大家带来配色实践。期间会介绍项目选色逻辑、配色过程、使用到的工具及如何建立色彩系统。


项目背景

 

21年我司进行业务调整,原保险业务从当前产品中独立出去,作为一家全新平台为印尼用户提供保险选购及理赔服务,为此我们提供了新的产品设计和配色。

 

一、定义主色

 

1、选择色相

 

根据上一章提到的选色逻辑,我们依次从产品情绪、行业属性和目标用户几个纬度去思考。作为一家全新的保险平台,我们希望产品给到用户专业、安全、信任之感,那么蓝色、绿色可以作为备选,蓝色代表专业、权威,绿色代表安全、健康。后续我们做了相关行业调研,发现大部分本地产品也使用了这两个颜色,可以确保备选颜色是符合行业喜好的,属于安全的用色范围。最后考虑到用户的地域属性,印尼大部分用户都信奉伊斯兰教,对绿色有着非同一般的热爱。结合本次项目诉求,便选择了绿色成为我们产品主色。

 

 

2、确定色调

 

明确了主色色相,但同一色相会有冷暖、深浅之别,给到用户的心里感受也略有差异。具体到本次项目中,暖绿有温暖、活泼、欢快的感觉,冷绿则带给用户冷静、平和的情绪。对于本次项目,冷绿更加符合产品定位。

 

 

 


3、调整饱和度、明度

 

饱和度控制色彩的艳丽程度,明度控制色彩的明暗变化,这两项参数直接影响色彩的最终效果,所以需要同步交替调整,直到选出最合适的。考虑到主色常用于按钮或重要文本,所以需要注意色彩的对比度,确保文本在界面中的可读性。在本次项目中,“绿色”本身属于对比度较小的颜色,为了获得合适的对比度,需要调整更大的饱和度和更低的明度。经调整之后,我们测试了色彩的对比度为3:1,满足W3C中给到的色彩对比度建议。

 

 

 

 

二、推导辅助色

 

1、匹配色相

 

根据辅助色定义,我们匹配到了不同色相的辅助色,但并不是所有颜色都是我们需要的,需要根据经验做出一定删减。如同类色中的两个绿色,色相上与主色过于接近,使用过程中会造成视觉混淆,所以我们剔除这组颜色。再如中差色与对比色中都有黄色,为了与橙色区分更加明显,我们删除对比色中的黄色。经过一系列删减后,留下来的便是我们需要的色彩。此时也可以对色相进一步调整,如类似色中的蓝色偏向湖蓝,为了尽量和主色拉开差别,我们选择色相向右偏移。

 

2、视觉感官校准

 

以上色彩只确定了色相,没有进行饱和度、明度调整,视觉上并不属于同一层级。为了获取更加统一的配色,需要对其进行调整,这一过程被称为视觉感官校准。如何校准?有人通过给色彩叠加黑色,对比色彩亮度进行校准。但不同颜色本身亮度不同,强行调整一致会导致部分颜色失衡。所以此种方法可作为参考,但不具备太大可靠性,实际工作中还需依靠自身经验进行调整,确保视觉上和谐统一。以下为完成校准后的配色。

 


三、推导中性色

 

第二章提到中性色可通过调整明度或透明度得到,本项目使用场景比较固定,所以决定调整明度来得到中性色。考虑到主色为“冷绿”,与偏蓝的中性色搭配可保证色彩调性一致,于是我们取蓝色色相值,调整饱合度获得最终色彩。需要注意的是随中性色明度依次降低,饱和度需要逐级增加。最后确保主要用色符合无障碍设计指南,我们对一级、二级、三级文字用色进行了对比度测试,符合无障碍设计要求。

 

 

 

 

 

四、生成梯度色板

 

梯度色板可以提供更多配色,覆盖更多使用场景,避免后续新增颜色的烦恼。早期为了获得梯度色板需要设计师利用公式计算,现在可以直接使用在线工具生成。如Ant design的色板生成工具(https://ant.design/docs/spec/colors),Material design的色板生成工具(https://materialpalettes.com/),Eva Design System的色版生成工具(https://colors.eva.design/)。由于不同平台算法不同,生成的色版效果也存在差异,这里首推Ant design,对比其他平台色相变化更丰富、颜色更均匀、色阶也更明确。

 

 

 

 


五、建立色彩系统

 

1、如何理解色彩系统?

 

色彩系统隶属设计系统的一部分,是对色彩进行科学管理的体系。不同于色彩规范主要针对设计侧,而是需要打通开发聚焦产品代码中。


2、色彩系统包含什么?

 

简单来说色彩系统由design token、色彩库和说明文档构成。design token是设计与开发约定一致的色彩名称,作为色彩调用的唯一凭证。色彩库是包含design token和颜色参数的样式集合,供我们在设计和开发中调用。说明文档类似于设计规范,定义了色彩的使用方式,为我们的使用提供指导。


3、如何建立色彩系统

 

a、token命名

 

如何命名需要考虑token层级和token构成。

 

关于token层级,设计师Lukas Oppermann在文章《Naming design tokens》(https://medium.com/user-experience-design-1/naming-design-tokens-9454818ed7cb)中有提到一般设计系统会将token分为三个层级,核心token(core token)、语义token(semantic tokens)和组件 token(component tokens)。核心token存储的是原始值作为构建设计系统的基础,语义token引用核心token,它的名称描述了token的预期用途。组件token引用语义token,并将token绑定到对应的组件。较多的层级可以使token命名更加清晰,但层层嵌套的逻辑也增加了管理的难度,Lukas Oppermann在文中提到也可以使用一层或两层。

 

 

 

 

 

 

关于token构成,体验设计师Nathan Curtis在《Naming Tokens in Design Systems》(https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676)一文中指出为了更加充分的描述token,token可以由名称空间(namespace)、目标对象(object)、基础样式( base)、修饰符(Modifier)构成。名称空间对应系统、主题名称,目标对象对应组件、组件元素和复合组件,基础样式是token的主干部份,包含样式、属性、语义,修饰符表明状态、尺度、模式等。由于篇幅原因,此处只是简单介绍,感兴趣的同学可以点击原文查看。

 

 

 

 

 

 

按照两位作者的观点,笔者对本次色彩系统进行了design token命名,如下所示:

 

 

 

 

 

 

b、建立样式库

 

样式库是设计与开发调用的基础,需要在设计工具中实现token的层级逻辑,同时方便开发同学查看。笔者主要使用的工具是figma,Figma为我们提供了丰富的功能和插件建立样式库,以下会介绍些主流方式及优缺点,大家按照项目实际情况选择使用即可。

local style:figma支持将色彩定义为全局样式,并对样式进行命名。设计在调用样式后,开发便可以在查看面板看到对应token,基本实现了样式库的作用。但local style不支持token的层级嵌套,只能实现单层级token。如果你的项目刚好使用了单层级token,那么建议你使用此功能。

 

 

 

 

 

 

local variables:在今年6月份的config大会中,figma发布了变量功能,虽然CEO Dylan Field先生说不会推出design tokens,但变量功能却完美实现了token的作用。它支持将色彩定义为变量,且可以实现层级嵌套,开发在查看面板也可以方便的看到变量名称,算是解决了figma在design token方面的缺陷。

 

 

 

 

 

 

Figma token:一款定义design token的插件,且支持token的层级嵌套。开发查看token名称目前有两种方式:1.可在 Figma token的inspect面板进行查看,但插件需要在编辑模式下使用,意味着你需要给到开发编辑权限,这无疑会增加团队成本。2.插件支持将token转化为figma样式和变量,并保持当前的token名称,此时开发可以在figma的inspect面板查看token,建议使用此种方式,经济实惠。

 

 

 

 

 

 

 

c、输出说明文档及团队推进

 

一般文档内容包含使用规则、注意事项、场景描述、token名称、色值参数等等,也可根据实际情况作以增减。输出说明文档后,整个色彩系统搭建完成,接下来需要推进团队使用。为确保整个系统在项目中顺利落地,最好组织相关人员进行一次宣讲,介绍清楚使用规范及注意事项,明确要求严格按照系统执行。

 

 


作者:Ye_susu
链接:https://www.zcool.com.cn/article/ZMTYwMTE3Ng==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

产品设计如何利用心理学

ui设计分享达人

产品设计的成功除了依赖设计方案和技术实现,还与用户的心理密切相关。用户心里决定了我们用怎样的设计策略解决问题。我们常认为人们做决策时是理性的,但其实用户行为经常是非理性,会受到情绪、习惯和社交环境的影响。了解这些心理学规律能帮助我们更好地的预测和引导用户行为,优化产品体验,提高用户的粘性、留存率和转化率,从而产品商业价值最大化。
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学


作者:DesignLink
链接:https://www.zcool.com.cn/article/ZMTY1MDk0MA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Banner布局在用户界面中的设计样式研究

ui设计分享达人

前言
    Banner,这一设计元素对于我们设计师而言早已经是司空见惯,其核心往往聚焦于视觉表现的层面,也是成为UI设计师重要能力play中的一环。今天要写的,并非Banner在视觉艺术上的探索,而是其在UI场景中布局样式的深度剖析。
    Banner图作为产品中的一项基础功能,其存在已是常态。在视觉创意的追求之外,UI层面的样式布局也在不断寻求突破与创新。
 
目录
一、Banner 视觉层表现
二、Banner 布局样式
三、总结
 
一、Banner视觉层表现
    作为界面视觉焦点,Banner通常以可交互的轮播组件形式呈现,这种动态展示方式已成为现在产品的重要导航模式之一。它不仅是信息传递的载体,也是平台与用户对话的窗口,承载着活动推广、品牌宣发等核心内容的展示使命。 在提升用户注意力的设计探索中,Banner的视觉表现手法持续演进。从设计维度来看,我们不仅要在创意构思、版式布局、色彩搭配等基础层面下功夫,更需在表现形式上寻求突破。
    基于动态复杂度,我将Banner的表现形式归纳为四个层级:从基础的静态图像,到轻量级的GIF动画,再到沉浸式的视频背景,直至最具空间感的分层效果,每种形式都对应着不同的设计目标和用户体验。
Banner布局在用户界面中的设计样式研究
 
 
1.1静态
    在众多Banner表现形式中,静态轮播图因其高效的设计实现和便捷的技术支持而成为多数产品最普遍的选择。
    这类Banner采用静态图片作为视觉载体,根据产品需求可分为两种基础模式:单一画面呈现的简约风格,以及多画面轮播的交互形式。其中,多图轮播既支持自动播放的时间轴切换,也允许用户通过手势滑动进行自主浏览,在保持视觉简洁性的同时增加了交互维度。这种设计平衡了视觉效果与功能实用性,所以会成为多数产品的首选方案。
Banner布局在用户界面中的设计样式研究
 
 
Banner布局在用户界面中的设计样式研究
 
 
1.2动态
    动态Banner以生动的表现力,在吸引用户注意力方面展现出显著优势。通过关键元素的微妙动画和CTA按钮的交互反馈,能够有效引导用户视线,强化信息层级。
  在动态Banner的应用中,单图形式往往更受青睐。虽然动态效果能提升视觉吸引力,但过度使用可能导致"视觉噪音",反而分散用户注意力,降低核心信息的传达效率。
    面对信息过载的数字环境。微交互动画作为一种优雅的解决方案,在功能引导和视觉叙事两个维度都发挥着重要作用,也已经成为界面设计中不可或缺的设计语言。
Banner布局在用户界面中的设计样式研究
 
 
Banner布局在用户界面中的设计样式研究
 
 
1.3视频
    视频广告作为一种成熟的营销媒介,在短视频文化盛行的当下,已逐步融入Banner轮播体系。这类视频Banner通常占据首屏黄金位置,配合明确的倒计时提示和便捷的关闭选项,为用户提供可控的观看体验。为减少对用户的干扰,视频默认采用静音播放模式,这种贴心的设计选择体现了以用户为中心的设计理念。
    在特定垂直领域,如影视类平台,我们也能观察到多视频轮播的创新应用。这种相对小众的呈现方式,往往与平台的内容属性高度契合,为特定用户群体提供沉浸式的浏览体验。这种差异化的设计策略,展现了产品设计中对场景化需求的深入思考。
Banner布局在用户界面中的设计样式研究
 
 
Banner布局在用户界面中的设计样式研究
 
 
1.4分层
    在追求差异化体验的设计浪潮中,轮播广告正在突破传统平面展示的局限。分层视觉设计以其独特的空间感和动态层次,为Banner设计注入了新的活力。这种创新表现形式包含多层次的视觉构建:从基础的内容层叠加视觉,到更具空间感的3D翻转效果,再到前景与背景的智能分离运动,每种方式都在重新定义用户与广告内容的交互方式。
    基于视觉层次的运动差异,设计出引人入胜的视觉叙事,能够有效的提升用户参与度以及更具沉浸感和记忆点广告体验。
Banner布局在用户界面中的设计样式研究
 
 
Banner布局在用户界面中的设计样式研究
 
 
小结
    Banner的视觉创新是提升内容吸引力的关键驱动力。
    每一种新的视觉语言都是我们与用户对话的新方式,是提升信息传达效率的重要途径。在竞争激烈的市场环境中,差异化的表现形式往往能成为抓住用户注意力的制胜法宝,这也是为什么我们要不断突破常规,寻求更具感染力的视觉解决方案。
 
二、Banner布局样式
    在确定Banner的视觉表现手法后,就得深入研究其在界面布局中的空间关系。布局样式的多样性源于多个设计维度的考量:从Banner的宽高比例、尺寸规格,到其与页面结构的整合方式(通栏或分栏),再到其与周围元素的视觉关系(独立呈现或背景融合)等。
    就通栏与分栏布局而言,这种结构性选择直接影响Banner的视觉占比。虽然直觉告诉我们更大的Banner更具吸引力,但优秀的设计需要平衡信息层级与视觉舒适度。Banner的布局不应是孤立的决策,而应该与整体界面风格和谐统一,既要突出又要融入,在视觉冲击力和界面协调性之间找到最佳平衡点。这种全局性的设计思维,正是打造优质用户体验的关键点所在。
Banner布局在用户界面中的设计样式研究
 
 
    在处理深色系头部界面时,我们常采用Banner与背景层叠的设计策略。这种手法通过建立视觉深度,创造出富有层次的空间感。背景色的处理有两种方式:一是采用固定色值保持统一性,二是根据轮播图主色调动态调整,后者能实现更自然的视觉过渡,提升整体设计的融合度与空间纵深感。
    在Banner比例方面,选择直接影响高度控制,需要根据界面内容密度灵活调整。除了基于内容需求的自定义方案,许多人会采用数学比例系统进行规范化设计。其中,基于斐波那契数列推导出的8:5、8:3等比例关系,因其视觉舒适度而被广泛采用。在实际应用中,我更倾向于选择能被4整除的数值,既符合开发规范,又能确保在不同设备上的适配性。
Banner布局在用户界面中的设计样式研究
 
 
以经验作为基石,而不是限制,特殊情况特殊对待,就像配合前端工程师调整设计图样式一样,灵活运用。
 
三、总结
    Banner作为页面中的常见元素,与其说是对布局样式的探索,不如说是对用户体验的深度挖掘。每一次布局创新都是对用户与页面互动方式的重新思考。
    一个恰到好处的留白、一次精准的视觉引导、一个流畅的交互过渡,这些细微之处都可能成为提升产品体验的关键。 当我们能够系统性地把控每个设计细节,将用户需求转化为优雅的解决方案时,就能做出真正打动人心的页面设计。


作者:Syic
链接:https://www.zcool.com.cn/article/ZMTY1MTk1Mg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

为什么我没有这样的设计思维呢?

杰睿

设计能力的强弱取决于设计思维,技能操作层面的不足可以通过反复训练,在短时间内即可弥补;而设计思维需要通过长时间的熏陶,还要找对学习的方法和途径。很多设计师工作五年甚至十年,但是设计能力依然比较普通,很大程度上还是设计思维能力的缺失。
 
我们也可以通过体验和分析优秀的案例来提升,学习优秀设计师的设计思路和处理技巧,以此来强化自我专业思维。今天黑马哥继续给大家分享一些优秀的设计案例,希望可以助力提高大家的设计思维。
为什么我没有这样的设计思维呢?
 
 
 
 
体验目录
 
一、不一样的返回设计
二、可以切换大小的设计布局
三、做减法的设计表达
四、品牌动态渲染春节氛围
五、品牌插画表现界面置底
六、动态刷新红包设计
七、涂鸦风格的流程设计
八、情感化闪屏设计
九、图标设计的翻转动效
十、蛇年主题图标设计
 
 
 
一、不一样的返回设计
 
进入层级界面可以通过返回回到上一级操作场景,通常都是以箭头图标、返回文字组合设计或者独立设计。
 
最近在体验喵喵记账 App 时,其返回设计以“门”作为创意元素,进入层级界面时门会打开,点击返回时会有关门的动作。以开关门的方式表达进入和返回状态,形象化的表达了不一样的返回设计,呈现出不同的设计解决方案。
为什么我没有这样的设计思维呢?
 
 
 
 
二、可以切换大小的设计布局
 
为了满足更多用户的体验需求,设计布局的灵活性变得越来越重要,需要提供多种选择便于操作。
 
在藏书馆 App 中,针对书库分类的展示设计,用户可以通过点击切换呈现不同大小的样式。文字和书籍封面图都会随着切换而缩放,方便满足不同用户的浏览需求,提升用户对产品的操作体验度。
为什么我没有这样的设计思维呢?
 
 
 
 
三、做减法的设计表达
 
随着互联网环境的发展,提供给大家的产品选择越来越丰富,而产品设计也从最初的功能性服务扩展到综合性服务。功能变得越来越多,商业氛围也十分浓厚,有种眼花缭乱的感觉。
 
最近在使用美团外卖柜小程序时,其简约的设计印象深刻。存取功能一目了然,没有多余的设计干扰体验,操作指引也是简单易懂。有时候减法的设计才是最好的用户体验,与其布局一堆功能或者服务,反而增加了用户的操作成本。
为什么我没有这样的设计思维呢?
 
 
 
 
四、品牌动态渲染春节氛围
 
春节氛围感营造对于品牌来说至关重要,是渲染春节主题和增强用户亲和力的关键,营造方式也是丰富多样。
 
其中夸克 App 通过品牌 LOGO 结合春节主题进行动态设计,不仅突出春节氛围,动效过渡也非常流畅。夸克经常会以品牌动态化的形式表现节日或者特殊活动主题,设计融合性处理得十分细致。
为什么我没有这样的设计思维呢?
 
 
 
 
五、品牌插画表现界面置底
 
界面设计过程中,对于到达底部的处理方式通常有品牌表达、公司名称、版权信息、情感化内容表达等。
 
最近在体验我要做计划 App 时,界面设计底部以品牌 IP 形式的插画进行表达,不仅符合整体设计风格,也使得界面设计更有趣味性。整个产品设计也以插画风格为主,是一个很有个性化的产品。
为什么我没有这样的设计思维呢?
 
 
 
 
六、动态刷新红包设计
 
结合刷新设计赋予更多功能或者服务,已经成为二层楼设计的首选。
 
最近在体验美团外卖时,首页下拉刷新会出现红包样式的动效表达,随着下拉的程度不同,红包金额会随之增加或者减少。动态刷新红包设计更能吸引用户继续体验,进而进入二层楼参与活动,趣味性的表达方式很有吸引力,也以此方式促进了用户参与感。
为什么我没有这样的设计思维呢?
 
 
为什么我没有这样的设计思维呢?
 
 
 
 
七、涂鸦风格的流程设计
 
随着同质化设计的现象,产品设计也在不断尝试更具差异化的风格。结合插画风格表达界面设计,变得越来越普及。
 
在我要做计划 App 设计中,整体风格以涂鸦插画风为主,完善做计划流程设计也以涂鸦风格进行设计。不仅风格特征更突出,也能吸引用户的关注度,促进完善计划流程。
为什么我没有这样的设计思维呢?
 
 
 
 
八、情感化闪屏设计
 
闪屏设计分为品牌感方向和营销广告等方向,其中闪屏广告较为常见,不过也有品牌启动页和闪屏广告相结合的方式。
 
闪屏设计的形式也非常多样,其中情感化的方向以 IP 形象和情感故事性插画为主。比如喜马拉雅闪屏设计便以 IP 形象的各种动态化形式呈现,画面非固定表达形式,每次重新打开都会有所不同,IP 动态也非常俏皮可爱。
为什么我没有这样的设计思维呢?
 
 
 
 
九、图标设计的翻转动效
 
图标动效的运用非常普及,以往见过的案例都是动效的形式表达图标的不同形式感,但是图标的含义不会受到影响。
 
最近在体验盒马 App 时,首页金刚区图标以翻转动效进行表达,既突出春节氛围也赋予图标两层含义。在保留图标本身功能含义的同时,通过翻转另一面表达出不同的意思,也是一个新的图标动效表达思维。
为什么我没有这样的设计思维呢?
 
 
 
 
十、蛇年主题图标设计
 
蛇年春节主题设计在产品中的运用很丰富,其中在图标设计中的运用是最普遍的,广泛运用于应用图标、金刚区图标、底部标签栏图标和其他功能图标等。
 
图标设计的运用形式很多,比如蛇年主题文案嵌入、生肖蛇相关元素设计、春节元素设计等。表现形式以立体质感居多,配色以突出春节氛围为主。
为什么我没有这样的设计思维呢?
 
 
 
小结
 
设计思维除了依靠自身专业基础以外,通过不断学习分析优秀的案例也能不断提升,希望本期的案例分享可以带给大家更多灵感。
 


作者:黑马青年
链接:https://www.zcool.com.cn/article/ZMTY1MDc0OA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

这些提升用户体验的小技巧,你知道吗?

杰睿

为了帮助大家更轻松地提升设计水平,这里整理了一些简单实用的小贴士。希望这些小技巧不仅能够助力您优化当前的设计项目,还能在未来的设计之旅中为您提供参考价值。
 
 
 
21.将不相关的字段隐藏
在设计表单时,建议不要一次性展示所有信息和步骤,而是在用户真正需要的时候再呈现,这样可以更好地管理复杂性。如果用户一打开表单就看到大量的内容,可能会感到压力很大,甚至会放弃填写。
因此,我们可以隐藏那些不相关的信息,去掉不必要的字段。通过合理地简化表单内容,可以减轻用户的心理负担,确保只有在他们需要的时候才显示必要的信息,从而减少他们在填写其他表单项时的干扰。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
22.统一风格的图片更有高级感
在选择图片时,我们的目标是实用性和一致性,而不是过分追求华丽的效果。如果只是一味地追求美观,可能会导致图片风格各异,从而破坏整体的视觉统一性,影响用户的体验。因此,设计师在挑选图片时,需要对风格进行精确的把控,或者在后期进行适当的处理,以确保所有图片都能呈现出一致的视觉效果。
图片的风格对整个App的整体感觉和用户的情绪有着重要的影响。风格一致的图片不仅能带来愉悦的视觉享受,还能激发美好的联想。我们可以从以下几个方面来控制图片的风格:
● 类型:如位图、插画或形状;
● 视角:如平视、仰视或俯视;
● 背景:如简约、复杂或纯色;
● 呈现区域:如堆积、局部或特写;
● 构图:如中心、水平线、对称或对角线。
此外,还有很多其他抽象的方式来调整图片,虽然这些方法不是绝对的,但我们可以通过多角度的尝试,力求让每一张图片都达到最佳的视觉效果。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
23.在中性色中融入色相
在上一期的内容中,我们探讨了如何设置中性色。当饱和度(S值)为0时,通过调整亮度(B值)4到5个等级,可以很好地表达信息的层次结构。这种方法虽然有助于保证设计不出错,并能满足最基本的需求,但在追求更高层次创意的设计项目中,可能会显得有些单一。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
在更为成熟和全面的产品中,设计师们往往不会仅仅依靠纯灰色作为唯一的中性色调。通常会在基础的灰色调中加入一些微妙的色相变化。这样做不仅可以让整体视觉效果更加丰富,而且还能有效避免画面因过于依赖灰色而显得僵硬或缺乏活力。
常用的方法是在中性色中融入少量蓝色调。蓝色能够传递出一种平静、稳重的感觉,给界面带来柔和而不突兀的变化,同时保持良好的清晰度。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
需要注意的是,在加入新色相时,我们的目标是创造颜色间的细微差别,几乎达到难以察觉的程度,而不是让这些差异成为用户注意力的焦点,这样才更有利于提升界面的整体质感。因此,对于较浅的颜色来说,所添加的色相强度应当控制得很低,反之,颜色越深则添加的色相越多,类似下面的这种曲线:
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
24.第三方图标风格应保持一致
大多数应用程序都支持通过第三方平台登录,这种方式可以显著降低用户在登录注册时所需花费的时间成本。这种便捷的登录方式一般在登录页面的底部提供多个(如微信、QQ、微博等)图标入口。然而,很多设计师会忽略一个细节,就是直接将第三方平台提供的官方图标,简单地调整大小使之统一,然后整齐排列在一起,并没有进一步针对整体视觉效果进行专门的设计优化。
对于追求高品质用户体验的产品来说,任何不起眼的小细节都不应该被忽略。在处理第三方图标时,应以自己产品的图标风格为基础,对所使用的第三方登录图标进行重新设计或适当调整。这不仅能够确保整个界面风格的一致性,提升美观度,还能增强品牌识别度,让用户在整个使用过程中感受到更加连贯且专业的体验。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
25.可视化密码比输入两次更直观
为了提升您的使用体验,并确保密码的安全性,可以让用户在输入密码时自由选择显示或隐藏密码内容。这种方式替代了传统的双次输入验证方式,尤其有助于创建有效的密码。用户可以直接看到自己设置的密码是否满足安全标准,同时也减少了因重复输入而造成的错误。
另外,系统应当明确地展示密码的具体要求,并为用户提供即时反馈,帮助他们了解如何构建更安全的密码。例如,在用户开始输入密码时,界面下方可以实时更新密码强度(如弱、中等、强)及已满足的安全条件(比如长度、包含数字/符号/大小写字母等)。这样做不仅能让用户更好地理解什么是好的密码实践,还能激励他们遵循这些建议,从而提高账号的整体安全性。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
26.使用合适的表单录入控件
在设计表单时,选择合适的输入控件可以帮助用户更好地理解每个字段需要填写的信息量。
  •  
    能通过选择来完成的操作就不要让用户手动输入,这样不仅方便了用户操作,也减少了错误的发生。
  •  
    对于那些内容较短的输入项,比如姓名或电话号码,可使用单行输入框,前提是确保让所有输入的内容都能清晰可见。
  •  
    像评论、反馈或这种可能包含较多文字的地方,应使用多行文本框。这样用户能更轻松地查看和编辑文本内容。同时,我们还可以通过一些视觉提示,例如滚动浏览、输入框右下角的高度调整等,这样更便于用户操作。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
27.提供解决方案助力转化
在UI设计过程中,当用户尝试进行某项操作时,因未满足特定条件或出现操作失误而无法继续,这可能会对转化率产生负面影响。为了改善这种情况,在设计时可以采取更加贴心的做法:明确告知用户为何无法进入下一步,并提供具体的解决建议。这样做对于提升转化率非常有帮助。
比如,在用户打算用账户余额购买服务的情况下,如果仅仅提示“余额不足”,用户可能会感到困惑,甚至需要多次尝试不同的路径来完成充值和购买过程。一个更佳的解决方案是直接向用户展示当前账户余额,并提供快速充值链接。这样一来,用户可以直接通过这个链接轻松完成充值,随后顺利购买所需服务。这样的设计不仅简化了操作流程,也大大提升了用户体验的流畅度。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
28.标签栏的高级感
大多数标签栏设计都倾向于简洁风格,主要通过选中和未选中的状态来区分不同的选项。状态的变化依靠文字颜色的变换或在选中的标签下方添加一个小横条来实现。尽管这样的设计看起来简单,但要想让它脱颖而出却并不容易。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
很多产品从其品牌的独特性中汲取灵感,利用品牌作为用户熟悉且喜爱的形象作为设计的基础,这样做不仅能够建立一种视觉上的连贯性,让用户感受到内外一致的美好体验,同时也能加深他们对品牌形象的记忆。除此之外,加入一些有趣味性的图案也是一个不错的选择,它们能以独特的方式吸引用户的注意力,为用户提供更加愉悦的视觉感受。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
29.合理的规范输入格式
在表单设计过程中,虽然大多数输入项可以采用通用的处理方式,无需特别干预,但一些特殊类型的表单项,设定合理的格式约束显得尤为重要。这样做不仅有助于系统更准确地收集数据,还能有效减少用户填写错误的可能性,提升整体数据质量。
对于某些特定信息如地址、手机号码以及银行卡号等,可通过技术手段自动为这些长串文字自动添加分隔符,如空格或短横线,这样做能够使信息更加直观易读,便于用户检查自己所填内容是否正确无误;同时,也使得后续的数据处理工作变得更加简单高效。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
30.页面加载中,提前展示布局
在众多产品中,用户界面的数据或内容在完全加载之前通常仅显示空白页面。这种处理方式可能导致用户困惑,因为他们无法确定当前状态是正在加载、已加载完毕但无内容可展示,还是遇到了错误。
实际上,用户界面的布局往往是相对固定的。因此,在实际内容加载完成前,提前向用户展示界面的基本结构是一种更为友好的设计策略。因为在等待数据加载的过程中,用户能够预览即将呈现的内容框架,从而减少了不确定性带来的焦虑感。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
此外,这一做法符合人机交互设计中的一个重要原则——系统状态可见性。根据该原则,产品应当清晰地告知用户当前发生了什么,并提供足够的反馈信息以帮助其理解系统的现状及后续步骤。通过预先展示UI布局,应用程序不仅表明了正在处理请求的状态,还为用户构建了一个对未来操作环境的心理预期模型,进而提升了用户体验的整体满意度与效率。
 
 
31.表单页内容过长,适当进行分页
在对表单内容进行了精简处理后,依然显得很长,应该避免一次性向用户展示所有信息。过长的表单不仅会增加用户的填写时间,还可能引发用户的困惑与不满情绪,最终导致放弃填写。为此,建议根据逻辑关系及属性将表单项合理地分配到多个页面中,且清晰展示整个流程进度情况。这样可以使用户感受到填写过程更加简便流畅,同时也能帮助他们更好地理解整个表单结构,从而专注于当前的任务。
值得注意的是,在采用分页策略时,需谨慎平衡分页的数量与步骤的复杂度。过度细分会无谓地增加操作环节,反而可能引起用户的反感,进而产生新的问题。因此,在规划分页方案时,应当综合考虑简洁性和易用性原则,确保最终方案既能有效简化任务又能保持良好的用户体验。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
32.有时候,背景色比分割线更显高级感
在过去,设计师们常常使用线条来清晰地划分不同组件之间的界限。然而,在当今流行的扁平化设计理念中,这样的做法有时会让页面显得有些拥挤,并且缺乏层次感。一个非常有效的替代方案是为相邻元素选择仅有细微差异的背景色来进行区分。这种方式不仅能保持界面的整体美观与简洁,还能够让用户更加自然流畅地识别出不同的信息区域。这样在确保了内容的可读性和易用性的同时,也能为用户提供更加舒适的视觉体验。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
33.适当加大触控热区
你是否有过这样的体验:在使用某个应用程序或网站时,对着界面上的按钮一顿乱点,却发现要么完全没有反应,要么系统反馈特别慢。你可能会怀疑是手机卡顿了或者网络连接不稳定,感觉非常糟糕。其实,很多时候这种情况并不是因为设备性能差或网络问题,而是用户界面设计上存在一些小缺陷。
设计师们都知道,在进行UI设计时面临着一个挑战:如何在美观性和实用性之间找到最佳平衡点?特别是对于像按钮、超链接以及单选/复选框这样的交互元素来说,它们的实际显示大小往往很难达到人类手指接触区域的理想尺寸。如果这些控件设计得太小,用户就很难准确点击到目标位置,导致操作效率降低甚至失败。
从视觉效果考虑,当某些功能性组件需要保持较小外观时,我们可以确保可触发区域足够大。这样即使用户视线不那么集中,也能轻松完成任务,避免因误触或其他原因造成的不便。值得注意的是,无论该元素本身看起来有多小,它所关联的触控热区都不应低于标准值。例如,在iOS平台上,推荐的最小可点击区域大小为44x44 pt;而Android操作系统中,则建议至少保持48x48 pt。这样保持了界面的美观性,还能大大提升用户的操作体验。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
34.为图片添加色彩层营造氛围感
在图片上添加色彩层或将其转换为单一色调,可以创造出类似黑白照片的效果,这样能显著增强图像中物体或人物的形态感。通过简化色彩,观众的注意力更容易集中在图像的核心内容上,从而提升了视觉主体的表现力。
此外,选择不同的单色调不仅能突出主题,还能有效营造特定的情感氛围。比如,蓝色调可能会给人带来一种宁静、平和的感觉;而暖色调如红色或橙色,则可能激发温暖、活力甚至是紧张的情绪。通过精心挑选和运用色彩,我们可以极大地丰富视觉语言,提高图像传递信息的能力。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
35.使用前端验证,提升信息的有效性
前端验证是一种在用户输入信息时即时检查数据有效性的方法,无需将数据发送到服务器。这项技术基于预先设定的规则,在用户离开输入框时自动启动,能够快速检测诸如格式、长度或类型是否正确等问题。这样做的好处在于,它能够在用户完成整个表单之前就发现并指出潜在错误,从而提升了用户体验和数据准确性,避免了等到最后提交才发现问题所带来的不便。
在设置前端验证时,请记得不要过早开始校验过程,以免造成持续不断的错误提示,给用户带来困扰。最佳实践是在用户完全填写完当前项之后再进行验证。这样做既能保证及时给出反馈,又能避免因频繁出现提示而打断用户的操作流程,让整个体验更加顺畅愉快。
02期 | 这些提升用户体验的小技巧,你知道吗?
 
 
 
 
结语
创造既美观又高效且易于使用的UI界面确实需要投入不少时间和精力,还可能要经历多次的迭代与改进。不过,正是通过这一系列细致入微的调整过程,我们才能打磨出一款让客户、用户以及我们自己都感到满意的优秀作品。



作者:大漠飞鹰CYSJ
链接:https://www.zcool.com.cn/article/ZMTY1MTk0NA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

 

 

用一篇文章,带你完整了解近年来流行的视觉风格

杰睿

 
 
一、什么是视觉风格?
在理解“视觉风格”这个词之前,我们先把它拆开来看,先尝试理解下什么是“风格”。
"风格" ,是一个相对抽象的概念,指的是一种在作品或创作中表现出来的独特方式或特征。
相较与“视觉风格“,它通常是一个更广泛的概念,可以应用于多个领域,包括艺术、设计、文学、音乐等,具体体现在内容、形式、技巧、表现等方式上。
"视觉风格" 是风格的一个具体领域,通常用在艺术、设计和多媒体上,比如我们常说的插画风、摄影风、平面风、网页风、OS 系统风格等。
视觉风格强调了视觉元素和视觉方面的独特性,如颜色、构图、图案、排版、字体、动画等。通过这些视觉要素,创造出一种独特的视觉外观,带给用户情感上的感受。
一个成熟的视觉风格,往往会给人带来一种特定的感觉,并与特定的产品产生关联,形成心理印记,从而因为风格而记住它,所以视觉风格在产品设计中重要性不言而喻。
我们把话题再聚焦一点,今天主要聊聊互联网产品的视觉风格。
 
二、如何拆解视觉风格?
当我们体验到一个产品或者看到一张图后,从哪些角度去拆解出它的风格特征呢?
一般可以从作品中的色彩、排版、质感、字体、动画、图案、构图等等设计要素进行分析,看看这些视觉元素组合关系和比重。
讲到这里,在我们视觉设计领域的最新趋势下,通常用六个字 ”形、色、字、构、质、动“ 来制定视觉风格带给人的感受。
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
 
其实我在看作品集的时候,一般也是从这些角度去分析作品的专业度,然后再结合业务场景,看做的视觉方案能否有效解决业务问题。
另外,平时提到的审美练习,讲究一个多看多分析,去思考设计背后的原理,组合方式。多去研究美的东西的特点,看细一些,也可以尝试从以上这些角度去拆解一套视觉设计。
对视觉风格有了理解,平时也知道从哪些角度去看一张图了,那么接下来就需要多去了解一些比较常见的视觉
设计风格
,了解具体的表现手法。
 
三、常见的视觉风格有哪些?
当把视觉风格聚焦到 APP 和网页设计等互联网产品时,风格其实也有很多,说一些比较常见的。
1. 苹果风(Apple Design)
以毛玻璃材质为特点,丝滑的动态效果,轻拟物的质感。苹果的设计强调平滑的曲线和圆润的边缘,常常使用明亮的颜色,注重图像和照片的质量。
 
 
 
iOS 17 风格
iOS 17 风格
 
 
mac os
mac os
 
 
iPad os
iPad os
 
 
iwatch os
iwatch os
 
 
2. 扁平化设计(Flat Design)
扁平设计是一种简化的设计风格,通常会用明亮的颜色、清晰的图标和简化的界面元素。我印象中有一小段时间,这个风格很流行,微软是最早将这种设计风格应用于其界面的公司之一。
 
win8风格
win8风格
 
 
平面设计
中,所有元素都应该有它存在的价值,哪怕装饰元素也是如此。如果某个方面没有任何功能用途,就会分散用户的注意力。这就是扁平化设计简约本质的原因。
然而,仅仅因为它缺乏任何华丽的设计并不意味着这种风格很无聊。明亮、对比鲜明的颜色能轻松吸引注意力并引导用户的视线。
有些设计师可能会觉得这种风格过于朴素,就给它增加了一些其他细节,比如长投影就是那个时期出来的。
 
来源:aiki007
来源:aiki007
 
 
当然上面这套长投影,年代比较久远了一点,下面这套作品的扁平风格上就更现代一些。
 
来源:Mike | Creative Mints
来源:Mike | Creative Mints
 
 
 
3. 材质设计(Material Design)
材质设计是由 Google 推出的一种设计风格,强调实际材质和动画效果。它为应用带来层次感和现实感,同时提供了良好的用户体验。完整的设计组件,可以参考官方地址:
https://m3.material.io
在这套风格中,能看出来也是趋向于扁平化的,颜色在使用上饱和度也没有很高,质感也很克制,让用户更聚焦在内容上。
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
 
4. 抽象艺术风格(Abstract and Artistic Styles)
这种风格常用在海报设计中,以吸引特定用户或传达创新的形象。这些风格可能包括不寻常的图形、颜色和排版。
这个风格我印象最深的就是 Behance 上的一个老哥做的 365 天挑战,每天一张脑洞海报,几乎每一张都是精品。如果没看过的也可以去围观下,我把地址也放上,ins 上还在更新。
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
 
5. 极简主义(Minimalism)
极简主义设计注重简洁和内容集中,通常使用简化的元素和无冗余的界面。它适用于需要用户专注于核心任务的应用。
这种设计通常会用到大面积的留白,以及黑白灰的颜色搭配,高质量的大图,使得整个设计具备很强的高级感。
这个风格我以前也有专门写过文章《Behance 首页推荐的作品集为什么这么高级?我们能从中学到什么?》。
 
来源:Shaban Iddrisu™
来源:Shaban Iddrisu™
 
 
来源: https://www.awwwards.com/sites/brainbox-ai
来源: https://www.awwwards.com/sites/brainbox-ai
 
 
来源:Huy Phan
来源:Huy Phan
 
 
来源:Hannes Ahremark
来源:Hannes Ahremark
 
 
6. 新拟物主义(neumorphism)
这种设计风格,通过使用逼真的阴影和光线效果来模拟物理世界中的物体,同时保持扁平化和简约的设计。
这种风格曾经内风靡了一阵子,现在好像又见得比较少了。
我其实对这种风格不是太感冒,原因是这种质感似乎显得有些多余,还会占用一部分内容空间,信息利用率不高。它的设计样式也做的比较抢内容,美观度上我个人也不是太喜欢。
关于这种风格设计,之前也写过文章《新拟物化会是 2020 年的 UI 设计趋势吗?》
 
来源:Devanta Ebison
来源:Devanta Ebison
 
 
来源:Ceptari Tyas
来源:Ceptari Tyas
 
 
来源:Sèrgi Mi
来源:Sèrgi Mi
 
 
来源:Filip Legierski
来源:Filip Legierski
 
 
来源:https://www.interaction-design.org
来源:https://www.interaction-design.org
 
 
之前 QQ 的小世界第一版出来的时候也用到了这个风格趋势,给人眼前一亮的感觉。
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
 
即使是新拟物风格,其中也是可以做一些不同发挥的,这里也可以一起看下他们当时做的方案对比,体会下不同风格的侧重点
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
 
7. 科技和未来主义(Tech and Futuristic Styles)
科技和未来主义设计风格使用高科技元素、光效和动态效果,以突出创新和前瞻性。这种风格在科技、游戏和科幻类应用中常见。
比如现在的 HMI,HUD,数据可视化设计,风格都被设计的有很强的科技感,会用到很多偏科技感的光效,蓝色,以深色居多。
 
来源:Logan Gan
来源:Logan Gan
 
 
来源:Romanov
来源:Romanov
 
 
来源:Stefan Grimm
来源:Stefan Grimm
 
 
来源:Stanislav Hristov
来源:Stanislav Hristov
 
 
来源:Breaking bad
来源:Breaking bad
 
 
8. 插画风格(Illustration style)
这种风格通常会用到大面积的插画设计,有比较强的亲和力。
既然用到了插画,在颜色的使用上相对会更大胆一些,颜色饱和度比较高。
这种风格在网页设计,天气设计,手机壁纸,冥想类应用中很常见,我自己也曾经设计过这种插画风格的壁纸和天气。
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
我之前画的几张壁纸
 
来源:Mike | Creative Mints
来源:Mike | Creative Mints
 
 
来源:Mike | Creative Mints
来源:Mike | Creative Mints
 
 
来源:Bogdan Falin
来源:Bogdan Falin
 
 
来源:Moatasem Abbas Kharraz
来源:Moatasem Abbas Kharraz
 
 
来源:Zak Steele-Eklund
来源:Zak Steele-Eklund
 
 
 
9. 2D+3D
这种风格是一种 2D 结合 3D 的形式,现如今在做风格化设计的时候特别抢眼。
核心设计方法就是把一些内容用 2D 的形式去展现,把一些需要强调的图片,例如商品,模型做成 3D 来表现。
在未来随着 vision pro 的发布,空间计算的不断成熟,相信这种设计风格趋势会越来越多。
 
来源:Cosmin Capitanu
来源:Cosmin Capitanu
 
 
 
 
来源:Cosmin Capitanu
来源:Cosmin Capitanu
 
 
来源:Mike | Creative Mints
来源:Mike | Creative Mints
 
 
来源:Mike | Creative Mints
来源:Mike | Creative Mints
 
 
来源:Lay
来源:Lay
 
 
10. 自然和有机风格(Natural and Organic Styles)
自然和有机的设计风格使用大自然的元素、有机形状和自然纹理,以传达温暖和人性化的感觉。
这种风格适用于健康、环保和户外应用。
 
来源:Oyolloo
来源:Oyolloo
 
大家在一些包装样机中,经常会看到一些带树叶投影的风格,这种投影给人一种现实生活的感觉,自然温暖。
 
来源:beehouse studio
来源:beehouse studio
 
 
 
11. 草图和手绘风格(Sketch and Hand-Drawn Styles)
草图和手绘的设计风格比较强调创意、亲近感和个性化。这种风格在博客、艺术和小众应用中流行。
其风格特点容易看出来,带有卡通式的描边和硬投影,颜色使用上饱和度比较高
 
来源:ZhaoWei
来源:ZhaoWei
 
 
来源:Joseph Ash Sakula
来源:Joseph Ash Sakula
 
 
来源:Sajon
来源:Sajon
 
来源:creativemarket
来源:creativemarket
 
 
在 dribbble 上有一位设计师叫:Sulton handaya,特别擅长这类风格,在他的主页有非常多这种风格的作品,通过把一类风格做到顶尖,给人留下深刻印象,建立了属于自己的风格标签。
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
 
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
 
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
 
12. 品牌自定义风格( Brand Custom Styles)
现在很多应用选择采用自由品牌的设计风格,以突出其独特性和品牌标识。
这个风格方向,其实也是现在主流的设计方式,依据公司产品调性和品牌特征,提取品牌超级符号,包括颜色、造型、动效、排版等等进行延展,保证其品牌风格的独特性,具备很强的识别度和记忆点。
这里也放 2 个比较经典的例子。
一个是 kakao,我经常讲这个例子,这个案例就是从项目的目标开始,以满足用户的个性化阅读需求。
作为一个提供阅读的平台,他们找到了一个以“纸”为锚点的超级符号,并以此延展到图标、动效、造型、色彩、插图等等视觉细节上。
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
 
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
 
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
 
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
 
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
 
另一个案例是航空公司的风格设计案例,作品巧妙的找到飞机窗户的造型作为符号,像我这样经常坐飞机的人,看到这样的椭圆形很自然的就和飞机联系上了。这种链接关系很自然,可以给用户留下深刻印象。
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
 
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
 
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
 
 
 
用一篇文章,带你完整了解近年来流行的视觉风格
 
结语
视觉风格是一系列设计准则和规范,用于确保用户界面的各个方面都与品牌或项目的整体风格和形象保持一致。
这有助于用户识别和记忆界面,提高用户体验,同时也增强了品牌的识别度和专业性。
设计风格是一个轮回,所以设计趋势我们需要去关注,但不可以盲目选用,还需要结合我们自身产品想要传达的理念,满足用户的诉求。
 



作者:彩云Sky
链接:https://www.zcool.com.cn/article/ZMTU5NDg1Mg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

高级设计师才会的设计思维,31个细节帮你深入了解!

杰睿

1. 并不存在单一的设计过程

 

设计过程被描述为多个阶段,每个阶段都包含不同的活动来完成该阶段,它没有统一的标准流程,每个公司和设计师都有自己的流程版本。

尽管存在多个流程,但一般流程和阶段类似于以下内容:

了解问题:初步了解问题。观察、采访和倾听用户。

定义问题:解释和定义要解决的问题。

构思:通过头脑风暴产生尽可能多的想法。

原型设计:构建原型并与其他人分享( 再次缩小解决方案空间,为实验阶段 )。

测试:测试可能的解决方案、实施、改进或重新设计。

 

2. 设计思维是传统解法和创造性设计过程的结合

 

传统的问题解决采取有条不紊而又科学的形式。该过程从一个问题开始,定义要采取的步骤以及达到解决方案的工具或方法。

设计思维是一种创造性的策略,可以产生创造性的未来结果和/或创造性的问题解决方式,它应该被认为是一种以解决方案为中心的思维策略。

它通常被描述为一种创造性、主观和感性的对许多大型组织的分析逻辑( 布朗,2008 年 ),或作为分析和创造性推理模式的组合( 邓恩 & 马丁,2006 年;利特卡,2015 年 )。

 

3. 设计思维是问题解法的进阶

 

设计思维来源于常规问题解决方法,常规问题解法是设计思维的基础。

 

从解决问题到设计思维,Liedtka (2013)

结果发现,设计思维实际上也是一个解决问题的过程,而不仅仅是一个创新过程( 利特卡,2013)

一个例子是,丰田采用设计思维从头开始分析其西海岸的一个客户联络中心,在重新设计过程中,组建了一个由一线呼叫代表、软件工程师、业务主管和变革代理组成的跨职能团队,这一举动最终改变了客户和员工的服务中心体验。

 

4. 从起床到入睡,你都在解决问题

 

我们每天都会遇到问题,但是当我们解决同样的问题时,它们就成了例行公事( 似乎已经忘记它们是问题了 ),我们甚至都没有意识到正在解决这些问题。例如,我的办公室在 30 分钟路程之外,该怎么到达那里?开车、坐火车或巴士到目的地;除非车子轮胎被刺破,否则你就需要弄清楚如何到达办公室。

 

5. “设计思维”术语的产生

 

1990 年代,IDEO 的 David Kelley 和 Tim Brown 与 Roger Martin 共同创造了特定术语:“设计思维”,并将多年来酝酿的方法和想法封装成一个统一的概念。

 

6. 工程设计思维现在被称为设计思维

 

设计思维是以人为中心、开放式、基于问题的方法论。这种方法最初是为了改变工程教育中的教学方式,而工程师处理和解决问题的方式有其设计思维的基础。

 

7. 设计思维的历史早已出现(2000 年)

 

设计思维一词可以追溯到 1987 年 Peter Rowe 的著作:“设计思维。” 他描述工程师和建筑师处理问题的方法有很大不同。

90 年代初,认知科学家 Don Norman 加入 Apple 团队,担任他们的用户体验架构师,这使他成为第一个在职位中包含 UX 的人。他提出了“用户体验设计”这个术语,因为他想“涵盖人们对系统体验的所有方面,包括工业设计、图形、界面、物理交互和手册。” 从那时起,这些领域中的每一个都将用户体验,扩展到了自己的专业领域。

 

8. “棘手的”设计思维

 

设计思维在解决“棘手问题”时特别有用。

 

棘手问题的特征

“棘手问题”一词是由设计理论家 Horst Rittel 在 1972 年创造的,用来描述本质上非常模糊 \ 特别棘手的问题。棘手问题,有很多未知因素,没有确定的解决方案。问题或解决方案可能与另一个棘手的问题有关,因此这是一个需要设计思维的持续过程。贫困、饥饿和气候变化是一些现代的棘手问题。

 

9. 设计思维不仅限于数字化设计的应用

 

设计主题的范围是普遍的,因为 设计思维可以应用于人类经验的任何领域。

 

它可以用于:

符号和视觉传达:这包括平面设计的传统工作,如排版和广告、书籍和杂志制作、科学插图、摄影、电影、电视和计算机显示。

材料:这包括对日常用品的形式和视觉外观的传统关注 —— 服装、家用物品、工具、仪器、机械和车辆。

人类活动和组织性服务:包括对物流的传统管理关注,结合物质资源、工具和人类低效的序列和时间表,以达到特定的目标。

复杂的系统或环境:生活、工作、娱乐和学习。这包括系统工程、建筑和城市规划的传统关注点,或复杂整体部分的功能分析及其随后在层次结构中的集成。

10. 设计思维不仅限于设计师的实践

 

设计思维起源于设计师的培训和专业实践,但这些原则可以被每个人实践并扩展到每个活动领域。(布朗,2013 年)

在企业中,设计过程可以为企业环境中的问题解决带来创新思维。它还可以用于医疗保健,通过向护士、医生和管理人员教授设计思维技术,我们可以激励相关从业者贡献新的想法。

 

11. 了解问题是第一

 

不管是什么设计,理解和研究问题是必不可少的,因为我们能够从其出发,从而进行以用户为中心的设计。

 

设计思维的最早阶段是搞懂你能带来的情感价值。设计思维方法迫使你停留在提问与质疑阶段,而不是准确定义出问题后进入下一阶段。我们都有过快进入解决方案模式的倾向,所以设计思维方法迫使你真实地存在于这个不清楚、有时还非常混乱的时刻,从而使你对要解决的问题产生更好的理解。(利特克,2013)

 

12. 设计思维需要两种不同的思维

 

传统的问题解决涉及提出一个解决方案,但设计思维首先使我们发散,试图为问题生成各种可能的替代解决方案。然后让我们进行收敛性思维,缩小多种可能性,找到单一的最佳解决方案。

 

13. 设计思维是可以传授和学习的,它不是一种人格特质

根据利特卡和奥美 (2011) 的说法,设计思维的全部意义在于学习一种新的、系统的解决问题的方法。正如我们思考创造力一样,即使是设计思维也可以通过实践来教授和改进。

 

14. 设计过程不是线性的

 

设计过程从来都不是线性的,它由多次失败和迭代组成(布朗,2018)。

首先,设计师试图将问题与过去的类似案例联系起来。如果这种方法不能提供任何解决方案,下一步就是使用知识和创造力作为一种实验思维形式来产生新的想法。使用决策矩阵对这些想法进行评估,从而会产生被进一步分析和测试的解决方案。如果成功,它将被实施。如果不成功,则需要重新表述问题,并重复该过程。这是一个迭代过程,即循环方法。

这一持续不断的重新再设计过程,源于和客户亲密接触的洞察。

 

15. 调研是设计思维非常重要的工具

 

学习设计思维不仅仅意味着学习一套新的工具。它还意味着:学习收集和分析大量数据;学习挖掘对象可能的形态而不是自主认为他是什么;学习管理不确定感,以及与许多新的伙伴合作( 利特卡和奥美,2011)。你可以进行的研究类型分为三类:生成性研究、评估性研究和验证性研究。

 

16. “要么很快失败,要么经常失败”

 

一种常见的表述 —— 实际上是设计思维的另一种视角 —— 即设计师应该预料到会“很快失败或经常失败”(布朗,2009)。

当过程早期发生故障时,例如被拒绝的原型,实质上它可以为有效解决方案提供关键见解。这种观点与传统的先形成理论,再检验正误的方式相矛盾。

 

17. 公司正在将设计思维作为解决问题的核心方法

 

Airbnb、Braun 和百事可乐等多元化公司都在 采用设计思维并将其作为核心战略。例如,IBM 为全球旗下的 44 个设计工作室聘请了 1600 名设计师,并且正在培训数以万计的设计师员工建立深度创新能力 ( O'Keefe, 2017 )

 

18. 以人为本的思维

 

设计思维为我们解决问题添加了以人为本的元素。当我们试图通过牢记人们的想法来解决问题,并使用基于直接观察乃至访谈的研究时,我们便会捕捉到与消费者需求一致的意外见解和创新。

 

19. 可观的商业价值

 

它有助于将成功的产品更快地推向市场,最终节省企业资金。
IBM 的健康和人类服务组织的设计思维实践,通过有效使用设计和设计思维帮助企业将缺陷数量减少了 50% 以上。这种更高效的工作流程导致计算出的 ROI 超过 300%。

 

20. 对复杂问题的作用性

 

由于复杂的问题从来不能被所有人完全理解,因此在尝试设计解决方案时,处理歧义和多个并发的思路方向的能力是至关重要的素质。

设计思维通过综合和归纳思维,帮助实现质的飞跃。它允许通过解构来测试约束,并允许通过多样性思维和批评思维,来拥抱和探索歧义。

消费者通常不知道他们有什么问题需要解决,或者他们无法用语言表达出来。只有经过仔细观察,设计者才能根据真实消费者行为中看到的东西来识别问题,而不是简单地根据对消费者的想法来确定问题。这有助于定义模棱两可的问题,并找到解决方案。

 

21. 别名:跳脱框架的思维

 

该方法鼓励“跳出框架思考”(“疯狂的想法”);它蔑视显而易见的事物并采用更具实验性的方法。
在早期的流程阶段鼓励大胆的想法,以产生创造性的解决方案。使用它是为了让设计师可以尝试开发新的不受约束的思维方式,或对常见问题的创新解觉方法。

 

22. 设计思想家的特征

 

根据大多数设计学院的说法,具备特定特质的人能够更好地发挥设计思维的作用。

同理心:从多个角度想象世界 —— 同事、甲方客户、实际使用者和消费者的角度。要成为更好的同理心,必须倾听和观察他人的行为,注意并获得洞察力。

综合思维:重要的是不仅要有分析能力,而且要能够提出新颖的解决方案,还要凭直觉。

乐观:除非你相信有解决方案,否则在遇到挑战且解决方案遇到瓶颈时,你可能会放弃。

实验主义:重大创新并非来自渐进式调整。设计思想家以创造性的方式提出问题并探索限制因素,并朝着全新的方向发展。

协作:产品、服务和体验日益复杂,因此必须拥有一支具有不同背景的团队,以帮助从多个角度看待问题。

23. 有助于对抗某些偏见

当我们想到一个问题的多种解决方案时,对我们解决问题会非常有帮助,因此“功能固定性”阻止了我们以新颖的方式使用旧工具解决新问题。想要摆脱功能固定,首先是要让人们可以使用“改造后的衣架进入上锁的汽车”。这也是盗贼第一次可以用信用卡撬开简单的弹簧门锁。

 

24. 实用

 

为了帮助设计师利用文科和技术理论,整合多个领域的知识以找到创新的解决方案,我们采用设计思维来获得洞察力。该方法侧重于可视化和操作,因而帮助我们更容易地了解实际解法,而不仅仅是理论模型。

 

25. 执行

 

第一批美国公司在 2000 年代初期开始实施设计思维,这一概念引起了德国投资者 Hasso Plattner 的兴趣,他于 2006 年资助创建了两所设计学校(d.schools),其中一所位于波茨坦大学(德国),另一所位于美国斯坦福大学。由于两所学校都成功地为大型组织提供了高管设计思维培训,因此该研究重点关注这些国家,以寻找早期实施者。

 

26. 团队思考

 

设计思维通常涉及希望参与整个设计和开发过程的庞大利益相关者团队。

观点、才能和经验的多样性被认为是注入新思维的部分重要来源。多样性确保通过融合不同的观点、技能和知识来产生创意(卡振思,2018 年;萨梅和德拉赫-扎哈维,2013 年)。设计思维的协作方法和工具可帮助团队以积极的方式利用他们的差异。

决策是平等的,因为每个成员的意见都被征求和使用(卡尔格伦等,2016)。

27. 不需要花哨的技术原型

当 IDEO 去 Apple 展示他们的鼠标时,它不是什么花哨的设备,而是一个用胶带粘起来的原型。

低保真原型制作起来既快速又便宜( 想想几分钟和几分钱 ),但可以从用户和同事那里得到有用的反馈,这符合快速验证、廉价试错的原则。为每个想法投入尽可能少的资源意味着前期投入的时间和金钱更少。此外,将多个原型带到现场进行测试为用户提供了比较的基础参考,同时也有助于揭示某些需求。

 

28. 过程强调心态和行动

 

为了创新,设计思维意识到认知和行动对创新过程很重要。认知包括接受度、乐观和创造性的信心( 凯莉 & 凯莉,2013;郑,2018),而行动包括快速原型设计、旅程地图和假设浮现( 假设浮现:assumption surfacing,这是一种评估技术,涉及写出潜在的假设和反假设。)( 卡尔格伦等,2016;利特卡,2015)

 

29. 在组织中实施设计思维的挑战

 

如果领导层不欢迎风险、模棱两可和风格的改变,实施起来就会变得更加困难。它会被管理者“质疑”其具体指标

沃尔特斯 ( 2011 ) 声称,由于设计思维的模糊性,它与组织文化相冲突。

据受访者称,在日常业务中使用设计思维之所以不会是最优选项, 因为它是资源密集型的,增加了工作量。( 丽莎等,2016)

在医疗保健等规避风险的行业和公司中,“经常和早点失败”的方法被认为是非常困难的。

 

30. 设计思维的问题

 

许多设计师反对设计思维这一观点,设计思维不仅关乎一个过程,而且关乎改变思维过程并提高人们可能提出的解决方案的创造力。

“设计思维”的推广已被大型全球公司用来增加业务。不过,在更广泛的设计世界中,我甚至会说“设计思维”的过度宣传导致了所提供设计质量的下降。—— Yasushi Kusume

弗吉尼亚理工大学科学、技术和社会助理教授 Lee Vinsel 在《设计思维运动是荒谬的》中写道,“归根结底,设计思维与设计无关。这与文科无关。这与任何有意义的创新无关。如果这意味着重大的社会变革,那肯定不是关于“社会创新”。这是关于商业化的。”

 

31. 为什么需要共情

 

观察人们的行为以及他们如何与环境互动,可以为你提供有关人们想法和感受的线索。

你可能认为你知道问题所在,但只有通过观察才能了解消费者真正需要什么。

宜家派设计师到人们家中,观测他们的互动行为来了解他们的需求。这将使设计者能够推断这些经历的无形含义,以发现洞察。这些洞察提供创新解决方案的构思方向。而事实上,最好的解决方案来自于对人类行为的最佳洞察。

Good Kitchen 是一家为老年人和体弱者提供膳食的社会服务机构。起初的问题似乎是设计不当的膳食菜单。然后设计思维揭示了无数问题,所有问题都源于服务本身的性质。因此,经由对服务进行了彻底改革的之后,最终提高了客户和员工的满意度(利特卡,2014)



作者:用尽晴天
链接:https://www.zcool.com.cn/article/ZMTUyODUzNg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

日历

链接

个人资料

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

存档