首页

54个绝妙UI/UX设计秘诀:让你的设计脱颖而出!

天宇

当你为你的项目创建有效的,可访问的,漂亮的ui时,只需要最小的调整来帮助快速改善你的设计。 努力创造。在这篇简短且易于理解的指南中,我收集了一些容易放置的内容。在实践中,这些小技巧可以毫不费力地帮助你改善你的设计,还有用户体验。

希望你喜欢!

1·让你的元素出现更多

 

用微妙的边界定义。

使用多重阴影或非常微妙的边界(只是一个阴影比你的实际影子)周围的某些元素可以使这些元素出现

更清晰,更清晰,帮助你避免那些看起来泥泞的阴影。

 

 

2.减少字母间距

 

标题给一个更好的光学范围。减少长格式正文的字母间距?这是一个大大的“不”。但对于标题……我要说“是”!

你的标题很可能会比他们的标题更大,更重。相比于正文,字母之间的间距有时会出现视觉上更大,这并不是你想要的。减少字母间距,只是少量,可以使你的标题视觉平衡,更易于阅读,通常更赏心悦目。

 

 

3.图表一致性

 

为了一致性,确保你的图标具有相同的视觉风格。确保它们拥有相同的视觉风格;同样的重量,要么填满,要么秒变了。不要混搭。

 

 

4.页面可以用一种字体

 

只使用一种字体就很好。在设计时,使用单一字体是绝对没问题的,这样做实际上可以帮你产生更强、更持久的结果。忽略“总是使用两种字体”最小值的人群。使用以下组合重量,大小和颜色,你仍然可以产生完美的可接受的结果。虽然只有一个单独的字体。

 

 

5.适当的留白

 

留白是UI设计朋友。大胆的使用。适度的留白,即使是少量的白色物质,但要使用得当。能让你的设计透气,而且看起来更光亮。

 

 

6.20pt的文字

 

创建长篇内容?给20 pt试试。对于长形式的内容(即微博文章,项目描述等等),试着这样做20pt(甚至更多一点)为你的文本字号。当然,这取决于所选择的字体,但大多数流行的字体在20pt时效果得很好,并带来更好的阅读体验当你的用户面对一堵文字墙的时候。18pt太过时了。

 

 

7.字号集比例

 

使用字体比例定义一个适合的字体大小集。使用字体比例可以帮助您轻松、实用地定义一组字体大小。顾名思义,Type Scale基于一个比例因子(比如1.25)工作的。从一个基本字体大小(18px)和乘(或除)它与缩放因子得到的字体大小要么更高(即;H₁,H₂等),或较低层次(即;标题、按钮等)字体比例将帮助你产生看起来和谐的文本字号集。因为他们的大小根据设定的固定比例增加和减少。

 

 

8.界面颜色定义

 

选择一个基本颜色,然后使用色彩和色调增加均匀性。你猜怎么着?你不必总是用大量的颜色填充你的设计。如果项目允许,简单地使用一个有限的调色板选择一个基地颜色,然后使用你选择的颜色的色调和阴影可以增加一致性以最简单的方式来改变你的设计。

 

 

9.登陆用户体验

 

改善用户登录的体验。记住拇指规则。允许用户在任何时候跳过您的移动应用程序上线序列,并且放置跳过链接在拇指容易触及的位置。只是一个简单的调整,可以为你的用户提供更好的体验……

记住,拇指仍然是主宰!

 

 

 

10.阴影来自一个光源

 

你的影子来自其中一个光源对吧?确保你的影子总是来自一个光源。这是一个简单的错误,但它可以让你的设计看起来更抛光且统一。记住,我们不是生活在一个拥有一千个太阳的国度里。

 

 

 

11.建立字体集合

 

使用更好的字体组合,效率会很很快。当你想要提高你的字体组合技巧的时候,当面对1000个字体选择,只是去寻找对应的自己集合,效率会快很多。

 

 

 

12.提高你的对比

 

文字和图像与一个微妙的覆盖。根据文本可能放置在图像上方的位置,您可以选择尝试,并测试完整的图像覆盖,或更微妙的(从下到上,或从上到下)渐变叠加,以实现两者之间的简单对比。为了在你的文本之间形成良好的对比,不要太复杂的内容和图片。

 

 

13.使用居中排列文字要有节制

 

太多就会导致用户体验不合格。尽量只在标题和小段落中使用中心文字。对于几乎所有其他内容,保持文本左对齐。你的用户会感谢你的你。

 

 

14.多字重

 

当选择一个多用途的文字,尽量找一个大量权重。你搜索的字体有很多选择吗?重量、风格?如果你打算在你的一些项目中使用它,请尝试并确保它是这样做的。只有一种重量或样式。不行的。如果可以的话,我建议你避开这些。当然也有例外,某些项目会要求“只有一种风格”

更精致的字体,但对于绝大多数项目,你想要的字体再多一点就能…嗯…选择。即使你决定只使用两种或三种重量或风格,希望你在设计过程的后期需要更多的空间。

 

 

 

15.浅色背景不要文本过亮

 

想要创造更容易理解的界面,对吧?把你的文字调暗在光亮的背景上。在浅色背景下工作时,不要让你的文本太亮。

 

 

16.纯黑色文字未必是好

 

