bp,最小化界面设计的组成要素及可用性剖析,爨

频道:推荐新闻 日期: 浏览:302

最小化规划的方针是移除界面傍边不必要的元素或内容,削减搅扰,使界面最大程度的支撑用户的使命流程。

要将界面以恰当的方法简化到只保存必要元素的程度,规划师需求对一系列与最小化战略高度相关的规划形式有所了解。界面规划,就像人类的言语相同,终究是由人们的运用方法所界说的。现在,尽管“最小化”和“极简”的概念经常被人们抛出,但咱们仍是无法精确的、量化的去界说详细是哪些功用特性构成了最小化界面。为了愈加明晰的对概念进行解构,咱们对112个带有显着最小化风格的网站进行了剖析。

需求记住的是,规划风格的盛行不代表它适用于任何类型的产品及其方针用户,更不意味着它能推进提润或其他事务方针的提高。在这次研讨傍边,咱们的剖析对象是那些显着选用了最小化规划战略的界面,而非因为最小化规划风格而完结商业方针的产品。后文中也会讲到,尽管最小化规划战略傍边的一些要素对事务本身是有推进效果的,但一起也有许多会起到反效果。

最小化规划的典型组成要素

关于咱们所研讨的112个最小化风格的网站,假如某个特征出现在超越75%的样本傍边,咱们就将其界说为最小化界面规划的底子组成要素。

扁平化的原料

运用在96%的样本界面傍边(许多样本的运用方法并不妥当)。

曩昔几年间,界面规划范畴傍边最为巨大的改变当属拟物化风格向不带有任何什物隐喻的数字化表现形式的改变。扁平化风格一般不运用任何高光、暗影、突变和原料来使界面元素带有三维质感效果。

有些规划师信任扁平化风格正是最小化界面规划理念的直接表现:移除了各种不必要的、装饰性的视觉效果,使界面最大程度的支撑内容本身的出现。

尽管这两种概念具有很强的相关性,但它们并不等同于互相。咱们一般所说的扁平化规划泛指一种界面元素的视觉风格,而最小化规划则涉及到内容和功用层面。一个选用了扁平化视觉风格的界面未必是最小化的:

正如咱们在从前一篇文章傍边所讲,扁平化界面经常难以让用户一望而知的了解哪些元素是可点击的。咱们信任,比较于盲目的扁平化处理方法,一种介于扁平化和拟物化之间的折衷风格会更为有用 - 以扁平化为根底,一起在交互元素上运用更具什物隐喻性的款式,运用户能够快速辨认可点击元素。

总体上讲,扁平化风格十分简单被误用,而且很可能对产品体会形成负面影响。现在扁平化极度盛行的规划趋势使其简直成为最小化规划的代名词,这并不是一个好现象。

少数配色或单色计划

运用在95%的样本界面傍边。

在大都的最小化风格界面中,极简的配色计划都是战略性的被用来在不添加额定元素的状况下创立视觉招引。界面傍边的视觉搅扰较少,色彩更简单被留意到,对内容和功用的影响力更强。

极简的配色计划能够说是针对2000年前后紊乱聒噪的网页规划风格的回敬。极度抑制的配色计划最大程度的防止了界面本身对内容的搅扰,不过在内容图片的运用方面,色彩一般会更美丽。咱们在进行评价时,考量的元素包含布景色、logo、导航菜单、图标和字色,而不包含内容图片。

许多极简主义的界面规划师会选用单色计划,最多再为界面中的重要元素另取一种色彩。所谓重要元素,一般是指比较重要的交互元素。

在咱们的样本傍边,49%运用了单色计划,46%运用了两到三种色彩。运用着单色计划的那些界面,绝大大都是黑白及各种灰度的调配。

比较于十多年前的紊乱,现在极简的配色战略能够说是一种前进,但在运用时仍有一些重要的问题需求考虑:

保证你的配色计划具有满足的对比度,使内容具有最底子的可读性,别的要考虑到色弱和色盲用户。要害色的运用要有清晰的目的,例如突显重要信息或交互元素,并留意保持大局的统一性,用处保持一致。功用与界面元素的束缚

运用在87%的样本界面傍边。

预备测验最小化战略的规划师有必要对界面傍边的每一个元素进行剖析,然后移除那些对中心功用或信息没有直接支撑效果的元素。所谓“元素”,包含(但不限于):

