在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)师骗，UI內(nèi)容風(fēng)格的設(shè)計(jì)尤為重要通孽，設(shè)計(jì)的風(fēng)格可以很好的體現(xiàn)產(chǎn)品整體設(shè)計(jì)理念攘残，它在直觀塑造產(chǎn)品形象的同時(shí)拙友，也成為留住用戶的關(guān)鍵。優(yōu)秀的UI風(fēng)格歼郭，在視覺(jué)層面上可以給用戶呈現(xiàn)眼前一亮的用戶體驗(yàn)遗契，是產(chǎn)品吸引并留住用戶的法寶之一。
因此收集在眾多產(chǎn)品中較常出現(xiàn)的UI風(fēng)格病曾，進(jìn)行記錄牍蜂。
來(lái)源：http://www.woshipm.com/pd/75281.html
? ? ? ? ? ?http://www.sj33.cn/digital/wyll/201611/46667.html
一漾根、有沉浸感的全屏式設(shè)計(jì)
沉浸感，說(shuō)的是一種讓你猶如身臨其境的模擬真實(shí)的效果捷兰。就像最初的美術(shù)來(lái)自于對(duì)現(xiàn)實(shí)的模擬一樣立叛，這種擬真的設(shè)計(jì)，至今仍然受用贡茅。
因而我們能看到像這樣的網(wǎng)頁(yè)設(shè)計(jì)秘蛇，它以全屏式的大幅圖像和視頻為主，以一種簡(jiǎn)單卻有效的方式顶考，迅速把你帶入它所設(shè)定的情境之中赁还。
同樣的，在APP設(shè)計(jì)中也有類似的UI設(shè)計(jì)風(fēng)格驹沿，大視野背景圖：
用通欄的圖片作為背景艘策，或者是作為整個(gè)APP的背景，或者是作為內(nèi)容區(qū)塊的背景渊季，既提升了視覺(jué)表現(xiàn)力度朋蔫，又豐富了APP情感化元素。一些信息或操作却汉，浮動(dòng)在圖片上驯妄。這種設(shè)計(jì)方法，對(duì)字體和排版設(shè)計(jì)要求更高合砂，難度也更多青扔，但極容易渲染出氛圍。
大視野背景圖風(fēng)格也分為兩種翩伪，一種是內(nèi)容區(qū)塊中采用大視野背景圖微猖，好處是可以利用圖片做區(qū)塊分割，難度是圖片拼接后的效果不一定好看缘屹，所以可能還需要配合描邊凛剥、留白等設(shè)計(jì)手段優(yōu)化拼接。
另外一種就是全屏背景圖甚至打通狀態(tài)欄轻姿，前景做內(nèi)容排版当悔、導(dǎo)航、操作踢代。好處是設(shè)計(jì)非常具有生命了盲憎，所以有朋友把這種風(fēng)格也叫有計(jì)劃設(shè)計(jì)，說(shuō)的就是回歸大自然的設(shè)計(jì)手法胳挎。
但風(fēng)險(xiǎn)也是很明顯的饼疙，就是前景的信息排布設(shè)計(jì)其實(shí)是有很大挑戰(zhàn)的，必經(jīng)花花綠綠的背景太過(guò)于干擾注意力，導(dǎo)致前景的文字內(nèi)容可讀性會(huì)變?nèi)跻っ小Ｋ孕枰阎匾僮饔妹鞔_的按鈕區(qū)隔出來(lái)屏积，閱讀型文字跟背景圖要用明顯的反色，還是不行的話就把文字浮在半透明蒙層上磅甩，解決可讀性問(wèn)題炊林。
二、長(zhǎng)滾動(dòng)式設(shè)計(jì)
“滾動(dòng)”卷要，并不算是一個(gè)新的設(shè)計(jì)趨勢(shì)渣聚。
在過(guò)去的幾年內(nèi)，滾動(dòng)式的閱讀體驗(yàn)在小屏幕設(shè)備上的發(fā)展尤為突出僧叉。想想你手機(jī)上的 app奕枝，一定有很多采取的是這種滾動(dòng)式設(shè)計(jì)。
正如你所看到的這個(gè)國(guó)家地理的官方網(wǎng)站一樣瓶堕，這種滾動(dòng)設(shè)計(jì)的好處非常直白：它提供給用戶一個(gè)更為流暢的瀏覽體驗(yàn)隘道，以一個(gè)線性的方式，引導(dǎo)用戶在短時(shí)間內(nèi)不受打擾地閱讀到更多的內(nèi)容郎笆。
三 谭梗、 色彩色調(diào)的運(yùn)用
（1）唯一主色調(diào)
僅用一個(gè)主色調(diào)，是不是就能夠很好的表達(dá)界面層次宛蚓、重要信息默辨，并且能展現(xiàn)良好的視覺(jué)效果？事實(shí)上也正是如此苍息，隨著iOS7的發(fā)布，我們看到越來(lái)越多唯一主色調(diào)風(fēng)格的設(shè)計(jì)壹置，會(huì)采用簡(jiǎn)單的色階竞思，配套灰階來(lái)展現(xiàn)信息層次，但是絕不采用更多的顏色钞护。
整個(gè)界面采用粉色的主色調(diào)盖喷，從標(biāo)題欄到標(biāo)簽頁(yè)，從操作按鈕到提示信息难咕，除了黑白灰之外课梳，全部采用粉色設(shè)計(jì)，這種簡(jiǎn)介的的配色風(fēng)格余佃，反倒起到了很好的信息傳達(dá)效果暮刃，也具有良好的視覺(jué)表現(xiàn)力，設(shè)計(jì)師在內(nèi)容排版上的技巧實(shí)在是加分爆土。
可以說(shuō)唯一主色調(diào)設(shè)計(jì)手法椭懊，是真的做到了移動(dòng)端APP的最小化（Minimal）設(shè)計(jì)，減少冗余信息的干擾步势，使用戶專注于主要信息的獲取氧猬。
（2）多彩色
而與唯一主色調(diào)形成對(duì)照關(guān)系的背犯，就是Metro引領(lǐng)的多彩色風(fēng)格，為什么我一定要給我自己的產(chǎn)品定義一種主色調(diào)盅抚，多彩色就不能是主色調(diào)嗎漠魏？于是出現(xiàn)了不同頁(yè)面、不同信息組塊采用撞色多彩色的方式來(lái)設(shè)計(jì)的風(fēng)格妄均，甚至同一個(gè)界面的局部都可以采用多彩撞色柱锹，也產(chǎn)生了不少優(yōu)秀的設(shè)計(jì)。
列表多彩色的設(shè)計(jì)案例丛晦，這種列表多彩色奕纫，用鮮亮的多彩色來(lái)區(qū)分信息，確實(shí)能起到突出的效果烫沙，視覺(jué)上極其醒目匹层。
可是對(duì)于一些內(nèi)容型的APP，也許并不適用锌蓄，比如GoogleKeep的多彩卡片升筏，確實(shí)是在內(nèi)容閱讀上會(huì)起到反效果。百度云記事本第一版設(shè)計(jì)也是多彩色的瘸爽，但是后來(lái)考慮到文字記事比較多您访，為提供良好的文字閱讀體驗(yàn)，還是把多彩色改成灰白色微質(zhì)感的設(shè)計(jì)剪决。
（3）漸變色
2013 年開(kāi)始盛行的扁平化設(shè)計(jì)中灵汪，強(qiáng)調(diào)簡(jiǎn)潔的功能界面區(qū)分，拋棄多余的元素柑潦。至今享言，這種設(shè)計(jì)風(fēng)格依然有著借鑒的價(jià)值。
不過(guò)渗鬼，隨著扁平化的流行览露，它的弊端也開(kāi)始顯現(xiàn)出來(lái)：一時(shí)之間幾乎是所有的平面設(shè)計(jì)都在強(qiáng)調(diào)扁平化，這使得它們趨于雷同譬胎，看上去毫無(wú)個(gè)性差牛。
想要在扁平化設(shè)計(jì)中，加點(diǎn)不一樣的元素讓它更為生動(dòng)堰乔，漸變色不失為一個(gè)好的選擇偏化。
漸變色能讓設(shè)計(jì)看起來(lái)更活潑有趣。
四镐侯、插畫(huà)的運(yùn)用
插畫(huà)可以讓設(shè)計(jì)具有“性格”夹孔，比起傳統(tǒng)的攝影，它是一種直觀的與用戶進(jìn)行情感交流的視覺(jué)語(yǔ)言。
對(duì)于品牌來(lái)說(shuō)搭伤，沒(méi)有什么能比用插畫(huà)來(lái)塑造品牌形象只怎、傳遞品牌性格還要簡(jiǎn)單有效的方式了。作為一種有趣的情感表達(dá)怜俐，插畫(huà)可以是量身定制的身堡，因而它能幫助獲得用戶的信任，讓人感覺(jué)更為親切拍鲤。
首頁(yè)以簡(jiǎn)筆畫(huà)的形式很直觀地表達(dá)了產(chǎn)品的幾大功能贴谎，能夠幫助用戶快速理解。
此外季稳，插畫(huà)的實(shí)現(xiàn)途徑并不唯一擅这。它提供多種創(chuàng)意方向的選擇，不同的插畫(huà)也可以傳遞不同的情緒景鼠。比如簡(jiǎn)筆風(fēng)的手繪看上去單純可愛(ài)仲翎，精細(xì)繁復(fù)的筆觸可以產(chǎn)生一種“高級(jí)”質(zhì)感，當(dāng)插畫(huà)與攝影結(jié)合铛漓，則給人一種虛實(shí)難辨的奇幻感溯香。
五、視差效果
概括說(shuō)來(lái)，視差指的是頁(yè)面的背景，以一個(gè)比前景慢的速度移動(dòng)到千，從而產(chǎn)生一種視覺(jué)上的縱深感。
視差可以結(jié)合圖片湿镀、文本，以一個(gè)不太嚴(yán)格的頁(yè)面布局伐憾，帶來(lái)一種流暢直觀的瀏覽體驗(yàn)勉痴。視差效果的好處顯而易見(jiàn)，它提供了一個(gè)充滿活力的界面塞耕，并且讓用戶印象深刻。
六嘴瓤、卡片式設(shè)計(jì)
一直以來(lái)扫外，這種卡片式設(shè)計(jì)都在移動(dòng)用戶界面設(shè)計(jì)中占有重要的位置。
卡片式設(shè)計(jì)是一個(gè)通用的用戶界面模式廓脆，小到移動(dòng)端的信息瀏覽筛谚，大到重要的會(huì)議演講。它最大的好處大概就是停忿，能在同一個(gè)時(shí)間內(nèi)驾讲，盡可能地、分門(mén)別類地展示大量的信息。它能夠讓用戶進(jìn)行更為快速的瀏覽并做出選擇吮铭。
以卡片為單位时迫，可以形成一套完整的解決方案，處理文本谓晌、圖像掠拳、視頻之間的關(guān)系。此外纸肉，卡片本身也擁有很強(qiáng)的靈活性溺欧。想要給這些普通的卡片設(shè)計(jì)多點(diǎn)花樣的話，設(shè)計(jì)師還可以通過(guò)翻轉(zhuǎn)柏肪、旋轉(zhuǎn)姐刁、疊加和過(guò)濾等方式，來(lái)讓它們發(fā)生變化烦味。
用大圖和標(biāo)題文字吸引用戶聂使，強(qiáng)化了無(wú)盡瀏覽的體驗(yàn)，吸引用戶一直滾動(dòng)下去拐叉。
七岩遗、微交互設(shè)計(jì)
微交互，指的是小屏幕上的動(dòng)畫(huà)形式凤瘦。
從用戶體驗(yàn)的角度來(lái)看宿礁，這種微交互通過(guò)屏幕上的動(dòng)畫(huà)轉(zhuǎn)化，以一種更為明確的視覺(jué)反饋蔬芥，告訴他們梆靖，讓他們知道他們的點(diǎn)擊行為引起了什么，以及下一步會(huì)發(fā)生什么笔诵。
一個(gè)最簡(jiǎn)單的例子是很多網(wǎng)站或者 App 在打開(kāi)欄目時(shí)會(huì)應(yīng)用的設(shè)計(jì)返吻。
聰明的設(shè)計(jì)師能夠把微交互設(shè)計(jì)的娛樂(lè)性放大，讓用戶獲得更多的樂(lè)趣乎婿。從好玩的加載動(dòng)畫(huà)测僵，到流暢的圖標(biāo)轉(zhuǎn)換，一個(gè)好的微交互設(shè)計(jì)谢翎，可以同時(shí)擔(dān)負(fù)娛樂(lè)和通知這兩種功能捍靠。
來(lái)源：http://www.woshipm.com/pd/75281.html
? ? ? ? ? ?http://www.sj33.cn/digital/wyll/201611/46667.html
