IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

网页设计中的极简风格—无的力量

Catherine • 2017-05-25 10:52 • 交互设计

作为设计师,我们都知道极简的设计效果的确非常出彩。然而,在设计过程中,我们往往会由于使用较少元素而感觉缺了什么,或是让最终成品看起来仿佛没有完成。

文章目录[隐藏]

  • 什么是极简设计
    • 少即是多
  • 怎样简化内容
  •  怎样简化设计
    • 使用优雅的线框
    • 留白
    • 让简单成为习惯
  • 网页设计中极简范式
    • 黑白灰:色彩禁欲主义
    • 线形插画:形魅力
    • 字母:形的构思
    • 摄影:用图讲故事
  • 极简设计的适用场合
  • 后记

网页设计中的极简风格—无的力量

作为设计师,我们都知道极简的设计效果的确非常出彩。然而,在设计过程中,我们往往会由于使用较少元素而感觉缺了什么,或是让最终成品看起来仿佛没有完成。

那么什么是极简设计?又是什么方法使你的设计看起来简约又不简单呢?这篇文章也许会帮到你。

什么是极简设计

极简设计,严格上讲不能算作一种视觉风格,而是一种设计哲学。它在保持了基本的骨架内容的基础上,剔除掉多余的元素、装饰、色彩和纹理,是通过不断思考而进行化繁为简的设计过程。这样做的结果是突显了主题内容。所以,它是扎根于设计思想根部的概念。

极简主义起源于苏格兰,当时在各个文化领域都掀起了极简的风潮:平面设计、建筑、音乐、文学、绘画等。直到现在,也开始在网页设计中盛行。

尽管极简设计风格在十年间并未得以足够的关注度,早先的互联网领域中根本看不到它的影子,样式复杂的LOGO和广告,艳丽的色彩……网页设计一直以来都以臃肿繁杂的形象出现。

少即是多

前已提及,极简风格是直截了当地展示主题,减少对观者的视觉干扰。如果一个页面有太多的元素,用户就会在众多的元素中,由于无法决定其主次而陷入混乱。一个优秀的极简设计势必会用不偏不倚的姿态焦距主体内容。

举例来说,一个以黑白灰为主色的网页中,如果出现任何色彩,都会成为视觉焦点。就如下例所示,白色作为底色背景,再加上一点浅色背景,搭配黑色文字,同时有相应配图,配图的色彩表现集中在模特的服饰上,这很好的突显了服装品牌这一焦点。

网页设计中的极简风格—无的力量

这一种设计风格就让用户焦距到服装本身的质地、色彩、样式上,从而轻而易举锁定了用户的注意力。而与此同时,在服装本身以外不再增加任何的装饰和元素,除了主体结构再无其他。

怎样简化内容

首先对于网页所展示的内容,设计师要有一个清晰的认知。先将网页上所需要出现的元素列出清单,再从中进行逐次审视是否有出现的必要,是否需要去除。

这是一份我认为可能需要思考是否应该不予出场的元素清单。

  • 社交媒体的图标
  • 标语和详细介绍
  • 目前流行的一些比较引人耳目的元素(比如分享和赞等)
  • 一个页面多出三个部分以外的部分
  • 导航中的次级元素

当然,这并不是一个框架,你当然需要考虑如果有必要时也不能统统删除而后快。主页出现的部分元素都可以放到二级页面里。毕竟如果主页信息量太大,你的用户也许也会“消化不良”。

这样精简以后的结果是,也许你的网站的功能性相比弱化了一些,但删减了多余的元素,使之成为一个更为简化的布局,这让用户可以在你的网站停留时间更长一点。而让用户成为愿意为之学习的网站。

 怎样简化设计

你需要不断简化任何出现的元素,让纹理消失直至不见、更少颜色、更简单的造型……总而言之,这一系列的处理过程的确让你的设计变得有些平淡了。但这时你要记住,不要偏离了极简的方向,你可以把设计集中到焦点内容上,让焦点内容成为唯一重要的视觉核心。使用一些创造性的技巧来处理细节。

