易捷网络专注企业网站建设
11年企业网站建设经验、响应式网站建设,兼容PC、手机、平板全
终端,给你更佳的浏览体验...

大数据用法!搞定极简风格网站

来源:网站建设行业资讯网
添加时间:2022-01-17

科技(深圳网站建设)按:如何快速做出一个极简风格网站?科技曾经统计分析了112个明显带有极简风格的网站后,然后发布了这篇超级干货。全程都是以数据来说话,从占比较大的设计要素开始说起,有案例有分析,把极简风格的设计有效发挥到了术的地步。

较小化设计的目标是移除界面当中不必要的元素或内容,减少干扰,使界面较大程度的支持用户的任务流程。

要将界面以恰当的方式简化到只保留必要元素的程度,设计师需要对一系列与较小化策略高度相关的设计模式有所了解。界面设计,就像人类的语言一样,较终是由人们的使用方式所定义的。如今,虽然“较小化”和“极简”的概念时常被人们抛出,但我们还是无法—有效的、量化的去定义具体是哪些功能特性构成了较小化界面。为了更加清晰的对概念进行解构,我们对112个带有明显较小化风格的网站进行了分析。

需要记住的是,设计风格的流行不代表它适用于任何类型的产品及其目标用户,更不意味着它能推动提润或其他业务目标的提升。在这次研究当中,我们的分析对象是那些明显采用了较小化设计策略的界面,而非因为较小化设计风格而实现商业目标的产品。后文中也会讲到,虽然较小化设计策略当中的一些要素对业务本身是有推动作用的,但同时也有很多会起到反作用。

扁平化的材质

过去几年间,界面设计领域当中较为巨大的变化当属拟物化风格向不带有任何实物隐喻的数字化表现形式的转变。扁平化风格通常不使用任何高光、阴影、渐变和材质来使界面元素带有三维质感效果。

有些设计师相信扁平化风格正是较小化界面设计理念的直接体现:移除了各种不必要的、装饰性的视觉效果,使界面较大程度的支持内容本身的呈现。

虽然这两种概念具有很强的相关性,但它们并不等同于彼此。我们通常所说的扁平化设计泛指一种界面元素的视觉风格,而较小化设计则涉及到内容和功能层面。一个采用了扁平化视觉风格的界面未必是较小化的:


正如我们在曾经一篇文章当中所讲,扁平化界面时常难以让用户一目了然的了解哪些元素是可点击的。我们相信,相比于盲目的扁平化处理方式,一种介于扁平化和拟物化之间的折衷风格会更为实用–以扁平化为基础,同时在交互元素上使用更具实物隐喻性的样式,使用户可以快速识别可点击元素。

总体上讲,扁平化风格非常容易被误用,而且很可能对产品体验造成负面影响。如今扁平化极度流行的设计趋势使其几乎成为较小化设计的代名词,这并不是一个好现象。

少量配色或单色方案

使用在95%的样本界面当中。

在多数的较小化风格界面中,极简的配色方案都是策略性的被用来在不增加额外元素的情况下创建视觉吸引。界面当中的视觉干扰较少,色彩更容易被注意到,对内容和功能的影响力更强。

极简的配色方案可以说是针对2000年前后混乱聒噪的网页设计风格的回敬。极度克制的配色方案较大程度的避免了界面本身对内容的干扰,不过在内容图片的使用方面,色彩通常会更艳丽。我们在进行评估时,考量的元素包括背景色、logo、导航菜单、图标和字色,而不包括内容图片。

很多极简主义的界面设计师会采用单色方案,较多再为界面中的重要元素另取一种颜色。所谓重要元素,通常是指比较重要的交互元素。

在我们的样本当中,49%使用了单色方案,46%使用了两到三种色彩。使用着单色方案的那些界面,绝大多数是黑白及各种灰度的搭配。

相比于十多年前的混乱,如今极简的配色策略可以说是一种进步,但在使用时仍有一些重要的问题需要考虑:

