杏吧app下载,关婷娜被揉胸视频直播,杏吧之春暖花开有你

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) "服務(wù)"
  ["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) "定制開發(fā)-APP定制開發(fā),微信定制開發(fā),小程序定制開發(fā),網(wǎng)站定制開發(fā)"
    ["meta_keywords"] => string(75) "APP定制開發(fā),微信定制開發(fā),小程序定制開發(fā),網(wǎng)站定制開發(fā)"
    ["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) "小程序開發(fā)"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(112) "專業(yè)微信小程序解決方案|各種場景核心功能,提前布局微信新生態(tài),搶占第一波紅利"
      ["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) "小程序_商城小程序_門店小程序_微圈小程序_餐飲小程序開發(fā)-藝源科技小程序開發(fā)"
        ["meta_keywords"] => string(103) "小程序開發(fā),商城小程序開發(fā),門店小程序開發(fā),微圈小程序開發(fā),餐飲小程序開發(fā)"
        ["meta_description"] => string(269) "專注提供專注提供小程序、商城小程序、門店小程序、微圈小程序、餐飲小程序開發(fā),專業(yè)團(tuán)隊(duì),一對一服務(wù),助企業(yè)快速生成自己的移動端微商城平臺. 藝源科技小程序采用高性能數(shù)據(jù)架構(gòu),系統(tǒng)穩(wěn)定安全。"
        ["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開發(fā)"
      ["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開發(fā)_app定制開發(fā)_app制作開發(fā)公司【藝源科技】"
        ["meta_keywords"] => string(53) "app開發(fā),app定制開發(fā)公司,app制作開發(fā)公司"
        ["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) "快抖霸屏_抖音快手霸屏_短視頻營銷獲客技術(shù)提供商!"
        ["meta_keywords"] => string(69) "快抖霸屏,抖音快手霸屏,快抖短視頻搜索,同城爆店碼"
        ["meta_description"] => string(161) "藝源智能云推廣系統(tǒng)13325455411專注快抖霸屏,抖音快手霸屏,同城爆店碼,一款線下與線上流量緊密結(jié)合的營銷爆客解決方案。"
        ["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智能名片為企業(yè)提供名片小程序,智能名片,企業(yè)名片,小程序名片,電子名片,二維碼名片等相關(guān)的服務(wù)。"
        ["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) "版權(quán)登記"
      ["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) "商標(biāo)注冊"
      ["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) "商標(biāo)注冊_商標(biāo)注冊流程_商標(biāo)注冊流程及費(fèi)用_西安商標(biāo)注冊_西安商標(biāo)注冊代理-「源知果」藝源科技"
        ["meta_keywords"] => string(103) "商標(biāo)注冊,商標(biāo)注冊流程,商標(biāo)注冊流程及費(fèi)用,西安商標(biāo)注冊,西安商標(biāo)注冊代理"
        ["meta_description"] => string(182) "「源知果」西安提供代理版權(quán)登記,代理商標(biāo)注冊,代理專利申請,代理企業(yè)貫標(biāo),代理高新技術(shù)企業(yè)認(rèn)定的服務(wù);咨詢電話: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) "網(wǎng)站建設(shè)"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2019/06/21/06144566585327511.jpg"
      ["desc"] => string(149) "節(jié)約IT成本/降低運(yùn)維成本/網(wǎng)站安全穩(wěn)定/不滿意全額退款|節(jié)約IT成本/降低運(yùn)維成本/網(wǎng)站安全穩(wěn)定/不滿意全額退款"
      ["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) "西安商城網(wǎng)站建設(shè)_政府網(wǎng)站建設(shè)_學(xué)校網(wǎng)站建設(shè)就選藝源科技"
        ["meta_keywords"] => string(113) "西安網(wǎng)站建設(shè),西安網(wǎng)絡(luò)公司,西安網(wǎng)頁設(shè)計(jì),商城網(wǎng)站建設(shè),政府網(wǎng)站建設(shè),學(xué)校網(wǎng)站建設(shè)"
        ["meta_description"] => string(248) "「藝源科技」是西安一家專業(yè)的西安商城網(wǎng)站建設(shè),政府網(wǎng)站建設(shè),學(xué)校網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,咨詢電話:029-88810146/150 9401 9029。公司擁有10年實(shí)踐經(jīng)驗(yàn),為您提供一條龍的互聯(lián)網(wǎng)應(yīng)用解決方案。"
        ["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) "云服務(wù)平臺"
      ["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優(yōu)化"
      ["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優(yōu)化_西安網(wǎng)站優(yōu)化_關(guān)鍵詞排名優(yōu)化】-SEO優(yōu)化公司藝源科技"
        ["meta_keywords"] => string(81) "西安SEO優(yōu)化,西安SEO優(yōu)化公司,西安網(wǎng)站優(yōu)化,西安網(wǎng)站優(yōu)化公司"
        ["meta_description"] => string(244) "藝源科技(yysweb.com),專注為企業(yè)提供百度等搜索引擎整站SEO優(yōu)化服務(wù),針對不同行業(yè)、網(wǎng)站情況給出不同策略、報(bào)價(jià)和SEO建議;是您值得信賴的seo診斷、顧問咨詢等云SEO技術(shù)服務(wù)外包商。"
        ["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
    }
  }
}
				
當(dāng)前位置: 首頁 > 售后 > 藝源智庫
信息雜亂無章?教你構(gòu)建合理的視覺層次!
時(shí)間:2019-10-30 09:26:18
文章發(fā)布:李陽
原創(chuàng)作者:未知
來源:互聯(lián)網(wǎng)

每天打開手機(jī),各式各樣的信息紛至沓來,每個(gè) App 每個(gè)頁面都有好多話要說。當(dāng)信息匯集在一起的時(shí)候,如何能讓用戶一打開頁面就能輕松理解各個(gè)信息元素之間的關(guān)系與差異呢?這就要靠我們設(shè)計(jì)師在設(shè)計(jì)之初構(gòu)建合理的視覺層次了。一個(gè)頁面的信息層級是不是清晰明了,很大程度上影響到用戶的信息獲取效率和使用體驗(yàn)。

信息雜亂無章?教你構(gòu)建合理的視覺層次!-藝源科技

在平面和網(wǎng)頁設(shè)計(jì)中,視覺層次一般分為三層:主層(Primary)、副層(Secondary)和三層(Tertiary)。其中主層一般是指頭條標(biāo)題等核心信息,也是要讓用戶第一眼就注意到的信息。副層可以是小標(biāo)題等信息,展示出主要內(nèi)容與提綱。最后的三層一般由正文或其他額外信息構(gòu)成,展示全部的內(nèi)容,可以用較小的字號。

信息雜亂無章?教你構(gòu)建合理的視覺層次!-藝源科技

△ 圖片來自網(wǎng)絡(luò)

不過當(dāng)我們在設(shè)計(jì)移動端頁面的時(shí)候,因?yàn)槠聊怀叽绲南拗疲袝r(shí)候需要酌情減少頁面的層級,這樣才能讓信息不會過于繁雜。

一般一個(gè)頁面會根據(jù)功能分為多個(gè)模塊,下面我們就從「模塊內(nèi)」和「模塊之間」兩個(gè)角度來談?wù)勅绾螛?gòu)建合理的視覺層次。


一、一個(gè)模塊中的層次感

我們所說的「模塊」指的是什么呢?可以是一張卡片里面的內(nèi)容,也可以是一個(gè)信息列表等等,總而言之是一個(gè)信息組。當(dāng)我們拿到需求的時(shí)候,應(yīng)該理解每個(gè)信息組里面的每條信息的價(jià)值,并且給他們分一個(gè)類。

比如有時(shí)候,PM 同學(xué)跑過來說:「我想加個(gè)大按鈕」,「不想讓用戶注意到刪除功能,但是一定要有」 ,或者「這次就想試一試,展示了這條信息點(diǎn)擊率會不會漲」 ,又或是「這條信息展不展示都行,你設(shè)計(jì)的時(shí)候自己看吧……」 好好好,需求我都懂,那么該如何分類呢?

四象限法則相信大家都聽說過,那么我們就改編一下這個(gè)法則,給每個(gè)信息組中的信息按「重要——不重要」「必要——不必要」來分個(gè)類吧。

信息雜亂無章?教你構(gòu)建合理的視覺層次!-藝源科技

面對又重要又必要的信息還等什么,一定要大要明顯,讓用戶第一眼看到。

重要卻不必要的信息,一般是從產(chǎn)品或流程本身來講不是一定要有的信息,但是因?yàn)槟撤N原因想要突顯給用戶,比如在信用卡的產(chǎn)品列表中加入每張卡的推薦理由,或者在餐廳列表中展示某某名人去過這家店……這些信息在列表中不是必須有的,但是對于引導(dǎo)用戶判斷又十分的重要,所以我們可以次一級的來展示,要讓用戶可以注意到,但也不能搶了風(fēng)頭。

哪種信息是必要但不重要的呢?比如一個(gè)活動彈窗的關(guān)閉按鈕,一個(gè)訂單的刪除功能,一條免責(zé)聲明等等,我們不希望用戶注意到他們,但是這些功能又不得不存在,那么就要弱化展示這些信息。

不必要又不重要的信息,一般情況是要去掉的,除非在設(shè)計(jì)中信息太少了空蕩蕩的,為了排版美觀才會把這種邊緣信息留下占位。

接下來,當(dāng)我們整理好信息層級之后,要靠什么手段來展示這些層級呢?答案是加大對比。

信息雜亂無章?教你構(gòu)建合理的視覺層次!-藝源科技

1. 大小

對比的第一步就是大小的對比,在大家的認(rèn)知中,大的東西比小的東西更顯眼、更重要。用戶會自然而然地關(guān)注到尺寸較大的文本和尺寸較大的圖,比如下圖中一張足夠大的信用卡卡面圖片,一秒吸引目光。再比如頁面中的大標(biāo)題,都是這樣的效果。

信息雜亂無章?教你構(gòu)建合理的視覺層次!-藝源科技

△ 截圖來自查查公積金

在內(nèi)容列表中,標(biāo)題名字類的信息一般會使用14-17dp左右,補(bǔ)充說明內(nèi)容一般使用11-12dp左右,具體的使用情況要根據(jù)信息的多少、信息的重要程度、上下對比等情況來進(jìn)行具體的設(shè)計(jì)。

信息雜亂無章?教你構(gòu)建合理的視覺層次!-藝源科技

△ 圖片來自融360、微信

2. 重量

有時(shí)候由于空間的限制,字號不能再大了?字號大了也沒拉開層次?試試增加字重量吧。iOS&Android 由于字體不同,加粗的效果也不同,請酌情增減。

信息雜亂無章?教你構(gòu)建合理的視覺層次!-藝源科技

3. 顏色

顏色對于用戶的感知有著巨大的影響。所以在進(jìn)行視覺層次構(gòu)建的時(shí)候,不同的顏色可以輕松構(gòu)成層次結(jié)構(gòu),強(qiáng)烈的顏色比如紅色、橙色都很容易引人注意。白色和淺灰通??梢杂脕碜鳛榇竺娣e的背景色,和其他的顏色構(gòu)成對比。在設(shè)計(jì)的時(shí)候可以運(yùn)用 App 的主色和輔助色來拉開視覺層次。

信息雜亂無章?教你構(gòu)建合理的視覺層次!-藝源科技

△ 圖片來自查查公積金、融360視覺規(guī)范

4. 對比

信息雜亂無章?教你構(gòu)建合理的視覺層次!-藝源科技

我們以上圖這個(gè)貸款列表舉一個(gè)綜合的例子,四條信息從最突出到最弱化分別標(biāo)為了1、2、3、4,這幾條信息中的字號以至少6px的差值進(jìn)行遞減,并且只有前兩條信息進(jìn)行了加粗處理,同時(shí)顏色的選擇上也是從強(qiáng)到弱:

信息雜亂無章?教你構(gòu)建合理的視覺層次!-藝源科技

大小、重量、顏色的運(yùn)用,歸根結(jié)底就是制造對比,這也是創(chuàng)建層次結(jié)構(gòu)依靠的核心。一個(gè)元素和另外一個(gè)元素構(gòu)成對比,才能有層次的展示他們之間重要程度上的差異,讓用戶更加容易獲取到信息。


二、模塊之間的層次感

當(dāng)我們已經(jīng)合理的排布了一個(gè)模塊內(nèi)的視覺層次,接下來要做的就是把多個(gè)模塊組合起來。

心理學(xué)家基于格式塔原理來檢測用戶對于元素之間關(guān)系的視覺感知,發(fā)現(xiàn)人們傾向于將視覺關(guān)系靠近的元素群視作為有關(guān)系的一組。值得說明的是,位置接近的元素,即使色彩形狀大小都不一致,但只要他們足夠靠近,都會被人們視為一組。

信息雜亂無章?教你構(gòu)建合理的視覺層次!-藝源科技

△ 圖片來自網(wǎng)絡(luò)

視覺層次的建立很大程度上是基于格式塔原理,所以我們要關(guān)注 UI 元素之間的靠近性。

基于這種認(rèn)知,即使每個(gè)模塊之中的內(nèi)容有對比有強(qiáng)弱,但是只要每個(gè)信息組之間的元素的距離較近,并與其他信息組之間的距離拉遠(yuǎn),留下足夠的留白空間,就可以清晰的將整個(gè)頁面的層次拉開。留白和元素本身之間構(gòu)成的疏密對比,會更好的讓用戶注意到留白包圍下的內(nèi)容。

信息雜亂無章?教你構(gòu)建合理的視覺層次!-藝源科技

△ 圖片來自網(wǎng)絡(luò)

現(xiàn)在很多 App 都是通過對比與留白來進(jìn)行頁面中的「無形分割」,減少了很多線和塊的運(yùn)用,讓頁面更為簡潔。基本上原則為:文字與圖片對齊,與相關(guān)內(nèi)容的間距要小于其他內(nèi)容,標(biāo)題要大。

信息雜亂無章?教你構(gòu)建合理的視覺層次!-藝源科技

△ 圖片來自 Airbnb

當(dāng)字體足夠大的時(shí)候,會比小字符更有「圖形感」,更加突出,可以更明確的告訴用戶從這里開始是下一段了,字號一般在20-24dp之間,根據(jù)內(nèi)容和整體風(fēng)格來決定,顏色一般選擇比較深的顏色 ,必要的時(shí)候可以加粗。當(dāng)其他內(nèi)容都是比較小的文字的時(shí)候,欄目標(biāo)題也要控制一下大小。如果圖片較多,標(biāo)題就可以再大一些。

具體多大,就要在頁面和諧的基礎(chǔ)上多試幾次……

信息雜亂無章?教你構(gòu)建合理的視覺層次!-藝源科技

△ 圖片來自查查公積金

如上圖,在查查公積金 App 中,當(dāng)我們設(shè)計(jì)信用卡詳情頁的時(shí)候,由于整個(gè)頁面里圖形比較突出,看起來用加粗的「辦卡禮」、「專享特權(quán)」標(biāo)題更合適一些。可是在同個(gè) App 的公積金詳情頁里面,整個(gè)頁面用色都比較清淡,內(nèi)容都是一些文字信息,如果內(nèi)容標(biāo)題加粗的話會顯得比較突兀。所以綜合整個(gè) App 的頁面風(fēng)格權(quán)衡之后,還是選擇了左側(cè)沒有加粗字體的設(shè)計(jì)。

總體來講,UI 設(shè)計(jì)是沒有公式的,只能有經(jīng)驗(yàn)之談和大體上的建議,很多時(shí)候都要設(shè)計(jì)師一次次的去嘗試、去對比、去感受,才能給出針對當(dāng)下頁面需求最合理的層次構(gòu)建與解決方案。

小程序開發(fā)
標(biāo)簽: App設(shè)計(jì) ui設(shè)計(jì) 信息層級 格式塔原理 用戶體驗(yàn) 經(jīng)驗(yàn)分享 視覺層級 移動端頁面
*版權(quán)申明:本站部分文章由藝源科技收集整理,不代表我們的觀點(diǎn)。如果這篇轉(zhuǎn)載侵犯您的版權(quán),請及時(shí)聯(lián)系我們刪除!
為您推薦
最新文章
掃碼加他,免費(fèi)獲取方案