上海UI設(shè)計(jì)培訓(xùn)來班啦，大家可隨時(shí)關(guān)注獵學(xué)網(wǎng)UI設(shè)計(jì)培訓(xùn)頻道，我們將第一時(shí)間公布相關(guān)培訓(xùn)信息。

一、唯一主色調(diào)|Simplecolorschemes

為什么我們要定義一個(gè)界面多種顏色?上海跑贏職場ui培訓(xùn)學(xué)校指出;僅僅用一個(gè)主色調(diào)，是不是就能夠很好的表達(dá)界面層次、重要信息，并且能展現(xiàn)良好的視覺效果?事實(shí)上也正是如此，隨著iOS9的發(fā)布，我們看到越來越多唯一主色調(diào)風(fēng)格的設(shè)計(jì)，會采用簡單的色階，配套灰階來展現(xiàn)信息層次，但是絕不采用更多的顏色。

卡塔爾航空公司

卡塔爾公司航空就是這樣的設(shè)計(jì)案例，整個(gè)界面采用粉色的主色調(diào)，從標(biāo)題欄到標(biāo)簽頁，從操作按鈕到提示信息，除了黑白灰之外，全部采用粉色設(shè)計(jì)，這種簡介的的配色風(fēng)格，反倒起到了很好的信息傳達(dá)效果，也具有良好的視覺表現(xiàn)力，設(shè)計(jì)師在內(nèi)容排版上的技巧實(shí)在是加分。

Readability采用紅色主色調(diào)設(shè)計(jì)，連提示信息背景色、線性按鈕和圖標(biāo)都采用紅色主色調(diào)，界面和LOGO也完全是一個(gè)色系的。而Vivino采用藍(lán)色主色調(diào)設(shè)計(jì)，信息用深藍(lán)、淺藍(lán)加以區(qū)隔。Eidetic采用橙色主色調(diào)設(shè)計(jì)，其中的關(guān)鍵操作按鈕甚至整個(gè)用橙色提亮，信息圖標(biāo)也用深橙色、淺橙色來表達(dá)程度。

可以說唯一主色調(diào)設(shè)計(jì)手法，是真的做到了移動端APP的最小化(Minimal)設(shè)計(jì)，減少冗余信息的干擾，使用戶專注于主要信息的獲取。

二、多彩色|Hypercolour

而與唯一主色調(diào)形成對照關(guān)系的，就是Metro引領(lǐng)的多彩色風(fēng)格，為什么我一定要給我自己的產(chǎn)品定義一種主色調(diào)，多彩色就不能是主色調(diào)嗎?于是出現(xiàn)了不同頁面、不同信息組塊采用撞色多彩色的方式來設(shè)計(jì)的風(fēng)格，甚至同一個(gè)界面的局部都可以采用多彩撞色，也產(chǎn)生了不少優(yōu)秀的設(shè)計(jì)。

優(yōu)衣庫出品的RECIPE，是一個(gè)讓人眼前一亮的設(shè)計(jì)案例，多彩色的設(shè)計(jì)風(fēng)格融入到整個(gè)APP中，不論是切換標(biāo)簽頁，還是在內(nèi)容組塊中滾動，都會變更不同的主題色。色彩切換的時(shí)候，還會有淡入淡出的效果，讓切換變得自然而然，完全不生硬。RECIPE的番茄鐘計(jì)時(shí)器模塊，會一邊計(jì)時(shí)一邊播放優(yōu)美的美食背景音樂，同時(shí)切換不同的主體顏色，隨著主體顏色的變更，所有的前景文案、圖片也會變更為該色系，加上清晰度極高的美食圖片，真的是視覺+聽覺的雙重享受。RECIPE真的是2015年難得一見的優(yōu)秀設(shè)計(jì)。

而PeekCalendar、EveryWeather和Harmony這三個(gè)APP，是列表多彩色的設(shè)計(jì)案例，這種列表多彩色，不知道是不是從Clear開始再度流行起立的，用鮮亮的多彩色來區(qū)分信息，確實(shí)能起到突出的效果，視覺上極其醒目。

可是對于一些內(nèi)容型的APP，也許并不適用，比如GoogleKeep的多彩卡片，確實(shí)是在內(nèi)容閱讀上會起到反效果。百度云記事本第一版設(shè)計(jì)也是多彩色的，但是后來考慮到文字記事比較多，為提供良好的文字閱讀體驗(yàn)，還是把多彩色改成灰白色微質(zhì)感的設(shè)計(jì)。

