• <ul id="eecye"></ul>
    <strike id="eecye"></strike>
  • <strike id="eecye"><menu id="eecye"></menu></strike>
    • <strike id="eecye"></strike>
      <ul id="eecye"><sup id="eecye"></sup></ul>
    • 千鋒教育-做有情懷、有良心、有品質(zhì)的IT職業(yè)教育機構(gòu)

      400-811-9990
      當前位置:首頁  >  技術(shù)文章  >  正文

      在5分鐘內(nèi)學習基本的UI設計

      時間:2022-09-16 13:33    來源:千鋒教育 作者:syq

        如果您對HTML和CSS有基本的了解,并希望在瀏覽器中創(chuàng)建美觀的用戶界面,那就別無所求!在本文中,您將通過了解以下七個基本要素來提高UI設計技能:

      基本的UI設計

        空白

        對準

        反差

        規(guī)模

        字體排印學

        顏色

        視覺層次結(jié)構(gòu)

        空白區(qū)域

        我們將要研究的第一個設計基礎是空白空間,也稱為負空間。顧名思義,它是頁面上元素之間的空間。

        在沒有空白的頁面上被壓扁的元素不僅看起來沒有吸引力,而且難以導航和難以閱讀。

        我們可以通過各種方式調(diào)整空白,包括填充,邊距和行高。查看下面的前后圖像,看看有效的空白可以產(chǎn)生什么不同。

      在5分鐘內(nèi)學習基本的UI設計265

        對準

        接下來是對齊。這是確保每個元素相對于其他元素正確定位的過程,例如,通過確保列在頁面下方對齊。

        從下圖中可以看出,第一頁包含許多不同列中的元素(弱對齊)遠不如第二頁有吸引力和可讀性,后者具有很強的對齊方式。

      在5分鐘內(nèi)學習基本的UI設計373

      在5分鐘內(nèi)學習基本的UI設計375

        反差

        在構(gòu)建頁面或應用程序時,考慮對比度也很重要。對比度是頁面上彼此相鄰顯示的顏色之間的差異。

        從此示例中可以看出,對比度較差的頁面難以閱讀,并且元素不突出。

      在5分鐘內(nèi)學習基本的UI設計458

        具有良好對比度的頁面(如下面的頁面)不僅看起來更好,而且更易于用戶使用。

      在5分鐘內(nèi)學習基本的UI設計497

        為了幫助您獲得恰到好處的對比度,WCAG(Web 內(nèi)容輔助功能指南)建議最小 (AA) 對比度至少為 4.5:1,對于大文本為 3:1,對于大文本,則為增強 (AAA) 對比度為 7:1 或 4.5:1。有一系列插件或網(wǎng)站可以檢查這一點。

        規(guī)模

        縮放也是 UI 的重要組成部分,因此請仔細考慮每個元素的大小。例如,元素相對于頁面應該足夠大(因此沒有大的間隙)。此外,重要性較高的元素(如標題)應大于重要性較低的元素。

        看看下面的之前和之后的圖像,并注意正確縮放時頁面的外觀有多好。

      在5分鐘內(nèi)學習基本的UI設計814

      在5分鐘內(nèi)學習基本的UI設計815

        字體排印學

        排版也對 UI 有很大的影響。有很多方法可以調(diào)整這一點,包括字體選擇,字體大小,對齊方式,字母間距,行高,字體樣式,顏色和對比度。

        作為一般規(guī)則,在單個頁面上使用不超過2個字體系列,并確保不同方面協(xié)同工作,以便建立重要性順序。這稱為視覺層次結(jié)構(gòu),我們將在下面更詳細地介紹。

        如果您遵循以下提示,您的頁面將如下所示:

      在5分鐘內(nèi)學習基本的UI設計985

      在5分鐘內(nèi)學習基本的UI設計1005

        而不是令人困惑和不可讀,就像這樣:

        顏色

        首先塑造用戶體驗的UI設計基礎是顏色。色彩心理學意味著每種顏色都對某些人產(chǎn)生意義 - 例如,紅色可以表示危險,而白色可以喚起清潔和寧靜。

        不過,要小心顏色。含義因文化而異,因此在選擇顏色時,請始終進行研究并考慮目標受眾。

        同樣重要的是要記住,太多的顏色可能會產(chǎn)生糟糕的UI,你選擇使用的顏色應該相互補充。根據(jù)經(jīng)驗,在彼此相鄰的情況下使用相同色調(diào)的較亮或較暗變體不會出錯。看看下面的第二張圖片與第一張圖片相比,眼睛上有多容易!

      在5分鐘內(nèi)學習基本的UI設計1224

      在5分鐘內(nèi)學習基本的UI設計1225

        視覺層次結(jié)構(gòu)

        “設計基礎”列表中的最后一項是“視覺層次結(jié)構(gòu)”。UI 的某些元素比其他元素更重要。視覺層次結(jié)構(gòu)使我們能夠建立這種重要性。

        這可以通過位置,對比度,顏色,比例,樣式或上述內(nèi)容的組合來完成,如下面的第二個圖像所示,它具有比第一個圖像更好的視覺層次結(jié)構(gòu)。

      在5分鐘內(nèi)學習基本的UI設計1361

      在5分鐘內(nèi)學習基本的UI設計1362

        ?

        在本文中,我們介紹了七個主要的設計基礎:空白,顏色,對比度,比例,對齊,排版和視覺層次結(jié)構(gòu)。它們對UI同樣重要 - 如果缺少這些元素之一,則整個用戶體驗將受到影響。因此,請確保在創(chuàng)建UI設計時將它們?nèi)靠紤]在內(nèi)。

      相關(guān)文章

      • 北京總部地址:北京市海淀區(qū)寶盛北里西區(qū)28號中關(guān)村智誠科創(chuàng)大廈4層
        北京沙河校區(qū):北京市昌平區(qū)沙陽路18號北京科技職業(yè)技術(shù)學院廣場服務樓
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發(fā)培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數(shù)據(jù)+人工智能培訓、智能物聯(lián)網(wǎng)+嵌入式培訓、Unity游戲開發(fā)培訓、Go語言開發(fā)培訓、PHP全棧+服務器集群培訓、網(wǎng)絡安全培訓、互聯(lián)網(wǎng)營銷培訓、好程序員
        認證課程:軟考、、PMP認證、紅帽RHCE認證
      • 深圳校區(qū)地址:深圳市寶安區(qū)寶安大道5010號西部硅谷B座A區(qū)6層A605/B座C區(qū)1層108
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發(fā)培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數(shù)據(jù)+人工智能培訓、智能物聯(lián)網(wǎng)+嵌入式培訓、Unity游戲開發(fā)培訓、Go語言開發(fā)培訓、PHP全棧+服務器集群培訓、網(wǎng)絡安全培訓、互聯(lián)網(wǎng)營銷培訓、好程序員
        認證課程:軟考、、PMP認證、紅帽RHCE認證
      • 上海校區(qū)地址:上海市寶山區(qū)同濟支路199號智慧七立方3號樓2-4層
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發(fā)培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數(shù)據(jù)+人工智能培訓、智能物聯(lián)網(wǎng)+嵌入式培訓、Unity游戲開發(fā)培訓、Go語言開發(fā)培訓、PHP全棧+服務器集群培訓、網(wǎng)絡安全培訓、互聯(lián)網(wǎng)營銷培訓、好程序員
        認證課程:軟考、、PMP認證、紅帽RHCE認證
      • 廣州校區(qū)地址:廣州市白云區(qū)永平街永泰學山塘學山文化創(chuàng)意谷A1棟六樓
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發(fā)培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數(shù)據(jù)+人工智能培訓、智能物聯(lián)網(wǎng)+嵌入式培訓、Unity游戲開發(fā)培訓、Go語言開發(fā)培訓、PHP全棧+服務器集群培訓、網(wǎng)絡安全培訓、互聯(lián)網(wǎng)營銷培訓、好程序員
        認證課程:軟考、、PMP認證、紅帽RHCE認證
      • 鄭州二七區(qū)校區(qū)地址:鄭州市二七區(qū)航海中路60號海為科技園C區(qū)10層
        鄭州高新區(qū)校區(qū)地址:鄭州市高新區(qū)金梭路與銀杏路交叉口教育科技產(chǎn)業(yè)園南門D座4層
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發(fā)培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數(shù)據(jù)+人工智能培訓、智能物聯(lián)網(wǎng)+嵌入式培訓、Unity游戲開發(fā)培訓、Go語言開發(fā)培訓、PHP全棧+服務器集群培訓、網(wǎng)絡安全培訓、互聯(lián)網(wǎng)營銷培訓、好程序員
        認證課程:軟考、、PMP認證、紅帽RHCE認證
      • 大連校區(qū)地址:遼寧省大連市高新園區(qū)愛賢街10號大連設計城A座901
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發(fā)培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數(shù)據(jù)+人工智能培訓、智能物聯(lián)網(wǎng)+嵌入式培訓、Unity游戲開發(fā)培訓、Go語言開發(fā)培訓、PHP全棧+服務器集群培訓、網(wǎng)絡安全培訓、互聯(lián)網(wǎng)營銷培訓、好程序員
        認證課程:軟考、、PMP認證、紅帽RHCE認證
      • 武漢金融港校區(qū)地址:武漢市東新區(qū)光谷大道77號金融港B18棟三樓
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發(fā)培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數(shù)據(jù)+人工智能培訓、智能物聯(lián)網(wǎng)+嵌入式培訓、Unity游戲開發(fā)培訓、Go語言開發(fā)培訓、PHP全棧+服務器集群培訓、網(wǎng)絡安全培訓、互聯(lián)網(wǎng)營銷培訓、好程序員
        認證課程:軟考、、PMP認證、紅帽RHCE認證
      • 成都校區(qū)地址:成都市高新區(qū)肖家河沿街138號肖家河大廈三樓
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發(fā)培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數(shù)據(jù)+人工智能培訓、智能物聯(lián)網(wǎng)+嵌入式培訓、Unity游戲開發(fā)培訓、Go語言開發(fā)培訓、PHP全棧+服務器集群培訓、網(wǎng)絡安全培訓、互聯(lián)網(wǎng)營銷培訓、好程序員
        認證課程:軟考、、PMP認證、紅帽RHCE認證
      • 西安校區(qū)地址:西安市雁塔區(qū)高新六路52號立人科技C座西區(qū)4樓
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發(fā)培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數(shù)據(jù)+人工智能培訓、智能物聯(lián)網(wǎng)+嵌入式培訓、Unity游戲開發(fā)培訓、Go語言開發(fā)培訓、PHP全棧+服務器集群培訓、網(wǎng)絡安全培訓、互聯(lián)網(wǎng)營銷培訓、好程序員
        認證課程:軟考、、PMP認證、紅帽RHCE認證
      • 杭州旺田校區(qū):浙江省杭州市江干區(qū)九堡旺田書畫城A座4層
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發(fā)培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數(shù)據(jù)+人工智能培訓、智能物聯(lián)網(wǎng)+嵌入式培訓、Unity游戲開發(fā)培訓、Go語言開發(fā)培訓、PHP全棧+服務器集群培訓、網(wǎng)絡安全培訓、互聯(lián)網(wǎng)營銷培訓、好程序員
        認證課程:軟考、、PMP認證、紅帽RHCE認證
      • 青島校區(qū)地址:青島市市北區(qū)龍城路31號卓越世紀中心4號樓5層
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發(fā)培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數(shù)據(jù)+人工智能培訓、智能物聯(lián)網(wǎng)+嵌入式培訓、Unity游戲開發(fā)培訓、Go語言開發(fā)培訓、PHP全棧+服務器集群培訓、網(wǎng)絡安全培訓、互聯(lián)網(wǎng)營銷培訓、好程序員
        認證課程:軟考、、PMP認證、紅帽RHCE認證
      • 重慶校區(qū)地址:重慶市九龍坡區(qū)科園一路3號渝高大廈9樓
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發(fā)培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數(shù)據(jù)+人工智能培訓、智能物聯(lián)網(wǎng)+嵌入式培訓、Unity游戲開發(fā)培訓、Go語言開發(fā)培訓、PHP全棧+服務器集群培訓、網(wǎng)絡安全培訓、互聯(lián)網(wǎng)營銷培訓、好程序員
        認證課程:軟考、、PMP認證、紅帽RHCE認證
      • 長沙校區(qū)地址:湖南省長沙市岳麓區(qū)麓谷企業(yè)廣場A2棟三單元306號
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發(fā)培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數(shù)據(jù)+人工智能培訓、智能物聯(lián)網(wǎng)+嵌入式培訓、Unity游戲開發(fā)培訓、Go語言開發(fā)培訓、PHP全棧+服務器集群培訓、網(wǎng)絡安全培訓、互聯(lián)網(wǎng)營銷培訓、好程序員
        認證課程:軟考、、PMP認證、紅帽RHCE認證
      • 哈爾濱校區(qū)地址:哈爾濱市松北區(qū)世澤路689號 科技創(chuàng)新城4號樓1101
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發(fā)培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數(shù)據(jù)+人工智能培訓、智能物聯(lián)網(wǎng)+嵌入式培訓、Unity游戲開發(fā)培訓、Go語言開發(fā)培訓、PHP全棧+服務器集群培訓、網(wǎng)絡安全培訓、互聯(lián)網(wǎng)營銷培訓、好程序員
        認證課程:軟考、、PMP認證、紅帽RHCE認證
      • 南京校區(qū)地址:南京市建鄴區(qū)應天大街780號弘輝產(chǎn)業(yè)園1棟2層
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發(fā)培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數(shù)據(jù)+人工智能培訓、智能物聯(lián)網(wǎng)+嵌入式培訓、Unity游戲開發(fā)培訓、Go語言開發(fā)培訓、PHP全棧+服務器集群培訓、網(wǎng)絡安全培訓、互聯(lián)網(wǎng)營銷培訓、好程序員
        認證課程:軟考、、PMP認證、紅帽RHCE認證
      • 太原校區(qū)地址:太原市小店區(qū)長治路230號能源互聯(lián)網(wǎng)大廈6層
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發(fā)培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數(shù)據(jù)+人工智能培訓、智能物聯(lián)網(wǎng)+嵌入式培訓、Unity游戲開發(fā)培訓、Go語言開發(fā)培訓、PHP全棧+服務器集群培訓、網(wǎng)絡安全培訓、互聯(lián)網(wǎng)營銷培訓、好程序員
        認證課程:軟考、、PMP認證、紅帽RHCE認證
      • 沈陽校區(qū)地址:遼寧省沈陽市渾南區(qū)世紀路16號東大軟件園B園B1座A201
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發(fā)培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數(shù)據(jù)+人工智能培訓、智能物聯(lián)網(wǎng)+嵌入式培訓、Unity游戲開發(fā)培訓、Go語言開發(fā)培訓、PHP全棧+服務器集群培訓、網(wǎng)絡安全培訓、互聯(lián)網(wǎng)營銷培訓、好程序員
        認證課程:軟考、、PMP認證、紅帽RHCE認證
      • 合肥校區(qū)地址:合肥市包河區(qū)徽州大道396號東方廣場B座12A
        咨詢電話:400-811-9990
        面授課程:HTML5大前端培訓、JavaEE+分布式開發(fā)培訓、Python全棧+人工智能培訓、全鏈路UI/UE設計培訓、云計算培訓、全棧軟件測試培訓、大數(shù)據(jù)+人工智能培訓、智能物聯(lián)網(wǎng)+嵌入式培訓、Unity游戲開發(fā)培訓、Go語言開發(fā)培訓、PHP全棧+服務器集群培訓、網(wǎng)絡安全培訓、互聯(lián)網(wǎng)營銷培訓、好程序員
        認證課程:軟考、、PMP認證、紅帽RHCE認證
      • 千鋒教育服務號

        關(guān)注千鋒學習站小程序
        隨時隨地免費學習課程

      • 千鋒教育移動站

        掃一掃快速進入
        千鋒移動端頁面

      • 千鋒互聯(lián)服務號

        掃碼匿名提建議
        直達CEO信箱

      主站蜘蛛池模板: 国产日韩精品无码区免费专区国产 | CAOPORM国产精品视频免费| 精品亚洲综合久久中文字幕| 亚洲欧美日韩久久精品| 91精品久久久久久无码| 亚洲精品一级无码鲁丝片| 久久精品国产免费一区| 四虎国产成人永久精品免费| 国产一在线精品一区在线观看| 成人精品一区二区三区中文字幕| 亚洲A∨精品一区二区三区| 亚洲精品在线观看视频| 精品久久久久久中文字幕人妻最新| 久久精品国产精品亚洲艾草网美妙| 国内精品伊人久久久久| 久久精品人人做人人妻人人玩| 久久精品国产只有精品66| 久久精品一区二区三区不卡| 国产在线精品一区二区在线观看| 亚洲国产精品人人做人人爱| 国产亚洲精品AA片在线观看不加载| 国产精品欧美亚洲韩国日本| 久久精品亚洲精品国产色婷| 亚洲国产另类久久久精品小说| 久久无码人妻精品一区二区三区| 亚洲精品人成在线观看| 国产精品岛国久久久久| 国产精品国产三级国产普通话| 亚洲精品字幕在线观看| 久久精品无码专区免费| 国产精品视频不卡| 亚洲视频精品在线| 国产精品久久成人影院| 99热亚洲色精品国产88| 精品欧洲AV无码一区二区男男| 亚洲国产精品VA在线看黑人| 四虎影视永久在线精品| 精品精品国产理论在线观看| 国产精品推荐天天看天天爽| 国产精品成人观看视频| 国产精品久久久99|