2015-ui-ux-trend-report-1

不論是在手機屏幕上,瀏覽器上,還是智能手表的屏幕上,設計都是促使產品和用戶互動的最重要的驅動力之一。從扁平化設計到 Material Design ,從小屏幕到大屏幕,我分析了一下設計的趨勢演變規律,并同你分享一下我的一些拙見。到底有哪些趨勢?這些趨勢的存在,對于用戶有何裨益?它們將會創建怎樣的未來?這就是今天的文章所要探討的內容。

作為近年設計領域中最具有代表性的設計風格,我們不妨從扁平風和 Material Design 入手,聊聊它們是怎樣出現、如何成為現如今的設計趨勢。

更輕量的設計

lighter design

Shot by Ghani Pradita

它是什么

相比于使用大量漸變和陰影堆砌細節的擬物化設計,扁平化設計在美感、程序設計以及流行趨勢上,有著更為明顯的優勢。扁平化的設計對于負空間的運用有著更高的要求,不再對漸變和陰影有太多依賴,用簡約的界面,專注于核心的信息,將流程中無法提高用戶操作效率的設計元素移除。

為什么

輕量級的設計可以避免用戶分心,引導用戶專注于屏幕上更有意義更重要的內容,導航也因此更容易,時尚、現代、簡約的美學也更符合目前品牌設計的訴求。

用單一字體貫穿整個設計

16W8wgRwwCAEdeY7w87UToA1

Shot by Brian Plemons

是什么

降低單屏的字體類型的數量,從而強化排版的設計感和美感。不同的字體擁有不同的氣質,帶來不同的感受,字體大小和疏密的排列則能更好的區分內容的親疏關系。

為什么

通過橫貫整個設計的單一字體來擁抱一致性設計,并不是只有品牌設計會做的事情,應用程序、桌面和手機網站都可以通過這樣的優化統一多平臺的體驗。另外,單一字體也能讓界面更加簡單易用,提升內容識別度。

用空間來間隔

space

Shot by Eric Atwell

是什么

通過線條和分隔符來進行劃分內容區塊是之前所流行的處理方式,但是這樣會讓界面擁擠不堪。通過空白空間來劃分區塊能讓界面更加通透,構建更優秀更干凈的界面。

為什么

移除分割線和分隔符可以為界面提供更加現代化的外觀,專注于功能,比如可以將圖片和字體放大,提供更加清晰的層級劃分和更優的易用性。通過空間間隔來劃分區塊是一種非干擾性的設計,更匹配時下流行的風格和設計的需求。

高亮的數據

1-8wWjJZ6LViCUO4XsiiUT2w

Shot by Morgan Allan Knutson

是什么

用戶更偏愛簡單的界面,大號的字體和醒目的色彩,希望特定的數據在最重要的位置顯示出來,而這些被高亮處理的數據會隨著用戶的狀態變化而靈活地變化。

為什么

通過增加字體尺寸和顯眼的色彩來將用戶的注意力轉到特定的區域,這種方式更加潛移默化,不顯突兀。在這樣的設計之下,用戶會更快地接受信息和數據,更高效地導航。

微交互

19u_Q6CdhqeeaLvcfnIiUsw

Shot by Kirill

是什么

圍繞特定的用例,通過微妙細小的動效或者交互強化它的視覺效果。通常當你完成某個過程的時候,比如收藏某個條目、彈出提示框,這個時候微妙的動畫會強化這些動作,將這些控件同其他的元素區分開來。

為什么

這些微交互能夠作為信號提示,來提醒用戶動作和任務的完成,它們更簡單、更有趣也更加吸引人。微交互通過微妙的細節和動效賦予界面更強大的生命力。

簡約的配色

1w3OQf58AIVLEBU8t9nvpVQ

Shot by Ari

是什么

扁平風在2013年開始大規模流行,令簡約設計風成為了大勢所趨。為了更為契合簡約的設計理念,設計師和用戶都逐漸開始喜歡用更少的色彩來完成設計。

為什么

色彩的運用是營造情緒、吸引用戶吸引力、構建品牌意識必不可少的組成部分。更少的色彩能讓品牌形象更加突出,色彩的減少意味著凝聚性的提升,用戶更容易買賬,因為它不容易讓人分心,突出主要功能和內容。

分層的界面

11I8p4EyiQ0Co3zXmCY8mZw

Shot by Roman Nurik

是什么

