UI到底做什么，要從UI接到的工作流程來說——產(chǎn)品/交互/設(shè)計(jì)。也就是說一般我們接到的是交互稿。這時(shí)候UI看到一個(gè)交互設(shè)計(jì)，需要考慮的是：這樣的排布是否合理？信息重點(diǎn)在哪里？用戶人群是哪一類？等等分析都是自己的事。

    另外，通常我們拿到的交互稿是這樣子的：

    產(chǎn)出卻要求是這樣子的：

    在解決完上面的問題后，我們按照8個(gè)步驟開始著手UI設(shè)計(jì)：

1、從產(chǎn)品需求入手，考慮我們到底要用什么主色調(diào)。

    比如同樣是團(tuán)購，糯米用的是桃紅色，而美團(tuán)是翠綠色。那么我們?cè)赨I設(shè)計(jì)的時(shí)候首先就要考慮主色調(diào)的問題。

2、配色和輔助色用什么顏色。

    在考慮到產(chǎn)品氣質(zhì)和品牌色的同事，我們經(jīng)常要考慮配合襯托產(chǎn)品主色調(diào)的輔助色。在不同的產(chǎn)品中，輔助色運(yùn)用的策略是不同的，比如我們經(jīng)常說的：鄰近色、對(duì)比色等。都是我們選擇輔助色的方法。

3、用什么風(fēng)格來表達(dá)。

    現(xiàn)在來說，說到風(fēng)格一句話，扁平風(fēng)。但是在扁平中也有區(qū)別。比如下圖，同樣是扁平。但是左圖微微帶有一些光影，而右圖是純扁平。你能說哪個(gè)好或者不好嗎？不能。

    同樣的信息，在UI的表達(dá)上也有不同的表達(dá)方式。那么只能在具體你的UI設(shè)計(jì)中去考慮具體你需要用什么風(fēng)格。這些都是UI的工作內(nèi)容。

4、圖標(biāo)化成什么風(fēng)格。

5、如何表達(dá)情感化設(shè)計(jì)

    在一些細(xì)節(jié)頁面我們常常要考慮情感化設(shè)計(jì)，以此來提升app的品質(zhì)，降低用戶在異常情況下 的挫敗感。同時(shí)好的設(shè)計(jì)師還會(huì)考慮到如何引導(dǎo)用戶去解決，從而滿足產(chǎn)品訴求。不同的產(chǎn)品在做情感化設(shè)計(jì)的時(shí)候方式方法不同，風(fēng)格也不一樣。這些也都是需要UI設(shè)計(jì)來處理的。

6、動(dòng)效如何做

    因?yàn)槭謾C(jī)交互是動(dòng)態(tài)的。所以我們?nèi)绻�可以用在一些跳轉(zhuǎn)頁面引用動(dòng)效設(shè)計(jì)，無意是對(duì)整個(gè)app加分的好方法。

7、萬年的大頭疼圖標(biāo)icon

    一萬個(gè)人有一萬個(gè)答案，那么具體怎么做，還是要考慮用戶、場(chǎng)景、需求等細(xì)節(jié)。產(chǎn)品可以提供方向，但是具體的落地還是需要UI設(shè)計(jì)師來完成。

8、適配、切圖

    本文由培訓(xùn)無憂網(wǎng)長(zhǎng)沙牛耳教育課程顧問老師整理發(fā)布，希望能夠?qū)ο雲(yún)⒓娱L(zhǎng)沙UI設(shè)計(jì)培訓(xùn)的學(xué)生有所幫助。更多課程信息可關(guān)注培訓(xùn)無憂網(wǎng)UI設(shè)計(jì)培訓(xùn)或添加老師微信：15033336050

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://m.dedgn.cn/news-id-3773.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注UI設(shè)計(jì)頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050