<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

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

          2025-1-10    資深UI設計者

           
           
          好的設計作品總是需要遵循一定的設計原則,而優秀的設計師則需要將設計原則根植于心,靈活應運于日常的設計中。通過對大量作品的揣摩和提煉,本文總結了以下四個在 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.sdgs6788.com

          存檔

          伊人久久精品线影院| 久久无码人妻精品一区二区三区 | 久久亚洲中文字幕精品一区| 伊人久久大香线焦综合四虎| 国产Av激情久久无码天堂| 精品国际久久久久999波多野| 综合久久国产九一剧情麻豆| 人妻无码精品久久亚瑟影视| 久久久久久久免费视频| 久久久久久国产精品美女 | 精品久久久无码人妻中文字幕 | 久久精品国产亚洲αv忘忧草| 色综合久久88色综合天天 | 久久这里都是精品| 亚洲综合熟女久久久30p| 久久久久免费看成人影片| 久久精品极品盛宴观看| 9191精品国产免费久久| 狠狠色伊人久久精品综合网| 久久人人妻人人爽人人爽| 久久精品一区二区影院| 久久亚洲精品国产精品婷婷| 久久久艹| 亚洲国产精品久久久久婷婷老年 | 久久国产一片免费观看| 久久这里只精品国产99热| 午夜人妻久久久久久久久| 国产精品狼人久久久久影院 | 久久精品国产亚洲AV无码麻豆| 香港aa三级久久三级| 94久久国产乱子伦精品免费| 麻豆成人久久精品二区三区免费| 欧美粉嫩小泬久久久久久久 | 中文无码久久精品| 99久久成人18免费网站| 国产精品99久久久久久宅男| 久久99这里只有精品国产| 精品国产乱码久久久久久呢| 久久久久国产精品麻豆AR影院 | 成人久久综合网| 久久精品国产只有精品2020|