当你为你的项目创建有效的,可访问的,漂亮的ui时,只需要最小的调整来帮助快速改善你的设计。 努力创造。在这篇简短且易于理解的指南中,我收集了一些容易放置的内容。在实践中,这些小技巧可以毫不费力地帮助你改善你的设计,还有用户体验。
希望你喜欢!
用微妙的边界定义。
使用多重阴影或非常微妙的边界(只是一个阴影比你的实际影子)周围的某些元素可以使这些元素出现
更清晰,更清晰,帮助你避免那些看起来泥泞的阴影。
标题给一个更好的光学范围。减少长格式正文的字母间距?这是一个大大的“不”。但对于标题……我要说“是”!
你的标题很可能会比他们的标题更大,更重。相比于正文,字母之间的间距有时会出现视觉上更大,这并不是你想要的。减少字母间距,只是少量,可以使你的标题视觉平衡,更易于阅读,通常更赏心悦目。
为了一致性,确保你的图标具有相同的视觉风格。确保它们拥有相同的视觉风格;同样的重量,要么填满,要么秒变了。不要混搭。
只使用一种字体就很好。在设计时,使用单一字体是绝对没问题的,这样做实际上可以帮你产生更强、更持久的结果。忽略“总是使用两种字体”最小值的人群。使用以下组合重量,大小和颜色,你仍然可以产生完美的可接受的结果。虽然只有一个单独的字体。
留白是UI设计朋友。大胆的使用。适度的留白,即使是少量的白色物质,但要使用得当。能让你的设计透气,而且看起来更光亮。
创建长篇内容?给20 pt试试。对于长形式的内容(即微博文章,项目描述等等),试着这样做20pt(甚至更多一点)为你的文本字号。当然,这取决于所选择的字体,但大多数流行的字体在20pt时效果得很好,并带来更好的阅读体验当你的用户面对一堵文字墙的时候。18pt太过时了。
使用字体比例定义一个适合的字体大小集。使用字体比例可以帮助您轻松、实用地定义一组字体大小。顾名思义,Type Scale基于一个比例因子(比如1.25)工作的。从一个基本字体大小(18px)和乘(或除)它与缩放因子得到的字体大小要么更高(即;H₁,H₂等),或较低层次(即;标题、按钮等)字体比例将帮助你产生看起来和谐的文本字号集。因为他们的大小根据设定的固定比例增加和减少。
选择一个基本颜色,然后使用色彩和色调增加均匀性。你猜怎么着?你不必总是用大量的颜色填充你的设计。如果项目允许,简单地使用一个有限的调色板选择一个基地颜色,然后使用你选择的颜色的色调和阴影可以增加一致性以最简单的方式来改变你的设计。
改善用户登录的体验。记住拇指规则。允许用户在任何时候跳过您的移动应用程序上线序列,并且放置跳过链接在拇指容易触及的位置。只是一个简单的调整,可以为你的用户提供更好的体验……
记住,拇指仍然是主宰!
你的影子来自其中一个光源对吧?确保你的影子总是来自一个光源。这是一个简单的错误,但它可以让你的设计看起来更抛光且统一。记住,我们不是生活在一个拥有一千个太阳的国度里。
使用更好的字体组合,效率会很很快。当你想要提高你的字体组合技巧的时候,当面对1000个字体选择,只是去寻找对应的自己集合,效率会快很多。
文字和图像与一个微妙的覆盖。根据文本可能放置在图像上方的位置,您可以选择尝试,并测试完整的图像覆盖,或更微妙的(从下到上,或从上到下)渐变叠加,以实现两者之间的简单对比。为了在你的文本之间形成良好的对比,不要太复杂的内容和图片。
太多就会导致用户体验不合格。尽量只在标题和小段落中使用中心文字。对于几乎所有其他内容,保持文本左对齐。你的用户会感谢你的你。
当选择一个多用途的文字,尽量找一个大量权重。你搜索的字体有很多选择吗?重量、风格?如果你打算在你的一些项目中使用它,请尝试并确保它是这样做的。只有一种重量或样式。不行的。如果可以的话,我建议你避开这些。当然也有例外,某些项目会要求“只有一种风格”
更精致的字体,但对于绝大多数项目,你想要的字体再多一点就能…嗯…选择。即使你决定只使用两种或三种重量或风格,希望你在设计过程的后期需要更多的空间。
想要创造更容易理解的界面,对吧?把你的文字调暗在光亮的背景上。在浅色背景下工作时,不要让你的文本太亮。
当涉及到长形式的内容时,某些常规的粗细字体仍然可以看。但太重了,在屏幕上会很僵硬。你可以很容易地解决这个问题,选择一些像深灰色(即#4F4F4F)的基调,把文字往下写,让眼睛更容易看。
总是通过icon最突出的内容。你认为这是常识,对吗?我并不觉得。通过使用色彩对比度做区分,尺寸和标签,确保尽可能突出。如果可以的话,不要总是只依赖图标。如果可以使用文本标签,那就使用它们,让用户更好地理解。
当你的字体变小时,请增加行高,以达到更好的通用性。这同样适用于当你的字体大小增加。简单地降低行高。
使用x-height来测试字体的可读性。基本上,x-height是一个小写字母' x '相对于大写字母高度 (T)的相同字体。如果你的字体有一个大的x高,通常有助于更好地阅读,特别是在使用长形式的正文文本。另一种确定字体可读性,并缩小范围的方法如果你有一些无法选择的字体,可以做这个测试,比较来自特定字体的三个字符:大写字母I,小写的L和数字1。
当设计一个在应用程序内部使用的菜单时,确保提供最多经常使用的动作(例如:上传图像,添加文件等)最突出的屏幕上。
颜色-从你的图像中选择,会给你的产品带来生命。简单地从你的产品图片中选择颜色,然后应用各种色调。你选择的颜色阴影到你的背景,文字,图标或更多,可以添加。你的设计具有丰富的视觉趣味和个性。
基于字体的x坐标,设置您的线高度。不同x高的字体需要不同的行高测量,实现文本行之间的正确分隔。即使你可能有两种字体相同的字体大小(即:18px)它们的x的高度可以有很大的不同,这在选择正确的线的种类起着很大的作用高度来实现。
突出最重要的元素。通过使用字体大小,权重,颜色和布局的组合,可以很轻松的突出UI中最重要的元素。只是很简单,但微妙的调整,让用户体验更好一点。
操作错误的时候,添加一个额外的视觉辅助。在用户刚刚采取的操作附近添加一个错误消息可以是简单的形式,但很有帮助,当他们填写任何形式的表格时额外的视觉辅助。
尝试在移动端创建慷慨的热区。当为移动设备设计时,尝试创建足够大的可点击区域,是好的。对于只包含文本的按钮和链接来说,这是很有挑战性的,尽可能使用带有标签的图标。
以下是iOS和Android的最小推荐点击区域:
44 x 44pt用于iOS
48x48dp用于Android
在短标题上尽量使用全大写。如果你想在标题上使用全大写,请确保它们在任何时候都很短。有可能,最好是一行。将它们用于较长的文本是不好的。和之前的技巧一样,在标题中添加少量的字母间距。能让他们呼吸顺畅,而且视觉效果更好。
在轻文本和图像之间,保持可接受的对比度。一定要确保浅色的文字在浅色的背景下是清晰的。简单地应用一个稍微不透明的背景在你的文本后面将保持这些元素之间的对比度很好。
看看这些很棒的字体,用在标题非常好的。发现他们真的很适合标题,设计感很强。(我没有推广费用,请放心用)
看看这些很棒的字体,用于长文本是非常好的,强烈推荐使用。(我仍然没有任何推广费)。
标题和正文。当你想实现一个好的垂直节奏,以及一个强大的视觉之间,需要对文本元素排版、间距作设计。我见过许多设计,最常见的是在文章列表中,它们已经被应用标题的上下空白相等,这样就失去了这种联系在它下面有正文。在这种情况下,我总是会给我的标题更多的顶部边距,而在底部,标题和下面的内容之间的连接是更强,有良好的垂直节奏,视觉层次保留在所有的文章之间。
对于下载指标,试着去做尽可能提供信息。对于用户,尝试使具有信息性的下载指示符对用户很友好。你可以通过使用颜色来实现这一点,用百分数来显示当前进度,一个简单的图标,让他们可以在任何地方取消下载时间。
如果你能保持标题简短,简洁……“想做就做”。
如果可以,如果合适的话,保持标题简短,时髦,切中要点。而不是“这是你的风格,你的方式”,简单地使用像这样的“你的风格。你的方式。”人们会浏览,保持这些标题简短有力有助于他们更快地消化中的信息。
记住,这种方式可能会让人感觉很突然,你需要考虑一下你所从事的项目类型,以及目标受众来决定方法是合适的,相对于更标准的格式。
正确的设计“声音”。在项目中处理文本时,选择正确的字体将影响就像你说话的声音一样。要大声,要柔和,要友好,要正式,要有趣。每一种字体都有自己独特的声音,关键在于找到合适的字体你正在做的项目的声音。当你刚接触字体时,这似乎是一项艰巨的任务,所以不要害怕从类似的项目中获得灵感,并从这些项目中汲取灵感它们有助于影响你的决定,并提高你的理解什么是合适的。
你的正文,并提高可读性处理正文文本,并试图找到合适的行长度可能有点平衡。对于一个单独的列页面,45到75个字符被普遍认为是满意的行长度,而行长度为66个字符(包括字母和空格)被发现是最佳位置。当然,字体大小和行高在决定可读性时也起着重要作用,但是对于行长,保持在45到75个字符之间,就会更好了。
偶尔使用纯装饰的幽灵文字也可以,但要保留阅读的问题。屏幕上的大部分文本内容应该坚持可用性最佳的做法是没有问题的。但有时,希望添加纯出于装饰目的的文本,我们不希望所有的设计都落入乏味。如果没有元素会以任何方式影响用户体验,那么出于装饰的原因,插入奇怪的元素是可以的。
使用户界面中的元素彼此区分。按钮、通知,ui中两个独立但重要的元素。如果可以的话,总是试着确保你的用户能够快速地将它们区分开来,轻松扫描您的网站或应用程序。按钮,在大多数情况下,将优先,所以确保他们是最突出的。项目在屏幕上,并很容易区分其他元素。
只是一些细微的阴影,你所需要的。我们都喜欢阴影,对吧?它们可以作为微妙又很强大的视觉线索,在您的设计中使用要适度。现实世界中的阴影,在大多数情况下几乎是不可察觉的,而且所以你应该在ui中模仿这种行为。放下沉重和黑暗的阴影并降低不透明度,以实现一些的东西更微妙和栩栩如生。
使用全部大写?选择适合的字体,能够达到光学清晰度。在你的设计中适度使用“全部大写”是很好的。选择一个合适的字体与行高和较重的字重,使用户的光学清晰度。
让面包屑脱颖而出,易于为用户解释。面包屑无处不在,经常用于内容丰富的网站,通过最小的调整,你可以确保用户能够快速定位他们在一个网站上的位置以及他们可能需要去的其他地方。如果用户已经通过使用跳转到网站的某个深度,这一点尤其有用。
使用高度饱和的颜色?试一试用浅色调来缓和气氛或者阴凉处。高度饱和的颜色(明亮的蓝色、红色、绿色等)可以让网站看起来很棒,但是当过度使用时,它们会使使用者的眼睛疲劳,主要是在使用的时候的文字内容。尽可能使用时要适度,并尽量与柔和的颜色搭配颜色或色调变化)的饱和颜色,以避免可怕的眼睛疲劳。使用这种方法还可以直接注意到饱和的色彩和使最重要的内容前面和中心,与更柔和的颜色采取较少突出角色,让用户的眼睛休息一下。记住,在选择颜色时,可读性和可访问性应该是最优先的。
在ui中使用已建立的图标,为了避免给用户造成混淆。在你的设计中添加图标时,试着选择一个有代表性的已建立的图标。不要选择一个能传达正确含义和功能的图标否则会引起困惑,成为用户的认知障碍。不要在这些图标上过于叛逆。
在众多经过尝试和测试的设计原则中,这里有一个是帮助您为用户生成更清晰的ui的关键。接近只是确保相关设计元素放置在一起的过程,表明彼此之间的关系,这有助于加快用户的认知。
4pt基线网格+ 8pt网格=单一网格。当使用类型时,8点网格旁边使用4点基线
可以为你的设计带来更和谐的垂直节奏。您需要对齐您的类型到基线网格4,使用的行高值为4的倍数(16、20、24、28等)
为什么4?我发现在过去使用特定的文本大小时,按8的倍数缩放是不太合适。
减少标题上的行高是很好的。与长形式的主体文本不同,它需要足够的行高,以便折行易读。标题的推荐行高通常约为1至1.3倍。
选颜色有困难计划吗?在颜色上进行类比论。类似的颜色,也被称为相邻或相邻的色调,是其中之一最和谐的配色方案,可以大大帮助你,如果你有很难挑选出搭配得很好的颜色。由三原色、二原色和三原色组成的一组相邻的色调帮助您创建一个简单的,颜色方案快速。当你需要快速将颜色调和到混合中时,可以使用类似的方法。
在你的设计中尽量提高信噪比。你可以在你的设计中通过最大化信号来实现清晰和可用性最小化噪声,从而产生高信噪比。您可以通过确保提供相关信息(信号)来实现这一点有效,不相关的信息(噪声)被减少或完全删除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式说话。语气吗?尝试所有小写字母。使用较重的字体和大写会显得有点正式和夸张。试着选择全小写和较轻的字体。在处理特定项目时,使用类似全小写的拷贝可以呈现更非正式的、可接触的信息。记住要在图像之间使用某种颜色叠加与文字达到较强的对比。
当使用类型时,元素不需要尖叫“看看我!”一直如此但他们确实需要一个平衡的等级制度。只需通过重量、大小和颜色进行细微的调整就可以实现这一点。这样做可以让用户扫描并找到必要的元素,避免在过程中产生任何混淆。
养肥了,字体大小为最佳易读性。当设置暗色文字与浅色背景,选择一个更轻的粗细。但是…反过来说:浅色文字>深色背景。最好是看一下增加一点字体重量,特别是对于长表单副本。以最佳的易读性为目标,避免让用户的眼睛疲劳。
试着为你要呈现的内容选择合适的字体。用户是精明的,有一种直观的感觉,当内容与他们交谈当它不是。正确的字体选择是至关重要的,使您的内容讲给他们直率和情感的水平。
你是否使用全大写的短行文本?嗯…这是一个好主意,增加这些字母之间的间距,以达到更好的用户的易读性。这样做使单词更容易阅读和处理,因为字母更多彼此区分。字母之间的间距只要稍微增加一点就可以。
打开这些错误消息,您的表格有帮助。在使用表单时,请尝试并确保错误消息得到解释。出了什么问题,如何补救。总是让用户了解情况,即使是像常规一样常见的事情的形式。让这些错误消息有用,不要让您的用户蒙昧。
试着向用户保证在加载过程中会发生一些的事情你的应用程序。显示应用程序元素的框架可以帮助你快速沟通布局和确保用户正在发生一些事情。系统状态可见性是一个重要的原则要遵循,并允许用户知道发生了什么。不要让用户从一开始玩猜谜游戏。
告诉用户将要做什么如果他们应用了某个动作。在应用特定的操作之前,总是尝试并详细地告知用户可以有结果。这尤其适用于具有不可逆转后果的行为,如删除某些东西。让用户知道将要发生什么,并在此之前要求他们进行确认。他们就会按下那个标有“删除”的红色大按钮。
参考文献《UI & UX Micro Tips - The Ultimate Collection》
在设计的创作重,很多设计师都喜欢追求软件技法带来的炫酷感,而忽略了构图理论知识带来的重要性,这篇文章就是为了解决这个问题
海报设计对于初学者而言,是一个简单入门,又容易出作品集的类目。在刚开始练习时不要天马星空的去想象,最好的练习就是根据一定的构图规范,尝试寻找规律,建立可行的秩序,让版面具有一定的阅读性。
-
只有在版面具有基础的阅读性,才可以根据想法思路进行创意性的表现,而建立持续最简单的方式之一就是运用构图。当下主流的常用构图,我大概总结整理有七种形式,下面我们一起来了解一下,附带案例演示。
第一种:四周压角构图→
四周压角构图指的是将标题或者重要信息放置在版面的四个边角处,可以是图形或者文字,其余信息元素等则放置在画面中间区域,使其整个版面严谨有序,平衡且具有视觉的张力。压住四角一般会结合居中式构图来呈现版面,可以产生视觉聚焦。
①
将信息压在四个角之内
②
将信息超出页面四角一部分
③
将信息沿四周环绕排版
第二种:对称式构图→
对称式构图指的是将版面分成上下或者左右两个部分,上下或左右两部分比重相同,排版相似,对称式构图可以使版面更加有秩序感,适合处理信息较多,层级较为复杂的内容。对称式构图可以很快速的塑造出版面的平衡,视觉上的平衡几乎就等于完成了版面的50%设计目的。是初学者中最为常见的形式之一,对称之间互相呼应,信息处理可以从中快速打破呆板状态,让版面具有灵活性。
①
上下对称式构图
②
左右对称式构图
第三种:居中式构图→
居中式构图也叫中心式构图,是指把主体信息放在版心中间,这样容易产生视觉聚焦,其他信息围绕版面中心来进行排版设计,放在版面中心的可以是文字、图片、图形或者文字等。使用居中式构图,需要多注意画面整体的平衡和元素之间的留白关系,让元素组合之间留有足够的对比与阅读性。
第四种:S型式构图→
S型式构图,将主要元素按照S型排版,版面更加的自由生动,非常具有表现力,是一种很常见的灵活构图手法,主要元素可以是图像、图形、标题文字、slogan等。S型式构图是讲曲线与版面进行结合,可以快速的创造出灵活的版面视觉以及节奏感,可以很好的提高版面的形式感,同时也可以有效的引导观众读者的视线。
第五种:三分式构图→
三分式构图是指将版面分割成相等或不等的三块区域,每个区域放置相应的信息,三分式构图分垂直三分法和水平三分法,三分之后版面更有秩序感,适合处理文案较多,层级较为复杂的内容。难度较高,同时容易让版面连贯性断层,所以在运用当中需要额外留意元素与空间之间的融合表现。
①
水平三分式构图
②
垂直三分式构图
第六种:倾斜式构图→
倾斜式构图,是指将版面整体或者主要元素作倾斜处理,也可做透视处理或对角处理,这种构图使版面更灵活,更加的具有形式感,作倾斜处理的元素可以是主题、图片等元素。倾斜与对角可以提高文字或图片的表现力,能很快速的塑造整体的空间感。
第七种:散点式构图→
散点式构图,是指将元素按照规律或者不按照规律自由的放置在版面的区域,散点放置的内容通常有文字,图片等,通常散点式构图都会结合S型式构图搭配使用,这种构图形式感强,更具有画面表现力.在运用的时候,需要特别注意文字或标题的阅读性,过于抢镜会让版面丢失主题。
光说不练假把戏,实操案例来一个,这一个案例是围绕四周压角构图来分享海报的制作操作技巧。
涉及到的知识点有:
①四周压角构图的技巧;
②文字编排;
③利用文字的局部轮廓化使版面更具有形式感。
我们先来看看最终的海报效果先。
第一步:→
所选的文案是一个摄影展,所以我们找了一张具有故事性的图片作为底图,新建文档,背景填充为黑色,置入图片,确定图片在版面中的位置,因为我们准备做四周压角构图型的海报,所以我们与居中式构图相结合,这样能使版面的视觉聚焦。
第二步:→
根据图片的构图,我们来确定整体版面的构图形式,由于图片是居中偏右的,所以我们用居中式构图加上四周压角构图来进行整体版面的风格呈现。
第三步:→
将主题文案“无限的山峰”以四周压角构图的方式放置在版面的四个角上,我们使用的是压在版面以内的压角构图,并结合居中构图的方式,这样能使版面更加的规整有序,而且具有视觉张力,注意图片和文字的联系。
第四步:→
现在我们来进一步进行处理,由于主题文案相离较远,接下来就是增强主题文字之间的联系,我们尝试用线来处理,线的作用就是连接与分割,我们用线将主题文字连接起来,并加上一些汉语拼音元素,使线条不会那么单调,并且更具有形式感。
第五步:→
先不急着下一步,我们先来观察下版面,现在的版面被我们分割成了四份,我们把剩下的信息分别在指定的区域内进行排版。
第六步:→
我们将剩下的文案分别进行排版,重要的信息我们需要放大处理,不重要的信息可以偏小一些,重要的信息比如:参展艺术家、日期、地址等,这里要注意层级之间的划分,要使版面显得井然有序。
第七步:→
其实版面到这里已经处理的差不多了,但是主标题看起来稍显平凡,跟内文的文字一样,没有什么特征特色,所以我们可以做更多的变化,拆分主题文字的一些笔画,并使其轮廓化,我们还可以倾斜或放大一些笔画,或者局部模糊,打散等等众多效果都可以尝试。
第八步:→
其最后把整体的细节稍微调整下,这样,一张具有形式感的海报就形成了,这张海报用到了四周压角构图,居中式构图,所以可得出结论,七种构图方式之间是可以交叉使用的,只要能使版面更加的好看,更具有形式感就行。
→ 完成!!
随着新的一年缓缓拉开序幕,UI设计领域也迎来了新的变革与挑战。兰亭妙微设计团队,作为行业内的佼佼者,始终站在设计前沿,不断探索与创新。今天,我们将与您一同解锁2025年UI设计的新趋势,特别是色彩与布局方面的秘籍,为您的设计之旅提供灵感与指导。
一、色彩趋势:回归自然,拥抱温暖
在2025年,色彩选择将更加倾向于自然与温暖。这反映了人们对和谐共生、心灵慰藉的渴望。以下是我们预测的几个热门色彩趋势:
1. 大地色系:从沙漠的金色到森林的绿色,大地色系以其沉稳、质朴的特点,成为营造温馨氛围的首选。这些色彩不仅能够激发用户的舒适感,还能与多种设计风格相融合,展现出独特的韵味。
2. 柔和粉色:粉色作为近年来备受追捧的色彩之一,其柔和的色调在2025年将继续占据重要地位。无论是浅粉色还是略带灰调的烟粉色,都能为用户带来温馨、浪漫的感受,非常适合用于女性用户或情感类产品的设计中。
3. 活力橙色:在追求舒适与温暖的同时,活力橙色以其鲜明的个性和积极向上的态度,成为打破沉闷、增添活力的不二之选。在需要强调重点或激发用户行动力时,橙色能够发挥重要作用。
二、布局趋势:简洁明了,注重交互
在布局方面,2025年的UI设计将更加注重简洁性与交互性。以下是我们总结的几点布局趋势:
1. 极简主义:随着信息量的爆炸式增长,用户对于简洁、清晰的设计需求愈发强烈。因此,极简主义在2025年将更加盛行。设计师们将通过精简元素、优化排版、使用留白等手段,打造更加舒适、易用的界面。
2. 卡片式设计:卡片式设计以其直观、易读的特点,成为近年来备受青睐的布局方式。在2025年,卡片式设计将继续发展,不仅限于信息展示,还将更多地应用于交互设计中,如滑动切换、点击展开等。
3. 动态布局:随着响应式设计的普及,动态布局在2025年将更加成熟。设计师们将更加注重界面在不同设备、不同屏幕尺寸下的适应性,确保用户在不同场景下都能获得良好的使用体验。
结语
色彩与布局作为UI设计的两大核心要素,对于提升产品的吸引力与用户体验至关重要。兰亭妙微设计团队将继续关注设计趋势的发展变化,不断探索与创新。我们相信,通过巧妙地运用色彩与布局技巧,我们能够为用户带来更加美好的使用体验。让我们携手共进,共同迎接UI设计的新篇章!
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。
作者:彩云Sky
链接:https://www.zcool.com.cn/article/ZMTU5NDg1Mg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。
大体上分为两类:彩蛋流和体验流
搜索的本质是什么?无疑是内容的召回和信息的推荐。
可随着时代的发展和行业公司的内卷,不少公司除了持续优化搜索结果与推荐外,在搜索的体验和彩蛋上也是下了不少功夫,从而进一步加强自有产品的竞争力与用户黏性。因此今天就来盘点一些,那有意思的大厂搜索交互。
大体上分为两类:彩蛋流和体验流
注重提升搜索过程中的趣味程度,以增加用户的好感度与产品印象/口碑。行业代表:谷歌浏览器、百度浏览器
可以说是搜索彩蛋的先行者,内置了很多搜索关键词的有趣彩蛋,如娱乐角色:搜索【灭霸】,页面右边会打响指,相关字段会被’毁灭‘掉
搜索【马里奥兄弟】,右边也有游戏里一样的点击彩蛋
还有各种有意思的搜索结果比如搜:is google down(谷歌关闭了吗),搜索结果优先显示:NO
再如搜索《银河系漫游指南》的一句话:the answer to life, the universe, and everything。此时搜索结果页会自动计算成42。貌似也只有读过《银河系漫游指南》的人才能明白其中的奥秘。听说是生命、宇宙与万事万物的终极解答。
而且在日常的节日、活动、热点运营上,谷歌也从不缺席。都会在搜索框上用【插画、动效】等形式承载各种活动入口、吸引用户参与,可以已经形成一个稳定、具有品牌感的企业文化了。
如各种复活节、开学季、母亲节动效。而且更多有趣、创意的设计案例,可上:有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。
百度在搜索彩蛋里下的的功夫也不少,最著名的应该是搜索【黑洞】时,页面上会出现黑洞的吸入特效。
而且和谷歌相同,在其他的搜索关键词上,百度也是埋下了不少彩蛋,比如:搜索【翻转】,页面会左右翻过来
搜索【跳跃】,页面会在上下跳动
搜索【失重】,页面上的字会飘起来
而在【活动运营】上,百度也是很有心地进行着创新设计,力求给用户一种眼前一亮的感觉。比如每年的愚人节,搜索结果页上都有‘调戏’用户的创意设计,各种轻松调皮的画风 给不少用户带来了新鲜感和趣味性。
还有在【活动入口】的设计上也是特别有想法:在某年的圣诞节上,百度创新性地将活动入口’嵌套‘在结果页卡片中间,用活动里的ip形象-雪人「抬着」结果页卡片和在上面「滚动」
用这种充满创意+应景的的入口设计与引导方式,最大限度地降低漏斗,吸引让更多用户参与该活动。另外,百度搜索框上面的运营活动入口,也和谷歌有异曲同工之妙。
而且更多有趣、创意的设计案例,可上:有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。
注重提升搜索过程中的交互体验,以增加用户的操作效率与产品易用性。
代表:苹果产品、夸克浏览器
·iPhone
iPhone的【桌面搜索】除了能查询手机上的各种信息、文件,它还自带了【汇率转换和计算器】。在搜索框输入【数学公式、汇率转换】时会自动计算对应的结果。无需用户额外打开计算器、浏览器,大大减少操作链路。
在iOS的原生键盘里,可以根据输入词检测+搜索对应的手机号码:当你输入 【打+我或通讯录好友+电话】时,键盘上会自动显示自己或好友的电话号码,点击号码就能自动粘贴在输入框中。
用户无需前往通讯录就能轻松「获知+想起」谁谁的电话号码,大大提升操作体验与效率
·Mac
在Mac电脑的工具栏上搜索相关帮助时,系统会直接把该结果所对应的页面位置调取出来并悬浮展示。用户可以直观地该结果在哪里,并减少寻找的操作路径,免去多余操作
在Mac电脑的‘系统偏好设置’里搜索帮助,在结果列表上会以聚光灯的形式展示各个结果入口。选择具体某个结果时,该入口的聚光灯会更清晰些,特别容易找到搜索结果。
夸克浏览器除了传统的「点击搜索框」唤出输入栏外,在屏幕任意位置下滑手势同样可以唤出搜索框。
降低「需要往上手指移动,才能点击搜索框」的操作成本,让用户更快、更精准地触达搜索。
而且在输入网址或英文等字段时,搜索框下方会出现一个滑块区。点击就会变成长条的滑块,拖拽滑块即可改变光标位置。
而且更多有趣、创意的设计案例,可上:有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。
让用户更方便地将光标快速移动到想要的位置中,以便更快地搜索信息,大大降低操作成本。而且夸克还会前置搜索结果, 比如在搜索框中输入“某城市+天气”的关键词,上方就会以卡片的形式显示该地区最近一周的天气。
用户无需触发搜索、进入结果页才能看到想要查询的信息。
不管是一部电影,还是一张视觉创意,想要消费者或者老板买单,从形、意、色、字、构、质等一系列视觉语言,都需要很好的掌握。
设计过程被描述为多个阶段,每个阶段都包含不同的活动来完成该阶段,它没有统一的标准流程,每个公司和设计师都有自己的流程版本。
尽管存在多个流程,但一般流程和阶段类似于以下内容:
了解问题:初步了解问题。观察、采访和倾听用户。
定义问题:解释和定义要解决的问题。
构思:通过头脑风暴产生尽可能多的想法。
原型设计:构建原型并与其他人分享( 再次缩小解决方案空间,为实验阶段 )。
测试:测试可能的解决方案、实施、改进或重新设计。
传统的问题解决采取有条不紊而又科学的形式。该过程从一个问题开始,定义要采取的步骤以及达到解决方案的工具或方法。
设计思维是一种创造性的策略,可以产生创造性的未来结果和/或创造性的问题解决方式,它应该被认为是一种以解决方案为中心的思维策略。
它通常被描述为一种创造性、主观和感性的对许多大型组织的分析逻辑( 布朗,2008 年 ),或作为分析和创造性推理模式的组合( 邓恩 & 马丁,2006 年;利特卡,2015 年 )。
设计思维来源于常规问题解决方法,常规问题解法是设计思维的基础。
从解决问题到设计思维,Liedtka (2013)
结果发现,设计思维实际上也是一个解决问题的过程,而不仅仅是一个创新过程( 利特卡,2013)
一个例子是,丰田采用设计思维从头开始分析其西海岸的一个客户联络中心,在重新设计过程中,组建了一个由一线呼叫代表、软件工程师、业务主管和变革代理组成的跨职能团队,这一举动最终改变了客户和员工的服务中心体验。
我们每天都会遇到问题,但是当我们解决同样的问题时,它们就成了例行公事( 似乎已经忘记它们是问题了 ),我们甚至都没有意识到正在解决这些问题。例如,我的办公室在 30 分钟路程之外,该怎么到达那里?开车、坐火车或巴士到目的地;除非车子轮胎被刺破,否则你就需要弄清楚如何到达办公室。
1990 年代,IDEO 的 David Kelley 和 Tim Brown 与 Roger Martin 共同创造了特定术语:“设计思维”,并将多年来酝酿的方法和想法封装成一个统一的概念。
设计思维是以人为中心、开放式、基于问题的方法论。这种方法最初是为了改变工程教育中的教学方式,而工程师处理和解决问题的方式有其设计思维的基础。
设计思维一词可以追溯到 1987 年 Peter Rowe 的著作:“设计思维。” 他描述工程师和建筑师处理问题的方法有很大不同。
90 年代初,认知科学家 Don Norman 加入 Apple 团队,担任他们的用户体验架构师,这使他成为第一个在职位中包含 UX 的人。他提出了“用户体验设计”这个术语,因为他想“涵盖人们对系统体验的所有方面,包括工业设计、图形、界面、物理交互和手册。” 从那时起,这些领域中的每一个都将用户体验,扩展到了自己的专业领域。
设计思维在解决“棘手问题”时特别有用。
棘手问题的特征
“棘手问题”一词是由设计理论家 Horst Rittel 在 1972 年创造的,用来描述本质上非常模糊 \ 特别棘手的问题。棘手问题,有很多未知因素,没有确定的解决方案。问题或解决方案可能与另一个棘手的问题有关,因此这是一个需要设计思维的持续过程。贫困、饥饿和气候变化是一些现代的棘手问题。
设计主题的范围是普遍的,因为 设计思维可以应用于人类经验的任何领域。
它可以用于:
符号和视觉传达:这包括平面设计的传统工作,如排版和广告、书籍和杂志制作、科学插图、摄影、电影、电视和计算机显示。
材料:这包括对日常用品的形式和视觉外观的传统关注 —— 服装、家用物品、工具、仪器、机械和车辆。
人类活动和组织性服务:包括对物流的传统管理关注,结合物质资源、工具和人类低效的序列和时间表,以达到特定的目标。
复杂的系统或环境:生活、工作、娱乐和学习。这包括系统工程、建筑和城市规划的传统关注点,或复杂整体部分的功能分析及其随后在层次结构中的集成。
设计思维起源于设计师的培训和专业实践,但这些原则可以被每个人实践并扩展到每个活动领域。(布朗,2013 年)
在企业中,设计过程可以为企业环境中的问题解决带来创新思维。它还可以用于医疗保健,通过向护士、医生和管理人员教授设计思维技术,我们可以激励相关从业者贡献新的想法。
不管是什么设计,理解和研究问题是必不可少的,因为我们能够从其出发,从而进行以用户为中心的设计。
设计思维的最早阶段是搞懂你能带来的情感价值。设计思维方法迫使你停留在提问与质疑阶段,而不是准确定义出问题后进入下一阶段。我们都有过快进入解决方案模式的倾向,所以设计思维方法迫使你真实地存在于这个不清楚、有时还非常混乱的时刻,从而使你对要解决的问题产生更好的理解。(利特克,2013)
传统的问题解决涉及提出一个解决方案,但设计思维首先使我们发散,试图为问题生成各种可能的替代解决方案。然后让我们进行收敛性思维,缩小多种可能性,找到单一的最佳解决方案。
根据利特卡和奥美 (2011) 的说法,设计思维的全部意义在于学习一种新的、系统的解决问题的方法。正如我们思考创造力一样,即使是设计思维也可以通过实践来教授和改进。
设计过程从来都不是线性的,它由多次失败和迭代组成(布朗,2018)。
首先,设计师试图将问题与过去的类似案例联系起来。如果这种方法不能提供任何解决方案,下一步就是使用知识和创造力作为一种实验思维形式来产生新的想法。使用决策矩阵对这些想法进行评估,从而会产生被进一步分析和测试的解决方案。如果成功,它将被实施。如果不成功,则需要重新表述问题,并重复该过程。这是一个迭代过程,即循环方法。
这一持续不断的重新再设计过程,源于和客户亲密接触的洞察。
学习设计思维不仅仅意味着学习一套新的工具。它还意味着:学习收集和分析大量数据;学习挖掘对象可能的形态而不是自主认为他是什么;学习管理不确定感,以及与许多新的伙伴合作( 利特卡和奥美,2011)。你可以进行的研究类型分为三类:生成性研究、评估性研究和验证性研究。
一种常见的表述 —— 实际上是设计思维的另一种视角 —— 即设计师应该预料到会“很快失败或经常失败”(布朗,2009)。
当过程早期发生故障时,例如被拒绝的原型,实质上它可以为有效解决方案提供关键见解。这种观点与传统的先形成理论,再检验正误的方式相矛盾。
Airbnb、Braun 和百事可乐等多元化公司都在 采用设计思维并将其作为核心战略。例如,IBM 为全球旗下的 44 个设计工作室聘请了 1600 名设计师,并且正在培训数以万计的设计师员工建立深度创新能力 ( O'Keefe, 2017 )
设计思维为我们解决问题添加了以人为本的元素。当我们试图通过牢记人们的想法来解决问题,并使用基于直接观察乃至访谈的研究时,我们便会捕捉到与消费者需求一致的意外见解和创新。
它有助于将成功的产品更快地推向市场,最终节省企业资金。
IBM 的健康和人类服务组织的设计思维实践,通过有效使用设计和设计思维帮助企业将缺陷数量减少了 50% 以上。这种更高效的工作流程导致计算出的 ROI 超过 300%。
由于复杂的问题从来不能被所有人完全理解,因此在尝试设计解决方案时,处理歧义和多个并发的思路方向的能力是至关重要的素质。
设计思维通过综合和归纳思维,帮助实现质的飞跃。它允许通过解构来测试约束,并允许通过多样性思维和批评思维,来拥抱和探索歧义。
消费者通常不知道他们有什么问题需要解决,或者他们无法用语言表达出来。只有经过仔细观察,设计者才能根据真实消费者行为中看到的东西来识别问题,而不是简单地根据对消费者的想法来确定问题。这有助于定义模棱两可的问题,并找到解决方案。
该方法鼓励“跳出框架思考”(“疯狂的想法”);它蔑视显而易见的事物并采用更具实验性的方法。
在早期的流程阶段鼓励大胆的想法,以产生创造性的解决方案。使用它是为了让设计师可以尝试开发新的不受约束的思维方式,或对常见问题的创新解觉方法。
根据大多数设计学院的说法,具备特定特质的人能够更好地发挥设计思维的作用。
同理心:从多个角度想象世界 —— 同事、甲方客户、实际使用者和消费者的角度。要成为更好的同理心,必须倾听和观察他人的行为,注意并获得洞察力。
综合思维:重要的是不仅要有分析能力,而且要能够提出新颖的解决方案,还要凭直觉。
乐观:除非你相信有解决方案,否则在遇到挑战且解决方案遇到瓶颈时,你可能会放弃。
实验主义:重大创新并非来自渐进式调整。设计思想家以创造性的方式提出问题并探索限制因素,并朝着全新的方向发展。
协作:产品、服务和体验日益复杂,因此必须拥有一支具有不同背景的团队,以帮助从多个角度看待问题。
当我们想到一个问题的多种解决方案时,对我们解决问题会非常有帮助,因此“功能固定性”阻止了我们以新颖的方式使用旧工具解决新问题。想要摆脱功能固定,首先是要让人们可以使用“改造后的衣架进入上锁的汽车”。这也是盗贼第一次可以用信用卡撬开简单的弹簧门锁。
为了帮助设计师利用文科和技术理论,整合多个领域的知识以找到创新的解决方案,我们采用设计思维来获得洞察力。该方法侧重于可视化和操作,因而帮助我们更容易地了解实际解法,而不仅仅是理论模型。
第一批美国公司在 2000 年代初期开始实施设计思维,这一概念引起了德国投资者 Hasso Plattner 的兴趣,他于 2006 年资助创建了两所设计学校(d.schools),其中一所位于波茨坦大学(德国),另一所位于美国斯坦福大学。由于两所学校都成功地为大型组织提供了高管设计思维培训,因此该研究重点关注这些国家,以寻找早期实施者。
设计思维通常涉及希望参与整个设计和开发过程的庞大利益相关者团队。
观点、才能和经验的多样性被认为是注入新思维的部分重要来源。多样性确保通过融合不同的观点、技能和知识来产生创意(卡振思,2018 年;萨梅和德拉赫-扎哈维,2013 年)。设计思维的协作方法和工具可帮助团队以积极的方式利用他们的差异。
决策是平等的,因为每个成员的意见都被征求和使用(卡尔格伦等,2016)。
当 IDEO 去 Apple 展示他们的鼠标时,它不是什么花哨的设备,而是一个用胶带粘起来的原型。
低保真原型制作起来既快速又便宜( 想想几分钟和几分钱 ),但可以从用户和同事那里得到有用的反馈,这符合快速验证、廉价试错的原则。为每个想法投入尽可能少的资源意味着前期投入的时间和金钱更少。此外,将多个原型带到现场进行测试为用户提供了比较的基础参考,同时也有助于揭示某些需求。
为了创新,设计思维意识到认知和行动对创新过程很重要。认知包括接受度、乐观和创造性的信心( 凯莉 & 凯莉,2013;郑,2018),而行动包括快速原型设计、旅程地图和假设浮现( 假设浮现:assumption surfacing,这是一种评估技术,涉及写出潜在的假设和反假设。)( 卡尔格伦等,2016;利特卡,2015)
如果领导层不欢迎风险、模棱两可和风格的改变,实施起来就会变得更加困难。它会被管理者“质疑”其具体指标
沃尔特斯 ( 2011 ) 声称,由于设计思维的模糊性,它与组织文化相冲突。
据受访者称,在日常业务中使用设计思维之所以不会是最优选项, 因为它是资源密集型的,增加了工作量。( 丽莎等,2016)
在医疗保健等规避风险的行业和公司中,“经常和早点失败”的方法被认为是非常困难的。
许多设计师反对设计思维这一观点,设计思维不仅关乎一个过程,而且关乎改变思维过程并提高人们可能提出的解决方案的创造力。
“设计思维”的推广已被大型全球公司用来增加业务。不过,在更广泛的设计世界中,我甚至会说“设计思维”的过度宣传导致了所提供设计质量的下降。—— Yasushi Kusume
弗吉尼亚理工大学科学、技术和社会助理教授 Lee Vinsel 在《设计思维运动是荒谬的》中写道,“归根结底,设计思维与设计无关。这与文科无关。这与任何有意义的创新无关。如果这意味着重大的社会变革,那肯定不是关于“社会创新”。这是关于商业化的。”
观察人们的行为以及他们如何与环境互动,可以为你提供有关人们想法和感受的线索。
你可能认为你知道问题所在,但只有通过观察才能了解消费者真正需要什么。
宜家派设计师到人们家中,观测他们的互动行为来了解他们的需求。这将使设计者能够推断这些经历的无形含义,以发现洞察。这些洞察提供创新解决方案的构思方向。而事实上,最好的解决方案来自于对人类行为的最佳洞察。
Good Kitchen 是一家为老年人和体弱者提供膳食的社会服务机构。起初的问题似乎是设计不当的膳食菜单。然后设计思维揭示了无数问题,所有问题都源于服务本身的性质。因此,经由对服务进行了彻底改革的之后,最终提高了客户和员工的满意度(利特卡,2014)
对于设计师来说,遇到设计瓶颈期很正常,入行一段时间后所具备的能力就会达到峰值,无法突破峰值就会遇到瓶颈。主要在设计思维和设计技法层面受限,打开设计思维才能突破瓶颈期,通过积累优秀的案例并进行总结分析,可以更快的打破思维限制。
分享目录
一、趣味性的登录设计
二、瓷片区的趣味性手势交互
三、营造怀旧感的温馨体验
四、趣味性的进度提示设计
五、场景感的点击操作
六、动效引导用户发帖
七、卡通形象强化瓷片区视觉感
八、不改变布局的曝光强化
九、可以晃动的 Banner 图
十、场景感的底部标签栏设计
一、趣味性的登录设计
登录是进入产品的第一道防线,也容易让用户产生排斥感,降低用户的防备心理才能提高登录的意愿度。
盯潮 App 在登录界面中,以潮流元素和商品等内容进行设计,使得页面视觉感丰富。晃动手机时元素也会移动,在掉落或者碰撞手机边缘时配合震动感,让体验变得非常有趣。趣味性的设计降低了用户的排斥感,提升了登录的意愿度和体验感。
二、瓷片区的趣味性手势交互
瓷片区、Banner、金刚区是产品中的三大运营模块,起到提高曝光度达到引流的目的。瓷片区在页面中的布局比较灵活,设计表现也非常丰富。
盯潮 App 在首页瓷片区设计中,以栅格式布局进行区块划分,占比较大的模块类似于 Banner 式表现。通过手势可以任意拖动实现切换,趣味性和互动性相结合,提高了用户的使用乐趣。
三、营造怀旧感的温馨体验
童年的记忆是我们逝去的青春,每每看到小时候的画面,总能勾起我们童年的回忆。最近发现一款结合怀旧感营造设计风格的产品,名字叫“软眠眠”。
这是一款拯救失眠者的治愈系睡眠 App,以一幅小时候生活的环境插画填充界面背景,图标设计也是提取小时候的玩物或者生活用品,视觉风格营造极强的怀旧感。无论是画风还是配色、配乐等,都勾起了我们满满的回忆,带给用户温馨的体验。
四、趣味性的进度提示设计
在完成步骤化和消耗数据等内容表达层面会选择进度条,通过可视化的表达提高用户的理解,减轻信息认知负担。
软眠眠 App 在定制睡眠计划的过程中,完成选项时的进度条设计非常有意思,是一个小孩通过拉动绳子移动。拉动过程中结合动态表达,配合手绘风的表现让人感觉轻松愉快,趣味性的设计也提高了完成选项任务的意愿度。
五、场景感的点击操作
在保障底层操作体验的基础上,设计会越来越讲究细节的体验,逐步强化情感化的融入和场景感的体验。
最近在体验小雞上工 App 时,在找工作的列表设计中加入了“抢”按钮,在点击列表时按钮会有按压的动效过程。模拟抢拍按钮获得机会的体验,营造场景氛围感,提高了设计表达的趣味性。
六、动效引导用户发帖
微动效可以提高功能的吸引力,也能让互动体验变得更有趣,可以通过动效引导功能操作和提高关注度。
腾讯动漫 App 在圈子栏目中,以 IP 形象结合动效强化发帖按钮,以此引导用户参与发帖。动效不仅突出了发帖的关注度,也让发帖按钮设计更有亲和力,进而提升用户的点击欲。
七、卡通形象强化瓷片区视觉感
瓷片区起到强化曝光达到流量引导的作用,提高该模块的吸引力至关重要,视觉感的突出也尤为重要。
会玩 App 在首页“一起玩”的瓷片区设计中,以卡通形象结合丰富的色彩进行表现,各种装扮的形象丰富视觉感。卡通形象设计风格统一,卡片色彩丰富且协调,整体瓷片区视觉冲击力十足。
八、不改变布局的曝光强化
在当前产品结构不变的基础上,如何提高局部内容或者主推内容的曝光度,是产品设计师不断探索的方向。
爱奇艺 App 首页推荐栏目 Banner 图下方,默认情况下以宫格布局推荐影片。前段时间在打开时发现了一个临时设计表达,保持当前结构布局不变,放大了图片填充和推荐影片,整张画面填充宫格,视觉张力十足。该设计表达既不会干扰当前布局,也能强化推荐影片的曝光度,解决方案值得探索。
九、可以晃动的 Banner 图
Banner 可以在创意、造型、互动形式等方面进行设计发挥,也呈现了许多优秀的方案,产品设计师也在不断尝试更多的可能性。
最近在体验盯潮 App 时,发售栏目顶部 Banner 图设计引人关注。当用户左右晃动手机时,Banner 图背景层不动,而文案和产品等元素层会跟着晃动的频率左右移动。可以晃动的 Banner 图非常有意思,成功地吸引了用户的关注度和点击欲。
十、场景感的底部标签栏设计
底部标签栏设计可以在背景、造型、图标等元素中发挥,其中图标设计中的发挥相对更多一些,在背景和造型层面的案例较少,不过最近也发现了一个解决方案。
在体验云游万里长城小程序时,进入之后的小程序底部标签栏设计结合了长城墙面和结构,非常有场景代入感。设计了深色版和浅色版,图标造型设计也融入了长城元素,不失为一种优秀的差异化设计探索。
小结
希望本期的分享可以开启大家更多设计思维,从优秀的设计方案中发现设计的轨迹,复用到后期的项目设计中。本文描述属于个人理解和总结,不足之处欢迎大家留言补充,我们互相进步。
形状设计可以影响整个界面的视觉效果。通过选择适当的形状和排列方式,可以创造出令人愉悦、易于使用和富有吸引力的界面。
在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设计中,精美形状设计的关键是深入理解用户需求,注重细节,保持一致性,勇于创新,不断提高技能水平。这样才能创造符合用户口味的界面,提升用户体验。简洁地说,好的形状设计来源于用户需求、细节、一致性、创新和自我提升。
以上总结仅代表个人观点,如有不足欢迎大家补充互相进步。
蓝蓝设计的小编 http://www.lanlanwork.com