导航菜单项链接图片图形元素分隔线标题案牍原料纹路,包含高光、暗影、突变等效果色彩字体图标

实践上,咱们很难对界面傍边是否还包含“不必要”的元素进行精确的评价,除非直接向规划师自己问询,并了解他们的产品特性及方针用户集体。为了使这一特征更易考量,咱们要点重视界面傍边是否存在不具任何本质目的性的视觉元素。在咱们的样本中,有87%的界面显着移除了全部的不必要元素。

界面中的元素越多,用户头脑中需求处理的信息就越多。极简主义规划师们经常想念的一句话便是“继续减法,直到无可再减”,意思便是除非缺失某样东西会导致问题的出现,不然就干掉它。

不过,规划师们往往简单过火寻求精约、现代、最小化的视觉外观,致使有实践用处的元素被过错的移除。反之,严厉坚持有用主义道路,将在必定程度上协助你更精确的辨认出界面中的搅扰元素,打造出更高效的交互流程。最底子的一点,保证不要将用户完结中心使命所真实需求的东西移除,不然这样的简化只能提高操作复杂度。

元素紊乱、信息过载的界面当然难以了解,但过火简化以至于缺失必要信息的产品则更简单让人茫然无措。

超大的留白份额

运用在84%的样本界面傍边。

有意识的将界面傍边的搅扰元素移除,势必会导致负空间份额的增大。

留白(负空间)曾被以为是最小化界面的近义词,许多规划师将留白作为一种引导用户重视重要内容的手法,协助他们更好的了解信息结构。

留白并非空无一物,份额妥当的负空间除了能够为界面赋予呼吸感以外,的确还能起到有用的引导效果。在考虑留白的运用时,要重视以下几方面的问题:

添加或削减留白之后,界面信息层级的展现方法是否会受到影响?留白的运用是否会影响到界面上方信息的展现?尽管备受争议,但“折线以上”的原则在许多界面环境中仍然适用,用户在进行交互行为之前最简单重视到的仍然是首屏区域傍边的内容,不要让留白对这儿的重要信息发生损坏效果。留白的运用是否会影响到交互本钱?用户是否需求支付更高的本钱才干获取信息?留白的份额是否需求依据不同的阅读环境进行呼应式的调整?夸大的字体运用

运用在75%的样本界面傍边。

和字色相仿,当界面里仅有为数不多的元素时,加粗加大的字体也能成为交流重要信息的手法。恰当有用的字体运用不光能够使最小化风格的界面更具视觉招引力,而且能够补偿其他类型元素的匮乏所导致的视觉失衡问题。字号、粗细、字形风格等等的改变调配关于协助用户在最小化界面中了解信息层次也起着重要的效果。在咱们研讨的112个样本傍边,75%的界面经过夸大的字体运用方法来传达信息,制造视觉张力。

关于定制化程度比较高的字体,运用图片替代文本是一种惯例做法,价值则是降低了界面的加载速度,而且需求考虑不同分辨率下的尺度问题。运用在线字体(web font)也是一种方法,但相同要考虑功用方面的问题。

有必要记住,只要在能够传达特定信息的状况下,夸大的字体运用方法才有含义,不要单纯为了视觉效果而运用。过度风格化的字体有很大的风险性,依据咱们曩昔的研讨,用户很简单疏忽掉那些看上去过于花里胡哨的文字,因为太像广告了。你的字体运用方法能否精确的表现规划目的?终究成果是否反而形成了紊乱和搅扰?优异的规划师应该有才干在这两者之间找到恰当的平衡点。假如你无法确认,尽量向最安全最保险的一边挨近。

其他组成要素

以下这些规划要素也是许多规划师乐于运用的。不过因为它们在样本傍边的运用份额相对较低,所以咱们不会将其界说为最小化界面规划的底子组成要素。

全屏布景图片或视频

运用在57%的样本界面傍边。

理论上讲,全屏布景图片与最小化规划理念傍边“移除全部不相关要素,只保存必要信息”的原则是相抵触的,不过在实践傍边,这种规划形式的主流化程度仍是众所周知的;在咱们的研讨样本傍边,选用了这种形式的界面约占57%。

