這時候UI看到一個交互設(shè)計,需要考慮的是:
1、這樣的排布是否合理(比如960的屏和1136的屏幕是否都可以容下足夠的設(shè)計關(guān)鍵信息)
2、信息重點在哪里?
3、用戶人群是哪一類?
等等分析都是自己的事。在解決完上面的問題后,我們開始著手UI設(shè)計:
1、從產(chǎn)品需求入手,考慮我們到底要用什么主色調(diào)。
比如同樣是團購,糯米用的是桃紅色,而美團是翠綠色。那么我們在UI設(shè)計的時候首先就要考慮主色調(diào)的問題。
2、配色和輔助色用什么顏色。
在考慮到產(chǎn)品氣質(zhì)和品牌色的同事,我們經(jīng)常要考慮配合襯托產(chǎn)品主色調(diào)的輔助色。在不同的產(chǎn)品中,輔助色運用的策略是不同的,比如我們經(jīng)常說的:鄰近色、對比色等。都是我們選擇輔助色的方法。
3、用什么風(fēng)格來表達。
現(xiàn)在來說,說到風(fēng)格一句話,扁平風(fēng)。但是在扁平中也有區(qū)別。
同樣的信息,在UI的表達上也有不同的表達方式。那么只能在具體你的UI設(shè)計中去考慮具體你需要用什么風(fēng)格。這些都是UI的工作內(nèi)容。
4、圖標(biāo)化成什么風(fēng)格。
同樣是設(shè)置、發(fā)現(xiàn)、首頁,不同的app在基本結(jié)構(gòu)一致的情況下也有很多細微的差別。倒是是要用圓角的icon、還是直角,是用面還是線形,這背后的設(shè)計語言邏輯是什么,設(shè)計目的是什么。都是需要UI設(shè)計來考慮。
比如:同樣是騰訊的產(chǎn)品,手Q和微信的icon就完全不一樣。其原因是由于產(chǎn)品面面對的人群不同,手Q更偏年輕化。同樣,你去看陌陌、來往、易信的聊天icon也是不一樣的。這都是需要UI設(shè)計師一點點摳細節(jié)的去畫出來的。
5、如何表達情感化設(shè)計。
在一些細節(jié)頁面我們常常要考慮情感化設(shè)計,以此來提升app的品質(zhì),降低用戶在異常情況下 的挫敗感。同時好的設(shè)計師還會考慮到如何引導(dǎo)用戶去解決,從而滿足產(chǎn)品訴求。不同的產(chǎn)品在做情感化設(shè)計的時候方式方法不同,風(fēng)格也不一樣。這些也都是需要UI設(shè)計來處理的。
6、動效如何做。
因為手機交互是動態(tài)的。所以我們?nèi)绻梢杂迷谝恍┨D(zhuǎn)頁面引用動效設(shè)計,無意是對整個app加分的好方法。
7、萬年的大頭疼圖標(biāo)icon。
一萬個人有一萬個答案,那么具體怎么做,還是要考慮用戶、場景、需求等細節(jié)。產(chǎn)品可以提供方向,但是具體的落地還是需要UI設(shè)計師來完成。
8、適配、切圖。
也算是萬年話題了。你不是做個好看的東西,要能用,開發(fā)要能開發(fā)。你要考慮iphone456,還要考慮不同的安卓720/1280/1920,甚至有些公司要特殊考慮某些屏幕。
在某些小公司,UI要肩負和產(chǎn)品一起考慮交互的問題。這時候經(jīng)常需要UI在自己儲備足夠的視覺設(shè)計能力的同時有良好的交互設(shè)計能力。