当涉及到长形式的内容时,某些常规的粗细字体仍然可以看。但太重了,在屏幕上会很僵硬。你可以很容易地解决这个问题,选择一些像深灰色(即#4F4F4F)的基调,把文字往下写,让眼睛更容易看。

 

 

17.通过色彩对比度作区分

总是通过icon最突出的内容。你认为这是常识,对吗?我并不觉得。通过使用色彩对比度做区分,尺寸和标签,确保尽可能突出。如果可以的话,不要总是只依赖图标。如果可以使用文本标签,那就使用它们,让用户更好地理解。

 

 

18.字体越小,行高越大

 

当你的字体变小时,请增加行高,以达到更好的通用性。这同样适用于当你的字体大小增加。简单地降低行高。

 

 

19.“Il1”测试文字可读性

 

使用x-height来测试字体的可读性。基本上,x-height是一个小写字母' x '相对于大写字母高度 (T)的相同字体。如果你的字体有一个大的x高,通常有助于更好地阅读,特别是在使用长形式的正文文本。另一种确定字体可读性,并缩小范围的方法如果你有一些无法选择的字体,可以做这个测试,比较来自特定字体的三个字符:大写字母I,小写的L和数字1。

 

 

 

20.突出实用动作

 

当设计一个在应用程序内部使用的菜单时,确保提供最多经常使用的动作(例如:上传图像,添加文件等)最突出的屏幕上。

 

 

 

21.颜色-从你的图像中选择

 

颜色-从你的图像中选择,会给你的产品带来生命。简单地从你的产品图片中选择颜色,然后应用各种色调。你选择的颜色阴影到你的背景,文字,图标或更多,可以添加。你的设计具有丰富的视觉趣味和个性。

 

 

22.不同字体,不同行高

 

基于字体的x坐标,设置您的线高度。不同x高的字体需要不同的行高测量,实现文本行之间的正确分隔。即使你可能有两种字体相同的字体大小(即:18px)它们的x的高度可以有很大的不同,这在选择正确的线的种类起着很大的作用高度来实现。

 

 

23.突出最重要元素的方式

 

突出最重要的元素。通过使用字体大小,权重,颜色和布局的组合,可以很轻松的突出UI中最重要的元素。只是很简单,但微妙的调整,让用户体验更好一点。

 

 

24.错误下额外的视觉辅助

 

操作错误的时候,添加一个额外的视觉辅助。在用户刚刚采取的操作附近添加一个错误消息可以是简单的形式,但很有帮助,当他们填写任何形式的表格时额外的视觉辅助。

 

 

25.移动端热区创建

 

尝试在移动端创建慷慨的热区。当为移动设备设计时,尝试创建足够大的可点击区域,是好的。对于只包含文本的按钮和链接来说,这是很有挑战性的,尽可能使用带有标签的图标。

以下是iOS和Android的最小推荐点击区域:

44 x 44pt用于iOS

48x48dp用于Android

 

 

26.短标题上尽量使用全大写

 

在短标题上尽量使用全大写。如果你想在标题上使用全大写,请确保它们在任何时候都很短。有可能,最好是一行。将它们用于较长的文本是不好的。和之前的技巧一样,在标题中添加少量的字母间距。能让他们呼吸顺畅,而且视觉效果更好。

 

 

27.保持文字与图像的对比度

 

在轻文本和图像之间,保持可接受的对比度。一定要确保浅色的文字在浅色的背景下是清晰的。简单地应用一个稍微不透明的背景在你的文本后面将保持这些元素之间的对比度很好。

 

 

28.英文标题字体推荐

 

看看这些很棒的字体,用在标题非常好的。发现他们真的很适合标题,设计感很强。(我没有推广费用,请放心用)

 

 

29.英文长文本字体推荐

 

看看这些很棒的字体,用于长文本是非常好的,强烈推荐使用。(我仍然没有任何推广费)。

 

 

30.让垂直节奏恰到好处

 

标题和正文。当你想实现一个好的垂直节奏,以及一个强大的视觉之间,需要对文本元素排版、间距作设计。我见过许多设计,最常见的是在文章列表中,它们已经被应用标题的上下空白相等,这样就失去了这种联系在它下面有正文。在这种情况下,我总是会给我的标题更多的顶部边距,而在底部,标题和下面的内容之间的连接是更强,有良好的垂直节奏,视觉层次保留在所有的文章之间。

 

 

31.使用具有信息性的提示符

 

对于下载指标,试着去做尽可能提供信息。对于用户,尝试使具有信息性的下载指示符对用户很友好。你可以通过使用颜色来实现这一点,用百分数来显示当前进度,一个简单的图标,让他们可以在任何地方取消下载时间。

 

 

 

32.保持标题相对简洁

 

如果你能保持标题简短,简洁……“想做就做”。

如果可以,如果合适的话,保持标题简短,时髦,切中要点。而不是“这是你的风格,你的方式”,简单地使用像这样的“你的风格。你的方式。”人们会浏览,保持这些标题简短有力有助于他们更快地消化中的信息。

记住,这种方式可能会让人感觉很突然,你需要考虑一下你所从事的项目类型,以及目标受众来决定方法是合适的,相对于更标准的格式。

 

 

33.选择合适的字体

 

正确的设计“声音”。在项目中处理文本时,选择正确的字体将影响就像你说话的声音一样。要大声,要柔和,要友好,要正式,要有趣。每一种字体都有自己独特的声音,关键在于找到合适的字体你正在做的项目的声音。当你刚接触字体时,这似乎是一项艰巨的任务,所以不要害怕从类似的项目中获得灵感,并从这些项目中汲取灵感它们有助于影响你的决定,并提高你的理解什么是合适的。

 

 

 

34.行长度的平衡点

 

你的正文,并提高可读性处理正文文本,并试图找到合适的行长度可能有点平衡。对于一个单独的列页面,45到75个字符被普遍认为是满意的行长度,而行长度为66个字符(包括字母和空格)被发现是最佳位置。当然,字体大小和行高在决定可读性时也起着重要作用,但是对于行长,保持在45到75个字符之间,就会更好了。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

35.幽灵文字提升用户体验

 

偶尔使用纯装饰的幽灵文字也可以,但要保留阅读的问题。屏幕上的大部分文本内容应该坚持可用性最佳的做法是没有问题的。但有时,希望添加纯出于装饰目的的文本,我们不希望所有的设计都落入乏味。如果没有元素会以任何方式影响用户体验,那么出于装饰的原因,插入奇怪的元素是可以的。



 

 

36.界面元素保证快速区分

 

使用户界面中的元素彼此区分。按钮、通知,ui中两个独立但重要的元素。如果可以的话,总是试着确保你的用户能够快速地将它们区分开来,轻松扫描您的网站或应用程序。按钮,在大多数情况下,将优先,所以确保他们是最突出的。项目在屏幕上,并很容易区分其他元素。

 

 

37.投影的玩儿法

 

只是一些细微的阴影,你所需要的。我们都喜欢阴影,对吧?它们可以作为微妙又很强大的视觉线索,在您的设计中使用要适度。现实世界中的阴影,在大多数情况下几乎是不可察觉的,而且所以你应该在ui中模仿这种行为。放下沉重和黑暗的阴影并降低不透明度,以实现一些的东西更微妙和栩栩如生。

 



38.全大写文本

使用全部大写?选择适合的字体,能够达到光学清晰度。在你的设计中适度使用“全部大写”是很好的。选择一个合适的字体与行高和较重的字重,使用户的光学清晰度。

 

 

39.让面包屑脱颖而出

让面包屑脱颖而出,易于为用户解释。面包屑无处不在,经常用于内容丰富的网站,通过最小的调整,你可以确保用户能够快速定位他们在一个网站上的位置以及他们可能需要去的其他地方。如果用户已经通过使用跳转到网站的某个深度,这一点尤其有用。

 

 

40.尝试用高饱和颜色

 

使用高度饱和的颜色?试一试用浅色调来缓和气氛或者阴凉处。高度饱和的颜色(明亮的蓝色、红色、绿色等)可以让网站看起来很棒,但是当过度使用时,它们会使使用者的眼睛疲劳,主要是在使用的时候的文字内容。尽可能使用时要适度,并尽量与柔和的颜色搭配颜色或色调变化)的饱和颜色,以避免可怕的眼睛疲劳。使用这种方法还可以直接注意到饱和的色彩和使最重要的内容前面和中心,与更柔和的颜色采取较少突出角色,让用户的眼睛休息一下。记住,在选择颜色时,可读性和可访问性应该是最优先的。

 

 

 

41.图表不要叛逆的使用

 

在ui中使用已建立的图标,为了避免给用户造成混淆。在你的设计中添加图标时,试着选择一个有代表性的已建立的图标。不要选择一个能传达正确含义和功能的图标否则会引起困惑,成为用户的认知障碍。不要在这些图标上过于叛逆。

 

 

 

42.接近原则

 

在众多经过尝试和测试的设计原则中,这里有一个是帮助您为用户生成更清晰的ui的关键。接近只是确保相关设计元素放置在一起的过程,表明彼此之间的关系,这有助于加快用户的认知。

 

 

 

43.文本网格

4pt基线网格+ 8pt网格=单一网格。当使用类型时,8点网格旁边使用4点基线