三、數(shù)據(jù)可視化|DataVisualization

至于對信息的呈現(xiàn)，越來越多的APP開始嘗試數(shù)據(jù)可視化、信息圖表化，讓界面上不僅僅是列表，還有更多直觀的餅圖、扇形圖、折線型、柱狀圖等等豐富的表達(dá)方式。表面上看起來也不是很難的事情，但是若真想實(shí)現(xiàn)，背后的復(fù)雜程度也不容小窺。

NiceWeather用曲線圖來表達(dá)溫度的變化，JawboneUP用柱狀圖來表達(dá)每天的完成情況，PICOOC用折線圖來表達(dá)每天體重、體脂的變化。移動APP利用數(shù)據(jù)可視化，可以在更小的屏幕空間內(nèi)，更立體化的展示內(nèi)容。

四、卡片化|Cards

卡片也是一種采用較多的設(shè)計(jì)語言形式，無法考究這種卡片的設(shè)計(jì)，是從Metro的tiles流行起來的，還是從Pinterest的瀑布流流行起來的?？傊覀兛梢园l(fā)現(xiàn)，Google的移動端產(chǎn)品設(shè)計(jì)已經(jīng)全面卡片化了，甚至Web端也沿用了這種統(tǒng)一的設(shè)計(jì)語言，據(jù)說是Google搜索的體驗(yàn)負(fù)責(zé)人引領(lǐng)的設(shè)計(jì)語言統(tǒng)一升級。

luvocracy的卡片流突出信息本身，用大圖和標(biāo)題文字吸引用戶，強(qiáng)化了無盡瀏覽的體驗(yàn)，吸引用戶一直滾動下去。GoogleNow的卡片則更加的定制化、個(gè)性化。有的卡片是用來做用戶教育的，有的卡片是用來告知天氣的，有的卡片是呈現(xiàn)聯(lián)系人列表的，有點(diǎn)卡片是顯示待辦事項(xiàng)的。不同的卡片都遵循在一個(gè)統(tǒng)一寬度和樣式的卡片內(nèi)，進(jìn)行發(fā)揮和設(shè)計(jì)。既保證了卡片和卡片之間的獨(dú)立性，又保證了服務(wù)和服務(wù)的統(tǒng)一化設(shè)計(jì)。Shazam則用一種趣味的卡片樣式，呈現(xiàn)專輯和歌曲。

五、內(nèi)容為王|ContentFirst

APP產(chǎn)品的發(fā)展，最終的路徑勢必會跟web產(chǎn)品一樣，突出內(nèi)容，內(nèi)容為王，當(dāng)繁華褪盡，纖塵不染，再重新去看APP存在的意義，不外乎是給用戶提供更好的服務(wù)。與內(nèi)容相比，所有的設(shè)計(jì)和包裝，都不外乎是一種表現(xiàn)手法，而真正具有價(jià)值的APP，一定是內(nèi)容取勝的。Facebook用190億美金收購了Whatsapp，這個(gè)全是用統(tǒng)控件搭建的APP，并不是因?yàn)樗脑O(shè)計(jì)多出眾，而是因?yàn)樗姆?wù)足夠有價(jià)值。

以上就是有關(guān)2016年手機(jī)u設(shè)計(jì)i培訓(xùn)的發(fā)展歷史的介紹，更多的(UI設(shè)計(jì)培訓(xùn)課程、UI設(shè)計(jì)培訓(xùn)機(jī)構(gòu))，敬請關(guān)注獵學(xué)網(wǎng)UI設(shè)計(jì)培訓(xùn)頁面!

溫馨提示：獵學(xué)網(wǎng)鄭重承諾，本網(wǎng)站(獵學(xué)網(wǎng))以誠信、高效、安全、擔(dān)保的產(chǎn)品理念，作為“學(xué)習(xí)+服務(wù)”的第三方平臺，致力于打造良好的口碑服務(wù)平臺。站內(nèi)收錄的中專、大專、自考、成考、專升本、網(wǎng)絡(luò)教育等機(jī)構(gòu)，都經(jīng)過獵學(xué)網(wǎng)核實(shí)認(rèn)證!如果廣大考生有提升學(xué)歷的需求，敬請關(guān)注獵學(xué)網(wǎng)，歡迎通過了解!