建站咨询: 020-29883069
专业的广州网页设计制作,广州网站建设公司!
设计学堂
设计学堂 动态 首页当前位置:

广州十大网页设计视觉排版技巧

 视觉语言可看做另一种沟通交流的方式。语言涉及口语或书面语的交流,而视觉语言则更进一步,与特定的群体相联系。从颜色到风格再到照片或插图的类型,各种元素构成了一个品牌或公司的形象。这些视觉元素以人们理解的结构化和传统化方式将群体联系在一起。
 

 1.创建配色方案 

优秀的配色方案是用户识别的强大工具。使用一致的品牌颜色来建设网站等其他设计产品,用户能更好的识别出特定品牌。他们不会迷失在浩瀚的网络世界里,因为你已经直观地告诉他们,他们正在与哪个网站或品牌互动。

品牌的配色方案不应该只使用在品牌网站上。它需要被广泛并统一地应用在品牌宣传的活动中,如线上广告、社交媒体、户外广告、包装、名片等。进一步讲,优秀的配色方案能提升品牌价值。想一想麦当劳快餐店线上线下统一的配色方案:黄色和红色。颜色代表幸福(黄色)和饥饿(红色)。

     2. 可信且可靠

视觉语言只有在用户接纳的情况下,才会最大程度地发挥作用,它要给人可靠的感觉。所以,整个视觉语言需要和你的品牌定位、气质表里合一,而不能让设计和产品、企业的气质割裂开来。

你能想象没有主角的芝麻街会是怎样的一种气场么?
整个品牌和视觉形象都是围绕着 Big Bird 和 Elmo 等角色建立起来的,每一个细节的设计都是围绕着这些角色来创建的。注意网站中角色和其他视觉元素之间的映射关系,它们让用户清晰地感知到角色和整体设计之间的关系是表里如一的,这使得整个网站的设计更容易为用户所接受,视觉语言在此发挥了作用。

 

 3.创建排版层级

与你的品牌选择字体同样重要的是如何正确使用它们。字体层次结构为您与用户交谈奠定了基调,如耳语(小字体)或对他们大喊(大字体)。

创建字体层级的诀窍在于,每一层都应该与前一层和后一层有足够的不同,这样就很容易看到文本的变化。有一个独特的字体层级规范,字体的大小和粗细都是标准化的。这种标准化还扩展到配色方案和空间间距,以构建完善的视觉语言。
 

   4. 创建组件库

从按钮、图标再到卡片,你应当创建出一整套可用的、风格一致的UI组件库。

同样功能的控件,在页面不同的地方、或者不同的页面上有着截然不同的风格,是让人迷惑而糟心的。一个好的组件库,应当包含全部常用的UI组件,以及针对 iOS 和 Android 平台所适配之后的UI组件。虽然构建组件库本身的工作量并不小,但是在完成之后,能让后续的工作事半功倍。

 

 5.创建网格系统

  元素的间距和位置与元素本身一样重要。你的视觉形象是清晰而有条理的,还是有点混乱?创建网格系统能优化视觉形象。网格化的版面结构提供了与整个工程团队合作的可能性。从而快速生产出适合所有平台的产品。如果您是从信息流的角度创建概念设计,那么创建网格系统的方法将更加有用。


    6. 建立栅格来规范内容之间的空间关系

视觉元素之间的位置关系,和它们本身的设计是同等重要的。如果你希望整个设计在细节上是清晰明确的,那么栅格会给你想要的。

栅格赋予了UI界面元素以模块化的清晰结构,这使得整个设计团队能在此基础上更好地合作。这使得产品能够快速清晰地输出到不同的平台上。如果你是基于某个想法来构建概念设计,那么这种方法更加实用有效。

简而言之,栅格让视觉呈现的复杂度降低了。


    7. 强调图片的风格和特征

在诸多图形化的元素当中,图片和插画是视觉性最突出的元素,这也是整个视觉语言当中最重要的因素之一,因为它从某种意义上是和品牌关系最紧密的素材。

构成视觉语言涉及到图片素材的方方面面,构图、色彩、滤镜,甚至相关动效的细节。

下面的网页设计,即使它们并不是同期设计也不是服务于相同的功能,但是很明显插画所采用的视觉风格是一致的,并且每幅插画当中都使用了共同的元素:热气球。

这一元素和品牌本身是有着紧密关联的,而用户也可以从这些插画图片的内容,迅速意识到品牌本身的一些概念。

   8. 让视觉和文本内容匹配起来

视觉语言并不是只涉及到视觉元素,文本并不是与之割裂的,在设计的时候,两者需要合理地配合,在体验上达成一致,传达一致的信息。

在下面的这个网站当中,整体设计呈现出非常明显的女性化的特征,文本内容在表达方式和调性上和整体的视觉语言保持着一致,并没有出现两者冲突或者竞争的状况。


    9. 落实到具体标准文档当中

整个视觉语言在构建起来之后,需要保持各方面的一致性,在具体设计的时候,则得有一份详实具体的设计文档供整个设计团队和利益相关人员,作为参考。所以,完成整个设计之后,将整个视觉语言相关的内容和素材制作成设计风格指南,和整个品牌的设计规范统一到一起。

10. 为动效设定规则

动画效果同样是要遵循一些规则的。是快速移动还是慢速移动,是悬停触发还是自动运行?

这些动效的运动规则其实是有着明显的视觉识别度的,就像日漫和美漫在视觉和运动规则上存在差别一样。

就像下面的动效,它大体上做着匀速的圆周运动,速度适中,其中有些元素并没有完全按照圆周运动。那么想想看,是否所有的做圆周运动的物体都和它一样呢?它们是否会带来不一样的视觉观感呢?

 

广州网页设计制作公司