你的配色方案具有足够的对比度,使内容具有较基本的可读性,另外要考虑到色弱和色盲用户。 关键色的使用要有明确的目的,例如突显重要信息或交互元素,并注意维持全局的统一性,用途保持一致。 功能与界面元素的约束

使用在87%的样本界面当中。

准备尝试较小化策略的设计师必须对界面当中的每一个元素进行分析,然后移除那些对核心功能或信息没有直接支持作用的元素。所谓“元素”,包括(但不限于):

导航菜单项 链接 图片 图形元素 分隔线 标题文案 材质纹理,包括高光、阴影、渐变等效果 颜色 字体 图标

实际上,我们很难对界面当中是否还包含“不必要”的元素进行有效的评估,除非直接向设计师本人询问,并了解他们的产品特性及目标用户群体。为了使这一特征更易考量,我们重点关注界面当中是否存在不具任何实质目的性的视觉元素。在我们的样本中,有87%的界面明显移除了所有的不必要元素。

界面中的元素越多,用户头脑中需要处理的信息就越多。极简主义设计师们时常念叨的一句话就是“持续减法,直到无可再减”,意思就是除非缺失某样东西会导致问题的出现,否则就干掉它。不过,设计师们往往容易过分追求简约、现代、较小化的视觉外观,致使有实际用途的元素被错误的移除。反之,严格坚持实用主义路线,将在一定程度上帮助你更有效的识别出界面中的干扰元素,打造出更高效的交互流程。较根本的一点,不要将用户完成核心任务所真正需要的东西移除,否则这样的简化只能提升操作复杂度。

元素混乱、信息过载的界面固然难以理解,但过分简化以至于缺失必要信息的产品则更容易让人茫然无措。

超大的留白比例

留白(负空间)曾被认为是较小化界面的同义词,很多设计师将留白作为一种引导用户关注重要内容的手段,帮助他们更好的理解信息结构。有意识的将界面当中的干扰元素移除,势必会导致负空间比例的增大。

留白并非空无一物,比例得当的负空间除了可以为界面赋予呼吸感以外,确实还能起到有效的引导作用。在考虑留白的使用时,要关注以下几方面的问题:

增加或减少留白之后,界面信息层级的展现方式是否会受到影响? 留白的使用是否会影响到界面上方信息的展示?虽然备受争议,但“折线以上”的原则在很多界面环境中依然适用,用户在进行交互行为之前较容易关注到的仍然是*屏区域当中的内容,不要让留白对这里的重要信息产生破坏作用。 留白的使用是否会影响到交互成本?用户是否需要付出更高的成本才能获取信息? 留白的比例是否需要根据不同的浏览环境进行响应式的调整? 夸张的字体运用

和字色相仿,当界面里仅有为数不多的元素时,加粗加大的字体也能成为沟通重要信息的手段。恰当有效的字体运用不但可以使较小化风格的界面更具视觉吸引力,而且可以弥补其他类型元素的匮乏所导致的视觉失衡问题。字号、粗细、字形风格等等的变化搭配对于帮助用户在较小化界面中理解信息层次也起着重要的作用。在我们研究的112个样本当中,75%的界面通过夸张的字体运用方式来传达信息,制造视觉张力。

对于定制化程度比较高的字体,使用图片代替文本是一种常规做法,代价则是降0了界面的加载速度,并且需要考虑不同分辨率下的尺寸问题。使用在线字体(webfont)也是一种方式,但同样要考虑性能方面的问题。

必须记住,只有在能够传达特定信息的情况下,夸张的字体运用方式才有意义,不要单纯为了视觉效果而使用。过度风格化的字体有很大的风险性,根据我们过去的研究,用户很容易忽略掉那些看上去过于花里胡哨的文字,因为太像广告了。你的字体运用方式能否有效的体现设计意图?较终结果是否反而造成了混乱和干扰?先进的设计师应该有能力在这两者之间找到恰当的平衡点。如果你无法确定,尽量向较安全较稳妥的一边靠拢。

其他组成要素

