从拟物到简约 ------谈网站设计风格的变革

哪种设计才是好的设计?其实,每种设计都有其优势也会有其不足。关键在其应用场合,以及是否能够向用户传递有效的价值。武断地决定是否采用某种技术或者不思考其能否取悦用户的设计不是好设计。好的设计不应当局限于某种设计风格,而需要更注重可用性、有用性。

之前最为流行的是skeuomorphic设计(软件界面设计模仿实物纹理),最为典型的就是苹果IOS系统中拟物化的设计。适当的Skeuomorphic设计也非常有用,比如OS
X的废纸篓。iOS 6系统中的Passbook应用在删除项目时,会有碎纸机的效果,这也是一种加强用户理解的好方法。而每个水滴,每个圆角给人的是一种艺术的美感。可以说在苹果风靡世界的这几年,拟物化的设计是起到非常大的作用的。苹果的这种设计到今天为止还作为广告设计师们教科书般的经典而受到膜拜和仿照。苹果的网站给人的印象总是简约而精致的。内容不会很大,但是每个细节打造得近乎完美。之所以说完美,就是在于每个小角落都是基于拟物化的设计,把光与影的变化之美体现得淋漓尽致。更重要的是,以为拟物,所以让用户得到足够的心理暗示,产品的亲和力得到大大的提升。对于计算机专业人员这个的差异也许可以忽略不计,但是对于一个艺术家,或者对于一个只有初中文化的老人来说,这一小点的差异,也许会决定用与不用这关键性的一大步。

随着移动互联网时代的到来以简洁为中心的扁平化设计渐渐流行起来。核心的地方就是放弃一切装饰3D效果。所有的元素的边界都干净利落,没有任何羽化,渐变,或者阴影。

尤其在手机上,更少的按钮和选项使得界面干净整齐,使用起来格外简洁。

更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生。2010年,Windows
Mobile的Metro UI可以算是扁平化设计的鼻祖。Microsoft不愧为扁平化用户体验开拓者。随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸,创建多个屏幕尺寸和分辨率的设计既繁琐又费时。你可以一次保证在所有的屏幕尺寸上它会很好看。扁平化设计更简约,条理清晰,最重要的一点是,更好的适应性。

扁平化设计的5大特点

1)拒绝特效。采用二维元素。所有元素都不加修饰

2)仅使用简单的元素。为了同时达到简单但直观的效果,你可以尝试为按钮填充深色,以鼓励用户点击。简单的元素并不意味着设计起来很简单。相反,用简单的元素来表达复杂更需要巧妙的构思

3)注重排版。排版的目的在于帮助用户理解设计。字体的大小应该匹配整体设计。字体选择上可以使用简单的无衬线字体,通过字体大小和比重来区分元素。字形上可以应该使用粗体

4)关注色彩。扁平化设计的网站、应用色彩明显要更加鲜艳、明亮。此外扁平化设计的项目也拥有更多的色调。一般的6-8种颜色。色彩更纯。其主要、次要颜色通常都是非常大众化的颜色,然后再配以几种其它颜色。扁平化设计的另一个趋势在于复古颜色的使用——浅澄色、紫色、绿色、蓝色——都极为流行。

5)极简主义。该驱除任何无关元素,尽可能地仅使用简单的颜色与文本。移动互联网时代的用户习惯小而美的产品,一个应用如果让用户的点击超过三个层级,用户会非常反感。

另外,现在还有一种“准”扁平化设计比较流行。只留一种特效。如阴影,梯度,深度,纹理等。因为它能有助于直观的交互。如bootstrap。但是也有缺点,,因为“准”扁平风格是另两种风格的混合体,缺乏明确的定义,所以更难用好。

目前为什么扁平化设计的风头更甚。这个和现在多终端的现实是密不可分的。但从真实感而言,skeuomorphic设计无疑是最棒的。但是在一定的框框架架之下,扁平化设计一定是有其成长空间的,当然skeuomorphic设计也不必担心,英雄无用武之地。这个就跟国画中的工笔和写意之分。使用场合不同罢了。用心揣摩,集2种设计方法之长处,立足于设计对象的要求,立足于用户的体验,这个才是根本。

时间: 2024-08-26 06:04:20

从拟物到简约 ------谈网站设计风格的变革的相关文章

简单高效!25个漂亮的简约风格网站设计作品

在过去几年里,网站设计领域发生了巨大变化.除了 RWD(响应式网页设计)和 Web 字体的革命,现代设计的发展趋势迅速流行扁平化的配色方案,网页排版变得更加重要,重点已放在内容第一.最后,页面加载速度已成为决定你的网站成功的关键因素. 所有这一切都导致了整洁美观和简单易用网页设计趋势的流行.所以,经过这些年的尝试和努力后,我们已经真正进入到了简洁干净的网页设计的时代.下面选择了25个简约干净的网站,具备我们上面提到的所有因素,他们都以自己的方式来呈现美丽,你有什么感想? 您可能感兴趣的相关文章

浅谈网站优化六步骤

1.分析关键词 这是进行SEO最重要的一环,关键词分析包括:关键词关注量分析.竞争对手分析.关键词与网站相关性分析.关键词部署.关键词排名预测. 2.网站架构分析 网站结构符合搜索引擎的蜘蛛喜好则有利于SEO.其中网站架构分析包括:剔除网站架构不友好设计.尽量使用树状目录结构.网站导航与链接优化. 2.关键词布局 SEO不仅仅只让网站首页在搜索引擎有好的排名,更为重要的是让网站的每个页面都带来一定流量.所以我们要为每个页面单独建设独一无二的页面主题(title,description)以及页面正

拟物设计和Angular的实现 - Material Design (持续更新)

原文:拟物设计和Angular的实现 Material Design是Google最新发布的跨平台统一视觉设计语言.直接翻译是物质设计,但是我更倾向于使用"拟物设计"更为准确. 据谷歌介绍,Material Design基于"真实的触感,灵感源自对纸和墨水的研究," 能够让用户 "理解那些用于替代真实世界的可视线索,""而又不违背力学原理."另外,光线.表面和移动的基本原理是表现对象如何移动.交互和相互关联地存在于空间中的关键

张节潭谈网站的推广和盈利模式

2004年,28商机网张节潭自主产品线成功运营.这标志着28商机网由单一代理公司向具有自主产品线公司的成功转型.这一联展式的运营模式一经推出就被同行业其他企业争相效仿.目前,28商机网张节潭已经发展成为业界唯一一家能为客户提供产品策划.产品运营.产品包装.产品宣传一条龙服务的网络广告公司,成为整个互联网行业公认的招商门户. 二是代理各类网站的硬板广告.其中,以独家代理国内几大门户黄金位置的硬板广告为拳头产品.28商机网张节潭广告公司经过几年的发展,媒体采购策略也日臻成熟.我们走过了"广撒网&qu

浅谈网站架构演变

浅谈网站架构 作为一个从事后台开发已经2年的程序员来讲,大部分时间都忙于业务逻辑分析,往往忽略了业务之上的架构层面的设计. 本文作为网站架构知识的补充,不仅开拓了眼界,也对以后的程序设计益处多多.下面我们就一起来看看网站架构的演变历史. 网站架构的演变大致分为如下几个阶段: 1 初始阶段的网站架构 网站在最初开始时没有太多人访问,用一台服务器就完全可以胜任,此时的网站架构如下图所示. 应用程序,文件存储,数据库所有的资源都在一台服务器上.也就是经典的LAMP架构模型(Linux操作系统+部署在A

浅谈网站为什么还需要检查和监控?

我们通常认为,攻击不存在会不会发生的问题,只存在何时发生,如何发生的问题.针对攻击事件,通过技术平台,尽早发现攻击,减少攻击造成的损失.才会使我们在面对攻击时能够做到工作有条不紊,及时有效应对.过去,安全事件响应的时间往往是在攻击已经发生后较长时间,通过外部扩散造成负面影响后,才得到修复,造成的影响已无法挽回. 一,部署安全设备的政府网站为什么还需要检查 因为网站大检查常态化趋势,监管部门监测任务日趋繁琐.一方面是因为网络安全的形式日益严峻,网站所面临的攻击越来越多,而且互联网服务平台也越来越多

浅谈网站标题或关键词在上线时发现错误如何修正

或许部分站长看到这个文章标题都会感觉到不可思议吧,其实网站在上线的时候由于心急.疏忽等等原因导致标题与关键词出错的现象一直存在,而如何去修正这个错误才是关键,下面来具体的谈谈如果一个网站在上线的时候标题或者关键词选择错误如何修正这个问题. 网站首页.内页.外链等等都没有的时候 假如你的网站提交收录了,但是网站的首页.内页与外链都没有的时候,这个时候发现网站的标题或者关键词出现错误,最佳的解决办法就是直接在模板或者后台中进行修改网站的标题与关键词,这是最佳的方法,方便又快捷,不会影响到网站的任何地

从世界五百强及中国五百强企业网站设计风格看当前WEB设计潮流

公司网站改版的工作进行好久了,改版几次也没有最终确定,各级领导各有各的眼光和看法,导致这个本来并不大的项目迟迟也没什么进展.以往也做过些设计.图片之类,特被要求提出些风格改进建议.搜了世界五百强的网站和中国五百强企业的网站,从中挑选了些符合公司未来风格并且国际化.大气的一些作为参考. 总的说来,现在的网站设计更灵活,由于显示器的变大,加上网络带宽的拓宽,当前设计的网站更多的突出图片的美感和宽画幅显示,产品类的介绍更是倾向于一平显示一个主题图片,不再像以往用表表框框来限制了设计的自由. 个人的一点

浅谈网站旁注入侵思路及需要的条件

什么叫旁注旁注:顾名思义就是从旁注入,也就是利用主机上面的一个虚拟站点进行渗透.得到我们所要得到一个重要关节webshell之后,再利用主机的开放的程序以及一些非安全设置进行的跨站式入侵方法. 旁注的过程: 1.利用工具或者网站WHOIS你所要攻击的目标资料,得到关于网站的域名注册信息以及主机是否是虚拟主机的确定,因为这样子才可以从旁注入. 2.看服务器上面的所有网站程序,要理解熟悉每个程序的编写以及程序的功能(可以整天去源码站看源码,这样子你就会懂得如何去分别程序了) 3.利用现在所流行的所有