杏吧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è)團隊,一對一服務(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) "商標注冊"
      ["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) "「源知果」西安提供代理版權(quán)登記,代理商標注冊,代理專利申請,代理企業(yè)貫標,代理高新技術(shù)企業(yè)認定的服務(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成本/降低運維成本/網(wǎng)站安全穩(wěn)定/不滿意全額退款|節(jié)約IT成本/降低運維成本/網(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è)_學校網(wǎng)站建設(shè)就選藝源科技"
        ["meta_keywords"] => string(113) "西安網(wǎng)站建設(shè),西安網(wǎng)絡(luò)公司,西安網(wǎng)頁設(shè)計,商城網(wǎng)站建設(shè),政府網(wǎng)站建設(shè),學校網(wǎng)站建設(shè)"
        ["meta_description"] => string(248) "「藝源科技」是西安一家專業(yè)的西安商城網(wǎng)站建設(shè),政府網(wǎng)站建設(shè),學校網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,咨詢電話:029-88810146/150 9401 9029。公司擁有10年實踐經(jīng)驗,為您提供一條龍的互聯(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)站情況給出不同策略、報價和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
    }
  }
}
				
當前位置: 首頁 > 售后 > 藝源智庫
這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈
時間:2019-09-10 11:03:20
文章發(fā)布:李陽
原創(chuàng)作者:未知
來源:互聯(lián)網(wǎng)

對于每個網(wǎng)頁設(shè)計師而言,在設(shè)計過程中總會碰到需要作出設(shè)計決策的時候。也許你的公司并沒有全職設(shè)計師,而需求上則要求設(shè)計出全新的UI;又或者你正在制作一個你自己的個人項目,而你希望它比 Bootstrap 的默認效果要強一些。這個時候很多人會退縮:“我并不是一個藝術(shù)家,我沒法作出更好的效果!”但是事實證明,想要設(shè)計出更優(yōu)秀的效果,合理地運用技巧其實更重要,而且是可以出效果的。

今天的文章,我們總結(jié)了7個簡單直觀的改善網(wǎng)頁視覺效果且能提升高級感的小技巧。很實際,也很實用,希望你們能喜歡。


1、使用色彩和字重來創(chuàng)造層次結(jié)構(gòu),而不是單純的大小對比

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

在對UI 文本進行樣式控制的時候,常見的錯誤莫過于過度依賴字體大小差異來營造對比。

“這段文字重要嗎?那么讓它更大一些吧?!?br/>“這段文字是比較次要嗎?那么讓它變小一點吧。”

單純使用字體大小對比,所營造的對比并不夠,嘗試結(jié)合色彩和字重來營造更好的對比效果。

“這段文字重要嗎?我們讓它色彩更加大膽一些吧?!?br/>“這段文字是比較次要嗎?我們讓它的色彩更淺一些吧?!?/p>

如果可以的話,你甚至可以采用兩到三種顏色:

  • 主要內(nèi)容采用深色(諸如標題,但是不要用純黑)

  • 次要內(nèi)容采用灰色(比如文章發(fā)表日期)

  • 輔助性內(nèi)容采用淺灰色(比如頁腳中的版權(quán)聲明)


這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

類似的,在UI設(shè)計的時候,通常兩種不同的字重足以營造出優(yōu)秀的層次感:

  • 大多數(shù)的文本采用正常的字重(400到500,具體取決于字體)

  • 對于需要強調(diào)的文字采用較重的字重(600到700,具體取決于字體)


這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

應(yīng)當盡量不要讓正文部分字重低于400,因為這一部分字體本身尺寸已經(jīng)較小,低于400會使得可讀性不佳。如果你依然需要降低字重,那么不妨讓字體色彩更淺一點,或者替換成其他識別度較強、字重相對較小的字體。


2、不要在有色背景上使用灰色的文本

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

在白色背景下,將黑色的文本改成灰色,是不錯的淡化其視覺效果的做法,但是在彩色背景下這么做,則是另外一回事。

實際上,讓白色背景下文本由黑變灰實際上是達到降低對比度的效果。

但是在彩色背景下,想要降低對比度是應(yīng)該讓文本逐步接近背景色,而不是改為灰色。

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

想要降低和背景色之間的對比,通常有兩種方法:

1、降低白色文本的不透明度

降低不透明度,能夠讓背景的顏色透過來一些,以一種不沖突的方式降低前景文字和背景之間的對比度。

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

2、基于背景色手工挑選文本的顏色

當背景是圖像或者圖案的時候,半透明的文本會影響可讀性,這個時候是基于背景主色調(diào)來挑選相應(yīng)的文本色。

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技


3、陰影設(shè)計

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

相比于采用大范圍的擴散模糊陰影,使用微妙的垂直偏移陰影效果更明顯,更自然,它模擬了常見的光源特征,光線從上往下照下來所營造的陰影效果。

如果你對此有興趣,Material Design Guideline 非常清晰地給你講明白了這樣的陰影的制作細節(jié)。

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技


4、盡量少使用 Borders

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

盒子模型是網(wǎng)頁前端常用到的工具。當你需要在兩個元素之間創(chuàng)建分隔的時候,盡量避免使用兩者的邊界直接接觸。