可以为你的设计带来更和谐的垂直节奏。您需要对齐您的类型到基线网格4,使用的行高值为4的倍数(16、20、24、28等)

为什么4?我发现在过去使用特定的文本大小时,按8的倍数缩放是不太合适。

 

 

 

44.文本建议行高比例

减少标题上的行高是很好的。与长形式的主体文本不同,它需要足够的行高,以便折行易读。标题的推荐行高通常约为1至1.3倍。

 

 

45.颜色选择

 

选颜色有困难计划吗?在颜色上进行类比论。类似的颜色,也被称为相邻或相邻的色调,是其中之一最和谐的配色方案,可以大大帮助你,如果你有很难挑选出搭配得很好的颜色。由三原色、二原色和三原色组成的一组相邻的色调帮助您创建一个简单的,颜色方案快速。当你需要快速将颜色调和到混合中时,可以使用类似的方法。

 

 

46.提高信噪比

 

在你的设计中尽量提高信噪比。你可以在你的设计中通过最大化信号来实现清晰和可用性最小化噪声,从而产生高信噪比。您可以通过确保提供相关信息(信号)来实现这一点有效,不相关的信息(噪声)被减少或完全删除。事情更加清晰。提高你的信噪比。

 

 

47.图像文字达到强对比

 

我想用更非正式的方式说话。语气吗?尝试所有小写字母。使用较重的字体和大写会显得有点正式和夸张。试着选择全小写和较轻的字体。在处理特定项目时,使用类似全小写的拷贝可以呈现更非正式的、可接触的信息。记住要在图像之间使用某种颜色叠加与文字达到较强的对比。

 

 

48.使用重量、大小和颜色来表示类型中的层次结构

 

当使用类型时,元素不需要尖叫“看看我!”一直如此但他们确实需要一个平衡的等级制度。只需通过重量、大小和颜色进行细微的调整就可以实现这一点。这样做可以让用户扫描并找到必要的元素,避免在过程中产生任何混淆。

 

 

49.浅色文字加深色?

 

养肥了,字体大小为最佳易读性。当设置暗色文字与浅色背景,选择一个更轻的粗细。但是…反过来说:浅色文字>深色背景。最好是看一下增加一点字体重量,特别是对于长表单副本。以最佳的易读性为目标,避免让用户的眼睛疲劳。

 

 

 

50. 用你的字体选择创造正确的情感回应

 

试着为你要呈现的内容选择合适的字体。用户是精明的,有一种直观的感觉,当内容与他们交谈当它不是。正确的字体选择是至关重要的,使您的内容讲给他们直率和情感的水平。

 

 

51.大写字母+字母间距=更好的易读性

 

你是否使用全大写的短行文本?嗯…这是一个好主意,增加这些字母之间的间距,以达到更好的用户的易读性。这样做使单词更容易阅读和处理,因为字母更多彼此区分。字母之间的间距只要稍微增加一点就可以。

 

 

52.错误告知

 

打开这些错误消息,您的表格有帮助。在使用表单时,请尝试并确保错误消息得到解释。出了什么问题,如何补救。总是让用户了解情况,即使是像常规一样常见的事情的形式。让这些错误消息有用,不要让您的用户蒙昧。

 

 

 

53.告知用户正在发生什么

 

试着向用户保证在加载过程中会发生一些的事情你的应用程序。显示应用程序元素的框架可以帮助你快速沟通布局和确保用户正在发生一些事情。系统状态可见性是一个重要的原则要遵循,并允许用户知道发生了什么。不要让用户从一开始玩猜谜游戏。

 

 

 

54.不可逆的操作强提醒

 

告诉用户将要做什么如果他们应用了某个动作。在应用特定的操作之前,总是尝试并详细地告知用户可以有结果。这尤其适用于具有不可逆转后果的行为,如删除某些东西。让用户知道将要发生什么,并在此之前要求他们进行确认。他们就会按下那个标有“删除”的红色大按钮。

 

 

 

参考文献《UI & UX Micro Tips - The Ultimate Collection》

 



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

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

7种版面构图 让海报立马不一样!

天宇

在设计的创作重,很多设计师都喜欢追求软件技法带来的炫酷感,而忽略了构图理论知识带来的重要性,这篇文章就是为了解决这个问题

海报设计对于初学者而言,是一个简单入门,又容易出作品集的类目。在刚开始练习时不要天马星空的去想象,最好的练习就是根据一定的构图规范,尝试寻找规律,建立可行的秩序,让版面具有一定的阅读性。

-

只有在版面具有基础的阅读性,才可以根据想法思路进行创意性的表现,而建立持续最简单的方式之一就是运用构图。当下主流的常用构图,我大概总结整理有七种形式,下面我们一起来了解一下,附带案例演示。

 

 

 

第一种:四周压角构图→

四周压角构图指的是将标题或者重要信息放置在版面的四个边角处,可以是图形或者文字,其余信息元素等则放置在画面中间区域,使其整个版面严谨有序,平衡且具有视觉的张力。压住四角一般会结合居中式构图来呈现版面,可以产生视觉聚焦。

 

 

 

 

 

 

将信息压在四个角之内

 

 

 

将信息超出页面四角一部分

 

 

 

将信息沿四周环绕排版

 

 

 

第二种:对称式构图→

对称式构图指的是将版面分成上下或者左右两个部分,上下或左右两部分比重相同,排版相似,对称式构图可以使版面更加有秩序感,适合处理信息较多,层级较为复杂的内容。对称式构图可以很快速的塑造出版面的平衡,视觉上的平衡几乎就等于完成了版面的50%设计目的。是初学者中最为常见的形式之一,对称之间互相呼应,信息处理可以从中快速打破呆板状态,让版面具有灵活性。

 

 

 

 

上下对称式构图

 

 

左右对称式构图

 

 

 

第三种:居中式构图→

居中式构图也叫中心式构图,是指把主体信息放在版心中间,这样容易产生视觉聚焦,其他信息围绕版面中心来进行排版设计,放在版面中心的可以是文字、图片、图形或者文字等。使用居中式构图,需要多注意画面整体的平衡和元素之间的留白关系,让元素组合之间留有足够的对比与阅读性。

 

 

 

 

 

第四种:S型式构图→

S型式构图,将主要元素按照S型排版,版面更加的自由生动,非常具有表现力,是一种很常见的灵活构图手法,主要元素可以是图像、图形、标题文字、slogan等。S型式构图是讲曲线与版面进行结合,可以快速的创造出灵活的版面视觉以及节奏感,可以很好的提高版面的形式感,同时也可以有效的引导观众读者的视线。

 

 

 

 

 

第五种:三分式构图→

三分式构图是指将版面分割成相等或不等的三块区域,每个区域放置相应的信息,三分式构图分垂直三分法和水平三分法,三分之后版面更有秩序感,适合处理文案较多,层级较为复杂的内容。难度较高,同时容易让版面连贯性断层,所以在运用当中需要额外留意元素与空间之间的融合表现。

 

 

 

 

水平三分式构图

 

 

垂直三分式构图

 

 

 

第六种:倾斜式构图→

倾斜式构图,是指将版面整体或者主要元素作倾斜处理,也可做透视处理或对角处理,这种构图使版面更灵活,更加的具有形式感,作倾斜处理的元素可以是主题、图片等元素。倾斜与对角可以提高文字或图片的表现力,能很快速的塑造整体的空间感。

 

 

 

 

 

