童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

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

6月26日 牵手手投稿
  作为设计师,我们都知道极简的设计效果的确非常出彩。然而,在设计过程中,我们往往会由于使用较少元素而感觉缺了什么,或是让最终成品看起来仿佛没有完成。
  那么什么是极简设计?又是什么方法使你的设计看起来简约又不简单呢?这篇文章也许会帮到你。
  什么是极简设计
  极简设计,严格上讲不能算作一种视觉风格,而是一种设计哲学。它在保持了基本的骨架内容的基础上,剔除掉多余的元素、装饰、色彩和纹理,是通过不断思考而进行化繁为简的设计过程。这样做的结果是突显了主题内容。所以,它是扎根于设计思想根部的概念。
  极简主义起源于苏格兰,当时在各个文化领域都掀起了极简的风潮:平面设计、建筑、音乐、文学、绘画等。直到现在,也开始在网页设计中盛行。
  尽管极简设计风格在十年间并未得以足够的关注度,早先的互联网领域中根本看不到它的影子,样式复杂的LOGO和广告,艳丽的色彩网页设计一直以来都以臃肿繁杂的形象出现。
  少即是多
  前已提及,极简风格是直截了当地展示主题,减少对观者的视觉干扰。如果一个页面有太多的元素,用户就会在众多的元素中,由于无法决定其主次而陷入混乱。一个优秀的极简设计势必会用不偏不倚的姿态焦距主体内容。
  举例来说,一个以黑白灰为主色的网页中,如果出现任何色彩,都会成为视觉焦点。就如下例所示,白色作为底色背景,再加上一点浅色背景,搭配黑色文字,同时有相应配图,配图的色彩表现集中在模特的服饰上,这很好的突显了服装品牌这一焦点。
  这一种设计风格就让用户焦距到服装本身的质地、色彩、样式上,从而轻而易举锁定了用户的注意力。而与此同时,在服装本身以外不再增加任何的装饰和元素,除了主体结构再无其他。
  怎样简化内容
  首先对于网页所展示的内容,设计师要有一个清晰的认知。先将网页上所需要出现的元素列出清单,再从中进行逐次审视是否有出现的必要,是否需要去除。
  这是一份我认为可能需要思考是否应该不予出场的元素清单。
  社交媒体的图标
  标语和详细介绍
  目前流行的一些比较引人耳目的元素(比如分享和赞等)
  一个页面多出三个部分以外的部分
  导航中的次级元素
  当然,这并不是一个框架,你当然需要考虑如果有必要时也不能统统删除而后快。主页出现的部分元素都可以放到二级页面里。毕竟如果主页信息量太大,你的用户也许也会“消化不良”。
  这样精简以后的结果是,也许你的网站的功能性相比弱化了一些,但删减了多余的元素,使之成为一个更为简化的布局,这让用户可以在你的网站停留时间更长一点。而让用户成为愿意为之学习的网站。
  怎样简化设计
  你需要不断简化任何出现的元素,让纹理消失直至不见、更少颜色、更简单的造型总而言之,这一系列的处理过程的确让你的设计变得有些平淡了。但这时你要记住,不要偏离了极简的方向,你可以把设计集中到焦点内容上,让焦点内容成为唯一重要的视觉核心。使用一些创造性的技巧来处理细节。
  使用优雅的线框
  大家都知道,使用线框能让你的设计看上去更“稳固”,因为你的眼力其实超乎你想象的好用,它甚至会记得每一段间隔每一个交点,所以任何破坏视觉平衡的元素都会格外突兀,这时你的直觉只会告诉你“感觉不对”。但这其实就是没有运用好线框的结果。
  一个合适的线框图是极简设计致胜前提。你可以运用它获得合适的比例,创造出有趣的视觉平衡。
  你可以在设计伊始就用2B铅笔在草稿上画出你的页面布局和元素样式。
  在画线框时,你需要遵循下面的顺序
  决定你的网页中需要出现的元素
  对元素之间,按优先次序进行排序
  画出线框草图并试着去达到最佳的布局视觉效果
  留白
  在我眼中,留白是一种设计素材。留白并不等同于极简,但它与极简设计有着千丝万缕的联系。
  不管你多么有创意,一个极简设计如果没有足够留白,那么也将是失败的。所以,在设计时,你要考虑每个元素的周围都有足够多的留白空间。
  例如上面这个网页主页中的LOGO部分周围的大量留白,让LOGO本身得到直观的展示。
  让简单成为习惯
  我们不可否认,我们有一种自我膨胀的恶习。设计中,不知不觉就会增加过多的东西,因为你的脑海中一直浮现一种想要“完美”它的欲望。鉴于此,我们必须要让自己从这个习惯中摆脱出来形成另一个良好的习惯。
  如果你在设计中陷入了盲区,总觉得不对劲“仿佛缺了点什么”的话,这时,与其纠结于给页面增加更多的元素,不如想想怎样让页面减少更多的元素。
  最后,当你对设计已经满意后,再看看是否仍然可以进一步简化设计。就像给树苗修剪枝叶一样的耐心。
  网页设计中极简范式
  黑白灰:色彩禁欲主义
  黑白灰的大气让人难忘,虽然是信手拈来的设计道理,但放到实践中,设计师往往需要更多的勇气做这样的设计。因为做这类设计的风险太大,不小心就会让设计变得死气沉沉一片荒芜,带给观者负面的感受。如上图中以黑色为背景就需要严格与网站的内容契合,表现出黑色的“酷”。同时,元素的编排也必须不拘一格,比如将人物置最前,文字放于背景之上,黑白的搭配顿显时尚感。
  线形插画:形魅力
  灰色的背景上只用白色作为前景色,首页的焦点是中心位置的线性插画,这是品牌展示的一种最为直观的方式。而运用一定的投影效果,让插画仿佛悬浮在半空中则是增加了一些创造性的细节,这就让画面活跃起来,不会陷入一片荒芜当之中。
  字母:形的构思
  字母本身的造型就是一副完美的构图,加上文字本身所具有一定的含义,融合一身,就会让画面变成双向发声。所以,重新缩小或放大文字,让文字成为画面的焦点用以传达品牌形象,这种方式在极简的网站中很容易做到。如本例中可以将文字的背景作为创意扩展的部分,让鼠标移动时出现不同的渐变色背景,这些渐变色色彩都倾向鲜艳,而这里极好地点缀了文字本身的美感。而中文相比英文更为复杂,想要把文字也变为对形态的焦距,就需要将中文改为在形态上较为突出的字体,例如书法字体等。如下图所示。
  摄影:用图讲故事
  用一张高清的摄影作品作为背景,也是网页中极简设计的常用方法。这幅摄影作品本身就是极简风格的,让品牌故事隐藏于照片中。照片的写实程度无能出其左右,而本身的风格就必须要明显地突出主题。这时文字的出现是为解释说明的作用,你可以在你的设计中加以删减或增加。
  你还可以像上图示例那样让图片和文字展示出各种有趣的组合样式,这时必须要考虑文字和图片的结合,千万不要用一张和文字内容毫不相干的图片。
  极简设计的适用场合
  就像大家所知,极简设计由于内容展示较少,在目前商业应用中还不太广泛,大多用在小型创意领域机构的官网较多。当涉及营销时,由于营销的目的就是最短时间推送最丰富全面的信息给用户,因此一般的商城都不会让自己看上去太轻松。虽然这样说,但我们在设计商城的时候也注意到,目前已经有设计师开始利用这种简化的风格设计商城,做出不一样的细目更深化的小型商城。这类商城的产品也针对的是较高端的用户,比如时装行业里的网站,可以不妨一试这样的设计风格。如下例所示。
  可以看到所有的信息都被浓缩了,产品展示让人一目了然。我认为这是一个进步,不论是审美方面还是营销影响方面都让产品和用户的距离更近了一步。
  后记
  我认为极简的设计才是未来派,以突出主题展示的设计思路本身就是设计师应该执行的思维。无论设计的是什么,都要拷问设计的目的,因此对主体内容的精简优化是提高沟通效率的一种极为有效的方式。这从未来来说,也是不可逆之一。