使用优雅的线框

大家都知道,使用线框能让你的设计看上去更“稳固”,因为你的眼力其实超乎你想象的好用,它甚至会记得每一段间隔每一个交点,所以任何破坏视觉平衡的元素都会格外突兀,这时你的直觉只会告诉你“感觉不对”。但这其实就是没有运用好线框的结果。

一个合适的线框图是极简设计致胜前提。你可以运用它获得合适的比例,创造出有趣的视觉平衡。

你可以在设计伊始就用2B铅笔在草稿上画出你的页面布局和元素样式。

网页设计中的极简风格—无的力量

在画线框时,你需要遵循下面的顺序

  1. 决定你的网页中需要出现的元素
  2. 对元素之间,按优先次序进行排序
  3. 画出线框草图并试着去达到最佳的布局视觉效果

留白

在我眼中,留白是一种设计素材。留白并不等同于极简,但它与极简设计有着千丝万缕的联系。

不管你多么有创意,一个极简设计如果没有足够留白,那么也将是失败的。所以,在设计时,你要考虑每个元素的周围都有足够多的留白空间。

网页设计中的极简风格—无的力量

例如上面这个网页主页中的LOGO部分周围的大量留白,让LOGO本身得到直观的展示。

让简单成为习惯

我们不可否认,我们有一种自我膨胀的恶习。设计中,不知不觉就会增加过多的东西,因为你的脑海中一直浮现一种想要“完美”它的欲望。鉴于此,我们必须要让自己从这个习惯中摆脱出来形成另一个良好的习惯。

如果你在设计中陷入了盲区,总觉得不对劲“仿佛缺了点什么”的话,这时,与其纠结于给页面增加更多的元素,不如想想怎样让页面减少更多的元素。

最后,当你对设计已经满意后,再看看是否仍然可以进一步简化设计。就像给树苗修剪枝叶一样的耐心。

网页设计中极简范式

黑白灰:色彩禁欲主义

网页设计中的极简风格—无的力量

黑白灰的大气让人难忘,虽然是信手拈来的设计道理,但放到实践中,设计师往往需要更多的勇气做这样的设计。因为做这类设计的风险太大,不小心就会让设计变得死气沉沉一片荒芜,带给观者负面的感受。如上图中以黑色为背景就需要严格与网站的内容契合,表现出黑色的“酷”。同时,元素的编排也必须不拘一格,比如将人物置最前,文字放于背景之上,黑白的搭配顿显时尚感。

线形插画:形魅力

网页设计中的极简风格—无的力量

灰色的背景上只用白色作为前景色,首页的焦点是中心位置的线性插画,这是品牌展示的一种最为直观的方式。而运用一定的投影效果,让插画仿佛悬浮在半空中则是增加了一些创造性的细节,这就让画面活跃起来,不会陷入一片荒芜当之中。

字母:形的构思

网页设计中的极简风格—无的力量

字母本身的造型就是一副完美的构图,加上文字本身所具有一定的含义,融合一身,就会让画面变成双向发声。所以,重新缩小或放大文字,让文字成为画面的焦点用以传达品牌形象,这种方式在极简的网站中很容易做到。如本例中可以将文字的背景作为创意扩展的部分,让鼠标移动时出现不同的渐变色背景,这些渐变色色彩都倾向鲜艳,而这里极好地点缀了文字本身的美感。而中文相比英文更为复杂,想要把文字也变为对形态的焦距,就需要将中文改为在形态上较为突出的字体,例如书法字体等。如下图所示。

网页设计中的极简风格—无的力量

摄影:用图讲故事

网页设计中的极简风格—无的力量

用一张高清的摄影作品作为背景,也是网页中极简设计的常用方法。这幅摄影作品本身就是极简风格的,让品牌故事隐藏于照片中。照片的写实程度无能出其左右,而本身的风格就必须要明显地突出主题。这时文字的出现是为解释说明的作用,你可以在你的设计中加以删减或增加。