雖然 Border 是分隔兩個元素的好辦法,但是它不是唯一的方法,使用過多會讓整個布局的設(shè)計感降低,甚至會造成混亂。

所以你可以嘗試下面的辦法來規(guī)避:

1、使用 box shadow

box shadow 同樣可以營造出邊界感,而且更加微妙,并不會顯得突兀,不會分散用戶的注意力。

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

2、使用不同的背景色來區(qū)分

通常,相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區(qū)分。所以,你所需要做的就是在不同的區(qū)塊采用不同的背景色,并且嘗試刪除邊框,因為你根本不需要它。

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

3、增加額外的留白

創(chuàng)建元素之間的分離效果,并不一定要通過線框來表現(xiàn),只要增加留白,讓它們分隔開就行了。通過留白和間距來實現(xiàn)元素分組是UI設(shè)計中的常用手法。

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技


5、不要讓小圖標無端地放大

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

當你在設(shè)計著陸頁的時候,可能會突出產(chǎn)品的功能,這個時候你需要一些大圖標來作為視覺錨點,這個時候你可能會去 Font Awesome 或者 Zondicons 這樣的網(wǎng)站找?guī)讉€免費的矢量圖標,然后放大到符合你需求的尺寸。

它們都是矢量圖標,照說是可以無損放大的。但是一個通常只有16×16 的圖標放大三四倍,它固然無損,但是在視覺上就顯得頗為不專業(yè)了:缺乏細節(jié),總感覺過于矮胖。

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

可是,如果這些小圖標是你唯一能夠搞得到的素材的話,那么不妨試著將它置于另外一個帶有顏色的圖形當中:

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

這樣的設(shè)計不僅能夠讓圖標達到預(yù)期的視覺體積,而且看起來要比單純放大,看起來細節(jié)會更多一些。當然,如果你手頭不是那么緊的話,還是買幾個大尺寸的高素質(zhì)圖標,比如 Heroicons 或 Iconic。


6、增加帶有顏色的單邊邊框提升個性

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

當然,你可能并不是一個對于平面設(shè)計有著足夠經(jīng)驗的設(shè)計師,但是依然可以讓你設(shè)計的界面有足夠的視覺吸引力。

簡單的方法,就是在界面的邊框中的一邊添加上單色甚至漸變的邊框,這能讓平淡無奇的界面一下子變得鮮活起來。

比如在警告彈出框的側(cè)面:

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

或者在導航欄的底部,以示觸發(fā):

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

或者在整個頁面的頂部:

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

這并不需要什么平面設(shè)計的經(jīng)驗,但是會明顯強化設(shè)計感。

退一萬步講,你不知道選取什么顏色,簡單,上Dribbble 的色彩搜索中隨便找?guī)讉€看著漂亮的顏色,其實也就夠用了。


7、并非每個按鈕都需要顏色

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

很多時候,按鈕本身所處的語境和按鈕上的文本內(nèi)容會讓人感到迷惑。像BootStrap 這樣的框架就讓設(shè)計師按照語境和語義來進行選擇:

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

“這是一個積極的操作?讓這個按鈕是綠色的吧?!?/p>

“這是否是要刪除數(shù)據(jù)?那么將按鈕設(shè)置為紅色的吧。”

的確,語義和按鈕本身的設(shè)計息息相關(guān),但是還有更重要的維度被忽略了,那就是層次結(jié)構(gòu)。

網(wǎng)頁上每個操作其實都位于整個交互金字塔的某個位置。絕大多數(shù)的頁面其實只有一個主要操作,搭配一些不太重要的次要操作,以及為數(shù)不多的幾個三級操作。

在設(shè)計這些交互的時候,通過層次結(jié)構(gòu)來呈現(xiàn)這些交互的重要性是很重要的設(shè)計環(huán)節(jié)。

    • 主要操作應(yīng)該很明顯。采用實色、高對比度的按鈕是很有必要的。

    • 次要操作應(yīng)該明顯,但是不突出,采用幽靈按鈕或者和背景對比度較低的色彩是比較合理的。

    • 三級操作應(yīng)該是可被發(fā)現(xiàn),但是不明顯的,他們被設(shè)計為鏈接。

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

“破壞性的交互所涉及的按鈕難道不應(yīng)該是紅色的么?”

沒必要!如果破壞性的交互所涉及到的按鈕不是主要操作的話,讓它按照次要操作甚至三級操作的按鈕來設(shè)計就好了。

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

如果這樣的操作是主要操作的話,可以讓它是大號的、紅色的帶有加粗文本的按鈕:

這7個實用的設(shè)計技巧,能讓你的UI高級感更強烈-藝源科技

小程序開發(fā)
標簽: ui設(shè)計 用戶體驗 經(jīng)驗分享 設(shè)計技巧
*版權(quán)申明:本站部分文章由藝源科技收集整理,不代表我們的觀點。如果這篇轉(zhuǎn)載侵犯您的版權(quán),請及時聯(lián)系我們刪除!
為您推薦
最新文章
掃碼加他,免費獲取方案