第七种:散点式构图→

散点式构图,是指将元素按照规律或者不按照规律自由的放置在版面的区域,散点放置的内容通常有文字,图片等,通常散点式构图都会结合S型式构图搭配使用,这种构图形式感强,更具有画面表现力.在运用的时候,需要特别注意文字或标题的阅读性,过于抢镜会让版面丢失主题。

 

 

 

 

 

 

光说不练假把戏,实操案例来一个,这一个案例是围绕四周压角构图来分享海报的制作操作技巧。

涉及到的知识点有:

①四周压角构图的技巧;

②文字编排;

③利用文字的局部轮廓化使版面更具有形式感。

我们先来看看最终的海报效果先。

 

 

 

第一步:→

所选的文案是一个摄影展,所以我们找了一张具有故事性的图片作为底图,新建文档,背景填充为黑色,置入图片,确定图片在版面中的位置,因为我们准备做四周压角构图型的海报,所以我们与居中式构图相结合,这样能使版面的视觉聚焦。

 

 

第二步:→

根据图片的构图,我们来确定整体版面的构图形式,由于图片是居中偏右的,所以我们用居中式构图加上四周压角构图来进行整体版面的风格呈现。

 

 

第三步:→

将主题文案“无限的山峰”以四周压角构图的方式放置在版面的四个角上,我们使用的是压在版面以内的压角构图,并结合居中构图的方式,这样能使版面更加的规整有序,而且具有视觉张力,注意图片和文字的联系。

 

 

第四步:→

现在我们来进一步进行处理,由于主题文案相离较远,接下来就是增强主题文字之间的联系,我们尝试用线来处理,线的作用就是连接与分割,我们用线将主题文字连接起来,并加上一些汉语拼音元素,使线条不会那么单调,并且更具有形式感。

 

 

第五步:→

先不急着下一步,我们先来观察下版面,现在的版面被我们分割成了四份,我们把剩下的信息分别在指定的区域内进行排版。

 

 

第六步:→

我们将剩下的文案分别进行排版,重要的信息我们需要放大处理,不重要的信息可以偏小一些,重要的信息比如:参展艺术家、日期、地址等,这里要注意层级之间的划分,要使版面显得井然有序。

 

 

第七步:→

其实版面到这里已经处理的差不多了,但是主标题看起来稍显平凡,跟内文的文字一样,没有什么特征特色,所以我们可以做更多的变化,拆分主题文字的一些笔画,并使其轮廓化,我们还可以倾斜或放大一些笔画,或者局部模糊,打散等等众多效果都可以尝试。

 

 

第八步:→

其最后把整体的细节稍微调整下,这样,一张具有形式感的海报就形成了,这张海报用到了四周压角构图,居中式构图,所以可得出结论,七种构图方式之间是可以交叉使用的,只要能使版面更加的好看,更具有形式感就行。

 

 

→ 完成!!



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

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

【兰亭妙微设计分享】解锁UI设计新趋势:界面设计色彩与布局秘籍

天宇

随着新的一年缓缓拉开序幕,UI设计领域也迎来了新的变革与挑战。兰亭妙微设计团队,作为行业内的佼佼者,始终站在设计前沿,不断探索与创新。今天,我们将与您一同解锁2025年UI设计的新趋势,特别是色彩与布局方面的秘籍,为您的设计之旅提供灵感与指导。

一、色彩趋势:回归自然,拥抱温暖

在2025年,色彩选择将更加倾向于自然与温暖。这反映了人们对和谐共生、心灵慰藉的渴望。以下是我们预测的几个热门色彩趋势:

1. 大地色系:从沙漠的金色到森林的绿色,大地色系以其沉稳、质朴的特点,成为营造温馨氛围的首选。这些色彩不仅能够激发用户的舒适感,还能与多种设计风格相融合,展现出独特的韵味。

2. 柔和粉色:粉色作为近年来备受追捧的色彩之一,其柔和的色调在2025年将继续占据重要地位。无论是浅粉色还是略带灰调的烟粉色,都能为用户带来温馨、浪漫的感受,非常适合用于女性用户或情感类产品的设计中。

3. 活力橙色:在追求舒适与温暖的同时,活力橙色以其鲜明的个性和积极向上的态度,成为打破沉闷、增添活力的不二之选。在需要强调重点或激发用户行动力时,橙色能够发挥重要作用。

aaa5ecbca76cecaf6dcf978c9d86e46(1)(1)(1)(1).png

二、布局趋势:简洁明了,注重交互

在布局方面,2025年的UI设计将更加注重简洁性与交互性。以下是我们总结的几点布局趋势:

1. 极简主义:随着信息量的爆炸式增长,用户对于简洁、清晰的设计需求愈发强烈。因此,极简主义在2025年将更加盛行。设计师们将通过精简元素、优化排版、使用留白等手段,打造更加舒适、易用的界面。

2. 卡片式设计:卡片式设计以其直观、易读的特点,成为近年来备受青睐的布局方式。在2025年,卡片式设计将继续发展,不仅限于信息展示,还将更多地应用于交互设计中,如滑动切换、点击展开等。

3. 动态布局:随着响应式设计的普及,动态布局在2025年将更加成熟。设计师们将更加注重界面在不同设备、不同屏幕尺寸下的适应性,确保用户在不同场景下都能获得良好的使用体验。

a (2)(1).png

结语

色彩与布局作为UI设计的两大核心要素,对于提升产品的吸引力与用户体验至关重要。兰亭妙微设计团队将继续关注设计趋势的发展变化,不断探索与创新。我们相信,通过巧妙地运用色彩与布局技巧,我们能够为用户带来更加美好的使用体验。让我们携手共进,共同迎接UI设计的新篇章!

280264812fab9f60400d35504eba084(1)(1)(1).png

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

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

天宇

 
 
一、什么是视觉风格?
在理解“视觉风格”这个词之前,我们先把它拆开来看,先尝试理解下什么是“风格”。
"风格" ,是一个相对抽象的概念,指的是一种在作品或创作中表现出来的独特方式或特征。
相较与“视觉风格“,它通常是一个更广泛的概念,可以应用于多个领域,包括艺术、设计、文学、音乐等,具体体现在内容、形式、技巧、表现等方式上。
"视觉风格" 是风格的一个具体领域,通常用在艺术、设计和多媒体上,比如我们常说的插画风、摄影风、平面风、网页风、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。

从用户体验到细节之美:移动端弹窗设计

天宇

