杏吧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) "定制開(kāi)發(fā)-APP定制開(kāi)發(fā),微信定制開(kāi)發(fā),小程序定制開(kāi)發(fā),網(wǎng)站定制開(kāi)發(fā)"
    ["meta_keywords"] => string(75) "APP定制開(kāi)發(fā),微信定制開(kāi)發(fā),小程序定制開(kāi)發(fā),網(wǎng)站定制開(kāi)發(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) "小程序開(kāi)發(fā)"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(112) "專業(yè)微信小程序解決方案|各種場(chǎng)景核心功能，提前布局微信新生態(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) "小程序_商城小程序_門店小程序_微圈小程序_餐飲小程序開(kāi)發(fā)-藝源科技小程序開(kāi)發(fā)"
        ["meta_keywords"] => string(103) "小程序開(kāi)發(fā),商城小程序開(kāi)發(fā),門店小程序開(kāi)發(fā),微圈小程序開(kāi)發(fā),餐飲小程序開(kāi)發(fā)"
        ["meta_description"] => string(269) "專注提供專注提供小程序、商城小程序、門店小程序、微圈小程序、餐飲小程序開(kāi)發(fā)，專業(yè)團(tuán)隊(duì),一對(duì)一服務(wù),助企業(yè)快速生成自己的移動(dòng)端微商城平臺(tái). 藝源科技小程序采用高性能數(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開(kāi)發(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開(kāi)發(fā)_app定制開(kāi)發(fā)_app制作開(kāi)發(fā)公司【藝源科技】"
        ["meta_keywords"] => string(53) "app開(kāi)發(fā),app定制開(kāi)發(fā)公司,app制作開(kāi)發(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) "快抖霸屏_抖音快手霸屏_短視頻營(yíng)銷獲客技術(shù)提供商！"
        ["meta_keywords"] => string(69) "快抖霸屏,抖音快手霸屏,快抖短視頻搜索,同城爆店碼"
        ["meta_description"] => string(161) "藝源智能云推廣系統(tǒng)13325455411專注快抖霸屏,抖音快手霸屏,同城爆店碼,一款線下與線上流量緊密結(jié)合的營(yíng)銷爆客解決方案。"
        ["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智能名片_名片小程序_智能名片_讓銷售更簡(jiǎn)單"
        ["meta_keywords"] => string(97) "藝源AI智能名片,名片小程序,智能名片_讓銷售更簡(jiǎn)單,電子名片,二維碼名片"
        ["meta_description"] => string(184) "藝源AI智能名片-讓銷售更簡(jiǎn)單。藝源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)注冊(cè)"
      ["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)注冊(cè)_商標(biāo)注冊(cè)流程_商標(biāo)注冊(cè)流程及費(fèi)用_西安商標(biāo)注冊(cè)_西安商標(biāo)注冊(cè)代理-「源知果」藝源科技"
        ["meta_keywords"] => string(103) "商標(biāo)注冊(cè),商標(biāo)注冊(cè)流程,商標(biāo)注冊(cè)流程及費(fèi)用,西安商標(biāo)注冊(cè),西安商標(biāo)注冊(cè)代理"
        ["meta_description"] => string(182) "「源知果」西安提供代理版權(quán)登記，代理商標(biāo)注冊(cè)，代理專利申請(qǐng)，代理企業(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)頁(yè)設(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ù)平臺(tái)"
      ["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ù),針對(duì)不同行業(yè)、網(wǎng)站情況給出不同策略、報(bào)價(jià)和SEO建議;是您值得信賴的seo診斷、顧問(wèn)咨詢等云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)前位置： 首頁(yè) > 售后 > 藝源智庫(kù)
違者必丑！聊聊網(wǎng)頁(yè)設(shè)計(jì)中五大金科玉律
時(shí)間：2019-04-01 15:47:45
文章發(fā)布：李陽(yáng)
原創(chuàng)作者：未知
來(lái)源：互聯(lián)網(wǎng)

違者必丑！聊聊網(wǎng)頁(yè)設(shè)計(jì)中五大-藝源科技

從字體設(shè)計(jì)、制圖到頁(yè)面版式，設(shè)計(jì)總有那么幾條通用的原則，它適用于網(wǎng)頁(yè)或者印刷。然而，在網(wǎng)頁(yè)設(shè)計(jì)這邊，很多本應(yīng)該有的規(guī)則都被搞亂了，就只是跟著感覺(jué)走。這并不是說(shuō)設(shè)計(jì)師在規(guī)則方面有松懈，而是大多數(shù)網(wǎng)絡(luò)工作者都不知道要遵守這些規(guī)則——就算他們知道，也不知道怎么去用。

結(jié)合網(wǎng)頁(yè)講，就是以下幾條：

平 衡

平衡感挺難拿捏的。網(wǎng)頁(yè)上呈現(xiàn)出的平衡有兩種——對(duì)稱和不對(duì)稱。我們都很習(xí)慣了看對(duì)稱的圖片，就像我們小時(shí)候剪紙花，都會(huì)兩邊一起剪，這樣打開(kāi)就是對(duì)稱化的。這種對(duì)稱的平衡很好識(shí)別（反正都鏡面反射一下），而在不對(duì)稱構(gòu)圖里面做到平衡才難。

舉兩個(gè)例子:

違者必丑！聊聊網(wǎng)頁(yè)設(shè)計(jì)中五大-藝源科技

圖一 Subtraction

不對(duì)稱平衡

圖一在多處位置展示了不對(duì)稱平衡里面的一些重要原則。你看，作為主Banner的那只狗子的照片——狗身上的黑色全壓在畫面左側(cè)了，這時(shí)候畫面右側(cè)出現(xiàn)了一個(gè)X，這看似隨意的灰色X，可是平衡畫面的關(guān)鍵因素！這樣一來(lái)，你的視線就會(huì)被牽扯到畫面中間。除了在Banner圖里面，在網(wǎng)頁(yè)的頁(yè)頭中也出現(xiàn)了這樣的設(shè)計(jì)——菜單欄的大小和顏色都相對(duì)重。那么在Subtraction的logo這條，就對(duì)應(yīng)用了黑字白底，再在上面加上黑線，這樣上下會(huì)相對(duì)平衡一些。

違者必丑！聊聊網(wǎng)頁(yè)設(shè)計(jì)中五大-藝源科技

圖二apple

對(duì)稱平衡

蘋果是現(xiàn)代網(wǎng)頁(yè)中實(shí)現(xiàn)對(duì)稱平衡的典范。如圖二，每個(gè)元素都是在中軸線兩側(cè)排布，創(chuàng)造出了一個(gè)視覺(jué)上的和諧情景。

比 例

對(duì)于網(wǎng)頁(yè)元素來(lái)說(shuō)，并不是看得清楚就好，或者文本多長(zhǎng)就弄多大，它的排布跟網(wǎng)頁(yè)的平衡視覺(jué)上強(qiáng)調(diào)誰(shuí)有很大關(guān)系。

違者必丑！聊聊網(wǎng)頁(yè)設(shè)計(jì)中五大-藝源科技

Tumbrl

而到底如何去權(quán)衡這些元素的大小，跟每個(gè)元素本身的性質(zhì)有很大關(guān)系，舉個(gè)例子：你在瀏覽兩欄式的網(wǎng)頁(yè)的時(shí)候，一般會(huì)發(fā)現(xiàn)右邊的框要比左邊的框大，也放了一些關(guān)鍵的信息在里面。這是由人的視覺(jué)習(xí)慣決定——哪怕是文本框放在左側(cè)，目錄這些元數(shù)據(jù)放在右側(cè)，也會(huì)不自覺(jué)的看向右邊。所以說(shuō)，元數(shù)據(jù)在右邊占地方是不太科學(xué)的。有些人喜歡每欄一樣寬度的柵格布局，就像圖一那樣；另外的人可能喜歡黃金分割率，也就是右邊的框是左邊框的1.62倍。

有些網(wǎng)頁(yè)的設(shè)計(jì)也僅僅看重要程度來(lái)排比例的：

違者必丑！聊聊網(wǎng)頁(yè)設(shè)計(jì)中五大-藝源科技

Coda

在這個(gè)頁(yè)面上，各元素的比例控制得很好。不僅是視覺(jué)上的層次很好，意義上的層次也很好。從產(chǎn)品的logo開(kāi)始（1），然后引導(dǎo)用戶的行為（2），再到文字比較密集的相關(guān)介紹（3），排布都很合理。圖文混排的區(qū)域，標(biāo)題的權(quán)重和正文隔開(kāi)，還有和左側(cè)icon的關(guān)系都很注意。瀏覽這個(gè)頁(yè)面的時(shí)候也會(huì)覺(jué)得整體非常協(xié)調(diào)。

不過(guò)以上這個(gè)例子有點(diǎn)老，網(wǎng)頁(yè)展現(xiàn)很平面。

現(xiàn)在的網(wǎng)頁(yè)可通過(guò)交互設(shè)計(jì)來(lái)強(qiáng)化網(wǎng)頁(yè)上展現(xiàn)的比例。

違者必丑！聊聊網(wǎng)頁(yè)設(shè)計(jì)中五大-藝源科技

比如這個(gè)國(guó)際廣告獎(jiǎng)D&AD的網(wǎng)站，在滑動(dòng)內(nèi)頁(yè)時(shí)候，菜單欄占頁(yè)面的比例會(huì)相對(duì)縮小，這樣人的注意力會(huì)更集中于中間部分，更注意閱讀內(nèi)容。

節(jié)奏

網(wǎng)頁(yè)上的節(jié)奏感非常重要，甚至比數(shù)據(jù)更重要。尤其那些數(shù)據(jù)量大，頁(yè)面長(zhǎng)的網(wǎng)頁(yè)。比如這個(gè)叫Digg的網(wǎng)站，頁(yè)面上出現(xiàn)了雙目錄，但也是遵循了節(jié)奏感方面的一些原則。

違者必丑！聊聊網(wǎng)頁(yè)設(shè)計(jì)中五大-藝源科技

Digg

Digg首先在header部分展示出的是一個(gè)水平的導(dǎo)航欄，然后跳到主要內(nèi)容的展示部分，每篇文章依次列開(kāi)。這就給讀者一種連續(xù)的感覺(jué)，會(huì)順著往下滑。而這個(gè)小技巧也被用在了右側(cè)的Top 10文章排列中。

違者必丑！聊聊網(wǎng)頁(yè)設(shè)計(jì)中五大-藝源科技

tumblr

我們可以用音樂(lè)來(lái)理解這個(gè)視覺(jué)上呈現(xiàn)出的節(jié)奏感。每個(gè)頁(yè)面都需要一些視覺(jué)上的停頓，這取決于你要讓讀者快速瀏覽這些信息，還是要安插一個(gè)有意思的圖片，還是引導(dǎo)讀者按下下載的按鈕。

如果所有的元素在網(wǎng)頁(yè)上的權(quán)重都一樣，那節(jié)奏也是太一致了，這樣讀者不會(huì)感到乏味嗎（想想那些口水歌）看一下就不想再看下去了，何談看到你想讓他們看到的東西呢？

而如果頁(yè)面上面變化太多，又會(huì)顯得很亂。這就違反了同一性的原理（下面會(huì)講）。重要的是要在網(wǎng)頁(yè)的某些部分保留一致性。

每個(gè)部分的節(jié)奏感是根據(jù)各個(gè)不同的需要決定的，就像Digg，但整體也需要通過(guò)顏色或形狀呈現(xiàn)一致性。

強(qiáng)調(diào)

在設(shè)計(jì)中，再?zèng)]有比圓形更有魅力的圖案了，尤其是在充斥著四邊形的網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域。一個(gè)圓圈并不需要借助亮眼的顏色或留白，僅僅靠它的形狀特點(diǎn)就能輕松引起用戶的注意。這就是為什么你的眼睛總能被那些流行的標(biāo)志所吸引，不過(guò)“圓形”大的魅力其實(shí)還是發(fā)揮在Logo上。

違者必丑！聊聊網(wǎng)頁(yè)設(shè)計(jì)中五大-藝源科技

圖4a：A List Apart

正如你在圖4a中所見(jiàn)，A List Apart用了不止一個(gè)，而是多組“圓形”來(lái)突顯出其Logo。你不僅能通過(guò)其旁邊那個(gè)有著發(fā)行編碼的標(biāo)志(1)注意到它，也能通過(guò)右手邊幾個(gè)更小的標(biāo)志注意到T恤促銷的信息。

你還可以通過(guò)使用”留白“或”顏色“來(lái)起到強(qiáng)調(diào)的作用。它們可配合”圖形“使用，但通常情況下你不必用全，一兩個(gè)即可。三個(gè)元素的同時(shí)使用會(huì)造成一種過(guò)于夸張的吸引力，讓用戶很難再去注意頁(yè)面其他的部分，尤其是主要內(nèi)容。

違者必丑！聊聊網(wǎng)頁(yè)設(shè)計(jì)中五大-藝源科技

圖4b: Google

Google同時(shí)放了“留白”和“顏色”兩個(gè)大招刷存在感。顏色鮮艷的Google標(biāo)志和周圍大面積的白色區(qū)域總能即刻吸引你的眼球。Google如此設(shè)計(jì)不僅強(qiáng)化了其標(biāo)志，還能使你的目光自然地從左到右：你的目光可以準(zhǔn)確地找到搜索輸入框，同時(shí)自然地移向右邊的主搜索鍵。Google能夠提供給用戶優(yōu)質(zhì)的搜索結(jié)果，其中一個(gè)成功因素恰恰就是充分利用了基礎(chǔ)視覺(jué)技術(shù)，為網(wǎng)頁(yè)打造出好的易用感。

整體感

整體感是一個(gè)見(jiàn)仁見(jiàn)智的概念，一種“合而為一”的感受。沒(méi)有什么元素是實(shí)在無(wú)法符合設(shè)計(jì)氛圍和感覺(jué)的。

違者必丑！聊聊網(wǎng)頁(yè)設(shè)計(jì)中五大-藝源科技

okey dave

關(guān)于整體感有個(gè)重要的例子——Dave Werner的portfolio作品集。其每一頁(yè)都有網(wǎng)站手稿、圖釘和其他一些雜七雜八的玩意兒，他把這些元素結(jié)合在一起并且打造出了整體感。既沒(méi)有一樣元素顯得過(guò)于突兀，也沒(méi)有出現(xiàn)迥異的整體風(fēng)格。

在他的Portfolio作品集中，即便有很多看上去千差外別的分散個(gè)體元素，其實(shí)也都被筆記和草圖掩蓋了：這甚至形成了他作品集獨(dú)有的設(shè)計(jì)風(fēng)格。他的作品集里不存在一個(gè)網(wǎng)頁(yè)，你在上面看不到任何圖釘（用于組合界面元素）的痕跡。

你可能還不是大牛（我也不是），但我希望你在這些例子中能吸收到一定的設(shè)計(jì)經(jīng)驗(yàn)。這些經(jīng)驗(yàn)既能助你做出渴望達(dá)到的視覺(jué)效果，也能使用戶的眼球遵循你的意圖到達(dá)指定頁(yè)面。沒(méi)有這些元素，即使你的設(shè)計(jì)“看上去”也不賴，你也無(wú)法再有所突破。這些原則本身都非常簡(jiǎn)單，但是作為設(shè)計(jì)師，我們必須時(shí)刻注意它們。

小程序開(kāi)發(fā)
標(biāo)簽： 用戶體驗(yàn) 經(jīng)驗(yàn)分享 網(wǎng)頁(yè)設(shè)計(jì) 設(shè)計(jì)理論 酷站
*版權(quán)申明:本站部分文章由藝源科技收集整理，不代表我們的觀點(diǎn)。如果這篇轉(zhuǎn)載侵犯您的版權(quán)，請(qǐng)及時(shí)聯(lián)系我們刪除！
為您推薦
最新文章
掃碼加他，免費(fèi)獲取方案