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

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

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

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

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

多看，多玩，正確借鑒！

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

選擇正確的頁面元素！

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

層次分明，有主有次！

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

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

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

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

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