前言
在当今的移动应用设计中,弹窗作为一种重要的交互元素,对于提升用户体验和增强应用的可用性具有举足轻重的作用。然而,弹窗设计并非简单的堆砌信息,它需要考虑到用户的使用习惯、心理预期以及操作流程等多个方面。因此,如何设计出优秀的移动端弹窗,成为了一个值得探讨的话题。
本文旨在为设计师们提供一份全面的移动端弹窗设计指南。我们将从弹窗的定义与重要性、类型与使用场景、设计原则以及不同场景下的弹窗设计等方面进行深入探讨。希望通过本文的分享,能够帮助设计师们更好地掌握移动端弹窗设计的技巧,提升应用的用户体验。
从用户体验到细节之美:移动端弹窗设计
 
 
从用户体验到细节之美:移动端弹窗设计
 
 
弹窗是用户界面中的一种重要元素,它是一种临时性的、可交互的窗口,用于向用户展示信息、提示、警告或提供额外的功能。在移动应用中,弹窗通常用于在用户执行某些操作或触发某些事件时提供反馈或额外的信息。
弹窗设计的好坏直接影响到用户体验和应用的易用性。一个好的弹窗设计能够提供清晰、简洁、易于理解的信息,同时不会干扰用户的操作流程。而一个不好的弹窗设计可能会让用户感到困惑或不便,甚至可能导致误操作。
从用户体验到细节之美:移动端弹窗设计
 
 
从用户体验到细节之美:移动端弹窗设计
 
 
1、阻断式弹窗
模态弹窗是一种需要用户进行响应的弹窗。它通常会覆盖整个屏幕,并阻止用户进行其他操作,直到用户对弹窗做出响应。打断用户当前的操作流程,属于强势的干扰行为,通常用于需要用户确认或选择的操作,例如删除数据、确认操作等。
从用户体验到细节之美:移动端弹窗设计
 
 
2、非阻断式弹窗
非模态弹窗是一种不会覆盖整个屏幕的弹窗。它通常会以小窗口的形式出现在屏幕的一角或下方,用于提供一些简短的信息提示或警告。是一种轻量级的反馈,不会对用户流程产生干扰,同时又给了用户反馈和信息。并且有时间限制,在一定时间里自动消失。不需要用户进行点击操作,只需要让用户看到即可,常见的非模态弹窗包括Toast提示框、Snackbar提示对话框等。
从用户体验到细节之美:移动端弹窗设计
 
 
从用户体验到细节之美:移动端弹窗设计
 
 
1、弹窗设计尺寸定义
移动UI弹窗的设计尺寸通常取决于多个因素,通常需要考虑设备的屏幕尺寸和分辨率。以下是一些常见的移动端弹窗设计尺寸定义规范:
① 弹窗宽度
在移动设备上,弹窗的宽度通常会与设备屏幕宽度相适应。因此,弹窗的宽度可以设置为设备屏幕宽度的80%至90%,这样可以确保弹窗在不同屏幕尺寸上都能良好地展示。
从用户体验到细节之美:移动端弹窗设计
 
 
② 弹窗高度
移动端弹窗的高度应该根据内容的多少进行自适应,但要避免过高导致用户需要滚动查看。通常建议弹窗的最大高度不超过设备屏幕高度的80%。
从用户体验到细节之美:移动端弹窗设计
 
 
③ 按钮大小
在移动端弹窗中,按钮的大小应该足够大,以便用户能够轻松点击。按钮的大小一般建议在44px至56px之间,同时保持足够的间距,避免误触。
从用户体验到细节之美:移动端弹窗设计
 
 
④ 字体大小
移动端弹窗中的字体大小应该适中,既要保证内容的可读性,又要避免过大或过小导致视觉上的不适。通常建议标题字体大小在16px至20px之间,正文字体大小在14px至16px之间。
从用户体验到细节之美:移动端弹窗设计
 
 
这些尺寸定义规范可以帮助我们在移动设备上创建具有良好用户体验的弹窗。然而,需要注意的是,这些规范并非绝对,在实际设计中还需要根据具体需求和场景进行调整。同时,考虑到不同设备和操作系统的差异,还需要进行充分的测试和调整,以确保弹窗在各种情况下都能提供最佳的用户体验。
 
2、弹窗设计版式
弹窗的版式设计可以根据需求进行多种多样的变化,但一般来说,以下几种版式设计是比较常见的:
① 文字列表框
在页面底部出现,以简洁的功能描述性文字展示功能按钮,敏感的功能操作一般颜色字体标出。
从用户体验到细节之美:移动端弹窗设计
 
 
在进行此类弹窗设计时,有几个关键要点需要特别关注:
首先,文案必须简洁明了,直接传达核心信息。避免使用冗长或复杂的措辞,以免用户产生困惑。
从用户体验到细节之美:移动端弹窗设计
 
 
其次,为了突出核心内容,可以采用一些视觉上的设计技巧,如加粗、变色或增大字体大小。这样有助于迅速吸引用户的注意力。
从用户体验到细节之美:移动端弹窗设计
 
 
在颜色、字体和布局方面,保持一致性至关重要。这样可以增强应用的品牌识别度,并为用户提供更加统一和连贯的体验。
从用户体验到细节之美:移动端弹窗设计
 
 
再次,对于包含大量文字信息的弹窗,可读性是关键。合理使用标题、段落和列表来组织内容,避免布局过于拥挤或空白过多。这样可以提高信息的可读性和易理解性。
从用户体验到细节之美:移动端弹窗设计
 
 
最后,考虑弹窗在不同尺寸屏幕上的适应性是必要的。通过合理的设计布局和响应式设计,确保弹窗在实际使用中的显示效果和用户体验不受屏幕尺寸的影响。
从用户体验到细节之美:移动端弹窗设计
 
 
② 图文排列
当功能按钮数量很多的时候,将文字和图片按照一定的排列方式组合在一起,以吸引用户的注意力并传达信息。这种样式下需要注意弹窗内各功能按钮的UI设计和排列布局。
以下是一些常见的图文排列类型的弹窗设计方式:
2.1 文字居中,图片居侧
这种方式将文字居中显示,而图片则位于文字的一侧。这种设计方式常用于一些需要强调文字信息的弹窗,例如确认框或者提示框。
从用户体验到细节之美:移动端弹窗设计
 
 
2.2 图片居中,文字居侧
这种方式将图片居中显示,而文字则位于图片的一侧。这种设计方式常用于一些需要展示图片的弹窗,例如相册或者图片查看器。
从用户体验到细节之美:移动端弹窗设计
 
 
2.3 文字在下方,图片在上方
这种方式将文字放置在图片的下方,以增强文字与图片的联系。这种设计方式常用于一些需要展示产品或者文章的弹窗,例如产品详情页或者新闻摘要。
从用户体验到细节之美:移动端弹窗设计
 
 
2.4 文字和图片交错排列
这种方式将文字和图片交错排列在一起,以增强信息的层次感和视觉冲击力。这种设计方式常用于一些需要展示多个信息的弹窗,例如表单或者调查问卷。
从用户体验到细节之美:移动端弹窗设计
 
 
无论采用哪种图文排列类型的弹窗设计方式,都需要注重文字和图片的协调性和统一感,以保证弹窗的整体美观度和易用性。同时,还需要根据具体的弹窗类型和目的来选择合适的设计方式,以便更好地传递信息并吸引用户的注意力。
 