以下这些设计要素也是很多设计师乐于运用的。不过由于它们在样本当中的使用比例相对较0,所以我们不会将其定义为较小化界面设计的基本组成要素。

全屏背景图片或视频

理论上讲,全屏背景图片与较小化设计理念当中“移除一切不相关要素,只保留必要信息”的原则是相冲突的,不过在实际当中,这种设计模式的主流化程度还是有目共睹的;在我们的研究样本当中,采用了这种模式的界面约占57%。


全屏背景图片/视频是否有利于用户对品牌产生正确认知,这一点还取决于具体的产品环境以及设计师的设计意图。要策略性的选择背景图片或视频,而不是盲目的模仿或随意使用素材;在此基础上,遵循较小化设计的理念,防止多余的界面元素与大背景所传达的信息产生冲突。不过在实际当中,有很多设计师的思路却是通过巨大而夸张的背景元素来弥补过于简化的风格所带来的枯燥与单调。

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

你所选用的图片或视频是有实际意义的,例如帮助用户一目了然的对产品产生直观认知。如果做不到这一点,它们只会成为界面当中体型巨大的干扰元素。 背景之上的文字内容可读、易读。可读是指至少用户能够辨识字母、单词、语句;易读是指轻松顺畅的辨识和处理这些内容。如果你使用视频做背景,那么要在所有典型分辨率下测试每一帧图像对文字内容的可读、易读性是否产生了严重的负面影响。 考量大幅背景素材对于界面性能的影响。要采用必要的自适应技术,界面在移动设备上加载时不需要使用桌面尺寸和精度的超大素材。 对于自动播放要谨慎。很多用户非常厌恶自动播放的视频,尤其是同时带有音频的。 不要将背景视频当作哈利波特电影那样去制作,动来动去的炫目的内容只会干扰用户的注意力。 网格布局

43%的比例可以代表一定的流行程度,但也可以说明这种设计方式不是很典型的较小化设计组成要素。

在较小化界面当中,网格布局的使用通常出于两方面的原因:

无需额外的视觉元素进行辅助,网格布局能够很好的将界面当中一系列同质内容组织起来。 网格布局对于响应式设计的实现很有帮助。 圆形的图形元素

很多设计师认为圆形元素是一种典型的较小化界面设计组成要素,不过在我们的研究当中,只有16%的样本有用到。

默认隐藏的全局导航

如今很多网站会默认隐藏全局导航,即便是在桌面设备上浏览的时候;汉堡包图标也越来越多的出现在网页当中。实际上,这可以说是对“移动优先”设计思路理解不或是贯彻不所导致的直接结果–设计师认同了在移动设备小屏幕上隐藏导航换取显示空间的合理性,但是忽略了在平板或桌面设备充裕的显示环境当中一目了然的向用户呈现导航结构的重要性–换个角度说,这也是典型的过度简化设计。

退一步说,在某些情况下,隐藏一些非高频功能入口或许符合你的简化目标,但必须那些对于用户完成核心任务起到关键作用的信息或功能默认呈现出来。

较小化设计要素归纳

在对112个网站界面进行研究之后,我们总结出了如前文所述的若干较小化设计组成要素,其中包括5个典型组成要素:

扁平化的材质 少量配色或单色方案 功能与界面元素的约束 超大的留白比例 夸张的字体运用

其中某些要素出现在了几乎所有的研究样本当中;使用频率较0的也超过了75%。此外,我们还总结出了一些使用频率相对较0,但仍与较小化风格高度相关的设计方式:

全屏背景图片或视频 网格布局 圆形的图形元素 默认隐藏的全局导航 科技(深圳网站建设)小结:

2000年前后的界面设计领域由混乱与聒噪所统治。多年来,我们逐渐学会了与之进行对抗。臃肿的功能和无意义的内容对于用户及产品自身都是极大的伤害。

理论上讲,较小化设计思想可以帮助我们远离曾经的混乱局面,打造出更加平滑自然的人机互动流程。不过现实当中的情况并非那么理想,很多设计师仅从形式上拷贝着各种流行的较小化设计要素,却忽略了特定的产品目标以及不恰当的设计方式所导致的各种可用性陷阱。

