• <abbr id="chdyf"></abbr>
    <ruby id="chdyf"><acronym id="chdyf"><meter id="chdyf"></meter></acronym></ruby>
    <bdo id="chdyf"></bdo>
    <dfn id="chdyf"><menu id="chdyf"></menu></dfn>
    1. <menuitem id="chdyf"></menuitem><strong id="chdyf"><menu id="chdyf"></menu></strong>

      <rt id="chdyf"><menu id="chdyf"></menu></rt>
      成人小说一区二区三区,伊人精品成人久久综合全集观看,久久HEZYO色综合,中文字幕精品人妻熟女,影音先锋成人网站,我要看免费一级毛片,中国女人做爰A片,中文字幕av久久爽Av

      高手是如何做UI界面優化的?來看實戰案例!

      2025-4-16    lanlanwork

      今天來做的這個頁面,光是一開始就薅了好久的頭發。

      這個頁面的最初版長這樣:

      image.png

       

      最后調整為這樣:

      image.png

      到底為什么要做這些改動呢?

      大概為了以下幾點:

      1. 當畫面中有很多亮色時,需要有黑色壓下去
      2. 彩色里融入無彩色,畫面會更好看
      3. 使層次更豐富
      4. 帶有透視角度的物體,運動感更強

      除了這幾大點之外,過程中還有一些細節小點,接下來分享給大家

      一、當畫面中有很多亮色時,需要有黑色壓下去

      不知道大家留意過這類的設計風格沒有,他們在頁面中運用了很多明度較高、飽和度較高、較亮眼的顏色

      image.png

      為了能壓住頁面,也都用了一塊面積的黑色,不讓整個頁面顯得很輕、很浮。黑色的文字和圖標也是起到這樣的作用

      image.png

      當然黑色面積也不一定非得用在按鈕上,比如插畫、圖片上:

      image.png

      背景里:

      image.png

      二、彩色里融入無彩色,畫面會更好看

      Icon 里融入黑色面塊:

      image.png

      背景改成灰色:

      image.png

      三、使層次更豐富

      現在卡片的層次大致分為三層:

      image.png

      在此基礎上,嘗試再加一層,讓金幣從畫面中凸出來。

      這樣使頭部卡片更豐富、在頁面中更強調:

      image.png

      這樣看著比較合適,我們再把金幣的風格跟頁面調整統一

      image.png

      四、帶有透視角度的物體,運動感更強

      現在的金幣是扁平的,不太像金幣,更像貼紙,扁平的拍在畫面上。

      當加入一些側面,變化就很明顯:

      1. 能夠豐富金幣插畫的層次,看著更精致
      2. 也讓金幣更像是立體的,像在往畫面里飛

      image.png

      最后一點調整

      1. 將線條處理為斷線:

      image.png

      2. 調整卡片紋理

      卡片紋理依舊用以前的還是有些瑣碎了,所以將紋理調整的更整體,再用一些較細的線和元素進行點綴即可!

      image.png

      3. 標題點綴綠色高亮,豐富頁面

      image.png

       

      本文由原創「菜心設計鋪」,歡迎關注作者的微信公眾號:「菜心設計鋪」

      蘭亭妙微(www.wtxcl.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

       

      日歷

      鏈接

      個人資料

      藍藍設計的小編 http://www.wtxcl.cn

      存檔