③ 选择列表框
用选项代替了功能按钮,这种设计方式的好处是减少了功能流程中的页面跳转,但如果选项很多而且描述文字较多的时候,还是设计成选项详情页更好些。
以下是一些常见的选择列表框的类型:
3.1 单选列表框
这种方式只允许用户选择一个选项,常用于一些需要用户做出唯一选择的场景,例如性别选择、国家选择等。
从用户体验到细节之美:移动端弹窗设计
 
 
3.2 多选列表框
这种方式允许用户选择多个选项,常用于一些需要用户做出多个选择的场景,例如定制化需求、标签选择等。
从用户体验到细节之美:移动端弹窗设计
 
 
3.3 下拉列表框
这种方式将所有选项折叠在一个下拉列表中,用户可以通过滑动或者点击来查看并选择选项。这种设计方式常用于一些需要节省空间或者隐藏复杂选项的场景。
从用户体验到细节之美:移动端弹窗设计
 
 
3.4 弹出式列表框
这种方式将选项以弹出式的方式展示在弹窗中,用户可以通过点击来查看并选择选项。这种设计方式常用于一些需要快速选择的场景,例如快捷菜单、操作菜单等。
从用户体验到细节之美:移动端弹窗设计
 
 
另:在移动端弹窗设计中,我们还需关注五个关键点:
  1.  
    避免过度使用:过多弹窗会干扰用户,降低体验。因此,要审慎使用,确保必要性。
  2.  
    设计简洁:弹窗内容应精简,标题与内容需清晰传达目的。
  3.  
    合理摆放按钮:确保按钮易于点击,数量适中,避免混乱。
  4.  
    保持视觉清晰:色彩、字体等需与整体风格协调,动画效果需自然。
  5.  
    简化交互流程:操作步骤需简单明了,提供明确的反馈。
综上所述,移动端弹窗设计应注重简洁的文案、突出核心内容、保持一致性、注重可读性和适应性。通过关注这些关键点,可以打造出高品质的弹窗设计,提升用户的使用体验。
 
总结
移动端弹窗设计是一项需要综合考虑用户体验和转化率的复杂任务。通过明确设计目的、选择合适类型、注重视觉设计、提供明确操作按钮、适时出现适度使用以及不断测试与优化,可以打造出更加优秀、更具吸引力的弹窗设计。这不仅能够提升用户的满意度和忠诚度,还能为应用带来更多的商业价值。
 


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

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

大厂搜索哪家强?这些交互设计值得你收藏学习!

天宇

大体上分为两类:彩蛋流和体验流

搜索的本质是什么?无疑是内容的召回和信息的推荐。

可随着时代的发展和行业公司的内卷,不少公司除了持续优化搜索结果与推荐外,在搜索的体验和彩蛋上也是下了不少功夫,从而进一步加强自有产品的竞争力与用户黏性。因此今天就来盘点一些,那有意思的大厂搜索交互。

大体上分为两类:彩蛋流和体验流

A.彩蛋流

注重提升搜索过程中的趣味程度,以增加用户的好感度与产品印象/口碑。行业代表:谷歌浏览器、百度浏览器

 

1.谷歌浏览器

 

可以说是搜索彩蛋的先行者,内置了很多搜索关键词的有趣彩蛋,如娱乐角色:搜索【灭霸】,页面右边会打响指,相关字段会被’毁灭‘掉

 

 

搜索【马里奥兄弟】,右边也有游戏里一样的点击彩蛋

 

 

还有各种有意思的搜索结果比如搜:is google down(谷歌关闭了吗),搜索结果优先显示:NO

 

 

再如搜索《银河系漫游指南》的一句话:the answer to life, the universe, and everything。此时搜索结果页会自动计算成42。貌似也只有读过《银河系漫游指南》的人才能明白其中的奥秘。听说是生命、宇宙与万事万物的终极解答。

 

而且在日常的节日、活动、热点运营上,谷歌也从不缺席。都会在搜索框上用【插画、动效】等形式承载各种活动入口、吸引用户参与,可以已经形成一个稳定、具有品牌感的企业文化了。

 

如各种复活节、开学季、母亲节动效。而且更多有趣、创意的设计案例,可上:有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。

 

 

 

 

 

 

2.百度浏览器

 

百度在搜索彩蛋里下的的功夫也不少,最著名的应该是搜索【黑洞】时,页面上会出现黑洞的吸入特效。

 

 

 

 

而且和谷歌相同,在其他的搜索关键词上,百度也是埋下了不少彩蛋,比如:搜索【翻转】,页面会左右翻过来

 

 

 

 

搜索【跳跃】,页面会在上下跳动

 

 

 

 

搜索【失重】,页面上的字会飘起来‍

 

 

 

 

 

而在【活动运营】上,百度也是很有心地进行着创新设计,力求给用户一种眼前一亮的感觉。比如每年的愚人节,搜索结果页上都有‘调戏’用户的创意设计,各种轻松调皮的画风 给不少用户带来了新鲜感和趣味性。

 

 

 

 

 

 

 

还有在【活动入口】的设计上也是特别有想法:在某年的圣诞节上,百度创新性地将活动入口’嵌套‘在结果页卡片中间,用活动里的ip形象-雪人「抬着」结果页卡片和在上面「滚动」

 

 

 

 

 

 

 

用这种充满创意+应景的的入口设计与引导方式,最大限度地降低漏斗,吸引让更多用户参与该活动。另外,百度搜索框上面的运营活动入口,也和谷歌有异曲同工之妙。

 

 

 

 

而且更多有趣、创意的设计案例,可上:有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。

 

 

B.体验流

 

注重提升搜索过程中的交互体验,以增加用户的操作效率与产品易用性

 

代表:苹果产品、夸克浏览器

 

 

1.Apple/苹果产品

 

·iPhone

 

iPhone的【桌面搜索】除了能查询手机上的各种信息、文件,它还自带了【汇率转换和计算器】。在搜索框输入【数学公式、汇率转换】时会自动计算对应的结果。无需用户额外打开计算器、浏览器,大大减少操作链路。

 

 

 

 

在iOS的原生键盘里,可以根据输入词检测+搜索对应的手机号码:当你输入 【打+我或通讯录好友+电话】时,键盘上会自动显示自己或好友的电话号码,点击号码就能自动粘贴在输入框中。

 

 

 

 

用户无需前往通讯录就能轻松「获知+想起」谁谁的电话号码,大大提升操作体验与效率

 

·Mac

 

在Mac电脑的工具栏上搜索相关帮助时,系统会直接把该结果所对应的页面位置调取出来并悬浮展示。用户可以直观地该结果在哪里,并减少寻找的操作路径,免去多余操作

 

 

 

 

在Mac电脑的‘系统偏好设置’里搜索帮助,在结果列表上会以聚光灯的形式展示各个结果入口。选择具体某个结果时,该入口的聚光灯会更清晰些,特别容易找到搜索结果。

 

 

 

 

2.夸克浏览器

 

夸克浏览器除了传统的「点击搜索框」唤出输入栏外,在屏幕任意位置下滑手势同样可以唤出搜索框。

 

 

 

 

降低「需要往上手指移动,才能点击搜索框」的操作成本,让用户更快、更精准地触达搜索。

 

而且在输入网址或英文等字段时,搜索框下方会出现一个滑块区。点击就会变成长条的滑块,拖拽滑块即可改变光标位置。

 

 

 

 

而且更多有趣、创意的设计案例,可上:有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。

 

让用户更方便地将光标快速移动到想要的位置中,以便更快地搜索信息,大大降低操作成本。而且夸克还会前置搜索结果, 比如在搜索框中输入“某城市+天气”的关键词,上方就会以卡片的形式显示该地区最近一周的天气。

 

用户无需触发搜索、进入结果页才能看到想要查询的信息。

 

 



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

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

如何把控设计的画面整体?这个六个视觉语言一定要了解

天宇

