UI設(shè)計是這樣一步步完成的!

2016-10-28    ui設(shè)計分享達(dá)人

 藍(lán)藍(lán)設(shè)計m.820esy.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計BS界面設(shè)計  cs界面設(shè)計 、 ipad界面設(shè)計  包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù) 

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

UI交互設(shè)計似乎在一夜之間成為大家街談巷議的話題,那么UI設(shè)計到底做什么,這要從UI設(shè)計的工作流程說起——產(chǎn)品/交互/設(shè)計。也就是說一般我們接到的是交互稿。

這時候,UI設(shè)計師看到交互稿,需要考慮的是:

1.信息的排布是否合理?

2.信息重點在哪里?

3.用戶人群是哪一類?

1、選擇色調(diào)

比如同樣是團購,糯米用的是桃紅色,而美團是翠綠色。那么我們在UI設(shè)計的時候首先就要考慮主色調(diào)的問題。

2、

選擇配色和輔助色

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

3、

選擇表達(dá)風(fēng)格

當(dāng)前扁平風(fēng)格大行其道。但是在扁平中也有區(qū)別。比如下圖,同樣是扁平。但是左圖微微帶有一些光影,而右圖是純扁平。你能說哪個好或者不好嗎?不能。

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

4、
選擇圖標(biāo)風(fēng)格

同樣是設(shè)置、發(fā)現(xiàn)、首頁,不同的app在基本結(jié)構(gòu)一致的情況下也有很多細(xì)微的差別。到底是要用圓角的icon、還是直角,是用面還是線形,這背后的設(shè)計語言邏輯是什么,設(shè)計目的是什么。都是需要UI設(shè)計師來考慮。

比如:同樣是騰訊的產(chǎn)品,手Q和微信的icon就完全不一樣。其原因是由于產(chǎn)品面面對的人群不同,手Q更偏年輕化。同樣,你去看陌陌、來往、易信的聊天icon也是不一樣的。這都是需要UI設(shè)計師一點點摳細(xì)節(jié)的去畫出來的。

5、

如何表達(dá)情感化設(shè)計

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

6、

如何設(shè)計動作效果

手機交互是動態(tài)的,所以在一些跳轉(zhuǎn)頁面引用動效設(shè)計,是對app加分的好方法。

7、

設(shè)計圖標(biāo)icon

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

8、

進行適配、切圖

你不僅是做個好看的東西,要能用,開發(fā)要能開發(fā)。你要考慮iphone4iphone5、iphone6,還要考慮不同的安卓720/1280/1920,甚至有些公司要特殊考慮某些屏幕。

在某些小公司,UI要肩負(fù)和產(chǎn)品一起考慮交互的問題。這時候經(jīng)常需要UI師儲備足夠的視覺設(shè)計能力和良好的交互設(shè)計能力。

(注:本文轉(zhuǎn)自微信公眾號UI設(shè)計)

 

分享本文至:

日歷

鏈接

個人資料

存檔