全屏布景图片/视频是否有利于用户对品牌发生正确认知,这一点还取决于详细的产品环境以及规划师的规划目的。要战略性的挑选布景图片或视频,而不是盲目的仿照或随意运用资料;在此根底上,遵从最小化规划的理念,防止剩余的界面元素与大布景所传达的信息发生抵触。不过在实践傍边,有许多规划师的思路却是经过巨大而夸大的布景元从来补偿过于简化的风格所带来的单调与单调。

在运用全屏布景图片或视频时,考虑以下几点:

保证你所选用的图片或视频是有实践含义的,例如协助用户一望而知的对产品发生直观认知。假如做不到这一点,它们只会成为界面傍边体型巨大的搅扰元素。保证布景之上的文字内容可读、易读。可读是指至少保证用户能够辨识字母、单词、句子;易读是指轻松顺利的辨识和处理这些内容。假如你运用视频做布景,那么要在全部典型分辨率下测验每一帧图画对文字内容的可读、易读性是否发生了严峻的负面影响。考量大幅布景资料关于界面功用的影响。要选用必要的自适应技能,保证界面在移动设备上加载时不需求运用桌面尺度和精度的超大资料。关于自动播放要慎重。许多用户十分讨厌自动播放的视频,尤其是一起带有音频的。不要将布景视频当作哈利波特电影那样去制造,动来动去的夺目的内容只会搅扰用户的留意力。网格布局

运用在43%的样本界面傍边。

43%的份额能够代表必定的盛行程度,但也能够阐明这种规划方法不是很典型的最小化规划组成要素。

在最小化界面傍边,网格布局的运用一般出于两方面的原因:

无需额定的视觉元素进行辅佐,网格布局能够很好的将界面傍边一系列同质内容组织起来。网格布局关于呼应式规划的完结很有协助。

圆形的图形元素

运用在16%的样本界面傍边。

许多规划师以为圆形元素是一种典型的最小化界面规划组成要素,不过在咱们的研讨傍边,只要16%的样本有用到。

默许躲藏的大局导航

运用在13%的样本界面傍边。

现在许多网站会默许躲藏大局导航,即便是在桌面设备上阅读的时分;汉堡包图标也越来越多的出现在网页傍边。实践上,这能够说是对“移动优先”规划思路了解不全面或是遵循不全面所导致的直接成果 - 规划师认同了在移动设备小屏幕上躲藏导航交换显现空间的合理性,可是疏忽了在平板或桌面设备富余的显现环境傍边一望而知的向用户出现导航结构的重要性 - 换个视点说,这也是典型的过度简化规划。

退一步说,在某些状况下,躲藏一些非高频功用进口或许契合你的简化方针,但有必要保证那些关于用户完结中心使命起到要害效果的信息或功用默许出现出来。

最小化规划要素概括

在对112个网站界面进行研讨之后,咱们总结出了如前文所述的若干最小化规划组成要素,其间包含5个典型组成要素:

扁平化的原料少数配色或单色计划功用与界面元素的束缚超大的留白份额夸大的字体运用

其间某些要素出现在了简直全部的研讨样本傍边;运用频率最低的也超越了75%。此外,咱们还总结出了一些运用频率相对较低,但仍与最小化风格高度相关的规划方法:

全屏布景图片或视频网格布局圆形的图形元素默许躲藏的大局导航小结

2000年前后的界面规划范畴由紊乱与聒噪所控制。多年来,咱们逐步学会了与之进行对立。臃肿的功用和无含义的内容关于用户及产品本身都是极大的损伤。

理论上讲,最小化规划思维能够协助咱们远离从前的紊乱局势,打造出愈加滑润天然的人机互动流程。不过实际傍边的状况并非那么抱负,许多规划师仅从形式上复制着各种盛行的最小化规划要素,却疏忽了特定的产品方针以及不恰当的规划方法所导致的各种可用性圈套。

从形式上看,扁平化规划是对拟物风格的反击,最小化规划是对过度规划的反击。无论如何,咱们都强烈建议各位规划师防止非此即彼、非黑即白的思维形式,真实去了解每种规划思维的特性,依据产品的实践状况寻求恰当的平衡点。只要在真实契合产品方针及用户需求的状况下,特定的规划思维才干真实成为有利的规划兵器 - 为了最小化而最小化,对产品和用户都无益。

译文来自http://beforweb.com/node/749

译者:C7210

互联网人士必备微信大众号:woshipm,雷军和周鸿祎都重视了,假如你现已重视了,证明你现已很牛逼了。