不管是一部电影,还是一张视觉创意,想要消费者或者老板买单,从形、意、色、字、构、质等一系列视觉语言,都需要很好的掌握。

 

 

 

 



作者:Peng蓬的芝士追光
链接:https://www.zcool.com.cn/article/ZMTQ4ODYwMA==.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。

打开设计思维才能突破瓶颈

天宇

对于设计师来说,遇到设计瓶颈期很正常,入行一段时间后所具备的能力就会达到峰值,无法突破峰值就会遇到瓶颈。主要在设计思维和设计技法层面受限,打开设计思维才能突破瓶颈期,通过积累优秀的案例并进行总结分析,可以更快的打破思维限制。

 

 

 

 

 

分享目录

 

一、趣味性的登录设计

二、瓷片区的趣味性手势交互

三、营造怀旧感的温馨体验

四、趣味性的进度提示设计

五、场景感的点击操作

六、动效引导用户发帖

七、卡通形象强化瓷片区视觉感

八、不改变布局的曝光强化

九、可以晃动的 Banner 图

十、场景感的底部标签栏设计

 

 

 

一、趣味性的登录设计

 

登录是进入产品的第一道防线,也容易让用户产生排斥感,降低用户的防备心理才能提高登录的意愿度。

 

盯潮 App 在登录界面中,以潮流元素和商品等内容进行设计,使得页面视觉感丰富。晃动手机时元素也会移动,在掉落或者碰撞手机边缘时配合震动感,让体验变得非常有趣。趣味性的设计降低了用户的排斥感,提升了登录的意愿度和体验感。

 

 

 

 

 

 

二、瓷片区的趣味性手势交互

 

瓷片区、Banner、金刚区是产品中的三大运营模块,起到提高曝光度达到引流的目的。瓷片区在页面中的布局比较灵活,设计表现也非常丰富。

 

盯潮 App 在首页瓷片区设计中,以栅格式布局进行区块划分,占比较大的模块类似于 Banner 式表现。通过手势可以任意拖动实现切换,趣味性和互动性相结合,提高了用户的使用乐趣。

 

 

 

 

 

 

三、营造怀旧感的温馨体验

 

童年的记忆是我们逝去的青春,每每看到小时候的画面,总能勾起我们童年的回忆。最近发现一款结合怀旧感营造设计风格的产品,名字叫“软眠眠”。

 

这是一款拯救失眠者的治愈系睡眠 App,以一幅小时候生活的环境插画填充界面背景,图标设计也是提取小时候的玩物或者生活用品,视觉风格营造极强的怀旧感。无论是画风还是配色、配乐等,都勾起了我们满满的回忆,带给用户温馨的体验。

 

 

 

 

 

 

四、趣味性的进度提示设计

 

在完成步骤化和消耗数据等内容表达层面会选择进度条,通过可视化的表达提高用户的理解,减轻信息认知负担。

 

软眠眠 App 在定制睡眠计划的过程中,完成选项时的进度条设计非常有意思,是一个小孩通过拉动绳子移动。拉动过程中结合动态表达,配合手绘风的表现让人感觉轻松愉快,趣味性的设计也提高了完成选项任务的意愿度。

 

 

 

 

 

 

五、场景感的点击操作

 

在保障底层操作体验的基础上,设计会越来越讲究细节的体验,逐步强化情感化的融入和场景感的体验。

 

最近在体验小雞上工 App 时,在找工作的列表设计中加入了“抢”按钮,在点击列表时按钮会有按压的动效过程。模拟抢拍按钮获得机会的体验,营造场景氛围感,提高了设计表达的趣味性。

 

 

 

 

 

 

六、动效引导用户发帖

 

微动效可以提高功能的吸引力,也能让互动体验变得更有趣,可以通过动效引导功能操作和提高关注度。

 

腾讯动漫 App 在圈子栏目中,以 IP 形象结合动效强化发帖按钮,以此引导用户参与发帖。动效不仅突出了发帖的关注度,也让发帖按钮设计更有亲和力,进而提升用户的点击欲。

 

 

 

 

 

 

七、卡通形象强化瓷片区视觉感

 

瓷片区起到强化曝光达到流量引导的作用,提高该模块的吸引力至关重要,视觉感的突出也尤为重要。

 

会玩 App 在首页“一起玩”的瓷片区设计中,以卡通形象结合丰富的色彩进行表现,各种装扮的形象丰富视觉感。卡通形象设计风格统一,卡片色彩丰富且协调,整体瓷片区视觉冲击力十足。

 

 

 

 

 

 

八、不改变布局的曝光强化

 

在当前产品结构不变的基础上,如何提高局部内容或者主推内容的曝光度,是产品设计师不断探索的方向。

 

爱奇艺 App 首页推荐栏目 Banner 图下方,默认情况下以宫格布局推荐影片。前段时间在打开时发现了一个临时设计表达,保持当前结构布局不变,放大了图片填充和推荐影片,整张画面填充宫格,视觉张力十足。该设计表达既不会干扰当前布局,也能强化推荐影片的曝光度,解决方案值得探索。

 

 

 

 

 

 

九、可以晃动的 Banner 图

 

Banner 可以在创意、造型、互动形式等方面进行设计发挥,也呈现了许多优秀的方案,产品设计师也在不断尝试更多的可能性。

 

最近在体验盯潮 App 时,发售栏目顶部 Banner 图设计引人关注。当用户左右晃动手机时,Banner 图背景层不动,而文案和产品等元素层会跟着晃动的频率左右移动。可以晃动的 Banner 图非常有意思,成功地吸引了用户的关注度和点击欲。

 

 

 

 

 

 

十、场景感的底部标签栏设计

 

底部标签栏设计可以在背景、造型、图标等元素中发挥,其中图标设计中的发挥相对更多一些,在背景和造型层面的案例较少,不过最近也发现了一个解决方案。

 

在体验云游万里长城小程序时,进入之后的小程序底部标签栏设计结合了长城墙面和结构,非常有场景代入感。设计了深色版和浅色版,图标造型设计也融入了长城元素,不失为一种优秀的差异化设计探索。

 

 

 

 

小结

 

希望本期的分享可以开启大家更多设计思维,从优秀的设计方案中发现设计的轨迹,复用到后期的项目设计中。本文描述属于个人理解和总结,不足之处欢迎大家留言补充,我们互相进步。



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

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

探究UI设计中形状的创意与应用

天宇

形状设计可以影响整个界面的视觉效果。通过选择适当的形状和排列方式,可以创造出令人愉悦、易于使用和富有吸引力的界面。

写在前面

在UI设计中,形状设计是一个至关重要的环节。对其选择和排列会直接影响到界面的美观度和用户的交互体验。接下来将详细探讨UI设计中的形状设计,包括其重要性、基本原则和实际应用。

 

形状可以帮助用户理解和操作界面。一个优秀的形状设计应该具有清晰、简洁和易于理解的特点,我们在平时做设计中,需要将这些原则深入到每一个细节中。

在设计中,形状的识别和理解是至关重要的。一个成功的形状设计应该能够快速地被用户识别并理解。例如,一个常见的形状可以使用不同的颜色和大小来区分主要内容和次要内容,从而引导用户的注意力。

 

1、形状的一致性

