<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          進階思維 | UI設計師必須掌握的四個設計原則

          2025-1-10    資深UI設計者

           
           
          好的設計作品總是需要遵循一定的設計原則,而優秀的設計師則需要將設計原則根植于心,靈活應運于日常的設計中。通過對大量作品的揣摩和提煉,本文總結了以下四個在 UI 界面設計中至關重要的設計原則。只要仔細思考,反復推敲,必然會打通任督二脈,設計能力穩步提升!
           
          一、對齊
          二、格式塔設計原則
          三、呼吸感
          四、配圖、圖標精細化
           
          進階思維 | UI設計師必須掌握的四個設計原則
           
           
          對齊即秩序、秩序即美
          秩序,名詞,意思是有條理地、有組織地安排各構成部分以求達到正常的運轉或良好的外觀的狀態。
          提取關鍵詞:秩序、有組織、良好的外觀狀態。
           
          生活中漂亮的建筑、整潔的街道、日??吹降氖挛餆o處不透露著因秩序帶來的美感,給人以愉悅的感受。
          進階思維 | 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.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合