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

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

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

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

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

多看，多玩，正確借鑒！

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

選擇正確的頁(yè)面元素！

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

層次分明，有主有次！

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

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

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

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

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