在UI设计中,一致性是一个非常重要的原则。一个好的形状设计应该在整个应用程序中保持一致,从而使用户可以轻松地导航和操作。例如,闲鱼APP里的所有的按钮可以使用相同的形状和颜色,以便用户可以轻松地识别并操作。

 

2、形状的个性化与品牌识别

一个独特的形状设计可以帮助品牌在竞争激烈的市场中脱颖而出。一个好的形状设计应该能够体现品牌的个性和价值观,从而增强品牌的识别度。使用独特的图标和标志来传达其品牌形象和价值观。例如:小米的logo、京东狗、淘宝天猫。

 

1、按钮设计

按钮是UI设计中最重要的元素之一。一个好的按钮设计应该具有清晰的形状和易于理解的标签。

按钮形状主要有直角、小圆角、全圆角三种样式。

① 直角按钮具有严谨、力量、高端的特点,适用于大牌美妆、奢侈品类产品;

 

② 小圆角按钮具有稳定、中性的感觉,适用于用户跨度较大的常规类产品中,例如微信、滴滴、抖音等;

 

③ 全圆角按钮更加温和、亲切,适用于电商类和儿童类的产品中。

 

按钮尺寸和比例根据iOS和Android的规范,按钮尺寸至少高于5.5毫米(36 pt),否则用户点击时会较为困难。同时,按钮长度固定,文字长度变化或是按钮长度根据文字长短而变化的设计方式也需要考虑文字距离按钮上下左右边距的比例关系。

总的来说,UI中按钮形状的设计需要结合具体的产品属性和界面风格,以及用户的使用习惯来进行综合考虑。

 

2、图标设计

图标是UI设计中另一种重要的具有高度概括性和视觉传达性的小尺寸图像元素。可以帮助用户快速地识别和理解功能和信息,是靠文案无法实现的。

例如,天气图标通过其形状、色彩和设计元素直观地传达不同的天气状况和气象信息,帮助人们更好地了解天气状况。又如卫生间男女图标的设计让人们易于识别和理解。

 

在UI设计中,图标的圆角度通常是怎么定义的呢?

① 大圆角:应用在以圆润、可爱为主要风格的UI设计中,以营造出更加柔和、亲切的视觉效果。

② 小圆角:小圆角作为一种微妙的细节元素,可以增加图标的层次感和细节。在追求设计质感的界面中,适当添加小圆角可以使图标更加精致和有品质感。

③ 无圆角:应用在科技或现代感的UI设计中,以营造出更加硬朗、冷峻的视觉效果。但使用需要克制,过多的直角可能会让整个界面显得生硬和冷感。

补充一点,我发现一个重要细节,就是很多人在计算内圆角数值时都存在困扰。自工作以来,我注意到这个问题影响了很多人,他们不知道如何正确地计算内圆角的数值。为了解决这个问题,通过以下方式帮助大家更好地掌握计算内圆角数值的方法。

 

3、输入框设计

输入框是用户输入信息的重要区域。在UI设计中,输入框的形状设计可以根据实际需求和设计风格进行变化。以下是一些常见的输入框形状设计:

① 方型输入框:这是最常见的输入框形状,它以方形的形式呈现,可以在其中输入文本或信息。这种设计简单明了,易于使用,适用于大多数场景。

② 圆角矩形输入框:这种输入框在四个角上采用了圆角设计,使得整个输入框看起来更加柔和、友好。这种设计在一些需要强调用户输入的场景下较为常见。

③ 下拉菜单输入框:这种输入框可以让用户从下拉菜单中选择一个选项,而不是直接在文本框中输入。这种设计适用于一些固定选项的场景,可以减少用户的输入操作。

④ 按钮式输入框:这种输入框将输入框和按钮结合在一起,用户可以点击按钮来输入信息。这种设计适用于一些需要强调点击操作的场景,例如站酷的登录。

⑤ 语音识别输入框:这种输入框允许用户通过语音来输入信息,而不是手动输入。这种设计适用于一些需要快速输入或不方便手动输入的场景,例如驾车、写字等。

总的来说,输入框的形状设计应根据实际需求和设计风格来进行选择,同时也要考虑用户的使用习惯和操作体验。

 

4、导航栏设计

导航栏是UI设计中重要的组成部分之一。它帮助用户在不同的页面之间进行切换和导航。在设计导航栏时,应考虑其位置、颜色和形状等因素。以下是一些常见的导航栏形状设计:

① 顶部导航栏:这是最常见的导航模式,位于页面顶部,可以包含网站的名称、主要的导航选项、搜索框等元素。这种设计简单明了,易于使用,适用于大多数场景。

② 侧边导航栏:这种导航模式位于页面左侧,通常用于二级导航或辅助导航。侧边导航栏可以以垂直或水平方向呈现,根据实际需求进行选择。

③ 底部导航栏:这种导航模式位于页面底部,通常用于一级目录的导航。底部导航栏可以包含网站的名称、主要的导航选项、搜索框等元素。这种设计操作方便,用户体验好,适用于大多数场景。

④ 弹出式导航栏:这种导航模式通常用于移动端应用,通过点击或滑动屏幕上的按钮或图标来唤出导航菜单。弹出式导航栏可以以垂直或水平方向呈现,根据实际需求进行选择。

总的来说,导航栏的形状设计应根据实际的导航模式和设计风格来进行选择,同时也要考虑用户的使用习惯和操作体验。好的导航设计应该简单明了、易于使用,能够提供清晰的信息架构和层级关系,帮助用户快速找到所需内容。

 

5、作为底纹设计

将形状用作底纹,可以增加图形的视觉层次感和趣味性。尤其是当使用如圆圈、条纹、曲线等形状时,可以使底纹呈现出动态感和动感。

也可以强调文字或图片中的某些元素,用来引导观者的视线,以创造出视觉焦点。比如,在一个沉闷的黑色背景上使用鲜艳的彩色形状作为底纹,可以将观者的注意力集中在那些形状上。

但是,必须着重强调的是,底纹的使用应当与整体的设计风格和主题相得益彰。若应用不当,可能会对画面的整体美感产生破坏性的影响。因此,在决定是否使用底纹时,必须慎重考虑其与整体设计的和谐度。

 

1、动态形状设计

随着技术的不断发展,动态形状设计已经成为一种趋势。通过使用动画和过渡效果,可以创建更具吸引力和互动性的界面。例如,使用渐变效果来平滑地转换不同的页面或状态。

 

2、3D和立体形状设计

3D和立体形状设计为UI设计师提供了更多的可能性。通过使用阴影、光照和深度效果,可以创建更立体、更有层次感的界面。例如,使用3D旋转效果来突出主要内容或使用阴影效果来增加界面的深度感。

 

3、可定制形状设计

随着用户对个性化需求的不断增加,可定制的形状设计变得越来越重要。用户希望根据自己的喜好和需求来调整界面。例如,允许用户自定义选择自己喜欢的页面主题风格。

 

总结

在UI设计中,精美形状设计的关键是深入理解用户需求,注重细节,保持一致性,勇于创新,不断提高技能水平。这样才能创造符合用户口味的界面,提升用户体验。简洁地说,好的形状设计来源于用户需求、细节、一致性、创新和自我提升。

以上总结仅代表个人观点,如有不足欢迎大家补充互相进步。



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

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

日历

链接

个人资料

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

存档