<option id="uausy"></option>
  • <li id="uausy"></li>
  • 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
        }
      }
    }
    
    				
    當前位置: 首頁 > 售后 > 藝源智庫
    讓設計細節更高級的10個實用小技巧
    時間:2019-09-26 09:51:02
    文章發布:李陽
    原創作者:未知
    來源:互聯網

    我猜想我們大多數人都是從了解一點 UI,或者根本不了解的情況下開始從事設計的。但即使開始時我們并沒什么優勢,我們仍然想方設法的通過眾多設計書籍和文章來了解顏色,排版,布局等方面的知識。

    因此,在本文中,我將分享我從不同設計師那里學到的和在設計用戶界面時學到的東西,還包括我自己的一些新發現。

    注: 以下的「不好的」示例并不一定意味著它們是錯誤的。這只是我們從良好的設計方案改進到更優秀方案的基礎。


    1. 讓重要的文字更加突出

    當文字需要分清層次結構時,單純使文字變大來強調通常不能解決問題,就像下面的問題一樣:

    讓設計細節更高級的10個實用小技巧-藝源科技

    文字的層次結構不只是小和大的關系,它需要文字在大小、字重和顏色三個方面進行正確的組合,形成對比,對比度越大越好。(譯者注:我認為對比度也不能太大,合適即可。)

    讓設計細節更高級的10個實用小技巧-藝源科技

    那么如何設計更好的對比呢?

    • 不要使用一種字重不同字體大小的方式來建立對比和層次。

    • 相反,把主要內容加粗加深,把次要內容變細變淡(不太重要的)。

    • 創建三種不同的文字顏色,從深色到淺色(參見下面的示例)。通常我使用我設計的基礎顏色作為正文文字顏色。

    • 不要害怕使用大的字體比例(例如: 24px 標題、16px 正文、10px 標簽等)。更大的字體比例=更好的對比。

    • 打開網站 Modularscale 在線計算器可以用來創建更好的字體層次。

    • 記住,對比度=大小+字重+顏色。

    • 最后,一定要回頭再檢查下它的對比。你可以使用這個 http://leaverou.github.io/contrast-ratio 網站上的計算工具來檢查它的可讀性。


    讓設計細節更高級的10個實用小技巧-藝源科技

    上圖是我常用的基本色,我把深色用來做大標題,把淺色用來作為輔助內容。


    2. 不要使用多種復雜的顏色值

    不要在你的顏色選擇器上下移動,只是為了選擇一些深色色值,這樣做會讓你的工作變得復雜。

    我們都知道使用黑色文字顏色(#000)會給讀者眼睛造成疲勞,因此我們的替代方案是用比較暗的顏色。使用不同透明度的黑色作為解決方案,而不是去用復雜的十六進制顏色值。

    讓設計細節更高級的10個實用小技巧-藝源科技

    在我上面的實例中,我使用黑色作為主要顏色(#000),并根據其應用的位置(如主要內容,次要內容等)降低其透明度。


    3. 用數學方法理解顏色

    我們大多數人都會喜歡合適的顏色組合,每當我們看到一個精彩的配色時,我們都會問自己:「他們是怎么做到的?」

    讓設計細節更高級的10個實用小技巧-藝源科技

    △ 圖片來源:momoandspirits

    直到我了解到,理解色彩不僅僅是對那些從一開始就有設計天賦的人,在色相,飽和度,亮度(HSB)上做簡單的加減法也會達到一些神奇的效果(我們將使用HSB 代替 RGB)。你可以輕易的就擺脫單調的白色背景,把它變成像畢加索的作品一樣,就像下面的例子:

    讓設計細節更高級的10個實用小技巧-藝源科技

    那么HSB的加減法在哪里體現呢?

    讓設計細節更高級的10個實用小技巧-藝源科技

    理解兩種顏色模式的方法

    實際上有兩種方法,我們可以看到,兩個選項都有相同的基礎顏色#B9F4BC(圓圈背景),但在文件夾和條帶顏色上有不同。在我們開始的時候,請記住第一個數字對應于色相,其次是飽和度,最后是亮度。

    選項A

    讓設計細節更高級的10個實用小技巧-藝源科技

    △ 選項A

    在選項 A 中,我們可以看到色相值123在全部形狀(圓、文件夾、條帶)上始終未變,而飽和度和亮度則都發生了變化。

    現在,以飽和度24和亮度96為基礎值去改變。當我們為文件夾設計深綠色時,這兩個值都會變化。從飽和度24變到40(增加+16)和從亮度96變到82(減少-14),這說明飽和度在變化,無論是遞增還是遞減的,都需要與亮度成反比例調整,以設計出良好的對比(反之亦然)。同樣的事情也發生在條帶中,使用文件夾的飽和度和亮度作為基本值,飽和度從40遞增到44(增加+04),亮度從82降到75(減少-07)。從而引出公式:

    • 深色色調=飽和度增加,亮度減少。

    • 淺色色調=飽和度減少,亮度增加。

    每當我想知道我的設計應該使用什么正確的顏色時,這個公式幫助了我。我認識到,最好是有一個基本色,并從那里開始調整飽和度和亮度,同時保持色相值不變。

    選項B (譯者注:其實選項B這段具體方法我沒看懂,希望有看明白的人與我交流下,多謝)

    讓設計細節更高級的10個實用小技巧-藝源科技

    △ 選項B

    在選項 B 中,同樣的原理仍然適用(我們上面的公式),但這次色相值會改變。我們在各種設計材料中適用的術語 RGB 和 CMY,現在對我們來說是有意義的。

    RGB 代表紅色,綠色和藍色,而 CMY 代表青色,品紅色和黃色。當我第一次開始時,這些術語對我沒有任何意義,直到我發現了可以使用RGB 和 CMY 進行顏色組合。

    現在在選項 B 中,如果我們想要使底色變暗,我們需要做的就是將我們的拾色器在調色板上移動到最近的 RGB 方向,或者將它移動到 CMY方向,從而得到更輕的變化。例如:

    讓設計細節更高級的10個實用小技巧-藝源科技

    △ 顏色拾取界面

    因為想要設計一個更深的底板背景顏色#B9F4BC(圓形背景),并應用到文件夾圖標中。這個時候就需要把顏色選擇器移動到最近的 RGB方向(在這個例子中是藍色)。但是如果想要一個更淺的文件夾,就需要把顏色選擇器往左邊移,靠近 CMY 方向(在這個例子中是黃色)。

    常見的情況是,RGB 方向選擇顏色會讓顏色變得更深,而 CMY 方向則會讓顏色變得更淺。

    在將顏色選擇器移動到想要的結果后,我們現在應用選項 A 中的公式,結果我們得到了下面這個配色:

    讓設計細節更高級的10個實用小技巧-藝源科技

    讓設計細節更高級的10個實用小技巧-藝源科技

    • 紅色,綠色,藍色(RGB)+選項 A 公式=深色色調

    • 青色,品紅色,黃色(CMY)+選項 A 公式=淺色色調


    4. 使用留白對內容進行分組

    讓設計細節更高級的10個實用小技巧-藝源科技

    △ 留白要大膽

    除了在兩個組之間添加一行表示分離以外,使用更大的留白是一個更好的方案。

    就像臨近原則所說的那樣:

    彼此靠近或接近的對象會被看成是一個組的內容。

    以我上面的例子來看,我的目標是要把標題和作者區分開,用一個更大的 24px 作為間隔會更加合適。


    5. 使用顏色分隔行

    讓設計細節更高級的10個實用小技巧-藝源科技

    △ 顏色作為區分

    在設計時,做列表界面可能會很無聊,因為只需要不斷復制組件即可完成。但是在用戶看來,閱讀這些列表就會很困難,特別是如果在一行與另一行之間沒有很大區別的時候。因此除了使用線,添加顏色背景對可讀性來說也會有很大幫助,對于設計師來說也更有成就感。


    6. 漸變填充代替文字的投影

    讓設計細節更高級的10個實用小技巧-藝源科技

    △ 標題設計

    特別是背景是動態的,設計標題并在圖片上添加文本就變得非常具有挑戰性。

    通常,帶有動態圖片背景的文字,常見解決方案是添加投影,但它無助于用戶的可讀性。它在字母和單詞周圍增加了更多的視覺混亂,因為它把字母間的留白給填補了。

    對于一些人來說,黑白顏色疊加是解決這類問題的有效方法。但是最近,我發現了使用漸變填充的新方法。

    讓設計細節更高級的10個實用小技巧-藝源科技

    △ 漸變填充方式

    這樣做比在圖片上增加黑色背景或者減少其透明度要容易的多。而且,只是一部分圖片有一些灰度,另一些部分依然保持自然。文本的位置會變得更暗,這樣可以提升文字的可讀性。


    7. 行的長度

    讓設計細節更高級的10個實用小技巧-藝源科技

    大多數設計師通常會把每一行做的很長來適應網頁寬度。但這樣會給用戶帶來視覺壓力,每一行45~65個字符是最理想的。

    如果你為了達到理想效果縮短了行的長度,導致右側有一個非常大的留白空間,如下圖所示:

    讓設計細節更高級的10個實用小技巧-藝源科技

    △ 右側有一個很大的白色區域

    不要懷疑你做的初衷,將文本內容進行居中,就可以消除右側的空白。

    讓設計細節更高級的10個實用小技巧-藝源科技

    △ 居中內容


    8. 將設計組件化

    讓設計細節更高級的10個實用小技巧-藝源科技

    設計不一致的地方在于它并沒有基于規范。當你意識到這個問題時,你可能已經設計了5種不同的卡片,10個不同的按鈕,5個不同的標題樣式等。

    在開始為特定的內容設計界面之前,嘗試回頭看看以前的一些設計,因為很可能會看到可以復用的樣式。

    我們可以把文章的卡片內容復用在藝術圖片卡片上,而不是重新設計一個新的樣式(如上面的例子)。這樣可以節省設計師的時間,并保持界面統一。


    9. 使用品牌顏色作為強調

    讓設計細節更高級的10個實用小技巧-藝源科技

    我們通常認為,品牌色彩必須占據界面顏色的很大一部分。我們很難在干凈簡約的設計中向客戶展示大面積的霓虹黃色,橙色和粉紅色品牌顏色。那么到底怎么做呢?只是需要將它們用來作為強調色即可。


    10. 重點突出

    讓設計細節更高級的10個實用小技巧-藝源科技

    最后,像上面那樣去設計一個列表時,可以讓選擇框,符號或者數字在頁邊。這樣可以使得列表更清晰,可讀性更強。

    希望這10個設計小技巧能夠幫助你提升你的界面設計。

    小程序開發
    標簽: App設計 ui設計 品牌配色 對比度 用戶體驗 組件化設計 經驗分享 設計細節
    *版權申明:本站部分文章由藝源科技收集整理,不代表我們的觀點。如果這篇轉載侵犯您的版權,請及時聯系我們刪除!
    為您推薦
    最新文章
    掃碼加他,免費獲取方案
    久久青草费线频观看地址_少妇久久久久久久久久_亚洲欧洲自拍拍偷午夜色_国产sm重味一区二区三区
    <option id="uausy"></option>
  • <li id="uausy"></li>