array(23) {
  ["id"] => string(2) "96"
  ["siteid"] => string(1) "1"
  ["type"] => string(1) "1"
  ["m_id"] => string(1) "0"
  ["p_id"] => string(1) "0"
  ["name"] => string(6) "服务"
  ["thumb"] => string(63) "/modules/cms/uploads/recommend/2018/05/15/05797102164099283.png"
  ["image"] => string(0) ""
  ["desc"] => string(0) ""
  ["pdir"] => string(0) ""
  ["dir"] => string(7) "service"
  ["url"] => string(0) ""
  ["setting"] => array(15) {
    ["is_html"] => int(1)
    ["content_is_html"] => int(0)
    ["urlrule"] => int(1)
    ["contenturlrule"] => int(0)
    ["meta_title"] => string(88) "定制开发-APP定制开发,微信定制开发,小程序定制开发,网站定制开发"
    ["meta_keywords"] => string(75) "APP定制开发,微信定制开发,小程序定制开发,网站定制开发"
    ["meta_description"] => string(0) ""
    ["category_template"] => string(0) ""
    ["list_template"] => string(0) ""
    ["show_template"] => string(21) "show_page_dingzhi.tpl"
    ["formid"] => string(0) ""
    ["url"] => string(0) ""
    ["target"] => string(0) ""
    ["pri_grade_visit"] => array(0) {
    }
    ["pri_grade_add"] => array(0) {
    }
  }
  ["order"] => string(1) "1"
  ["sethtml"] => string(1) "0"
  ["stat"] => string(1) "2"
  ["flowid"] => string(1) "0"
  ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2018/05/25/05805654599261264.jpg"
  ["page_num"] => string(1) "0"
  ["wxstat"] => string(1) "0"
  ["scope"] => string(0) ""
  ["modelname"] => NULL
  ["son"] => array(9) {
    [0] => array(22) {
      ["id"] => string(3) "187"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(15) "小程序开发"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(112) "专业微信小程序解决方案|各种场景核心功能,提前布局微信新生态,抢占第一波红利"
      ["pdir"] => string(0) ""
      ["dir"] => string(6) "wechat"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(107) "小程序_商城小程序_门店小程序_微圈小程序_餐饮小程序开发-艺源科技小程序开发"
        ["meta_keywords"] => string(103) "小程序开发,商城小程序开发,门店小程序开发,微圈小程序开发,餐饮小程序开发"
        ["meta_description"] => string(269) "专注提供专注提供小程序、商城小程序、门店小程序、微圈小程序、餐饮小程序开发,专业团队,一对一服务,助企业快速生成自己的移动端微商城平台. 艺源科技小程序采用高性能数据架构,系统稳定安全。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(17) "show_page_xcx.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "0"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "1"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [1] => array(22) {
      ["id"] => string(3) "199"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(9) "APP开发"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(3) "APP"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(65) "app开发_app定制开发_app制作开发公司【艺源科技】"
        ["meta_keywords"] => string(53) "app开发,app定制开发公司,app制作开发公司"
        ["meta_description"] => string(0) ""
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(17) "show_page_app.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "1"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [2] => array(22) {
      ["id"] => string(3) "244"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(12) "快抖霸屏"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(7) "kuaidou"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(71) "快抖霸屏_抖音快手霸屏_短视频营销获客技术提供商!"
        ["meta_keywords"] => string(69) "快抖霸屏,抖音快手霸屏,快抖短视频搜索,同城爆店码"
        ["meta_description"] => string(161) "艺源智能云推广系统13325455411专注快抖霸屏,抖音快手霸屏,同城爆店码,一款线下与线上流量紧密结合的营销爆客解决方案。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(20) "show_page_douyin.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "2"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(27) "需要短视频推广排名"
      ["modelname"] => NULL
    }
    [3] => array(22) {
      ["id"] => string(3) "207"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(14) "AI智能名片"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2019/07/04/06155550417466502.jpg"
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(2) "ai"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(68) "艺源AI智能名片_名片小程序_智能名片_让销售更简单"
        ["meta_keywords"] => string(97) "艺源AI智能名片,名片小程序,智能名片_让销售更简单,电子名片,二维码名片"
        ["meta_description"] => string(184) "艺源AI智能名片-让销售更简单。艺源AI智能名片为企业提供名片小程序,智能名片,企业名片,小程序名片,电子名片,二维码名片等相关的服务。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(16) "show_page_ai.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "3"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [4] => array(22) {
      ["id"] => string(3) "201"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(12) "版权登记"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/04/06814062280145708.jpg"
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(9) "copyright"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(0) ""
        ["meta_keywords"] => string(0) ""
        ["meta_description"] => string(0) ""
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(23) "show_page_copyright.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "4"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2021/08/04/06814063838873717.jpg"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [5] => array(22) {
      ["id"] => string(3) "203"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(12) "商标注册"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813359170749750.jpg"
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(9) "trademark"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(131) "商标注册_商标注册流程_商标注册流程及费用_西安商标注册_西安商标注册代理-「源知果」艺源科技"
        ["meta_keywords"] => string(103) "商标注册,商标注册流程,商标注册流程及费用,西安商标注册,西安商标注册代理"
        ["meta_description"] => string(182) "「源知果」西安提供代理版权登记,代理商标注册,代理专利申请,代理企业贯标,代理高新技术企业认定的服务;咨询电话:13325455411。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(23) "show_page_trademark.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "5"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2019/06/11/06135617157272716.png"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [6] => array(22) {
      ["id"] => string(3) "205"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(12) "网站建设"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2019/06/21/06144566585327511.jpg"
      ["desc"] => string(149) "节约IT成本/降低运维成本/网站安全稳定/不满意全额退款|节约IT成本/降低运维成本/网站安全稳定/不满意全额退款"
      ["pdir"] => string(0) ""
      ["dir"] => string(7) "website"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(80) "西安商城网站建设_政府网站建设_学校网站建设就选艺源科技"
        ["meta_keywords"] => string(113) "西安网站建设,西安网络公司,西安网页设计,商城网站建设,政府网站建设,学校网站建设"
        ["meta_description"] => string(248) "「艺源科技」是西安一家专业的西安商城网站建设,政府网站建设,学校网站建设的网络公司,咨询电话:029-88810146/150 9401 9029。公司拥有10年实践经验,为您提供一条龙的互联网应用解决方案。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(21) "show_page_website.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "6"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2019/06/24/06146855992801864.jpg"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [7] => array(22) {
      ["id"] => string(3) "208"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "2"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(15) "云服务平台"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(0) ""
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(0)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(0)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(0) ""
        ["meta_keywords"] => string(0) ""
        ["meta_description"] => string(0) ""
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(0) ""
        ["formid"] => string(0) ""
        ["url"] => string(21) "http://www.qulvkj.com"
        ["target"] => string(6) "_blank"
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "7"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [8] => array(22) {
      ["id"] => string(3) "202"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(9) "SEO优化"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813061683398516.jpg"
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(3) "seo"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(90) "【西安SEO优化_西安网站优化_关键词排名优化】-SEO优化公司艺源科技"
        ["meta_keywords"] => string(81) "西安SEO优化,西安SEO优化公司,西安网站优化,西安网站优化公司"
        ["meta_description"] => string(244) "艺源科技(yysweb.com),专注为企业提供百度等搜索引擎整站SEO优化服务,针对不同行业、网站情况给出不同策略、报价和SEO建议;是您值得信赖的seo诊断、顾问咨询等云SEO技术服务外包商。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(17) "show_page_seo.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "8"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813062712033401.jpg"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
  }
}
				
当前位置: 首页 > 售后 > 艺源智库
信息杂乱无章?教你构建合理的视觉层次!
时间:2019-10-30 09:26:18
文章发布:李阳
原创作者:未知
来源:互联网

每天打开手机,各式各样的信息纷至沓来,每个 App 每个页面都有好多话要说。当信息汇集在一起的时候,如何能让用户一打开页面就能轻松理解各个信息元素之间的关系与差异呢?这就要靠我们设计师在设计之初构建合理的视觉层次了。一个页面的信息层级是不是清晰明了,很大程度上影响到用户的信息获取效率和使用体验。

信息杂乱无章?教你构建合理的视觉层次!-艺源科技

在平面和网页设计中,视觉层次一般分为三层:主层(Primary)、副层(Secondary)和三层(Tertiary)。其中主层一般是指头条标题等核心信息,也是要让用户第一眼就注意到的信息。副层可以是小标题等信息,展示出主要内容与提纲。最后的三层一般由正文或其他额外信息构成,展示全部的内容,可以用较小的字号。

信息杂乱无章?教你构建合理的视觉层次!-艺源科技

△ 图片来自网络

不过当我们在设计移动端页面的时候,因为屏幕尺寸的限制,有时候需要酌情减少页面的层级,这样才能让信息不会过于繁杂。

一般一个页面会根据功能分为多个模块,下面我们就从「模块内」和「模块之间」两个角度来谈谈如何构建合理的视觉层次。


一、一个模块中的层次感

我们所说的「模块」指的是什么呢?可以是一张卡片里面的内容,也可以是一个信息列表等等,总而言之是一个信息组。当我们拿到需求的时候,应该理解每个信息组里面的每条信息的价值,并且给他们分一个类。

比如有时候,PM 同学跑过来说:「我想加个大按钮」,「不想让用户注意到删除功能,但是一定要有」 ,或者「这次就想试一试,展示了这条信息点击率会不会涨」 ,又或是「这条信息展不展示都行,你设计的时候自己看吧……」 好好好,需求我都懂,那么该如何分类呢?

四象限法则相信大家都听说过,那么我们就改编一下这个法则,给每个信息组中的信息按「重要——不重要」「必要——不必要」来分个类吧。

信息杂乱无章?教你构建合理的视觉层次!-艺源科技

面对又重要又必要的信息还等什么,一定要大要明显,让用户第一眼看到。

重要却不必要的信息,一般是从产品或流程本身来讲不是一定要有的信息,但是因为某种原因想要突显给用户,比如在信用卡的产品列表中加入每张卡的推荐理由,或者在餐厅列表中展示某某名人去过这家店……这些信息在列表中不是必须有的,但是对于引导用户判断又十分的重要,所以我们可以次一级的来展示,要让用户可以注意到,但也不能抢了风头。

哪种信息是必要但不重要的呢?比如一个活动弹窗的关闭按钮,一个订单的删除功能,一条免责声明等等,我们不希望用户注意到他们,但是这些功能又不得不存在,那么就要弱化展示这些信息。

不必要又不重要的信息,一般情况是要去掉的,除非在设计中信息太少了空荡荡的,为了排版美观才会把这种边缘信息留下占位。

接下来,当我们整理好信息层级之后,要靠什么手段来展示这些层级呢?答案是加大对比。

信息杂乱无章?教你构建合理的视觉层次!-艺源科技

1. 大小

对比的第一步就是大小的对比,在大家的认知中,大的东西比小的东西更显眼、更重要。用户会自然而然地关注到尺寸较大的文本和尺寸较大的图,比如下图中一张足够大的信用卡卡面图片,一秒吸引目光。再比如页面中的大标题,都是这样的效果。

信息杂乱无章?教你构建合理的视觉层次!-艺源科技

△ 截图来自查查公积金

在内容列表中,标题名字类的信息一般会使用14-17dp左右,补充说明内容一般使用11-12dp左右,具体的使用情况要根据信息的多少、信息的重要程度、上下对比等情况来进行具体的设计。

信息杂乱无章?教你构建合理的视觉层次!-艺源科技

△ 图片来自融360、微信

2. 重量

有时候由于空间的限制,字号不能再大了?字号大了也没拉开层次?试试增加字重量吧。iOS&Android 由于字体不同,加粗的效果也不同,请酌情增减。

信息杂乱无章?教你构建合理的视觉层次!-艺源科技

3. 颜色

颜色对于用户的感知有着巨大的影响。所以在进行视觉层次构建的时候,不同的颜色可以轻松构成层次结构,强烈的颜色比如红色、橙色都很容易引人注意。白色和浅灰通常可以用来作为大面积的背景色,和其他的颜色构成对比。在设计的时候可以运用 App 的主色和辅助色来拉开视觉层次。

信息杂乱无章?教你构建合理的视觉层次!-艺源科技

△ 图片来自查查公积金、融360视觉规范

4. 对比

信息杂乱无章?教你构建合理的视觉层次!-艺源科技

我们以上图这个贷款列表举一个综合的例子,四条信息从最突出到最弱化分别标为了1、2、3、4,这几条信息中的字号以至少6px的差值进行递减,并且只有前两条信息进行了加粗处理,同时颜色的选择上也是从强到弱:

信息杂乱无章?教你构建合理的视觉层次!-艺源科技

大小、重量、颜色的运用,归根结底就是制造对比,这也是创建层次结构依靠的核心。一个元素和另外一个元素构成对比,才能有层次的展示他们之间重要程度上的差异,让用户更加容易获取到信息。


二、模块之间的层次感

当我们已经合理的排布了一个模块内的视觉层次,接下来要做的就是把多个模块组合起来。

心理学家基于格式塔原理来检测用户对于元素之间关系的视觉感知,发现人们倾向于将视觉关系靠近的元素群视作为有关系的一组。值得说明的是,位置接近的元素,即使色彩形状大小都不一致,但只要他们足够靠近,都会被人们视为一组。

信息杂乱无章?教你构建合理的视觉层次!-艺源科技

△ 图片来自网络

视觉层次的建立很大程度上是基于格式塔原理,所以我们要关注 UI 元素之间的靠近性。

基于这种认知,即使每个模块之中的内容有对比有强弱,但是只要每个信息组之间的元素的距离较近,并与其他信息组之间的距离拉远,留下足够的留白空间,就可以清晰的将整个页面的层次拉开。留白和元素本身之间构成的疏密对比,会更好的让用户注意到留白包围下的内容。

信息杂乱无章?教你构建合理的视觉层次!-艺源科技

△ 图片来自网络

现在很多 App 都是通过对比与留白来进行页面中的「无形分割」,减少了很多线和块的运用,让页面更为简洁。基本上原则为:文字与图片对齐,与相关内容的间距要小于其他内容,标题要大。

信息杂乱无章?教你构建合理的视觉层次!-艺源科技

△ 图片来自 Airbnb

当字体足够大的时候,会比小字符更有「图形感」,更加突出,可以更明确的告诉用户从这里开始是下一段了,字号一般在20-24dp之间,根据内容和整体风格来决定,颜色一般选择比较深的颜色 ,必要的时候可以加粗。当其他内容都是比较小的文字的时候,栏目标题也要控制一下大小。如果图片较多,标题就可以再大一些。

具体多大,就要在页面和谐的基础上多试几次……

信息杂乱无章?教你构建合理的视觉层次!-艺源科技

△ 图片来自查查公积金

如上图,在查查公积金 App 中,当我们设计信用卡详情页的时候,由于整个页面里图形比较突出,看起来用加粗的「办卡礼」、「专享特权」标题更合适一些。可是在同个 App 的公积金详情页里面,整个页面用色都比较清淡,内容都是一些文字信息,如果内容标题加粗的话会显得比较突兀。所以综合整个 App 的页面风格权衡之后,还是选择了左侧没有加粗字体的设计。

总体来讲,UI 设计是没有公式的,只能有经验之谈和大体上的建议,很多时候都要设计师一次次的去尝试、去对比、去感受,才能给出针对当下页面需求最合理的层次构建与解决方案。

小程序开发
标签: App设计 ui设计 信息层级 格式塔原理 用户体验 经验分享 视觉层级 移动端页面
*版权申明:本站部分文章由艺源科技收集整理,不代表我们的观点。如果这篇转载侵犯您的版权,请及时联系我们删除!
为您推荐
最新文章
扫码加他,免费获取方案