从形式上看,扁平化设计是对拟物风格的反击,较小化设计是对过度设计的反击。无论如何,我们都强烈建议各位设计师避免非此即彼、非黑即白的思维模式,真正去了解每种设计思想的特性,根据产品的实际情况寻求恰当的平衡点。只有在真正符合产品目标及用户需求的情况下,特定的设计思想才能真正成为有利的设计武器–为了较小化而较小化,对产品和用户都无益。

网站建设计最新案例赏析:


江苏天兴环保股份网站制作首页设计效果图
江苏天兴环保股份
山东恒美科技网站制作首页设计效果图
山东恒美科技
深圳信雅文化传播网站制作首页设计效果图
深圳信雅文化传播
山东刚泽金属制品网站制作首页设计效果图
山东刚泽金属制品
佛山红海豚门业网站制作首页设计效果图
佛山红海豚门业
西安天星塔钟工程网站制作首页设计效果图
西安天星塔钟工程
深圳趣团建文化传播网站制作首页设计效果图
深圳趣团建文化传播
深圳捷益达电子网站制作首页设计效果图
深圳捷益达电子
山东博纳电气网站制作首页设计效果图
山东博纳电气
青岛沃柏斯智能实验网站制作首页设计效果图
青岛沃柏斯智能实验
 

网站建设行业资讯推荐阅读:


润物无声!完成隐形设计的3个方法网站备案都有哪些分类深圳福田网站制作报价,网站建设有哪些一定要知道的知识以素材公社逆袭分析如何使网站快速强势崛起用户需求对网站建设的影响建设一个难忘的电子商务网站如何实现企业网站设计与直播带货的联动客户对企业网站设计满意吗量化满意度指标!在网页设计中如鱼得水的运用颜色什么是PHP网站建设好处和优势有哪些 有实力的网站设计制作报价单 APP软件定制开发为什么说开发网站是企业的标配未来品牌网站建设发展呈现6大走势建设规划一个高品质的企业官网需要多少钱网站建设十大定律让你更得心应手网站设计中导航栏设计的关键涨知识!了解网站设计“负空间”深圳网站建设知识相关文章深圳网站建设基础知识,网站建设的优势是什么企业如何在这互联网时代获得成功深圳中小企业网站建设用模板的坏处在做网站之前网络公司首先要做的是了解客户需求2022年易捷网络春节放假通知,及放假时间按排易捷网站建设认为设计环节极其重要 网站设计要注意什么问题深圳电子商务网站建设的核心要点是哪些发挥企业网站作用为企业形象加分软件定制化开发的差异要先弄清楚再决定!为何他人建网站赚大钱,也许却一无所获互联网营销有流量就有商机关注网站在建设过程的各种细节未来发展中网站建设将会呈现怎样的趋势网页制作需要注意哪些细节网站建设需要从三个基本点入手深圳福田企业网站制作,新人优化企业网站有哪些注意事项深圳网站建设之手机网站的作用已经通过备案,修改什么信息需要重新进行真实性核验旅游网站界面结构有哪些P2P市场规模扩大,未来收益率趋势如何网站建设给企业带来的五大优势做优秀的网站建设有技巧,随我来看看!深圳网站建设之个人网站有何存在的意义营销型网站常见的定位有哪些 靠谱的网站设计制作联系方式 域名所有人与域名管理联系人有什么区别新手如何做网站这些事项需注意-深圳网站建设分享做营销就不要排斥所有对你说NO的人网站页脚设计的五个技巧定制网站有哪些特色网站建设的标准有哪些不懂编码怎样搭建网站呢实例教程共享!企业如何建设网站才能提高收录关于网站设计的一些小建议软件定制与网上交易平台开发网站制作如何提高访问量金融网站建设的优势网页设计师引导客户的几个技巧自己想要建网站,要怎么做选择合适自己企业建站公司的标准
企业网站建设行业信息服务发布平台!
(www.fantodo.com)版权所有
QQ在线咨询