<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 進階思維 | UI設計師必須掌握的四個設計原則

    2025-1-10    濤濤

     
     
    好的設計作品總是需要遵循一定的設計原則,而優秀的設計師則需要將設計原則根植于心,靈活應運于日常的設計中。通過對大量作品的揣摩和提煉,本文總結了以下四個在 UI 界面設計中至關重要的設計原則。只要仔細思考,反復推敲,必然會打通任督二脈,設計能力穩步提升!
     
    一、對齊
    二、格式塔設計原則
    三、呼吸感
    四、配圖、圖標精細化
     
    進階思維 | UI設計師必須掌握的四個設計原則
     
     
    對齊即秩序、秩序即美
    秩序,名詞,意思是有條理地、有組織地安排各構成部分以求達到正常的運轉或良好的外觀的狀態。
    提取關鍵詞:秩序、有組織、良好的外觀狀態。
     
    生活中漂亮的建筑、整潔的街道、日常看到的事物無處不透露著因秩序帶來的美感,給人以愉悅的感受。
    進階思維 | UI設計師必須掌握的四個設計原則
     
     
    進階思維 | UI設計師必須掌握的四個設計原則
     
     
     
    UI界面設計中的秩序即對齊,相關的內容對齊之后,就為整體的設計奠定了一個良好的基礎,不會雜亂無章,無從下手。
     
    1. 不同內容的對齊需做到:
    •  
      文字與文字,文字與數字對齊
    •  
      文字與圖片對齊
    •  
      圖片與圖片對齊
    •  
      不同內容模塊之間相互對齊
    進階思維 | UI設計師必須掌握的四個設計原則
     
     
    圖 1 給人感覺則更加嚴謹、規律,視覺上也更加美觀。
    圖 2 中對齊不夠嚴謹,給人感受則完全不同。
     
     
    2. 對齊需保持間距的一致性
    UI 頁面設計中,間距建議以 4 或者 8 的倍數為標準(設計圖為 1 倍圖),間距=Xa,a=4 或者 8;
    進階思維 | UI設計師必須掌握的四個設計原則
     
     
    上圖中微信左右間距為16pt,京東左右間距為12pt,均為 4 的倍數。因京東為電商平臺,左右間距略小,可以給內容留出更多空間。
     
     
    進階思維 | UI設計師必須掌握的四個設計原則
     
     
    遠近親疏關系明確,用戶可快速清晰地獲取主要內容。
    格式塔設計原則分為以下幾個類別:親密性,相似性,連續性,封閉性,對稱性,主體/背景。
     
    親密性
    接近或鄰近的物體會被認為是一個整體,相互靠近的元素比相隔較遠的元素則給人感覺會更有聯系。
    進階思維 | UI設計師必須掌握的四個設計原則
     
     
    上圖中人們會優先的認為方塊分為兩列,每一列聯系則更接近,即使第二列中間圖形顏色不一致。
     
    實際案例:
    進階思維 | UI設計師必須掌握的四個設計原則
     
     
    日常工作中,第一種設計就比第二種準確、合理,易于理解。
     
     
    相似性
    物體的形狀、大小、顏色、強度等物理屬性方面比較相似時,這些物體就容易被組織起來而構成一個整體。
    進階思維 | UI設計師必須掌握的四個設計原則
     
     
    看到上面 5 個相似的圖形,顏色一樣的色塊則給人傳達出他們更接近,功能更相似。
     
    實際案例:
    進階思維 | UI設計師必須掌握的四個設計原則
     
     
    支付寶應用中心不同功能模塊中屬性類似的功能icon在顏色的選用上也更加接近。
     
     
    連續性
    如果一個圖形的某些部分可以被看作是連接在一起的,那么這些部分就相對容易被我們認為是一個整體。
    下圖中的三角形線條是沒有閉合的,瀏覽者都會傾向于從視覺上封閉那些開放或未完成的輪廓,把他們當作一個整體。
    進階思維 | UI設計師必須掌握的四個設計原則
     
     
    實際案例:
    進階思維 | UI設計師必須掌握的四個設計原則
     
     
    上圖中兩個知名的公司 logo 都不是完整的,但人們還是會將他們聯想成一個完整的圖形。
     
     
     
    封閉性
    一組元素通常被視為一個可識別的形式或圖形。當對象不完整或部分對象未封閉時,也會視為封閉。
    進階思維 | UI設計師必須掌握的四個設計原則
     
     
    實際案例:
    進階思維 | UI設計師必須掌握的四個設計原則
     
     
    知名音樂 APP 中分類專區、精選視頻第二個內容在當前頁面均沒有展示完整,但我們都知道它是完整的。
     
     
     
    對稱性
    對稱元素往往被視為屬于彼此,會給我們一種穩固和有序的感受。
    進階思維 | UI設計師必須掌握的四個設計原則
     
     
    實際案例:
    進階思維 | UI設計師必須掌握的四個設計原則
     
     
    上圖知名應用市場的PC頁面,兩個紅色框的內容在設計上相互對稱,又互為整體。
     
     
     
    主體/背景
    這就是一個主次層級的關系,當一個畫面中一個物體很大,或在視覺中心的情況下,我們會不自覺的把它當作主體。
    進階思維 | UI設計師必須掌握的四個設計原則
     
     
    實際案例:
    圖片來源于網絡
    圖片來源于網絡
     
    彈窗設計很好的詮釋了主體與背景的關系,突出內容的重要性。
     
     
     
    進階思維 | UI設計師必須掌握的四個設計原則
     
     
    呼吸感即間距,間距對則萬物適
    現代人都在追求遠離都市,親近自然。親近自然的本質還是人們可以擁有更廣闊的視野,更自由的空間,擺脫城市的局促和擁擠。
    圖片來源于網絡
     
    上面圖2的呼吸感給人感覺就很舒適。
     
    實際案例:
    圖片來源于網絡
    圖片來源于網絡
     
     
     
     
    進階思維 | UI設計師必須掌握的四個設計原則
     
     
    精美的配圖,精細的icon設計會給整體頁面設計錦上添花。
     
    1. 配圖
    設計圈非常流行一句話:設計一小時,找圖40分鐘,可見配圖的重要性。
    好的配圖,從構圖、光、影、層次關系都很優秀,本身就是很有品質的作品,放在設計中,效果事半功倍。
    進階思維 | UI設計師必須掌握的四個設計原則
     
     
    相同的商品,配圖不同,圖2的點擊率就比圖1高。
     
     
    2. 圖標
    圖標通常都是功能的入口,好的圖標設計,功能明確,設計精細,可以在很大程度上引導和吸引用戶的點擊,促進轉化。
    圖片來源于網絡
    圖片來源于網絡
     
    而設計意圖不明確的圖標,會使用戶產生疑惑,不利用產品信息的表達,直接造成部分客戶的流失。
     
    以上就是 UI 設計師必須掌握的四個設計原則,希望對大家有幫助,謝謝。
     


    作者:西城門設計
    鏈接:https://www.zcool.com.cn/article/ZMTYzMDU5Ng==.html
    來源:站酷
    著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
     

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 久久精品国产一区二区| 人妻精品久久久久中文字幕69 | 在线观看91精品国产网站| 精品久久久久久国产| 无码人妻精品一区二区三区在线 | 91精品全国免费观看青青| 亚洲国产精品18久久久久久| 狠狠色伊人久久精品综合网| 日本精品不卡视频| 99久久免费国产精精品| 婷婷精品国产亚洲AV麻豆不片| 欧美日韩精品在线观看| 国产精品99在线播放| 四虎4hu永久免费国产精品| 国产精品久久久久天天影视| 精品人妻码一区二区三区| 亚洲欧美精品一区久久中文字幕| 国产欧美一区二区精品性色99| 久久这里只有精品久久| 国产精品久久一区二区三区| 成人国内精品久久久久一区| 久久免费的精品国产V∧| 欧洲精品99毛片免费高清观看| 亚洲综合欧美精品一区二区| 无码AⅤ精品一区二区三区| 日韩精品欧美国产在线| 亚洲福利精品一区二区三区| 精品一区二区三区色花堂| 国产在线观看一区精品| 精品a在线观看| 欧美精品一区二区三区免费观看| 久久亚洲精品无码播放| 人妻少妇看A偷人无码精品| 麻豆国产精品VA在线观看不卡| 久久免费99精品国产自在现线| 欧美日韩精品| 亚洲AV无码久久精品狠狠爱浪潮| 久久久精品国产sm调教网站| 精品不卡一区二区| 精品国产第1页| 欧美精品手机在线播放|