网页设计中的极简风格—无的力量

你还可以像上图示例那样让图片和文字展示出各种有趣的组合样式,这时必须要考虑文字和图片的结合,千万不要用一张和文字内容毫不相干的图片。

极简设计的适用场合

就像大家所知,极简设计由于内容展示较少,在目前商业应用中还不太广泛,大多用在小型创意领域机构的官网较多。当涉及营销时,由于营销的目的就是最短时间推送最丰富全面的信息给用户,因此一般的商城都不会让自己看上去太轻松。虽然这样说,但我们在设计商城的时候也注意到,目前已经有设计师开始利用这种简化的风格设计商城,做出不一样的细目更深化的小型商城。这类商城的产品也针对的是较高端的用户,比如时装行业里的网站,可以不妨一试这样的设计风格。如下例所示。

网页设计中的极简风格—无的力量

网页设计中的极简风格—无的力量

网页设计中的极简风格—无的力量

可以看到所有的信息都被浓缩了,产品展示让人一目了然。我认为这是一个进步,不论是审美方面还是营销影响方面都让产品和用户的距离更近了一步。

后记

我认为极简的设计才是未来派,以突出主题展示的设计思路本身就是设计师应该执行的思维。无论设计的是什么,都要拷问设计的目的,因此对主体内容的精简优化是提高沟通效率的一种极为有效的方式。这从未来来说,也是不可逆之一。

 

作者:UIdesign飞屋睿

原文链接:http://www.jianshu.com/p/33c3ca58a210#

本文由 @UIdesign飞屋睿 授权发布于人人都是产品经理,未经作者许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/29690/

logoUI产品产品经理分享图标字体极简主义极简设计沟通用户素材线框图网页设计视觉设计设计师设计思想转载
赞 (0)
CatherineCatherine
0
生成海报
不扁平的设计:我们的世界没有一处是光滑和平整的
上一篇 2017-05-25 08:33
最浓缩的概念:一句话明确UI本质,区别真伪UI
下一篇 2017-05-25 11:58

