2016 年 UI 設(shè)計(jì)趨勢(shì)深度分析 | 蘭亭妙微設(shè)計(jì)
進(jìn)入 2016 年，UI 設(shè)計(jì)行業(yè)在體驗(yàn)設(shè)計(jì)領(lǐng)域涌現(xiàn)出諸多全新設(shè)計(jì)元素與表現(xiàn)手法，彩色投影、雙色調(diào)漸變等設(shè)計(jì)形式在各大設(shè)計(jì)社區(qū)的出現(xiàn)頻率持續(xù)攀升，逐漸成為行業(yè)新的設(shè)計(jì)風(fēng)向。蘭亭妙微設(shè)計(jì)深耕 UI 設(shè)計(jì)領(lǐng)域，始終關(guān)注行業(yè)前沿趨勢(shì)變化，為了讓設(shè)計(jì)實(shí)踐更具方向感，也為給行業(yè)同仁提供參考，我們對(duì) 2016 年 UI 設(shè)計(jì)的主流流行趨勢(shì)進(jìn)行系統(tǒng)梳理與深度分析，提煉出當(dāng)下最具實(shí)踐價(jià)值的設(shè)計(jì)思路與手法。
模糊背景：適配現(xiàn)代風(fēng)，輕量化提升體驗(yàn)
蘭亭妙微設(shè)計(jì)發(fā)現(xiàn)，模糊背景設(shè)計(jì)因與 iOS 毛玻璃效果異曲同工，且高度契合扁平化與現(xiàn)代風(fēng)的設(shè)計(jì)主流，成為 2016 年備受青睞的設(shè)計(jì)手法。這種設(shè)計(jì)形式視覺效果清新雅致，能與幽靈按鈕等當(dāng)下流行的設(shè)計(jì)元素完美搭配，有效提升整體用戶體驗(yàn)。
從實(shí)際應(yīng)用來看，淘寶電影便是典型案例，其將電影海報(bào)進(jìn)行虛化處理作為頁面背景，不僅讓每個(gè)頁面的頭部視覺效果各具特色，排版的視覺表現(xiàn)力大幅提升，更能突出電影信息等核心內(nèi)容。在設(shè)計(jì)落地層面，模糊背景的實(shí)現(xiàn)難度較低，既能讓內(nèi)容模塊的邊界與層級(jí)更清晰，又能規(guī)避復(fù)雜的視覺設(shè)計(jì)，降低設(shè)計(jì)與開發(fā)成本，實(shí)現(xiàn)以極簡(jiǎn)的設(shè)計(jì)投入達(dá)到最優(yōu)的視覺與體驗(yàn)效果。
大字體運(yùn)用：適配大屏趨勢(shì)，強(qiáng)化視覺與體驗(yàn)雙價(jià)值
在大屏手機(jī)成為市場(chǎng)主流的背景下，如何快速抓住用戶注意力、提升用戶停留時(shí)長(zhǎng)，成為 UI 設(shè)計(jì)的重要考量。蘭亭妙微設(shè)計(jì)認(rèn)為，更大更醒目的字體運(yùn)用，恰好契合這一市場(chǎng)需求，成為 2016 年的重要設(shè)計(jì)趨勢(shì)。
大字體在移動(dòng)端界面的呈現(xiàn)，能賦予界面清晰的視覺層次，提升核心元素的視覺重量，給用戶帶來耳目一新的視覺感受。同時(shí)，界面設(shè)計(jì)也逐漸向雜志風(fēng)靠攏，大字體、模塊化布局，搭配圖片替代傳統(tǒng)色塊作為背景，成為新的設(shè)計(jì)范式。優(yōu)質(zhì)的大字體設(shè)計(jì)，不僅要求字體尺寸適配，更要兼顧優(yōu)雅的字型與獨(dú)特的風(fēng)格，這能有效提升頁面的整體氣質(zhì)與品牌特色，甚至能讓用戶因視覺審美契合而留存，即便產(chǎn)品功能未完全滿足需求，這也是提升 APP 用戶粘性的重要設(shè)計(jì)方向。
以蘑菇街產(chǎn)品 uni 的改版為例，其文章詳情頁標(biāo)題與正文字體從原本的 36px、28px 調(diào)整為 56px、34px，在降低頁面信息密度的同時(shí)，大幅提升了用戶的閱讀效率，這也印證了大字體設(shè)計(jì)的實(shí)踐價(jià)值。
空間間隔：替代傳統(tǒng)分割，打造通透簡(jiǎn)約界面
過往的 UI 設(shè)計(jì)中，設(shè)計(jì)師多依賴線條、分隔符劃分內(nèi)容區(qū)塊，卻容易導(dǎo)致界面元素?fù)頂D、視覺雜亂。蘭亭妙微設(shè)計(jì)觀察到，2016 年行業(yè)開始轉(zhuǎn)向以空白空間作為區(qū)塊劃分的核心方式，通過合理的留白與間距設(shè)計(jì)，讓界面更通透、干凈，打造更具現(xiàn)代感的視覺體驗(yàn)。
移除多余的分割線與分隔符，能讓界面的現(xiàn)代化屬性更突出，讓用戶的注意力更聚焦于產(chǎn)品功能本身。同時(shí)，配合圖片與字體的放大處理，能實(shí)現(xiàn)更清晰的層級(jí)劃分，提升產(chǎn)品的易用性。這種以空間間隔為核心的非干擾性設(shè)計(jì)，高度匹配當(dāng)下的設(shè)計(jì)流行風(fēng)格，也更貼合用戶的視覺瀏覽習(xí)慣。
圖片社交平臺(tái) Pinterest 在 2016 年的改版中，大膽去掉卡片背景，讓圖片內(nèi)容的呈現(xiàn)更清晰通透，視覺效果顯著提升；蘑菇街 uni 也進(jìn)行了類似嘗試，摒棄了原本灰色背景搭配白色卡片的區(qū)分方式，通過強(qiáng)化模塊標(biāo)題、優(yōu)化模塊間距實(shí)現(xiàn)區(qū)塊劃分，不僅未造成內(nèi)容元素的混亂，反而讓界面的整體感與連貫性大幅增強(qiáng)。
微交互：以細(xì)節(jié)動(dòng)效，賦予產(chǎn)品溫度與趣味性
微交互設(shè)計(jì)通過圍繞特定使用場(chǎng)景，打造微妙的動(dòng)效與交互反饋，強(qiáng)化視覺表現(xiàn)，成為 2016 年 UI 設(shè)計(jì)中提升用戶體驗(yàn)的關(guān)鍵手法。蘭亭妙微設(shè)計(jì)始終認(rèn)為，優(yōu)秀的微交互能讓用戶感受到設(shè)計(jì)的用心，甚至能創(chuàng)造意想不到的體驗(yàn)驚喜，讓產(chǎn)品與用戶之間的連接更緊密。
當(dāng)用戶完成收藏、觸發(fā)提示等操作時(shí)，恰到好處的微動(dòng)畫能強(qiáng)化操作反饋，將交互控件與其他界面元素有效區(qū)分，同時(shí)作為信號(hào)提示，清晰告知用戶動(dòng)作與任務(wù)的完成狀態(tài)。這類微交互設(shè)計(jì)兼具簡(jiǎn)潔性與自然性，部分趣味性的交互設(shè)計(jì)甚至能吸引用戶主動(dòng)探索，提升產(chǎn)品的可玩性。
即刻 APP 中，點(diǎn)擊無鏈接的內(nèi)容時(shí)，內(nèi)容會(huì)自然左右晃動(dòng)，同時(shí)頂部彈出提示文案，反饋?zhàn)匀磺覠o視覺干擾；豆瓣的大圖查看功能，按住圖片移動(dòng)可顯示背景并自由滑動(dòng)，松開即返回小圖模式，交互邏輯貼合用戶操作習(xí)慣；Uber 點(diǎn)擊查看司機(jī)信息時(shí)，地點(diǎn)信息自動(dòng)隱藏，司機(jī)照片與車輛信息分開展示，查看完畢后自動(dòng)收回，既提升了界面的使用效率，又讓動(dòng)畫過渡流暢自然，這些都是微交互設(shè)計(jì)的優(yōu)秀實(shí)踐。
雙色調(diào)設(shè)計(jì)：漸變回歸，強(qiáng)化視覺層次與重點(diǎn)
在扁平化設(shè)計(jì)長(zhǎng)期占據(jù)主流的階段，漸變?cè)O(shè)計(jì)手法曾一度被弱化，而 2016 年，蘭亭妙微設(shè)計(jì)發(fā)現(xiàn)，漸變色設(shè)計(jì)在行業(yè)中迎來回歸，重新被設(shè)計(jì)師廣泛運(yùn)用，其中雙色調(diào)漸變更是成為漸變?cè)O(shè)計(jì)的主流形式。
漸變色設(shè)計(jì)能有效調(diào)節(jié)頁面中過度使用的圖像與元素，為畫面增添豐富的視覺趣味，完善視覺表現(xiàn)以吸引用戶注意力。而雙色調(diào)漸變作為漸變?cè)O(shè)計(jì)的核心形式，相比同類色漸變，視覺表現(xiàn)力更突出，能讓頁面的層次感更豐富，精準(zhǔn)突出頁面中的重要、關(guān)鍵元素，讓核心信息在視覺上更具沖擊力。
圖文結(jié)合排版：簡(jiǎn)約高效，豐富界面視覺層次
圖文結(jié)合的排版設(shè)計(jì)，最初在新聞、閱讀類應(yīng)用中高頻出現(xiàn)，而 2016 年，這一設(shè)計(jì)形式已普及至各類 APP 的圖片排版中，成為行業(yè)共識(shí)。蘭亭妙微設(shè)計(jì)認(rèn)為，圖文結(jié)合的排版兼具簡(jiǎn)潔性與高效性，能在節(jié)省界面空間的同時(shí)，讓文字與圖片形成互補(bǔ)。
文字與圖片的巧妙搭配，能讓二者相得益彰，文字的疊加不僅填補(bǔ)了圖片在畫面層次上的空白，更能讓界面的視覺表現(xiàn)更豐富，同時(shí)讓信息的傳遞更直觀。無論是資訊展示、商品介紹還是內(nèi)容推薦，圖文結(jié)合的排版都能適配不同場(chǎng)景，提升信息傳遞效率與視覺體驗(yàn)。
空頁面趣味化：重視邊緣場(chǎng)景，打造全維度優(yōu)質(zhì)體驗(yàn)
在以往的 UI 設(shè)計(jì)中，空頁面作為產(chǎn)品的邊緣場(chǎng)景，往往被設(shè)計(jì)師忽視，多以 “單一圖標(biāo) + 簡(jiǎn)單文案” 的形式呈現(xiàn)，僅實(shí)現(xiàn)狀態(tài)告知的基礎(chǔ)功能。而 2016 年，行業(yè)開始重視空頁面的設(shè)計(jì)價(jià)值，蘭亭妙微設(shè)計(jì)也認(rèn)為，空頁面作為用戶體驗(yàn)的重要組成部分，其設(shè)計(jì)優(yōu)化能讓產(chǎn)品的體驗(yàn)更完整、更友好。
當(dāng)下的空頁面設(shè)計(jì)，正朝著趣味化、色彩豐富化的方向發(fā)展，設(shè)計(jì)師通過多樣化的設(shè)計(jì)手法，讓產(chǎn)品即便在無內(nèi)容的狀態(tài)下，也能給用戶帶來良好的視覺感受。蘑菇街在 2016 年 Q2 季度對(duì)旗下產(chǎn)品的空頁面進(jìn)行了系統(tǒng)改版，摒棄了原本以圖標(biāo)為主的設(shè)計(jì)形式，采用趣味性插畫替代，讓空頁面更飽滿，既提升了視覺趣味性，也讓用戶在面對(duì)空狀態(tài)時(shí)擁有更愉悅的體驗(yàn)。
彩色投影：潮流輪回，扁平與空間感的融合
在 Google 發(fā)起的長(zhǎng)投影設(shè)計(jì)逐漸淡出視野后，2016 年一種新的投影設(shè)計(jì)形式 —— 彩色投影開始流行。蘭亭妙微設(shè)計(jì)觀察到，彩色投影的核心設(shè)計(jì)邏輯，是讓投影顏色與整體背景的色系相匹配，讓投影自然融入畫面，同時(shí)讓界面的視覺表現(xiàn)更突出、更飽滿。
設(shè)計(jì)趨勢(shì)的發(fā)展本就存在輪回，扁平化潮流的興起讓擬物風(fēng)格的質(zhì)感元素逐漸退出，而代表空間感的彩色投影，與扁平設(shè)計(jì)的結(jié)合，實(shí)現(xiàn)了視覺效果的新突破，給用戶帶來耳目一新的感受，也因此被廣泛應(yīng)用到各類產(chǎn)品設(shè)計(jì)中，最新版的 Instagram 中，便能看到彩色投影設(shè)計(jì)的應(yīng)用痕跡。
蘑菇街 uni 的頭條頁面也進(jìn)行了相關(guān)嘗試，將輪播 banner 設(shè)計(jì)為彩色投影樣式，背景搭配品牌色，讓每張 banner 都擁有專屬的投影效果，不僅能將用戶的注意力集中在頁面頭部，更通過投影與品牌色的結(jié)合強(qiáng)化視覺對(duì)比，讓重點(diǎn)內(nèi)容的呈現(xiàn)更突出。
結(jié)語
蘭亭妙微設(shè)計(jì)通過對(duì) 2016 年 UI 設(shè)計(jì)趨勢(shì)的梳理與分析發(fā)現(xiàn)，行業(yè)設(shè)計(jì)趨勢(shì)的普及與推廣，往往由頭部互聯(lián)網(wǎng)企業(yè)引領(lǐng)，這類企業(yè)的產(chǎn)品擁有龐大的用戶群體，能讓新的設(shè)計(jì)形式與手法快速被市場(chǎng)認(rèn)知與接受，進(jìn)而推動(dòng)整個(gè) UI 設(shè)計(jì)行業(yè)的創(chuàng)新與發(fā)展。
設(shè)計(jì)趨勢(shì)的迭代速度始終較快，當(dāng)下的流行設(shè)計(jì)手法或許會(huì)在短期內(nèi)被新的形式替代，但 UI 設(shè)計(jì)的核心大方向始終保持穩(wěn)定 —— 以用戶體驗(yàn)為核心，兼顧視覺表現(xiàn)與功能實(shí)用性。蘭亭妙微設(shè)計(jì)也將持續(xù)關(guān)注行業(yè)趨勢(shì)變化，將前沿的設(shè)計(jì)理念與手法融入實(shí)踐，在設(shè)計(jì)創(chuàng)新與用戶體驗(yàn)之間找到最佳平衡點(diǎn)，打造更具價(jià)值的 UI 設(shè)計(jì)作品。
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.gyxygd.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。