UI設(shè)計之方法總結(jié)

掌握方法，就掌握了解決問題的能力。關(guān)于做UI設(shè)計的方法，在這里我總結(jié)為三步：

：產(chǎn)品層面。先弄清楚產(chǎn)品的核心功能是什么？產(chǎn)品定位是什么？用戶畫像是什么？產(chǎn)品目標，商業(yè)目標又是什么？將這些弄明白之后，便于我們確定整個產(chǎn)品基調(diào)以及風格。

第二，交互層面。使用互聯(lián)網(wǎng)產(chǎn)品的過程，就是人機交互的過程。做頁面之前弄清楚頁面交互的邏輯，視覺會發(fā)起某種交互的行為，從而指引用戶視覺的走向與聚焦點，幫助用戶順利完成任務(wù)。

第三，視覺層面。好的UI設(shè)計，不僅能從視覺上提升產(chǎn)品的個性和品味，還能讓產(chǎn)品從操作層面變得舒適簡單，充分體現(xiàn)產(chǎn)品的定位和特點。那么如何在視覺層面作出好的設(shè)計呢？我總結(jié)了一下幾點：

多看，多玩，正確借鑒！

我們平時在瀏覽作品的時候，一定要邊看邊思考邊總結(jié)?。。呐渖?，版式，信息處理，風格上去思考，從而能夠更好的運用在我們的設(shè)計表現(xiàn)上。沒事的時候，多玩一些海量級的產(chǎn)品，借鑒的設(shè)計樣式，體會流暢的交互方式，能夠讓自己積累更多的視覺“經(jīng)驗”。面對眾多的參考，我們要懂得篩選，找到符合自身產(chǎn)品設(shè)計的風格，正確參考！

選擇正確的頁面元素！

打個比方：一件衣服再好看，但是不符合穿衣人的氣質(zhì)，就體現(xiàn)不出穿衣人的美。我們在做頁面設(shè)計的時候，要充分結(jié)合產(chǎn)品的調(diào)性，選擇合適的頁面元素。在這里舉個案例：圖一列表導航區(qū)的icon色彩與細節(jié)都比較豐富細膩，圖二則是簡單的綠色線性圖標，但是圖二從視覺來看頁面更加清晰簡潔，凸顯醫(yī)療的氛圍，與主色相呼應(yīng)，讓整個頁面看上去更加和諧，不突兀。

層次分明，有主有次！

通過字重，字號，字體顏色的區(qū)分，對信息進行分層，幫助用戶快速獲取主要信息，了解次要信息。通過對親密性原則的運用，把握好間距的設(shè)置，能更好的區(qū)分信息模塊，使頁面內(nèi)容看上去更加清晰，增加用戶體驗。通過對卡片樣式的運用，能夠很好的將信息進行整合，對層級進行明顯的區(qū)分。

確保內(nèi)容的可讀性！

頁面服務(wù)與內(nèi)容，內(nèi)容服務(wù)于用戶，那么我們在呈現(xiàn)頁面視覺時，一定要讓用戶清晰直觀的把握信息內(nèi)容。做頁面時，除了合理把握文字的大小，字間距，行間距，此外要注意文字背景顏色的使用，保證文字的可讀性，盡可能清晰直觀的展示文字內(nèi)容，便于用戶獲取信息。在這里給大家看一個案例，圖一卡片的顏色飽和度更高，更加凸顯白色文字；圖二卡片顏色明度過高，白色文字內(nèi)容不明顯，影響用戶的視覺識別。合理把握頁面的色彩，讓頁面更加清晰直觀！

合理留白，減少與頁面無關(guān)的裝飾元素！

留白不僅能調(diào)節(jié)界面的視覺審美效果，更能凸顯主體，使頁面內(nèi)容更加清晰直觀，增加整體頁面的呼吸感。一個好的頁面，一定是內(nèi)容清晰的，頁面的元素都是圍繞功能，內(nèi)容去設(shè)計的，減少不必要的裝飾元素，讓頁面更簡潔。