投诉 评论 转载

不扁平的设计:我们的世界没有一处是光滑和平整的如果你点进这篇文章是想听听,我们扯什么下一个取代扁平化设计的视觉设计趋势,那抱歉可能你要失望了我们不想就拟物设计,或者扁平按钮的功能可见性展开激烈的讨论。我们只是尝试为设……网页设计中的极简风格无的力量作为设计师,我们都知道极简的设计效果的确非常出彩。然而,在设计过程中,我们往往会由于使用较少元素而感觉缺了什么,或是让最终成品看起来仿佛没有完成。那么什么是极简设计?又是……SMILEDesign打造价值创新的极致体验每一个创新的方案不可复制,虽然我们都非常希望能提供一个简单易行的创新秘方,以保证每个项目都能成功,但是创新的稀缺性,恰恰决定了每一个成功的创新都是方案都是不可复制的,但其中的很……最浓缩的概念:一句话明确UI本质,区别真伪UI我同意一种观点,成人的知识学习体系最好的其实是慨念性的。因为,我们面对的社会不再是以前学校里老师给方向,让我们去找方法。而是方向我们自己思考自己找,然后针对自己的思考出的方向再……初级用户体验设计师可以向其他合作伙伴学习什么?(前端承接上一篇文章《初级用户体验设计师可以向其他合作伙伴学习什么?(运营PD篇)》,今天写写前端开发们值得我们这些初级用户体验设计师去学习的地方。对边界场景的……搜狐交互设计师:我常用的一套交互设计工具刚开始接触交互设计往往会面临自己的想法找不到合适的方法输出。所以完成基本工作同时也在积极寻找、学习适合自己又和工作环境相匹配的工具。与团队成员配合的时候没有人会在意你是用什么工……同一页面放两个相同的链接:这样的重复是有益还是有害?尽可能消除网页重复性元素,减轻用户认知负担。每一个多余的链接会影响网站的易用性。译者标注:本文的“链接”可指文字链、按钮等可点击功能。经常有人在用户体验大会上问我:……从这几个案例入手,学会设计APP注册流程从注册这点小事儿上看如何提升细节设计和用户体验,希望对一些新入行的童鞋有所帮助。互联时代的产品都离不开:直白点就是什么样的环境下?为哪些人?提供了哪些事情的解决方案……聊下你不知道的交互设计:交互设计师在项目中是如何工作的从事交互设计3年了,经常有朋友和同事问我“到交互到底干嘛的?”答曰:“根据用户的需求及场景,用简单、愉悦的方式完成任务”。但他们似乎还是不太明白。那么交互到底是干什么的呢……设计心理学设计中的防呆设计最近读到设计心理学的再次接触到防呆设计的概念,联系交互设计做一些总结。防呆设计的定义:是一种预防矫正的行为约束手段,运用避免产生错误的限制方法,让操作者不需要花费注意力、……设计理论:人物模型设计和目标设计在自然科学和社会科学中,模型通过有效的抽象来代表复杂的现象。好的模型强调所代表结构的显著特色关系,弱化不太重要的细枝末节。由于我们是为用户而设计的,因此重要的一点就是,要了解这……响应式网页图片库设计的九个注意事项响应式设计无疑是当前网页设计领域当中,不可忽略的必要组成部分。而响应式网页中的图片显示又是老生常谈的问题,许多争论集中在响应式网站的图片应当怎么展示。继续延伸开来,那么响应式网……
人人都是产品经理App体验报告及改进建议图片社交正当时:nice史上最详细产品分析报告(背单词APP竞品分析报告《美团酒店》产品体验报告《快贷》产品体验报告专业的产品分析报告:下厨房竞品分析P2P旅游应用“收留我”产品分析报告阿里旅行去啊产品分析报告zank与blued竞品分析报告P2P网贷APP竞品分析携程周末App产品分析报告美团猫眼电影App产品分析报告

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界