首页

改善产品UX设计的实用法则

纯纯

当看到一个产品的视觉效果时,我们通常能很快地判断出它是吸引人的还是哪儿有点不对劲。但是,很少有人能接着说出来为什么这样设计的原因。


本文定义了影响UX的5条实用法则:

1. 比例

2. 视觉层级

3. 平衡

4. 对比

5.格式塔原则

遵循以下5条设计法则可以创造出全面周到的视觉效果,推动用户的参与度并提高可用性。


01 比例

定义:比例原则是指在布局中使用相对大小来展示设计元素的重要性和层级的优先关系。


正确使用此原理最简单的方式是,最重要的设计元素的尺寸要比不重要的元素大。原因很简单,大的事物更能引起用户的注意。在停车场中,当前所在停车区域往往会突出显示,这样做的目的是加深用户的记忆,方便回来取车。

良好的视觉设计通常使用不超过三种不同的尺寸。拥有一系列大小不同的设计元素,不仅能在排版上创造出多样性,而且还能在页面上建立视觉层级结构。


确保最大程度地强调设计中最重要的部分,帮助用户理解如何使用它。例如在Medium中,热门文章在视觉上比其他文章更大。

02 视觉层级

定义:视觉层级的原理是指在布局中,按照元素的重要性排序来引导用户的注意力。


视觉层级可以通过比例,颜色,间距,位置和其他各种信号的变化来实现。同时它也控制用户最终的体验。如果很难确定页面布局的具体位置,则很可能是其布局缺少清晰的视觉层级。


要创建清晰的视觉层级结构,请使用2–3种字体大小来向用户展示页面最重要的信息。或者对重要的内容使用明亮的颜色标注,对次要内容使用柔和的颜色。在Medium中,标题、副标题、正文具有清晰的视觉层级,文章每部分的字体大小都和其重要性相对应。

比例的大小也可以帮助定义视觉层级,因此可以针对不同设计元素进行各种比例的组合,一般的设计经验是包含大、中、小三种设计组件。Uber中的视觉层级结构就很清晰。地图和输入框对半分开,输入框上的灰色的背景引导用户进行下一步操作。


03 平衡

定义:平衡原则是指对设计元素进行满意的排列和比例设置。当屏幕两侧存在分布相同(不一定对称)的视觉元素时,就会达到平衡。在设计时元素所占的面积在创建平衡时也很重要,而不仅仅是元素的数量。


平衡的布局可以是:

对称:元素相对于中心线对称分布

不对称:元素相对于中心线不对称分布

径向:元素从中心的公共点放射分布


在设计中使用什么样的布局取决于想要传达的内容。对称的布局安静而稳定,例如The Hub Style Exploration的界面展现了稳定的对称布局。


不对称的布局是动态的并且引人入胜,创造了一种活力和动感。Nike的设计布局,显示出与品牌相称的具有运动感的不对称的布局。

而径向的布局始终将用户的注意力引向视觉中心,Brathwait手表在径向上保持平衡,所以注意力立即被吸引到表盘的中心。

04 对比

定义:对比原理别。是指将视觉上不同的元素并列排布,以传达这些元素不同的功能类别。换句话说,对比为用户提供了不同对象在大小或颜色上的明显差异。


对比原则通常利用颜色来进行分辨。例如,在UI设计中红色通常代表删除,而绿色代表同意或继续。换句话说,对比为用户提供了不同对象在大小或颜色上的明显差异。


通常在UX中说起对比度,我们会想到文字与其背景之间的对比。有时设计人员会故意降低文字的对比度,用来表示不太重要的内容。


但是在降低文字对比度的同时文字的可读性也会降低,这会导致用户无法看清文字内容。在Greenhouse Juice的包装上,瓶身上文字的可读性取决于果汁的颜色。在深色果汁瓶身上文字对比强,可读性比较好,但是浅色果汁瓶身上的文字几乎无法识别。

05 格式塔原理


定义:格式塔原理解释了人类如何简化和组织由许多元素组成的复杂图像,通过下意识的将各个部分安排到一个有组织的系统中,而不是将它们解释为一系列不同的元素。


格式塔原理指出了我们倾向于感知整体而不是个体元素。在NBC徽标中,中间空白处并没有孔雀,但我们的大脑却能自动填补空缺的部分,感觉到孔雀的存在。

在Uber的注册页面中,字段标签靠近其相应的文本框,这样能轻松理解需要在哪些文本框中输入信息。

总结

除了使某些东西看起来“漂亮”之外,理解和利用这些法则还有助于:

1. 增加可用性。遵循这些视觉设计原则能够设计出易于使用的页面布局。

2. 激发积极情感。美好的事物会引发积极的情绪。美学-可用性效应表明,当人们发现外观上具有吸引力的设计时,可能会对设计的可用性更宽容。

3. 增强品牌认知度。强大的视觉系统可以帮助建立用户对产品的信任和兴趣。

文章来源:站酷  作者:Clippp
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


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.不可逆的操作强提醒


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








































































































































































































































































文章来源:站酷   作者:卡洛设计杂货铺
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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









这几类图标趋势你知道吗?

纯纯

Duoton icon

双色渐变图标

-

渐变色已经流行了段时间,双色渐变设计依然持续是一个大趋势,因为单一的色调无法满足产品所需,双色调图标的特点就是色彩对比鲜明,青春活力,这种相比单色调图标,更适合应用于一些主流偏年轻化产品,因此设计师还可以通过设计色彩打动用户,提升产品竞争力,工具化产品也可以使用这样有层次的图标,不过使用时,需要对色彩进行克制使用。因此,如果您希望自己的设计界面脱颖而出,可以去大胆的使用双色调色彩。

 

 

 

1. 双色调多层质感(弥散渐变,直投影,混合模式)

 

 

 

 

2. 双色调混合模式叠加

 

 

Alpha icon

单色渐变透明图标

-

Alpha icon 图标风格最大特点就是单色带透明渐变,通过弱透明度来制造视觉层次,如果是纯白色,就会显得图标平庸了一些,这种图标运用范围可以是界面中空场景或者一些关键模块的主功能图标。

 

 

 

如下图左侧大卡片上面图标应用思路。

 

 

Cascade icon

层叠式图标

-

层叠式图标,相比于纯白色线条图标,它带来一种更舒适的质感,其设计方法是通过穿插层叠的手法,将日常我们所见到的单一的线条图标,变得更具有视觉层次感,当然这种图标使用场景一般会是在功能说明性页面,功能介绍等。

 

 

Brand icon

品牌植入

-

 

品牌植入一直是非常大趋势,包括今年我们所看到两大厂的品牌更新IBM和UBER等,都是将品牌核心符号植入设计中,我想这样的思路在2020年将持续会是一个重要表达产品气质和记忆点手法打造思路之一,因为用户已经很熟悉目前图标模式,如何能创新区别其他产品,那么融入品牌将是一个不错的选择~品牌的融入技巧有高低之分,需要设计师去巧妙设计

 

备注(因为视频比较麻烦,因此省略了)下面是截图,大家应该能大致感受到

 

 

同样多邻国在前段时间更新品牌,并将其LOGO特征符号植入字体中。

 

 

同样多邻国在前段时间更新品牌,并将其特征元素植入字体中

 

 

 

Motion icon

动态图标

-

 

动态图标是一个能提升产品体验的方法之一,也是微交互中的一种,它可以增加产品趣味性,Facebook在评论入口的表情动画就运用了动态图标, 包括苹果Apple Pay支付成功图标动画,Google Assistant智能助手,Messenger中的打招呼动画等等我们可以逐渐发现动态图标比静态图标的表达性更强,更受到青睐,随着硬件升级,这种动态图标运用逐渐在越来越多场景可见到。

备注(因为视频比较麻烦,因此省略了)

 



文章来源:优波设计   作者:设计TNT
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

 

体验设计进阶技巧-教你打磨页面细节

纯纯

随着体验设计的持续发展,行业内各领域的体验设计质量都有了很大的提升,并且各个竞品之间的差距越来越小。而更高的界面细节设计质量不仅是各个大厂产品体验设计的追求,也是我们拉开竞品差距的关键一环。我们平时可能阅读了很多理论知识文章,但往往在实际工作中却较少运用。学习掌握理论基础知识固然是很重要的,但在设计执行时掌握设计技巧也更能提升工作的效率和质量。那么在设计执行层遇到问题有没有一些立竿见影的解决方案呢?本篇文章分别从视觉、内容和交互三个角度总结了十个界面细节设计点,希望可以帮助你遇到问题时另辟蹊径,延伸更好的设计思路。



在封面和背景图设计的场景中,我们为了让封面上的信息能够更容易看清,通常会在文字下添加一层黑色半透明或者渐变蒙层,但你有想过这个蒙层可以不止是黑色的吗?

在设计社区话题详情顶部背景图时,我们采用封面图模糊处理后作为背景图的方案,为保证信息能够清晰显示会在背景上加一个深色半透明蒙层。当用纯黑色作为蒙层时浅色背景可能会显得很脏,这时可以改用深灰色让背景看起来不会太脏,加入深灰色可以减弱部分背景的黑色让背景图看起来更加柔和。下图左边是用黑色#000000、30%不透明度,右边是深灰#333333、30%不透明度。可以看出右边方案的效果明显更清爽一些。当然更好的方案是通过客户端拾取背景图颜色后生成对应色相的深色蒙层,但这个方案设计相对比较复杂。需要制定一系列拾色和生成对应色值的规范,并且开发成本偏高。有条件的话也可以考虑应用。



界面中使用圆角设计更能让用户感到亲和力和舒适感,所以运用场景也非常广泛。除了比较常见的封面、卡片、按钮等等圆角的使用场景,在一些细节的处理运用圆角也能提升设计品质。比如下图中头像和背景图的衔接处、按钮和底栏背景的相交缺口处如果运用常规的切割边角就比较尖锐,会略显生硬。

而添加了圆角处理后视觉上会更加柔和更协调,对比一下前后的方案不难发现圆角的效果更胜一筹。不要看只是一点很小的细节,其实也体现了设计师对细节的细心追求,用户看了也会体会到设计师的用心。

另外再介绍一下我个人在sketch中快速绘制这类圆角衔接的方法。以下图为例,首先头像的圆形描边需要单独画一个白色的圆形图层,而不能直接在头像上添加描边。然后把圆形图层和白色矩形图层设为联集,再将图层路径合并。然后在两个衔接处的两边各添加一个锚点,注意两个锚点和衔接点的距离一定要相等,这个距离决定了圆角的大小,可以根据需要来调整。之后把衔接点的锚点类型改为“笔直”,再给这个锚点添加圆角半径。这样衔接点的圆角绘制就完成啦。另外运用布尔运算来画出圆角也是可以的,具体方法可以根据个人习惯来选择。



我们在页面取色时经常会给背景色和阴影等结合场景带有一些颜色倾向,以达到更舒适的视觉效果,其实这个方法也适用于文字。为了提升效率,我们习惯了在选择字色时使用一套设计规范里的颜色,比如#333333、#999999等等。但是个别的特殊模块我们是可以根据实际情况调整以获得更好的视觉效果的。比如下面这个案例是一个热帖榜单的入口模块,为了提高信息层级让页面更有活力,这里选择用浅黄色作为背景。如果使用规范的字色与背景的结合会相对不太协调,这里选择字色时就可以让文字颜色和背景颜色带有相同的色相,选用高饱和度低明度的颜色,并且次级信息同时可以带一点不透明度。让整个模块视觉更统一,信息与背景更融合。

类似这样的场景其实还有很多,有时我们也不必拘泥于设计规范中,适当的根据模块定制化一些细节可以达到更好的视觉效果。


我们经常会遇到一个页面中有多个同级图标排列的情况,不管是用宫格排列或是列表排列都需要每个图标整齐有序、尺寸统一。但实际情况下不可能每个图标尺寸都完全统一。一般这种情况我们可以给每个图标统一添加一个相同尺寸的矩形图层作为背景板,将背景板隐藏后再整体编组,这样一来就能保证每个图标所在的组都是相同的尺寸就能统一对齐了。


然鹅,我们有时会遇到一些不规则形状图标,尺寸是奇数甚至是带小数的。这种情况图标如果要在背景板上完全居中,我们可以打开首选项中的图层项,关闭契合像素功能,然后可以拖动图标或者用对齐功能让图标与背景板对齐。不要忽略这一两个像素的差别,这些微小的细节往往决定了界面设计的严谨和精致程度。



另外,我们可以根据情况灵活调整图标在背景板中的位置,例如左右箭头图标为了与页面其他内容边距对齐,可以将图标贴合背景板左右两边。这样就能减少后期开发还原调整的工作量,提高工作效率。




标题信息在界面设计中使用频率非常高,而在设计过程中我们可能会忽略极限字数的情况,导致开发还原时实际效果不理想。下面以一个案例来分享一下标题极限值的处理方法。

在腾讯动漫社区改版中设计话题详情页的标题时,产品规划标题的字数为12个字符,在右边有看漫画按钮的情况下是显示不完全的。这个情况就要考虑设计极限值的显示方案。常规的方案有:1、显示不完全时后面显示“...”;2、换行显示。考虑到详情页需要将标题完全展示,所以方案一不可行。而方案二在单行和双行两种情况下视觉效果不好统一。最终经过思考决定使用方案三:标题显示不全时左右滚动展示,可以在保证视觉统一同时显示完整的标题。


同样的,在很多情况下我们由于空间受限无法展示完整信息时,这个方案也不失为一个很好的选择。



在页面设计工作中我们有时会遇到信息容器边界固定,而容器内信息可以滑动的情况。例如下图中顶部导航和音乐播放的歌词页面,这种场景下一般容器边界不会做明显的界限,如果内容在边界处是直接被裁切的话体验的感受就会比较割裂。我们可以尝试更好的解决方案,在容器边界增加渐变过渡,这样信息在边缘的过渡就变得柔和,页面整体更协调。


这种渐变的过渡的应用场景还有很多,比如浏览简介或者文章时,需要隐藏部分内容并提供展开阅读全文的操作。利用渐变过渡也能隐喻还有未完全展示的内容,降低用户的理解成本并且也能够让用户有心理预期。


另外在sketch上呈现这种渐变过渡也很方便,如果背景是纯色的话可以在边界处添加一个与背景色相同颜色的色块,然后给色块添加添加不透明度从0~100的渐变,这个方法比较简单。如果遇到背景复杂的情况,也可以绘制一个和容器相同大小的矩形,在矩形边缘添加不透明度从0~100的渐变,然后建立蒙版把信息剪切到矩形中。

至于开发实现的方案还是要和开发哥哥具体沟通,确保用最便捷的方案还原出最好的效果。



动态流是我们非常常见的样式,是分发用户生产内容的主要载体之一。主要包含了用户信息、文字、图片和视频等内容。一般情况支持九张图片或一个视频,在有多张图片时,可以如下图做成宫格的样式适配,每张图片截取中间的正方形部分。

而只有一张图片或者视频时,为了保证图片和视频的预览效果,通常会做大尺寸的预览图,而图片的宽高尺寸并不固定,所以只截取中间方形的方案并不能满足要求,我们要根据这个情况做单独的适配方案。首先我们要设定一个裁切的比例,比如我们取竖图最小裁剪宽高比为2:3,横图最大裁剪宽高比为3:2(这里的宽高比并不是固定的,可以根据实际需要自己定义比例,采用4:3、16:9等比例都是可以的)。这样当图片宽高比小于2:3时,我们可以把图片中间区域按宽高2:3裁剪出来;图片宽高大于2:3并且小于3:2时可以按原图比例预览;而图片宽高大于3:2时,把图片中间区域按宽高3:2裁剪出来。另外要注意要给图片设置最大高度,否则图片高度太高会减少页面信息承载量,降低阅读效率,相应的也要限制最大宽度,否则会使图片规则不统一,从而页面适配效果不协调。

同样的,这个规则也适用于视频,由于全面屏手机占比越来越高,这些手机拍摄的视频大多是19:9、20:9的宽高比例,相比视频常用的16:9的比例更加细长,所以横屏视频可以统一裁剪为16:9比例,而竖屏视频可以裁剪为9:16比例。

动态流图片适配的核心是制定一个适配的规范来保证阅读的舒适度和效率。而这个规范并不是恒定的,可以根据自身平台需要来制定,以上仅作为一个示例供参考哦。



随着沉浸式设计的趋势,很多页面会采用无标题栏的设计。例如下图的个人中心页面,顶部利用背景图来渲染品牌氛围。但是这类无标题栏页面的上滑交互普遍有个缺陷,就是如果未经处理上滑后内容会与顶部电池条者是置顶的按钮位置重叠。这种类似“穿帮”的情况给用户的体验就是设计处理不够严谨。然而这种交互细节也是可以优化改善的。


优化的原理也很简单,就是在上滑过程中添加一个标题栏来分割页面内容,从而让内容和顶部元素不重叠。标题栏可以随上滑高度改变不透明度,以达到柔和的过渡从而实现丝滑的交互体验。



类似的处理方案在各大平台也有较为广泛的应用。




在用户体验发展的趋势中,无论是交互的反馈或者是图片、信息等都趋于由静态向动态发展。常规的静态图片承载的信息相对有限,所以在有限的载体内让内容动起来展示更大的信息量不失为一个很好的选择。

在旧版本的iOS12系统中有一个视图选择的功能,用户在这个页面可以选择标准视图和放大视图,并且有三张图可以滑动展示不同场景下两个选项的差异,但是这个方案需要来回切换标签和滑动图片来对比差异,效率很低。而在之后改版的iOS13系统中,这三张静态图被替换成了两张动图,轮流切换三个场景的页面,用户不需要再滑动图片就能更加直观的对比两个选项的差异。这个小改动不仅可以让图片展示更多的信息,还能减少用户的操作成本提升操作上的体验,让阅读效率更高。


类似的延展应用场景也有很多,例如新功能引导动画、动态banner等等。其实原理都是一样的,在常规静态图的基础上优化为动态图,不仅能增加信息的承载量,提高阅读效率,也能让页面更有活力。




为了满足运营的需要,我们有时会在多同级个图标或者按钮中突出其中的一个。例如下图的分享弹窗,想要在多个分享途径中突出微信的图标,但同时又要保证图标风格的一致性,这时就可以利用微动效来达到强调的效果。







而微动效的落地形势也有很多种,下面抛砖引玉介绍几种简单高效的方案。


可以看到添加了微动效后不仅可以达到强调某一个对象的目的,同时也能保证每个图标风格的统一,微动效也让页面更活泼有灵性,不失为一举多得的方案。

微动效的形势当然不局限于上面几种,大家也可以发散思维,创造更多有创意的方案。

文章来源:站酷   作者:腾讯动漫TCD
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

轮播设计总结-提高用户点击

纯纯

如果需要设计一个轮播,我们应该考虑哪些因素?如何让轮播更具有价值?如何让轮播的体验更好?如何避免轮播常见的问题。

提到轮播首先可能想到的是广告,我们经常在移动端首页或网站首页会看到各式各样的轮播banner,不管在移动端还是网页上通常点击数据都是非常差的,本篇文章带你深入了解banner轮播。

如果需要设计一个轮播,我们应该考虑哪些因素?如何让轮播更具有价值?如何让轮播的体验更好?如何避免轮播常见的问题。

本篇文章通过以下几点探索轮播的特性,预计阅读20分钟

目录

1、用户真的使用轮播吗

2、轮播的轮换形式

3、轮播的进度展示

4、轮播定位

5、轮播的切换

6、对轮播进行分类

7、使用缩略图进行预知

8、轮播异形化

9、轮播时间

10、总结

一、用户真的使用轮播吗

用户是否对轮播有感知,这个则需要根据不同的场景进行判断,包括每个产品中的每个轮播对用户用户的定位也不相同,常见的应用场景品牌曝光、活动营销、产品展示,每个场景下相关的数据也不相同。

促销轮播banner

品牌推广轮播banner


产品介绍轮播banner

同时还有个关键因素,轮播的占比,这里以pc端为例若是产品是以品牌效应吸引用户的,大多轮播是以大的屏幕占比为主通常会占首屏的50%,如果是以营销、内容为主的产品,轮播通常以16:9、7:4的常规比例进行展示。


轮播的页数

用户在使用产品时会默认忽略轮播区域,一般轮播都会有自动轮换机制,一定时间后自动轮放下一张banner,那么每当页面上进行轮播时便会吸引用户进行关注,效果上会有一定的提升,所以在轮播中第二张第三张的效果往往会比第一张轮播的效果更有效一些。

还有一种用户比较喜欢关注轮播过去的banner以此来满足好奇心。

如果banner是作为内容传播希望用户通过banner了解内容,那么则要避免放在最后一位置,对于用户而言最后一张轮播路径过于长,并且用户很少会手动滑动banner。

国外一家公司在针对轮播中进行了相关的研究测试,随着页数的增加用户的点击逐步下降。

那么如果想让产品中的轮播更具有效果,则需要根据不同的场景设定策略达到目的。

二、轮播的轮换形式

不管在移动端还是手机端,轮播都有各种交互形式和尺寸,以pc为例在交互上会多样化一些,常见的几种则是通过滚轮滑动、通过点击切换两种。

如下图某艺术网站,它则是通过鼠标滚轮进行切换轮播banner,并且banner的占比也是铺满首屏,这种轮播形式适合一些品牌、产品宣传等相关的网站以此来突出产品的亮点,同时也符合用户目标。

在看下面这个医美网站它的切换方式则是通过鼠标点击进行切换,并且占比也是铺满首屏,在医美领域用户更关注美感,而轮播形态也是符合用户的心理预期更加沉浸美观。

而在移动端轮播的形式就比较统一,大多都是自动播放+手指滑动进行切换。

三、轮播的进度展示

在网页中轮播都会有当前的定位点,许多用户的习惯是点击进度条进行切换banner这样能够更快的达到目标,不用一张一张切换,但是在有些产品中会忽略这一点,设计中会做的非常小导致用户在点击上可用性不太友好,如下图中的banenr进度点设计上过于小导致点击上有些阻碍。

如以下网站去除进度定位的方式,通过缩略图预览来告知用户下一个banner的内容,空白区域也可以添加缩略图引导介绍等关键信息,帮助用户提前预知在体验上相对较好。

以下国外某网站在进度定位的设计上采用了标签文案方式进行设计,能够帮助用户更加全局的了解banner内容


四、轮播的定位

定位主要是用来指示当前轮播的进度,像上图中讲的便于用户更加全局的观看banner的张数和当前进度。

以下网站的设计中则把定位与进度相结合,进度条展示该banner预计多久会切换下一张,对于自动切换的产品轮播这个更直观的进度展示体验上相对较好。

以下是某个国外网站,不管是pc还是移动端都在轮播底部添加了水平条,告知用户当前位置

随着市场上产品同质化严重,产品的竞争力也更依赖体验,在下图中的数据可视化的网站上,在进度条上就利用了产品的特性以饼状图的形式进行展示。

五、轮播的切换

在刚才上面举的例子中很多优秀的网站在设计上都很有创新性,但是需要注意一个点,在轮播中不只有自动播放,还需要考虑用户手动切换,因为在实际用户浏览中可能会对产品的播放时间达不到预期,此时则会使用手动切换,除去可点击的进度点,还需要上一张和下一张的入口切换。


在此基础上需要注意,在处于最后一张banner时,下一张切换还能不能点击,第一张时上一张切换还能不能切换,这个取决于产品特性和轮播张数,如果轮播张数过小的话则需要进行循环播放,如果过多的页数则第一步和最后一步不可点击。

切换的距离和位置

上一张和下一张的距离远近取决于banner的大小,如果轮播banner占比较大时则需要考虑用户的操作时长,距离越短时间越快,为了避免用户操作失误在相对较近的切换按钮则需要在视觉上做的比较突出,便于用户寻找。

如果banner占比在首屏中占比较少的情况下则需要让切换按钮的间距拉大,保持视觉平衡,因为小区域banner用户能够更加全局的观看,在使用上不会犹豫。

反观移动端在轮播中除了展示banner进度外很少展示切换按钮,移动端更加依赖手势交互。

六、对轮播进行分类

当轮播banner过多时利用标签进行分类,用户通过点击标签进行查看相关的轮播组合。

此方式更适合一些电商平台、新闻网站这种内容过多的产品


如下图国外社交媒体网站则使用了标签进行分类,此处提一句轮播不仅限于首屏banner。他的用处可落地在各个场景。

七、使用缩略图进行预知

在banner首屏中,显示的内容越多,越能激发用户进行点击,像上面讲过的农业产品网站就使用下一张预览图的形式进行展示,当然不仅局限于这种形式,如下图中的餐饮网站把所有的轮播banner展示给用户观看。

相对于缩放图,图标展示效果上也较好,空间占用更少,使用这种方式需要谨慎,对图标的识别性要求较高,我印象中能够使用的这种方法的网站是苹果官网,让产品抽象化展示。

在移动端也存在这种设计手法,但是基于分辨率原因移动端的缩略图展示过少,最常见的如下图中的马蜂窝和企鹅电竞。

八、轮播个性化

轮播最大的缺陷则是像刚开始讲的用户会默认为广告,对此可以使用个性化设计突破用户心理障碍,使轮播banner更具备亲和力。

如下图中的数码科技网站,利用产品与背景的结合营造出一种功能性的展示。

再例如下图中苹果官网入口,结合百度的定制化功能在大搜中进行个性化处理,把常规的banner轮播以功能卡片形式进行展示,同时卡片承载产品动画引导用户进行点击。

苹果官网进入后随意点击产品介绍页后会发现,苹果把轮播结合鼠标滚轮营造沉浸式观看,每个屏效内都展示产品一个功能特点,打破传统banner的展现形式。


九、自动轮播时间

自动播放的轮播会根据用户的耐心和用户的诉求进行调整优先级,如我们平常使用产品时会忽略banner广告,我们会更加关注移动中的东西,特别是在移动端上通常是banner进行轮播时才会关注。

谷歌设计团队曾对banner轮播的时间进行测试,测试结果得出5s-7s的轮播时间最佳,在这个时间内用户有足够的时间对轮播banner上的产品内容进行了解。

如下图谷歌商店的轮播时间设定在6s。

同时还需要注意,在自动播放的过程中如果用户鼠标hover上去后,则需要判定播放暂定,避免用户错过感兴趣的内容。


十、总结

本文从轮播的样式、特性、用户对轮播的认知等多方面的介绍,在实际产品中轮播有很多可用性上的问题存在,我们在设计中则需要根据自己产品的特性、用户群体特点等多维度去思考适合什么样的轮播形式。

文章来源:UI中国   作者:爱吃猫的鱼____
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




浅谈交互设计

纯纯

一、什么是交互设计?

先来看一下百度百科的定义

交互设计(英文Interaction Design, 缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系,以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和”用户体验“两个层面上进行分析,关注以人为本的用户需求。简而言之,交互设计是解决特定场景下的人群如何高效使用机器或软件的目标行为。


为什么要做交互设计

在使用网站,软件,消费产品或各种服务的时候(实际上是在同它们交互),使用过程中的感觉就是一种交互体验。随着网络和新技术的发展,各种新产品和交互方式越来越多,人们也越来越重视对交互的体验。当大型计算机刚刚研制出来的时候,可能为当初的使用者本身就是该行业的专家,没有人去关注使用者的感觉;相反,一切都围绕机器的需要来组织,程序员通过打孔卡片来输入机器语言,输出结果也是机器语言,那个时候同计算机交互的重心是机器本身。当计算机系统的用户越来越由普通大众组成的时候,对交互体验的关注也越来越迫切了。因此交互设计作为一门关注交互体验的新学科在二十世纪八十年代产生了。


从用户角度来说,交互设计是一种如何让产品易用,有效而让人愉悦的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理和行为特点,同时,还包括了解各种有效的交互方式,并对它们进行增强和扩充。

通过对产品的界面和行为进行交互设计,让产品和它的使用者之间建立一种有机关系,从而可以有效达到使用者的目标,这就是交互设计的目的。


二、交互设计常用原则和定律有哪些?


尼尔森十大可用性原则


1、状态可见原则

系统应该让用户时刻清楚当前发生了什么事情,也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解,一般的方法是在合适的时间给用户适当的反馈,防止用户使用出现错误。

即在用户操作界面功能时给予实时反馈,例如:页面加载状态提示、按钮点击后的状态变化、进度条提示等。

2、环境贴切原则

设计的一切表现和表述,尽可能贴近用户所在的环境,将现实环境的操作功能巧妙的转化为线上功能,使其贴近用户。使用用户能听懂的专业术语,涉及到专业化语言时要转化成用户熟悉的语言。

即模拟真实的事物,使用户更容易理解。例如:天气应用中的天气插图、音乐播放器的胶片都是生活中熟悉的场景和物品,降低理解成本。

3、操作可控原则

对于用户的误操作,提供二次确认或者撤销的功能,这样可提高用户的操作可控性。

例如:删除联系人二次确认提示、消息可撤回操作。

4、一致性原则

遵循统一的产品设计规范/逻辑。这里的一致性包含产品和跨平台产品之间的一致性。

一致性包含视觉交互、文案描述、组建样式等,例如:微信小程序设计规范。

5、防错原则

设置防错的机制,减少用户犯错。在用户选择动作发生之前,就要防止用户容易混淆或者错误的选择。

例如:用户名称校验提示、手机号码位数限制等。

6、易取原则

减少用户记忆负荷,在适合的时机给用户需要获取的信息。

例如:验证码读取、找人转账提示等。

7、灵活高效原则

提供灵活的操作和高效的获取信息能力。

例如:手机号码一键登录、消息关键字识别等。

8、优美简约原则

保留产品最主要的信息,如果不是优先级最高,要尽一切可能避免去影响产品的简洁和美观。

9、容错原则

用户在使用产品过程中出现了问题,及时准确的告知用户出现问题的原因。

例如:信息输入提示、搜索无结果等。

10、提供人性化帮助

在用户需要的时候提供必要的帮助说明。

例如:新功能引导、解释说明文案等。



七个交互设计定律


1、菲兹定律

点击一个目标的时间同以下两个因素有关:

(1)设备当前位置和目标位置的距离(D)。距离越长,所用时间越长;

(2)目标的大小(S)。目标越大,所用时间越短。

该定律经常运用于鼠标从点A到点B的运动。

例如常用按钮的尺寸设计等。

2、希克定律

一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。

交互设计中要合理设置选项,以免用户使用中决策时间过长,降低使用效率。

3、米勒7±2定律

乔治米勒对短时记忆能力进行了定量研究,他发现人类头脑最好的状态能记忆含有7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。

例如:手机号码的分位显示、应用中标签栏数量等

4、邻近性法则

人们通常将距离近的事物划分为一组。

界面设计中可以用对象间的相对距离来区分信息层级。

5、复杂性守恒定律

每个应用程序都具有其内在的、无法简化的复杂度。无论在产品开发环节还是在用户与产品的交互环节,这一固有的复杂度都无法依照我们的意愿去除,只能设法调整、平衡。

例如:在智能手机出现之前,手机上的操作按钮都是实体按钮。在智能手机出现手,手机被整个屏幕占据后,所有的操作都集合在了手机系统之中,等于把物理操作转移到了系统操作中,其本身的功能复杂程度并没有发生改变,只是转移了而已。


6、防错原则

大部分的意外都是由设计的疏忽,而不是人为操作疏忽。因此,在设计中要有必要的防错机制;在此,特别要注意在用户操作具有毁灭性效果的功能时要有提示,防止用户犯不可挽回的错误。

例如:登录时用户名校验,手机号码位数限制等。

7、奥卡姆剃刀原则

“切勿浪费较多东西去做,用较少的东西,同样可以做好的事情。

”这个原理称为“如无必要,勿增实体”,即“简单有效原理”。

在设计中可以使用户关注最主要的信息而非其它无关紧要的事物,从而提升使用效率。




三、交互设计如何开展工作


首先在交互设计师拿到需求后不要急着打开软件开始绘制线框图,而是要先分析需求,了解产品的战略层和范围层的业务目标。把握产品设计大方向,只有方向对了后面的工作才是有价值的。

把握了产品方向,下面就该进行需求的分析,

首先针对需求考虑5个问题:

1、为什么要做这个功能?(业务需求)

2、产品期望得到怎样的成果?(业务目标)

3、谁来使用?(目标用户)

4、他们要怎样使用?(用户需求)

5、如何让他们都来使用?(将业务目标转化为用户行为)

清楚这5个问题后,再根据交互设计流程进行一步一步的进行

这实际上就是对需求的战略层分析。

我们进一步分析业务需求(业务目的、业务目标)和用户需求(目标用户、用户体验目标),把握关键因素(用户的动机、担忧和影响目标达成的障碍)。

归纳这些需求,明确设计策略。


将“业务目标”转化为“用户行为”,通过引导用户的使用来帮助产品实现目标。

从设计“用户行为”到设计“用户界面”,用户行为决定了用户界面,用户界面也导致了用户会出现什么样的行为。

设计需求分析方法就是要帮助用户创造动机、排除担忧、解决障碍。



四、如何进行用户研究,方法有哪些


评估的形式及方法


常见的评估形式分为三类:

1、评估主体:根据评估的主体不同来进行区分,即谁来做评估。

按照评估主体来区分主要有两个主体:用户和专家

用户评估主要靠收集用户使用数据,也就是用户测试,它的数据相对客观,但时间和费用较多,评估范围较窄。

专家评估是让工程师及设计师等专家基于自身的专业知识和经验进行评估的一种方式。专家评估相对主观,但费时少、费用少、评估范围窄。

两种评估方法可以相互补充,并结合使用。


2、评估性质:例如定性评估、定量评估或着其它方式。

按照评估的性质来区分可以分为定量评估和定性评估。

定量评估是指对可以计量的部分进行评价,如点击量、使用率等,可以用数据来说明。

定性评估是指对非计量性的部分进行评价,如流畅度、舒适性、创造性等进行评价。它只能表示一个度,无法准确用数据来说明问题。


3、评估过程:按照评估的过程来进行区分。

从评估的过程来区分可以分为理性评估和感性评估。

理性评估相对客观,从客观的角度出发判断客观事物。

感性评估更为主观,评估结果并没有客观规律。

在实际应用中也需要将理性评估和感性评估结合使用,才能完整的完成我们的任务,达到我们的目标。


常见的评估方法有四种:

1、原型评估方法:在产品研发过程中,对于界面设计以及程序的测试来获得用户的反馈是至关重要的。以用户为中心和交互式设计的重要因素之一就是原型方法,原型方法的目的是将界面设计与用户的需求进行匹配。

一般来说原型评估方法分为三大类型:

(1)快速原型:原型迅速成型并分配实施,在原型实验收集的信息基础上,系统从草案中得以完善。

(2)增量原型:应用与大型系统,从系统的基本骨架开始,需要阶段性的安装,及系统的本质特征是在初次安装完成后允许阶段性测试,以减少遗漏的重要特征。

(3)演化原型:对前期的设计原型不断进行补充和优化,直到成为最后的系统。


2、简易测试评估方法

在条件不允许的情况下,可以采取简易的方法来对用户体验进行评价。步骤是:

(1)实验室环境准备:准备好测试用的电脑或其他媒介。两个房间,房间1用来对被测试者进行测试,房间2用于设计师和工程师的观察。

(2)被试选择:分为用户组和专家组。

(3)进行测试:房间1中被试者根据自己的选择进行操作和测试,同时说出自己的内心想法,观察员在调查表上记录被试者的每一次的操作情况,包括出错情况和被试者的口语描述,当被试者在测试过程中遇到困难或操作无法进行时,观察员要给予一定的客观提示。房间2中通过相关设备将房间1的情况传输到房间2,设计师和工程师实时观察和记录被试者的情况,以便今后对产品做进一步的修改和完善。

(4)结果分析:通过多次测试后,将测试结果汇总,提取出交互设计中存在的问题,以及对交互设计有益的建议形成测试报告。


3、眼动评估方法

眼动追踪可以用来评价对产品(包括硬件产品和软件产品)设计的感性意象,评测产品设计特征。眼动评估的主要指标有注视热点图、搜索过程测量指标、兴趣区域即用户视觉注意的焦点区。可以结合口语分析法了解用户的所想 和所做。


4、脑电评估方法

通过对脑电信号的分析,研究者可以探索大脑的认知加工过程和受试者的心理状况。近年来脑电评估方法在人机交互心理学等领域应用广泛,被用来评估交互设计、人机界面、产品设计等方面的内容。但是脑电评估也有一定的缺陷,例如空间分辨率上的局限性,因而对某些认知过程和脑区的定位并不是很准确。第二,在许多相似的实验研究中,由于研究者采用了不同的实验材料和方法等,实验结果也存在差异性。第三 ,由于采集记录时间的滞后性,脑电所记录的并不一定是当下被试者所想到的内容。


采取哪种方法来开展用户测试和评估,要根据不同的任务结合不同的环境来开展,比如:时间、成本、资源等。



启发式评估法

是专家评估法的一种,也被称为经验性评估,最初由Nielsen博士提出。简单来说,启发式评估是一种简易的可用性评估方法,使用一套相对简单、通用、有启发性的可用性原则,让几个评审根据专业知识和经验来进行评估,发现产品潜在的可用性问题。


启发式评估的两大要素:评估者和评估参照的原则。   


对评估者的要求主要有四个方面:

(1)人数:推荐3-5人,有时会更少

(2)知识:最好同时具有可用性知识及设计知识

(3)身份:最好是非设计者本人,否者不具有客观性

(4)岗位:设计师或用户研究员


评估参照的原则有:尼尔森十大可用性原则、八项黄金法则、首页可用性指南、ios设计指南、拓展原则、HHS网页设计与可用性指南等。具体需要根据实际项目来选择,常用的是尼尔森十大交互原则。


什么时候适合使用启发式评估法?

交互设计和UI设计阶段、测试优化和产品发布后的阶段。


启发式评估的优缺点有哪些?

优点:成本低、效率高、发现大多数可用性问题,甚至是用户测试时不会出现的问题。

缺点:不能代表真实用户,相对主观、有时候发现问题过多、对评估人员知识背景要求较高。


什么时候适用?

(1)适合时间、资源有限的情况下快速发现可用性问题,降低风险及成本。

(2)版本变动不大的情况下,小成本检验。

(3)作为可用性测试的之前准备。


启发式评估流程是什么?

(1)准备阶段:确定范围、背景调查、参考评估原则、评委邀约、材料准备

(2)执行阶段:任务走查、整体走查、结果记录

(3)分析阶段:汇总讨论、报告总结、优化方案



可用性测试


先来看一下我们在平时工作中常常会听到这样的问题

产品经理:我们的用户觉得产品好不好用?使用过程中会不会遇到问题?他们是否满意?

设计师:设计的过程有一些纠结的地方,不知道实际用户是怎么理解和操作的怎么办?

产品开发后:想在大推前检验一下产品是否靠谱,适不适合大推?


当我们遇到这样的一些问题时,如何找到方法快速得到答案呢?

那就是接下来要介绍的可用性测试方法。


可用性测试是一种常用的、高效的方法。

它的定义是:通过观察具有代表性的用户,完成产品的典型任务,从而找出产品可用性问题并解决,目的是为了改善产品,让产品更容易使用。


什么时候适合做可用性测试呢?

一般是在:交互设计或UI设计、测试优化、正式发布三个阶段来做。当然是越早做越好,可以尽早发现问题并及时调整。


类型分为两种:形成式和总结式

形成式特点:小样本、发现问题为主、不能做定量对比。

总结式特点:大样本(30人以上)、定量的评估、可以做对比评估


可用性测试可以解决什么样的问题?

1、发现问题,产品在体验上是否存在问题

2、检验实现,期望的设计目的有没有达成,是否满足了用户的期望

3、产品评估,用户是否会满意

4、理解用户,了解用户行为习惯,了解用户认知,找到某些问题的原因


测试流程是什么?

整体上分为4个阶段:1、准备  2、测试  3、分析  4、优化


1、准备阶段要做的有哪些?


确定目标:确定测试目标决定了后面测试过程要怎样去设计

常见的测试目标有:

·对整个产品做可用性评估

·对新增的功能模块进行评估

·提前观察新方案对新老用户有怎样的影响

·提前检测改版是否达到预计目标

·设计时存在争议,如何选择解决方案

·某个环节流失率较高,检测是否为设计原因导致

·需要拓展某一类特殊用户,测试针对这类用户在设计上是否需要作出调整


准备测试方案

方案中应当包含以下内容:

·测试目的:明确测试的目的及范围,测试目的决定了测试方案

·测试关注点:与负责的设计师一起梳理测试中要关注的问题

·用户招募:招募要求,样本配比,招募渠道

·经费预算:奖励的形式和额度

·时间计划:用于把控时间计划


撰写测试脚本:设计测试任务,通过用户行为去观察提问来获得我们想要的内容

基本的流程有:

·暖场:3min,简单聊天,消除用户的紧张情绪

·测试说明:2min,对测试内容规则做说明

·测试前访谈:10min,了解用户基本信息

·简单试用:3min,让用户熟悉产品

·测试执行:30-45min,提示任务并观察

·事后访谈:15min,针对疑点问点追问,填写评价表

·道别:5min,支付礼金,送用户离开


招募用户

招募什么样的用户呢?

·根据测试目的来定,找出与测试目标有关的筛选纬度

·特别考虑用户使用行为相关的特征,例如竞品使用经验,使用产品的目的,用户的活跃度等

·挑选最核心的纬度,转化成用户招募的条件,并尽量客观化,具体化,可衡量

·避免设置交叉条件过多,导致样本代表性降低

·学会辨别真假的用户信息


招募多少用户合适?

·以发现问题为目的快速可用性测试,6-8名即可

·考虑产品的复杂性,覆盖人群差异性,适当做调整,拓展到10-15名


招募渠道有哪些?

·公司内部

·现有产品用户库

·公司其他产品用户库

·熟人,朋友等

·推广渠道:官微、公众号、门户网等

·社区,论坛,qq群等

·第三方调研公司


准备测试素材:低保真或高保真原型,或线上已经可以使用的产品,也可以准备一些量表工具来辅助测试。在测试

过程中需要用到的电脑或手机设备,摄像头,纸,笔,桌椅等。


测试场地选择:

·专业可用性测试实验室:一般对测试质量要求较高,旁听人数较多且需要采集丰富的数据的时候采用此方法。实验室有两个房间,一个测试间,一个观察间,中间有单向玻璃分隔。测试间中有多角度的摄像头,用来记录测试过程,观察间可以同步看到测试间里的情况,

·普通测试环境:在观察人数较少(小于3人),条件有限时使用。


预测试阶段:正式测试前进行预测试,保证测试流程通畅

·走查:记录可能出现的问题

·预测试:找人先测试一下

·调整:调整测试流程


正式测试阶段

测试参与人员有

·主持人:引导整个测试流程

·记录员:记录操作行为,访谈内容,发现问题等

·产品团队:参与旁听,观察,结束后交流

·用户:完成测试及访谈任务


测试过程中需要观察的要点:

·用户是否独立完成了任务

·是否存在无效操作或不知所措的情况

·用户是否满意


结果分析

边测试边总结,越及时越好

·测试完一个用户,做一次小结

·测试结束当天写小结,与设计师当场讨论

·重要问题反馈后再总结分析报告

·边测边改,边改边测

结果分析4个步骤:1、对发现分类  2、整理不确定项  3、评定优先级  4、结果记录


撰写报告

从4个方面来写:

·总体如何

·有哪些问题

·严重程度如何

·建议是什么

·除此之外,还可以围绕关注的问题,未满足需求补充分析


优化跟踪

在测试之后需要出优化的方案,测试优化的过程是循环的。

测试之后如果还有其他问题没有得到解决,可以结合其他的一些测试方法来得到。



问卷调研

问卷调查法是以书面提出问题的方式搜集数据的一种研究方法,研究者将所要研究的问题编制成问题表格,让受访对象以邮寄、当面作答、在线作答或追踪访问的方式填写,从而了解被试者对某一现象或问题的看法和意见。问卷调研可以用于需求挖掘阶段,也可以用于产品上线后的评估阶段。

如果是想了解用户对产品上线后的满意度,可以使用问卷调研的方法。它比较适合去了解用户的认知态度,也可以附带了解用户的行为习惯,


问卷调研的优缺点

优点:统一性、灵活性、量化性、匿名性

缺点:(1)只能获得书面的信息,而不能了解到生动、具体的情况。(2)缺乏弹性,很难做深入的定性调研。(3)调查者难以了解被调查者是否认真作答,是不是自己填写的。(4)填写问卷比较容易,有些别调查者会随意选择,或者按照社会主流观点选择,这样会使调查失去真实性。(5)回复效率低,对无回答者的研究比较困难。


问卷调查的使用场景

适用于:(1)需要进行定量分析的调研。(2)需要匿名进行调研的问题。(3)对已有假设进行检验。(4)寻找问题隐藏的关联。(5)对产品设计用户认知及态度的评估。

不适用于:(1)发现和描述具体问题。(2)探索受访对象的模糊态度。(3)获取创新想法。(4)获取精确的行为数据。


问卷调研流程

1、确定目标:确定调研目的、对象、分析目的和应用对象。

2、调研方案:通过访谈、经验、理论等,确定调研框架,题目选项,分析思路,投放渠道,相本配比等。

3、问卷设计:问卷设计,问题美化,投放渠道。

4、问卷测试:多人测试,确保问卷的可读性,逻辑通畅

5、问卷投放:按照计划好的投放渠道进行投放,回收数据,数据清洗

6、问卷分析及填写报告:分析及报告填写,调研结果落地



数据分析

概述:通过在网站或应用中进行数据埋点,获取用户对产品的使用和行为数据,并进行基于产品体验优化的数据进行分析。


数据分析可以做什么?

1、可以做到用户从哪里来,来了多少

2、获取用户属性,用户地域,用户设备

3、访问了哪些页面,使用了哪些功能,消费了多少钱,消耗了多少时间

4、哪些流量可能存在问题,忠诚度如何,活跃度如何,有没有达到目标,和行业相比如何

5、流失情况如何,离开之后是否还回来

可以作为产品的眼镜和大脑,提供客观衡量的依据,可以持续优化改进。


数据获取方式的对比

日志文件:优势,完整的服务端请求记录。

                  缺点,日志的获取和清洗有过滤成本,许多页面操作无法记录。

JS页面标记:优势,数据获取可控、灵活,可以对页面操作记录进行记录,获取数据比较完整丰富。

                      缺点,需要在页面植入JS标记代码,某些情况下无法获取,如当用户禁用JS功能时。


常用的数据监控平台

1、第三方监控平台:如Google Analytics、百度统计、腾讯云分析等

2、自研平台


数据分析流程

1、监控  2、定义  3、埋点  4、测量  5、分析  6、优化


Web分析常用的指标

PV:是指页面浏览量,网页浏览数实施评价网站流量最常用的指标之一,用户每一次访问网站中的页面均被记录,对统一页面多次访问,访问量累计

UV:是指独立访客,是通过互联网访问、浏览这个页面的自然人

UPV:是指唯一身份综合浏览量

访问:是指在一定时间范围内,网站所有访问者对网站发起访问的总次数,从访客来到网站到最终关闭网站所有页面,记为一次访问

识别用户的方式:IP、IP+User Agent、cookie、User ID、设备ID、其他


复合指标

跳出率:指用户来到网站,只浏览了一个页面就离开的访问次数,占全部访问次数的百分比,简称“来了就走”。跳出率可以被用来衡量流量和页面质量,高跳出率表示访问者对着陆页面不感兴趣,没有继续访问更深入的页面。也可能页面设计存在问题,也可能是导入的用户不匹配。跳出率可以通过调整广告渠道,优化页面内容来降低。

退出率:访问者离开网站一次被记录为一次退出,某一范围内退出的数量/该范围的综合访问量就是退出率。如果关键流程中的某一页面退出率高,代表某一页面可能出现了问题。

访问时长:网站停留时长,页面停留时长,应用使用时长。访问量是访问质量的一个衡量指标,较长的访问时间说明用户与产品进行了较多的互动。

访问深度:可以理解为单个用户平均访问的页面数,是PV/UV的比值。访问深度也是访问质量的一个衡量指标,可以考察用户是否和网站进行了较多互动。这个比值越大,代表网站的粘性越高。

转化率:指在一个统计周期内,完成转化目标行为的次数占总访问次数的比率。根据设置不同目的进行计算,例如注册转化率、付款转化率等,是一个重要的分析指标。


移动端基础指标

移动端的基础指标监测与web端略有不同,但分析思路大致相同。指标分为:新增设备、累计设备、启动次数、单词使用时长。


常见分析内容

流量分析(哪里来?)、用户分析(什么样的用户?)、行为分析(如何使用的?)、路径转化(表现如何?)、流失分析(粘性如何?)



A/B test

A/B测试是一种帮助网页优化实验的方法。A/B测试的目的在于通过科学的实验设计和采集数据的方式,来获得具有代表性的实验结论,从而寻找到更好的产品策略。

简单来说,就是为同一目标制定两个方案,让一部分用户使用A方案,另一部分使用B方案,记录用户的使用情况,对比两个方案的结果,选择更符合的方案。

A/B test一般会在产品改版正式上线之前使用,来验证新的设计是否可以提高产品的表现。


A/B test可以测试的元素有:标题、图片、颜色、社交元素、段落文本、按钮、导航、任务流程、页面布局、价格、视频等。可一次只改变一个元素或一次改变多个元素的方式来测试,这就是两个测试类型单变量测试和多变量测试。


A/B test工具

Google Website Optimizer:搜索巨头提供的免费A/B test工具,一个很好的入门级工具,但是没有一些先进的功能。

Visual Website Optimizer:一个易于使用的A/Btest测试工具,包含功能有所见即所得的编辑器,单机地图,访问者分割和标签等。

Unbounce and Performable:集成着陆设计的A/B测试工具。

Vertster,SiteSpect,Webtrends Optimize and Omniture's Test&Target:企业级测试工具

App Adhoc Optimizer:国内A/B Test工具,同时支持前端(Web/H5、IOS、Android)及后端(Node.JS、PHP、Java)AB测试服务的专业Saas平台

Optimizely:是网上现有的最专业的AB测试工具之一,它的价格要比其他的工具高很多(也可以免费使用一个月),它提供了一些非常好的功能。

Unbounce:对于登录页面的测试来讲非常不错,而且它不仅仅是个测试工具,还可以在无需自己编写任何代码的情况下来创建登录页面。


如何做A/Btest

1、确定目标,例如提高网站的付费转化率,降低跳出率等

2、测试方案,建立假设:购买按钮的颜色会影响点击率?缩短流程可以提高复费率?改变导航可以降低跳出率等?

3、创建相比较的两个版本,改变其中的变量

4、发布测试,将部分流量导向B方案,但不一定是5:5

5、数据分析,收集数据,对比AB版本的转化率、跳出率、留存率等


感谢阅读!

文章来源:站酷   作者:_微光
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



如何提升B端界面的精致度

纯纯

于B端,我想刚开始很多同学就直接拿Ant Design套套界面,因为公司要求并不高,随后字节Arco Design也推出了对应的模版和规范,能让我们快速作出一个不出错的方案。

但是随着公司对B端越来越重视,这些模版显然就太烂大街了。公司、市场的要求显然不止于此,我们的设计追求也不止于此。 

那么我们如何才能摆脱套模版,提高界面的精致度,提升界面的交互体验呢?

其实很简单,王阳明先生告诉我们知行合一,知是行之始行是知之成。我们如何才能提升B端界面端精致度?

第一,需要知道什么是好的设计;

第二,需要不断的去实践去练习,缺一不可。

本文先和大家谈谈知的层面,提高我们的眼界,下面就和大家分享一些不错的B端产品,大家有时间可以去慢慢体验。 

PS:作为B端设计师,一定要去多拆解竞品,多研究好的产品,别面试的时候,面试官问你研究的B端产品是什么,你只知道阿里云、腾讯云、百度云哦! 


1、Hubspot

做B端的同学,尤其是做CRM的同学应该都知道Salesforce,他是全球最大的 CRM(客户关系管理) 工具公司。 

Hubspot同样是提供客户管理相关的应用,虽然成立相对Salesforce晚,但是在市场上也占有一席之地。

从设计的角度来看,他的界面风格更加简洁舒适,从体验上来看和国内的CRM系统完全不同,其体验更加自然和舒适。 

这种风格大家看了有没有觉得很熟悉呢?

大家在去看看 GoDoddy , Airbnb ,Zillow,是不是发现风格有一点类似,大家可以对比国内产品去拆解下他们的交互细节有什么不同,完成同样的任务他们采用的方案有何不同,相信你会有很多的收获。 

国外的界面看着总让人觉得很舒适,仅仅是因为克制的设计、中性灰使用得好吗?当然不是,是因为英文本身就是图形化的文字。

如果翻译成中文,你会发现好像不是特别理想。 

这个样子拿给领导过稿,怕是分分钟被拍死,因此我们还是需要多看看国内优秀的产品。


2、神策

神策的设计,我想B端的朋友不陌生吧,国内产品中他的设计一直是我们的参考对象。

不同于其他产品,他的体验门槛比较低,注册后就可以去体验他的demo,也没有试用期限,参考对象从可视化报表,到界面交互均能找到参考。

不过当你参考一次后发现,做出来的界面怎么还是少了一些灵魂,虽然界面风格上了一个台阶,但为什么用户还是觉得产品难用。

 

3、项目管理类

这里不得不和大家推荐项目管理类产品了,这类产品是专门给互联网公司的开发团队使用,他们都是专业用户,同时这些都是提高他们工作效率的工具,因此这些产品投入的成本更高,优化得更好,拆解他们的产品,就是直接观看高手的成长之路。

Jira

Jira是Atlassian公司出品的一款事务管理软件,JIRA的界面效果交互都非常不错。大型互联网公司如LinkedIn、Facebook、eBay等内部都在使用Jira。

同时他也是国内项目管理类产品的学习研究对象,因此大家可以通过文章、B站、界面截图,自己申请体验等方式全面的进行体验。

同时也可借助群的力量,调研下有使用Jira的小伙伴,看看他们在使用中有什么问题,下面是我收集Jira网页版和本地配置版的问题截图,这些都来自不同角色的真实体验,会更有分析的价值。(这部分截图涉及到公司的数据,同时数量多不太方便打码,就不分享给大家了。)

当然国内的项目管理类产品也得去看,我们要对比哪里做得好,哪里还需要改进。国内的有Worktile、Gitee、Tower、Ones、PingCode、TAPD、Teambition,这些产品不管从视觉还是体验都非常不错,大家一定要去体验。


5、文档管理类产品

通过不断对竞品进行拆解,你已经不是当初那个小白了,你的行业认知,方案设计能力应该赶超了一大波人。

成长的同时,又发现你设计的界面,不太精致,少了些温度,这时候推荐你看文档管理类产品。

WPS

第一个和大家推荐的是WPS,界面简洁,配色舒适。 


飞书

在管理类的软件中,不得不提飞书的管理界面,从设计到使用体验,他给我的感觉终于不是那么千遍一律,用组件库搭建起来的感觉。

他开始有了温度,开始注重品牌感的打造,用户的引导,符合品牌调性的插画。 

 

对一些体验的细节进行优化,比如传统的编辑都是放在页面顶部,它采用了离光标更近的位置。 

根据菲兹定律,光标当前的位置和目标位置的距离D越短,所用的时间越短,具体好不好用,欢迎大家在评论区留言哦。 


6、概念稿

到这时候如果你觉得线上的产品太禁锢思维,那么推荐你看看dribbble、behance,搜索data、web、dashboard等关键词,去看看有没有新的灵感。

我的花瓣收集了一部分,如果不嫌弃,可以去看看,顺藤摸瓜应该可以找到很多不错的设计。

图片标题

 

7、画重点

如何提升B端界面的精致度?

第一,要知道什么是好的设计,多拆解国内外优化的B端产品。

第二,多在工作中时间,有时间多做ABC方案,锻炼自己的方案设计能力,多踩一些坑,时刻保持学习能力,慢慢就成长了。

文章来源:UI中国   作者:风筝KK
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


UI界面设计基础

博博

互联网设计的一些基础知识,写给刚入门或想入门的童鞋们,希望有所帮助


    • 文章来源:站酷   作者:凌坤_Maxidea

      分享此文一切功德,皆悉回向给文章原作者及众读者.

      免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

圆形元素在界面设计中的运用

博博

圆形元素在界面设计中被广泛运用,从常见的圆形图标到圆形的头像,又或是圆形的轮廓形状。圆形是一种特殊的形状,它能够在众多几何形状中被我们快速地注意到。也正因为如此,在使用圆形元素设计界面时会有一些注意事项。

圆形元素在界面设计中被广泛运用,从常见的圆形图标到圆形的头像,又或是圆形的轮廓形状。圆形是一种特殊的形状,它能够在众多几何形状中被我们快速地注意到。也正因为如此,在使用圆形元素设计界面时会有一些注意事项。


一、圆形头像


放眼望去,圆形头像已然占领了我们的手机。不妨看看下面举的这些例子,如下图所示。

43e456a455da32f875520f6db95d.jpg

从左到右依次是搜狗地图、QQ、Instagram。当然,还有很多其它的例子,就不一一列举啦。此刻,肯定有同学已经按耐不住要跳出来反驳了,微信和Facebook就不是圆形头像,不信你看下面两张图。d1df56a455f56ac7256cb095c8b4.jpg

方与圆之间,孰对孰错,请继续看下文分解。


1.用户使用头像的目的

不管是圆形头像,还是方形头像,其归根结底都是头像。用户使用头像的目的,主要是作为个人身份的象征。区别于其他用户的特征有很多,例如用户名、用户ID、用户头像。在这些备选项中,头像最便于快速识别和记忆,尤其是帅哥美女。


除此之外,还有一部分通过头像来彰显自己的个性,例如美女通常会使用自己的性感自拍作为头像来表现自己的魅力,又或是使用卡通人物或形象作为头像来表现自己的艺术气息,再或是使用萌宠作为头像来表现自己的爱心或是呆萌。


2.用户使用什么照片作为头像

随着智能手机的越来越普及,人们拍摄照片的门槛也变得越来越低,越来越多的用户使用自拍的照片作为头像。照片的内容五花八门,例如人物、风景、花草、宠物。即使是正常的人物照片,背景中也会掺杂着很多其它的元素,例如下图所示。

5cf056a456106ac7256cb020a2c8.jpg

第一张照片中人物背景虽然虚化了,但背景仍然很凌乱,一些微弱的对比色很容易就抢夺了用户的视线。第二张照片中人物是配角,豪车才是真正的主角,这类型的自拍照不再少数。第三张照片人物拍摄的光线阴影错乱,故意露出一线背景内容,其用意如何昭然若揭。此外,用户手机的好坏、拍照水平也不一致,拍摄出的照片质量也参差不齐。


使用这些照片作为头像时,人物不但不被突出,反而被弱化了。虽然智能手机屏幕越来越大,但是当头像集体在界面中展示的的时候,每个头像依然较小。


3.方形头像和圆形头像的区别

方形头像和圆形头像的区别可以用两张对比图来说明,如下图所示。

5d5c56a456266ac7256cb013db0c.jpg

左图是方形头像,右图是圆形头像。通过对比,可以发现以下几点:


a、圆形头像能够更好地帮助用户聚焦到人脸。虽然左图能够完整地呈现人物特征,但是干扰信息较多,例如背景中的灯光、门柱、屏风。对比之下,右图更为清晰地展示了人物的脸部特征,例如锥子脸、美瞳、假睫毛。在前面的分析中也提到,手机拍摄的照片质量参差不齐。在这种现实情况下,圆形头像更有利于忽略照片的背景,提高头像的识别效率。


b、严格意义上讲左图并不能称之为头像,而更应该称之为照片。原因很简单,头像嘛,自然应该以展示“头”为主,而左图中头像只占画面四分之一不到的区域。从这个角度来说,显然右图更为合适。在选择照片作为头像时,如果是圆形,用户更愿意选择脸部的照片作为头像;如果是方形,用户则相对更随意,通常是全身或是半身照。不信,你可以打开自己的微信,看看自己的好友头像,或者往前滑滑看看前面的配图。


c、日常生活中,我们看到的大多数相框都是方形的,圆形的相框较少,这是因为大多数照片都是方形的。因此,使用圆形的轮廓来表现头像,能够快速地和照片区分开来,更加突出。

当然,使用圆形的轮廓作为头像,还有一些其它的原因,例如技术上的进步。

早期由于CSS等技术的不成熟,圆形、圆角图形的处理非常麻烦,现在变得容易很多。


二、圆形的icon


在APP的UI设计中,我们会经常看到一排排圆形的icon,例如下图所示。


fc6956a4564232f875520ff01b89.jpg

上图中,前面两个分别是美团和淘宝。在设计上,都有两行横排的圆形图标。最后一张图是搜狗地图的服务tab页,可以发现也有纵向排列的一溜圆形图标。

在这里,要回答两个问题:

1.为什么要用圆形?

2.为什么要用圆形而非矩形?


第1个问题很方便回答。每个功能入口的图标都不相同,如果去掉圆形轮廓,势必会显得十分凌乱。大家都知道圆形是一个封闭的形体,加上圆形之后就能够弱化图标的差异性,让其变得更加规整,看起来也更加清爽,整齐划一。同时,在功能上也表明各个图标之间的平等地位,不会因为某个图标形状特殊而有所偏袒。


在回答第2个问题之前,首先回归圆形和方形的基本特征,

圆形:动,曲线,运动,灵动,流动

方形:静,直线,规则,严肃,理性

圆形和方形比起来,显得要灵动很多,不至于那么呆板、严肃。如此,不难理解为什么用圆形而非矩形。


其次,圆形能够使图标在方形页面中脱颖而出——不觉得这几个圆形图标在页面中非常突出抢眼么?原因嘛,很简单。我们的手机屏幕大多是方形的,界面中的大多数元素也是方形的,这时候用一点少量的圆形,自然在界面中形成焦点,这一点在后面的分析中还会见到。


除了这种形式之外,还有一些单个的圆形图标浮于页面底部,通常执行的是返回至顶部的操作。


三、圆形和方形的结合


圆与方就像太极中的阴与阳,相生相克,而又生生不息。巧妙地将圆形与方形进行结合,能够让页面变得生动活泼的同时,也能够更好实现功能上的引导,如下图所示的几个案例。

ebb456a4567032f875520fafc8f5.jpg

第一幅图是谷歌手机地图,地点右上角的出行方式图标刚好被方形的临时层一分为二。从功能上来讲,出行方式是下一步的行为,不属于临时层里的内容,因此置于右上角的位置是比较合适的。从UI角度来说,圆形与方形结合,使的圆形变得更加突出显眼;同时圆形置于右上角,页面也不那么死板,反而让页面变得生动、活泼起来。


第二幅图是宜人贷,微微鼓起的弧度让这个理财项目变得十分突出,同时也打破了页面沉闷的布局。


第三幅图是kitchen stories,整个页面保持左右居中,作者的头像居中现实,对页面进行了分割的同时起到了承上启下的作用。


在页面设计中,圆形元素通常不是独立存在的,而是和其他元素相生相息,相互包容。寻求好的视觉效果的同时,也要弄清楚页面元素之间的相互关系,这样产出的设计才是真的好设计。


四、圆形的轮廓


结合现实物体,借用圆形轮廓,打造页面点睛之笔。还是举几个栗子给大家看看吧,如下图所示。

a29156a4568e6ac7256cb0899d80.jpg

第一幅图所示的是网易云音乐的播放界面。圆形轮廓与唱片保持一致,虽然占据了页面的主要空间,但是使的整个页面变得文艺简洁。


第二幅图所示的是搜易贷的账户页面。可用余额采用瓶装水的设计,余额较多则水涨的越高,同时会有晃动的效果,栩栩如生的同时让页面变得灵动起来。


第三幅图所示的是乐动力的首页。步数越多,则描边进度条越多,暗色变得越暖。与现实生活中的仪表盘相对应,渐变色搭配圆形,使的页面变得主次分明,极富视觉冲击力。


可以发现,在使用圆形元素时要注意页面的平衡,例如左右和上下的对齐居中。为了保证页面的均衡和清爽,通常会在圆形元素周围保留较多的空白。这些都是在使用圆形元素时需要注意的事项。


    • 文章来源:站酷   作者:Sim_H

      分享此文一切功德,皆悉回向给文章原作者及众读者.

      免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

7个基础的用户体验设计细节

seo达人


1、专注于20%

maggelato

你可曾听说过80/20法则?简而言之,80%的用户通常只会使用你网站内容和功能的20%,绝大多数的用户只是在扫视网站内容,并且只会挑选真正感兴趣的浏览。

同时这也意味着,剩余的20%就相当重要了。大多数的点击将源自于这一区域,它也是近乎完美的内容和互动区域。

你可以借助数据分析来决定哪个部分是整个网站最被关注的那20%。对于刚刚上线的网站,这个数据搜集的过程可能长达好几周,随后再进行调整。

当然,你也可以通过引导将用户引流到你希望用户去的那20%的区域。借助视觉引导和行动召唤设计来引流,用有趣和有意思的设计来营造令人有兴趣的区域,让他们乐于点击,从而达到目的。

2、架构式的思维

goldhill

设计一个网站和搭建一所房子其实差不多。首先,它需要一个坚实的基础,然后是能够承载所有内容的框架,做好后要好好装饰一下。同样的思维模式可以套用在网站的设计上。

更重要的是,你并不需要为此创造出过去从未在框架中出现过的东西,换言之,框架内的素材、组件和我们常见的并无二致。就像导航设计模式一样,现在的设计都趋于一致,因为这样的导航好用。

当网站的整体结构搭建起来之后,可以将相同的思路套用到内容体系的构建上来。主要的正文内容是整个网站内容的基础,辅以吸引人的标题、图片,配合上其他的次要元素,整个内容体系可以很快搭建起来。

3、不要要求太多

assos

现如今的世界可以说是由数据所驱动,越来越多的应用开始要求用户注册,要用户提供更多的权限,更多的信息,以期为用户提供更加个性化的体验。但是从体验的角度上来看,要尽量规避这一点。

站在用户的角度稍加思考你就明白了。找到一个令你感兴趣的炫酷网站,如果要深入了解更多内容,就需要内容,而如果要注册的话,网站却需要你提供下面10个类型的信息:姓名、邮件、国家、地区、城市、电话、Twitter权限、个人网站、工作职位、以及如何发现这个网站的。

那么接下来,你会怎么做?绝大多数的用户会直接转身离开,这个注册信息填写起来太费劲,体验太差了。

那么,如果你当你点击注册的时候,只需要一键从Facebook或者twitter授权即可,那么你会不会立刻点击呢?至少从目前已有的数据来看,绝大多数的用户会这么选择。

4、令人愉悦的微交互

evernote-1

可能很多时候你都没注意到,你和各种微交互进行的互动一直都存在。

·谷歌日历弹出框提示你每周例会要开始了
·短信提醒
·午睡的闹钟
·微博上的新粉丝和转发提醒

这样的例子我们可以连续不断地说上一个小时。这些带有微交互的提醒和动作会推动用户进行下一步操作,带来愉悦的体验,它们不能设计得非常醒目,但是又需要适当地吸引用户注意。

这些有趣的微交互的加入让用户从中获得好处。而你需要思考的是,有哪些东西是你的网站或者APP当中,用户想要立刻知道和获得、想被提醒的?

5、甚至幼儿都能轻松使用

statusshop

如果要给小孩子设计产品,那么它应该是什么样子?你可能会更专注于色彩的使用,让每一个区块都可以轻松点击,明显的标签,加上拼图式的连接方式。

所以,当我们在设计网站或者APP的时候,我们会说这个产品要足够易用,那么怎么才算得上“足够”呢?让小孩子都可以轻松使用,这就叫足够易用。换句话说,即使是不经常使用网站和APP的成人,也不会存在明显的使用障碍。

超大的设计元素和标签是设计的关键因素。这些视觉线索是帮助用户引导用户的核心,是整体体验设计中最重要的部分。大胆的色彩选择,会鼓励用户点击和探索。

如果它足够易用,用户会继续尝试使用和探索。而难于理解操作不便的导航自然会被用户所嫌弃。如果网站包含太过复杂的媒体和内容,那么不妨从一个设计简单的首页开始,几个简单的导航点击将用户引导到对应的位置。在深入到更复杂的页面之前,用梳理清晰、简单明了的分页让用户感到舒适,这是带来好的浏览体验的不错解决方案。

6、轻拍(Tap)还是点击(Click)?

espns

这一点要说的并不是设计问题,而是一个常见的开发代码的问题。虽然Tap和Click两者都能在点击的时候触发,但是在移动端网页上使用Click事件 的时候,会有200ms 到300ms 的延迟,所以在移动端上最好替换为Tap事件。在进行响应式网页设计的时候,一个事件从头用到尾的错误出现得很普遍,但是有太多的移动端网页在这样的设计下会有明显延迟,更恶劣的情况是无法识别,这样会直接损害到整个页面的易用性和功能本身。

此外,移动端上使用 Tap事件的时候,它所对应的按钮应当相对更大一些,便于小屏上进行交互。

7、像用户一样思考

justact

我们一直在说:“像用户一样思考”。但是实际的情况往往是,我们很难走出设计者和开发者的思维方式,因为我们的思维方式压根就和用户不同,面对每一个交互、每一个元素的下意识反应是不一样的。

所以,还是同设计圈、开发圈和产品圈以外的人去聊聊吧,看看他们对于网站和APP的真实反应到底是怎样的。你可能会在观察中发现,他们对于产品、对于交互、对于界面的反应和你的预期完全不同。将用户的真实反馈记录下来,反馈给项目组,这样可以帮你打造更好的用户体验,创造更优秀的产品。

原文地址:designshack

译文地址:优设

作者:Carrie Cousins

优设译者:@陈子木

转载请注明:学UI网》7个基础的用户体验设计细节

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

截屏2021-05-13 上午11.41.03.png

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



日历

链接

个人资料

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

存档