你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
sunyuhui

《见微知著:Web用户体验解构》知识分享 4个回复 专栏 @ 体验

sunyuhui 发布于 2 年前

《见微知著》整本书讲述的是如何去设计一个网站,从整体布局到按钮、字体的具体设计,思路清晰,用实际例子说明如何一步步设计一个网站,对想了解网站设计的同学来说,一定有 很大收获。。。

2 年前,sunyuhui 补充:

思路

本文将按照下面的顺序进行总结,这个顺序也是在设计网页时所应遵循的思路。对我这个最近开始学习设计的人来说,这样的过程将有很大的收获。

  1. 整体界面布局及配色方案
  2. 主要功能区
  3. 页面元素

整体界面布局

设计之初,首先应该思考的就是整体结构。不同类型的网站使用不同的布局,好的布局能让网页在内容和视觉间取得平衡,获得最好效果。

按照分栏方式的不同,可以将布局划分为一栏式、两栏式、三栏式。

一栏式

一栏式页面的优点在于信息集中展示、重点突出。通常都会通过大幅的精美图片或者动态Flash来实现强烈的视觉冲击力。缺点在于排版方式和信息量有很大的局限性

比较典型的有三种:

两栏式

两栏式布局是最常见的布局方式之一。它中和了一栏式和三栏式布局的优缺点:相对一栏式布局,它可以容纳更多内容,相对三栏式布局,信息不至于过度拥挤和零乱。但它不具备一栏式布局的视觉冲击力和三栏式的超大内容量的优点。

两栏式又分三种:

  • 左窄右宽式:通常左边是导航,右边是内容。设计意图是让用户通过导航来查找内容,导航处于优先位置。比如各大电商网站:天猫首页京东首页
  • 左宽右窄式:通常左边是内容,右边是导航。设计意图是让用户更多的关注内容,比较典型的就是独立博客,我以前用wordpress时就是左宽右窄型的。
  • 左右均等型:两边信息的重要程度一样。我见的比较少,比如:Cmd Markdown编辑阅读器

三栏式

三栏式的布局对内容的排版更加紧凑,可以更加充分运用网站的空间,尽量多的显示信息内容,增加信息的密集性,但是信息量过多会造成页面上信息的拥挤。用户很难找到所需要的信息。三栏布局常见于信息量非常丰富的网站,比如门户类网站首页。

三栏式又分两种:

  • 中间宽、两边窄:最常见的比例为1:2:1。中间栏在视觉比例上相对显眼。因此用户默认将中间栏的信息处理成重点信息。采用这个布局方式的网站我没什么印象了。
  • 两栏宽、一栏窄:最常见的比例为2:2:1。较宽的两栏常用来展现重点信息,较窄的一栏常用来展现辅助信息。比如:网易首页腾讯首页

根据眼动结果。用户的注意力往往呈现“F”型,从上到下,从左到右,称为视线金三角。最经典的就是Google搜索结果“金三角”现象。所以在布局时,应该将重点放在左上角,右侧放置次要内容。

配色方案

要选择好的配色方案,先要了解关于色彩的的基本知识。之前的博客文章《众妙之门》之色彩理论中讲了一些关于色彩的基本知识。这里只涉及网站的整体的配色。

选择主色调

网站目标用户群体、网站类型以及网站的品牌形象等因素在很大程度上决定了网站的主色调选择。

  • 网站目标用户群体:不同地域、不同文化的人对颜色的理解有很大的不同;不同年龄、不同性别、不同教育背景等都会影响人们对于色彩的理解和偏好,例如:

  • 对于儿童的网站应该体现出童趣,更加偏好丰富绚丽的色彩;

  • 针对女性的网站应该温暖、浪漫,一般偏好粉色、紫色等。
  • 针对年轻人的网站应该更加轻快、活泼,年轻人比较能接受色彩鲜艳或是较饱和的颜色。
  • 针对老年人的网站应该宁静,不应过于花哨,一般老人对于灰色系的接受度较高。
  • 针对商务人士的网站应该庄重、有质感。

  • 网站类型:不同类型的网站以及网站的定位都会影响到颜色的选取。

  • 门户类网站:通常给人大众、专业、稳重的印象,因此主色调也往往从常用颜色中选取,适合大部分人的品味。比如腾讯的浅蓝色、新浪的黄色。

  • 电子商务网站:颜色非常丰富绚丽,给人激情、热闹、舒适的印象,如淘宝的橙色,amazon的蓝色。
  • SNS网站。一般给人轻松、互动的氛围。如此之外,还要结合目标群体的特征,选择合适的颜色。如QQ校友的用户相对年轻,因此使用绿色,而Linkedin的用户群体主要为商业客户,因此颜色相对稳重,职业化。
  • 垂直类网站。主要与其领域有关,如金融类需要体现出正式、庄重,因此往往采用稳重的颜色。政府网站相对比较严肃、庄重。因此使用颜色较深的沉稳基调。

  • 品牌形象:每个公司由于其产品特色以及企业文化等的不同,都会形成自身独特的品牌形象,尤其对于知名网站/企业来说,多年的品牌营销使品牌形象/品牌色深入人心。因此网站沿用品牌色将有助于提升网站/企业的整体形象。最常见的一种方式就是增加网站主色调与Logo之间的关联。

完整的配色方案

除了主色调以外,网站还需要搭配辅助色、点睛色、背景色来形成完整的配色方案。

  • 辅助色:仅次于主色调的视觉面积的辅助色,用户烘托主色调,营造网站整体氛围。
  • 点睛色:在小范围内用强烈的颜色对比来突出重点元素。使页面更加鲜明生动,主要用于占用范围较小的按钮、标签等。
  • 背景色:用作背景的颜色,协调、支配整体的作用

每一个颜色对于网站都至关重要,合理搭配才能使网站颜色更加赏心悦目,重点突出,因此每个设计都需要仔细斟酌。

完。

2 年前,sunyuhui 补充:

PS: markdown语法好像支持的有问题。大家可以去我的博客看这篇文章:见微知著:Web用户体验解构之整体布局及配色方案

  • berg

    你应该编辑你的主题,不要追加,追加里面不支持完整的markdown格式。

    #1
  • sunyuhui

    sorry...第一次用还没弄清楚。等会再改过来。

    #2
  • berg

    没事儿,重新发一个主题吧

    给你加上专栏权限了

    #3
  • sunyuhui

    谢啦 哈哈~

    #4
登录后回复,如无账号,请使用邀请码注册