擬物化的設計在幾年前占據著設計領域的主流,隨后扁平化設計的革命將擬物化打入冷宮??墒请S著時間的推移,層級更多、細節更豐富的扁平化2.0出現了,分層的扁平化界面讓二維化的扁平風擁有了深度和更多維度,為用戶帶來一種更為“真實”的體驗。

為什么

早期的扁平化設計存在“過于扁平”的風險,而扁平化2.0的出現,讓扁平化的設計擁有了層級,以Material Design為代表的這類設計風格,通過陰影和分層顯示,讓界面步入3D,讓不同的層有了對應的Z軸座標。不同的組件之間的相互關系開始越來越清晰了。

幽靈按鈕

1h_mVzj6mMWPNlY4KArH05Q

Shot by Gleb Kuznetsov

是什么

幽靈按鈕是無色彩填充的透明按鈕,它的邊界用非常纖細的線勾勒出來,本身的形狀通常是圓角矩形或者方形,這些按鈕的名稱用簡單的文字來標識。

為什么

這些干凈而時尚的按鈕設計同樣可以抓住用戶的吸引力,同時還不會顯得過于突兀。幽靈按鈕讓按鈕在界面擁有了更高的融入度,甚至于按鈕可以在界面中擁有不同的層級。在Material Design中,幽靈按鈕還擁有輕微的陰影來表現層級。

手勢操作

1-7rSzeXkTl8EJSTexLWscKA

Shot bu Javi Pérez

是什么

設備借助陀螺儀和運動傳感器,能夠感知速度、加速度、方向等參數,識別運動和手勢。用戶同屏幕之間的交互從簡單的點擊延伸到現實生活中的手勢、動作等不同的交互方式。

為什么

用戶熟悉手勢,當用戶需要刪除條目的時候,不論用戶是是什么年齡,性別,社會背景,將條目移出屏幕都是下意識并且易于理解的操作。更少的點擊,更多的滾動和滑動令用戶體驗有了極大的提升。

動效

motion

Shot by Eddie Lobanovskiy

是什么

隨著技術的發展,現在開發人員可以借助樣式表來充分控制動畫效果?;趧有У脑O計包含不同的形式,過渡效果、動畫、甚至是有深度和紋理的3D效果。動效的存在有助于用戶理解內容,熟悉界面,讓更重要的部分被動效呈現出來。

為什么

動效會吸引用戶的注意力,而不會被分散。通過視覺上的變化,提高用戶的參與感,并且取悅用戶。

更短的流程

1-hkvH_hf33gkxKo5JSxUKUA

Shot by Jan Losert

是什么

越來越多的應用開始使用單頁面來搞定整個操作流程或者多個步驟,替代之前流行的多界面導航,降低用戶在操作過程中花費的時間和精力。

為什么

移動端本身的特征決定了移動端用戶對程序的流程和易用性有更高的要求,將操作流程最小化有利于提升移動端的用戶體驗,從而提高操作的轉化率和操作頻率。

設計標準

1YA_O646mRbL3ZXzmbTYI4Q

Shot by Bill S Kenney

是什么

在設計項目開始之初,設定一套標準化的視覺語言,包含色彩、圖標、字體、排版等因素。

為什么

標準化的設計有助于建立應用程序和不同平臺之間的一致性,它可以讓項目更平穩地推進,更容易修改也可以減少錯誤的發生。

原型設計

proto

Shot by Ramil Derogongun

是什么

這是準備階段產品的早期可用版本。借助原型可以幫助設計和開發人員洞悉產品的功能,以最低的成本發現提升用戶體驗的可行方案和潛在可能性。

為什么

原型這種“低成本實驗”可以讓產品和項目的必要部分更清晰地展現出來,明確功能范圍和需求。使用原型讓開發人員有足夠的時間和精力投放于必要的地方,從測試中獲取信息,為迭代產品確立方向。

【你必須知道的設計趨勢】

用戶體驗設計趨勢:
《設計行業大起底!圖說2015用戶體驗行業調查報告》

配色搭配趨勢:
《業界良心!2015年最優秀的20款網站配色方案(附配色工具)》

網頁設計趨勢:
《你知道了嗎?2015年網頁設計的9大趨勢》

原文地址:medium
優設譯者:@陳子木

「子木說」

扁平化似乎讓UI設計的門檻更低了,實際上目前的設計趨勢對設計師的要求更高了,排版和配色易學難精,動效和交互更是門檻不低,流程設計和原型設計還考驗團隊合作能力……

本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量99萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的”福利”嗎?
添加 優秀網頁設計 微信號:【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加:

sdcweixin

點贊
收藏

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