相关推荐

  • 译文|用户体验的秘诀是什么? 交互设计

    译文|用户体验的秘诀是什么?

    我常被问到的问题之一是:“你在用户体验过程中的思维是怎么样的”或者“如何你如何把用户的个人资料转化成可以有形的事物,比如说‘界面’”。

    2017-05-28
  • UE网国内首发:Axure APP:Axshare APP下载地址非google play Axure

    UE网国内首发:Axure APP:Axshare APP下载地址非google play

    很多童鞋反应googleplay下载不下来,我们发布在 UE社区 以后各种新的东东想第一时间知道欢迎安装我们的UE小组APP 请需要的同学尝鲜下载。 http://www.iamue.cn/read.php?tid=16&fid=2 不过阿西这里要提醒下,这…

    2015-05-25
  • 移动端用户体验:底部导航 交互设计

    移动端用户体验:底部导航

    把最重要最常用的操作放在屏幕底部非常重要,因为它们能用一只手指轻松触及。

    2016-10-30
  • 设计原则中的5种信息组织方式 交互设计

    设计原则中的5种信息组织方式

    要以用户能够轻松使用和理解的方式组织信息。用数据来回答用户的疑问。以更贴合用户目标的方式来呈现信息,就能创造出更好用的产品。“信息或许是无限的,但是……组织信息的方式是有限的,因为它们只能通过LATCH原则来组织:位置(Location)、字母表(Alphabet)、时间(Time)、分类(Category)、层次(Hierarchy)。”——Wurman, 1996“我做了太多次尝试,试图用某种其他方式来组织信息,但最终都会回归这5种之一。”——Wurman, 1996比如说,设计一套特别的服务时,我们应该考虑不同物品的位置关系,它们如何分布。超市货架的设计就是很好的例子,在物理空间中组织信息。比如字典和通讯录,无论是虚拟的还是物理的。举例:日历和会议日程、邮箱收件箱、项目计划、有趣的Facebook时间线、电商平台的订单列表、消息应用,还有许多。这种信息组织方式充斥着真实世界和虚拟世界。从购物与工业,到Pinterest上的分类和Twitter的标签。例如:从小到大,从低到高,从开心到不开心等等。给服务和产品标星打分、计分表、能效等级、尺寸等等。

    2017-08-04
  • 微信热点

    用户体验对于SEO而言有多重要?

    用户体验对于SEO而言有多重要?SEO优化无论是针对资讯类的门户站,还是原创文章的撰写,都是非常重要的,SEO优化能够帮助网站更合理的定位,能够更好的展现在最重要、最关键用户体验对于SEO而言有多重要?SEO优化无论是针对资讯类的门户站,还是原创文章的撰写,都是非常重要的,SEO优化能够帮助网站更合理的定位,能够更好的展现在最重要、最关键的位置,也是现在最具潜力的网络营销方式之一。我们先来了解一下:在百度算法中,如何判定一个页面是否有价...

    2018-02-28
  • Material Design UI质感设计动画交互设计欣赏

    质感设计(Material Design),是谷歌推出的设计语言,可以在用户界面产生动画,并且动画都是仿照真实的物理世界所产生,而且这套设计语言是跨平台和设备的。简而言之,质感设计是一种简单的方法创建很快的应用程序…

    IxD案例 2015-11-16
  • 深度 | 量化用户体验并有效执行的关键几步 交互设计

    深度 | 量化用户体验并有效执行的关键几步

    回归到商业常识产品与服务才是长久之道,过度的营销在这个传播过剩的环境中反而容易引起用户的对抗。

    2017-05-21
  • 微信热点

    【竞赛结果】2017 年度UA创作奖 · 概念设计国际竞赛最终结果

    来源:城市建筑竞赛题目:UA城的滨水居住建筑2017年度UA创作奖•概念设计国际竞赛由《城市建筑》杂志社主办,哈尔滨工业大学建筑设计研究院承办。组委会于2017年11月发布竞赛题目,共收到672个团队的注册参赛信息,至2018年1月15日止,共收取375份作品。本届竞赛评审分初审、通讯评审、现场评审、网络公示、评审委员会复议等阶段进行。初审遴选出362份有效参赛作品,其中前8所通过全国高等学校建筑学专业教育评估的学校学生报送作品63份,...

    2018-03-27
  • 微信热点

    交互设计工作流程6步走

    点击信息与交互设计关注我们!欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cn经常有人会问交互设计到底是做什么的?交互在工作中的流程是什么样子的?那么今天就来讲讲交互设计在工作项目中需要做哪些工作。这里结合笔者本身的个人经历,将交互工作流程总结为以下6点:1、发现问题这里的发现问题,主要是找到一些体验不合理或者未达到预期效果的地方。发现问题的方式有很多,在实际项目工作中,可能大部分的问题反馈来源于客服或者产品需求,这里交互更...

    2018-01-30
  • 产品原型设计之交互体验的思考过程(一) 交互设计

    产品原型设计之交互体验的思考过程(一)

    我有两种方式 来建立这种认识。
    简单而迅速的方式是用一句话把它写出来,包括我要设计什么,要遵循哪几条设计规则,尽量使用最简单的术语。然后,在面对设计功能对照表而犹豫不决时,我就会暂时停下来,问我自己:“做这个表是为了什么?”这个描述是我判断设计是否简单的基准。在做一些比较小的设计(大型网络中的一个页面)或者在我多多少少了解到设计背景的情况下,这种方式都是很奏效的。
    更好而花费时间更长的方式是描述我希望用户拥有什么样的体验。具体一点说,就是描述用户的使用背景,以及我的设计怎么满足用户在该情下的需求。在设计一些大型啊项目时(比如整个网站或者移动设备),这种方式很适合,因为我这种方式可以让我深入透彻地考虑到每一个细节。

    2017-05-23
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress