网页设计一致性:设计风格与品牌形象视觉和交互

文章描述:网页设计的目标是将网页和用户连结,通过设计(顺手的导航、流畅的交互)让用户对网站产生信任。尽管网页设计以功能性为主,但依然可以为用户提供优良的用户体验。

网页设计的要点之一便是一致性,设计师首先需要了解一致性,然后再致力于构建页面元素之间的联系。
网页设计的目标是将网页和用户连结,通过设计(顺手的导航、流畅的交互)让用户对网站产生信任。尽管网页设计以功能性为主,但依然可以为用户提供优良的用户体验。

客户,用户以及一致性:

具备一致性特质的网页能够帮助推广品牌、清晰传递信息。客户在意的是设计能否有效传达他们的品牌、信息,在意设计是否能够在消费者中建立一种对品牌的信任感。
如果品牌信息传递的不够一致、或者晦涩难懂,那么消费者很难对品牌产生信任感,这就影响到了客户的销售额和业绩。

一致性与设计师个人推广:

作为设计师,你自己就是一个品牌,你需要仔细思量一下该要如何打造一致性的”个人品牌”。如果你的个人博客设计的风格一致,分量充足,案例丰富,那么客户很容易就找上门来。

简要概括一致性:

布局井然有序,主页面、子页面有章可循,配色方案自成体系,交互方式统一协调,与内容深度联系————这就是一致性。

gov.uk 的网页设计非常一致,让人感觉很严谨,配色也非常的坚实,这很符合政府类网站的形象。

一致性设计的关键

设计风格与品牌形象的一致性:

网络是新媒体,但设计模式并非全新,别忘了,曾经的网页设计还要遵循印刷设计中的一些规则(现在依然深受影响)。好的设计师能够将网络新形式与传统无缝结合。也就是说,某些地方要做到有所联系。

例如,如果你要为传统的商城设计一款网站,那么网页必须能够起到承载品牌信息的作用,而且操作流畅,界面清爽。

其次,还要保证跟现实生活中的品牌形象有所联系。(这样即便用户没有浏览过该品牌的网站,看了你的设计后也会想,”啊,这是某某品牌的网站。”)

还是那句老话,坚实的信任感,这就是目标。

视觉的一致性:

你的边距,各种元素的尺寸、大小是否设计的一致?
仔细想来,一致性设计会极大的改善我们的设计流程,缩短设计周期。因为设计有一套规范,有章可循自然设计起来得心应手。

交互的一致性:

除了外观上的考量,在”交互”和”行为”上也要下功夫设计。仔细琢磨琢磨,用户应该如何与网页进行交互?用户进行输入时会呈现何种动态效果?各个页面中的交互性也应当保持一致。

inc 洁净的感觉和品牌风格不谋而合。

怎样设计出”一致性”?

说起来容易做起来难,如何打造一致性设计呢?如何让视觉形象成为联系用户与品牌的纽带?

其实上面说的大都是较为空泛的理念,我们设计师真正能够把握的,也无非这几点:

色彩 (主色、配色方案的选择)
视觉元素 (图像,照片, 图标, 按钮的整体风格)
字体 (大小, 排列)
尺寸 (内容尺寸,图像尺寸, 间距大小)

还记得向莎士比亚学习!你值得掌握的网页设计焦点法 这篇文章吗?里面提到过,利用色彩、尺寸、视觉层级可以打造出视觉焦点。同样还是这些东西,这次利用他们打造出网页设计的一致性。

优秀的体验设计来自于对细节的追求。我们格外的需要在这些小细节上下功夫。

设计时也要考虑不同页面之间的一致性,尽管功能不同,但是要大体上(也就是说可以略有变通)保持不同页面之间视觉风格的一致——比如说,Logo和导航的位置。

OnSite 这款网页设计打造出令人印象深刻的品牌形象,扁平化设计贯穿于主页面和子页面,风格大体上相同。

具备一致性之后的进阶

大胆用色

色彩的情绪效应想必大家都知道了,大胆的色彩能够有效的吸引用户。

但是要注意,一定要注意色彩与品牌间的联系。例如,今年极为流行翡翠绿,可是你用翡翠绿为主色给可口可乐设计网页,就有点不合适了吧?

彰显个性

任何设计都有自己的基调,设计的基调影响了用户对网页的印象。在保持一致性的前提加入一点个性化是非常不错的想法,能够提高内容的表现力。

再想想,某些网站虽然具备一致性,但是风格死板,让用户感到非常的无趣。如果网页设计的很鲜活,很个性化,而且联系紧密,用户首先会感觉非常有趣,其次会想,”嗯,这个网页的风格还挺一致的。”(不要为了一致性而死钻牛角尖,还要从更整体的角度看待设计。)

充分考虑用户预期

同时也要考虑到用户的预期,仔细思考下网页是如何与用户连结的,考虑下用户对网站的感觉。
跟上面一样,不要一味的炮制一致性而忘乎所以,要考虑到用户,以用户为中心进行设计

WooThemes 视觉风格突出,设计基调很棒——这种较大型的网站保持一致性很困难,很不好设计。

检查

我是个列表狂魔,我觉得列表有个好处:让事情变得更有条理,工作起来循序渐进。(不过这也导致了条数太多,从而略有拖延……总之还是利大于弊的)

嗯,这次列出了一份比较简单的列表,设计完后可以看一下。

1.字体:检查字体是否与整体风格相符。不同页面的垂直阅读节奏是否一致?
2.图像:图标、图像的视觉风格以及尺寸是否大体一致?和整体风格有冲突吗?按钮的风格统一吗,是填充式的还是中空式的?
3.色彩:整体色彩感看起来如何?配色风格一致吗?不同颜色之间搭配协调吗?
4.布局:顶部导航和Logo的位置是否相同?行间距、文字与图像的间距是否一致?整体布局都相似吗?

当然,你也可以设计之前看看这份列表,不过我觉得会影响设计思路。

结论

理解一致性原则并加以运用,需要一定的设计基础。

就像学习一套拳法需要动作分解一样,设计师首先要熟练掌握每个”小”元素的设计方法,然后再加以整合,形成”大”层次上的一致性。

希望上面的内容会对你有所帮助,希望你在设计时能够用到上面那份列表(也可以自己写份列表),设计时心中要有”一致性”的理念,日积月累,你会发现自己的成长。

时间: 2024-08-22 14:30:33

网页设计一致性:设计风格与品牌形象视觉和交互的相关文章

网页设计理论:网页设计风格

文:Jeffrey Zeldman 我的父亲是个业余画家,我的童年就是被他的那些美术书籍塑造的.跟很多小孩一样,我对「纯粹的再现」十分着迷.那些巨细无遗的版画--搏斗中的角斗士,风景如画的村庄,日出时的罗马废墟--每每让我瞠目结舌.口不能言.当时我对艺术的理解就是「画功好」.在那年幼而懵懂的日子里,细节越丰富.蚀刻的线条越密集.树叶越多,这艺术家就越棒.稍后我邂逅了漫画,再往后是美术馆.麦菲·派瑞(Maxfield Parrish)让我想嗑药,也让我明白自己永远当不了画家.保罗·克利(Paul

网页设计的视觉流程

网页是通过视觉元素的引人注目而实现信息内容的传达,为了使网页获得最大的视觉传达功能,使网络真正成为可读强性而且新颖的媒体,网页的设计必须适应人们视觉流向的心理和生理的特点,由此确定各种视觉构成元素之间的关系和秩序.因此,设计时应该研究各种视觉造型元素之间的距离.位置.面积和视觉流程的问题. 视觉流程的形成是由人类的视觉特性所决定的.因为人眼晶体结构的生理构造,只能产生一个焦点,而不能同时把视线停留在两处或两处以上的地方.人们在阅读一种信息时,视觉总有一种自然的流动习惯,先看什么,后看什么,再看什

网页设计六步走

设计|网页|网页设计  在网页设计的认识上,许多人似乎仍停留在网页制作的高度上.认为只要用好了网页制作软件,就能搞好网页设计了.    其实网页设计是一个感性思考与理性分析相结合的复杂过程,它的方向取决于设计的任务,它的实现依赖于网页的制作.正所谓"功夫在诗外",网页设计中最重要的东西,并非在软件应用上,而是在我们对网页设计理解以及设计制作水平上,在于我们自身美感以及对页面把握上. 首先,我们要弄清楚网页设计的任务. 一.设计的任务     设计是一种审美活动,成功的设计作品一般都很艺

网页设计技巧:设计精美网页图标技巧

文章描述:满足四大要素!让网页设计中图标更有吸引力. 图标在网页设计中用途广泛,几乎每个网站中都存在着图标.通过这些小小的图标,可以方便的实现视觉引导和功能划分.如果选用恰当,图标能和页面中的图片有机融合,保持视觉上的一致性,同时也能够和整个网站的风格相契合.图标并不是华而不实的小玩意儿,小图标有大用处.在网页设计中,如果设计师并不擅长图标设计,那么就需要在图标选择上下功夫了. 一般来说,根据使用手法.使用场合的不同,一张图像可以有多种解读,图标亦如此.图标不但能够吸引用户的注意力,还能分割页面

从零开始教你打造网页设计中的极简风格

  什么是极简设计 极简设计,严格上讲不能算作一种视觉风格,而是一种设计哲学.它在保持了基本的骨架内容的基础上,剔除掉多余的元素.装饰.色彩和纹理,是通过不断思考而进行化繁为简的设计过程.这样做的结果是突显了主题内容.所以,它是扎根于设计思想根部的概念. 极简主义起源于苏格兰,当时在各个文化领域都掀起了极简的风潮:平面设计.建筑.音乐.文学.绘画等.直到现在,也开始在网页设计中盛行. 尽管极简设计风格在十年间并未得以足够的关注度,早先的互联网领域中根本看不到它的影子,样式复杂的LOGO和广告,艳

Dreamweaver如何进行网页设计

在网页设计的认识上,许多人似乎仍停留在网页制作的高度上.认为只要用好了网页制作软件,就能搞好网页设计了-- 在网页设计的认识上,许多人似乎仍停留在网页制作的高度上.认为只要用好了网页制作软件,就能搞好网页设计了. 其实网页设计是一个感性思考与理性分析相结合的复杂的过程,它的方向取决于设计的任务,它的实现依赖于网页的制作.正所谓"功夫在诗外",网页设计中最重要的东西,并非在软件的应用上,而是在我们对网页设计的理解以及设计制作的水平上,在于我们自身的美感以及对页面的把握上. 首先,我们要弄

聊聊网页设计中五大「金科玉律」

  从字体设计.制图到页面版式,设计总有那么几条通用的原则,它适用于网页或者印刷.然而,在网页设计这边,很多本应该有的规则都被搞乱了,就只是跟着感觉走.这并不是说设计师在规则方面有松懈,而是大多数网络工作者都不知道要遵守这些规则--就算他们知道,也不知道怎么去用. 结合网页讲,就是以下几条: 平 衡 平衡感挺难拿捏的.网页上呈现出的平衡有两种--对称和不对称.我们都很习惯了看对称的图片,就像我们小时候剪纸花,都会两边一起剪,这样打开就是对称化的.这种对称的平衡很好识别(反正都镜面反射一下),而在

网页设计理论:对比和等同

  等同和对比,联系与分别,归类和不归类等都是能将元素中相同或不同的元素加以区别的方式.基于它们所承载的信息,我们希望等同的元素能发生某种联系,用以表明它们在某一方面的相似性.我们同样也希望不同的元素加以区分,以显示它们分属不同的类别. 等同和对比是通过元素之间所呈现的关系表现出来的,如果两个元素有着某种联系,可以确定这两个元素必定有相同的特性.当然,两个不同元素也必定看上去不同. 基础特性 你是如何表达元素间的等同和对比性的?是的,从它们的基础特性中表现出来. 那么,什么是元素的基础特性呢?基

网页设计中的对称与不对称

  小时候,很喜欢蝴蝶,感觉这是大自然最神奇的赋予,当它们双翼张开,总是禁不住欣赏它们那种美丽的优雅以及多姿的色彩. 更重要的是,这种天生的对称感,美得令人窒息. 对称风格 完形主义--一种人类行为理论,描述了人类排列视觉数据的思维结构--认为人类会很自然的把看到的东西按顺序排列. 换句话说,我们的眼睛倾向于捕捉那些组织有序.风格圆满的视觉元素.这也就是我们所谓的对称感.对称风格的物体有一种天生的平衡感.优雅感,对称在设计中能体现出一致.有序.稳定的特质.很多知名品牌都采用了对称式设计,虽然不是